@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>
                            <h5 class="mb-0">Purchase Create Form</h5>
                            <p class="mb-0 text-sm">
                            </p>
                        </div>
                        <div class="lex column-gap-3">
                            <button type="button" id="addNewPurchase" class="me-2 mb-0 btn btn-dark">Add New Purchase</button>
                            <button type="button" id="SaveAndChange" class="me-2 mb-0 btn btn-success">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">Supplier Name</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">Purchase 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">Purchase 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="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">Supplier Name</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">Purchase 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>
                            @if (isset($purchases))
                                <tbody>

                                    @foreach ($purchases as $item)
                                    @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 addNewPurchaseButton = document.getElementById('addNewPurchase');
            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 supplier_id" name="supplier_id" data-placeholder="Select Supplier" style="width:130px">
                            <option value="null" selected>Select Supplier</option>
                            @foreach ($suppliers as $item)
                                <option value="{{ $item->id }}">{{ $item->company_name }}</option>
                            @endforeach
                        </select>
                        <div class="form-text text-danger error-message error-supplier_id d-none"></div>
                    </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>
            `;



                if (itemsTableBody.querySelectorAll('tr')[0]?.querySelectorAll('td')[0].innerText == 'No entries found') {
                    itemsTableBody.innerHTML = '';
                }
                itemsTableBody.appendChild(row);

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

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

                rows.forEach(row => {
                    const convertUnitInput = row.querySelector('input[name="convert_unit"]');
                    const convertPerUnitInput = row.querySelector('input[name="convert_per_unit"]');
                    const selectElement = row.querySelector('select[name="product_id"]');
                    const infoDisplay = row.querySelector('.unitShowDiv');

                    const purchasePriceInput = row.querySelector('input[name="purchase_price"]');
                    const wholesalePriceInput = row.querySelector('input[name="wholesale_price"]');
                    const retailPriceInput = row.querySelector('input[name="retail_price"]');
                    const quantityInput = row.querySelector('input[name="quantity"]');
                    const subtotalInput = row.querySelector('input[name="subtotal"]');
                    const discountInput = row.querySelector('input[name="discount"]');
                    const discountPercentInput = row.querySelector('input[name="discount_percent"]');
                    const vatInput = row.querySelector('input[name="vat"]');
                    const vatPercentInput = row.querySelector('input[name="vat_percent"]');
                    const totalAmountInput = row.querySelector('input[name="total_amount"]');
                    const advanceInput = row.querySelector('input[name="advance"]');
                    const dueInput = row.querySelector('input[name="due"]');

                    if (convertUnitInput && convertPerUnitInput && purchasePriceInput && wholesalePriceInput && retailPriceInput && quantityInput && subtotalInput && discountInput && discountPercentInput && vatInput && vatPercentInput && totalAmountInput && advanceInput && dueInput) {
                        const selectedOption = selectElement.options[selectElement.selectedIndex];
                        const dataInfo = selectedOption.getAttribute('data-product_info');
                        let vatValue = 0;

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


                            purchasePriceInput.value = `${dataInfo?.split(',')[2] || 0}`;
                            wholesalePriceInput.value = `${dataInfo?.split(',')[3] || 0}`;
                            retailPriceInput.value = `${dataInfo?.split(',')[4] || 0}`;
                            vatValue = `${dataInfo?.split(',')[5] || 0}`;


                            const convertUnit = parseFloat(convertUnitInput.value) || 0;
                            const convertPerUnit = parseFloat(convertPerUnitInput.value) || 0;
                            if (convertPerUnit > unitInfo) {
                                let quotient = Math.floor(convertPerUnit / unitInfo); // Integer division
                                let remainder = convertPerUnit % unitInfo; // Modulus operator
                                convertUnitInput.value = quotient;
                                convertPerUnitInput.value = remainder;
                                const totalUnit = (convertUnit * unitInfo) + remainder;
                                quantityInput.value = totalUnit.toFixed(2);
                            } else {
                                const totalUnit = (convertUnit * unitInfo) + convertPerUnit;
                                quantityInput.value = totalUnit.toFixed(2);
                            }
                        }

                        const purchasePrice = parseFloat(purchasePriceInput.value) || 0;
                        const quantity = parseFloat(quantityInput.value) || 0;
                        const subtotal = purchasePrice * quantity;
                        subtotalInput.value = subtotal.toFixed(2);

                        // Handle discount and discount percent calculation
                        let discountAmount = parseFloat(discountInput.value) || 0;
                        let discountPercent = parseFloat(discountPercentInput.value) || 0;

                        if (document.activeElement === discountPercentInput) {
                            // Calculate discount amount based on discount percent
                            discountAmount = subtotal * (discountPercent / 100);
                            discountInput.value = discountAmount.toFixed(2);
                        } else if (document.activeElement === discountInput) {
                            // Calculate discount percent based on discount amount
                            if (subtotal > 0) {
                                discountPercent = (discountAmount / subtotal) * 100;
                                discountPercentInput.value = discountPercent.toFixed(2);
                            } else {
                                discountPercentInput.value = '0.00';
                            }
                        }


                        let totalDiscount = parseFloat(subtotal - discountAmount);
                        // let vat = parseFloat(vatInput.value) || 0;
                        let vatPercent = parseFloat(vatPercentInput.value) || 0;

                        // if (document.activeElement === vatPercentInput) {
                        //     // Calculate VAT amount based on VAT percent
                        //     vat = totalDiscount * (vatPercent / 100);
                        //     vatInput.value = vat.toFixed(2);
                        // } else if (document.activeElement === vatInput) {
                        //     // Calculate VAT percent based on VAT amount
                        //     if (totalDiscount > 0) {
                        //         vatPercent = (vat / totalDiscount) * 100;
                        //         vatPercentInput.value = vatPercent.toFixed(2);
                        //     } else {
                        //         vatPercentInput.value = '0.00';
                        //     }
                        // }

                        if (convertUnitInput.value == '' && convertPerUnitInput.value == '') {
                            vatInput.value = 0.00;
                            vatPercentInput.value = 0.00;
                            totalAmountInput.value = 0.00;
                        } else {

                            let vat = parseFloat(vatValue || 0);
                            vatInput.value = parseFloat(quantity * vat)?.toFixed(2);
                            vatPercentInput.value = parseFloat((vat / purchasePrice) * 100)?.toFixed(2);


                            const totalAmount = subtotal - discountAmount + vat;
                            totalAmountInput.value = totalAmount.toFixed(2);


                            const advance = parseFloat(advanceInput.value) || 0;
                            const dueAmount = totalAmount - advance;
                            dueInput.value = dueAmount.toFixed(2);
                        }

                    }
                });
            }

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

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

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

            // 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 Purchase" button
            addNewPurchaseButton.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();
            }




            // Purchase 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');

                    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 supplier_id = row.querySelector('select[name="supplier_id"]')?.value || '';
                                const product_id = row.querySelector('select[name="product_id"]')?.value || '';
                                const purchase_price = row.querySelector('input[name="purchase_price"]')?.value || '';
                                const wholesale_price = row.querySelector('input[name="wholesale_price"]')?.value || '';
                                const retail_price = row.querySelector('input[name="retail_price"]')?.value || '';
                                const quantity = row.querySelector('input[name="quantity"]')?.value || '';
                                const subtotal = row.querySelector('input[name="subtotal"]')?.value || '';
                                const discount = row.querySelector('input[name="discount"]')?.value || '';
                                const vat = row.querySelector('input[name="vat"]')?.value || '';
                                const total_amount = row.querySelector('input[name="total_amount"]')?.value || '';
                                const advance = row.querySelector('input[name="advance"]')?.value || '';
                                const due = row.querySelector('input[name="due"]')?.value || '';

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

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

                    // Replace with the actual URL of your API endpoint
                    const url = '{{ route('purchases.store') }}';

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

                            // Clear all previous error messages
                            // const errorElements = document.querySelectorAll('.error-message');
                            const errorElements = document.querySelectorAll('.error-border');
                            errorElements.forEach(element => {

                                element.classList.remove('border', 'border-danger');

                                // element.classList.add('d-none');
                                // element.innerHTML = ''; // Clear the existing content
                            });

                            // 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');
                                    }

                                    // elements[index].classList.remove('d-none');
                                    // elements[index].innerHTML = value[0]?.replace(index + '.', '');
                                }
                            });
                        });
                } else {
                    console.error('Table body not found.');
                }
            }

            SaveAndChangeButton.addEventListener('click', purchaseSaveAndChange);

        });
    </script>
@endsection