@extends('layouts.app')
@section('title')
    Purchase Order View
@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">
        <div class="card-body">
        <div class="row">
                    <h5>Purchase Order</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 rounded-4"
                                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 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="date" class="form-label col-4"> Date</label>
                            <div class="col-6">
                            <input type="text" name="date" id="date" class="form-control rounded-4"
                            value="{{ $purchase_order->date }}"
                            >
                        </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 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="date" class="form-label col-4">Delivery Date</label>
                            <div class="col-6">
                            <input type="text"  class="form-control "
                                value="{{ $purchase_order->required_date }}">
                        </div>
                        </div>
                    </div>

                </div>
                <br>
                <div class="row mt-3">
                    <div class="col-lg-12 col-sm-12 col-12">
                        <div class="d-flex">
                            <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="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>
                                <label class="form-check-label" for="pp_pr">PR No</label>
                            </div>
                            </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" readonly 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
                                </tbody>
                            </table>
                        </div>
                    </div>
                </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="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 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="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 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="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 rounded-4">
                        </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-4 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="special_requirements" class="form-label">Special Requirements</label>
                            <textarea type="text" name="special_requirements" id="special_requirements" class="form-control rounded-4"
                                >{{ $purchase_order->special_requirements ?? '' }}</textarea>
                        </div>
                    </div>
                </div>
        </div>
        <div class="card-footer">
            <div class="row">
                <div class="d-flex gap-2 justify-content-end col-12">
                    <a type="button" target="_blank" href="{{ route('purchase_order.preview', $purchase_order->id) }}"
                        class="btn btn-primary">Preview</a>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function() {
            $('.card').find('input, select, textarea').prop('disabled', true);
            $('#productTable').DataTable();
        });
    </script>
                           <!-- 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() {
                               // 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>
@endsection