@php
    $modalId = 'record-payment-modal-'.$invoice->id;
    $formId = 'record-payment-form-'.$invoice->id;
@endphp

<x-ui.modal id="{{ $modalId }}" title="Record Payment" description="Add a payment transaction to {{ $invoice->invoice_number }}." size="md">
    <form id="{{ $formId }}" method="POST" action="{{ route('admin.invoices.payments.store', $invoice) }}">
        @csrf
        <div class="grid gap-4 sm:grid-cols-2">
            <x-form.input name="amount" label="Payment Amount" type="number" step="0.01" min="0.01" :value="$invoice->balance_due > 0 ? $invoice->balance_due : null" placeholder="70.20" />
            <x-form.input name="paid_at" label="Payment Date" type="date" :value="now()->toDateString()" />
            <x-form.select name="method" label="Payment Method" value="cash" placeholder="Choose method" :options="$paymentMethods" />
            <x-form.select name="status" label="Payment Status" value="paid" :options="\App\Enums\PaymentStatus::options()" />
            <x-form.input name="transaction_id" label="Transaction ID" placeholder="TXN-23942" />
            <x-form.textarea name="note" label="Payment Note" class="sm:col-span-2" placeholder="Optional internal note..." rows="4" />
        </div>
    </form>

    <x-slot:footer>
        <x-ui.button variant="secondary" data-modal-close>Cancel</x-ui.button>
        <x-ui.button type="submit" form="{{ $formId }}">Save Payment</x-ui.button>
    </x-slot:footer>
</x-ui.modal>