@extends('layouts.app')
@section('content')
<div class="content-wrapper">
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-8">
                    <h1 class="m-0"><i class="fas fa-cash-register"></i> Record Payment (POS)</h1>
                </div>
                <div class="col-sm-4">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('payments.index') }}">Payments</a></li>
                        <li class="breadcrumb-item active">New Payment</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>

    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <!-- Left Side - Client & Billing Selection -->
                <div class="col-md-6">
                    <div class="card card-primary">
                        <div class="card-header">
                            <h3 class="card-title">Select Client & Billing</h3>
                        </div>
                        <div class="card-body">
                            @if(session('success'))
                                <div class="alert alert-success alert-dismissible fade show" role="alert">
                                    <i class="fas fa-check-circle me-2"></i>{{ session('success') }}
                                    <button type="button" class="close" data-dismiss="alert" data-bs-dismiss="alert">
                                        <span>&times;</span>
                                    </button>
                                </div>
                            @endif

                            @if($errors->any())
                                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                    <strong><i class="fas fa-exclamation-triangle me-2"></i>Validation Errors:</strong>
                                    <ul class="mb-0">
                                        @foreach($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                    <button type="button" class="close" data-dismiss="alert">
                                        <span>&times;</span>
                                    </button>
                                </div>
                            @endif

                            <form method="POST" action="{{ route('payments.store') }}" id="paymentForm">
                                @csrf

                                <div class="form-group position-relative">
                                    <label for="client_search">Search Client <span class="text-danger">*</span></label>
                                    <input type="text" id="client_search" class="form-control" placeholder="Search by client name, account number, or meter number..." autocomplete="off">
                                    <div id="clientSearchResults" class="position-absolute w-100" style="z-index: 1000; display: none; background: white; border: 1px solid #ddd; border-top: none; max-height: 300px; overflow-y: auto;">
                                        <div id="searchResultsList"></div>
                                    </div>
                                    @error('billing_ids')
                                        <span class="invalid-feedback d-block">{{ $message }}</span>
                                    @enderror
                                </div>

                                <!-- Selected Client's Billings -->
                                <div id="clientBillings" style="display: none;" class="mt-3">
                                    <div class="card card-light">
                                        <div class="card-header">
                                            <h3 class="card-title"><i class="fas fa-user"></i> <span id="selectedClientName">-</span></h3>
                                        </div>
                                        <div class="card-body p-0">
                                            <div class="px-3 pt-3">
                                                <div class="info-row mb-1">
                                                    <strong>Account #:</strong> <span id="selectedAccountNumber">-</span>
                                                </div>
                                                <div class="info-row mb-1">
                                                    <strong>Total Outstanding:</strong> <span class="text-danger font-weight-bold" id="selectedTotalBalance">₱ 0.00</span>
                                                </div>
                                                <div class="info-row mb-1">
                                                    <strong>Selected to Pay:</strong> <span class="text-success font-weight-bold" id="selectedToPay">₱ 0.00</span>
                                                    <span class="badge badge-secondary" id="selectedCountBadge">0 billings</span>
                                                </div>
                                                <div class="info-row mb-1" id="selectedFeeBreakdown" style="display:none;">
                                                    <small>
                                                        Water bill <span class="font-weight-bold" id="selectedPrincipalTotal">₱ 0.00</span>
                                                        <span class="text-muted mx-1">+</span>
                                                        Late payment fee <span class="text-danger font-weight-bold" id="selectedFeeTotal">₱ 0.00</span>
                                                    </small>
                                                </div>
                                            </div>
                                            <p class="px-3 mb-1 text-muted"><small>All unpaid billings are selected to be paid. Untick or remove a line to pay only some. Payment applies to the oldest bills first; partial amounts are allowed.</small></p>
                                            <div class="table-responsive">
                                                <table class="table table-sm table-hover mb-0">
                                                    <thead>
                                                        <tr>
                                                            <th style="width: 34px;" class="text-center">
                                                                <input type="checkbox" id="selectAllBillings" checked onclick="toggleAllBillings(this)" title="Select all">
                                                            </th>
                                                            <th>Billing #</th>
                                                            <th>Period</th>
                                                            <th>Due Date</th>
                                                            <th>Status</th>
                                                            <th class="text-right">Balance</th>
                                                            <th style="width: 34px;"></th>
                                                        </tr>
                                                    </thead>
                                                    <tbody id="billingsTableBody"></tbody>
                                                    <tfoot>
                                                        <tr class="font-weight-bold bg-light">
                                                            <td colspan="5" class="text-right">Total Selected:</td>
                                                            <td class="text-right text-success" id="billingsFooterTotal">₱ 0.00</td>
                                                            <td></td>
                                                        </tr>
                                                    </tfoot>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group mt-3">
                                    <label for="payment_method">Payment Method <span class="text-danger">*</span></label>
                                    <select id="payment_method" name="payment_method" class="form-control @error('payment_method') is-invalid @enderror" required>
                                        <option value="">-- Select method --</option>
                                        <option value="cash" @selected(old('payment_method', 'cash') === 'cash')>Cash</option>
                                        <option value="check" @selected(old('payment_method') === 'check')>Check</option>
                                        <option value="bank_transfer" @selected(old('payment_method') === 'bank_transfer')>Bank Transfer</option>
                                        <option value="online" @selected(old('payment_method') === 'online')>Online Payment</option>
                                    </select>
                                    @error('payment_method')
                                        <span class="invalid-feedback">{{ $message }}</span>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <label for="reference_number">Reference Number (Check #, Receipt #, etc.)</label>
                                    <input type="text" id="reference_number" name="reference_number" class="form-control @error('reference_number') is-invalid @enderror" value="{{ old('reference_number') }}" placeholder="e.g., CHK123456">
                                    @error('reference_number')
                                        <span class="invalid-feedback">{{ $message }}</span>
                                    @enderror
                                </div>

                                <div class="card card-outline card-warning mb-3">
                                    <div class="card-header py-2">
                                        <h3 class="card-title"><i class="fas fa-file-invoice"></i> Manual Sales Invoice <small class="text-muted">(optional)</small></h3>
                                    </div>
                                    <div class="card-body py-2">
                                        <div class="row">
                                            <div class="col-md-6 form-group">
                                                <label for="sales_invoice_number">Sales Invoice #</label>
                                                <input type="text" id="sales_invoice_number" name="sales_invoice_number" class="form-control @error('sales_invoice_number') is-invalid @enderror" value="{{ old('sales_invoice_number') }}" placeholder="e.g., SI-000123">
                                                @error('sales_invoice_number')
                                                    <span class="invalid-feedback d-block">{{ $message }}</span>
                                                @enderror
                                            </div>
                                            <div class="col-md-6 form-group">
                                                <label for="sales_invoice_date">Sales Invoice Date</label>
                                                <input type="date" id="sales_invoice_date" name="sales_invoice_date" class="form-control @error('sales_invoice_date') is-invalid @enderror" value="{{ old('sales_invoice_date') }}">
                                                @error('sales_invoice_date')
                                                    <span class="invalid-feedback d-block">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
                                        <small class="text-muted">If a manual Sales Invoice was issued for this payment, enter its number and date.</small>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="payment_type">Payment Type <span class="text-danger">*</span></label>
                                    <select id="payment_type" name="payment_type" class="form-control @error('payment_type') is-invalid @enderror" required>
                                        <option value="">-- Select type --</option>
                                        <option value="billing" @selected(old('payment_type', 'billing') === 'billing')>Billing Payment</option>
                                        <option value="installation" @selected(old('payment_type') === 'installation')>Installation Fee</option>
                                        <option value="reconnection" @selected(old('payment_type') === 'reconnection')>Reconnection Fee</option>
                                        <option value="deposit" @selected(old('payment_type') === 'deposit')>Security Deposit</option>
                                        <option value="other" @selected(old('payment_type') === 'other')>Other</option>
                                    </select>
                                    @error('payment_type')
                                        <span class="invalid-feedback">{{ $message }}</span>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <label for="notes">Notes / Remarks</label>
                                    <textarea id="notes" name="notes" class="form-control @error('notes') is-invalid @enderror" rows="2" placeholder="Additional notes...">{{ old('notes') }}</textarea>
                                    @error('notes')
                                        <span class="invalid-feedback">{{ $message }}</span>
                                    @enderror
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <!-- Right Side - Payment Amount -->
                <div class="col-md-6">
                    <div class="card card-success">
                        <div class="card-header">
                            <h3 class="card-title">Payment Amount</h3>
                        </div>
                        <div class="card-body">
                            <div id="selectedBillingInfo" class="alert alert-secondary" style="display: none;">
                                <strong>Paying:</strong> <span id="selectedBillingNumber">-</span>
                                <span class="float-right badge badge-info" id="selectedBillingStatus">-</span>
                            </div>

                            <div class="form-group">
                                <label for="amount" class="text-lg font-weight-bold">Amount to Receive <span class="text-danger">*</span></label>
                                <div class="input-group input-group-lg mb-3">
                                    <span class="input-group-text font-weight-bold">₱</span>
                                    <input type="number" id="amount" name="amount" form="paymentForm" step="0.01" min="0.01" class="form-control text-right font-weight-bold @error('amount') is-invalid @enderror" value="{{ old('amount') }}" placeholder="0.00" required oninput="calculateChange()">
                                </div>
                                <small class="form-text text-muted">
                                    You may enter more than the balance (change will be given) or less (partial payment).
                                </small>
                                @error('amount')
                                    <span class="invalid-feedback d-block">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="card bg-light">
                                <div class="card-body">
                                    <div class="calculation-row mb-2">
                                        <strong>Total Selected:</strong>
                                        <span class="float-right text-danger font-weight-bold" id="displayAmountDue">₱ 0.00</span>
                                    </div>
                                    <div class="calculation-row mb-2">
                                        <strong>Amount Received:</strong>
                                        <span class="float-right font-weight-bold" id="displayAmountReceived">₱ 0.00</span>
                                    </div>
                                    <hr>
                                    <div class="calculation-row" id="changeDiv" style="display: none;">
                                        <strong class="text-lg">Change:</strong>
                                        <span class="float-right text-success font-weight-bold text-lg" id="changeAmount">₱ 0.00</span>
                                    </div>
                                    <div class="calculation-row" id="remainingDiv" style="display: none;">
                                        <strong class="text-lg text-warning">Remaining After Payment:</strong>
                                        <span class="float-right text-warning font-weight-bold text-lg" id="remainingAmount">₱ 0.00</span>
                                    </div>
                                </div>
                            </div>

                            <div class="mt-4">
                                <button type="submit" form="paymentForm" class="btn btn-success btn-lg btn-block">
                                    <i class="fas fa-check"></i> Record Payment
                                </button>
                                <a href="{{ route('payments.index') }}" class="btn btn-secondary btn-lg btn-block mt-2">
                                    <i class="fas fa-times"></i> Cancel
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- Quick Payment Buttons -->
                    <div class="card card-info mt-3">
                        <div class="card-header">
                            <h3 class="card-title">Quick Payment</h3>
                        </div>
                        <div class="card-body">
                            <p class="text-sm text-muted">Set amount to the total of the selected billings:</p>
                            <button type="button" class="btn btn-info btn-block" onclick="setFullAmount()">
                                <i class="fas fa-sync"></i> Full Selected Total
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

{{-- Fee dialogs live outside the payment form: they act on the billing, not
     on the receipt being taken, so they post to their own endpoints. --}}
<div class="modal fade" id="addFeeModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <form method="POST" id="addFeeForm">
            @csrf
            <div class="modal-content">
                <div class="modal-header bg-warning">
                    <h5 class="modal-title"><i class="fas fa-plus-circle me-2"></i>Add Late Payment Fee</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" data-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p class="mb-3">
                        Adding a late payment fee to <strong id="addFeeBillingNumber">-</strong>.
                        Its current balance is <strong id="addFeeCurrentTotal">₱ 0.00</strong>.
                        The fee is charged on the billing — it is not a payment.
                    </p>

                    <div class="mb-3">
                        <label for="fee_amount" class="form-label">Fee Amount <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <span class="input-group-text">₱</span>
                            <input type="number" step="0.01" min="0.01" class="form-control form-control-lg"
                                   id="fee_amount" name="fee_amount" required placeholder="0.00" autocomplete="off">
                        </div>
                    </div>

                    <div class="mb-1">
                        <label for="fee_reason" class="form-label">Reason <small class="text-muted">(optional)</small></label>
                        <textarea class="form-control" id="fee_reason" name="fee_reason" rows="2" maxlength="500"
                                  placeholder="e.g. Paid past the due date"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-warning">
                        <i class="fas fa-plus-circle me-1"></i>Add Fee
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

@can('void-billings')
<div class="modal fade" id="voidFeeModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <form method="POST" id="voidFeeForm">
            @csrf
            <div class="modal-content">
                <div class="modal-header bg-dark text-white">
                    <h5 class="modal-title"><i class="fas fa-ban me-2"></i>Void Late Payment Fee</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" data-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-warning">
                        Removing <strong id="voidFeeAmount">₱ 0.00</strong> of late payment fee from
                        <strong id="voidFeeBillingNumber">-</strong>. The amount comes off what the
                        client owes and stops counting as a fee applied.
                    </div>

                    @if ($hasVoidAuthorizer ?? false)
                        <div class="mb-3">
                            <label for="fee_void_reason" class="form-label">Reason <span class="text-danger">*</span></label>
                            <textarea class="form-control" id="fee_void_reason" name="void_reason" rows="2"
                                      maxlength="500" required placeholder="e.g. Fee charged in error"></textarea>
                        </div>

                        <div class="mb-1">
                            <label for="fee_void_code" class="form-label">Owner Authorization Code <span class="text-danger">*</span></label>
                            <input type="password" class="form-control form-control-lg text-center"
                                   id="fee_void_code" name="void_code" inputmode="numeric"
                                   pattern="[0-9]{6}" maxlength="6" minlength="6"
                                   autocomplete="off" required placeholder="••••••" style="letter-spacing:.5rem;">
                            <small class="form-text text-muted">
                                The company owner's 6-digit code — the same approval a billing void needs.
                            </small>
                        </div>
                    @else
                        <div class="alert alert-danger mb-0">
                            <i class="fas fa-lock me-2"></i>
                            No company owner has set a void authorization code yet, so no fee can be voided.
                        </div>
                    @endif
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" data-dismiss="modal">Cancel</button>
                    @if ($hasVoidAuthorizer ?? false)
                        <button type="submit" class="btn btn-dark"><i class="fas fa-ban me-1"></i>Void Fee</button>
                    @endif
                </div>
            </div>
        </form>
    </div>
</div>
@endcan

<script>
let currentBillings = [];
let selectedTotal = 0;

const clientSearch = document.getElementById('client_search');
const searchResults = document.getElementById('clientSearchResults');
const resultsList = document.getElementById('searchResultsList');
let searchTimeout;

function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text ?? '';
    return div.innerHTML;
}

function formatPeso(value) {
    return '₱ ' + Number(value).toLocaleString('en-PH', {minimumFractionDigits: 2, maximumFractionDigits: 2});
}

if (clientSearch) {
    clientSearch.addEventListener('input', function() {
        clearTimeout(searchTimeout);
        const query = this.value.trim();

        if (query.length < 2) {
            searchResults.style.display = 'none';
            return;
        }

        searchTimeout = setTimeout(() => {
            fetch(`{{ url('api/payments/search-clients') }}?q=${encodeURIComponent(query)}`)
                .then(r => r.json())
                .then(data => {
                    if (data.results && data.results.length > 0) {
                        resultsList.innerHTML = data.results.map((client, idx) => `
                            <a href="#" class="list-group-item list-group-item-action text-decoration-none" onclick="selectClient(event, ${idx})">
                                <strong>${escapeHtml(client.name)}</strong>
                                <small class="d-block text-muted">
                                    Account: ${escapeHtml(client.account_number)} | Meter: ${escapeHtml(client.meter_number || 'N/A')}
                                    | Unpaid billings: ${client.billings.length} | Outstanding: ${formatPeso(client.total_balance)}
                                </small>
                            </a>
                        `).join('');
                        window._searchedClients = data.results;
                        searchResults.style.display = 'block';
                    } else {
                        resultsList.innerHTML = '<div class="p-3 text-muted">No clients found</div>';
                        searchResults.style.display = 'block';
                    }
                })
                .catch(() => {
                    resultsList.innerHTML = '<div class="p-3 text-danger">Error searching clients</div>';
                    searchResults.style.display = 'block';
                });
        }, 300);
    });

    document.addEventListener('click', function(e) {
        if (!clientSearch.contains(e.target) && !searchResults.contains(e.target)) {
            searchResults.style.display = 'none';
        }
    });
}

function selectClient(e, idx) {
    e.preventDefault();
    const client = window._searchedClients[idx];
    searchResults.style.display = 'none';
    clientSearch.value = `${client.name} (${client.account_number})`;
    showClientBillings(client);
}

function showClientBillings(client) {
    currentBillings = client.billings;

    document.getElementById('selectedClientName').textContent = client.name;
    document.getElementById('selectedAccountNumber').textContent = client.account_number;
    document.getElementById('selectedTotalBalance').textContent = formatPeso(client.total_balance);

    const tbody = document.getElementById('billingsTableBody');

    if (client.billings.length === 0) {
        tbody.innerHTML = '<tr><td colspan="7" class="text-center text-muted p-3">No unpaid billings for this client</td></tr>';
    } else {
        // Every unpaid billing starts selected ("pay all"); the cashier can
        // untick or remove lines to pay only a subset.
        // A billing carrying a late payment fee is itemised, so the cashier can
        // tell the customer what is the water bill and what is the penalty.
        // Bills with no fee stay on a single line.
        tbody.innerHTML = client.billings.map(b => {
            const hasFee = Number(b.penalty_due) > 0;

            const mainRow = `
            <tr class="billing-row" id="billing-row-${b.id}" data-balance="${b.balance}" style="cursor: pointer;" onclick="toggleBillingRow(${b.id})">
                <td class="text-center" onclick="event.stopPropagation();">
                    <input type="checkbox" class="billing-check" name="billing_ids[]" value="${b.id}" checked onchange="onSelectionChange()">
                </td>
                <td>${escapeHtml(b.billing_number)}</td>
                <td>${escapeHtml(b.billing_period)}</td>
                <td>${escapeHtml(b.due_date || '-')} ${b.is_overdue ? '<span class="badge badge-danger">Overdue</span>' : ''}</td>
                <td><span class="badge badge-${b.status === 'overdue' ? 'danger' : (b.status === 'partially_paid' ? 'warning' : 'info')}">${escapeHtml(b.status.replace('_', ' '))}</span></td>
                <td class="text-right font-weight-bold">${formatPeso(b.balance)}</td>
                <td class="text-center text-nowrap" onclick="event.stopPropagation();">
                    <button type="button" class="btn btn-sm btn-link text-warning p-0 mr-1" title="Add late payment fee"
                            onclick="openAddFeeModal(${b.id})">
                        <i class="fas fa-plus-circle"></i>
                    </button>
                    @can('void-billings')
                    ${Number(b.voidable_fee) > 0 ? `
                    <button type="button" class="btn btn-sm btn-link text-dark p-0 mr-1" title="Void late payment fee"
                            onclick="openVoidFeeModal(${b.id})">
                        <i class="fas fa-ban"></i>
                    </button>` : ''}
                    @endcan
                    <button type="button" class="btn btn-sm btn-link text-danger p-0" title="Remove this line" onclick="removeBillingLine(${b.id});">
                        <i class="fas fa-times"></i>
                    </button>
                </td>
            </tr>`;

            if (!hasFee) {
                return mainRow;
            }

            const subRows = `
            <tr class="billing-subline billing-subline-${b.id}">
                <td></td>
                <td colspan="4" class="pl-4 text-muted">
                    <i class="fas fa-level-up-alt fa-rotate-90 mr-1"></i>Water bill
                </td>
                <td class="text-right text-muted">${formatPeso(b.principal_due)}</td>
                <td></td>
            </tr>
            <tr class="billing-subline billing-subline-${b.id}">
                <td></td>
                <td colspan="4" class="pl-4 text-danger">
                    <i class="fas fa-level-up-alt fa-rotate-90 mr-1"></i>Late payment fee
                </td>
                <td class="text-right text-danger">${formatPeso(b.penalty_due)}</td>
                <td></td>
            </tr>`;

            return mainRow + subRows;
        }).join('');
    }

    document.getElementById('clientBillings').style.display = 'block';

    const selectAll = document.getElementById('selectAllBillings');
    if (selectAll) selectAll.checked = client.billings.length > 0;

    // Everything selected by default — set the amount to the full total.
    onSelectionChange(true);
}

// A row's checkbox drives whether that billing is paid. Toggling the row
// (outside the checkbox / remove button) flips its checkbox too.
function toggleBillingRow(billingId) {
    const cb = document.querySelector('.billing-check[value="' + billingId + '"]');
    if (!cb) return;
    cb.checked = !cb.checked;
    onSelectionChange();
}

function removeBillingLine(billingId) {
    const cb = document.querySelector('.billing-check[value="' + billingId + '"]');
    if (cb) cb.checked = false;
    onSelectionChange();
}

function toggleAllBillings(master) {
    document.querySelectorAll('.billing-check').forEach(cb => { cb.checked = master.checked; });
    onSelectionChange();
}

function getSelectedBillings() {
    const ids = Array.from(document.querySelectorAll('.billing-check:checked')).map(cb => Number(cb.value));
    return currentBillings.filter(b => ids.includes(b.id));
}

// Recompute the selected total, refresh the on-screen figures, and (when
// requested, e.g. after a selection change) sync the amount field to it.
function onSelectionChange(syncAmount = true) {
    const selected = getSelectedBillings();
    selectedTotal = Math.round(selected.reduce((sum, b) => sum + Number(b.balance), 0) * 100) / 100;

    // Grey out deselected rows and keep the "select all" box in sync.
    document.querySelectorAll('.billing-check').forEach(cb => {
        const row = document.getElementById('billing-row-' + cb.value);
        if (row) row.classList.toggle('text-muted', !cb.checked);
        if (row) row.classList.toggle('billing-row-excluded', !cb.checked);
        // The itemised water-bill / late-fee lines follow their billing
        document.querySelectorAll('.billing-subline-' + cb.value).forEach(sub => {
            sub.classList.toggle('billing-row-excluded', !cb.checked);
        });
    });
    const boxes = document.querySelectorAll('.billing-check');
    const selectAll = document.getElementById('selectAllBillings');
    if (selectAll) selectAll.checked = boxes.length > 0 && selected.length === boxes.length;

    document.getElementById('selectedToPay').textContent = formatPeso(selectedTotal);
    document.getElementById('selectedCountBadge').textContent = selected.length + (selected.length === 1 ? ' billing' : ' billings');

    // Show how much of the selected total is penalty, so the cashier can say
    // what the customer is actually paying for.
    const feeTotal = Math.round(selected.reduce((sum, b) => sum + Number(b.penalty_due || 0), 0) * 100) / 100;
    const feeLine = document.getElementById('selectedFeeBreakdown');
    if (feeLine) {
        if (feeTotal > 0) {
            document.getElementById('selectedPrincipalTotal').textContent = formatPeso(Math.round((selectedTotal - feeTotal) * 100) / 100);
            document.getElementById('selectedFeeTotal').textContent = formatPeso(feeTotal);
            feeLine.style.display = '';
        } else {
            feeLine.style.display = 'none';
        }
    }
    document.getElementById('billingsFooterTotal').textContent = formatPeso(selectedTotal);
    document.getElementById('displayAmountDue').textContent = formatPeso(selectedTotal);

    const info = document.getElementById('selectedBillingInfo');
    if (selected.length > 0) {
        info.style.display = 'block';
        document.getElementById('selectedBillingNumber').textContent = selected.length === 1
            ? selected[0].billing_number + ' (' + selected[0].billing_period + ')'
            : selected.length + ' billings';
        document.getElementById('selectedBillingStatus').textContent = selected.length === 1
            ? selected[0].status.replace('_', ' ')
            : 'multiple';
    } else {
        info.style.display = 'none';
    }

    if (syncAmount) {
        document.getElementById('amount').value = selectedTotal > 0 ? selectedTotal.toFixed(2) : '';
    }
    calculateChange();
}

function setFullAmount() {
    if (selectedTotal <= 0) {
        alert('Please select at least one billing first');
        return;
    }
    document.getElementById('amount').value = selectedTotal.toFixed(2);
    calculateChange();
}

function calculateChange() {
    const amountReceived = parseFloat(document.getElementById('amount').value) || 0;
    document.getElementById('displayAmountReceived').textContent = formatPeso(amountReceived);

    const changeDiv = document.getElementById('changeDiv');
    const remainingDiv = document.getElementById('remainingDiv');

    if (selectedTotal <= 0 || amountReceived <= 0) {
        changeDiv.style.display = 'none';
        remainingDiv.style.display = 'none';
        return;
    }

    const difference = amountReceived - selectedTotal;

    if (difference >= 0) {
        changeDiv.style.display = 'block';
        remainingDiv.style.display = 'none';
        document.getElementById('changeAmount').textContent = formatPeso(difference);
    } else {
        changeDiv.style.display = 'none';
        remainingDiv.style.display = 'block';
        document.getElementById('remainingAmount').textContent = formatPeso(Math.abs(difference));
    }
}

// Require a billing selection before submitting, and always ask about the
// Sales Invoice when none was entered (it is optional, but must be confirmed).
document.getElementById('paymentForm').addEventListener('submit', function(e) {
    const selectedCount = document.querySelectorAll('.billing-check:checked').length;
    if (selectedCount === 0) {
        e.preventDefault();
        alert('Please search for a client and select at least one billing to pay.');
        return;
    }

    const siNumber = document.getElementById('sales_invoice_number').value.trim();
    const siDate = document.getElementById('sales_invoice_date').value;

    if (siNumber && !siDate) {
        e.preventDefault();
        alert('Please enter the Sales Invoice date.');
        document.getElementById('sales_invoice_date').focus();
        return;
    }

    if (!siNumber) {
        if (!confirm('No Sales Invoice was entered.\n\nDo you want to continue recording this payment WITHOUT a Sales Invoice?')) {
            e.preventDefault();
            document.getElementById('sales_invoice_number').focus();
        }
    }
});

// --- Late payment fee actions -------------------------------------------
// These act on the billing, not on the receipt, so they post to their own
// forms outside the payment form and come back to the POS with the account
// reloaded.
function billingById(id) {
    return (currentBillings || []).find(b => Number(b.id) === Number(id));
}

function openAddFeeModal(billingId) {
    const b = billingById(billingId);
    if (!b) return;
    document.getElementById('addFeeForm').action = '{{ url('billings') }}/' + billingId + '/late-fee';
    document.getElementById('addFeeBillingNumber').textContent = b.billing_number;
    document.getElementById('addFeeCurrentTotal').textContent = formatPeso(b.balance);
    document.getElementById('fee_amount').value = '';
    document.getElementById('fee_reason').value = '';
    showModal('addFeeModal');
}

@can('void-billings')
function openVoidFeeModal(billingId) {
    const b = billingById(billingId);
    if (!b) return;
    document.getElementById('voidFeeForm').action = '{{ url('billings') }}/' + billingId + '/late-fee/void';
    document.getElementById('voidFeeBillingNumber').textContent = b.billing_number;
    document.getElementById('voidFeeAmount').textContent = formatPeso(b.voidable_fee);
    const code = document.getElementById('fee_void_code');
    const reason = document.getElementById('fee_void_reason');
    if (code) code.value = '';
    if (reason) reason.value = '';
    showModal('voidFeeModal');
}
@endcan

function showModal(id) {
    const el = document.getElementById(id);
    if (!el) return;
    // Angle turns .wrapper and .section-container into stacking contexts while
    // a modal is open, so a dialog left inside the page content paints below
    // Bootstrap's body-level backdrop - the dark overlay then covers the whole
    // site with the dialog stuck behind it. Re-parent to body before showing.
    if (el.parentNode !== document.body) {
        document.body.appendChild(el);
    }
    if (window.bootstrap && window.bootstrap.Modal) {
        window.bootstrap.Modal.getOrCreateInstance(el).show();
    } else if (window.jQuery && window.jQuery.fn.modal) {
        window.jQuery(el).modal('show');
    }
}

document.addEventListener('DOMContentLoaded', function () {
    const code = document.getElementById('fee_void_code');
    if (code) {
        code.addEventListener('input', function () {
            this.value = this.value.replace(/\D/g, '').slice(0, 6);
        });
    }
});

// Arriving via a "Pay" button on a billing: load that client's whole account
// — every unpaid billing, itemised into water charges and late payment fee —
// so the cashier can settle all of it, not just the bill they clicked.
document.addEventListener('DOMContentLoaded', function() {
    @if($selectedClient)
        const client = @json($selectedClient);
        clientSearch.value = `${client.name} (${client.account_number})`;
        showClientBillings(client);
    @endif
});
</script>

<style>
.info-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
}

.calculation-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    font-size: 1.1rem;
}

.input-group-lg .input-group-text {
    font-size: 1.5rem;
    padding: 10px 15px;
}

.input-group-lg .form-control {
    font-size: 1.5rem;
    padding: 10px 15px;
}

.btn-lg {
    font-size: 1.2rem;
    padding: 12px;
}

.billing-row:hover {
    background-color: #f0f8ff;
}

.billing-row-excluded td:not(:first-child):not(:last-child) {
    text-decoration: line-through;
    opacity: 0.6;
}

/* Itemised water-bill / late-fee lines sit under their billing */
.billing-subline td {
    border-top: none;
    padding-top: 2px;
    padding-bottom: 2px;
    font-size: 0.875rem;
    background-color: #fbfbfb;
}
</style>
@endsection