@extends('layouts.app')
@section('title')
    PURCHASE REQUISITION VERIFICATION AND APPROVAL
@endsection
@section('button')
    <a type="button" class="btn btn-info" href="{{ route('purchase_requisition.index') }}">
        <i class="bi bi-arrow-left"></i> Back
    </a>
@endsection
@section('content')
    <div class="card">
        <form method="post"
            @if ($action == 'check') action="{{ route('purchase_requisition.check', $purchase_requisitions->id) }}" @elseif($action == 'approve') action="{{ route('purchase_requisition.approve', $purchase_requisitions->id) }}" @elseif($action == 'verify_hod') action="{{ route('purchase_requisition.verify_hod', $purchase_requisitions->id) }}" @elseif($action == 'verify_acc') action="{{ route('purchase_requisition.verify_acc', $purchase_requisitions->id) }}" @endif
            enctype="multipart/form-data">
            @csrf
            <div class="card-body">
                <div class="row">

                    <div class="col-lg-6 col-sm-6 col-12">
                        <div class="row align-items-center">
                            <label for="" class="form-label col-4">Category:</label>
                            <div class="col-6">
                                <select disabled name="category" id="categorySelect" onchange="handleCategoryChange()"
                                    class="form-select rounded-4" style="width: 100% !important">

                                    <option value="local" @selected($purchase_requisitions->category == 'local')>Local</option>
                                    <option value="oversea" @selected($purchase_requisitions->category == 'oversea')>Oversea</option>
                                </select>
                            </div>
                        </div>
                    </div>


                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="pr_no" class="form-label col-4">PR No.</label>
                            <div class="col-6">
                                <input type="text" readonly name="pr_no" value="{{ $purchase_requisitions->pr_no }}"
                                    readonly id="part_name" class="form-control rounded-4">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="" class="form-label col-4">Date :</label>
                            <div class="col-6">
                                <input type="text"
                                    value="{{ \Carbon\Carbon::createFromFormat('d/m/Y', $purchase_requisitions->date)->format('d/m/Y') }}"
                                    id="date" name="date" class="form-control rounded-4">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="requested_by" class="form-label col-4">Requested By</label>
                            <div class="col-6">
                                <input type="text" readonly name="requested_by" id="requested_by"
                                    class="form-control rounded-4"
                                    value="{{ $purchase_requisitions->user->user_name ?? '' }}">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="" class="form-label col-4">Department</label>
                            <div class="col-6">
                                <input type="text" readonly value="{{ $department ? $department->name : '' }}"
                                    class="form-control rounded-4">
                            </div>
                            <input type="text" hidden name="department_id"
                                value="{{ $department ? $department->id : '' }}" class="form-control">
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="category" class="form-label col-4">Currency:</label>
                            <div class="col-6">
                                <select name="currency" id="currencyDropdown" class="form-select rounded-4"
                                    style="width: 100% !important;">
                                    <option value="-1">Select a Currency</option>
                                    @foreach ($Currency as $item)
                                        <option value="{{ $item->id }}" @selected($item->id == $purchase_requisitions->currency_id)>
                                            {{ $item->symbol }} - {{ $item->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row d-flex flex-row-reverse">
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="category" class="form-label col-4">Currency Rate(In MYR):</label>
                            <div class="col-6">
                                <input type="number" step="0.01" name="currency_rate" id="currency_rate"
                                    class="form-control rounded-4" value="{{ $purchase_requisitions->currency_rate }}"
                                    placeholder="Currecny Rate for Selected Currency ">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row mt-4">
                    <div class="col-md-12">
                        <h3>Item List</h3>
                        <div class="row">
                            <div class="col-sm-12 my-5">
                                <div class="table-responsive">
                                    <table class="table table-bordered m-0" id="mainTable">
                                        <thead>
                                            <tr>
                                                <th>No.</th>
                                                <th>Part No.</th>
                                                <th>Part Name</th>
                                                <th>Description</th>
                                                <th>UOM</th>
                                                <th> UNIT Price (<span id="currencyUnitText">based currency</span>)</th>
                                                <th>Quantity (UNIT)</th>
                                                <th>Total Amount (<span id="currencyUnitText1">based currency</span>)</th>
                                                <th>Required Date</th>
                                                <th>Purpose</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($purchase_requisition_details as $purchase_requisition_detail)
                                                <tr>
                                                    <td>
                                                        {{ $loop->iteration }}
                                                    </td>
                                                    <td>
                                                        {{ $purchase_requisition_detail->product->part_no }}
                                                    </td>
                                                    <td>
                                                        {{ $purchase_requisition_detail->product->part_name }}
                                                    </td>
                                                    <td>
                                                        {{ $purchase_requisition_detail->description }}
                                                    </td>
                                                    <td>
                                                        {{ $purchase_requisition_detail->product->units->name }}
                                                    </td>
                                                    <td>
                                                        {{ $purchase_requisition_detail->price }}
                                                    </td>
                                                    <td>
                                                        {{ $purchase_requisition_detail->qty }}
                                                    </td>
                                                    <td>
                                                        {{ $purchase_requisition_detail->total }}
                                                    </td>
                                                    <td>

                                                        {{ $purchase_requisition_detail->required_date }}
                                                    </td>
                                                    <td>
                                                        {{ $purchase_requisition_detail->purpose }}
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="" class="form-label col-4">Total Amount (based currency)</label>
                            <div class="col-6">
                                <input type="text" id="total_based_currency" readonly name="total_based_currency"
                                    placeholder="sum total amount (based currency)"
                                    value="{{ $purchase_requisitions->total_based_currency }}"
                                    class="form-control rounded-4">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="" class="form-label col-4">Budget Amount (based currency)</label>
                            <div class="col-6">
                                <input type="number" step="0.01" id="budget_amount_based_currency"
                                    name="budget_amount_based_currency" placeholder="Budget Amount (based currency)"
                                    class="form-control rounded-4"
                                    value="{{ $purchase_requisitions->budget_amount_based_currency }}">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="" class="form-label col-4">Grand Total</label>
                            <div class="col-6">
                                <input disabled type="text" id="grandtotal"
                                    value="{{ $purchase_requisitions->total }}" readonly name="total"
                                    class="form-control">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="" class="form-label col-4">Budget Amount (MYR)</label>
                            <div class="col-6">
                                <input disabled type="text" id="grandtotal"
                                    value="{{ $purchase_requisitions->budget_amount }}" name="budget_amount"
                                    placeholder="sum total amount" class="form-control rounded-4">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="" class="form-label col-4">Existing/ Recommended supplier, if any:</label>
                            <div class="col-6">
                                <select disabled name="supplier_id" id="supplier_id" class="form-select rounded-4"
                                    style="width: 100% !important">
                                    <option value="{{ $purchase_requisitions->supplier_id }}" disabled selected>
                                        {{ $purchase_requisitions->supplier->name ?? ''}}</option>
                                </select>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="row">
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="" class="form-label">Special Requirement</label>
                            <div class="col-8">
                                <textarea disabled id="special_requirement" name="special_requirement" placeholder="special_requirement"
                                    class="form-control rounded-4 auto-resize" oninput="autoResizeTextarea(this)">{{ $purchase_requisitions->special_requirement }}</textarea>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="card-footer">
                    <div class="row">
                        <div class="d-flex gap-2 justify-content-end col-12">
                            @if ($action == 'check')
                                <button type="submit" class="btn btn-primary">Check</button>
                            @elseif($action == 'approve')
                                <button type="submit" class="btn btn-primary">Approve</button>
                                <button type="button" id="decline_button" value="decline"
                                    class="btn btn-danger">Decline</button>
                                <button type="button" id="cancel_button" value="cancel"
                                    class="btn btn-warning">Cancel</button>
                            @elseif($action == 'verify_hod')
                                <button type="submit" class="btn btn-primary">Verify HOD</button>
                                <button type="button" id="decline_button" value="decline"
                                    class="btn btn-danger">Decline</button>
                                <button type="button" id="cancel_button" value="cancel"
                                    class="btn btn-warning">Cancel</button>
                            @elseif($action == 'verify_acc')
                                <button type="submit" class="btn btn-primary">Verify ACC</button>
                                <button type="button" id="decline_button" value="decline"
                                    class="btn btn-danger">Decline</button>
                                <button type="button" id="cancel_button" value="cancel"
                                    class="btn btn-warning">Cancel</button>
                            @endif
                        </div>
                    </div>
                </div>
        </form>

    </div>
    </div>
    <!-- Modal verify -->
    {{-- DECLINE / CANCEL MODAL --}}
    <div class="modal fade show" id="exampleModalCenter" tabindex="-1" aria-labelledby="exampleModalCenterTitle"
        aria-modal="true" role="dialog" style="display: none;">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalCenterTitle">
                        DECLINE REASON
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form action="{{ route('purchase_requisition.decline_cancel', $purchase_requisitions->id) }}"
                    method="POST" id="decline_cancel_form">
                    @csrf
                    <div class="modal-body">
                        <input type="hidden" name="decline_cancel" id="decline_cancel" value="decline">
                        <textarea name="decline_cancel_reason" id="decline_cancel_reason" rows="5" class="form-control"
                            placeholder="Enter Reason"></textarea>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-danger" id="decline_cancel_button">
                            DECLINE
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    </div>

    <!-- Include Bootstrap Datepicker CSS and JS -->
    <link rel="stylesheet" href="{{ asset('assets/css/bootstrap-datepicker.min.css') }}">
    <script src="{{ asset('assets/js/bootstrap-datepicker.min.js') }}"></script>

    <script>
        $(document).ready(function() {
            $('#date').datepicker({
                format: 'dd-mm-yyyy',
                autoclose: true,
                todayHighlight: true,
                orientation: 'bottom'
            });
        });
        $('#decline_button, #cancel_button').on('click', function() {
            $('#decline_cancel').val($(this).val());
            if ($('#decline_cancel').val() == 'decline') {
                $('#exampleModalCenterTitle').text('DECLINE REASON');
                $('#decline_cancel_button').text('DECLINE');
            } else {
                $('#exampleModalCenterTitle').text('CANCEL REASON');
                $('#decline_cancel_button').text('CANCEL');
            }
            $('#exampleModalCenter').modal('show');
        });

        function autoResizeTextarea(textarea) {
            const isDisabled = textarea.disabled;
            if (isDisabled) textarea.disabled = false;

            textarea.style.height = 'auto';
            textarea.style.height = textarea.scrollHeight + 'px';

            if (isDisabled) textarea.disabled = true;
        }

        document.addEventListener('DOMContentLoaded', function() {
            const textarea = document.getElementById('special_requirement');
            if (textarea) {
                autoResizeTextarea(textarea);
            }
        });
        function updateCurrencyUnitText() {
            const selectedText = $('#currencyDropdown option:selected').text();
            const symbol = selectedText.split('-')[0].trim();

            if (symbol === "Select a Currency" || symbol === "") {
                $('#currencyUnitText').text("based currency");
                $('#currencyUnitTex1').text("based currency");
            } else {
                $('#currencyUnitText').text(symbol);
                $('#currencyUnitText1').text(symbol);
            }
        }
        $('#currencyDropdown').on('change', updateCurrencyUnitText);


        $(document).ready(function () {
            updateCurrencyUnitText();
        });

    </script>
@endsection