<x-app-layout>
    <x-slot name="header">
        <div class="rounded-2xl border border-sky-200/70 bg-gradient-to-r from-sky-50 to-green-50 px-5 py-4">
            <h2 class="text-xl font-semibold leading-tight text-sky-900">{{ __('Fleet') }}</h2>
            <p class="mt-1 text-sm text-sky-700">{{ __('Platform-wide truck listing with assigned company and driver.') }}</p>
        </div>
    </x-slot>

    <div class="py-8">
        <div class="mx-auto max-w-7xl space-y-6 px-4 sm:px-6 lg:px-8">
            <form method="GET" class="rounded-2xl border border-sky-200/70 bg-gradient-to-r from-white to-sky-50/70 p-4 shadow-sm">
                <div class="flex flex-col gap-3 md:flex-row">
                    <input type="text" name="search" value="{{ $search }}" placeholder="{{ __('Search truck number, name, equipment') }}"
                        class="w-full rounded-lg border border-sky-300 bg-white px-4 py-2 text-sm focus:border-sky-500 focus:outline-none focus:ring-2 focus:ring-sky-100">
                    <button type="submit" class="rounded-lg bg-sky-600 px-4 py-2 text-sm font-semibold text-white hover:bg-sky-700">{{ __('Search') }}</button>
                </div>
            </form>

            <div class="overflow-hidden rounded-2xl border border-sky-200/70 bg-white shadow-sm">
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-sky-100">
                        <thead class="bg-sky-50/80">
                            <tr>
                                <th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wide text-sky-700">{{ __('Truck') }}</th>
                                <th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wide text-sky-700">{{ __('Company') }}</th>
                                <th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wide text-sky-700">{{ __('Assigned Driver') }}</th>
                                <th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wide text-sky-700">{{ __('Fuel / Mile') }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-sky-100 bg-white">
                            @forelse ($trucks as $truck)
                                <tr>
                                    <td class="px-6 py-4">
                                        <div class="font-medium text-gray-900">{{ $truck->number }}</div>
                                        <div class="text-sm text-gray-600">{{ $truck->name }}</div>
                                        <div class="text-xs text-sky-700/70">{{ $truck->equipment_number ?? __('No equipment #') }}</div>
                                    </td>
                                    <td class="px-6 py-4 text-sm text-gray-700">{{ $truck->company?->name ?? __('No company') }}</td>
                                    <td class="px-6 py-4 text-sm text-gray-700">{{ $truck->driver?->name ?? __('Unassigned') }}</td>
                                    <td class="px-6 py-4 text-sm font-medium text-sky-700">${{ number_format((float) $truck->fuel_cost_per_mile, 2) }}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="4" class="px-6 py-6 text-center text-sm text-sky-700/80">{{ __('No trucks found.') }}</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                @if ($trucks->hasPages())
                    <div class="border-t border-sky-100 bg-sky-50/50 px-6 py-4">
                        {{ $trucks->links() }}
                    </div>
                @endif
            </div>
        </div>
    </div>
</x-app-layout>
