@extends('layouts.main')

@push('styles')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
    .is-invalid {
    border-color: red;
}

</style>
@endpush

@section('content')
<div class="container-fluid">
    <h1 class="h4 mb-4">Brick Sales</h1>

    <div class="card mb-4">
        <div class="card-body">
            <h5 class="mb-3"><i class="fa fa-calendar-alt me-1"></i> Filter Sales by Date</h5>
            <div class="row g-3 align-items-end">
                <div class="col-md-5">
                    <label for="start_date" class="form-label">Start Date</label>
                    <input type="date" id="start_date" class="form-control form-control-sm" placeholder="Start Date">
                </div>
                <div class="col-md-5">
                    <label for="end_date" class="form-label">End Date</label>
                    <input type="date" id="end_date" class="form-control form-control-sm" placeholder="End Date">
                </div>
                <div class="col-md-2 d-grid">
                    <button id="filterDateBtn" class="btn btn-sm btn-primary">
                        <i class="fa fa-filter me-1"></i> Apply Filter
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-body">
            <table class="table table-bordered table-striped" id="brickSalesTable">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Customer</th>
                        <th>Phone</th>
                        <th>Sale Date</th>
                        <th>Payment Method</th>
                        <th>Total Amount</th>
                        <th>Action</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>

<!-- View Sale Items Modal -->
<div class="modal fade" id="viewSaleItemsModal" tabindex="-1" aria-labelledby="viewSaleItemsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="viewSaleItemsModalLabel">
                    <i class="fa fa-eye me-1"></i> Sale Items
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-0">
                <div class="table-responsive">
                    <table class="table table-striped table-sm mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>#</th>
                                <th>Brick Type</th>
                                <th>Quantity</th>
                                <th>Unit Price</th>
                                <th>Subtotal</th>
                                <th>Delivery</th>
                            </tr>
                        </thead>
                        <tbody id="saleItemsBody"></tbody>
                        <tfoot class="table-light">
                            <tr>
                                <th colspan="5" class="text-end">Total</th>
                                <th id="saleItemsTotal">Tsh 0</th>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
            <div class="modal-footer bg-light">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary manage-delivery-btn" data-sale-id="">
                    <i class="material-icons md-local_shipping"></i> Manage Delivery
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Loan Modal -->
<div class="modal fade" id="loanModal" tabindex="-1" aria-labelledby="loanModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="loanModalLabel"><i class="fa fa-money-bill-alt me-2"></i>Loan & Delivery Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3" id="loan-details"></div>

                <!-- Delivery Status Card -->
                <div class="card mb-4">
                    <div class="card-header bg-light d-flex justify-content-between align-items-center">
                        <h6 class="mb-0">Delivery Information</h6>
                        <button type="button" class="btn btn-sm btn-primary manage-delivery-btn">
                            <i class="material-icons md-local_shipping me-1"></i> Manage Delivery
                        </button>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-striped table-bordered mb-0">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Brick Type</th>
                                        <th>Ordered</th>
                                        <th>Delivered</th>
                                        <th>Faulty</th>
                                        <th>Remaining</th>
                                        <th>Delivery Document</th>
                                    </tr>
                                </thead>
                                <tbody id="loan-delivery-items-body">
                                    <tr><td colspan="6" class="text-center text-muted">Loading delivery information...</td></tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- Original Loan Items Card -->
                <div class="card mb-4">
                    <div class="card-header bg-light"><h6 class="mb-0">Items customer bought</h6></div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-striped table-bordered mb-0">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Brick Type</th>
                                        <th>Quantity</th>
                                        <th>Unit Price</th>
                                        <th>Subtotal</th>
                                    </tr>
                                </thead>
                                <tbody id="loan-sale-items-body"></tbody>
                                <tfoot>
                                    <tr>
                                        <th colspan="4" class="text-end">Total</th>
                                        <th id="loan-sale-items-total">Tsh 0</th>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- Payment History Card -->
                <div class="card">
                    <div class="card-header bg-light"><h6 class="mb-0">Payment History</h6></div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-striped table-bordered mb-0">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Amount Paid</th>
                                        <th>Payment Type</th>
                                        <th>Receipt</th>
                                        <th>Date</th>
                                    </tr>
                                </thead>
                                <tbody id="loan-payments-body">
                                    <tr><td colspan="5" class="text-center text-muted">Loading...</td></tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer bg-light d-flex justify-content-between align-items-center">
                <button type="button" class="btn btn-success btn-accept-payment">
                    <i class="fa fa-plus-circle me-1"></i> Make Payment
                </button>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<!-- Manage Delivery Modal -->
<div class="modal fade" id="manageDeliveryModal" tabindex="-1" aria-labelledby="manageDeliveryModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="manageDeliveryModalLabel">
                    <i class="material-icons md-local_shipping me-2"></i> Manage Delivery
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="deliveryForm">
                    <input type="hidden" name="sale_id" id="delivery_sale_id">
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label for="brick_type" class="form-label">Brick Type</label>
                            <select class="form-select" id="brick_type" name="brick_type" required>
                                <option value="">Select Brick Type</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label for="delivery_date" class="form-label">Delivery Date</label>
                            <input type="date" class="form-control" id="delivery_date" name="delivery_date" required>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label class="form-label">Bricks To Deliver</label>
                            <input type="number" name="brick_to_deliver" class="form-control" id="brick_to_deliver" readonly>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Bricks  Delivered</label>
                            <input type="number" name="quantity_delivered" class="form-control" id="bricks_delivered">
                        </div>
                        <div class="col-md-6 mt-3">
                            <label class="form-label">Remaining Bricks</label>
                            <input type="number" class="form-control" id="bricks_remaining" readonly>
                        </div>

                        <div class="col-md-6 mt-3">
                            <label class="form-label">Subtotal (Auto)</label>
                            <input type="text" class="form-control" id="delivery_subtotal" readonly>
                        </div>

                        <div class="col-md-6  mt-3">
                            <label for="faulty_bricks" class="form-label">Faulty Bricks During Delivery</label>
                            <input type="number" class="form-control" id="faulty_bricks" name="faulty_bricks" min="0">
                        </div>
                    </div>
                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="compensate_from_stock" name="compensate_from_stock">
                            <label class="form-check-label" for="compensate_from_stock">
                                Compensate faulty bricks from stock
                            </label>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="delivery_notes" class="form-label">Delivery Notes</label>
                        <textarea class="form-control" id="delivery_notes" name="delivery_notes" rows="3"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="saveDeliveryBtn">Save Delivery</button>
            </div>
        </div>
    </div>
</div>

<!-- Loan Payment Modal -->
<div class="modal fade" id="loanPaymentModal" tabindex="-1" aria-labelledby="loanPaymentModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="loanPaymentModalLabel"><i class="fa fa-credit-card me-2"></i>Make a Loan Payment</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="loanPaymentForm">
                    <input type="hidden" id="loan_debt_remaining" value="0">
                    <div class="mb-3">
                        <input type="hidden" name="sale_id" id="sale_id">
                        <label for="payment_amount" class="form-label">Amount (Tsh)</label>
                        <input type="number" id="payment_amount" name="amount" min="0" class="form-control" required>
                        <div id="paymentAmountHelp" class="form-text text-muted">Remaining balance: Tsh <span id="remaining_balance_text">0</span></div>
                    </div>
                    <div class="mb-3">
                        <label for="payment_type" class="form-label">Payment Method</label>
                        <select id="payment_type" name="payment_type" class="form-select" required>
                            <option value="">-- Select Method --</option>
                            <option value="Cash">Cash</option>
                            <option value="Bank">Bank Transfer</option>
                        </select>
                    </div>
                    <div class="mb-3 d-none" id="receiptField">
                        <label for="receipt" class="form-label">Attach Receipt</label>
                        <input type="file" id="receipt" name="receipt" class="form-control">
                    </div>
                    <div class="text-end">
                        <button type="submit" class="btn btn-success">Submit Payment</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Receipt Viewer Modal -->
<div class="modal fade" id="receiptViewerModal" tabindex="-1" aria-labelledby="receiptViewerLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Payment Receipt</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body text-center" id="receiptViewerContent">
                <!-- Dynamic receipt content will go here -->
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
<script>
    $(function () {
        let table;
        let currentSaleId = null;

        function loadBrickSalesTable(startDate = '', endDate = '') {
            table = $('#brickSalesTable').DataTable({
                processing: true,
                serverSide: true,
                destroy: true,
                ajax: {
                    url: '{{ route('bricks-sell.index') }}',
                    data: { start_date: startDate, end_date: endDate }
                },
                columns: [
                    { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
                    { data: 'customer', name: 'customer.name' },
                    { data: 'phone_number', name: 'phone_number' },
                    { data: 'sale_date', name: 'sale_date' },
                    { data: 'payment_method', name: 'payment_method' },
                    { data: 'total_amount', name: 'total_amount' },
                    { data: 'action', name: 'action', orderable: false, searchable: false },
                ]
            });
        }

        loadBrickSalesTable();

        $('#filterDateBtn').on('click', function () {
            const startDate = $('#start_date').val();
            const endDate = $('#end_date').val();
            loadBrickSalesTable(startDate, endDate);
        });

        $(document).on('click', '.viewSaleItemsBtn', function () {
            const saleId = $(this).data('sale-id');
            currentSaleId = saleId;
            const saleItemsBody = $('#saleItemsBody');
            const saleItemsTotal = $('#saleItemsTotal');

            saleItemsBody.html('<tr><td colspan="5" class="text-center">Loading...</td></tr>');
            saleItemsTotal.text('Tsh 0');

            fetch(`/bricks-sell/${saleId}`)
                .then(res => res.json())
                .then(data => {
                    saleItemsBody.empty();
                    let total = 0;

                    if (!data.items.length) {
                        saleItemsBody.html('<tr><td colspan="5" class="text-center">No items found</td></tr>');
                        return;
                    }

                    data.items.forEach((item, index) => {
                        const subtotal = parseFloat(item.subtotal) || 0;
                        total += subtotal;

                        saleItemsBody.append(`
                            <tr>
                                <td>${index + 1}</td>
                                <td>${item.brick_type?.name ?? 'N/A'}</td>
                                <td>${item.quantity}</td>
                                <td>Tsh ${parseFloat(item.price_per_unit).toLocaleString()}</td>
                                <td>Tsh ${subtotal.toLocaleString()}</td>
                            </tr>
                        `);
                    });

                    saleItemsTotal.text(`Tsh ${total.toLocaleString()}`);
                    $('.manage-delivery-btn').data('sale-id', saleId);
                    $('#viewSaleItemsModal').modal('show');
                })
                .catch(() => {
                    saleItemsBody.html('<tr><td colspan="5" class="text-danger text-center">Failed to load data</td></tr>');
                });
        });

        $(document).on('click', '.viewLoanBtn', function () {
            const loanItemsBody = $('#loan-sale-items-body');
            const loanItemsTotal = $('#loan-sale-items-total');
            const loanDetails = $('#loan-details');
            const paymentsBody = $('#loan-payments-body');
            const deliveryItemsBody = $('#loan-delivery-items-body');
            const saleId = $(this).data('sale-id');
            currentSaleId = saleId;

            // Initialize all sections
            loanItemsBody.html('<tr><td colspan="5" class="text-center">Loading sale items...</td></tr>');
            loanItemsTotal.text('Tsh 0');
            loanDetails.html('<div class="text-center">Loading transaction details...</div>');
            paymentsBody.html('<tr><td colspan="5" class="text-center text-muted">Loading payment history...</td></tr>');
            deliveryItemsBody.html('<tr><td colspan="6" class="text-center text-muted">Loading delivery information...</td></tr>');

            // First fetch sale items
            fetch(`/bricks-sell/${saleId}`)
                .then(res => res.json())
                .then(data => {
                    // Load sale items
                    loanItemsBody.empty();
                    let total = 0;

                    if (!data.items || !data.items.length) {
                        loanItemsBody.html('<tr><td colspan="5" class="text-center">No items found</td></tr>');
                        loanItemsTotal.text('Tsh 0');
                        return Promise.reject('No items found');
                    }

                    data.items.forEach((item, index) => {
                        const quantity = parseInt(item.quantity) || 0;
                        const unitPrice = parseFloat(item.price_per_unit) || 0;
                        const subtotal = quantity * unitPrice;
                        total += subtotal;

                        loanItemsBody.append(`
                            <tr>
                                <td>${index + 1}</td>
                                <td>${item.brick_type?.name || 'N/A'}</td>
                                <td>${quantity}</td>
                                <td>Tsh ${unitPrice.toLocaleString()}</td>
                                <td>Tsh ${subtotal.toLocaleString()}</td>
                            </tr>
                        `);
                    });

                    loanItemsTotal.text(`Tsh ${total.toLocaleString()}`);

                    // Then fetch loan data
                    return fetch(`/brick-loans/${saleId}`)
                        .then(res => {
                            if (!res.ok) {
                                // This is a cash transaction
                                loanDetails.html(`
                                    <div class="alert alert-info">
                                        Cash Transaction Details
                                    </div>
                                    <div class="row mb-2">
                                        <div class="col-md-6"><strong>Total Amount:</strong></div>
                                        <div class="col-md-6 text-end">Tsh ${total.toLocaleString()}</div>
                                    </div>
                                    <div class="row mb-2">
                                        <div class="col-md-6"><strong>Payment Method:</strong></div>
                                        <div class="col-md-6 text-end">${data.payment_method || 'Cash'}</div>
                                    </div>
                                `);

                                $('.btn-accept-payment').hide();
                                paymentsBody.html('<tr><td colspan="5" class="text-center text-muted">No payment history available for cash transactions.</td></tr>');

                                // Show modal before loading deliveries
                                $('#loanModal').modal('show');

                                throw new Error('Cash transaction');
                            }
                            return res.json();
                        })
                        .then(data => {
                            // This is a loan transaction
                            const loan = data.loan || {};
                            const payments = data.payments || [];
                            const totalPaid = payments.reduce((sum, p) => sum + parseFloat(p.amount_paid || 0), 0);
                            const loanAmount = parseFloat(loan.amount) || total;
                            const remaining = loan.remaining || (loanAmount - totalPaid);

                            const $makePaymentBtn = $('.btn-accept-payment');
                            $makePaymentBtn.data('remaining', remaining).show();

                            if (remaining <= 0) {
                                $makePaymentBtn.prop('disabled', true).text('Loan Fully Paid');
                            } else {
                                $makePaymentBtn.prop('disabled', false).html('<i class="fa fa-plus-circle me-1"></i> Make Payment');
                            }

                            // Display loan details
                            loanDetails.html(`
                                <div class="row mb-2">
                                    <div class="col-md-6"><strong>Customer:</strong></div>
                                    <div class="col-md-6 text-end">${loan.customer || data.customer?.name || 'N/A'}</div>
                                </div>
                                <div class="row mb-2">
                                    <div class="col-md-6"><strong>Loan Total Amount:</strong></div>
                                    <div class="col-md-6 text-end">Tsh ${loanAmount.toLocaleString()}</div>
                                </div>
                                <div class="row mb-2">
                                    <div class="col-md-6"><strong>Total Paid:</strong></div>
                                    <div class="col-md-6 text-end">Tsh ${totalPaid.toLocaleString()}</div>
                                </div>
                                <div class="row mb-2">
                                    <div class="col-md-6"><strong>Amount in Debit:</strong></div>
                                    <div class="col-md-6 text-end text-${remaining <= 0 ? 'success' : 'primary'}">
                                        Tsh ${remaining.toLocaleString()}
                                    </div>
                                </div>
                                <div class="row mb-2">
                                    <div class="col-md-6"><strong>Due Date:</strong></div>
                                    <div class="col-md-6 text-end">${loan.due_date ? new Date(loan.due_date).toLocaleDateString() : '-'}</div>
                                </div>
                            `);

                            // Display payment history
                            paymentsBody.empty();
                            if (payments.length === 0) {
                                paymentsBody.html('<tr><td colspan="5" class="text-center text-muted">No payment history available.</td></tr>');
                            } else {
                                payments.forEach((payment, index) => {
                                    const receiptLink = payment.receipt_path
                                        ? `<button class="btn btn-sm btn-outline-primary view-receipt-btn" data-url="/storage/${payment.receipt_path}">View Receipt</button>`
                                        : '-';

                                    paymentsBody.append(`
                                        <tr>
                                            <td>${index + 1}</td>
                                            <td>Tsh ${parseFloat(payment.amount_paid).toLocaleString()}</td>
                                            <td>${payment.payment_type || 'N/A'}</td>
                                            <td>${receiptLink}</td>
                                            <td>${new Date(payment.created_at).toLocaleDateString()}</td>
                                        </tr>
                                    `);
                                });
                            }

                            // Show modal for loan transaction
                            $('#loanModal').modal('show');
                        });
                })
                .catch(error => {
                    console.error('Error loading transaction data:', error);
                })
                .finally(() => {
                    // ALWAYS load deliveries, whether cash or loan transaction
                    loadDeliveriesForSale(saleId, deliveryItemsBody);
                });
        });

        function loadDeliveriesForSale(saleId, deliveryItemsBody) {
            fetch(`/brick-deliveries/${saleId}`)
                .then(res => {
                    if (!res.ok) throw new Error('Failed to fetch deliveries');
                    return res.json();
                })
                .then(deliveries => {
                    deliveryItemsBody.empty();

                    if (!deliveries || deliveries.length === 0) {
                        deliveryItemsBody.append('<tr><td colspan="7" class="text-center text-muted">No delivery records found</td></tr>');
                        return;
                    }

                    const totalOrderedQty = deliveries.length > 0 ? deliveries[0].sale_item?.quantity || 0 : 0;
                    let totalDeliveredQty = 0;

                    deliveries.forEach((delivery, index) => {
                        const deliveredQty = delivery.quantity_delivered || 0;
                        totalDeliveredQty += deliveredQty;

                        const currentRemaining = Math.max(0, totalOrderedQty - totalDeliveredQty);
                        const status = currentRemaining <= 0 ? 'Delivered' : 'Pending';

                        deliveryItemsBody.append(`
                            <tr>
                                <td>${index + 1}</td>
                                <td>${delivery.brick_type?.name || 'N/A'}</td>
                                <td>${totalOrderedQty}</td>
                                <td>${deliveredQty}</td>
                                <td>${delivery.faulty || 0}</td>
                                <td>${currentRemaining}</td>
                                <td class="text-center">
                                    <a
                                        href="/deliveries/${delivery.id}/download-notice"
                                        target="_blank"
                                        title="Generate Delivery Notice"
                                    >
                                        <i class="fa fa-file-pdf text-danger me-1"></i> Download Document
                                    </a>
                                </td>
                            </tr>
                        `);
                    });
                })
                .catch(error => {
                    console.error('Error loading deliveries:', error);
                    deliveryItemsBody.html('<tr><td colspan="7" class="text-center text-danger">Failed to load delivery information</td></tr>');
                });
        }

        $(document).on('click', '.generate-delivery-notice', function(e) {
            e.preventDefault();
            const url = $(this).attr('href');
            const deliveryId = $(this).data('delivery-id');
            const $icon = $(this).find('i');

            // Show loading state
            $icon.text('hourglass_top').addClass('spin');

            // Trigger download
            fetch(url, {
                headers: { 'X-Requested-With': 'XMLHttpRequest' }
            })
            .then(response => response.blob())
            .then(blob => {
                const url = window.URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url;
                a.download = `delivery-notice-${deliveryId}.pdf`;
                document.body.appendChild(a);
                a.click();
                window.URL.revokeObjectURL(url);
            })
            .catch(error => {
                console.error('Download failed:', error);
                alert('Failed to download delivery notice');
            })
            .finally(() => {
                $icon.text('description').removeClass('spin');
            });
        });


        $(document).on('change', '#payment_type', function () {
            const selected = $(this).val();
            if (selected === 'Bank') {
                $('#receiptField').removeClass('d-none');
            } else {
                $('#receiptField').addClass('d-none');
            }
        });

        $(document).on('click', '.btn-accept-payment', function () {
            const remaining = $(this).data('remaining') || 0;
            $('#sale_id').val(currentSaleId);
            $('#loan_debt_remaining').val(remaining);
            $('#remaining_balance_text').text(parseFloat(remaining).toLocaleString());
            $('#loanPaymentModal').modal('show');
        });

        $('#loanPaymentForm').on('submit', function (e) {
            e.preventDefault();
            const formData = new FormData(this);
            formData.append('_token', '{{ csrf_token() }}');
            const enteredAmount = parseFloat($('#payment_amount').val());
            const maxAllowed = parseFloat($('#loan_debt_remaining').val());

            if (isNaN(enteredAmount) || enteredAmount <= 0) {
                alert('Please enter a valid payment amount.');
                return;
            }

            if (enteredAmount > maxAllowed) {
                alert('Payment amount cannot exceed remaining balance.');
                return;
            }

            // Show loading state
            const submitBtn = $(this).find('button[type="submit"]');
            submitBtn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Processing...');

            fetch('/brick-loans', {
                method: 'POST',
                body: formData,
                headers: {
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(async (res) => {
                const data = await res.json();
                if (!res.ok) {
                    throw new Error(data.message || 'Something went wrong');
                }
                return data;
            })
            .then(data => {
                alert(data.message || 'Payment submitted successfully');
                $('#loanPaymentModal').modal('hide');
                setTimeout(() => {
                    $('.viewLoanBtn[data-sale-id="' + currentSaleId + '"]').trigger('click');
                }, 500);
            })
            .catch(error => {
                console.error('Payment error:', error);
                alert('Error submitting payment: ' + (error.message || 'Unexpected error'));
            })
            .finally(() => {
                submitBtn.prop('disabled', false).text('Submit Payment');
            });
        });

        $(document).on('click', '.view-receipt-btn', function () {
            const url = $(this).data('url');
            const ext = url.split('.').pop().toLowerCase();

            let contentHtml = '';

            if (['jpg', 'jpeg', 'png', 'webp'].includes(ext)) {
                contentHtml = `<img src="${url}" alt="Receipt Image" class="img-fluid">`;
            } else if (ext === 'pdf') {
                contentHtml = `<embed src="${url}" type="application/pdf" width="100%" height="600px">`;
            } else {
                contentHtml = `<p class="text-danger">Unsupported file format.</p>`;
            }

            $('#receiptViewerContent').html(contentHtml);
            $('#receiptViewerModal').modal('show');
        });

        // Handle Manage Delivery button click
        $(document).on('click', '.manage-delivery-btn', function() {
            const saleId = $(this).data('sale-id') || currentSaleId;
            $('#delivery_sale_id').val(saleId);

            // Fetch sale items to populate brick types
            fetch(`/bricks-sell/${saleId}`)
                .then(res => res.json())
                .then(data => {
                    const brickTypeSelect = $('#brick_type');
                    brickTypeSelect.empty().append('<option value="">Select Brick Type</option>');

                    if (data.items && data.items.length) {
                        data.items.forEach(item => {
                            if (item.brick_type) {
                                brickTypeSelect.append(
                                    `<option value="${item.brick_type.id}"
                                        data-quantity="${item.quantity}"
                                        data-delivered="${item.delivered_quantity || 0}"
                                        data-price="${item.price_per_unit}"
                                    >${item.brick_type.name}</option>`
                                );
                            }
                        });
                    }

                    // Set today's date as default delivery date
                    const today = new Date().toISOString().split('T')[0];
                    $('#delivery_date').val(today);

                    $('#manageDeliveryModal').modal('show');
                })
                .catch(error => {
                    console.error('Error fetching sale items:', error);
                    alert('Failed to load delivery information');
                });
        });

        // Handle save delivery
        $('#saveDeliveryBtn').on('click', function () {
            const btn = $(this);
            const brickType = $('#brick_type').val();
            const deliveryDate = $('#delivery_date').val();
            const bricksDelivered = parseInt($('#bricks_delivered').val()) || 0;
            const bricksToDeliver = parseInt($('#brick_to_deliver').val()) || 0;
            const faultyBricks = parseInt($('#faulty_bricks').val()) || 0;
            const saleId = $('#delivery_sale_id').val();
            const compensateFromStock = $('#compensate_from_stock').is(':checked');

            // Calculate remaining quantity
            const remainingQuantity = bricksToDeliver - bricksDelivered;

            // Clear previous validation states
            $('#brick_type, #delivery_date, #bricks_delivered, #faulty_bricks').removeClass('is-invalid');
            $('.invalid-feedback').remove();

            let hasError = false;

            // Validation checks
            if (!brickType) {
                $('#brick_type').addClass('is-invalid').after('<div class="invalid-feedback">Please select a brick type</div>');
                hasError = true;
            }
            if (!deliveryDate) {
                $('#delivery_date').addClass('is-invalid').after('<div class="invalid-feedback">Please select a delivery date</div>');
                hasError = true;
            }
            if (isNaN(bricksDelivered) || bricksDelivered <= 0) {
                $('#bricks_delivered').addClass('is-invalid').after('<div class="invalid-feedback">Please enter a valid quantity</div>');
                hasError = true;
            }
            if (bricksDelivered > bricksToDeliver) {
                $('#bricks_delivered').addClass('is-invalid').after('<div class="invalid-feedback">Delivered cannot exceed ordered quantity</div>');
                hasError = true;
            }
            if (isNaN(faultyBricks) || faultyBricks < 0) {
                $('#faulty_bricks').addClass('is-invalid').after('<div class="invalid-feedback">Please enter a valid faulty count</div>');
                hasError = true;
            }
            if (faultyBricks > bricksDelivered) {
                $('#faulty_bricks').addClass('is-invalid').after('<div class="invalid-feedback">Faulty bricks cannot exceed delivered quantity</div>');
                hasError = true;
            }

            if (hasError) return;

            // Prepare form data
            const formData = new FormData();
            formData.append('_token', '{{ csrf_token() }}');
            formData.append('sale_id', saleId);
            formData.append('brick_type', brickType);
            formData.append('delivery_date', deliveryDate);
            formData.append('quantity_delivered', bricksDelivered);
            formData.append('faulty_bricks', faultyBricks);
            formData.append('remaining_quantity', remainingQuantity);
            formData.append('compensate_from_stock', compensateFromStock ? 1 : 0);
            formData.append('delivery_notes', $('#delivery_notes').val());

            btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Saving...');

            fetch('/brick-deliveries', {
                method: 'POST',
                body: formData,
                headers: {
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(async response => {
                const data = await response.json();
                if (!response.ok) throw data;
                return data;
            })
            .then(data => {
                toastr.success('Delivery saved successfully');
                $('#manageDeliveryModal').modal('hide');

                // Refresh data if needed
                if ($('#loanModal').is(':visible')) {
                    loadDeliveriesForSale(saleId, $('#loan-delivery-items-body'));
                }
            })
            .catch(error => {
                console.error('Error:', error);
                if (error.errors) {
                    Object.entries(error.errors).forEach(([field, messages]) => {
                        const $field = $(`[name="${field}"]`);
                        $field.addClass('is-invalid');
                        $field.after(`<div class="invalid-feedback">${messages.join(', ')}</div>`);
                    });
                } else {
                    toastr.error(error.message || 'Failed to save delivery');
                }
            })
            .finally(() => {
                btn.prop('disabled', false).html('Save Delivery');
            });
        });

       // Show/hide and auto-tick compensation checkbox based on faulty bricks
        $('#faulty_bricks').on('input', function() {
            const faultyBricks = parseInt($(this).val()) || 0;
            const $compensationField = $('#compensate_from_stock').closest('.mb-3');

            if (faultyBricks > 0) {
                $compensationField.show();
                $('#compensate_from_stock').prop('disabled', false);

                // Auto-tick if faulty bricks > 1
                if (faultyBricks > 0) {
                    $('#compensate_from_stock').prop('checked', true);
                }
            } else {
                $compensationField.hide();
                $('#compensate_from_stock').prop('checked', false).prop('disabled', true);
            }
        });

        // Initialize - hide compensation field if no faulty bricks and set initial state
        $(document).ready(function() {
            const initialFaulty = parseInt($('#faulty_bricks').val()) || 0;
            const $compensationField = $('#compensate_from_stock').closest('.mb-3');

            if (initialFaulty > 0) {
                $compensationField.show();
                if (initialFaulty > 1) {
                    $('#compensate_from_stock').prop('checked', true);
                }
            } else {
                $compensationField.hide();
                $('#compensate_from_stock').prop('checked', false).prop('disabled', true);
            }
        });

        // Brick type change handler - reset compensation
        $('#brick_type').on('change', function() {
            $('#faulty_bricks').val('0').trigger('input');
            $('#compensate_from_stock').prop('checked', false);
        });



        $('#brick_type').on('change', function() {
            const selected = $(this).find('option:selected');
            const orderedQty = parseInt(selected.data('quantity')) || 0;
            const deliveredQty = parseInt(selected.data('delivered')) || 0;
            const price = parseFloat(selected.data('price')) || 0;

            const remainingQty = orderedQty - deliveredQty;

            $('#brick_to_deliver').val(orderedQty);
            $('#bricks_delivered').val('').attr('max', remainingQty);
            $('#bricks_remaining').val(remainingQty);
            $('#delivery_subtotal').val('Tsh 0');
            $('#quantity_delivered').data('price', price);
        });


        $('#bricks_delivered').on('input', function() {
            const delivered = parseInt($(this).val()) || 0;
            const max = parseInt($(this).attr('max')) || 0;
            const price = parseFloat($(this).data('price')) || 0;
            const faulty = parseInt($('#faulty_bricks').val()) || 0;

            // Ensure delivered doesn't exceed remaining quantity
            if (delivered > max) {
                $(this).val(max);
                return;
            }

            // Ensure faulty doesn't exceed delivered
            if (faulty > delivered) {
                $('#faulty_bricks').val(delivered);
            }

            const remaining = max - delivered;
            const goodBricks = delivered - faulty;
            const subtotal = goodBricks * price;

            $('#bricks_remaining').val(remaining);
            $('#delivery_subtotal').val('Tsh ' + subtotal.toLocaleString());
        });

        if (currentDelivery > totalToDeliver) {
        $('#bricks_delivered').addClass('is-invalid');
        } else {
            $('#bricks_delivered').removeClass('is-invalid');
        }




});
</script>
@endpush