@extends('layouts.default')

@section('content')

<link href="css/plugins/dataTables/datatables.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-datepicker@1.9.0/dist/css/bootstrap-datepicker.min.css" rel="stylesheet">

<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">

                    <form id="edit-sale-form">
                        @csrf
                        <div id="edit-success-message" class="alert alert-success" style="display: none;">
                            <span></span>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label">Reference No</label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" id="edit_sale_ref_no" name="ref_no" value="{{ $sale->ref_no }}">
                                <div class="invalid-feedback" id="edit-error-ref_no" style="display: none;"></div>
                            </div>
                            <label class="col-sm-2 col-form-label">Date <span class="text-danger">*</span></label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control datepicker" id="edit_sale_date" name="date" autocomplete="off" value="{{ $formattedDate ?? '' }}">
                                <div class="invalid-feedback" id="edit-error-date" style="display: none;">Date is required</div>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label">Customer <span class="text-danger">*</span></label>
                            <div class="col-sm-10" style="position: relative;">
                                <input type="text" class="form-control" id="edit_sale_customer_search" name="customer_search" placeholder="Type to search customer..." autocomplete="off" value="{{ $sale->customer ? $sale->customer->name : '' }}">
                                <input type="hidden" id="edit_sale_customer_id" name="customer_id" value="{{ $sale->customer_id }}">
                                <div id="edit-customer-suggestions" class="list-group" style="display: none; position: absolute; z-index: 1000; max-height: 200px; overflow-y: auto; width: 100%; background: white; border: 1px solid #ddd; border-radius: 4px; margin-top: 2px;"></div>
                                <div class="invalid-feedback" id="edit-error-customer_id" style="display: none;">Customer is required</div>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label">Remarks</label>
                            <div class="col-sm-10">
                                <textarea class="form-control" id="edit_sale_remarks" name="remarks" rows="3">{{ $sale->remarks }}</textarea>
                                <div class="invalid-feedback" id="edit-error-remarks" style="display: none;"></div>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label">Status <span class="text-danger">*</span></label>
                            <div class="col-sm-10">
                                <select class="form-control" id="edit_sale_status" name="status">
                                    <option value="un-posted" {{ $sale->status == 'un-posted' ? 'selected' : '' }}>Un-posted</option>
                                    <option value="posted" {{ $sale->status == 'posted' ? 'selected' : '' }}>Posted</option>
                                    <option value="cancelled" {{ $sale->status == 'cancelled' ? 'selected' : '' }}>Cancelled</option>
                                </select>
                                <div class="invalid-feedback" id="edit-error-status" style="display: none;"></div>
                            </div>
                        </div>

                        <hr>
                        <div class="table-responsive" style="position: relative; overflow: visible;">
                            <table class="table table-bordered" id="product-data-table">
                                <thead>
                                    <tr>
                                        <th>Product</th>
                                        <th>Qty</th>
                                        <th>Rate</th>
                                        <th>Discount</th>
                                        <th>Exclusive Value</th>
                                        <th>Sales Tax Rate (%)</th>
                                        <th>Sales Tax</th>
                                        <th>Additional Sales Tax Rate (%)</th>
                                        <th>Additional Sales Tax</th>
                                        <th>Inclusive Value</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody id="product-data-tbody">
                                    <tr class="product-row">
                                        <td style="position: relative; width: 300px;">
                                            <input type="text" class="form-control product-search" placeholder="Type to search product..." autocomplete="off">
                                            <input type="hidden" class="product-id">
                                            <input type="hidden" class="product-weight">
                                            <input type="hidden" class="product-uom-id">
                                            <div class="product-suggestions list-group" style="display: none; position: absolute; z-index: 9999; max-height: 200px; overflow-y: auto; width: 100%; background: white; border: 1px solid #ddd; border-radius: 4px; margin-top: 2px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); padding-left: 0;"></div>
                                        </td>
                                        <td>
                                            <input type="number" step="1" class="form-control product-qty" min="0" value="1">
                                        </td>
                                        <td>
                                            <span class="product-rate-display">0.00</span>
                                            <input type="hidden" class="product-rate" value="0">
                                        </td>
                                        <td>
                                            <span class="product-discount-display">0.00</span>
                                            <input type="hidden" class="product-discount" value="0">
                                        </td>
                                        <td>
                                            <span class="product-exclusive-display">0.00</span>
                                            <input type="hidden" class="product-exclusive" value="0">
                                        </td>
                                        <td>
                                            <span class="product-sales-tax-rate-display">0.00</span>
                                            <input type="hidden" class="product-sales-tax-rate" value="0">
                                        </td>
                                        <td>
                                            <span class="product-sales-tax-display">0.00</span>
                                            <input type="hidden" class="product-sales-tax" value="0">
                                        </td>
                                        <td>
                                            <span class="product-addl-tax-rate-display">0.00</span>
                                            <input type="hidden" class="product-addl-tax-rate" value="0">
                                        </td>
                                        <td>
                                            <span class="product-addl-tax-display">0.00</span>
                                            <input type="hidden" class="product-addl-tax" value="0">
                                        </td>
                                        <td>
                                            <span class="product-inclusive-display">0.00</span>
                                            <input type="hidden" class="product-inclusive" value="0">
                                        </td>
                                        <td>
                                            <button type="button" class="btn btn-danger btn-sm remove-product-row" style="display: none;"><i class="fa fa-times"></i></button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <button type="button" class="btn btn-success btn-sm" id="add-product-row"><i class="fa fa-plus"></i> Add More</button>
                            
                            <!-- Summary Section -->
                            <div style="margin-top: 20px; text-align: right;">
                                <div class="row">
                                    <div class="col-sm-6"></div>
                                    <div class="col-sm-6">
                                        <table class="table table-bordered" style="margin-bottom: 0;">
                                            <tbody>
                                                <tr>
                                                    <td style="text-align: right; font-weight: bold; width: 50%;">Total Items:</td>
                                                    <td style="text-align: right; width: 50%;"><span id="total-items">0</span></td>
                                                </tr>
                                                <tr>
                                                    <td style="text-align: right; font-weight: bold;">Total Qty:</td>
                                                    <td style="text-align: right;"><span id="total-qty">0.00</span></td>
                                                </tr>
                                                <tr>
                                                    <td style="text-align: right; font-weight: bold;">Value Exclusive Sales Tax:</td>
                                                    <td style="text-align: right;"><span id="total-exclusive">0.00</span></td>
                                                </tr>
                                                <tr>
                                                    <td style="text-align: right; font-weight: bold;">Sales Tax:</td>
                                                    <td style="text-align: right;"><span id="total-sales-tax">0.00</span></td>
                                                </tr>
                                                <tr>
                                                    <td style="text-align: right; font-weight: bold;">Advance Sales Tax:</td>
                                                    <td style="text-align: right;"><span id="total-advance-tax">0.00</span></td>
                                                </tr>
                                                <tr>
                                                    <td style="text-align: right; font-weight: bold;">Inclusive Value:</td>
                                                    <td style="text-align: right;"><span id="total-inclusive">0.00</span></td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="form-group" style="margin-top: 20px; text-align: right;">
                            <a href="{{ route('sales') }}" class="btn btn-white">Cancel</a>    
                            <button type="button" class="btn btn-primary" id="updateSale"><i class="fa fa-check"></i> Update Sale</button>
                            
                        </div>
                    </form>
                
        </div>
    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/bootstrap-datepicker@1.9.0/dist/js/bootstrap-datepicker.min.js"></script>
<script>
    // Initialize datepicker with dd/mm/yyyy format
    $('.datepicker').datepicker({
        format: 'dd/mm/yyyy',
        autoclose: true,
        todayHighlight: true
    });

    // Customer search autocomplete function
    function setupCustomerSearch(inputId, hiddenId, suggestionsId) {
        let searchTimeout;
        
        $(inputId).off('input keyup').on('input keyup', function() {
            let searchTerm = $(this).val().trim();
            let suggestionsDiv = $(suggestionsId);
            
            clearTimeout(searchTimeout);
            
            if (searchTerm.length < 2) {
                suggestionsDiv.hide().empty();
                $(hiddenId).val('');
                return;
            }

            searchTimeout = setTimeout(function() {
                $.ajax({
                    url: '{{ route("sales.search-customers") }}',
                    type: 'GET',
                    data: { search: searchTerm },
                    success: function(customers) {
                        suggestionsDiv.empty();
                        if (customers && customers.length > 0) {
                            customers.forEach(function(customer) {
                                let displayText = customer.name || '';
                                if (customer.code) displayText += ' (' + customer.code + ')';
                                if (customer.email) displayText += ' - ' + customer.email;
                                if (customer.contact_no) displayText += ' - ' + customer.contact_no;
                                
                                let item = $('<a href="#" class="list-group-item list-group-item-action"></a>')
                                    .text(displayText)
                                    .data('customer-id', customer.id)
                                    .data('customer-name', customer.name);
                                suggestionsDiv.append(item);
                            });
                            suggestionsDiv.show();
                        } else {
                            let noResults = $('<a href="#" class="list-group-item list-group-item-action disabled"></a>')
                                .text('No customers found');
                            suggestionsDiv.append(noResults);
                            suggestionsDiv.show();
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error('Error searching customers:', error, xhr.responseText);
                        suggestionsDiv.hide();
                    }
                });
            }, 300);
        });

        $(document).off('click', suggestionsId + ' a').on('click', suggestionsId + ' a', function(e) {
            e.preventDefault();
            e.stopPropagation();
            let customerId = $(this).data('customer-id');
            let customerName = $(this).data('customer-name');
            $(inputId).val(customerName || '');
            $(hiddenId).val(customerId || '');
            $(suggestionsId).hide();
        });
    }

    // Recalculate row totals
    function recalcRow(rowElement) {
        let qty = parseFloat(rowElement.find('.product-qty').val() || 0);
        let rate = parseFloat(rowElement.find('.product-rate').val() || 0);
        let discount = parseFloat(rowElement.find('.product-discount').val() || 0);
        if (discount > (qty * rate)) discount = 0;
        let exclusive = (qty * rate) - discount;
        if (exclusive < 0) exclusive = 0;
        let stRate = parseFloat(rowElement.find('.product-sales-tax-rate').val() || 0);
        let addlRate = parseFloat(rowElement.find('.product-addl-tax-rate').val() || 0);
        let salesTax = exclusive * (stRate / 100.0);
        let addlTax = exclusive * (addlRate / 100.0);
        let inclusive = exclusive + salesTax + addlTax;
        
        // Update display spans
        rowElement.find('.product-rate-display').text(parseFloat(rate).toFixed(2));
        rowElement.find('.product-discount-display').text(parseFloat(discount).toFixed(2));
        rowElement.find('.product-exclusive-display').text(exclusive.toFixed(2));
        rowElement.find('.product-sales-tax-rate-display').text(stRate.toFixed(2));
        rowElement.find('.product-sales-tax-display').text(salesTax.toFixed(2));
        rowElement.find('.product-addl-tax-rate-display').text(addlRate.toFixed(2));
        rowElement.find('.product-addl-tax-display').text(addlTax.toFixed(2));
        rowElement.find('.product-inclusive-display').text(inclusive.toFixed(2));
        
        // Update hidden inputs
        rowElement.find('.product-rate').val(rate.toFixed(2));
        rowElement.find('.product-discount').val(discount.toFixed(2));
        rowElement.find('.product-exclusive').val(exclusive.toFixed(2));
        rowElement.find('.product-sales-tax-rate').val(stRate.toFixed(2));
        rowElement.find('.product-sales-tax').val(salesTax.toFixed(2));
        rowElement.find('.product-addl-tax-rate').val(addlRate.toFixed(2));
        rowElement.find('.product-addl-tax').val(addlTax.toFixed(2));
        rowElement.find('.product-inclusive').val(inclusive.toFixed(2));
        
        // Recalculate totals
        recalcTotals();
    }
    
    // Recalculate all totals
    function recalcTotals() {
        let totalItems = 0;
        let totalQty = 0;
        let totalExclusive = 0;
        let totalSalesTax = 0;
        let totalAdvanceTax = 0;
        let totalInclusive = 0;
        
        $('#product-data-tbody .product-row').each(function() {
            let productId = $(this).find('.product-id').val();
            if (productId && productId !== '') {
                totalItems++;
                let qty = parseFloat($(this).find('.product-qty').val() || 0);
                let exclusive = parseFloat($(this).find('.product-exclusive').val() || 0);
                let salesTax = parseFloat($(this).find('.product-sales-tax').val() || 0);
                let addlTax = parseFloat($(this).find('.product-addl-tax').val() || 0);
                let inclusive = parseFloat($(this).find('.product-inclusive').val() || 0);
                
                totalQty += qty;
                totalExclusive += exclusive;
                totalSalesTax += salesTax;
                totalAdvanceTax += addlTax;
                totalInclusive += inclusive;
            }
        });
        
        $('#total-items').text(totalItems);
        $('#total-qty').text(totalQty.toFixed(2));
        $('#total-exclusive').text(totalExclusive.toFixed(2));
        $('#total-sales-tax').text(totalSalesTax.toFixed(2));
        $('#total-advance-tax').text(totalAdvanceTax.toFixed(2));
        $('#total-inclusive').text(totalInclusive.toFixed(2));
    }

    // Setup product search function
    function setupProductSearch(inputElement, rowElement) {
        let searchTimeout;
        let productIdInput = rowElement.find('.product-id');
        let productRateInput = rowElement.find('.product-rate');
        let productDiscountInput = rowElement.find('.product-discount');
        let suggestionsDiv = rowElement.find('.product-suggestions');
        
        inputElement.off('input keyup').on('input keyup', function() {
            let searchTerm = $(this).val().trim();
            
            clearTimeout(searchTimeout);
            
            if (searchTerm.length < 2) {
                suggestionsDiv.hide().empty();
                productIdInput.val('');
                productRateInput.val('');
                productDiscountInput.val('0');
                return;
            }
            
            // Get all already selected product IDs from other rows (excluding current row)
            let selectedProductIds = [];
            $('#product-data-tbody .product-row').each(function() {
                // Skip the current row
                if ($(this)[0] === rowElement[0]) {
                    return;
                }
                let productId = $(this).find('.product-id').val();
                if (productId && productId !== '') {
                    selectedProductIds.push(parseInt(productId));
                }
            });

            searchTimeout = setTimeout(function() {
                // Show loading indicator
                suggestionsDiv.empty();
                let loadingItem = $('<div class="list-group-item" style="text-align: center; padding: 20px;"><i class="fa fa-spinner fa-spin"></i> Searching...</div>');
                suggestionsDiv.append(loadingItem);
                suggestionsDiv.show();
                
                $.ajax({
                    url: '{{ route("sales.search-products") }}',
                    type: 'GET',
                    data: { search: searchTerm },
                    success: function(products) {
                        suggestionsDiv.empty();
                        if (products && products.length > 0) {
                            // Filter out already selected products
                            let availableProducts = products.filter(function(product) {
                                return selectedProductIds.indexOf(product.id) === -1;
                            });
                            
                            if (availableProducts.length > 0) {
                                // Limit to maximum 10 products
                                let maxProducts = availableProducts.slice(0, 10);
                                maxProducts.forEach(function(product) {
                                    let displayText = product.name || '';
                                    if (product.code) displayText += ' (' + product.code + ')';
                                    if (product.sale_price) displayText += ' - Price: ' + parseFloat(product.sale_price).toFixed(2);
                                    
                                    let item = $('<a href="#" class="list-group-item list-group-item-action" style="padding-left: 15px; padding-right: 15px; padding-top: 8px; padding-bottom: 8px; height: 40px; line-height: 24px; display: flex; align-items: center;"></a>')
                                        .text(displayText)
                                        .data('product-id', product.id)
                                        .data('product-name', product.name)
                                        .data('product-rate', product.sale_price || 0)
                                        .data('product-discount', product.discount || 0)
                                        .data('product-st-rate', product.sales_tax_rate || 0)
                                        .data('product-addl-rate', product.advance_sales_tax_rate || 0)
                                        .data('product-weight', product.weight || 0)
                                        .data('product-uom-id', product.uom_id || '');
                                    suggestionsDiv.append(item);
                                });
                                suggestionsDiv.show();
                            } else {
                                // All matching products are already selected
                                let noResults = $('<div class="list-group-item" style="text-align: center; padding: 10px; color: #999;">No available products (all matching products are already selected)</div>');
                                suggestionsDiv.append(noResults);
                                suggestionsDiv.show();
                            }
                        } else {
                            suggestionsDiv.hide();
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error('Error searching products:', error, xhr.responseText);
                        suggestionsDiv.empty();
                        let errorItem = $('<div class="list-group-item" style="text-align: center; padding: 10px; color: #d9534f;">Error loading products</div>');
                        suggestionsDiv.append(errorItem);
                        suggestionsDiv.show();
                        setTimeout(function() {
                            suggestionsDiv.hide();
                        }, 2000);
                    }
                });
            }, 250);
        });

        suggestionsDiv.off('click', 'a').on('click', 'a', function(e) {
            e.preventDefault();
            e.stopPropagation();
            let productId = $(this).data('product-id');
            let productName = $(this).data('product-name');
            let productRate = $(this).data('product-rate') || 0;
            let productDiscount = $(this).data('product-discount') || 0;
            let stRate = $(this).data('product-st-rate') || 0;
            let addlRate = $(this).data('product-addl-rate') || 0;
            let productWeight = $(this).data('product-weight') || 0;
            let productUomId = $(this).data('product-uom-id') || '';
            
            inputElement.val(productName || '');
            productIdInput.val(productId || '');
            rowElement.find('.product-weight').val(parseFloat(productWeight).toFixed(2));
            rowElement.find('.product-uom-id').val(productUomId || '');
            
            // Update hidden inputs
            rowElement.find('.product-rate').val(parseFloat(productRate).toFixed(2));
            rowElement.find('.product-discount').val(parseFloat(productDiscount).toFixed(2));
            rowElement.find('.product-sales-tax-rate').val(parseFloat(stRate).toFixed(2));
            rowElement.find('.product-addl-tax-rate').val(parseFloat(addlRate).toFixed(2));
            
            // Update display spans
            rowElement.find('.product-rate-display').text(parseFloat(productRate).toFixed(2));
            rowElement.find('.product-discount-display').text(parseFloat(productDiscount).toFixed(2));
            rowElement.find('.product-sales-tax-rate-display').text(parseFloat(stRate).toFixed(2));
            rowElement.find('.product-addl-tax-rate-display').text(parseFloat(addlRate).toFixed(2));
            
            suggestionsDiv.hide();
            recalcRow(rowElement);
        });
    }

    $(document).ready(function() {
        // Load existing products from sale
        @if(isset($sale->saleRefs) && count($sale->saleRefs) > 0)
            // Clear the default empty row
            $('#product-data-tbody').empty();
            
            // Load each product from saleRefs
            @foreach($sale->saleRefs as $index => $saleRef)
                @php
                    $product = $saleRef->product;
                @endphp
                let productRow{{ $index }} = $('<tr class="product-row">' +
                    '<td style="position: relative; width: 300px;">' +
                        '<input type="text" class="form-control product-search" placeholder="Type to search product..." autocomplete="off" value="{{ $product ? $product->name : "" }}">' +
                        '<input type="hidden" class="product-id" value="{{ $saleRef->product_id }}">' +
                        '<input type="hidden" class="product-weight" value="{{ $saleRef->prod_weight ? number_format($saleRef->prod_weight, 2, '.', '') : "" }}">' +
                        '<input type="hidden" class="product-uom-id" value="{{ $saleRef->uom_id ? $saleRef->uom_id : "" }}">' +
                        '<div class="product-suggestions list-group" style="display: none; position: absolute; z-index: 9999; max-height: 200px; overflow-y: auto; width: 100%; background: white; border: 1px solid #ddd; border-radius: 4px; margin-top: 2px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); padding-left: 0;"></div>' +
                    '</td>' +
                    '<td>' +
                        '<input type="number" step="1" class="form-control product-qty" min="0" value="{{ $saleRef->qty }}">' +
                    '</td>' +
                    '<td>' +
                        '<span class="product-rate-display">{{ number_format($saleRef->rate, 2) }}</span>' +
                        '<input type="hidden" class="product-rate" value="{{ $saleRef->rate }}">' +
                    '</td>' +
                    '<td>' +
                        '<span class="product-discount-display">{{ number_format($saleRef->discount, 2) }}</span>' +
                        '<input type="hidden" class="product-discount" value="{{ $saleRef->discount }}">' +
                    '</td>' +
                    '<td>' +
                        '<span class="product-exclusive-display">{{ number_format($saleRef->value_exclusive_sales_tax, 2) }}</span>' +
                        '<input type="hidden" class="product-exclusive" value="{{ $saleRef->value_exclusive_sales_tax }}">' +
                    '</td>' +
                    '<td>' +
                        '<span class="product-sales-tax-rate-display">{{ number_format($saleRef->sales_tax_rate, 2) }}</span>' +
                        '<input type="hidden" class="product-sales-tax-rate" value="{{ $saleRef->sales_tax_rate }}">' +
                    '</td>' +
                    '<td>' +
                        '<span class="product-sales-tax-display">{{ number_format(($saleRef->sales_tax_rate * $saleRef->value_exclusive_sales_tax) / 100, 2) }}</span>' +
                        '<input type="hidden" class="product-sales-tax" value="{{ ($saleRef->sales_tax_rate * $saleRef->value_exclusive_sales_tax) / 100 }}">' +
                    '</td>' +
                    '<td>' +
                        '<span class="product-addl-tax-rate-display">{{ number_format($saleRef->advance_sales_tax_rate, 2) }}</span>' +
                        '<input type="hidden" class="product-addl-tax-rate" value="{{ $saleRef->advance_sales_tax_rate }}">' +
                    '</td>' +
                    '<td>' +
                        '<span class="product-addl-tax-display">{{ number_format($saleRef->advance_sales_tax_amount, 2) }}</span>' +
                        '<input type="hidden" class="product-addl-tax" value="{{ $saleRef->advance_sales_tax_amount }}">' +
                    '</td>' +
                    '<td>' +
                        '<span class="product-inclusive-display">{{ number_format($saleRef->value_inclusive_sales_tax, 2) }}</span>' +
                        '<input type="hidden" class="product-inclusive" value="{{ $saleRef->value_inclusive_sales_tax }}">' +
                    '</td>' +
                    '<td>' +
                        '<button type="button" class="btn btn-danger btn-sm remove-product-row"><i class="fa fa-times"></i></button>' +
                    '</td>' +
                '</tr>');
                
                $('#product-data-tbody').append(productRow{{ $index }});
                
                // Setup product search for this row
                setupProductSearch(productRow{{ $index }}.find('.product-search'), productRow{{ $index }});
            @endforeach
            
            // Show delete buttons if more than one row
            if ($('#product-data-tbody .product-row').length > 1) {
                $('#product-data-tbody .product-row .remove-product-row').show();
            } else {
                $('#product-data-tbody .product-row .remove-product-row').hide();
            }
            
            // Recalculate totals with existing products
            recalcTotals();
        @else
            // Initially hide delete button if only one row exists
            if ($('#product-data-tbody .product-row').length === 1) {
                $('#product-data-tbody .product-row .remove-product-row').hide();
            }
        @endif
        
        // Setup customer search
        setupCustomerSearch('#edit_sale_customer_search', '#edit_sale_customer_id', '#edit-customer-suggestions');

        // Hide suggestions when clicking outside
        $(document).on('click', function(e) {
            if (!$(e.target).closest('#edit_sale_customer_search, #edit-customer-suggestions, .product-search, .product-suggestions').length) {
                $('#edit-customer-suggestions').hide();
                $('.product-suggestions').hide();
            }
        });

        // Setup product search for any existing rows (if not already loaded)
        $('#product-data-tbody .product-row').each(function() {
            if (!$(this).find('.product-search').data('initialized')) {
                setupProductSearch($(this).find('.product-search'), $(this));
                $(this).find('.product-search').data('initialized', true);
            }
        });

        // Add more product row
        $('#add-product-row').click(function() {
            // Get the first row as template
            let templateRow = $('#product-data-tbody .product-row:first');
            
            // Clone the row
            let newRow = templateRow.clone();
            
            // Clear all product-related fields
            newRow.find('.product-search').val('').attr('value', '');
            newRow.find('.product-id').val('').attr('value', '');
            newRow.find('.product-weight').val('').attr('value', '');
            newRow.find('.product-uom-id').val('').attr('value', '');
            
            // Reset quantity to default
            newRow.find('.product-qty').val('1').attr('value', '1');
            
            // Reset all hidden inputs to 0
            newRow.find('.product-rate').val('0').attr('value', '0');
            newRow.find('.product-discount').val('0').attr('value', '0');
            newRow.find('.product-exclusive').val('0').attr('value', '0');
            newRow.find('.product-sales-tax-rate').val('0').attr('value', '0');
            newRow.find('.product-sales-tax').val('0').attr('value', '0');
            newRow.find('.product-addl-tax-rate').val('0').attr('value', '0');
            newRow.find('.product-addl-tax').val('0').attr('value', '0');
            newRow.find('.product-inclusive').val('0').attr('value', '0');
            
            // Reset all display spans to 0.00
            newRow.find('.product-rate-display').text('0.00');
            newRow.find('.product-discount-display').text('0.00');
            newRow.find('.product-exclusive-display').text('0.00');
            newRow.find('.product-sales-tax-rate-display').text('0.00');
            newRow.find('.product-sales-tax-display').text('0.00');
            newRow.find('.product-addl-tax-rate-display').text('0.00');
            newRow.find('.product-addl-tax-display').text('0.00');
            newRow.find('.product-inclusive-display').text('0.00');
            
            // Clear suggestions dropdown
            newRow.find('.product-suggestions').empty().hide();
            
            // Append the new row
            $('#product-data-tbody').append(newRow);
            
            // Show delete buttons on all rows when there are 2 or more rows
            let rowCount = $('#product-data-tbody .product-row').length;
            if (rowCount >= 2) {
                $('#product-data-tbody .product-row .remove-product-row').show();
            }
            
            // Setup product search for new row (this will reinitialize the event handlers)
            setupProductSearch(newRow.find('.product-search'), newRow);
            
            // Recalculate totals after adding row (will be 0 until product is selected)
            recalcTotals();
        });

        // Remove product row
        $(document).on('click', '.remove-product-row', function() {
            let rowCount = $('#product-data-tbody .product-row').length;
            if (rowCount > 1) {
                $(this).closest('.product-row').remove();
                // Recalculate totals after removing row
                recalcTotals();
                
                // Hide delete buttons if only one row remains
                let remainingRows = $('#product-data-tbody .product-row').length;
                if (remainingRows === 1) {
                    $('#product-data-tbody .product-row .remove-product-row').hide();
                }
            }
        });

        // Auto recalc on changes (only quantity can be changed by user)
        $(document).on('input', '.product-qty', function() {
            let row = $(this).closest('.product-row');
            recalcRow(row);
        });

        // Store sale ID
        $('#edit-sale-form').data('sale-id', {{ $sale->id }});

        // Update sale handler
        $(document).on('click', '#updateSale', function () {
            let saleId = $('#edit-sale-form').data('sale-id');
            
            // Collect product data from all rows
            let products = [];
            $('#product-data-tbody .product-row').each(function() {
                let productId = $(this).find('.product-id').val();
                if (productId && productId !== '') {
                    products.push({
                        product_id: productId,
                        qty: parseFloat($(this).find('.product-qty').val()) || 0,
                        rate: parseFloat($(this).find('.product-rate').val()) || 0,
                        discount: parseFloat($(this).find('.product-discount').val()) || 0,
                        value_exclusive_sales_tax: parseFloat($(this).find('.product-exclusive').val()) || 0,
                        sales_tax_rate: parseFloat($(this).find('.product-sales-tax-rate').val()) || 0,
                        advance_sales_tax_rate: parseFloat($(this).find('.product-addl-tax-rate').val()) || 0,
                        advance_sales_tax_amount: parseFloat($(this).find('.product-addl-tax').val()) || 0,
                        value_inclusive_sales_tax: parseFloat($(this).find('.product-inclusive').val()) || 0,
                        prod_weight: $(this).find('.product-weight').val() || null,
                        uom_id: $(this).find('.product-uom-id').val() || null
                    });
                }
            });
            
            let saleData = {
                ref_no: $('#edit_sale_ref_no').val(),
                date: $('#edit_sale_date').val(),
                customer_id: $('#edit_sale_customer_id').val(),
                remarks: $('#edit_sale_remarks').val(),
                status: $('#edit_sale_status').val(),
                products: products
            };
            let token = $('input[name="_token"]').val();

            let updateButton = $('#updateSale');
            updateButton.html('<i class="fa fa-spinner fa-spin"></i> Processing...').prop('disabled', true);

            $('.form-control').removeClass('is-invalid');
            $('.invalid-feedback').hide();

            $.ajax({
                url: `/sales/update/${saleId}`,
                type: 'PUT',
                data: {
                    _token: token,
                    ref_no: saleData.ref_no,
                    date: saleData.date,
                    customer_id: saleData.customer_id,
                    remarks: saleData.remarks,
                    status: saleData.status,
                    products: saleData.products
                },
                success: function (response) {
                    if (response.success) {
                        // Show success message using SweetAlert
                        Swal.fire({
                            title: 'Success!',
                            text: 'Sale updated successfully!',
                            icon: 'success',
                            confirmButtonText: 'OK'
                        }).then(() => {
                            window.location.href = '{{ route("sales") }}';
                        });
                    }

                    updateButton.html('<i class="fa fa-check"></i> Update Sale').prop('disabled', false);
                },
                error: function (errorResponse) {
                    updateButton.html('<i class="fa fa-check"></i> Update Sale').prop('disabled', false);

                    if (errorResponse.status === 422) {
                        let errors = errorResponse.responseJSON.errors;
                        Object.keys(errors).forEach(function(key) {
                            let fieldId = 'edit_sale_' + key;
                            $('#' + fieldId).addClass('is-invalid');
                            $('#edit-error-' + key).text(errors[key][0]).show();
                        });
                    } else {
                        // Show detailed error message if available
                        let errorMessage = 'An error occurred. Please try again.';
                        if (errorResponse.responseJSON && errorResponse.responseJSON.errors) {
                            let errors = errorResponse.responseJSON.errors;
                            if (errors.general && errors.general.length > 0) {
                                errorMessage = errors.general[0];
                            }
                        }
                        Swal.fire('Error', errorMessage, 'error');
                        console.error('Error response:', errorResponse);
                    }
                },
            });
        });
    });   
</script>
@endpush
@endsection