<x-layouts::app :title="__('Edit Payment')">
    <div class="max-w-3xl mx-auto">
        <flux:card>
            <flux:heading size="lg">Payment Form</flux:heading>
            <form action="{{ route('payments.update', $payment->id) }}" method="POST" class="mt-6 space-y-6">
                @csrf
                @method('PUT')

                <div>
                    <label for="student_id" class="mb-2 block text-sm font-semibold text-slate-700">Student</label>
                    <select id="student_id" name="student_id" required class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 focus:border-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-100 @error('student_id') border-rose-500 @enderror">
                        <option value="">-- Select Student --</option>
                        @foreach($students as $s)
                            <option value="{{ $s->id }}" {{ old('student_id', $payment->student_id) == $s->id ? 'selected' : '' }}>{{ $s->name }} ({{ $s->class }})</option>
                        @endforeach
                    </select>
                    @error('student_id')<p class="mt-2 text-sm text-rose-600">{{ $message }}</p>@enderror
                </div>

                <div>
                    <label for="destination" class="mb-2 block text-sm font-semibold text-slate-700">Destination</label>
                    <select id="destination" name="destination" required class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 focus:border-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-100 @error('destination') border-rose-500 @enderror">
                        <option value="">-- Select Destination --</option>
                        @foreach($destinations as $d)
                            <option value="{{ $d->name }}" {{ old('destination', $payment->destination) == $d->name ? 'selected' : '' }}>{{ $d->name }} ({{ number_format($d->fare) }} RWF)</option>
                        @endforeach
                    </select>
                    @error('destination')<p class="mt-2 text-sm text-rose-600">{{ $message }}</p>@enderror
                </div>

                <div class="grid gap-6 lg:grid-cols-2">
                    <div>
                        <label for="term" class="mb-2 block text-sm font-semibold text-slate-700">Term</label>
                        <input id="term" name="term" type="text" value="{{ old('term', $payment->term) }}" required class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 focus:border-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-100 @error('term') border-rose-500 @enderror" />
                        @error('term')<p class="mt-2 text-sm text-rose-600">{{ $message }}</p>@enderror
                    </div>

                    <div>
                        <label for="amount" class="mb-2 block text-sm font-semibold text-slate-700">Amount (RWF)</label>
                        <input id="amount" name="amount" type="number" step="0.01" value="{{ old('amount', $payment->amount) }}" required class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 focus:border-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-100 @error('amount') border-rose-500 @enderror" />
                        @error('amount')<p class="mt-2 text-sm text-rose-600">{{ $message }}</p>@enderror
                    </div>
                </div>

                <div>
                    <label for="payment_date" class="mb-2 block text-sm font-semibold text-slate-700">Payment Date</label>
                    <input id="payment_date" name="payment_date" type="date" value="{{ old('payment_date', $payment->payment_date) }}" required class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 focus:border-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-100 @error('payment_date') border-rose-500 @enderror" />
                    @error('payment_date')<p class="mt-2 text-sm text-rose-600">{{ $message }}</p>@enderror
                </div>

                <div class="flex flex-col gap-3 lg:flex-row lg:justify-end">
                    <a href="{{ route('payments.index') }}" class="inline-flex items-center justify-center rounded-xl border border-slate-200 bg-slate-100 px-5 py-3 text-sm font-semibold text-slate-700 hover:bg-slate-200">Cancel</a>
                    <button type="submit" class="inline-flex items-center justify-center rounded-xl bg-indigo-600 px-5 py-3 text-sm font-semibold text-white hover:bg-indigo-700">Update Payment</button>
                </div>
            </form>
        </flux:card>
    </div>
</x-layouts::app>
