<x-layouts::app :title="__('Edit Payment')">
    <div class="max-w-3xl mx-auto space-y-6">
        <flux:card class="p-6">
            <div class="space-y-3">
                <flux:heading size="lg">{{ __('Edit Payment') }}</flux:heading>
                <flux:text variant="subtle">{{ __('Update the payment details before saving.') }}</flux:text>
            </div>

            <form action="{{ route('payments.update', $payment->id) }}" method="POST" class="mt-6 space-y-6">
                @csrf
                @method('PUT')

                <div>
                    <x-input-label for="student_id" :value="__('Student')" />
                    <select id="student_id" name="student_id" class="border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm block mt-1 w-full" required>
                        <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>
                    <x-input-error :messages="$errors->get('student_id')" class="mt-2" />
                </div>

                <div>
                    <x-input-label for="destination" :value="__('Destination')" />
                    <select id="destination" name="destination" class="border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm block mt-1 w-full" required>
                        <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>
                    <x-input-error :messages="$errors->get('destination')" class="mt-2" />
                </div>

                <div>
                    <x-input-label for="term" :value="__('Term')" />
                    <x-text-input id="term" class="block mt-1 w-full" type="text" name="term" :value="old('term', $payment->term)" required />
                    <x-input-error :messages="$errors->get('term')" class="mt-2" />
                </div>

                <div>
                    <x-input-label for="amount" :value="__('Amount (RWF)')" />
                    <x-text-input id="amount" class="block mt-1 w-full" type="number" step="0.01" name="amount" :value="old('amount', $payment->amount)" required />
                    <x-input-error :messages="$errors->get('amount')" class="mt-2" />
                </div>

                <div>
                    <x-input-label for="payment_date" :value="__('Payment Date')" />
                    <x-text-input id="payment_date" class="block mt-1 w-full" type="date" name="payment_date" :value="old('payment_date', $payment->payment_date)" required />
                    <x-input-error :messages="$errors->get('payment_date')" class="mt-2" />
                </div>

                <div class="flex flex-col sm:flex-row sm:items-center gap-4 mt-6">
                    <flux:button type="submit" variant="primary">{{ __('Update Payment') }}</flux:button>
                    <a href="{{ route('payments.index') }}" class="inline-flex items-center justify-center px-4 py-2 bg-slate-100 border border-slate-200 rounded-md font-semibold text-sm text-slate-700 hover:bg-slate-200 transition">{{ __('Cancel') }}</a>
                </div>
            </form>
        </flux:card>
    </div>
</x-layouts::app>
