@extends('layouts.master')
@section('content')
    <form id="yourForm" action="{{ route('pdf') }}" method="post">
        @csrf
        {{-- @method('GET') --}}
        <div>
            <div>
                <div>
                    <!-- Inner Div 1 -->
                    <input type="hidden" name="customer_id" id="customer_id"
                        value="{{ old('customer_id', $quote->customer_id ?? '') }}">
                    <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">
                                <tr>
                                    <th class="w-25 text-end align-middle">Manufacturer / Publisher:</th>
                                    <td>
                                        <input type="text" name="manufacturer" value="" id="manufacturer"
                                            class="form-control" placeholder="Enter Manufacturer / Publisher">
                                    </td>
                                </tr>
                                <tr>
                                    <th class="text-end">To:</th>
                                    <td>
                                        <input type="text" name="to" id="to"
                                            value="{{ old('to', $quote->customer->to ?? '') }}" class="form-control"
                                            placeholder="Enter recipient">
                                        <div id="to_list"></div>
                                    </td>
                                </tr>
                                <tr>
                                    <th class="text-end">Email:</th>
                                    <td>
                                        <input type="email" name="to_email" id="to_email"
                                            value="{{ old('to_email', $quote->customer->to_email ?? '') }}"
                                            class="form-control">
                                    </td>
                                </tr>
                                <tr>
                                    <th class="text-end">Address:</th>
                                    <td>
                                        <textarea name="to_address" id="to_address" class="form-control" rows="2">{{ old('to_address', $quote->customer->to_address ?? '') }}</textarea>
                                    </td>
                                </tr>
                                <tr>
                                    <th class="text-end">Phone:</th>
                                    <td>
                                        <input type="text" name="to_phone" id="to_phone"
                                            value="{{ old('to_phone', $quote->customer->to_phone ?? '') }}"
                                            class="form-control">
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
                <div>
                    <input type="hidden" name="sales_rep_id"
                        value="{{ old('sales_rep_id', $quote->sales_rep_id ?? Auth::id()) }}">
                    <!-- 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>
                                        <td>
                                            <input type="text" name="from" value="" id="from"
                                                class="form-control" placeholder="Enter sender name">
                                            <div id="from_list"></div>
                                        </td>
                                    </tr> --}}
                                    {{-- <tr>
                                        <th class="w-25 text-end align-middle">Sales Rep:</th>
                                        <td>
                                            @if (Auth::user()->role === 'Admin')
                                                <input type="text" name="sales_rep_id" id="sales_rep"
                                                    value="{{ $task->assignedUser->id ?? Auth::user()->id }}"
                                                    class="form-control">
                                            @else
                                                <input type="text" name="sales_rep_id" id="sales_rep"
                                                    value="{{ $task->assignedUser->id ?? Auth::user()->id }}"
                                                    class="form-control" readonly>
                                            @endif
                                            <div id="sales_rep_list"></div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th class="w-25 text-end align-middle">Email:</th>
                                        <td>
                                            <input type="email" name="from_email" value="" 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"></textarea>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th class="w-25 text-end align-middle">Phone:</th>
                                        <td>
                                            <input type="tel" name="from_phone" value="" id="from_phone"
                                                class="form-control" placeholder="Enter phone number">
                                        </td>
                                    </tr> --}}
                                    @if (isset($task))
                                        <input type="hidden" name="task_id" value="{{ $task->id }}">
                                    @endif
                                </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_tern" name="payment_term" class="form-select">
                                                <option value="Net 30">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" 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="" id="quote_no"
                                                class="form-control" placeholder="Enter quote number">
                                        </td>
                                    </tr>
                                    <tr>
                                        <th class="w-25 text-end align-middle">Quote Date:</th>
                                        <td>
                                            <input type="date" name="quote_date"
                                                value="{{ \Carbon\Carbon::now()->toDateString() }}" 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="" 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="" 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="0" 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="total_pricing"
                                                    value="" 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"></textarea>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <hr>
        </div>
        <div id="quoteYear0">
            <!-- Inside each quoteYearX div -->
            <div class="mb-3">
                <input type="file" class="excel-upload" data-year="0" accept=".xlsx,.xls, .csv" />
                <button type="button" class="btn btn-info btn-upload-excel" data-year="0">Upload
                    Excel</button>
            </div>
            <h4 class="text-center">
                <input type="text" name="heading0" id="heading0" value="Base Year"
                    class="form-control text-center" />
            </h4>
            <div class="table-responsive">
                <table class="table table-bordered table-striped text-center" id="itemTable0">
                    <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>
                        <tr>
                            <td>1</td>
                            <td>
                                <input class="form-control skuSearchInput" type="text" name="part_no_10"
                                    value="" />
                                <ul class="list-group skuResults dropdown-menu"
                                    style="position: absolute; z-index: 1000; display: none;"></ul>
                            </td>

                            <td>
                                <textarea class="form-control" name="description_10" rows="1"></textarea>
                            </td>
                            <td>
                                <div class="input-group">
                                    <input class="form-control text-center" onkeyup="updateExtended(this)" type="number"
                                        step="0.01" name="msrp_10" value="" />
                                </div>
                            </td>
                            <td>
                                <div class="input-group">
                                    <input class="form-control text-center" onkeyup="updateExtended(this)" type="number"
                                        step="0.01" name="cogs_10" value="" />
                                </div>
                            </td>
                            <td>
                                <div class="input-group">
                                    <input class="form-control text-center" onkeyup="updateExtended(this)" type="number"
                                        step="0.01" name="percentagediscount_10" value="" />
                                </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_10" value="" />
                                </div>
                            </td>
                            <td>
                                <input class="form-control text-center" onkeyup="updateExtended(this)" type="number"
                                    step="0.01" name="qty_10" value="" />
                            </td>
                            <td>
                                <div class="input-group">
                                    <input class="form-control text-center" onkeyup="updateExtended(this)" type="number"
                                        step="0.01" name="unit_10" id="per_unite" value="" />
                                </div>
                            </td>
                            <td>
                                <div class="input-group">
                                    <input class="form-control text-center" type="number" step="0.01"
                                        name="extended_10" value="" 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_10"
                                    id="quote_year_1" value="0" readonly />
                            </td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td><strong>Total</strong></td>
                            <td></td>
                            <td></td>
                            <td id="totalmsrp0" name='totalmsrp0'></td>
                            <td id="totalcogs0" name='totalcogs0'></td>
                            <td></td>
                            <td></td>
                            <td id="totalqty0" name='totalqty0'></td>
                            <td></td>
                            <td id="totalextended0" name='totalextended0'></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="rowCount0" 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="button0" type="button" onclick="addYear(0)">Option Year 1</i>
            <i class="btn btn-danger delete-option-year" type="button" onclick="deleteYear('quoteYear0')">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_per0"
                                    name="sale_tax_per0" type="number" step="0.01" value="0" />
                            </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="subtotal0" name="subtotal0" 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_tax0" name="sale_tax0" 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_charges0" name="shipping_charges0" value="" readonly /></td>
                        </tr>
                        <tr>
                            <th>Total</th>
                            <td><i class="fa fa-dollar"></i><input class="form-control text-center" type="text"
                                    id="total0" name="total0" value="" readonly /></td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>

        <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.getElementById('contract_name').addEventListener('change', function() {
            const contractNoField = document.getElementById('contract_no');
            if (this.value === 'OM') {
                contractNoField.value = '';
                contractNoField.removeAttribute('readonly');
            } else {
                contractNoField.value = this.selectedOptions[0].dataset.contract;
                contractNoField.setAttribute('readonly', 'true');
            }
        });

        // Initialize on load
        document.addEventListener('DOMContentLoaded', function() {
            const contractSelect = document.getElementById('contract_name');
            const contractNoField = document.getElementById('contract_no');

            if (contractSelect.value === 'OM') {
                contractNoField.removeAttribute('readonly');
            } else {
                contractNoField.value = contractSelect.selectedOptions[0].dataset.contract;
                contractNoField.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 = 0;

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