@extends('admin.layouts.master')

@section('page-title')
    Purchase RFQ
@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">RFQ 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 RFQ
                            </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 Supplier:</label>
                            <select name="supplier_id" class="form-select select2-me" required>
                                <option value="">Select Supplier</option>
                                @foreach ($suppliers as $vendor)
                                    <option value="{{ $vendor->id }}" @if (isset($rfq) && $rfq->supplier_id == $vendor->id) selected @endif>
                                        {{ $vendor->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label>Select Item:</label>
                            <select name="product_id" class="form-select select2-me">
                                <option value="">Select Product</option>
                                @foreach ($products as $product)
                                    <option value="{{ $product->id }}" >
                                        {{ $product->productname }}
                                    </option>
                                @endforeach
                            </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 class="text-start"></td>
                                <td class="text-start"></td>
                                <td class="text-start"></td>
                                <td class="text-start"></td>
                                <td class="text-start"></td>
                                <td class="text-start"></td>
                                <td class="text-start"></td>
                                <td class="text-start"></td>
                                <td class="text-start"></td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </form>
    </div>
@endsection
@section('script')
    <script>
        $(document).ready(function() {

            function loadInvoiceData() {

                $('#invoice-table').DataTable({
                    processing: true,
                    serverSide: true,
                    destroy: true, // ⭐ old instance remove
                    searching: false,
                    paging: true,

                    ajax: function(data, callback, settings) {

                        let url = "{{ route('purchase.rfq.report.data') }}";

                        let requestData = {
                            date_from: $('input[name="date_from"]').val(),
                            date_to: $('input[name="date_to"]').val(),
                            supplier_id: $('select[name="supplier_id"]').val(),
                            product_id: $('select[name="product_id"]').val(),
                            report_type: $('select[name="Search_report"]').val(),
                            ...data
                        };

                        CustomAjax(url, "GET", requestData, "json", function(response) {
                            callback(response);
                        });
                    },

                    columns: [{
                            data: 'DT_RowIndex',
                            orderable: false,
                            searchable: false
                        },
                        {
                            data: 'invoice'
                        },
                        {
                            data: 'customer'
                        },
                        {
                            data: 'product'
                        },
                        {
                            data: 'kg'
                        },
                        {
                            data: 'quantity'
                        },
                        {
                            data: 'total_kg'
                        },
                        {
                            data: 'unit_cost'
                        },
                        {
                            data: '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);
                        }
                    }
                });

            }

            $('#verifyBtn').click(function() {
                loadInvoiceData();
            });

        });
    </script>
@endsection