@extends('backend.layouts.app')
@section('backend_title', 'Admin Brand List')

@section('backend_content')

    <div class="my-4 row">
        <div class="col-12">
            <div class="card">
                <div class="pb-0 card-header">
                    <div class="d-lg-flex justify-content-between">
                        <div class="d-flex align-items-center ">
                            <h5 class="mb-0">Sales Create Form</h5>
                            <p class="mb-0 text-sm ms-3">
                                <button type="button" id="addNewSale" class="me-2 mb-0 btn btn-dark">Add New Sale</button>
                            </p>
                        </div>
                        <div class="d-flex column-gap-3">
                            <div class="d-flex">
                                <select class="select2 form-select form-select-sm error-border supplier_id" name="supplier_id" data-placeholder="Select Supplier" style="width:180px">
                                    <option value="null" selected>Select Supplier</option>
                                    @foreach ($suppliers as $item)
                                        <option value="{{ $item->id }}">{{ $item->company_name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <input type="hidden" id="purchaseId" value="null">
                            <button type="button" id="SaveAndChange" class="me-2 mb-0 btn btn-success ms-3">Save And Change</button>
                        </div>
                    </div>
                </div>
                <div class="px-0 pb-0 card-body">
                    <div class="table-responsive">
                        <table class="table table-flush" id="purchaseCreateForm">
                            <thead class="thead-light">
                                <tr>
                                    <th class="no-sort">
                                        <div class="form-check d-flex align-items-center">
                                            <input class="form-check-input tex-xs" type="checkbox" id="select-all">
                                        </div>
                                    </th>
                                    <th class="text-xs">IV Num.</th>
                                    <th class="text-xs">Product Name</th>
                                    <th class="text-xs">Convert Unit</th>
                                    <th class="text-xs">Convert Per Unit</th>
                                    <th class="text-xs">Sale Price</th>
                                    <th class="text-xs">Wholesale Price</th>
                                    <th class="text-xs">Retail Price</th>
                                    <th class="text-xs">Quantity</th>
                                    <th class="text-xs">SubTotal</th>
                                    <th class="text-xs">Discount</th>
                                    <th class="text-xs">VAT</th>
                                    <th class="text-xs">Total Amount</th>
                                    <th class="text-xs">Advance</th>
                                    <th class="text-xs">Due</th>
                                    <th class="text-xs">Action</th>
                                </tr>
                            </thead>
                            <tbody id="itemsTable">
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>


            <div class="card mt-5">
                <div class="pb-0 card-header">
                    <div class="d-lg-flex justify-content-between">
                        <div>
                            <h5 class="mb-0">Sale Order List</h5>
                            <p class="mb-0 text-sm">
                            </p>
                        </div>
                    </div>
                </div>
                <div class="px-0 pb-0 card-body">

                    <div class="table-responsive">
                        <table class="table table-flush" id="products-list">
                            <thead class="thead-light">
                                <tr>
                                    <th class="text-xs">IV Num.</th>
                                    <th class="text-xs">Supplier Name</th>
                                    <th class="text-xs">Quantity</th>
                                    <th class="text-xs">SubTotal</th>
                                    <th class="text-xs">Total Amount</th>
                                    <th class="text-xs">Discount</th>
                                    <th class="text-xs">Advance</th>
                                    <th class="text-xs">Due</th>
                                    <th class="text-xs">VAT</th>
                                    <th class="text-xs">Action</th>
                                </tr>
                            </thead>
                            @if (isset($sales))
                                <tbody>

                                    @foreach ($sales as $item)
                                        <tr>
                                            <td>
                                                <div class="d-flex">
                                                    <span class="text-xs">{{ $item->invoice_id }}</span>
                                                </div>
                                            </td>

                                            <td>
                                                <div class="d-flex">
                                                    <span class="text-xs">{{ $item->suppliers?->owner_name }}</span>
                                                </div>
                                            </td>

                                            <td>
                                                <div class="d-flex">
                                                    <span class="text-xs">{{ $item->quantity }}</span>
                                                </div>
                                            </td>

                                            <td>
                                                <div class="d-flex">
                                                    <span class="text-xs">{{ $item->subtotal }}</span>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="d-flex">
                                                    <span class="text-xs">{{ $item->total_amount }}</span>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="d-flex">
                                                    <span class="text-xs">{{ $item->discount }}</span>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="d-flex">
                                                    <span class="text-xs">{{ $item->paid }}</span>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="d-flex">
                                                    <span class="text-xs">{{ $item->due }}</span>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="d-flex">
                                                    <span class="text-xs">{{ $item->vat }}</span>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="d-flex">
                                                    <button type="button" class="purchaseRowEdit" data-id="{{ $item->id }}">Edit</button>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach

                                </tbody>
                            @endif
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('beackend_scripts')
    <script>
        const theadTH = document.getElementById('purchaseCreateForm')?.querySelector('thead tr th.no-sort');
        theadTH.innerHTML = '';
        theadTH.innerHTML = `<div class="form-check d-flex align-items-center">
                                <input class="form-check-input" type="checkbox" id="select-all" style="width:16px;height:16px;">
                            </div>`;


        document.addEventListener('DOMContentLoaded', () => {
            const addNewSaleButton = document.getElementById('addNewSale');
            const itemsTableBody = document.querySelector('#itemsTable');

            const str = "{{ $newcode }}";

            const number = parseInt(str.match(/\d+/)[0], 10);

            const createAutoIncrementer = (prefix = 'PS', length = 6) => {
                let currentNumber = number == 1 ? 0 : number;


                return () => {
                    currentNumber += 1;
                    let numStr = currentNumber.toString();
                    numStr = numStr.padStart(length, '0');
                    return prefix + numStr;
                };
            };

            // Initialize the auto-incrementer
            const autoIncrementer = createAutoIncrementer();

            // Function to add a new row
            function addNewRow() {
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td>
                        <div class="d-flex align-items-center">
                            <div class="my-auto form-check">
                                <input class="form-check-input single-item" type="checkbox" name="single_item" checked style="width:16px;height:16px;">
                            </div>
                        </div>
                    </td>
                    <td>
                        <div class="d-flex">
                            <span class="text-xs">${autoIncrementer()}</span>
                        </div>
                    </td>

                    <td>
                        <div class="d-flex">
                            <select class="select2 form-select form-select-sm error-border product_id" name="product_id" data-placeholder="Select Product" style="width:130px">
                                <option value="null" selected>Select Product</option>
                                @foreach ($products as $item)
                                    <option value="{{ $item->id }}" data-product_info="{{ $item->units->unit_name }},{{ $item->convert_unit }},{{ $item->purchase_price }},{{ $item->wholesale_price }},{{ $item->retail_price }},{{ $item->vat }}">{{ $item->bn_name != null ? $item->bn_name : $item->en_name }}</option>
                                @endforeach
                            </select>
                            <div class="form-text text-danger error-message error-product_id d-none"></div>
                        </div>
                    </td>

                    <td>
                        <div class="d-flex align-items-center">
                            <div class="unitShowDiv text-xs me-1"></div>
                            <input class="form-control form-control-sm error-border convert_unit" type="number" step="any" name="convert_unit" placeholder="" value="{{ old('convert_unit') }}" style="width:80px"/>
                        </div>
                    </td>

                    <td>
                        <div class="d-flex">
                            <input class="form-control form-control-sm error-border convert_per_unit" type="number" step="any" name="convert_per_unit" placeholder="" value="{{ old('convert_per_unit') }}" style="width:70px"/>
                        </div>
                    </td>

                    <td>
                        <div class="d-flex">
                            <input class="form-control form-control-sm error-border purchase_price" type="number" step="any" name="purchase_price" placeholder="" value="{{ old('purchase_price') }}" />
                            <div class="form-text text-danger error-message error-purchase_price d-none"></div>
                        </div>
                    </td>
                    <td>
                        <div class="d-flex">
                            <input class="form-control form-control-sm error-border wholesale_price" type="number" step="any" name="wholesale_price" placeholder="" value="{{ old('wholesale_price') }}" />
                            <div class="form-text text-danger error-message error-wholesale_price d-none"></div>
                        </div>
                    </td>
                    <td>
                        <div class="d-flex">
                            <input class="form-control form-control-sm error-border retail_price" type="number" step="any" name="retail_price" placeholder="" value="{{ old('retail_price') }}" style="width:80px" />
                            <div class="form-text text-danger error-message error-retail_price d-none"></div>
                        </div>
                    </td>
                    <td>
                        <div class="d-flex">
                            <input class="form-control form-control-sm error-border quantity" type="number" name="quantity" placeholder="" value="{{ old('quantity') }}" readonly style="width:70px" />
                            <div class="form-text text-danger error-message error-quantity d-none"></div>
                        </div>
                    </td>
                    <td>
                        <div class="d-flex">
                            <input class="form-control form-control-sm error-border subtotal" type="number" step="any" name="subtotal" placeholder="" value="{{ old('subtotal') }}" readonly style="width:110px" />
                            <div class="form-text text-danger error-message error-subtotal d-none"></div>
                        </div>
                    </td>
                    <td>
                        <div class="d-flex">
                            <input class="form-control form-control-sm error-border discount" type="number" step="any" name="discount" placeholder="Flat" value="{{ old('discount') }}" style="width:100px" />
                            <input class="form-control form-control-sm error-border discount_percent ms-2" type="number" step="any" name="discount_percent" placeholder="%" value="{{ old('discount_percent') }}" style="width:90px" />
                        </div>
                    </td>
                    <td>
                        <div class="d-flex">
                            <input class="form-control form-control-sm error-border vat" type="number" step="any" name="vat" placeholder="Flat" value="{{ old('vat') }}" style="width:100px" readonly />
                            <input class="form-control form-control-sm error-border vat_percent ms-2" type="number" step="any" name="vat_percent" placeholder="%" value="{{ old('vat_percent') }}" style="width:90px" readonly />
                        </div>
                    </td>
                    <td>
                        <div class="d-flex">
                            <input class="form-control form-control-sm error-border total_amount" type="number" step="any" name="total_amount" placeholder="" value="{{ old('total_amount') }}" readonly style="width:120px" />
                            <div class="form-text text-danger error-message error-total_amount d-none"></div>
                        </div>
                    </td>
                    <td>
                        <div class="d-flex">
                            <input class="form-control form-control-sm error-border advance" type="number" step="any" name="advance" placeholder="" value="{{ old('advance') }}"  style="width:100px"/>
                            <div class="form-text text-danger error-message error-advance d-none"></div>
                        </div>
                    </td>
                    <td>
                        <div class="d-flex">
                            <input class="form-control form-control-sm error-border due" type="number" step="any" name="due" placeholder="" value="{{ old('due') }}" readonly style="width:100px"/>
                            <div class="form-text text-danger error-message error-due d-none"></div>
                        </div>
                    </td>
                    <td class="text-sm">
                        <button type="button" class="btn btn-sm btn-danger removeRow mb-0">Remove</button>
                    </td>
                `;

                itemsTableBody.appendChild(row);

                // Attach event listeners to new inputs
                attachEventListeners();
                checkboxFun();
            }

            // Function to update subtotals
            // Function to update subtotals, discounts, VAT, and total amounts
            function updateSubtotals() {
                const rows = itemsTableBody.querySelectorAll('tr');

                rows.forEach(row => {
                    const inputs = {
                        convertUnit: row.querySelector('input[name="convert_unit"]'),
                        convertPerUnit: row.querySelector('input[name="convert_per_unit"]'),
                        select: row.querySelector('select[name="product_id"]'),
                        infoDisplay: row.querySelector('.unitShowDiv'),
                        purchasePrice: row.querySelector('input[name="purchase_price"]'),
                        wholesalePrice: row.querySelector('input[name="wholesale_price"]'),
                        retailPrice: row.querySelector('input[name="retail_price"]'),
                        quantity: row.querySelector('input[name="quantity"]'),
                        subtotal: row.querySelector('input[name="subtotal"]'),
                        discount: row.querySelector('input[name="discount"]'),
                        discountPercent: row.querySelector('input[name="discount_percent"]'),
                        vat: row.querySelector('input[name="vat"]'),
                        vatPercent: row.querySelector('input[name="vat_percent"]'),
                        totalAmount: row.querySelector('input[name="total_amount"]'),
                        advance: row.querySelector('input[name="advance"]'),
                        due: row.querySelector('input[name="due"]')
                    };

                    if (Object.values(inputs).every(input => input !== null)) {
                        const {
                            convertUnit,
                            convertPerUnit,
                            select,
                            infoDisplay,
                            purchasePrice,
                            wholesalePrice,
                            retailPrice,
                            quantity,
                            subtotal,
                            discount,
                            discountPercent,
                            vat,
                            vatPercent,
                            totalAmount,
                            advance,
                            due
                        } = inputs;
                        const selectedOption = select.options[select.selectedIndex];
                        const dataInfo = selectedOption.getAttribute('data-product_info');
                        let vatValue = parseFloat(dataInfo?.split(',')[5] || 0);

                        if (!select.value || select.value === 'null') {
                            convertUnit.value = '';
                            convertPerUnit.value = '';
                            select.classList.add('border', 'border-danger');
                        } else {
                            select.classList.remove('border', 'border-danger');
                            infoDisplay.textContent = `${dataInfo?.split(',')[0] || ''}`;
                            const unitInfo = dataInfo?.split(',')[1];
                            convertUnit.readOnly = !unitInfo || unitInfo === 'null' || unitInfo === 'Pcs';

                            purchasePrice.value = `${dataInfo?.split(',')[2] || 0}`;
                            wholesalePrice.value = `${dataInfo?.split(',')[3] || 0}`;
                            retailPrice.value = `${dataInfo?.split(',')[4] || 0}`;

                            const unit = parseFloat(unitInfo) || 0;
                            const convertUnitValue = parseFloat(convertUnit.value) || 0;
                            const convertPerUnitValue = parseFloat(convertPerUnit.value) || 0;

                            if (convertPerUnitValue > unit) {
                                const quotient = Math.floor(convertPerUnitValue / unit);
                                const remainder = convertPerUnitValue % unit;
                                convertUnit.value = quotient;
                                convertPerUnit.value = remainder;
                                quantity.value = (quotient * unit + remainder);
                            } else {
                                quantity.value = (convertUnitValue * unit + convertPerUnitValue);
                            }
                        }

                        const purchasePriceValue = parseFloat(purchasePrice.value) || 0;
                        const quantityValue = parseFloat(quantity.value) || 0;
                        const subtotalValue = purchasePriceValue * quantityValue;
                        subtotal.value = subtotalValue.toFixed(2);

                        let discountAmount = parseFloat(discount.value) || 0;
                        let discountPercentValue = parseFloat(discountPercent.value) || 0;

                        if (document.activeElement === discountPercent) {
                            discountAmount = subtotalValue * (discountPercentValue / 100);
                            discount.value = discountAmount.toFixed(2);
                        } else if (document.activeElement === discount) {
                            if (subtotalValue > 0) {
                                discountPercentValue = (discountAmount / subtotalValue) * 100;
                                discountPercent.value = discountPercentValue.toFixed(2);
                            } else {
                                discountPercent.value = '0.00';
                            }
                        }

                        const totalDiscount = subtotalValue - discountAmount;
                        let vatAmount = parseFloat(vat.value) || 0;
                        const vatPercentValue = parseFloat(vatPercent.value) || 0;

                        if (convertUnit.value === '' && convertPerUnit.value === '') {
                            vat.value = '0.00';
                            vatPercent.value = '0.00';
                            totalAmount.value = '0.00';
                        } else {
                            vatAmount = quantityValue * vatValue;
                            vat.value = vatAmount.toFixed(2);
                            vatPercent.value = ((vatAmount / subtotalValue) * 100).toFixed(2);


                            const totalAmountValue = totalDiscount + vatAmount;
                            totalAmount.value = totalAmountValue.toFixed(2);

                            const advanceValue = parseFloat(advance.value) || 0;
                            const dueAmount = totalAmountValue - advanceValue;
                            due.value = dueAmount.toFixed(2);
                        }
                    }
                });
            }

            // Function to attach event listeners to inputs and buttons
            function attachEventListeners() {
                // Attach event listeners to inputs
                const inputs = ['convert_unit', 'convert_per_unit', 'purchase_price', 'quantity', 'vat', 'advance', 'discount', 'discount_percent', 'vat_percent'];
                inputs.forEach(name => {
                    document.querySelectorAll(`input[name="${name}"]`).forEach(input => {
                        input.removeEventListener('input', updateSubtotals);
                        input.addEventListener('input', updateSubtotals);
                    });
                });

                // Attach event listeners to product change
                document.querySelectorAll('select[name="product_id"]').forEach(select => {
                    select.removeEventListener('change', updateSubtotals);
                    select.addEventListener('change', updateSubtotals);
                });

                // Attach event listeners to "Remove" buttons
                document.querySelectorAll('.removeRow').forEach(button => {
                    button.removeEventListener('click', removeRow);
                    button.addEventListener('click', removeRow);
                });
            }

            // Function to remove a row
            function removeRow(event) {
                const button = event.target;
                const row = button.closest('tr');

                if (row) {
                    row.remove();
                    checkboxFun();
                }
            }

            // Add initial event listeners
            attachEventListeners();

            // Event listener for the "Add New Sale" button
            addNewSaleButton.addEventListener('click', addNewRow);



            function checkboxFun() {
                const selectAllCheckbox = document.getElementById('select-all');
                const itemCheckboxes = document.querySelectorAll('.single-item');

                function updateSelectAllCheckbox() {
                    const allChecked = Array.from(itemCheckboxes).every(item => item.checked);
                    const someChecked = Array.from(itemCheckboxes).some(item => item.checked);
                    selectAllCheckbox.checked = allChecked;
                    // selectAllCheckbox.indeterminate = !allChecked && someChecked;
                }
                selectAllCheckbox.addEventListener('change', function() {

                    const isChecked = this.checked;
                    itemCheckboxes.forEach(item => item.checked = isChecked);
                });
                itemCheckboxes.forEach(item => item.addEventListener('change', updateSelectAllCheckbox));
                updateSelectAllCheckbox();
            }


            // =========================Create============================
            // Sale Data Save And Change
            const SaveAndChangeButton = document.getElementById('SaveAndChange');

            function purchaseSaveAndChange() {
                const itemsTableBody = document.querySelector('#itemsTable');
                const collectedData = []; // Array to store data for each row with checked checkbox

                if (itemsTableBody) {
                    const rows = itemsTableBody.querySelectorAll('tr');

                    const purchase_id = document.getElementById('purchaseId').value || 'null';
                    const supplier_id = document.querySelector('select[name="supplier_id"]')?.value || '';
                    let quantity_sum = 0;
                    let subtotal_sum = 0;
                    let total_sum = 0;
                    let advance_sum = 0;
                    let due_sum = 0;
                    let vat_sum = 0;

                    rows.forEach(row => {
                        const cells = row.querySelectorAll('td');
                        cells.forEach(cell => {
                            const checkbox = cell.querySelector('input[name="single_item"]');
                            if (checkbox && checkbox.checked) {
                                // Collect values from the current row
                                const product_id = row.querySelector('select[name="product_id"]')?.value || '';
                                const purchase_price = parseFloat(row.querySelector('input[name="purchase_price"]')?.value) || 0;
                                const wholesale_price = parseFloat(row.querySelector('input[name="wholesale_price"]')?.value) || 0;
                                const retail_price = parseFloat(row.querySelector('input[name="retail_price"]')?.value) || 0;
                                const quantity = parseFloat(row.querySelector('input[name="quantity"]')?.value) || 0;
                                const subtotal = parseFloat(row.querySelector('input[name="subtotal"]')?.value) || 0;
                                const discount = parseFloat(row.querySelector('input[name="discount"]')?.value) || 0;
                                const vat = parseFloat(row.querySelector('input[name="vat"]')?.value) || 0;
                                const total_amount = parseFloat(row.querySelector('input[name="total_amount"]')?.value) || 0;
                                const advance = parseFloat(row.querySelector('input[name="advance"]')?.value) || 0;
                                const due = parseFloat(row.querySelector('input[name="due"]')?.value) || 0;

                                // Accumulate sums
                                quantity_sum += quantity;
                                subtotal_sum += subtotal;
                                total_sum += total_amount;
                                advance_sum += advance;
                                due_sum += due;

                                // Collect the data
                                const rowData = {
                                    supplier_id,
                                    product_id,
                                    purchase_price,
                                    wholesale_price,
                                    retail_price,
                                    quantity,
                                    subtotal,
                                    discount,
                                    vat,
                                    total_amount,
                                    advance,
                                    due
                                };

                                collectedData.push(rowData); // Add data to the array
                            }
                        });
                    });

                    const supData = {
                        purchase_id,
                        supplier_id,
                        quantity_sum,
                        subtotal_sum,
                        total_sum,
                        advance_sum,
                        due_sum,
                        vat_sum
                    };

                    const objData = {
                        supdata: supData,
                        supdetails: collectedData,
                    };
                    let url;
                    // Replace with the actual URL of your API endpoint
                    if (purchase_id != 'null') {
                        url = '{{ route('sales.update') }}';
                    } else {
                        url = '{{ route('sales.store') }}';
                    }


                    // Make sure to send the collected data in the request body
                    axios.post(url, objData)
                        .then(response => {
                            console.log('Data successfully sent to the server:');
                            // window.location.reload();
                        })
                        .catch(error => {
                            let errors = error.response?.data?.errors || {};

                            // Clear all previous error messages
                            document.querySelectorAll('.error-border').forEach(element => {
                                element.classList.remove('border', 'border-danger');
                            });

                            // Display new errors
                            Object.entries(errors).forEach(([key, value]) => {
                                // Construct the class name based on the key
                                const className = `.error-${key.split(".")[1]}`;
                                const elements = document.querySelectorAll(className);

                                // Index to identify the specific element in case of multiple matches
                                const index = parseInt(key.split(".")[0], 10);

                                // Update the appropriate element with the error message
                                if (elements[index]) {
                                    const parent = elements[index].closest('.d-flex').querySelector(`.${key.split(".")[1]}`);
                                    if (parent) {
                                        parent.classList.add('border', 'border-danger');
                                    }
                                }
                            });
                        });
                } else {
                    console.error('Table body not found.');
                }
            }

            SaveAndChangeButton.addEventListener('click', purchaseSaveAndChange);



            // =========================Edit============================
            const rows = document.querySelectorAll('#products-list tbody tr');

            function purchaseEdit(purchase_id) {
                // Replace with the actual URL of your API endpoint
                document.getElementById('purchaseId').value = purchase_id;
                const url = '{{ route('sales.edit') }}';
                const data = {
                    purchase_id: purchase_id
                }

                axios.post(url, data)
                    .then(response => {
                        console.log(response.data);
                        const getData = response.data?.purchase_details;
                        const itemsTableBody = document.querySelector('#itemsTable'); // Ensure this selector matches your table body element

                        // Clear existing rows if needed
                        itemsTableBody.innerHTML = '';

                        getData.forEach(item => {
                            const row = document.createElement('tr');
                            row.innerHTML = `
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <div class="my-auto form-check">
                                                <input class="form-check-input single-item" type="checkbox" name="single_item" checked style="width:16px;height:16px;">
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="d-flex">
                                            <span class="text-xs">${autoIncrementer()}</span>
                                        </div>
                                    </td>

                                    <td>
                                        <div class="d-flex">
                                            <select class="select2 form-select form-select-sm error-border product_id" name="product_id" data-placeholder="Select Product" style="width:130px">
                                                <option value="null" selected>Select Product</option>
                                                @foreach ($products as $item)
                                                    <option value="{{ $item->id }}" data-product_info="{{ $item->units->unit_name }},{{ $item->convert_unit }},{{ $item->purchase_price }},{{ $item->wholesale_price }},{{ $item->retail_price }},{{ $item->vat }}">{{ $item->bn_name != null ? $item->bn_name : $item->en_name }}</option>
                                                @endforeach
                                            </select>
                                            <div class="form-text text-danger error-message error-product_id d-none"></div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <div class="unitShowDiv text-xs me-1"></div>
                                            <input class="form-control form-control-sm error-border convert_unit" type="number" step="any" name="convert_unit" placeholder="" value="${Math.floor(parseFloat(item.quantity) / parseFloat(item.products?.convert_unit))}" style="width:80px"/>
                                        </div>
                                    </td>

                                    <td>
                                        <div class="d-flex">
                                            <input class="form-control form-control-sm error-border convert_per_unit" type="number" step="any" name="convert_per_unit" placeholder="" value="${parseFloat(item.quantity) % parseFloat(item.products?.convert_unit)}" style="width:70px"/>
                                        </div>
                                    </td>

                                    <td>
                                        <div class="d-flex">
                                            <input class="form-control form-control-sm error-border purchase_price" type="number" step="any" name="purchase_price" placeholder="" value="${ item.purchase_price }" />
                                            <div class="form-text text-danger error-message error-purchase_price d-none"></div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="d-flex">
                                            <input class="form-control form-control-sm error-border wholesale_price" type="number" step="any" name="wholesale_price" placeholder="" value="${ item.wholesale_price }" />
                                            <div class="form-text text-danger error-message error-wholesale_price d-none"></div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="d-flex">
                                            <input class="form-control form-control-sm error-border retail_price" type="number" step="any" name="retail_price" placeholder="" value="${ item.retail_price }" style="width:80px" />
                                            <div class="form-text text-danger error-message error-retail_price d-none"></div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="d-flex">
                                            <input class="form-control form-control-sm error-border quantity" type="number" name="quantity" placeholder="" value="${ item.quantity }" readonly style="width:70px" />
                                            <div class="form-text text-danger error-message error-quantity d-none"></div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="d-flex">
                                            <input class="form-control form-control-sm error-border subtotal" type="number" step="any" name="subtotal" placeholder="" value="${ item.purchase_price * item.quantity }" readonly style="width:110px" />
                                            <div class="form-text text-danger error-message error-subtotal d-none"></div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="d-flex">
                                            <input class="form-control form-control-sm error-border discount" type="number" step="any" name="discount" placeholder="Flat" value="${ item.discount }" style="width:100px" />
                                            <input class="form-control form-control-sm error-border discount_percent ms-2" type="number" step="any" name="discount_percent" placeholder="%" value="${ item.discount > 0 ? (item.discount / (item.purchase_price * item.quantity)) * 100 : 0.00 }" style="width:90px" />
                                        </div>
                                    </td>
                                    <td>
                                        <div class="d-flex">
                                            <input class="form-control form-control-sm error-border vat" type="number" step="any" name="vat" placeholder="Flat" value="${ item.quantity * item.products?.vat }" style="width:100px" readonly />
                                            <input class="form-control form-control-sm error-border vat_percent ms-2" type="number" step="any" name="vat_percent" placeholder="%" value="${ (((item.quantity * item.products?.vat) / (item.purchase_price * item.quantity)) * 100).toFixed(2) }" style="width:90px" readonly />
                                        </div>
                                    </td>
                                    <td>
                                        <div class="d-flex">
                                            <input class="form-control form-control-sm error-border total_amount" type="number" step="any" name="total_amount" placeholder="" value="${ item.purchase_amount }" readonly style="width:120px" />
                                            <div class="form-text text-danger error-message error-total_amount d-none"></div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="d-flex">
                                            <input class="form-control form-control-sm error-border advance" type="number" step="any" name="advance" placeholder="" value="${ item.advance }"  style="width:100px"/>
                                            <div class="form-text text-danger error-message error-advance d-none"></div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="d-flex">
                                            <input class="form-control form-control-sm error-border due" type="number" step="any" name="due" placeholder="" value="${ item.due }" readonly style="width:100px"/>
                                            <div class="form-text text-danger error-message error-due d-none"></div>
                                        </div>
                                    </td>
                                    <td class="text-sm">
                                        <button type="button" class="btn btn-sm btn-danger removeRow mb-0">Remove</button>
                                    </td>
                                `;

                            itemsTableBody.appendChild(row);
                            row.querySelector('select[name="product_id"]').value = item.product_id;
                        });

                        attachEventListeners()
                    })
                    .catch(error => {
                        let errors = error.response?.data?.errors || {};
                        console.log(errors);
                        // Optionally display errors in the UI
                    });
            }

            // Function to return an event handler function
            function handleEditClick(purchase_id) {
                return function() {
                    purchaseEdit(purchase_id);
                };
            }

            rows.forEach(row => {
                let purchaseRowEdit = row.querySelector('.purchaseRowEdit');

                if (purchaseRowEdit) {
                    let purchase_id = purchaseRowEdit.getAttribute('data-id');
                    purchaseRowEdit.addEventListener('click', handleEditClick(purchase_id));
                }
            });
        });
    </script>
@endsection