@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 */
        }

        .btn-medium {
            padding: 6px 12px;
            font-size: 14px;
            line-height: 1.5;
        }

        .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">Edit 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-edit', ['id' => $purchase->id]) }}"
                        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" id="brandFilter" class="form-control form-control-sm"
                                        placeholder="Enter Brand">
                                </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="number" 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="number" 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-saveEditBill', $purchase->id) }}"
                    onsubmit="return clearAfterSubmit();">
                    @csrf
                    <div class="card-body">
                        <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 id="input_brand" class="form-control select2-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 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>
                                                </tr>
                                            @empty
                                                <tr>
                                                    <td colspan="8">No data found.</td>
                                                </tr>
                                            @endforelse
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                        <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>
                                        <!-- Saved items from DB -->
                                        <tbody id="saved-items">
                                            @php
                                                $counter = 1;
                                            @endphp
                                            @foreach ($purchase->items as $index => $item)
                                                <tr id="saved_product_{{ $item->part_no }}">
                                                    <td class="text-center  purchase-counter">{{ $counter }}</td>
                                                    <td>{{ $item->brand }}</td>
                                                    <td>{{ $item->product_name }}</td>
                                                    <td>{{ $item->part_no }}</td>
                                                    <td>{{ $item->total_qty }}</td>
                                                    <td>
                                                        <input type="number" class="form-control qty-input"
                                                            style="width: 100px; font-size: 12px;" name="qty[]"
                                                            value="{{ $item->qty }}">
                                                    </td>
                                                    <td>{{ $item->bike_name }}</td>
                                                    <td class="">
                                                        <button class="btn btn-danger btn-medium" type="button"
                                                            onclick="DeleteProduct('{{ $item->part_no }}', true)">
                                                            <i class="fas fa-trash-alt"></i>
                                                        </button>
                                                        <button class="btn btn-primary btn-medium" type="button"
                                                            data-toggle="modal" data-target="#OrderModal"
                                                            onclick="openRemarkModal('{{ $item->part_no }}', '{{ $item->order_remark }}')">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->bike_name }}">
                                                    <input type="hidden" name="order_remark[]" value=""
                                                        class="remark-field" data-part="{{ $item->part_no }}">
                                                    <input type="hidden" name="delete_flag[{{ $item->part_no }}]"
                                                        value="0" class="delete-flag">


                                                </tr>
                                                @php
                                                    $counter = $counter + 1;
                                                @endphp
                                            @endforeach
                                        </tbody>

                                        <!-- Dynamically added items -->
                                        <tbody id="filtered-items"></tbody>
                                        {{-- <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.bike_name}"> --}}

                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row mt-4">
                        <div class="col-md-2">
                            <label for="date">Date</label>
                            <input value="{{ $purchase->date }}" 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="{{ $purchase->bill_no }}" 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', $purchase->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 }}"
                                            {{ $purchase->party_select == $item->id ? 'selected' : '' }}>
                                            {{ $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"
                                    value="{{ $purchase->deal_in }}">
                            </div>
                        </div>
                    </div>

                    <div class="row mt-3" id="dealer-options-container">

                        @if (!empty($dealers))
                            @foreach ($dealers as $item)
                                <div class="col-md-2">
                                    <div class="form-group">
                                        <label class="dealer-label-{{ $item->id }}">
                                            <input type="checkbox" class="dealer-option" value="{{ $item->id }}"
                                                {{ in_array($item->id, $dealerOptions) ? 'checked' : '' }}>
                                            {{ $item->name }}
                                        </label>
                                    </div>
                                </div>
                            @endforeach
                        @else
                            @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

                        @endif


                    </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">

                <a href="{{ route('admin.purchase.order-delete', $purchase->id) }}">
                    <button type="button" class="btn btn-danger ml-3">Delete</button>
                </a>
                <button class="btn btn-success ml-2" type="button">Print</button>
                <button class="btn btn-success ml-2" type="submit">Update</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");

            function updateLedger() {
                let selected = partySelect.options[partySelect.selectedIndex];
                let ledger = selected.getAttribute("data-ledger");
                ledgerBox.textContent = ledger ? ledger : "--";
            }

            // जब page load हो, पहले से selected party का ledger show करें
            updateLedger();

            // जब user change करे तो भी update हो
            partySelect.addEventListener("change", updateLedger);
        });
    </script>

    <script>
        $(document).ready(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();
        });


        $(document).ready(function() {


            function filterTable() {
                const brand = $('#brandFilter').val().trim().toUpperCase();
                const reorderLevel = $('#reorder_level').val().trim();
                const minLevel = $('#minimum_level').val().trim();
                const maxLevel = $('#maximum_level').val().trim();

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

                    const matchBrand = brand === '' || rowBrand.includes(brand);
                    const matchReorder = reorderLevel === '' || rowReorder == reorderLevel;
                    const matchMin = minLevel === '' || rowMin == minLevel;
                    const matchMax = maxLevel === '' || rowMax == maxLevel;

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

            $('#brandFilter, #reorder_level, #minimum_level, #maximum_level').on('keyup input', filterTable);
        });


        $(document).ready(function() {
            $('.select2-brand').select2({
                placeholder: "Select Brand",
                width: 'resolve' // Auto match to container width
            });
        });
        $('.select2-party_select').select2({
                placeholder: "Select Party",
                width: 'resolve'
            });
        $(document).ready(function() {
            // 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) {
                            // Update Deal In field
                            $('#deal_in').val(response.deal_in);

                            // Update Dealer checkboxes
                            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 in a comma-separated string
            $('form').on('submit', function() {
                let dealerIds = [];
                // Loop through checked dealer checkboxes and push their values
                $('.dealer-option:checked').each(function() {
                    dealerIds.push($(this).val());
                });

                // Set the value of the hidden input with the comma-separated dealer IDs
                $('#dealer_options_hidden').val(dealerIds.join(','));
            });
        });


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

        $(document).ready(function() {
            // Function to update the second table with selected data
            let selectedItems = JSON.parse(localStorage.getItem("selectedItems")) || [];
            updateSecondTable()





            // Event listener for the "select all" checkbox
            $('#select_all').click(function() {
                $('#first-table input[type="checkbox"]').prop('checked', this.checked);
                updateSecondTable();
            });

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


        function resetTableIndex() {
            console.log("skjdkfjshdfkjshdkjfjskdhfj");

            let index = 1;
            $('.purchase-counter').each(function(element) {
                $(this).text(index)
                console.log(index);

                index++;
            });
        }

        function updateSecondTable() {
            let selectedItems = JSON.parse(localStorage.getItem("selectedItems")) || [];
            // Loop through each checkbox in the first table
            $("#first-table input[type='checkbox']:checked").each(function() {
                var row = $(this).closest("tr");


                // Create an item object
                var item = {
                    brand: row.data('brand'),
                    product_name: row.data('product-name'),
                    part_no: row.data('part-no'),
                    total_qty: row.data('total-qty'),
                    remark: row.data('bike-name') || 'N/A'
                };

                // Check if part_no is already in selectedItems
                var exists = selectedItems.some(function(i) {
                    return i.part_no === item.part_no;
                });

                // Push only if not already present
                if (!exists) {
                    selectedItems.push(item);
                }
            });

            // Clear the second table
            $('#filtered-items').empty();
            // Append the selected items to the second table, limiting to 20 rows
            let counter = parseInt("{{ $counter }}")
            selectedItems.forEach(function(item, index) {
                var row = `<tr id="order_product_${item.part_no}">
                    <td class="text-center purchase-counter">${counter}</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[]" placeholder="Enter qty"></td>
                    <td>${item.bike_name}</td>
                    <td>
                        <!-- Delete Button with Font Awesome Icon -->
                        <button class="btn btn-danger" type="button" onclick="DeleteProduct(${item.part_no})">
                            <i class="fas fa-trash-alt"></i>
                        </button>

                        <!-- "R" Button to open modal -->
                        <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);
                counter++;
            });







            // Optional: Remove the message about more than 20 items, as there's no limit now.


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



        //text-center


        function AddPurchaseOrderItem() {
            var brand = $("#input_brand").val();
            var productName = $("#input_product_name").val();
            var partNo = $("#input_part_no").val();
            var bikeName = $("#input_bike_name").val();

            // Check if any input is empty
            if (!brand || !productName || !partNo || !bikeName) {
                alert("Please fill in all fields before adding.");
                return;
            }

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

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

            // Prevent duplicate part_no
            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();

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




        function clearAfterSubmit() {
            // Let the form submit first, then clear on next page load
            localStorage.removeItem("selectedItems");
            return true;
        }


        $('#saveBtn').click(function() {
            let selectedItems = JSON.parse(localStorage.getItem("selectedItems")) || [];

            if (selectedItems.length === 0) {
                alert("No items to save.");
                return;
            }

            // STEP 1: Send data to server
            $.ajax({
                url: 'save_data.php', // ✅ your PHP file
                method: 'POST',
                data: {
                    items: JSON.stringify(selectedItems)
                },
                success: function(response) {
                    console.log("Server response:", response); // For debugging

                    // STEP 2: Only clear localStorage if save was successful
                    if (response.trim() === "success") {
                        localStorage.removeItem("selectedItems"); // ✅ Now safe to clear
                        $('#filtered-items').empty(); // Clear table
                        $('#first-table input[type="checkbox"]').prop('checked', false); // Uncheck all
                        alert("Data saved successfully.");
                    } else {
                        alert("Failed to save: " + response);
                    }
                },
                error: function(xhr, status, error) {
                    alert("AJAX error: " + error);
                }
            });
        });


        function DeleteProduct(partNo, fromDatabase = false) {
            if (fromDatabase) {
                // Mark as deleted and hide the row
                $(`#saved_product_${partNo} input[name="delete_flag[${partNo}]"]`).val("1");
                $(`#saved_product_${partNo}`).remove();
                resetTableIndex();
                // Update serial numbers in saved DB rows

            } else {
                // Remove from localStorage
                let selectedItems = JSON.parse(localStorage.getItem("selectedItems")) || [];
                selectedItems = selectedItems.filter(item => item.part_no !== partNo);
                localStorage.setItem("selectedItems", JSON.stringify(selectedItems));
                // Remove the row from DOM
                $(`#order_product_${partNo}`).remove();
                resetTableIndex();

                // Update serial numbers in dynamically added rows

            }



        }




        function openRemarkModal(partNo, remark) {
            $('#current_part_no').val(partNo); // Set hidden input with part number
            $('#remark_input').val(remark); // Set textarea with existing remark
        }


        function saveRemark() {
            const partNo = $('#current_part_no').val();
            const remark = $('#remark_input').val();

            // ✅ Update hidden input
            $(`#order_product_${partNo} input[name="order_remark[]"]`).val(remark);

            // ✅ Also update visible 'Product Remark' cell
            $(`#order_product_${partNo} td:nth-child(7)`).text(remark);

            $('#OrderModal').modal('hide');

            // Optional cleanup
            $('body').removeClass('modal-open');
            $('.modal-backdrop').remove();
        }

        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) {
            console.log('barcode', $(this).val());
            let result = products.find((product) => product.barcode == $(this).val());
            console.log('result', result);
            if (result) {
                $('#item_id').val(result.id)
                $("#item_id").trigger("change");
                //getSelectItem(result.id);
            }
        })

        $(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) {
                    console.log(data);
                    return {
                        results: data
                    };
                }

            }
        });
    </script>




@endsection