@extends('layouts.main')

@push('styles')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">
<style>
    .status-badge {
        display: inline-block;
        padding: 0.25rem 0.5rem;
        border-radius: 999px;
        font-size: 0.75rem;
        font-weight: 600;
    }
    .status-active {
        background-color: #d1e7dd;
        color: #0f5132;
    }
    .status-closed {
        background-color: #cfe2ff;
        color: #084298;
    }
    .status-written_off {
        background-color: #f8d7da;
        color: #842029;
    }
</style>
@endpush

@section('content')
<div class="content-wrapper">
    <div class="content-header">
        <div class="container-fluid p-0">
            <h1 class="h3 mb-3">Cement Loans Management</h1>
        </div>
    </div>

    <div class="container-fluid">
        {{-- Summary Cards --}}
        <div class="row mb-4">
            <div class="col-md-4">
                <div class="card border-left-primary shadow-sm">
                    <div class="card-body">
                        <h6 class="text-muted">Total Principal (All Loans)</h6>
                        <h4 class="mb-0">{{ number_format((float) $totalPrincipal, 2) }} Tsh</h4>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card border-left-danger shadow-sm">
                    <div class="card-body">
                        <h6 class="text-muted">Total Outstanding Balance</h6>
                        <h4 class="mb-0">{{ number_format((float) $totalBalance, 2) }} Tsh</h4>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card border-left-success shadow-sm">
                    <div class="card-body">
                        <h6 class="text-muted">Active Loans (Count)</h6>
                        <h4 class="mb-0">{{ number_format($totalActive) }}</h4>
                    </div>
                </div>
            </div>
        </div>

        {{-- Loans Table (one row per customer) --}}
        <div class="row">
            <div class="col-md-12 col-xl-12">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="card-title mb-0">Cement Loans Per Customer</h5>
                    </div>
                    <div class="card-body">
                        <table class="yajra-datatable table table-striped" style="width:100%" id="loans-table">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Customer</th>
                                    <th>Total Principal (Tsh)</th>
                                    <th>Total Balance (Tsh)</th>
                                    <th>Active Loans</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                {{-- Filled by DataTables --}}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- ================================================================= --}}
{{--  TRANSACTIONS MODAL (READ-ONLY)                                  --}}
{{-- ================================================================= --}}
<div class="modal fade" id="customerLoansModal" tabindex="-1" aria-labelledby="customerLoansModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="customerLoansModalLabel">
                    <i class="material-icons me-1">receipt_long</i>
                    <span id="customerLoansTitle">Customer Loans</span>
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body">
                {{-- Customer Info --}}
                <div class="mb-3">
                    <h6>Customer Information</h6>
                    <div class="row">
                        <div class="col-md-4">
                            <strong>Name:</strong> <span id="customerLoansName">-</span>
                        </div>
                        <div class="col-md-4">
                            <strong>Phone:</strong> <span id="customerLoansPhone">-</span>
                        </div>
                        <div class="col-md-4">
                            <strong>Total Principal (All Loans):</strong>
                            <span id="customerLoansTotalPrincipal">0.00</span> Tsh
                            <br>
                            <strong>Total Balance (Outstanding):</strong>
                            <span id="customerLoansTotalBalance">0.00</span> Tsh
                        </div>
                    </div>
                </div>

                {{-- Loans Table (READ-ONLY) --}}
                <div class="table-responsive">
                    <table class="table table-striped table-bordered align-middle">
                        <thead class="table-light">
                            <tr>
                                <th>#</th>
                                <th>Cement Sale ID</th>
                                <th>Principal (Tsh)</th>
                                <th>Balance (Tsh)</th>
                                <th>Status</th>
                                <th>Qty</th>
                                <th>Selling Price (Tsh)</th>
                                <th>Payment Mode</th>
                                <th>Created At</th>
                            </tr>
                        </thead>
                        <tbody id="customerLoansTbody">
                            {{-- Filled by JS --}}
                        </tbody>
                        <tfoot>
                            <tr class="fw-bold">
                                <td colspan="2" class="text-end">Totals:</td>
                                <td id="customerLoansFooterPrincipal">0.00</td>
                                <td id="customerLoansFooterBalance">0.00</td>
                                <td colspan="5"></td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    Close
                </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 modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="loanPaymentModalLabel">
                    <i class="material-icons me-1">payments</i>
                    Record Loan Payment
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body">
                {{-- Success & error messages --}}
                <div class="alert alert-success d-none" id="loanPaymentSuccess"></div>
                <div class="alert alert-danger d-none" id="loanPaymentErrors"></div>

                <form id="loanPaymentForm" enctype="multipart/form-data">
                    @csrf
                    {{-- Payment is per customer --}}
                    <input type="hidden" name="customer_id" id="loanPaymentCustomerId">

                    {{-- Basic info --}}
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label class="form-label">Customer</label>
                            <input type="text" id="loanPaymentCustomer" class="form-control" readonly>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Current Balance (Tsh)</label>
                            <input type="text" id="loanPaymentCurrentBalance" class="form-control" readonly>
                        </div>
                    </div>

                    {{-- Payment info --}}
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label class="form-label">Amount to Pay (Tsh)</label>
                            <input type="number" step="0.01" min="0" name="amount" id="loanPaymentAmount" class="form-control" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Payment Date</label>
                            <input type="date" name="payment_date" id="loanPaymentDate" class="form-control" required>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label class="form-label">Payment Method</label>
                            <select name="payment_method_id" id="loanPaymentMethod" class="form-select">
                                @foreach($paymentMethods as $method)
                                    <option value="{{ $method->id }}">{{ $method->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Reference No. (optional)</label>
                            <input type="text" name="reference" id="loanPaymentReference" class="form-control" placeholder="Receipt / Txn ID">
                        </div>
                    </div>

                    {{-- Attachment (shown only for bank / mobile money) --}}
                    <div class="row mb-3" id="loanPaymentAttachmentWrapper" style="display: none;">
                        <div class="col-md-12">
                            <label class="form-label">Receipt / Proof (image or PDF)</label>
                            <input
                                type="file"
                                name="payment_attachment"
                                id="loanPaymentAttachment"
                                class="form-control"
                                accept="image/*,application/pdf"
                            >
                            <small class="text-muted">
                                Upload receipt / screenshot for Bank or Mobile Money payments.
                            </small>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Notes (optional)</label>
                        <textarea name="description" id="loanPaymentDescription" class="form-control" rows="2"></textarea>
                    </div>
                </form>

                <hr>

                <h6>Loan & Payment History</h6>

                <div class="row">
                    {{-- Summary --}}
                    <div class="col-md-4">
                        <div class="card mb-3">
                            <div class="card-body p-2">
                                <p class="mb-1"><strong>Total Taken:</strong>
                                    <span id="historyTotalTaken">0.00</span> Tsh
                                </p>
                                <p class="mb-1"><strong>Total Paid:</strong>
                                    <span id="historyTotalPaid">0.00</span> Tsh
                                </p>
                                <p class="mb-0"><strong>Total Balance:</strong>
                                    <span id="historyTotalBalance">0.00</span> Tsh
                                </p>
                            </div>
                        </div>
                    </div>

                    {{-- Loans per cement_loan --}}
                    <div class="col-md-8">
                        <div class="table-responsive mb-3">
                            <table class="table table-sm table-striped">
                                <thead class="table-light">
                                    <tr>
                                        <th>#Loan</th>
                                        <th>Principal (Tsh)</th>
                                        <th>Paid (Tsh)</th>
                                        <th>Balance (Tsh)</th>
                                        <th>Status</th>
                                    </tr>
                                </thead>
                                <tbody id="loanHistoryTbody">
                                    <tr>
                                        <td colspan="5" class="text-center">No data.</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                {{-- Payment History table --}}
                <div class="table-responsive">
                    <table class="table table-sm table-bordered">
                        <thead class="table-light">
                            <tr>
                                <th>#</th>
                                <th>Loan ID</th>
                                <th>Amount (Tsh)</th>
                                <th>Payment Date</th>
                                <th>Method</th>
                                <th>Reference</th>
                                <th>Recorded By</th>
                            </tr>
                        </thead>
                        <tbody id="paymentHistoryTbody">
                            <tr>
                                <td colspan="7" class="text-center">No payments yet.</td>
                            </tr>
                        </tbody>
                        <tfoot>
                            <tr class="fw-bold">
                                <td colspan="2" class="text-end">Total:</td>
                                <td id="paymentHistoryTotalAmount">0.00</td>
                                <td colspan="4"></td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div> {{-- end modal-body --}}

            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    Close
                </button>
                <button type="button" class="btn btn-primary" id="loanPaymentSaveBtn">
                    Save Payment
                </button>
            </div>
        </div>
    </div>
</div>

{{-- ================================================================= --}}
{{--  CLOSE / DEFAULT MODAL  (ONLY NON-CLOSED LOANS)                   --}}
{{-- ================================================================= --}}
<div class="modal fade" id="closeLoansModal" tabindex="-1" aria-labelledby="closeLoansModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="closeLoansModalLabel">
                    <i class="material-icons me-1">rule</i>
                    Close / Default Loans
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body">
                <p class="mb-2">
                    <strong>Customer:</strong> <span id="closeLoansCustomerName">-</span><br>
                    <strong>Customer ID:</strong> <span id="closeLoansCustomerId">-</span>
                </p>

                <div class="alert alert-info d-none" id="closeLoansInfo"></div>

                <div class="table-responsive">
                    <table class="table table-sm table-bordered align-middle">
                        <thead class="table-light">
                            <tr>
                                <th>#Loan</th>
                                <th>Cement Sale ID</th>
                                <th>Principal (Tsh)</th>
                                <th>Balance (Tsh)</th>
                                <th>Status</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody id="closeLoansTbody">
                            <tr>
                                <td colspan="6" class="text-center">No data.</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <small class="text-muted">
                    Only loans that are <strong>not closed</strong> are listed here.
                    Click <strong>Close / Default</strong> to set status to <em>Closed</em> or <em>Written Off (Default)</em>.
                </small>
            </div>

            <div class="modal-footer">
                <button class="btn btn-secondary" data-bs-dismiss="modal" type="button">Close</button>
            </div>
        </div>
    </div>
</div>

{{-- ================================================================= --}}
{{--  LOAN STATUS MODAL (Close / Default single loan)                  --}}
{{-- ================================================================= --}}
<div class="modal fade" id="loanStatusModal" tabindex="-1" aria-labelledby="loanStatusModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="loanStatusModalLabel">
                    <i class="material-icons me-1">rule</i>
                    Change Loan Status
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-danger d-none" id="loanStatusErrors"></div>
                <div class="alert alert-success d-none" id="loanStatusSuccess"></div>

                <form id="loanStatusForm">
                    @csrf
                    <input type="hidden" name="loan_id" id="statusLoanId">
                    <input type="hidden" id="statusCustomerId"> {{-- for refresh after change --}}

                    <p class="mb-2">
                        <strong>Loan:</strong>
                        <span id="statusLoanInfo"># -</span><br>
                        <strong>Current Status:</strong>
                        <span id="statusLoanCurrentStatus">-</span><br>
                        <strong>Current Balance:</strong>
                        <span id="statusLoanBalance">0.00</span> Tsh
                    </p>

                    <div class="mb-3">
                        <label class="form-label">New Status</label>
                        <select name="new_status" id="statusNewStatus" class="form-select" required>
                            <option value="">-- Select --</option>
                            <option value="closed">Close Loan</option>
                            <option value="written_off">Make Default (Written Off)</option>
                        </select>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Reason</label>
                        <textarea name="reason" id="statusReason" class="form-control" rows="3" required
                                  placeholder="Explain why this loan is being closed or written off"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" data-bs-dismiss="modal" type="button">Cancel</button>
                <button class="btn btn-warning" id="loanStatusSaveBtn" type="button">Save Status</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<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 src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>

<script>
$(function () {
    console.log('Cement loans page JS loaded');

    window.currentLoansCustomerId   = null;
    window.currentLoansCustomerName = null;

    // ==========================
    //  DataTable
    // ==========================
    $('#loans-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: '{{ route('cements-loan.index') }}',
        columns: [
            { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
            { data: 'customer_name', name: 'customer_name' },
            { data: 'total_principal_formatted', name: 'total_principal' },
            { data: 'total_balance_formatted', name: 'total_balance' },
            { data: 'active_loans_count', name: 'active_loans_count' },
            { data: 'action', name: 'action', orderable: false, searchable: false },
        ]
    });

    // ==========================
    //  Helper: CSRF
    // ==========================
    function getCsrfToken() {
        let token = $('meta[name="csrf-token"]').attr('content');
        if (!token) {
            token = $('input[name="_token"]').val();
        }
        if (!token) {
            token = '{{ csrf_token() }}';
        }
        return token;
    }

    // ==========================
    //  TRANSACTIONS MODAL (read-only)
    // ==========================
    function loadCustomerLoans(customerId, customerName) {
        $('#customerLoansTitle').text('Loans for ' + customerName);
        $('#customerLoansName').text(customerName);
        $('#customerLoansPhone').text('...');
        $('#customerLoansTotalPrincipal').text('0.00');
        $('#customerLoansTotalBalance').text('0.00');
        $('#customerLoansTbody').html(
            '<tr><td colspan="9" class="text-center">Loading transactions...</td></tr>'
        );

        $('#customerLoansFooterPrincipal').text('0.00');
        $('#customerLoansFooterBalance').text('0.00');

        $.ajax({
            url: '{{ route('cements-loan.customer-transactions', ':id') }}'.replace(':id', customerId),
            type: 'GET',
            success: function (resp) {
                if (!resp) return;

                const customer = resp.customer || {};
                const loans    = resp.loans || [];

                $('#customerLoansName').text(customer.name || customerName);
                $('#customerLoansPhone').text(customer.phone_number || '—');
                $('#customerLoansTotalPrincipal').text(resp.total_principal_formatted || '0.00');
                $('#customerLoansTotalBalance').text(resp.total_balance_formatted || '0.00');

                $('#customerLoansFooterPrincipal').text(resp.total_principal_formatted || '0.00');
                $('#customerLoansFooterBalance').text(resp.total_balance_formatted || '0.00');

                if (!loans.length) {
                    $('#customerLoansTbody').html(
                        '<tr><td colspan="9" class="text-center">No loan records found for this customer.</td></tr>'
                    );
                    return;
                }

                let rowsHtml = '';
                loans.forEach(function (loan) {
                    const cement       = loan.cement || {};
                    const qty          = cement.quantity_formatted || (cement.quantity || '—');
                    const sellPrice    = cement.selling_price_formatted || (cement.selling_price || '—');
                    const paymentMode  = cement.payment_mode || '—';
                    const createdAt    = loan.created_at ? loan.created_at : '—';
                    const saleId       = loan.cement_sale_id ? loan.cement_sale_id : '—';
                    const statusLabel  = loan.status_label || loan.status || '—';
                    const balanceText  = loan.balance_formatted || loan.balance || '0.00';
                    const principalTxt = loan.principal_amount_formatted || loan.principal_amount || '0.00';

                    rowsHtml += `
                        <tr>
                            <td>${loan.id}</td>
                            <td>${saleId}</td>
                            <td>${principalTxt}</td>
                            <td>${balanceText}</td>
                            <td>${statusLabel}</td>
                            <td>${qty}</td>
                            <td>${sellPrice}</td>
                            <td>${paymentMode}</td>
                            <td>${createdAt}</td>
                        </tr>
                    `;
                });

                $('#customerLoansTbody').html(rowsHtml);
            },
            error: function (xhr) {
                $('#customerLoansTbody').html(
                    '<tr><td colspan="9" class="text-center text-danger">Failed to load transactions. Please try again.</td></tr>'
                );
            }
        });
    }

    $(document).on('click', '.view-loans-btn', function () {
        const customerId   = $(this).data('id');
        const customerName = $(this).data('name') || ('Customer #' + customerId);

        window.currentLoansCustomerId   = customerId;
        window.currentLoansCustomerName = customerName;

        $('#customerLoansModal').modal('show');
        loadCustomerLoans(customerId, customerName);
    });

    // ==========================
    //  CLOSE / DEFAULT MODAL (only non-closed loans)
    // ==========================
    function loadCloseLoans(customerId, customerName) {
        $('#closeLoansCustomerName').text(customerName);
        $('#closeLoansCustomerId').text(customerId);
        $('#closeLoansInfo').addClass('d-none').empty();
        $('#closeLoansTbody').html(
            '<tr><td colspan="6" class="text-center">Loading loans...</td></tr>'
        );

        $.ajax({
            url: '{{ route('cements-loan.customer-transactions', ':id') }}'.replace(':id', customerId),
            type: 'GET',
            success: function (resp) {
                if (!resp) {
                    $('#closeLoansTbody').html(
                        '<tr><td colspan="6" class="text-center text-danger">Failed to load loans.</td></tr>'
                    );
                    return;
                }

                const loans = resp.loans || [];

                // Filter: show only loans that are NOT closed
                const openLoans = loans.filter(function (loan) {
                    const s = (loan.status || '').toLowerCase();
                    return s !== 'closed';
                });

                if (!openLoans.length) {
                    $('#closeLoansTbody').html(
                        '<tr><td colspan="6" class="text-center">All loans are already closed. Nothing to close/default.</td></tr>'
                    );
                    $('#closeLoansInfo')
                        .removeClass('d-none')
                        .html('This customer has no open loans. Only non-closed loans appear here.');
                    return;
                }

                let rowsHtml = '';
                openLoans.forEach(function (loan) {
                    const saleId       = loan.cement_sale_id ? loan.cement_sale_id : '—';
                    const principalTxt = loan.principal_amount_formatted || loan.principal_amount || '0.00';
                    const balanceText  = loan.balance_formatted || loan.balance || '0.00';
                    const statusLabel  = loan.status_label || loan.status || '—';

                    const btn = `
                        <button type="button"
                                class="btn btn-sm btn-warning do-change-status-btn"
                                data-loan-id="${loan.id}"
                                data-loan-status="${statusLabel}"
                                data-loan-balance="${balanceText}"
                                data-customer-id="${customerId}">
                            Close / Default
                        </button>
                    `;

                    rowsHtml += `
                        <tr>
                            <td>${loan.id}</td>
                            <td>${saleId}</td>
                            <td>${principalTxt}</td>
                            <td>${balanceText}</td>
                            <td>${statusLabel}</td>
                            <td>${btn}</td>
                        </tr>
                    `;
                });

                $('#closeLoansTbody').html(rowsHtml);
            },
            error: function (xhr) {
                $('#closeLoansTbody').html(
                    '<tr><td colspan="6" class="text-center text-danger">Failed to load loans.</td></tr>'
                );
            }
        });
    }

    $(document).on('click', '.close-loans-btn', function () {
        const customerId   = $(this).data('customer-id');
        const customerName = $(this).data('customer-name') || ('Customer #' + customerId);

        window.currentLoansCustomerId   = customerId;
        window.currentLoansCustomerName = customerName;

        $('#closeLoansModalLabel').text('Close / Default Loans for ' + customerName);
        $('#closeLoansModal').modal('show');
        loadCloseLoans(customerId, customerName);
    });

    // When user clicks "Close / Default" in closeLoansModal -> open loanStatusModal
    $(document).on('click', '.do-change-status-btn', function () {
        const loanId     = $(this).data('loan-id');
        const status     = $(this).data('loan-status') || '-';
        const balance    = $(this).data('loan-balance') || '0.00';
        const customerId = $(this).data('customer-id');

        $('#statusLoanId').val(loanId);
        $('#statusCustomerId').val(customerId);
        $('#statusLoanInfo').text('#' + loanId);
        $('#statusLoanCurrentStatus').text(status);
        $('#statusLoanBalance').text(balance);

        $('#statusNewStatus').val('');
        $('#statusReason').val('');
        $('#loanStatusErrors').addClass('d-none').empty();
        $('#loanStatusSuccess').addClass('d-none').empty();

        $('#loanStatusModal').modal('show');
    });

    // ==========================
    //  PAYMENT MODAL LOGIC
    // ==========================
    function loadLoanPaymentHistory(customerId) {
        $('#historyTotalTaken').text('0.00');
        $('#historyTotalPaid').text('0.00');
        $('#historyTotalBalance').text('0.00');
        $('#loanHistoryTbody').html(
            '<tr><td colspan="5" class="text-center">Loading loan history...</td></tr>'
        );
        $('#paymentHistoryTbody').html(
            '<tr><td colspan="7" class="text-center">Loading payment history...</td></tr>'
        );
        $('#paymentHistoryTotalAmount').text('0.00');

        $.ajax({
            url: '{{ route('cements-payments.history', ['customer' => '__ID__']) }}'.replace('__ID__', customerId),
            method: 'GET',
            success: function (resp) {
                if (resp.summary) {
                    $('#historyTotalTaken').text(
                        parseFloat(resp.summary.total_taken || 0).toLocaleString()
                    );
                    $('#historyTotalPaid').text(
                        parseFloat(resp.summary.total_paid || 0).toLocaleString()
                    );
                    $('#historyTotalBalance').text(
                        parseFloat(resp.summary.total_balance || 0).toLocaleString()
                    );
                }

                const loans = resp.loans || [];
                if (!loans.length) {
                    $('#loanHistoryTbody').html(
                        '<tr><td colspan="5" class="text-center">No loans found.</td></tr>'
                    );
                } else {
                    let rows = '';
                    loans.forEach(function (loan) {
                        rows += `
                            <tr>
                                <td>${loan.id}</td>
                                <td>${loan.principal_amount}</td>
                                <td>${loan.total_paid}</td>
                                <td>${loan.balance}</td>
                                <td>${loan.status}</td>
                            </tr>
                        `;
                    });
                    $('#loanHistoryTbody').html(rows);
                }

                const payments = resp.payments || [];
                if (!payments.length) {
                    $('#paymentHistoryTbody').html(
                        '<tr><td colspan="7" class="text-center">No payments recorded yet.</td></tr>'
                    );
                    $('#paymentHistoryTotalAmount').text('0.00');
                } else {
                    let rows = '';
                    let totalAmount = 0;

                    payments.forEach(function (p, index) {
                        const numeric = parseFloat(String(p.amount).replace(/,/g, '')) || 0;
                        totalAmount += numeric;

                        rows += `
                            <tr>
                                <td>${index + 1}</td>
                                <td>${p.cement_loan_id}</td>
                                <td>${p.amount}</td>
                                <td>${p.payment_date || '-'}</td>
                                <td>${p.method || '-'}</td>
                                <td>${p.reference || '-'}</td>
                                <td>${p.created_by || '-'}</td>
                            </tr>
                        `;
                    });

                    $('#paymentHistoryTbody').html(rows);

                    $('#paymentHistoryTotalAmount').text(
                        totalAmount.toLocaleString(undefined, {
                            minimumFractionDigits: 2,
                            maximumFractionDigits: 2
                        })
                    );
                }
            },
            error: function (xhr) {
                $('#loanHistoryTbody').html(
                    '<tr><td colspan="5" class="text-center text-danger">Failed to load loan history.</td></tr>'
                );
                $('#paymentHistoryTbody').html(
                    '<tr><td colspan="7" class="text-center text-danger">Failed to load payment history.</td></tr>'
                );
                $('#paymentHistoryTotalAmount').text('0.00');
            }
        });
    }

    $(document).on('click', '.pay-loan-btn', function () {
        const customerId   = $(this).data('customer-id');
        const customerName = $(this).data('customer-name') || 'Customer';
        const balance      = $(this).data('balance') || 0;

        $('#loanPaymentCustomerId').val(customerId);
        $('#loanPaymentCustomer').val(customerName);
        $('#loanPaymentCurrentBalance').val(balance);

        $('#loanPaymentAmount').val(balance);

        const today = new Date().toISOString().slice(0, 10);
        $('#loanPaymentDate').val(today);

        const methodSelect = $('#loanPaymentMethod');
        if (methodSelect[0] && methodSelect[0].options.length > 0) {
            methodSelect[0].selectedIndex = 0;
        }
        methodSelect.trigger('change');

        $('#loanPaymentReference').val('');
        $('#loanPaymentDescription').val('');
        $('#loanPaymentAttachment').val('');
        $('#loanPaymentErrors').addClass('d-none').empty();
        $('#loanPaymentSuccess').addClass('d-none').empty();

        $('#loanPaymentModal').modal('show');

        loadLoanPaymentHistory(customerId);
    });

    $('#loanPaymentMethod').on('change', function () {
        const selectedText = $(this).find('option:selected').text().toLowerCase();

        if (selectedText.includes('bank') || selectedText.includes('mobile')) {
            $('#loanPaymentAttachmentWrapper').slideDown(150);
        } else {
            $('#loanPaymentAttachmentWrapper').slideUp(150);
            $('#loanPaymentAttachment').val('');
        }
    });

    $('#loanPaymentForm').on('submit', function (e) {
        e.preventDefault();

        const csrfToken = getCsrfToken();
        const $btn      = $('#loanPaymentSaveBtn');
        const formEl    = this;

        let errors = [];

        const customerId   = $('#loanPaymentCustomerId').val();
        const amountStr    = $('#loanPaymentAmount').val();
        const paymentDate  = $('#loanPaymentDate').val();
        const methodId     = $('#loanPaymentMethod').val();
        const methodText   = $('#loanPaymentMethod option:selected').text().toLowerCase();
        const fileInput    = $('#loanPaymentAttachment')[0];
        const balanceStr   = $('#loanPaymentCurrentBalance').val();

        const amount         = parseFloat(amountStr);
        const currentBalance = parseFloat((balanceStr || '').toString().replace(/,/g, ''));

        if (!customerId) {
            errors.push('Customer is missing. Please refresh the page and try again.');
        }
        if (!amountStr || isNaN(amount) || amount <= 0) {
            errors.push('Amount to pay must be greater than 0.');
        }
        if (!isNaN(currentBalance) && amount > currentBalance) {
            errors.push('Amount cannot exceed current balance (' + currentBalance.toLocaleString() + ' Tsh).');
        }
        if (!paymentDate) {
            errors.push('Payment date is required.');
        }
        if (!methodId) {
            errors.push('Payment method is required.');
        }

        const needsAttachment = methodText.includes('bank') || methodText.includes('mobile');
        if (needsAttachment) {
            if (!fileInput.files || fileInput.files.length === 0) {
                errors.push('Receipt / proof is required for bank or mobile money payments.');
            }
        }

        if (errors.length > 0) {
            let html = '<ul class="mb-0">';
            errors.forEach(function (msg) {
                html += '<li>' + msg + '</li>';
            });
            html += '</ul>';

            $('#loanPaymentErrors').removeClass('d-none').html(html);
            $('#loanPaymentSuccess').addClass('d-none').empty();
            return;
        }

        const url      = '{{ route('cements-payments.store') }}';
        const formData = new FormData(formEl);

        $btn.prop('disabled', true).text('Saving...');
        $('#loanPaymentErrors').addClass('d-none').empty();
        $('#loanPaymentSuccess').addClass('d-none').empty();

        $.ajax({
            url: url,
            method: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            headers: {
                'X-CSRF-TOKEN': csrfToken
            },
            success: function (resp) {
                $btn.prop('disabled', false).text('Save Payment');

                $('#loanPaymentSuccess')
                    .removeClass('d-none')
                    .html(resp.message || 'Payment received successfully.');

                $('#loanPaymentAmount').val('');
                const today = new Date().toISOString().slice(0, 10);
                $('#loanPaymentDate').val(today);

                const methodSelect = $('#loanPaymentMethod');
                if (methodSelect[0] && methodSelect[0].options.length > 0) {
                    methodSelect[0].selectedIndex = 0;
                }
                methodSelect.trigger('change');

                $('#loanPaymentReference').val('');
                $('#loanPaymentDescription').val('');
                $('#loanPaymentAttachment').val('');

                if ($.fn.DataTable.isDataTable('#loans-table')) {
                    $('#loans-table').DataTable().ajax.reload(null, false);
                }

                const customerId = $('#loanPaymentCustomerId').val();
                if (customerId) {
                    loadLoanPaymentHistory(customerId);
                    if (window.currentLoansCustomerId) {
                        loadCustomerLoans(window.currentLoansCustomerId, window.currentLoansCustomerName || '');
                        loadCloseLoans(window.currentLoansCustomerId, window.currentLoansCustomerName || '');
                    }
                }
            },
            error: function (xhr) {
                $btn.prop('disabled', false).text('Save Payment');

                let html = 'Failed to save payment. Please try again.';

                if (xhr.status === 422 && xhr.responseJSON && xhr.responseJSON.errors) {
                    const errs = xhr.responseJSON.errors;
                    html = '<ul class="mb-0">';
                    Object.keys(errs).forEach(function (k) {
                        errs[k].forEach(function (msg) {
                            html += '<li>' + msg + '</li>';
                        });
                    });
                    html += '</ul>';
                } else if (xhr.responseJSON && xhr.responseJSON.message) {
                    html = xhr.responseJSON.message;
                } else if (xhr.status === 0) {
                    html = 'Network error - cannot connect to server.';
                } else if (xhr.status === 404) {
                    html = 'URL not found (404). Check the route.';
                } else if (xhr.status === 500) {
                    html = 'Server error (500). Check Laravel logs.';
                }

                $('#loanPaymentErrors').removeClass('d-none').html(html);
                $('#loanPaymentSuccess').addClass('d-none').empty();
            }
        });
    });

    $('#loanPaymentSaveBtn').on('click', function (e) {
        e.preventDefault();
        $('#loanPaymentForm').trigger('submit');
    });

    // ==========================
    //  STATUS MODAL (Close / Default)
    // ==========================
    $('#loanStatusSaveBtn').on('click', function (e) {
        e.preventDefault();

        const csrfToken = getCsrfToken();

        const loanId     = $('#statusLoanId').val();
        const customerId = $('#statusCustomerId').val();
        const newStatus  = $('#statusNewStatus').val();
        const reason     = $('#statusReason').val().trim();

        let errors = [];

        if (!loanId) {
            errors.push('Loan ID is missing.');
        }
        if (!newStatus) {
            errors.push('Please select a new status.');
        }
        if (!reason) {
            errors.push('Reason is required.');
        }

        if (errors.length > 0) {
            let html = '<ul class="mb-0">';
            errors.forEach(function (msg) {
                html += '<li>' + msg + '</li>';
            });
            html += '</ul>';

            $('#loanStatusErrors').removeClass('d-none').html(html);
            $('#loanStatusSuccess').addClass('d-none').empty();
            return;
        }

        $('#loanStatusErrors').addClass('d-none').empty();
        $('#loanStatusSuccess').addClass('d-none').empty();

        const $btn = $('#loanStatusSaveBtn');
        $btn.prop('disabled', true).text('Saving...');

        $.ajax({
            url: '{{ route('cements-loan.change-status') }}',
            method: 'POST',
            data: {
                _token: csrfToken,
                loan_id: loanId,
                new_status: newStatus,
                reason: reason
            },
            success: function (resp) {
                $('#loanStatusSuccess')
                    .removeClass('d-none')
                    .html(resp.message || 'Loan status updated successfully.');

                if ($.fn.DataTable.isDataTable('#loans-table')) {
                    $('#loans-table').DataTable().ajax.reload(null, false);
                }

                if (customerId) {
                    if (window.currentLoansCustomerId) {
                        loadCustomerLoans(window.currentLoansCustomerId, window.currentLoansCustomerName || '');
                        loadCloseLoans(window.currentLoansCustomerId, window.currentLoansCustomerName || '');
                    }
                    loadLoanPaymentHistory(customerId);
                }

                setTimeout(function () {
                    $('#loanStatusModal').modal('hide');
                }, 1000);
            },
            error: function (xhr) {
                let html = 'Failed to update loan status.';

                if (xhr.status === 422 && xhr.responseJSON && xhr.responseJSON.errors) {
                    const errs = xhr.responseJSON.errors;
                    html = '<ul class="mb-0">';
                    Object.keys(errs).forEach(function (k) {
                        errs[k].forEach(function (msg) {
                            html += '<li>' + msg + '</li>';
                        });
                    });
                    html += '</ul>';
                } else if (xhr.responseJSON && xhr.responseJSON.message) {
                    html = xhr.responseJSON.message;
                }

                $('#loanStatusErrors').removeClass('d-none').html(html);
                $('#loanStatusSuccess').addClass('d-none').empty();
            },
            complete: function () {
                $btn.prop('disabled', false).text('Save Status');
            }
        });
    });
});
</script>
@endpush