<x-app-layout>
    <x-slot name="header">
        <div class="flex items-center gap-3 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 {{ $driver->name }}
            </h2>
            @if ($driverLimit !== null)
                <span class="inline-flex items-center rounded-lg border px-3 py-1 text-sm {{ $remainingDriverSlots > 0 ? 'border-emerald-200 bg-emerald-50 text-emerald-700' : 'border-amber-300 bg-amber-50 text-amber-800 font-semibold' }}">
                    {{ $driverCount }}/{{ $driverLimit }} used
                </span>
            @endif
        </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">
                @if ($driverLimit !== null)
                    <div class="mb-6 rounded-md border px-4 py-3 text-sm {{ $remainingDriverSlots > 0 ? 'border-emerald-200 bg-emerald-50 text-emerald-900' : 'border-amber-300 bg-amber-50 text-amber-800' }}">
                        You are using {{ $driverCount }} of {{ $driverLimit }} allowed drivers. Remaining slots: {{ $remainingDriverSlots }}.
                    </div>
                @else
                    <div class="mb-6 rounded-md border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-900">
                        No driver limit is currently set for your account.
                    </div>
                @endif

                <form method="POST" action="{{ route('owner.drivers.update', $driver) }}">
                    @csrf
                    @method('PUT')

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

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

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

                        <div>
                            <x-input-label for="truck_id" :value="__('Assigned Truck')" />
                            <select id="truck_id" class="mt-1 block w-full rounded-md border-emerald-300 shadow-sm focus:border-emerald-500 focus:ring-emerald-500" name="truck_id">
                                <option value="">No truck assigned</option>
                                @foreach ($trucks as $truck)
                                    <option value="{{ $truck->id }}" {{ $driver->truck_id == $truck->id ? 'selected' : '' }}>
                                        {{ $truck->number }} ({{ $truck->name }})
                                    </option>
                                @endforeach
                            </select>
                            <x-input-error :messages="$errors->get('truck_id')" class="mt-2" />
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                        <div>
                            <x-input-label for="salary_per_mile" :value="__('Salary per Mile (optional)')" />
                            <x-text-input id="salary_per_mile" class="block mt-1 w-full" type="number" step="0.01" name="salary_per_mile" :value="$driver->salary_per_mile" />
                            <x-input-error :messages="$errors->get('salary_per_mile')" class="mt-2" />
                        </div>

                        <div>
                            <x-input-label for="salary_percent" :value="__('Salary % of gross (optional)')" />
                            <x-text-input id="salary_percent" class="block mt-1 w-full" type="number" step="0.01" max="100" name="salary_percent" :value="$driver->salary_percent" />
                            <x-input-error :messages="$errors->get('salary_percent')" 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 Driver') }}
                        </x-primary-button>
                        <a href="{{ route('owner.drivers.index') }}" class="text-emerald-700 hover:text-emerald-900">
                            Cancel
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</x-app-layout>

