@extends('layouts.admin')
@section('title', 'New Purchase | Mintavia Admin')

@section('content')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />


    <style>
        .form-group label {
            font-weight: 500;
        }

        .table th,
        .table td {
            vertical-align: middle;
        }

        /* General table wrapper with max-height and scroll */
        .scrollable-table-wrapper {
            max-height: 400px;
            overflow-y: auto;
            width: 100%;
            /* Ensure full width */
        }

        /* Table styling */
        .scrollable-table,
        .scrollable-second-table {
            width: 100%;
            table-layout: fixed;
            border-collapse: collapse;
        }

        /* Sticky header styling */
        .scrollable-table thead th,
        .scrollable-second-table thead th {
            position: sticky;
            top: 0;
            background-color: #003366;
            /* First table header color */
            color: white;
            z-index: 1;
        }

        .scrollable-second-table thead th {
            background-color: #006400;
            /* Second table header color */
        }

        /* Table cell styling */
        .scrollable-table th,
        .scrollable-table td,
        .scrollable-second-table th,
        .scrollable-second-table td {
            padding: 8px;
            border: 1px solid #ccc;
            font-size: 12px;
            word-wrap: break-word;
            word-break: break-word;
            text-align: left;
        }

        .scrollable-table-wrapper,
        .scrollable-second-table-wrapper {
            width: 100%;
            overflow-x: auto;
            /* Allow horizontal scroll if needed */
            overflow-y: auto;
            /* Keep vertical scroll */
        }

        .recent-poi {
            background-color: #ffcccc !important;
            /* light red */
            color: #b30000;
            /* dark red text */
        }

        input:focus,
        button:focus {
            outline: none;
            /* optional: remove default outline */
            border: 5px solid rgb(208, 255, 0);
            background-color: #e0f9ff;
            box-shadow: 0 0 5px rgb(236, 248, 0);
        }
    </style>

    <div class="row">
        <div class="col-12">
            <div class="card card-primary">
                <div class="card-header d-flex align-items-center">
                    <h3 class="card-title">New Purchase Order Bill</h3>
                    <div class="ml-auto">
                        <a href="{{ route('admin.purchase.order-list') }}">
                            <button class="btn btn-sm btn-danger"><i class="fa fa-arrow-circle-left"></i> Back</button>
                        </a>
                    </div>
                </div>


                <div class="card-body">
                    <form method="get" action="{{ route('admin.purchase.order-new') }}" id="purchase-order-filter-form">

                        <div class="row mb-3">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="product_move">Product Move</label>
                                    <select name="usage" id="product_move"
                                        class="form-control form-control-sm purchase-order-filter">
                                        <option value="">-- Select --</option>
                                        <option value="1"
                                            {{ app('request')->input('usage') == '1' ? 'selected' : '' }}> Fast Moving
                                        </option>
                                        <option value="2"
                                            {{ app('request')->input('usage') == '2' ? 'selected' : '' }}>Medium Moving
                                        </option>
                                        <option value="3"
                                            {{ app('request')->input('usage') == '3' ? 'selected' : '' }}>Slow Moving
                                        </option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="brandFilter">Brand</label>
                                    <input type="text" name="brandFilter" id="brandFilter"
                                        class="form-control form-control-sm" placeholder="Enter Brand"
                                        value="{{ app('request')->input('brandFilter') }}">
                                </div>
                            </div>

                            <div class="col-md-2">
                                <div class="form-group">
                                    <label for="reorder_level_from">Reorder Level</label>
                                    <div class="d-flex gap-1">
                                        <input type="text" id="reorder_level_from" class="form-control form-control-sm"
                                            placeholder="From">
                                        <input type="text" id="reorder_level_to" class="form-control form-control-sm"
                                            placeholder="To">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label for="minimum_level">Minimum Level</label>
                                    <input type="text" name="minimum_level" id="minimum_level"
                                        class="form-control form-control-sm purchase-order-filter"
                                        placeholder="Enter Minimum Level"
                                        value="{{ app('request')->input('minimum_level') }}">
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label for="maximum_level">Maximum Level</label>
                                    <input type="text" name="maximum_level" id="maximum_level"
                                        class="form-control form-control-sm purchase-order-filter"
                                        placeholder="Enter Maximum Level"
                                        value="{{ app('request')->input('maximum_level') }}">
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <form method="post" action="{{ route('admin.purchase.order-saveNew') }}"
                    onsubmit="return clearAfterSubmit();">
                    @csrf
                    <div class="card-body">
                        <div class="row mb-3">
                            <div class="col-12">
                                <table class="table table-bordered table-sm" id="productTable"
                                    style="font-size: 12px; max-height: 400px; overflow-y: auto;">
                                    <thead style="background-color: #7c05af; color: white;">
                                        <tr>
                                            <th>Brand</th>
                                            <th>Part No</th>
                                            <th>Product Name</th>
                                            <th>Product Remerk</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody id="productBody">
                                        <tr>
                                            <td style="width: 350px;">
                                                <select class="form-control select2-brand" id="input_brand"
                                                    name="brand_name" style="font-size: 12px; width: 100%;">
                                                    <option value="">Select Brand</option>
                                                    @foreach ($brands as $brand)
                                                        <option value="{{ $brand->brand_name }}">{{ $brand->brand_name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </td>
                                            <td><input type="text" class="form-control" id="input_part_no"></td>
                                            <td><input type="text" class="form-control" id="input_product_name"></td>
                                            <td><input type="text" class="form-control" id="input_bike_name"></td>
                                            <td>
                                                <button type="button" class="btn btn-success add-to-second"
                                                    onclick="AddPurchaseOrderItem()">+</button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <!-- First Table -->
                        <div class="row mb-3">
                            <div class="col-12">
                                <div class="scrollable-table-wrapper">
                                    <table class="scrollable-table" id="first-table">
                                        <thead>
                                            <tr>
                                                <th><input type="checkbox" id="select_all"></th>
                                                <th>Brand</th>
                                                <th>Product Name</th>
                                                <th>Part No</th>
                                                <th>Total Qty</th>
                                                <th>Reorder Level</th>
                                                <th>Product Remerk</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @forelse ($items as $item)
                                                <tr class="product-row {{ $item->recent_entry ? 'recent-poi' : '' }}"
                                                    data-brand="{{ $item->brand->brand_name ?? 'N/A' }}"
                                                    data-product-name="{{ $item->product_name }}"
                                                    data-part-no="{{ $item->product_part_no }}"
                                                    data-total-qty="{{ $item->total_qty }}"
                                                    data-bike-name="{{ $item->remark ?? 'N/A' }}"
                                                    data-reorder-level="{{ $item->reorder_level ?? 0 }}"
                                                    data-minimum-level="{{ $item->minimum_level ?? 0 }}"
                                                    data-maximum-level="{{ $item->maximum_level ?? 0 }}">

                                                    <td><input type="checkbox" name="product_ids[]"
                                                            value="{{ $item->id }}" class="order-product"></td>
                                                    <td>{{ $item->brand->brand_name ?? 'N/A' }}</td>
                                                    <td>{{ $item->product_name }}</td>
                                                    <td>{{ $item->product_part_no }}</td>
                                                    <td>{{ $item->total_qty }}</td>
                                                    <td>{{ $item->reorder_level ?? '0' }}</td>
                                                    <td>{{ $item->remark ?? 'N/A' }}</td> {{-- will now show model name like "Splendor" --}}

                                                </tr>
                                            @empty
                                                <tr>
                                                    <td colspan="8">No data found.</td>
                                                </tr>
                                            @endforelse
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                        <!-- Second Table -->
                        <div class="row mb-3">
                            <div class="col-12">
                                <div class="scrollable-table-wrapper">
                                    <table class="scrollable-second-table" id="second-table">
                                        <thead>
                                            <tr>
                                                <th style="width: 60px;" class="text-center">Sr No</th>
                                                <th>Brand</th>
                                                <th>Product Name</th>
                                                <th>Part No</th>
                                                <th>Total Qty</th>
                                                <th>Qty</th>
                                                <th>Product Remerk</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        <tbody id="filtered-items">
                                            <!-- Dynamically added rows will appear here -->
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="row mt-4">
                            <div class="col-md-2">
                                <label for="date">Date</label>
                                <input value="{{ old('date') ?? date('Y-m-d') }}" type="date" name="date"
                                    id="date"
                                    class="form-control form-control-sm @error('date') is-invalid @enderror">
                                <x-error field="date"></x-error>
                            </div>
                            <div class="col-md-2">
                                <label for="terms">Terms</label>
                                <x-admin-input type="select" name="terms" id="terms" class="js-select2">
                                    <option @if (old('terms') == 1) selected @endif value="1">Cash</option>
                                    <option @if (old('terms') == 2) selected @endif value="2">Credit
                                    </option>
                                </x-admin-input>
                            </div>
                            <div class="col-md-2">
                                <x-admin-input value="{{ old('bill_no') ?? $billNo }}" type="number"
                                    placeholder="Bill No." name="bill_no" id="bill_no"
                                    label="Bill No."></x-admin-input>
                            </div>
                            <div class="col-md-3">
                                <x-admin-input type="select" label="Select Party"
                                    data-sel-value="{{ old('party_select') ?? '' }}" name="party_select"
                                    id="party_select" class="select2-party_select">
                                    <option value="">-- Select Party --</option>
                                    @if (!empty($parties))
                                        @foreach ($parties as $item)
                                            <option value="{{ $item->id }}" data-ledger="{{ $item->ledger }}">
                                                {{ $item->name }}
                                            </option>
                                        @endforeach
                                    @endif
                                </x-admin-input>
                            </div>

                            {{-- Ledger Show Box --}}
                            <div class="col-md-1">
                                <label>Balance</label>
                                <div id="ledger-box" class="form-control" readonly>--</div>
                            </div>

                            <div class="col-md-2">
                                <div class="form-group">
                                    <label for="deal_in">Deal In</label>
                                    <input type="text" id="deal_in" name="deal_in"
                                        class="form-control form-control-sm">
                                </div>
                            </div>
                        </div>

                        <div class="row mt-3" id="dealer-options-container">
                            @for ($i = 1; $i <= 5; $i++)
                                <div class="col-md-2">
                                    <div class="form-group">
                                        <label class="dealer-label-{{ $i }}">
                                            <input type="checkbox" class="dealer-option" value=""> Option
                                            {{ $i }}
                                        </label>
                                    </div>
                                </div>
                            @endfor
                        </div>

                        <!-- Hidden input to hold comma-separated dealer IDs -->
                        <input type="hidden" name="dealer_options" id="dealer_options_hidden">


                    </div>

                    <div class="card-footer d-flex justify-content-end">
                        <button class="btn btn-danger ml-2" type="button" onclick="DeleteAll()">Delete</button>
                        <button class="btn btn-success ml-2" type="button">Print</button>
                        <button class="btn btn-success ml-2" type="submit">Save</button>
                        <a href="{{ route('admin.purchase.order-list') }}" class="btn btn-sm btn-danger ml-2">
                            </i> Close
                        </a>
                    </div>

                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="OrderModal" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">Add Remark</div>
                <div class="modal-body">
                    <textarea id="remark_input" class="form-control"></textarea>
                    <input type="hidden" id="current_part_no"> <!-- To track which row -->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" onclick="saveRemark()">Save Remark</button>
                </div>
            </div>
        </div>
    </div>
@endsection


@section('plugins.Select2', true)

@section('js')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- jQuery + Bootstrap JS -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

    {{-- <script>
        const urlSelect = "{{ route('admin.purchase.order-get-select') }}"
    </script>
    <script src="{{ asset('js/purchase/purchase-add.js') }}"></script> --}}
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            let partySelect = document.getElementById("party_select");
            let ledgerBox = document.getElementById("ledger-box");

            partySelect.addEventListener("change", function() {
                let selected = this.options[this.selectedIndex];
                let ledger = selected.getAttribute("data-ledger");
                ledgerBox.textContent = ledger ? ledger : "--";
            });
        });
    </script>

    <script>
        
        $(document).ready(function() {
            // Clear localStorage and second table on page load
            localStorage.removeItem("selectedItems");
            $('#filtered-items').empty();
            resetTableIndex();

            // Existing filter table function
            function filterTable() {
                const brand = $('#brandFilter').val().trim().toUpperCase();
                const reorderFrom = parseInt($('#reorder_level_from').val().trim()) || null;
                const reorderTo = parseInt($('#reorder_level_to').val().trim()) || null;

                $('#first-table tbody tr').each(function() {
                    const row = $(this);
                    const rowBrand = (row.data('brand') || '').toUpperCase();
                    const rowReorder = parseInt(row.data('reorder-level')) || 0;

                    const matchBrand = brand === '' || rowBrand.includes(brand);

                    let matchReorder = true;
                    if (reorderFrom !== null && reorderTo !== null) {
                        matchReorder = rowReorder >= reorderFrom && rowReorder <= reorderTo;
                    } else if (reorderFrom !== null) {
                        matchReorder = rowReorder >= reorderFrom;
                    } else if (reorderTo !== null) {
                        matchReorder = rowReorder <= reorderTo;
                    }

                    if (matchBrand && matchReorder) {
                        row.show();
                    } else {
                        row.hide();
                    }
                });
            }

            $('#brandFilter, #reorder_level_from, #reorder_level_to').on('keyup input change', filterTable);
            filterTable();

            $('.select2-brand').select2({
                placeholder: "Select Brand",
                width: 'resolve'
            });
             $('.select2-party_select').select2({
                placeholder: "Select Party",
                width: 'resolve'
            });

            // Party select change event to get dealers
            $('#party_select').on('change', function() {
                let partyId = $(this).val();
                let url = "{{ route('admin.purchase.order-get-dealers', ':id') }}".replace(':id', partyId);

                if (partyId) {
                    $.ajax({
                        url: url,
                        type: 'GET',
                        success: function(response) {
                            $('#deal_in').val(response.deal_in);
                            for (let i = 1; i <= 5; i++) {
                                let labelClass = `.dealer-label-${i}`;
                                if (response.dealers[i - 1]) {
                                    $(labelClass).html(`
                                <label class="dealer-label-${i}">
                                    <input type="checkbox" class="dealer-option" value="${response.dealers[i - 1].id}">
                                    ${response.dealers[i - 1].name}
                                </label>
                            `);
                                } else {
                                    $(labelClass).html(`
                                <label class="dealer-label-${i}">
                                    <input type="checkbox" class="dealer-option" disabled> -
                                </label>
                            `);
                                }
                            }
                        },
                        error: function() {
                            alert('Failed to load data.');
                        }
                    });
                }
            });

            // Form submit handler to collect dealer IDs
            $('form').on('submit', function() {
                let dealerIds = [];
                $('.dealer-option:checked').each(function() {
                    dealerIds.push($(this).val());
                });
                $('#dealer_options_hidden').val(dealerIds.join(','));
            });

            $(document).on("change", ".purchase-order-filter", function(e) {
                $("#purchase-order-filter-form").submit();
            });

            // Select All checkbox handler
            $('#select_all').click(function() {
                $('#first-table tbody tr:visible input[type="checkbox"]').prop('checked', this.checked);
                updateSecondTable();
            });

            // Event listener for individual checkboxes
            $('#first-table input[type="checkbox"]').change(function() {
                updateSecondTable();
            });

            function updateSecondTable() {
                let selectedItems = JSON.parse(localStorage.getItem("selectedItems")) || [];

                $("#first-table input[type='checkbox']:checked").each(function() {
                    var row = $(this).closest("tr");
                    if (row.is(':visible')) {
                        var brand = row.data('brand');
                        var productName = row.data('product-name');
                        var partNo = row.data('part-no');
                        var totalQty = row.data('total-qty');
                        var remark = row.data('bike-name') || 'N/A';

                        if (brand && productName && partNo) {
                            var item = {
                                brand: brand,
                                product_name: productName,
                                part_no: partNo,
                                total_qty: totalQty || 0,
                                remark: remark
                            };

                            // अगर पहले से मौजूद नहीं है तभी push करो
                            var exists = selectedItems.some(function(i) {
                                return i.part_no === item.part_no;
                            });

                            if (!exists) {
                                selectedItems.push(item);
                            }
                        }
                    }
                });

                // अब second table को redraw करो
                $('#filtered-items').empty();
                selectedItems.forEach(function(item, index) {
                    if (item.brand && item.product_name && item.part_no) {
                        var row = `<tr id="order_product_${item.part_no}">
                <td class="text-center purchase-counter">${index + 1}</td>
                <td>${item.brand}</td>
                <td>${item.product_name}</td>
                <td>${item.part_no}</td>
                <td>${item.total_qty ? item.total_qty : 0}</td>
                <td><input type="number" class="form-control qty-input" 
       style="width: 100px; font-size: 10px;" 
       name="qty[]" value="0" min="1" placeholder="Enter qty">
</td>
                <td>${item.remark}</td>
                <td>
                    <button class="btn btn-danger" type="button" onclick="DeleteProduct('${item.part_no}')">
                        <i class="fas fa-trash-alt"></i>
                    </button>
                    <button class="btn btn-primary" type="button" data-toggle="modal" data-target="#OrderModal" onclick="openRemarkModal('${item.part_no}')">R</button>
                </td>
                <input type="hidden" name="brand[]" value="${item.brand}">
                <input type="hidden" name="product_name[]" value="${item.product_name}">
                <input type="hidden" name="part_no[]" value="${item.part_no}">
                <input type="hidden" name="bike_name[]" value="${item.remark}">
                <input type="hidden" name="order_remark[]" value="" class="remark-field" data-part="${item.part_no}">
            </tr>`;
                        $('#filtered-items').append(row);
                    }
                });

                localStorage.setItem("selectedItems", JSON.stringify(selectedItems));
                resetTableIndex();
            }


            function AddPurchaseOrderItem() {
                var brand = $("#input_brand").val();
                var brandText = $("#input_brand option:selected").text();
                var productName = $("#input_product_name").val().trim();
                var partNo = $("#input_part_no").val().trim();
                var bikeName = $("#input_bike_name").val().trim();

                if (!brand || !brandText || !productName || !partNo || !bikeName) {
                    alert("Please fill in all fields before adding.");
                    return;
                }

                var item = {
                    brand: brandText,
                    product_name: productName,
                    part_no: partNo,
                    remark: bikeName
                };

                let selectedItems = JSON.parse(localStorage.getItem("selectedItems")) || [];
                if (selectedItems.some(i => i.part_no === partNo)) {
                    alert("This part number already exists in the list.");
                    return;
                }

                selectedItems.push(item);
                localStorage.setItem("selectedItems", JSON.stringify(selectedItems));
                updateSecondTable();

                $("#input_brand").val('').trigger('change');
                $("#input_product_name").val('');
                $("#input_part_no").val('');
                $("#input_bike_name").val('');
            }

            function clearAfterSubmit() {
                let invalidItems = [];
                $('#filtered-items tr').each(function(index) {
                    let qty = $(this).find('input[name="qty[]"]').val();
                    let partNo = $(this).find('input[name="part_no[]"]').val();
                    let productName = $(this).find('input[name="product_name[]"]').val();

                    // Qty खाली है या 2 से कम है तो invalid
                    if (!qty || isNaN(qty) || parseFloat(qty) < 2) {
                        invalidItems.push({
                            part_no: partNo,
                            product_name: productName || 'Unknown Product',
                            qty: qty || 0
                        });
                    }
                });

                if (invalidItems.length > 0) {
                    let message =
                        "<strong>⚠️ The following items have invalid quantities (less than 2):</strong><br><br>";
                    invalidItems.forEach(item => {
                        message +=
                            `- ${item.product_name} (Part No: ${item.part_no}), Qty: ${item.qty}<br>`;
                    });
                    message +=
                        "<br>Please enter a quantity of at least <strong>2</strong> for all items before saving.";

                    $('#error-alert').html(message).show();
                    setTimeout(() => $('#error-alert').fadeOut(), 6000); // 6 sec में fade out
                    return false; // ❌ Save रोक दो
                }

                // ✅ सब ठीक है तो localStorage clear कर दो और save allow करो
                localStorage.removeItem("selectedItems");
                $('#error-alert').hide();
                return true;
            }


            function DeleteAll() {
                localStorage.clear();
                $("[id^='order_product_']").remove();
                resetTableIndex();
            }

            function resetTableIndex() {
                let index = 1;
                $('.purchase-counter').each(function() {
                    $(this).text(index);
                    index++;
                });
            }

            function DeleteProduct(partNo) {
                partNo = partNo.toString().trim();
                let selectedItems = JSON.parse(localStorage.getItem("selectedItems")) || [];
                selectedItems = selectedItems.filter(function(item) {
                    return item.part_no.toString().trim() !== partNo;
                });
                localStorage.setItem("selectedItems", JSON.stringify(selectedItems));
                $("#order_product_" + partNo).remove();
                resetTableIndex();
            }


            function openRemarkModal(partNo) {
                $('#current_part_no').val(partNo);
                const existingRemark = $(`#order_product_${partNo} input[name="order_remark[]"]`).val() || '';
                $('#remark_input').val(existingRemark);
            }

            function saveRemark() {
                const partNo = $('#current_part_no').val();
                const remark = $('#remark_input').val();
                $(`#order_product_${partNo} input[name="order_remark[]"]`).val(remark);
                $(`#order_product_${partNo} td:nth-child(7)`).text(remark);
                $('#OrderModal').modal('hide');
                $('body').removeClass('modal-open');
                $('.modal-backdrop').remove();
            }

            // 👇 attach to window so onclick="" can see them
            window.openRemarkModal = openRemarkModal;
            window.saveRemark = saveRemark;


            let products = @json($items);
            let brands = @json($brands);
            let units = @json($units);

            $(document).on('change', '#brand_id', function(e) {
                let results = products.filter((product) => product.brand_id == $(this).val());
                if (results.length > 0) {
                    $('#item_id').empty();
                    $('#item_id').append('<option value=""> -- Select Item --</option>');
                    results.forEach(element => {
                        $('#item_id').append('<option value="' + element.id + '">' + element
                            .product_name + '</option>');
                    });
                }
            });

            $(document).on('change', '#barcode', function(e) {
                let result = products.find((product) => product.barcode == $(this).val());
                if (result) {
                    $('#item_id').val(result.id);
                    $("#item_id").trigger("change");
                }
            });

            $(document).on('change', '#item_id', function(e) {
                let result = products.find((product) => product.id == $(this).val());
                if (result) {
                    $('#barcode').val(result.barcode);
                }
            });

            $(".FreeItemSelect").select2({
                minimumInputLength: 2,
                tags: [],
                ajax: {
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    url: "{{ route('admin.sale.select-two-prodct-search') }}",
                    dataType: 'json',
                    type: "POST",
                    quietMillis: 50,
                    data: function(search_steing) {
                        return {
                            search_steing: search_steing
                        };
                    },
                    processResults: function(data) {
                        return {
                            results: data
                        };
                    }
                }
            });
        });
    </script>




@endsection