@extends('admin.layouts.master')

@section('page-title')
    Purchase PO
@endsection

<style>
    /* Sirf vendor_id select2 par */
    select[name="Search_report"]+.select2-container,
    select[name="Search_report"]+.select2-container .select2-selection,
    select[name="Search_report"]+.select2-container .select2-dropdown {
        width: auto !important;
    }

    /* -------------------------------------------------
   NORMAL INPUT + SELECT + TABLE (already done)
--------------------------------------------------*/
    .form-control,
    .form-select {
        border: none !important;
        border-bottom: 1px solid #ccc !important;
        border-radius: 0 !important;
        background: transparent !important;
        width: auto !important;
        height: 28px !important;
        padding: 2px 6px !important;
        font-size: 12px !important;
        line-height: 1 !important;
    }

    /* -------------------------------------------------
   SELECT2 MAIN FIELD
--------------------------------------------------*/
    .select2-container--bootstrap-5 .select2-selection {
        border: none !important;
        border-bottom: 1px solid #ccc !important;
        border-radius: 0 !important;
        min-height: 28px !important;
        height: 28px !important;
        display: flex !important;
        align-items: center !important;
        padding: 0 6px !important;
        font-size: 12px !important;
        background: transparent !important;
    }

    /* When SELECT2 field gets focus → Bootstrap blue outline */
    .select2-container--bootstrap-5.select2-container--focus .select2-selection {
        border-bottom: 1px solid #0d6efd !important;
        box-shadow: 0 2px 0 0 #0d6efd !important;
    }

    /* -------------------------------------------------
   SELECT2 SEARCH BOX — NARROW + BOOTSTRAP FOCUS
--------------------------------------------------*/
    .select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field {
        height: 26px !important;
        padding: 2px 6px !important;
        font-size: 12px !important;
        border: 1px solid #ccc !important;
        border-radius: 2px !important;
        box-shadow: none !important;
    }

    /* Search box focus highlight */
    .select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field:focus {
        border-color: #0d6efd !important;
        box-shadow: 0 0 0 .15rem rgba(13, 110, 253, .25) !important;
        outline: none !important;
    }

    /* -------------------------------------------------
   SELECT2 DROPDOWN ITEMS — TABLE SIZE MATCH
--------------------------------------------------*/
    .select2-container--bootstrap-5 .select2-results__option {
        font-size: 12px !important;
        padding: 4px 6px !important;
        min-height: 26px !important;
        display: flex !important;
        align-items: center !important;
    }

    /* Hover = Bootstrap active blue */
    .select2-container--bootstrap-5 .select2-results__option--highlighted {
        background-color: #0d6efd !important;
        color: #fff !important;
    }

    /* Selected item */
    .select2-container--bootstrap-5 .select2-results__option--selected {
        background-color: #e9ecef !important;
        color: #000 !important;
    }

    /* -------------------------------------------------
   REMOVE ALL GAPS BETWEEN SELECT2 & TABLE FIELDS
--------------------------------------------------*/
    .select2-container {
        margin: 0 !important;
    }

    /* -------------------------------------------------
   SELECT2 ARROW & TEXT FIX
--------------------------------------------------*/
    .select2-container--bootstrap-5 .select2-selection__rendered {
        line-height: 26px !important;
        padding-left: 2px !important;
    }

    .select2-container--bootstrap-5 .select2-selection__arrow {
        height: 26px !important;
        top: 1px !important;
    }

    /* ---------------------------------------------
   TABLE BUTTONS NARROW
-----------------------------------------------*/
    .table .btn {
        padding: 2px 6px !important;
        /* small padding */
        font-size: 11px !important;
        /* smaller text */
        height: 26px !important;
        /* reduce height */
        line-height: 1 !important;
        /* vertical alignment */
    }
    .table td {
         font-size: 12px !important;
    }
    .table th {
         font-size: 12px !important;
    }
</style>

@section('main-content')
    <div class="dashboard-main-body">
        <form id="rfqForm">
            @csrf
            <div class="card">
                <div class="card-header">
                    <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
                        <!-- Left: Title -->
                        <h6 class="mb-0">Purchase Order Report</h6>

                        <!-- Right: Button -->
                        <div class="d-print-none">
                            <button type="button" id="verifyBtn"
                                class="btn btn-sm btn-primary-600 radius-8 d-inline-flex align-items-center gap-1">
                                <iconify-icon icon="simple-line-icons:check" class="text-xl"></iconify-icon>
                                Fetch PO
                            </button>
                        </div>
                    </div>
                </div>

                <div class="card-body">
                    <!-- Supplier & Invoice Details -->
                    <div class="row">
                        <div class="col-md-3">
                            <label>Report Type:</label>
                            <select name="Search_report" class="form-select select2-me" required>
                                <option value="">Report Search By</option>
                                <option value="">Customer Wise</option>
                                <option value="">Item Wise </option>
                                <option value="">Bill ID </option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label>Select Customer:</label>
                            <select name="Search_report" class="form-select select2-me" required>
                                <option value="">Search All Customers</option>
                                <option value="">Mudasir Customer</option>
                                <option value="">Yaseen Customer</option>
                                <option value="">Sadiq Customer</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label>Select Item:</label>
                            <select name="Search_report" class="form-select select2-me" required>
                                <option value="">Search All Items</option>
                                <option value="">Capri</option>
                                <option value="">Sunsilk</option>
                                <option value="">LUX</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label>Select Bill ID:</label>
                            <select name="Search_report" class="form-select select2-me" required>
                                <option value="">Search All Bills</option>
                                <option value="">12345</option>
                                <option value="">43213</option>
                                <option value="">43533</option>
                            </select>
                        </div>
                        {{-- FOR BARCODE SCANNER --}}
                        {{-- <div class="col-md-3">
                            <label>Scan Bill ID:</label>
                            <input type="number" id="bill_search" class="form-control" placeholder="Scan ID"/>
                        </div> --}}
                        <div class="col-md-3">
                            <label>From:</label>
                            <input type="date" name="date_from" class="form-control mb-2"
                                value="{{ $rfq->purchase_date ?? date('Y-m-d') }}" required>
                        </div>
                        <div class="col-md-3">
                            <label>To:</label>
                            <input type="date" name="date_to" class="form-control mb-2"
                                value="{{ $rfq->purchase_date ?? date('Y-m-d') }}" required>
                        </div>
                    </div>

                    <!-- Items Table -->
                    <table class="table narrow-table text-sm" id="invoice-table">
                        <thead>
                            <tr>
                                <th class="text-start">SL</th>
                                <th class="text-start">Invoice</th>
                                <th class="text-start">Customer</th>
                                <th class="text-start">Product</th>
                                <th class="text-start">KG</th>
                                <th class="text-start">Qty</th>
                                <th class="text-start">Total Qty</th>
                                <th class="text-start">Cost/KG</th>
                                <th class="text-start">Total Cost</th>
                            </tr>
                        </thead>

                        <tfoot>
                            <tr class="item-row">
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </form>
    </div>
@endsection
@section('script')
    <script>
        $(document).ready(function() {

            let table = $('#invoice-table').DataTable({
                processing: true,
                serverSide: true,
                searching: false,
                paging: true,
                ajax: {
                    url: "{{ route('purchase.rfq.report.data') }}",
                    data: function(d) {
                        d.date_from = $('input[name="date_from"]').val();
                        d.date_to = $('input[name="date_to"]').val();
                        d.report_type = $('select[name="Search_report"]').val();
                    }
                },
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'invoice',
                        name: 'invoice'
                    },
                    {
                        data: 'customer',
                        name: 'customer'
                    },
                    {
                        data: 'product',
                        name: 'product'
                    },
                    {
                        data: 'kg',
                        name: 'kg'
                    },
                    {
                        data: 'quantity',
                        name: 'quantity'
                    },
                    {
                        data: 'total_kg',
                        name: 'total_kg'
                    },
                    {
                        data: 'unit_cost',
                        name: 'unit_cost'
                    },
                    {
                        data: 'subtotal',
                        name: 'subtotal'
                    },
                ],
                drawCallback: function(settings) {
                    let f = settings.json.footer;

                    if (f) {
                        $('#invoice-table tfoot tr td:nth-child(5)').text(f.total_kg);
                        $('#invoice-table tfoot tr td:nth-child(6)').text(f.total_qty);
                        $('#invoice-table tfoot tr td:nth-child(7)').text(f.total_total_kg);
                        $('#invoice-table tfoot tr td:nth-child(8)').text(f.total_unit_cost);
                        $('#invoice-table tfoot tr td:nth-child(9)').text(f.total_subtotal);
                    }
                }
            });

            // Fetch Button Click
            $('#verifyBtn').click(function() {
                table.ajax.reload();
            });

        });
    </script>
@endsection