@extends('layouts.app')
@section('title', 'Record payment')

@section('content')
    <div class="page-head">
        <div><h1>Record a payment</h1><p>Allocate against outstanding invoices or park as account credit.</p></div>
        <a href="{{ route('payments.index') }}" class="btn secondary">&larr; Back to payments</a>
    </div>

    <form method="POST" action="{{ route('payments.store') }}">
        @csrf
        <div class="card">
            <div class="card-head"><h3>Payment details</h3></div>
            <div class="card-body">
                <div class="form-grid">
                    <div class="field span-2">
                        <label>Customer <span class="req">*</span></label>
                        <select name="customer_id" id="customer-select" required>
                            <option value="">Select a customer…</option>
                            @foreach ($customers as $customer)
                                <option value="{{ $customer->id }}" data-balance="{{ $customer->outstanding }}"
                                        @selected(old('customer_id', request('customer')) == $customer->id)>
                                    {{ $customer->customer_number }} — {{ $customer->display_name }}
                                    @if ($customer->outstanding > 0) ({{ money($customer->outstanding, $customer->currency) }} due) @endif
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="field">
                        <label>Amount <span class="req">*</span></label>
                        <input type="number" name="amount" step="0.01" min="0.01" required value="{{ old('amount') }}"
                               id="amount-input">
                        <span class="hint" id="balance-hint"></span>
                    </div>
                    <div class="field">
                        <label>Payment date <span class="req">*</span></label>
                        <input type="date" name="paid_at" required value="{{ old('paid_at', now()->toDateString()) }}">
                    </div>
                    <div class="field">
                        <label>Method <span class="req">*</span></label>
                        <select name="method" required>
                            @foreach (['mobile_money','bank_transfer','cash','card','cheque','voucher','credit_note'] as $m)
                                <option value="{{ $m }}" @selected(old('method', 'mobile_money') === $m)>{{ title_case_words($m) }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="field">
                        <label>Reference / transaction ID</label>
                        <input type="text" name="reference" value="{{ old('reference') }}" class="mono"
                               placeholder="e.g. MP240910.1234.A12345">
                        <span class="hint">Leave blank to auto-generate.</span>
                    </div>
                    <div class="field">
                        <label>Payer reference</label>
                        <input type="text" name="payer_reference" value="{{ old('payer_reference') }}"
                               placeholder="Sender name or phone">
                    </div>
                    <div class="field">
                        <label>Gateway fee</label>
                        <input type="number" name="fee_amount" step="0.01" min="0" value="{{ old('fee_amount', 0) }}">
                    </div>
                    <div class="field full">
                        <label>Notes</label>
                        <textarea name="notes" rows="2" placeholder="Any context for the payment…"></textarea>
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-head">
                <h3>Allocate to invoices</h3>
                <span class="sub">Tick the invoices this payment should settle</span>
            </div>
            <div class="card-body">
                <div id="invoice-list">
                    <div class="empty">
                        <span class="ico">&#128196;</span>
                        <strong>Select a customer first</strong>
                        <p class="small mb-0">Outstanding invoices will load here for allocation.</p>
                    </div>
                </div>
                <label class="check mt-1">
                    <input type="checkbox" name="allocate_all" value="1" checked>
                    Apply any surplus to the oldest unpaid invoices
                </label>
            </div>
        </div>

        <div class="flex-between">
            <a href="{{ route('payments.index') }}" class="btn secondary">Cancel</a>
            <button type="submit" class="btn">Record payment</button>
        </div>
    </form>
@endsection

@push('scripts')
<script>
(function () {
    var select = document.getElementById('customer-select');
    var hint = document.getElementById('balance-hint');
    var list = document.getElementById('invoice-list');

    if (!select) { return; }

    function refresh() {
        var opt = select.options[select.selectedIndex];
        var balance = opt ? parseFloat(opt.getAttribute('data-balance') || '0') : 0;
        if (!opt || !opt.value) { hint.textContent = ''; return; }
        hint.textContent = balance > 0
            ? 'Outstanding on this account: ' + balance.toFixed(2)
            : 'This account has no outstanding balance — the payment becomes account credit.';

        list.innerHTML = balance > 0
            ? '<p class="small muted">Open invoices load on save; the oldest unpaid invoices are settled first. ' +
              'Untick "apply surplus" to hold the remainder as account credit.</p>'
            : '<p class="small muted">No open invoices. The full amount will be held as account credit for future billing.</p>';
    }

    select.addEventListener('change', refresh);
    refresh();
})();
</script>
@endpush