<x-app-layout>
    <x-slot name="header">
        <div class="rounded-2xl border border-emerald-200/70 bg-gradient-to-r from-emerald-50 to-green-50 px-5 py-4">
            <h2 class="text-xl font-semibold leading-tight text-emerald-900">
                Edit {{ $truck->number }}
            </h2>
        </div>
    </x-slot>

    <div class="py-8">
        <div class="mx-auto max-w-2xl px-4 sm:px-6 lg:px-8">
            <div class="overflow-hidden rounded-2xl border border-emerald-200/70 bg-white p-8 shadow-sm">
                <form method="POST" action="{{ route('owner.trucks.update', $truck) }}">
                    @csrf
                    @method('PUT')

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                        <div>
                            <x-input-label for="number" :value="__('Truck Number')" />
                            <x-text-input id="number" class="block mt-1 w-full" type="text" name="number" :value="$truck->number" required autofocus />
                            <x-input-error :messages="$errors->get('number')" class="mt-2" />
                        </div>

                        <div>
                            <x-input-label for="type" :value="__('Type')" />
                            <x-text-input id="name" class="block mt-1 w-full" type="text" name="name" :value="$truck->name" placeholder="Truck Name" required />
                            <x-input-error :messages="$errors->get('name')" class="mt-2" />
                        </div>

                        <div>
                            <x-input-label for="equipment_number" :value="__('Equipment Number')" />
                            <x-text-input id="equipment_number" class="block mt-1 w-full" type="text" name="equipment_number" :value="$truck->equipment_number" required />
                            <x-input-error :messages="$errors->get('equipment_number')" class="mt-2" />
                        </div>

                        <div>
                            <x-input-label for="fuel_cost_per_mile" :value="__('Fuel Cost per Mile')" />
                            <x-text-input id="fuel_cost_per_mile" class="block mt-1 w-full" type="number" step="0.01" name="fuel_cost_per_mile" :value="$truck->fuel_cost_per_mile" required />
                            <x-input-error :messages="$errors->get('fuel_cost_per_mile')" class="mt-2" />
                        </div>
                    </div>

                    <div class="flex items-center gap-4">
                        <x-primary-button class="bg-emerald-600 hover:bg-emerald-700 focus:bg-emerald-700 active:bg-emerald-800 focus:ring-emerald-500">
                            {{ __('Update Truck') }}
                        </x-primary-button>
                        <a href="{{ route('owner.trucks.index') }}" class="text-emerald-700 hover:text-emerald-900">
                            Cancel
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</x-app-layout>

