@extends('layouts.app')
@section('title')
    PURCHASE ORDER @if ($action == 'check')
        CHECK
    @elseif($action == 'verify')
        VERIFY
    @endif
@endsection
@section('button')
    <a type="button" class="btn btn-info" href="{{ route('purchase_order.index') }}">
        <i class="bi bi-arrow-left"></i> Back
    </a>
@endsection
@section('content')
    <style>
        #productTable input {
            width: 130px;
        }
    </style>
    <div class="card">
        <form method="post"
            @if ($action == 'check') action="{{ route('purchase_order.check', $purchase_order->id) }}" @elseif($action == 'verify') action="{{ route('purchase_order.verify', $purchase_order->id) }}" @endif
            enctype="multipart/form-data">
            @csrf
            <div class="card-body">
                <div class="row">
                    <h5>PURCHASE ORDER DETAILS</h5>
                </div>
                <br>
                <div class="row">
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="ref_no" class="form-label col-4">PO No</label>
                            <div class="col-6">
                            <input type="text" readonly name="ref_no" id="ref_no" class="form-control"
                                value="{{ $purchase_order->ref_no }}">
                        </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="supplier_id" class="form-label col-4">Supplier</label>
                            <div class="col-6">
                            <select name="supplier_id" id="supplier_id" class="form-select" style="width: 100% !important">
                                <option value="" selected disabled>Please Select</option>
                                @foreach ($suppliers as $supplier)
                                    <option value="{{ $supplier->id }}" @selected($purchase_order->supplier_id == $supplier->id)>{{ $supplier->name }}
                                    </option>
                                @endforeach
                            </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="quotation_ref_no" class="form-label col-4"> Ref. No. (optional)</label>
                            <div class="col-6">
                            <input type="text" name="quotation_ref_no" id="quotation_ref_no"
                                value="{{ $purchase_order->quotation_ref_no }}" 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="date" class="form-label col-4">PO Date</label>
                            <div class="col-6">
                                <input type="text" name="date" id="date" class="form-control" 
                                    value="{{ $purchase_order->date }}" placeholder="dd/mm/yy">
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="payment_term" class="form-label col-4">Payment Term</label>
                            <div class="col-6">
                            <input type="text" name="payment_term" value="{{ $purchase_order->payment_term }}"
                                id="payment_term" 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="date" class="form-label col-4">Delivery Date</label>
                            <div class="col-6">
                            <input type="text" name="required_date" id="required_date" class="form-control rounded-4"
                                value="{{ $purchase_order->required_date }}">
                        </div>
                        </div>
                    </div>

                </div>
                <br>
                <div class="row mb-5">
                    <div class="col-lg-12 col-sm-12 col-12">
                        <div class="mt-4 d-flex flex-wrap align-items-center gap-4">
                        <div class="form-check ">
                        <input class="form-check-input" name="po_manual" type="checkbox" @checked($purchase_order->po_manual == 1) value="1" id="manual_po">
                        <label class="form-check-label" for="flexCheckDefault">
                            Manual 
                        </label>
                        </div>
                        <div class="mt-1 d-flex align-items-center">
                            <label class="form-label me-2" for="pp_pr">PP No</label>
                            <div class="d-flex align-items-center">
                                <div class="form-check form-switch">
                                    <input disabled class="form-check-input" type="checkbox" id="pp_pr" name="pp_pr"
                                        @checked($purchase_order->pp_pr == 1) value="1">
                                </div>
                            </div>
                            <label class="form-check-label" for="pp_pr">PR No</label>
                        </div>
                        </div>
                    </div>
                </div>
                <div class="row mt-5">
                    <div class="col-lg-6 col-sm-6 col-12 purchase_planning @if ($purchase_order->pp_pr == 1) d-none @endif">
                            <div class="row align-items-center">
                            <label for="pp_id" class="form-label col-4">Ref No.</label>
                            <div class="col-6">
                            <select name="pp_id" id="pp_id" class="form-select" onchange="get_pp()" disabled style="width: 100% !important;">
                                <option value="{{ $purchase_order->pp_id }}" selected>{{ $purchase_order->purchase_planning->ref_no ?? '' }}</option>
                            </select>
                        </div>
                            </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 purchase_requisition @if (!$purchase_order->pp_pr == 1) d-none @endif">
                            <div class="row align-items-center">
                                 <label for="pr_id" class="form-label col-4">Ref No.</label>
                                 <div class="col-6">
                            <select name="pr_id" id="pr_id" class="form-select" onchange="get_pr()" disabled style="width: 100% !important;">
                                <option value="{{ $purchase_order->pr_id }}" selected>{{ $purchase_order->purchase_requisition->pr_no ?? '' }}</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="department_id" class="form-label col-4">Department</label>
                            <div class="col-6">
                            <select name="department_id" id="department_id" class="form-select" style="width: 100% !important;">
                                <option value="" selected disabled>Please Select</option>
                                @foreach ($departments as $department)
                                    <option value="{{ $department->id }}" @selected($purchase_order->department_id == $department->id)>
                                        {{ $department->name }}
                                    </option>
                                @endforeach
                            </select>
                        </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" name="requested_by" id="requested_by" class="form-control rounded-4" readonly value="{{ Auth::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="important_note" class="form-label col-4">Purpose</label>
                            <div class="col-6">
                            <textarea name="purpose"  id="purpose" class="form-control rounded-4" rows="1">{{ $purchase_order->purpose }}</textarea>
                        </div>
                    </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_order->currency)>
                                            {{ $item->symbol }} - {{ $item->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="status" class="form-label col-4">Status</label>
                            <div class="col-6">
                            <select name="status" id="status" class="form-select" style="width: 100% !important;">
                                <option value="" selected disabled>Please Select</option>
                                <option value="in-progress" @selected($purchase_order->status == 'in-progress')>In Progress</option>
                                <option value="completed" @selected($purchase_order->status == 'completed')>Completed</option>
                            </select>
                        </div>
                        </div>
                    </div>
                </div>

            <br>

            <br>
            <div class="row">
                    <div class="col-12">
                        <div class="table-responsive">
                            <table class="table table-bordered m-0" id="productTable">
                                <thead>
                                    <tr>
                                        <th>Sr No</th>

                                        <th>Part No.</th>
                                        <th>Part Name</th>
                                        <th>Supplier Product Code</th>
                                        <th>Description</th>
                                        <th>UOM</th>
                                        <th>Price ({{ $purchase_order->currencies->symbol ?? "RM" }})</th>
                                        <th>Qty</th>

                                        <th>Total</th>
                                        <th>Lead Time</th>

                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($purchase_order_details as $index => $purchase_order_detail)
                                        <tr>
                                            <td>{{ $loop->iteration }}</td>
                                            <td>
                                                <input type="hidden"
                                                    name="products[{{ $index }}][product_id]" value="{{$purchase_order_detail->product_id}}">
                                                    <input
                                                    type="hidden" class="form-control part_no"
                                                    name="products[{{ $index }}][part_no]"
                                                    value="{{ $purchase_order_detail->product->part_no }}">
                                                    {{ $purchase_order_detail->product->part_no }}
                                            </td>
                                            <td>{{ $purchase_order_detail->product->part_name }}</td>
                                            <td>{{ $purchase_order_detail->product->supplier_product_code ?? '-' }}</td>
                                            <td>{{ $purchase_order_detail->product->description }}</td>
                                            <td>{{ $purchase_order_detail->product->units->name }}</td>
                                            <td>
                                                <input type="number" readonly class="form-control price"
                                                    name="products[{{ $index }}][price]"
                                                    value="{{ $purchase_order_detail->price }}">
                                            </td>
                                            <td>
                                                <input type="number" readonly class="form-control qty"
                                                    name="products[{{ $index }}][qty]"
                                                    value="{{ $purchase_order_detail->qty }}">
                                            </td>
                                            <td>
                                                <input type="number" readonly class="form-control total"
                                                    name="products[{{ $index }}][total]"
                                                    value="{{ $purchase_order_detail->total }}">
                                            </td>
<td>
                                                <input type="number" readonly class="form-control rounded-4 leadtime"
                                                    name="products[{{ $index }}][leadtime]"
                                                    value="{{ $purchase_order_detail->leadtime }}">
                                            </td>


                                        </tr>
                                    @endforeach
                            </table>
                        </div>
                    </div>
                </div>
            <br>
            <div class="row">
                <h5>TOTAL SECTION</h5>
            </div>
            <div class="row">
                <div class="col-lg-6 col-sm-6 col-12 mt-3">
                    <div class="row align-items-center">
                            <label for="total_qty" class="form-label col-4">Total Quantity</label>
                            <div class="col-6">
                            <input type="text" readonly id="total_qty" name="total_qty"
                                value="{{ $purchase_order->total_qty }}" 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="total_amount_inword" class="form-label col-4">Grand Total amount (inword)</label>
                            <div class="col-6">
                            <input type="text" id="total_amount_inword" name="total_amount_inword" value="{{ $purchase_order->total_amount_inword }}"
                                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="net_total" class="form-label col-4">Grand Total amount</label>
                            <div class="col-6">
                            <input type="text" readonly id="net_total" name="net_total"
                                value="{{ $purchase_order->net_total }}" class="form-control">
                        </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="special_requirements" class="form-label col-4">Special Requirements</label>
                            <div class="col-6">
                            <textarea type="text" name="special_requirements" id="special_requirements" class="form-control rounded-4"
                                >{{ $purchase_order->special_requirements ?? '' }}</textarea>
                        </div>
                        </div>
                    </div>
                </div>
        </div>
            <br>
            <div class="row">
            </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 == 'verify')
                            <button type="submit" class="btn btn-primary">Verify</button>
                            <button type="button" id="decline_button" value="decline"
                                class="btn btn-danger">Decline</button>
                            <button type="button" id="canceil_button" value="cancel"
                                class="btn btn-warning">Cancel</button>
                        @endif
                    </div>
                </div>
            </div>
        </form>
    </div>
    {{-- 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_order.decline_cancel', $purchase_order->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>


         <!-- 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() {
                    if ($('#pp_pr').is(':checked')) {
                    id = $('#pr_id').val();
                    var pr = requisition.find(p => p.id == id);
                    if (pr) {
                        var purchase_requisition_ViewUrl = purchase_requisition_ViewUrlTemplate.replace(':purchase_requisitionId',
                        id);
                        $('#pr_view').attr('href', purchase_requisition_ViewUrl);
                    } else {
                        $('#pr_view').attr('href', '#');
                    }

                }else {
                    var ppId = $("#pp_id").val();
                    var pp = planning.find(p => p.id == ppId);
                    if (pp) {
                        var purchase_planning_ViewUrl = purchase_planning_ViewUrlTemplate.replace(':purchase_planningId', ppId);
                        $('#pp_view').attr('href', purchase_planning_ViewUrl);
                    } else {
                        $('#pp_view').attr('href', '#');
                    }
                }
                    
             // Initialize Bootstrap Datepicker
             $('#date').datepicker({
                 format: 'dd/mm/yyyy', // Date format
                 autoclose: true,
                 todayHighlight: true,
                 orientation: 'bottom' // Ensures the date picker opens below the input
             });
         });
         
             </script>
             <script>
                $(document).ready(function() {
                    $('#required_date').datepicker({
                        format: 'dd/mm/yyyy', // Set the desired date format
                        autoclose: true,      // Automatically close the datepicker after selection
                        todayHighlight: true,  
                        orientation: 'bottom' // Ensures the date picker opens below the input
                        // Highlight today's date
                    }).datepicker("setDate", new Date()); // Set today's date as the default
                });
                </script>
    <script>
        $(document).ready(function() {
            $('.card').find('input, select, textarea').prop('disabled', true);
            $('input[type="hidden"]').prop('disabled', false);
            $('#productTable').DataTable();

            $('#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');
            });
        });
    </script>
@endsection