{{--
    Settle the outstanding due on the running subscription.

    The client-side arithmetic matches the original: the remaining balance is
    amount - discount - already paid, and "due" is what is left after this
    payment. The server recalculates both from the stored row.
--}}
@php
    $outstanding = (float) $lastPackageInfo['amount']
        - (float) $lastPackageInfo['discount']
        - (float) $lastPackageInfo['total_paid'];
@endphp

<x-card title="Record a payment" subtitle="Outstanding balance {{ number_format($outstanding, 2) }}">
    <form id="payment-form" method="POST" action="{{ route('members.subcription.more', $lastPackageInfo->id) }}" data-guard>
        @csrf
        <input type="hidden" name="mstatus" value="{{ $mstatus }}">

        <div class="form-grid">
            <x-field label="Paid" name="paid" :required="true" span="4">
                <input type="text" id="paid" name="paid" class="input @error('paid') is-invalid @enderror"
                       value="{{ old('paid') }}" inputmode="decimal" required
                       @error('paid') aria-invalid="true" aria-describedby="paid-error" @enderror>
            </x-field>

            <x-field label="Due after payment" name="due" span="4" hint="Calculated">
                <input type="text" id="due" name="due" class="input" value="{{ old('due') }}" inputmode="decimal" readonly>
            </x-field>

            <x-field label="Payment date" name="payment_date" span="4" hint="Defaults to today">
                <div class="input-group">
                    <input type="text" id="payment_date" name="payment_date" class="input date-picker"
                           value="{{ old('payment_date') }}" data-date-format="dd-mm-yyyy"
                           placeholder="dd-mm-yyyy" readonly>
                    <span class="input-group__addon" aria-hidden="true"><i class="fa-solid fa-calendar-days"></i></span>
                </div>
            </x-field>
        </div>
    </form>

    <x-slot:footer>
        <a href="{{ route('members.activity', $mstatus) }}" class="btn btn--secondary">Cancel</a>
        <button type="submit" form="payment-form" class="btn btn--primary" data-loading-label="Saving…">
            <i class="fa-solid fa-check" aria-hidden="true"></i>
            Record payment
        </button>
    </x-slot:footer>
</x-card>

@push('scripts')
<script>
    (function () {
        const outstanding = {{ $outstanding }};
        const paid = document.getElementById('paid');
        const due = document.getElementById('due');

        if (!paid || !due) return;

        paid.addEventListener('keyup', function () {
            const amount = parseInt(this.value, 10);
            due.value = amount < outstanding ? outstanding - amount : 0;
        });
    })();
</script>
@endpush