<x-layouts::app :title="__('Edit Destination')">
    <div class="max-w-3xl mx-auto">
        <flux:card>
            <div class="space-y-4">
                <flux:heading size="lg">{{ __('Edit Destination') }}</flux:heading>
                <flux:text variant="subtle">{{ __('Update the destination details and fare.') }}</flux:text>
            </div>

            <div class="mt-6">
                <form action="{{ route('destinations.update', $destination->id) }}" method="POST">
                    @csrf
                    @method('PUT')

                    <div class="mb-4">
                        <flux:input
                            name="name"
                            :label="__('Destination Name')"
                            :value="old('name', $destination->name)"
                            type="text"
                            required
                            autofocus
                            :placeholder="__('Enter destination name')"
                        />
                        <x-input-error :messages="$errors->get('name')" class="mt-2" />
                    </div>

                    <div class="mb-4">
                        <flux:input
                            name="fare"
                            :label="__('Fare (RWF)')"
                            :value="old('fare', $destination->fare)"
                            type="number"
                            step="0.01"
                            required
                        />
                        <x-input-error :messages="$errors->get('fare')" class="mt-2" />
                    </div>

                    <div class="flex flex-wrap items-center gap-3 mt-6">
                        <x-primary-button>
                            {{ __('Update Destination') }}
                        </x-primary-button>

                        <flux:link :href="route('destinations.index')" wire:navigate>
                            <flux:button type="button" variant="outline" class="px-4 py-2 text-sm">
                                {{ __('Cancel') }}
                            </flux:button>
                        </flux:link>
                    </div>
                </form>
            </div>
        </flux:card>
    </div>
</x-layouts::app>
