@extends('layouts.master')
@section('content')
    <form id="yourForm" action="{{ route('updatepdf', ['id' => $quote->id]) }}" method="post">
        @csrf
        {{-- @method('PUT') --}}
        <div>
            <div>
                <div>
                    <!-- Inner Div 1 -->
                    <div class="card p-4 mb-3 shadow-sm">
                        <h5 class="card-header">Customer Details</h5>
                        <div class="card-body">
                            <table class="table table-borderless">
                                <tbody>
                                    <tr>
                                        <th class="w-25 text-end align-middle">Manufacturer / Publisher:</th>
                                        <td>
                                            <input type="text" name="manufacturer" value="{{ $quote->manufacturer }}"
                                                id="manufacturer" class="form-control"
                                                placeholder="Enter Manufacturer / Publisher">
                                        </td>
                                    </tr>
                                    <tr>
                                        <th class="w-25 text-end align-middle">To:</th>
                                        <td>
                                            <input type="text" name="to" value="{{ $quote->customer->to }}"
                                                id="to" class="form-control" placeholder="Enter recipient">
                                            <div id="to_list"></div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th class="w-25 text-end align-middle">Email:</th>
                                        <td>
                                            <input type="email" name="to_email" value="{{ $quote->customer->to_email }}"
                                                id="to_email" class="form-control" placeholder="Enter email">
                                        </td>
                                    </tr>
                                    <tr>
                                        <th class="w-25 text-end align-middle">Address:</th>
                                        <td>
                                            <textarea name="to_address" id="to_address" rows="2" class="form-control" placeholder="Enter address">{{ $quote->customer->to_address }}</textarea>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th class="w-25 text-end align-middle">Phone:</th>
                                        <td>
                                            <input type="tel" name="to_phone" value="{{ $quote->customer->to_phone }}"
                                                id="to_phone" class="form-control" placeholder="Enter phone number">
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                </div>
                <div>
                    <!-- Inner Div 2 -->
                    <div class="card p-4 mb-3 shadow-sm">
                        <h5 class="card-header">vCloud Details</h5>
                        <div class="card-body">
                            <table class="table table-borderless">
                                <tbody>
                                    <tr>
                                        <th class="w-25 text-end align-middle">vCloud Entity:</th>
                                        <td>
                                            <select name="vcloud_entity" id="vcloud_entity" class="form-select">
                                                <option value="">-- select --</option>
                                                <option value="tech"
                                                    {{ old('vcloud_entity', $quote->vcloud_entity ?? '') == 'tech' ? 'selected' : '' }}>
                                                    vCloud Tech Inc.
                                                </option>
                                                <option value="gov"
                                                    {{ old('vcloud_entity', $quote->vcloud_entity ?? '') == 'gov' ? 'selected' : '' }}>
                                                    vCloud Gov Inc.
                                                </option>
                                            </select>
                                        </td>
                                    </tr>

                                    {{-- <tr>
                                        <th class="w-25 text-end align-middle">From:</th>
                                        @php
                                            $fromValue = '';
                                            if (Str::endsWith($quote->salesRep->email, '@vcloudtech.com')) {
                                                $fromValue = 'vCloud Tech Inc.';
                                            } elseif (Str::endsWith($quote->salesRep->email, '@vcloudgov.com')) {
                                                $fromValue = 'vCloud Gov Inc.';
                                            } else {
                                                $fromValue = $quote->salesRep->email;
                                            }
                                        @endphp

                                        <td>
                                            <input type="text" name="from" value="{{ $fromValue }}" id="from"
                                                class="form-control" placeholder="Enter sender name">
                                        </td>
                                    </tr> --}}
                                    {{-- <tr>
                                        <th class="w-25 text-end align-middle">Sales Rep:</th>
                                        <td>
                                            <input type="text" name="sales_rep" id="sales_rep"
                                                value="{{ $quote->salesRep->id }}" class="form-control"
                                                {{ Auth::user()->role !== 'Admin' ? 'readonly' : '' }}>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th class="w-25 text-end align-middle">Email:</th>
                                        <td>
                                            <input type="email" name="from_email" value="{{ $quote->salesRep->email }}"
                                                id="from_email" class="form-control" placeholder="Enter email">
                                        </td>
                                    </tr>
                                    <tr>
                                        <th class="w-25 text-end align-middle">Address:</th>
                                        <td>
                                            <textarea name="from_address" id="from_address" rows="2" class="form-control" placeholder="Enter address">{{ $quote->salesRep->address }}</textarea>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th class="w-25 text-end align-middle">Phone:</th>
                                        <td>
                                            <input type="tel" name="from_phone" value="{{ $quote->salesRep->phone }}"
                                                id="from_phone" class="form-control" placeholder="Enter phone number">
                                        </td>
                                    </tr> --}}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <hr>
        </div>

        <div>
            <div>
                <div>
                    <!-- Inner Div 1 -->
                    <div class="card p-4 mb-4 shadow-sm">
                        <h5 class="card-header">Term Details</h5>
                        <div class="card-body">
                            <table class="table table-borderless">
                                <tbody>
                                    {{-- <tr>
                                        <th class="w-25 text-end align-middle">Term:</th>
                                        <td>
                                            <strong>FTIN:</strong> <span id="ftin">46-3104792</span>
                                        </td>
                                    </tr> --}}
                                    <tr>
                                        <th class="w-25 text-end align-middle">Contract Name:</th>
                                        <td>
                                            <select id="contract_name" name="contract_name" class="form-select">
                                                <option value="OM">Open Market</option>
                                                <option value="Allied States Cooperative" data-contract="25-751">Allied
                                                    States Cooperative</option>
                                                <option value="Buyboard Purchasing Cooperative" data-contract="759-25">
                                                    Buyboard Purchasing Cooperative</option>
                                                <option value="CMAS" data-contract="3-24-09-1021">California Multiple
                                                    Award Schedule (CMAS)</option>
                                                <option value="CMAS" data-contract="3-20-70-3866A">CMAS Under The Synnex
                                                    GSA Base Schedule</option>
                                                <option value="Costars" data-contract="003-E24-681">Costars</option>
                                                <option value="EPIC6" data-contract="21.22, 22.22, 23.22">EPIC6</option>
                                                <option value="Equalis Group" data-contract="R10-1173G">Equalis Group
                                                </option>
                                                <option value="GSA" data-contract="47QTCA21D0064">General Services
                                                    Administration (GSA Schedule)</option>
                                                <option value="Goodbuy" data-contract="25-26 4D000; 25-26 4O000">Goodbuy
                                                </option>
                                                <option value="GSA" data-contract="GS-35F-0119Y">GSA Schedule Under
                                                    Carahsoft</option>
                                                <option value="GSA" data-contract="GS-35F-0511T">GSA Schedule Under Ec
                                                    America, Inc/Immix Group</option>
                                                <option value="GSA" data-contract="GS-35F-303DA">GSA Schedule Under
                                                    Promark</option>
                                                <option value="GSA" data-contract="GS-35F-0349S">GSA Schedule Under Tech
                                                    Data</option>
                                                <option value="NASPO" data-contract="7-17-70-40-05 (AR2472)">NASPO</option>
                                                <option value="NCPA" data-contract="01-169">NCPA under Promark</option>
                                                <option value="Ohio STS" data-contract="534354">Ohio STS</option>
                                                <option value="Omnia EDU" data-contract="R191902">Omnia EDU</option>
                                                <option value="PCA" data-contract="PCA OD-372-22">Purchasing Cooperative
                                                    Of America (PCA)</option>
                                                <option value="Region 7 Purchasing Cooperative" data-contract="CMPS2425">
                                                    Region 7 Purchasing Cooperative</option>
                                                <option value="Sourcewell" data-contract="112124-VCO">Sourcewell</option>
                                                <option value="TIPS" data-contract="210101">The Interlocal Purchasing
                                                    System (TIPS)</option>
                                                <option value="TX DIR" data-contract="DIR-TSO-4288">TX DIR-TSO-4288
                                                </option>
                                            </select>
                                        </td>
                                    </tr>
                                    {{-- <tr>
                                        <th class="w-25 text-end align-middle">Cage Code:</th>
                                        <td><span id="cage_code">77T86</span></td>
                                    </tr>
                                    <tr>
                                        <th class="w-25 text-end align-middle">DUNS No:</th>
                                        <td><span id="dnus_no">079508688</span></td>
                                    </tr> --}}
                                    <tr>
                                        <th class="w-25 text-end align-middle">Payment Term:</th>
                                        <td>
                                            <select id="payment_term" name="payment_term" class="form-select">
                                                <option value="Net 30"
                                                    {{ $quote->payment_term == 'Net 30' ? 'selected' : '' }}>Net 30
                                                </option>
                                            </select>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th class="w-25 text-end align-middle">Contract No:</th>
                                        <td>
                                            <input name="contract_no" id="contract_no" type="text"
                                                class="form-control" value="{{ old('contract_no', $quote->contract_no) }}"
                                                placeholder="Enter contract number"
                                                @if (old('contract_name', $quote->contract_name) !== 'OM') readonly @endif>
                                        </td>
                                    </tr>
                                    {{-- <tr>
                                        <th class="w-25 text-end align-middle">Credit Cards:</th>
                                        <td>VISA/MASTER</td>
                                    </tr>
                                    <tr>
                                        <th class="w-25 text-end align-middle">Additional Notes:</th>
                                        <td>
                                            <ul class="list-unstyled mb-0">
                                                <li>Credit Card Fees May Apply</li>
                                                <li>Sales Tax May Apply</li>
                                            </ul>
                                        </td>
                                    </tr> --}}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div>
                    <!-- Inner Div 2 -->
                    <div class="card p-4 mb-3 shadow-sm">
                        <h5 class="card-header">Quote Details</h5>
                        <div class="card-body">
                            <table class="table table-borderless">
                                <tbody>
                                    <tr>
                                        <th class="w-25 text-end align-middle">Quote #:</th>
                                        <td>
                                            <input type="text" name="quote_no" value="{{ $quote->quote_no }}"
                                                id="quote_no" class="form-control">
                                        </td>
                                    </tr>
                                    <tr>
                                        <th class="w-25 text-end align-middle">Quote Date:</th>
                                        <td>
                                            <input type="date" name="quote_date" value="{{ $quote->quote_date }}"
                                                id="quote_date" class="form-control">
                                        </td>
                                    </tr>
                                    <tr>
                                        <th class="w-25 text-end align-middle">Quote Expiry:</th>
                                        <td>
                                            <input type="date" name="quote_expiry" value="{{ $quote->quote_expiry }}"
                                                id="quote_expiry" class="form-control">
                                        </td>
                                    </tr>
                                    <tr>
                                        <th class="w-25 text-end align-middle">RFQ:</th>
                                        <td>
                                            <input type="text" name="rfq" value="{{ $quote->rfq }}"
                                                id="quote_rfq" class="form-control" placeholder="Enter RFQ">
                                        </td>
                                    </tr>
                                    {{-- <tr>
                                        <th class="w-25 text-end align-middle">UEI:</th>
                                        <td>
                                            <select name="quote_uei" id="quote_uei" class="form-select">
                                                <option value="FED/TECH">FED/TECH</option>
                                                <option value="SLED/TECH">SLED/TECH</option>
                                                <option value="FEG/GOV">FEG/GOV</option>
                                            </select>
                                        </td>
                                    </tr> --}}
                                    <tr>
                                        <th class="w-25 text-end align-middle">Shipping:</th>
                                        <td>
                                            <div class="input-group">
                                                <span class="input-group-text"><i id="icon"
                                                        class="bi bi-currency-dollar"></i></span>
                                                <input type="number" step="0.01" name="shipping"
                                                    id="shipping_charges" value="{{ $quote->shipping }}"
                                                    class="form-control" placeholder="Enter shipping charges">
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th class="w-25 text-end align-middle">Total Pricing:</th>
                                        <td>
                                            <div class="input-group">
                                                <span class="input-group-text"><i id="icon"
                                                        class="bi bi-currency-dollar"></i></span>
                                                <input type="text" id="total_pricing" name="quote_pricing"
                                                    value="{{ $quote->total_pricing }}" class="form-control"
                                                    placeholder="Enter total pricing">
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th class="w-25 text-end align-middle">Comments:</th>
                                        <td>
                                            <textarea id="comment" name="comment" rows="3" class="form-control" placeholder="Enter comments">{{ $quote->comment }}</textarea>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <hr>
        </div>

        @php
            $groupedItems = $quote->quoteItems->groupBy('quote_year');
            $yearIndex = 0;
        @endphp
        @foreach ($groupedItems as $year => $items)
            <div id="quoteYear{{ $yearIndex }}" class="mb-5">
                <div class="mb-3">
                    <input type="file" class="excel-upload" data-year="{{ $yearIndex }}"
                        accept=".xlsx,.xls, .csv" />
                    <button type="button" class="btn btn-info btn-upload-excel" data-year="{{ $yearIndex }}">Upload
                        Excel</button>
                </div>

                <h4 class="text-center">
                    <input type="text" name="heading{{ $yearIndex }}" value="{{ $items->first()->heading }}"
                        class="form-control text-center" />
                </h4>

                <div class="table-responsive">
                    <table class="table table-bordered table-striped text-center" id="itemTable{{ $yearIndex }}">
                        <thead class="bg-light">
                            <tr>
                                <th>Line No</th>
                                <th><input class="form-control text-center" style="font-weight: bold; width: 5rem;"
                                        type="text" value="Part No"></th>
                                <th>Description</th>
                                <th>MSRP ($)</th>
                                <th>COGS ($)</th>
                                <th>Discount (%)</th>
                                <th>Markup (%)</th>
                                <th>Qty</th>
                                <th>Unit ($)</th>
                                <th>Extended ($)</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($items as $item)
                                <tr>
                                    <td>{{ $loop->iteration }}</td>
                                    <td>
                                        <input class="form-control skuSearchInput" type="text"
                                            name="part_no_{{ $loop->iteration }}{{ $yearIndex }}"
                                            value="{{ $item->part_no }}" />
                                        <ul class="list-group skuResults dropdown-menu"
                                            style="position: absolute; z-index: 1000; display: none;"></ul>
                                    </td>

                                    <td>
                                        <textarea class="form-control" name="description_{{ $loop->iteration }}{{ $yearIndex }}" rows="1">{{ $item->description }}</textarea>
                                    </td>
                                    <td>
                                        <div class="input-group">
                                            <input class="form-control text-center" onkeyup="updateExtended(this)"
                                                type="number" step="0.01"
                                                name="msrp_{{ $loop->iteration }}{{ $yearIndex }}"
                                                value="{{ $item->msrp }}" />
                                        </div>
                                    </td>
                                    <td>
                                        <div class="input-group">
                                            <input class="form-control text-center" onkeyup="updateExtended(this)"
                                                type="number" step="0.01"
                                                name="cogs_{{ $loop->iteration }}{{ $yearIndex }}"
                                                value="{{ $item->cogs }}" />
                                        </div>
                                    </td>
                                    <td>
                                        <div class="input-group">
                                            <input class="form-control text-center" onkeyup="updateExtended(this)"
                                                type="number" step="0.01"
                                                name="percentagediscount_{{ $loop->iteration }}{{ $yearIndex }}"
                                                value="{{ $item->percentagediscount }}" />
                                        </div>
                                    </td>
                                    <td>
                                        <div class="input-group">
                                            <input class="form-control text-center" onkeyup="updateExtended(this)"
                                                type="number" step="0.000001" max="100"
                                                name="percentagemarkup_{{ $loop->iteration }}{{ $yearIndex }}"}"
                                                value="{{ $item->percentage_markup }}" />
                                        </div>
                                    </td>
                                    <td>
                                        <input class="form-control text-center" onkeyup="updateExtended(this)"
                                            type="number" step="0.01"
                                            name="qty_{{ $loop->iteration }}{{ $yearIndex }}"
                                            value="{{ $item->quantity }}" />
                                    </td>
                                    <td>
                                        <div class="input-group">
                                            <input class="form-control text-center" onkeyup="updateExtended(this)"
                                                type="number" step="0.01"
                                                name="unit_{{ $loop->iteration }}{{ $yearIndex }}" id="per_unite"
                                                value="{{ $item->per_unite }}" />
                                        </div>
                                    </td>
                                    <td>
                                        <div class="input-group">
                                            <input class="form-control text-center" type="number" step="0.01"
                                                name="extended_{{ $loop->iteration }}{{ $yearIndex }}"
                                                value="{{ $item->part_no }}" readonly />
                                        </div>
                                    </td>
                                    <td>
                                        <button type="button" class="btn btn-danger btn-sm"
                                            onclick="removeRow(this)">-</button>
                                    </td>
                                    <td style="display: none;">
                                        <input class="form-control" type="number" step="0.01"
                                            name="quote_year_{{ $loop->iteration }}{{ $yearIndex }}"
                                            id="quote_year_{{ $yearIndex }}" value="{{ $item->quote_year }}"
                                            readonly />
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                        <tfoot>
                            <tr>
                                <td><strong>Total</strong></td>
                                <td></td>
                                <td></td>
                                <td id="totalmsrp{{ $yearIndex }}" name='totalmsrp{{ $yearIndex }}'></td>
                                <td id="totalcogs{{ $yearIndex }}" name='totalcogs{{ $yearIndex }}'></td>
                                <td></td>
                                <td></td>
                                <td id="totalqty{{ $yearIndex }}" name='totalqty{{ $yearIndex }}'></td>
                                <td></td>
                                <td id="totalextended{{ $yearIndex }}" name='totalextended{{ $yearIndex }}'></td>
                                <td></td>
                            </tr>
                        </tfoot>
                    </table>
                </div>

                <i class="bi bi-plus-circle icon btn btn-primary" type="button" onclick="addRow(this)"></i>
                <input id="rowCount{{ $yearIndex }}" type="number" placeholder="Enter Number of rows">
                <i class="bi bi-plus-circle icon btn btn-warning" type="button" onclick="addRows(this)"></i>
                <i class="btn btn-success" id="button{{ $yearIndex }}" type="button"
                    onclick="addYear({{ $yearIndex }})">Option Year {{ $yearIndex + 1 }}</i>
                <i class="btn btn-danger delete-option-year" type="button"
                    onclick="deleteYear('quoteYear{{ $yearIndex }}')">Delete
                    Base
                    Year</i>


                <div class="d-flex justify-content-between my-4">
                    <div class="table-responsive" style="width: 25%;">
                        <table class="table">
                            <tr>
                                <th>Sales Tax ($)</th>
                                <td>
                                    {{-- <i class="fa fa-percent "></i> --}}
                                    <input class="form-control text-center" onkeyup="updateExtended(this)"
                                        id="sale_tax_per{{ $yearIndex }}" name="sale_tax_per{{ $yearIndex }}"
                                        type="number" step="0.01" value="{{ $item->sale_tax }}" />
                                </td>
                            </tr>
                        </table>
                    </div>

                    <div class="table-responsive" style="width: 70%;">
                        <table class="table">
                            <tr>
                                <th>Subtotal</th>
                                <td><i class="fa fa-dollar"></i><input class="form-control text-center" type="text"
                                        id="subtotal{{ $yearIndex }}" name="subtotal{{ $yearIndex }}"
                                        value="" readonly /></td>
                            </tr>
                            <tr>
                                <th>Sales Tax</th>
                                <td><i class="fa fa-dollar"></i><input class="form-control text-center" type="text"
                                        id="sale_tax{{ $yearIndex }}" name="sale_tax{{ $yearIndex }}"
                                        value="" readonly /></td>
                            </tr>
                            <tr>
                                <th>Shipping Charges</th>
                                <td><i class="fa fa-dollar"></i><input class="form-control text-center" type="text"
                                        id="shipping_charges{{ $yearIndex }}"
                                        name="shipping_charges{{ $yearIndex }}" value="" readonly /></td>
                            </tr>
                            <tr>
                                <th>Total</th>
                                <td><i class="fa fa-dollar"></i><input class="form-control text-center" type="text"
                                        id="total{{ $yearIndex }}" name="total{{ $yearIndex }}" value=""
                                        readonly /></td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
            @php $yearIndex++ @endphp
        @endforeach

        <button id="submitBtn" type="submit" value="Submit" class="btn btn-primary btn-lg">
            Submit
        </button>


    </form>

    <script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
        crossorigin="anonymous"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const contractSelect = document.getElementById('contract_name');
            const contractNoInput = document.getElementById('contract_no');

            // Initialize based on existing values
            const savedName = "{{ $quote->contract_name }}";
            const savedNumber = "{{ $quote->contract_no }}";

            // Set initial state
            if (savedName === 'OM') {
                contractNoInput.removeAttribute('readonly');
            } else {
                // Find matching option
                const option = Array.from(contractSelect.options).find(opt =>
                    opt.value === savedName && opt.dataset.contract === savedNumber
                );
                if (option) {
                    option.selected = true;
                    contractNoInput.value = savedNumber;
                }
            }

            // Handle changes
            contractSelect.addEventListener('change', function() {
                if (this.value === 'OM') {
                    contractNoInput.value = '';
                    contractNoInput.removeAttribute('readonly');
                } else {
                    contractNoInput.value = this.selectedOptions[0].dataset.contract;
                    contractNoInput.setAttribute('readonly', 'true');
                }
            });
        });
    </script>
    <script>
        $(document).ready(function() {
            // Handle keyup event for all skuSearchInput
            $(document).on('keyup', '.skuSearchInput', function() {
                let query = $(this).val().trim();
                let resultsList = $(this).next('.skuResults'); // Get the associated <ul> element

                if (query.length > 2) {
                    $.ajax({
                        url: '/search-sku',
                        type: 'GET',
                        data: {
                            query: query
                        },
                        success: function(data) {
                            resultsList.empty().show();

                            if (data.length > 0) {
                                data.forEach(item => {
                                    resultsList.append(`
                                            <li class="list-group-item sku-item"
                                                data-sku="${item.sku}"
                                                data-msrp="${item.msrp}"
                                                data-list-price="${item.list_price}"
                                                data-source="${item.source}">
                                                <strong>${item.sku}</strong> - MSRP: $${item.msrp}, List Price: $${item.list_price}, Source: ${item.source}
                                            </li>
                                        `);
                                });
                            } else {
                                resultsList.append(
                                    '<li class="list-group-item">No matching results found</li>'
                                );
                            }
                        },
                        error: function() {
                            alert('Error retrieving SKU data.');
                        }
                    });
                } else {
                    resultsList.empty().hide();
                }
            });

            // Handle SKU selection
            $(document).on('click', '.sku-item', function() {
                let selectedSku = $(this).data('sku');
                let selectedMsrp = $(this).data('msrp');
                let selectedListPrice = $(this).data('list-price');
                let inputField = $(this).closest('td').find(
                    '.skuSearchInput'); // Find the corresponding input

                // Set the SKU in the input field
                inputField.val(selectedSku);
                inputField.next('.skuResults').hide(); // Hide the results

                // Set MSRP and List Price in the respective cells (cell 3 and 4)
                let row = inputField.closest('tr');
                row.find('input[name^="msrp_"]').val(selectedMsrp); // Set MSRP in cell 3
                row.find('input[name^="cogs_"]').val(selectedListPrice); // Set COGS in cell 4

                // Trigger the updateExtended function for those cells
                row.find('input[name^="msrp_"]').trigger('keyup');
                row.find('input[name^="cogs_"]').trigger('keyup');

                console.log(
                    `Selected SKU: ${selectedSku}, MSRP: ${selectedMsrp}, List Price: ${selectedListPrice}`
                );
            });

            // Hide results when clicking outside
            $(document).on('click', function(e) {
                if (!$(e.target).closest('.skuSearchInput').length) {
                    $('.skuResults').hide();
                }
            });
        });
        updateExtended(this);
    </script>

    <script>
        // Initialize clone counter
        let cloneCounter = {{ $groupedItems->count() - 1 }};
        let baseYearIndex = {{ $yearIndex }};

        // Function to add a new year (clone table)
        function addYear(n) {
            cloneCounter++;
            let originalTable = document.getElementById("quoteYear" + (cloneCounter - 1));
            let clone = originalTable.cloneNode(true);
            clone.id = "quoteYear" + cloneCounter;

            // Update upload elements' data-year
            const uploadInput = clone.querySelector('.excel-upload');
            const uploadButton = clone.querySelector('.btn-upload-excel');
            uploadInput.setAttribute('data-year', cloneCounter);
            uploadButton.setAttribute('data-year', cloneCounter);

            // Append the cloned table to the parent of the original table
            let originalTableParent = originalTable;
            originalTableParent.appendChild(clone);

            // Modify the heading input in the cloned table
            clone.querySelector('h4 input').id = 'heading' + cloneCounter;
            clone.querySelector('h4 input').name = 'heading' + cloneCounter;
            clone.querySelector('h4 input').value = 'Option Year ' + cloneCounter;

            // Update the button for adding more years
            let cloneButton = clone.querySelector('#button' + (cloneCounter - 1));
            cloneButton.id = 'button' + cloneCounter;
            cloneButton.setAttribute('onclick', 'addYear(' + cloneCounter + ')');
            cloneButton.innerHTML = 'Option Year ' + (cloneCounter + 1);

            // Update delete button functionality
            let deleteButton = clone.querySelector('.delete-option-year');
            deleteButton.setAttribute('onclick', `deleteYear('quoteYear${cloneCounter}')`);
            deleteButton.innerHTML = ('Delete Option Year ' + cloneCounter);

            // Clone the table and update the table's ID
            let clone_table = clone.querySelector('table');
            clone_table.id = 'itemTable' + cloneCounter;

            // Set row count ID
            let rowcount = clone.querySelector('#rowCount' + (cloneCounter - 1));
            rowcount.id = 'rowCount' + cloneCounter;

            // Function to safely set the attribute of an element if it exists
            function setElementAttribute(name, newName) {
                let element = document.getElementsByName(name + (cloneCounter - 1))[1];
                if (element) {
                    element.setAttribute('name', newName);
                } else {
                    console.error(`Element with name ${name + (cloneCounter - 1)} not found.`);
                }
            }

            // Set attributes for all form elements in the cloned table
            setElementAttribute('part_no_1', 'part_no_1' + cloneCounter);
            setElementAttribute('description_1', 'description_1' + cloneCounter);
            setElementAttribute('msrp_1', 'msrp_1' + cloneCounter);
            setElementAttribute('cogs_1', 'cogs_1' + cloneCounter);
            setElementAttribute('percentagediscount_1', 'percentagediscount_1' + cloneCounter);
            setElementAttribute('percentagemarkup_1', 'percentagemarkup_1' + cloneCounter);
            setElementAttribute('qty_1', 'qty_1' + cloneCounter);
            setElementAttribute('unit_1', 'unit_1' + cloneCounter);
            setElementAttribute('extended_1', 'extended_1' + cloneCounter);
            setElementAttribute('quote_year_1', 'quote_year_1' + cloneCounter);

            // Handling totals (MSRP, COGS, Quantity, etc.)
            let totalmsrp = document.getElementsByName('totalmsrp' + (cloneCounter - 1))[1];
            if (totalmsrp) {
                totalmsrp.setAttribute('name', 'totalmsrp' + cloneCounter);
                totalmsrp.setAttribute('id', 'totalmsrp' + cloneCounter);
            }

            let totalcogs = document.getElementsByName('totalcogs' + (cloneCounter - 1))[1];
            if (totalcogs) {
                totalcogs.setAttribute('name', 'totalcogs' + cloneCounter);
                totalcogs.setAttribute('id', 'totalcogs' + cloneCounter);
            }

            let totalqty = document.getElementsByName('totalqty' + (cloneCounter - 1))[1];
            if (totalqty) {
                totalqty.setAttribute('name', 'totalqty' + cloneCounter);
                totalqty.setAttribute('id', 'totalqty' + cloneCounter);
            }

            let totalextended = document.getElementsByName('totalextended' + (cloneCounter - 1))[1];
            if (totalextended) {
                totalextended.setAttribute('name', 'totalextended' + cloneCounter);
                totalextended.setAttribute('id', 'totalextended' + cloneCounter);
            }

            // Handling sales tax, subtotal, shipping, and total for each cloned table
            let sale_tax_per = document.getElementsByName('sale_tax_per' + (cloneCounter - 1))[1];
            if (sale_tax_per) {
                sale_tax_per.setAttribute('name', 'sale_tax_per' + cloneCounter);
                sale_tax_per.setAttribute('id', 'sale_tax_per' + cloneCounter);
                sale_tax_per.setAttribute('value', '0');
            }

            let subtotal = document.getElementsByName('subtotal' + (cloneCounter - 1))[1];
            if (subtotal) {
                subtotal.setAttribute('name', 'subtotal' + cloneCounter);
                subtotal.setAttribute('id', 'subtotal' + cloneCounter);
            }

            let sale_tax = document.getElementsByName('sale_tax' + (cloneCounter - 1))[1];
            if (sale_tax) {
                sale_tax.setAttribute('name', 'sale_tax' + cloneCounter);
                sale_tax.setAttribute('id', 'sale_tax' + cloneCounter);
            }

            let shipping_charges = document.getElementsByName('shipping_charges' + (cloneCounter - 1))[1];
            if (shipping_charges) {
                shipping_charges.setAttribute('name', 'shipping_charges' + cloneCounter);
                shipping_charges.setAttribute('id', 'shipping_charges' + cloneCounter);
            }

            let total = document.getElementsByName('total' + (cloneCounter - 1))[1];
            if (total) {
                total.setAttribute('name', 'total' + cloneCounter);
                total.setAttribute('id', 'total' + cloneCounter);
            }

            // Delete all rows from cloned table except for the last row (total row)
            let rows = clone_table.querySelectorAll('tr');
            for (let i = rows.length - 2; i > 0; i--) {
                rows[i].remove(); // Removes the row at index i
            }
        }

        // Event delegation for upload buttons
        document.addEventListener('click', function(e) {
            if (e.target && e.target.classList.contains('btn-upload-excel')) {
                const yearIndex = e.target.dataset.year;
                const fileInput = document.querySelector(`.excel-upload[data-year="${yearIndex}"]`);
                // Handle file upload for yearIndex
            }
        });

        //adding multiple rows
        function addRows(table) {
            // Get the number of rows to add from the input field
            const rowCount = document.getElementById('rowCount' + cloneCounter).value;
            const numRows = parseInt(rowCount, 10);

            if (!isNaN(numRows) && numRows > 0) {
                for (let i = 0; i < numRows; i++) {
                    addRow(table);
                }
            } else {
                alert('Please enter a valid number');
            }
        }

        //adding row into table dynamically
        function addRow(table) {
            var table = document.getElementById(table.parentNode.id).getElementsByTagName('tbody')[0];
            var newRow = table.insertRow(table.rows.length);
            var simplecounter = table.closest('table').id.slice(-1); // Extracting table number from ID

            // The number of the new row will be the current number of rows + 1
            var cell1 = newRow.insertCell(0);
            cell1.innerHTML = table.rows.length;

            for (var i = 1; i <= 11; i++) {
                var cell = newRow.insertCell(i);
                var input;

                // Part No
                if (i == 1) {
                    // Create the input for SKU search
                    input = document.createElement("input");
                    input.setAttribute('type', 'text');
                    input.setAttribute('name', 'part_no_' + table.rows.length + (
                        simplecounter)); // dynamic name for each row
                    input.classList.add("form-control", "skuSearchInput"); // Use class for all rows

                    // Create the results container (ul)
                    var resultsContainer = document.createElement("ul");
                    resultsContainer.classList.add("list-group", "skuResults",
                        "dropdown-menu"); // Use class to target all results

                    // Append the input and the results container to the cell
                    cell.appendChild(input);
                    cell.appendChild(resultsContainer);
                }


                // Description
                if (i == 2) {
                    preElement = document.createElement("pre");
                    input = document.createElement("textarea");
                    input.setAttribute('name', 'description_' + table.rows.length + (simplecounter));
                    input.setAttribute('rows', '1');
                    input.classList.add("form-control");
                    preElement.appendChild(input);
                    cell.appendChild(preElement);
                }

                // MSRP
                if (i == 3) {
                    var divGroup = document.createElement("div");
                    divGroup.classList.add("input-group");
                    input = document.createElement("input");
                    input.setAttribute('type', 'number');
                    input.setAttribute('step', '0.01');
                    input.setAttribute('name', 'msrp_' + table.rows.length + (simplecounter));
                    input.setAttribute('onkeyup', 'updateExtended(this)');
                    input.classList.add("form-control", "text-center");
                    divGroup.appendChild(input);
                    cell.appendChild(divGroup);
                }

                // COGS
                if (i == 4) {
                    var divGroup = document.createElement("div");
                    divGroup.classList.add("input-group");
                    input = document.createElement("input");
                    input.setAttribute('type', 'number');
                    input.setAttribute('step', '0.01');
                    input.setAttribute('name', 'cogs_' + table.rows.length + (simplecounter));
                    input.setAttribute('onkeyup', 'updateExtended(this)');
                    input.classList.add("form-control", "text-center");
                    divGroup.appendChild(input);

                    cell.appendChild(divGroup);
                }

                // Percentage Discount
                if (i == 5) {
                    var divGroup = document.createElement("div");
                    divGroup.classList.add("input-group");
                    input = document.createElement("input");
                    input.setAttribute('type', 'number');
                    input.setAttribute('step', '0.01');
                    input.setAttribute('name', 'percentagediscount_' + table.rows.length + (simplecounter));
                    input.setAttribute('onkeyup', 'updateExtended(this)');
                    input.classList.add("form-control", "text-center");
                    divGroup.appendChild(input);

                    cell.appendChild(divGroup);
                }

                // Percentage Markup
                if (i == 6) {
                    var divGroup = document.createElement("div");
                    divGroup.classList.add("input-group");
                    input = document.createElement("input");
                    input.setAttribute('type', 'number');
                    input.setAttribute('step', '0.000001');
                    input.setAttribute('max', '100');
                    input.setAttribute('name', 'percentagemarkup_' + table.rows.length + (simplecounter));
                    input.setAttribute('onkeyup', 'updateExtended(this)');
                    input.classList.add("form-control", "text-center");
                    divGroup.appendChild(input);

                    cell.appendChild(divGroup);
                }

                // Quantity
                if (i == 7) {
                    input = document.createElement("input");
                    input.setAttribute('type', 'number');
                    input.setAttribute('step', '0.01');
                    input.setAttribute('name', 'qty_' + table.rows.length + (simplecounter));
                    input.setAttribute('onkeyup', 'updateExtended(this)');
                    input.classList.add("form-control", "text-center");
                    cell.appendChild(input);
                }

                // Unit Price
                if (i == 8) {
                    var divGroup = document.createElement("div");
                    divGroup.classList.add("input-group");
                    input = document.createElement("input");
                    input.setAttribute('type', 'number');
                    input.setAttribute('step', '0.01');
                    input.setAttribute('name', 'unit_' + table.rows.length + (simplecounter));
                    input.setAttribute('onkeyup', 'updateExtended(this)');
                    input.classList.add("form-control", "text-center");
                    divGroup.appendChild(input);

                    cell.appendChild(divGroup);
                }

                // Extended Price
                if (i == 9) {
                    var divGroup = document.createElement("div");
                    divGroup.classList.add("input-group");
                    input = document.createElement("input");
                    input.setAttribute('type', 'number');
                    input.setAttribute('step', '0.01');
                    input.setAttribute('name', 'extended_' + table.rows.length + (simplecounter));
                    input.setAttribute('onkeyup', 'updateExtended(this)');
                    input.classList.add("form-control", "text-center");
                    divGroup.appendChild(input);

                    cell.appendChild(divGroup);
                }

                // Remove Button
                if (i == 10) {
                    input = document.createElement("button");
                    input.setAttribute('type', 'button');
                    input.setAttribute('class', 'btn btn-danger btn-sm');
                    input.setAttribute('onclick', 'removeRow(this)');
                    input.innerHTML = "-";
                    cell.appendChild(input);
                }

                // Hidden Field for quote_year
                if (i == 11) {
                    input = document.createElement("input");
                    input.setAttribute('type', 'number');
                    input.setAttribute('step', '0.01');
                    input.setAttribute('name', 'quote_year_' + table.rows.length + (simplecounter));
                    input.setAttribute('style', 'display:none;');
                    input.setAttribute('value', simplecounter);
                    cell.appendChild(input);
                }
            }
        }



        function removeRow(button) {
            const row = button.closest('tr');
            if (row) {
                const table = row.closest('table');
                const tbody = table.tBodies[0];
                row.remove();

                // Update line numbers
                updateLineNumbers(table);

                // Extract the table's identifier (e.g., 0, 1 from 'itemTable0')
                const simplecounter = table.id.replace('itemTable', '');

                // Reindex all input names in the remaining rows
                const rows = tbody.rows;
                for (let i = 0; i < rows.length; i++) {
                    const currentRow = rows[i];
                    const newIndex = i + 1; // Line numbers start at 1

                    // Update each input's name with the new index
                    currentRow.querySelector('[name^="part_no_"]').name = `part_no_${newIndex}${simplecounter}`;
                    currentRow.querySelector('[name^="description_"]').name = `description_${newIndex}${simplecounter}`;
                    currentRow.querySelector('[name^="msrp_"]').name = `msrp_${newIndex}${simplecounter}`;
                    currentRow.querySelector('[name^="cogs_"]').name = `cogs_${newIndex}${simplecounter}`;
                    currentRow.querySelector('[name^="percentagediscount_"]').name =
                        `percentagediscount_${newIndex}${simplecounter}`;
                    currentRow.querySelector('[name^="percentagemarkup_"]').name =
                        `percentagemarkup_${newIndex}${simplecounter}`;
                    currentRow.querySelector('[name^="qty_"]').name = `qty_${newIndex}${simplecounter}`;
                    currentRow.querySelector('[name^="unit_"]').name = `unit_${newIndex}${simplecounter}`;
                    currentRow.querySelector('[name^="extended_"]').name = `extended_${newIndex}${simplecounter}`;
                    currentRow.querySelector('[name^="quote_year_"]').name = `quote_year_${newIndex}${simplecounter}`;
                }

                updateExtended(button); // Recalculate totals
            }
        }

        //delete
        function deleteYear(yearId) {
            cloneCounter = cloneCounter - 1;
            const yearElement = document.getElementById(yearId);
            if (yearElement) {
                yearElement.remove();
            }
        }

        function updateLineNumbers(table) {
            const tbody = table.getElementsByTagName('tbody')[0];
            const rows = tbody.getElementsByTagName('tr');
            for (let i = 0; i < rows.length; i++) {
                rows[i].cells[0].innerHTML = i + 1; // Update line numbers starting from 1
            }
        }



        document.addEventListener('input', function(event) {
            var target = event.target;

            if (target.tagName.toLowerCase() === 'input' && target.closest('tbody')) {
                updateExtended(this);
            }
        });

        function updateExtended(tdelement) {
            var extend = 0;
            var extend = 0;
            var percentdiscount = 0;
            var unit = 0;
            var table = tdelement.closest('table').getElementsByTagName('tbody')[0];
            var simplecounter = tdelement.closest('table').id.slice(-1);
            var summsrp = 0;
            var sumcogs = 0;
            var sumqty = 0;
            var sumextended = 0;

            for (var row = 0; row < table.rows.length; row++) {
                var msrp = parseFloat(table.rows[row].cells[3].querySelector('input').value) || 0;
                var cogs = parseFloat(table.rows[row].cells[4].querySelector('input').value) || 0;
                var markup = parseFloat(table.rows[row].cells[6].querySelector('input').value) || 0;
                var qty = parseFloat(table.rows[row].cells[7].querySelector('input').value) || 0;
                var unit = parseFloat(table.rows[row].cells[8].querySelector('input').value) || 0;
                if (cogs > msrp || cogs == '' || msrp == '') {
                    var extended = qty * unit;
                    sumextended += extended;
                    document.getElementById('totalextended' + simplecounter).innerHTML = sumextended;

                    sumqty += qty;

                    document.getElementById('totalmsrp' + simplecounter).innerHTML = summsrp;
                    document.getElementById('totalqty' + simplecounter).innerHTML = sumqty;

                    percentdiscount += percentagediscount;
                    extend += extended;
                    table.rows[row].cells[9].querySelector('input').value = extended.toFixed(2);
                    // table.rows[row].cells[8].querySelector('input').value = percent_unit.toFixed(2);
                } else {
                    var extended = qty * unit;
                    sumextended += extended;
                    document.getElementById('totalextended' + simplecounter).innerHTML = sumextended;

                    var percent_unit = (cogs * markup);
                    var percentagediscount = ((msrp - cogs) / msrp) * 100;
                    summsrp += msrp;
                    sumcogs += cogs;
                    sumqty += qty;

                    document.getElementById('totalmsrp' + simplecounter).innerHTML = summsrp;
                    document.getElementById('totalcogs' + simplecounter).innerHTML = sumcogs;
                    document.getElementById('totalqty' + simplecounter).innerHTML = sumqty;

                    percentdiscount += percentagediscount;
                    extend += extended;
                    table.rows[row].cells[9].querySelector('input').value = extended.toFixed(2);
                    table.rows[row].cells[8].querySelector('input').value = percent_unit.toFixed(2);
                }

                if (cogs > msrp || cogs == '' || msrp == '') {

                    table.rows[row].cells[5].querySelector('input').value = '';
                } else {

                    table.rows[row].cells[5].querySelector('input').value = percentagediscount.toFixed(2);
                }

                var formData = {};
                var formElements = document.getElementById('yourForm').elements;

                for (var i = 0; i < formElements.length; i++) {
                    var element = formElements[i];
                    formData[element.name] = element.value;
                }

                // Convert the form data to JSON
                var formDataJSON = JSON.stringify(formData);
                // Log the JSON data to the console (you can modify this part based on your needs)
                console.log(formDataJSON);

            }


            var subtotal = document.getElementById('subtotal' + simplecounter);
            if (subtotal) {
                subtotal.value = extend.toFixed(2);
            }

            var taxRate = document.getElementById('sale_tax_per' + simplecounter).value;
            var tax = 1 * taxRate;
            var taxField = document.getElementById('sale_tax' + simplecounter);
            if (taxField) {
                taxField.value = tax.toFixed(2);
            }

            var shipping = parseFloat(document.getElementById('shipping_charges').value) || 0; //don't change its id
            var ship = document.getElementById('shipping_charges' + simplecounter).value = shipping;
            var shipping1 = parseFloat(document.getElementById('shipping_charges' + simplecounter).value) || shipping;
            var totalAmount = (extend + tax + shipping1);
            var totalField = document.getElementById('total' + simplecounter);
            var total_pricing = document.getElementById('total_pricing');
            if (totalField) {
                totalField.value = totalAmount.toFixed(2);
                // total_pricing.value = totalAmount.toFixed(2);
            }
            let totalSum = 0;
            const totalInputs = document.querySelectorAll('input[id^="total"]');
            totalInputs.forEach(input => {
                if (input.id !== 'total_pricing' && input.value) {
                    totalSum += parseFloat(input.value) || 0;
                }
            });
            document.getElementById('total_pricing').value = totalSum.toFixed(2);
        }
    </script>
    <script>
        $(function() {
            // —— Dynamic Image Swap on “From” change ——
            const updateImage = () => {
                const val = $('#from').val().trim();
                const src = val === 'vCloud Gov Inc.' ?
                    "{{ asset('storage/images/vgov.png') }}" :
                    "{{ asset('storage/images/vv.png') }}";
                $('#image').attr('src', src);
            };
            $('#from').on('input', updateImage);

            // —— “To” (Customer) Autocomplete ——
            $('#to').on('input', function() {
                const q = $(this).val();
                $.get("{{ route('to_search') }}", {
                    to: q
                }, html => {
                    $('#to_list').html(html);
                });
            });
            $(document).on('click', '#to_list li', function() {
                const name = $(this).text();
                $('#to').val(name);
                $('#to_list').empty();
                $.getJSON("{{ route('fetch_to_details') }}", {
                    to: name
                }, data => {
                    $('#to_email').val(data.to_email || '');
                    $('#to_address').val(data.to_address || '');
                    $('#to_phone').val(data.to_phone || '');
                });
            });

            // —— “From” (Sales Rep) Autocomplete ——
            function fetchAndFillRep(repName) {
                if (!repName) return;
                $.getJSON("{{ route('fetch_from_details') }}", {
                    sales_rep: repName
                }, data => {
                    $('#from').val(data.from || '');
                    $('#from_email').val(data.from_email || '');
                    $('#from_address').val(data.from_address || '');
                    $('#from_phone').val(data.from_phone || '');
                    // image swap
                    const src = (data.from === 'vCloud Gov Inc.') ?
                        "{{ asset('storage/images/vgov.png') }}" :
                        "{{ asset('storage/images/vv.png') }}";
                    $('#image').attr('src', src);
                });
            }

            // 1) On page load, use the existing value in #sales_rep
            fetchAndFillRep($('#sales_rep').val().trim());

            // 2) On any change/input in #sales_rep, refetch automatically
            $('#sales_rep').on('input change', function() {
                fetchAndFillRep($(this).val().trim());
            });

            // —— Contract No Auto‑fill ——
            $('#contract_name').on('change', function() {
                $('#contract_no').val(
                    $(this).val() === 'Open Market' ? 'OM' : ''
                );
            });

            // —— FTIN/CAGE/DUNS Auto‑fill based on “From” ——
            const updateCodes = () => {
                const val = $('#from').val().trim();
                if (val === 'vCloud Gov Inc.') {
                    $('#ftin').text('88-3540511');
                    $('#cage_code').text('9DKF0');
                    $('#dnus_no').text('118765889');
                } else {
                    $('#ftin').text('46-3104792');
                    $('#cage_code').text('77T86');
                    $('#dnus_no').text('079508688');
                }
            };
            $('#from').on('input', updateCodes);
            // Also re-run when suggestion clicked
            $(document).on('click', '#sales_rep_list li, #from_list li', updateCodes);

            // Initial population on page load
            updateImage();
            updateCodes();
        });
    </script>
    <script>
        // Add loading screen elements
        const loadingCSS = `
                .loading-overlay {
                    position: fixed;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background: rgba(0, 0, 0, 0.7);
                    display: none;
                    justify-content: center;
                    align-items: center;
                    z-index: 99999;
                }
                .loading-spinner {
                    border: 5px solid #f3f3f3;
                    border-top: 5px solid #3498db;
                    border-radius: 50%;
                    width: 50px;
                    height: 50px;
                    animation: spin 1s linear infinite;
                }
                .loading-text {
                    color: white;
                    margin-top: 15px;
                    font-size: 18px;
                }
                @keyframes spin {
                    0% { transform: rotate(0deg); }
                    100% { transform: rotate(360deg); }
                }`;

        document.head.insertAdjacentHTML('beforeend', `<style>${loadingCSS}</style>`);
        document.body.insertAdjacentHTML('beforeend', `
                <div class="loading-overlay" id="loadingOverlay">
                    <div style="text-align: center;">
                        <div class="loading-spinner"></div>
                        <div class="loading-text">Processing Excel File...</div>
                    </div>
                </div>`);

        // Function to show loading screen with force
        function showLoading() {
            const loadingOverlay = document.getElementById('loadingOverlay');
            loadingOverlay.style.display = 'flex';
            document.body.style.overflow = 'hidden';
            // Force reflow to ensure display
            void loadingOverlay.offsetHeight;
        }

        // Function to hide loading screen
        function hideLoading() {
            const loadingOverlay = document.getElementById('loadingOverlay');
            loadingOverlay.style.display = 'none';
            document.body.style.overflow = '';
        }

        // Enhanced handleExcelUpload with guaranteed loading visibility
        function handleExcelUpload(yearIndex) {
            const fileInput = document.querySelector(`.excel-upload[data-year="${yearIndex}"]`);
            const file = fileInput.files[0];

            if (!file) {
                alert('Please select a file.');
                return;
            }

            // Show loading screen with forced display
            showLoading();
            fileInput.disabled = true;

            const reader = new FileReader();
            reader.onload = function(e) {
                try {
                    const data = new Uint8Array(e.target.result);
                    const workbook = XLSX.read(data, {
                        type: 'array'
                    });
                    const firstSheet = workbook.Sheets[workbook.SheetNames[0]];
                    const jsonData = XLSX.utils.sheet_to_json(firstSheet, {
                        header: 1
                    });
                    const table = document.getElementById(`itemTable${yearIndex}`).getElementsByTagName('tbody')[0];

                    // Clear existing rows except header and footer
                    // while (table.rows.length > 1) {
                    //     table.deleteRow(1);
                    // }

                    // Process in batches for better performance
                    let processedRows = 0;
                    const BATCH_SIZE = 50;
                    const totalRows = jsonData.length - 1;

                    const processBatch = () => {
                        const batchEnd = Math.min(processedRows + BATCH_SIZE, totalRows);

                        for (let i = processedRows; i < batchEnd; i++) {
                            const row = jsonData[i + 1]; // Skip header row
                            const newRow = table.insertRow(-1); // Insert before footer
                            const simplecounter = yearIndex;

                            // Create cells (12 columns)
                            for (let j = 0; j < 12; j++) {
                                newRow.insertCell(j);
                            }

                            // Line number
                            newRow.cells[0].innerHTML = table.rows.length;

                            // Part No with SKU search
                            const partNoInput = document.createElement('input');
                            partNoInput.className = 'form-control skuSearchInput';
                            partNoInput.type = 'text';
                            partNoInput.name = `part_no_${table.rows.length}${simplecounter}`;
                            partNoInput.value = row[0] || '';
                            newRow.cells[1].appendChild(partNoInput);

                            // SKU results container
                            const skuResults = document.createElement('ul');
                            skuResults.className = 'list-group skuResults dropdown-menu';
                            skuResults.style.cssText = 'position: absolute; z-index: 1000; display: none;';
                            newRow.cells[1].appendChild(skuResults);

                            // Description
                            const descTextarea = document.createElement('textarea');
                            descTextarea.className = 'form-control';
                            descTextarea.rows = 1;
                            descTextarea.name = `description_${table.rows.length - 1}${simplecounter}`;
                            descTextarea.value = row[1] || '';
                            newRow.cells[2].appendChild(descTextarea);

                            // MSRP
                            const msrpInput = createNumberInput(`msrp_${table.rows.length - 1}${simplecounter}`);
                            msrpInput.value = row[2] || 0;
                            newRow.cells[3].appendChild(msrpInput);

                            // COGS
                            const cogsInput = createNumberInput(`cogs_${table.rows.length - 1}${simplecounter}`);
                            cogsInput.value = row[3] || 0;
                            newRow.cells[4].appendChild(cogsInput);

                            // Discount (%)
                            const discountInput = createNumberInput(
                                `percentagediscount_${table.rows.length - 1}${simplecounter}`);
                            discountInput.readOnly = true;
                            newRow.cells[5].appendChild(discountInput);

                            // Markup (%)
                            const markupInput = createNumberInput(
                                `percentagemarkup_${table.rows.length - 1}${simplecounter}`);
                            markupInput.setAttribute('max', '100');
                            markupInput.setAttribute('step', '0.000001');
                            markupInput.value = row[4] || 0;
                            newRow.cells[6].appendChild(markupInput);

                            // Quantity
                            const qtyInput = createNumberInput(`qty_${table.rows.length - 1}${simplecounter}`);
                            qtyInput.value = row[5] || 0;
                            newRow.cells[7].appendChild(qtyInput);

                            // Unit Price
                            const unitInput = createNumberInput(`unit_${table.rows.length - 1}${simplecounter}`);
                            newRow.cells[8].appendChild(unitInput);

                            // Extended Price
                            const extendedInput = createNumberInput(
                                `extended_${table.rows.length - 1}${simplecounter}`);
                            extendedInput.readOnly = true;
                            newRow.cells[9].appendChild(extendedInput);

                            // Remove Button
                            const removeBtn = document.createElement('button');
                            removeBtn.type = 'button';
                            removeBtn.className = 'btn btn-danger btn-sm';
                            removeBtn.innerHTML = '-';
                            removeBtn.onclick = () => removeRow(removeBtn);
                            newRow.cells[10].appendChild(removeBtn);

                            // Hidden Year Input
                            const yearInput = document.createElement('input');
                            yearInput.type = 'hidden';
                            yearInput.name = `quote_year_${table.rows.length - 1}${simplecounter}`;
                            yearInput.value = simplecounter;
                            newRow.cells[11].appendChild(yearInput);

                            // Add event listeners
                            [msrpInput, cogsInput, markupInput, qtyInput, unitInput].forEach(input => {
                                input.onkeyup = () => updateExtended(input);
                            });
                        }

                        processedRows = batchEnd;

                        if (processedRows < totalRows) {
                            setTimeout(processBatch, 0);
                        } else {
                            // Final calculations
                            updateExtended(table.rows[0].querySelector('input'));
                            hideLoading();
                            fileInput.disabled = false;
                        }
                    };

                    processBatch();
                } catch (error) {
                    console.error('Error processing Excel:', error);
                    hideLoading();
                    fileInput.disabled = false;
                    alert('Error processing Excel file. See console for details.');
                }
            };

            reader.onerror = () => {
                hideLoading();
                fileInput.disabled = false;
                alert('Error reading file');
            };

            reader.readAsArrayBuffer(file);
        }

        // Keep all original functions exactly as they were
        function createNumberInput(name) {
            const input = document.createElement('input');
            input.type = 'number';
            input.step = '0.01';
            input.className = 'form-control text-center';
            input.name = name;
            input.onkeyup = function() {
                updateExtended(this);
            };
            return input;
        }

        // Event delegation for upload buttons
        document.addEventListener('click', function(e) {
            if (e.target?.classList.contains('btn-upload-excel')) {
                const yearIndex = e.target.dataset.year;
                handleExcelUpload(yearIndex);
            }
        });
        // Automatically update all tables every second
        setInterval(function() {
            let index = 0;
            while (true) {
                const table = document.getElementById(`itemTable${index}`);
                if (!table) break;

                // Trigger update for this table using the first input element found
                const input = table.querySelector('input');
                if (input) {
                    updateExtended(input);
                }
                index++;
            }
        }, 1000); // 1000ms = 1 second interval
    </script>
@endsection