@extends('layouts.admin')
@section('title', 'Vehicles')
@section('header-title', 'Vehicles')
@section('content')
    <section class="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm">
        <form method="GET" class="flex flex-col gap-3 border-b border-slate-100 p-4 lg:flex-row lg:items-center">
            <label class="flex shrink-0 items-center gap-2 text-sm text-slate-500">Show <select name="per_page" onchange="this.form.submit()" class="rounded-lg border border-slate-200 px-2.5 py-2 text-sm font-semibold text-slate-700 outline-none">@foreach ([10, 25, 50, 100] as $size)<option value="{{ $size }}" @selected((int) request('per_page', 10) === $size)>{{ $size }}</option>@endforeach</select> entries</label>
            <div class="relative flex-1"><svg class="absolute left-3.5 top-1/2 size-4 -translate-y-1/2 text-slate-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg><input name="search" value="{{ request('search') }}" data-live-search autocomplete="off" class="w-full rounded-xl border border-slate-200 py-2.5 pl-10 pr-10 text-sm outline-none focus:border-blue-500 focus:ring-4 focus:ring-blue-100" placeholder="Live search vehicle, registration, type, brand or owner">@if(request('search'))<a href="{{ route('admin.vehicles.index', ['per_page' => request('per_page', 10)]) }}" class="absolute right-3 top-1/2 -translate-y-1/2 text-lg text-slate-400">×</a>@endif</div>
            <a href="{{ route('admin.vehicles.create') }}" class="inline-flex items-center justify-center gap-2 rounded-xl bg-blue-600 px-4 py-2.5 text-sm font-bold text-white shadow-lg shadow-blue-600/20 hover:bg-blue-700"><svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>Add vehicle</a>
        </form>
        @if ($vehicles->isEmpty())
            <div class="grid min-h-80 place-items-center p-8 text-center"><div><span class="mx-auto grid size-14 place-items-center rounded-2xl bg-emerald-50 text-emerald-600"><svg class="size-7" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M5 17h14M5 17l-2-5 2-5h14l2 5-2 5M7 17v2M17 17v2M7 12h.01M17 12h.01"/></svg></span><h2 class="mt-4 font-bold text-slate-900">No vehicles found</h2><p class="mt-1 text-sm text-slate-500">Add the first vehicle to begin managing your fleet.</p></div></div>
        @else
            <div class="overflow-x-auto"><table class="w-full min-w-[1050px] text-left text-sm"><thead class="bg-slate-50 text-xs uppercase tracking-wide text-slate-500"><tr><th class="w-16 px-6 py-4">S.No</th><th class="px-6 py-4">Vehicle</th><th class="px-6 py-4">Type</th><th class="px-6 py-4">Capacity</th><th class="px-6 py-4">Current KM</th><th class="px-6 py-4">Insurance</th><th class="px-6 py-4">Status</th><th class="px-6 py-4 text-right">Actions</th></tr></thead>
                <tbody class="divide-y divide-slate-100">@foreach ($vehicles as $vehicle)
                    @php
                        $expiryDates = collect([
                            $vehicle->insurance_expiry,
                            $vehicle->permit_expiry,
                            $vehicle->fitness_expiry,
                            $vehicle->pollution_expiry,
                        ])->filter();
                        $hasExpiredDocument = $expiryDates->contains(fn ($date) => $date->lt(today()));
                        $hasDocumentExpiringSoon = ! $hasExpiredDocument && $expiryDates->contains(
                            fn ($date) => $date->betweenIncluded(today(), today()->addDays(30))
                        );
                        $rowColor = $hasExpiredDocument
                            ? 'bg-red-100 hover:bg-red-200/80'
                            : ($hasDocumentExpiringSoon ? 'bg-orange-100 hover:bg-orange-200/80' : 'hover:bg-slate-50/70');
                    @endphp
                    <tr class="{{ $rowColor }} transition-colors">
                    <td class="px-6 py-4 font-semibold text-slate-400">{{ $vehicles->firstItem() + $loop->index }}</td>
                    <td class="px-6 py-4"><div class="flex items-center gap-3">@if($vehicle->image_path)<img src="{{ asset('vehicle-media/' . $vehicle->image_path) }}" alt="" class="size-11 rounded-xl object-cover">@else<span class="grid size-11 place-items-center rounded-xl bg-emerald-50 text-emerald-600"><svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M5 17h14M5 17l-2-5 2-5h14l2 5-2 5"/></svg></span>@endif<div><a href="{{ route('admin.vehicles.show', $vehicle) }}" class="font-semibold text-slate-900 hover:text-blue-600">{{ $vehicle->name }}</a><p class="mt-1 text-xs font-semibold uppercase tracking-wide text-slate-500">{{ $vehicle->registration_number }}</p></div></div></td>
                    <td class="px-6 py-4"><p class="font-medium text-slate-700">{{ $vehicle->vehicle_type }}</p><p class="mt-1 text-xs text-slate-500">{{ trim($vehicle->brand.' '.$vehicle->model) ?: '—' }}</p></td>
                    <td class="px-6 py-4 text-slate-600">{{ $vehicle->seating_capacity }} seats</td><td class="px-6 py-4 font-medium text-slate-700">{{ number_format($vehicle->current_km) }} km</td>
                    <td class="px-6 py-4"><span class="{{ $vehicle->insurance_expiry?->isPast() ? 'text-red-600' : 'text-slate-600' }}">{{ $vehicle->insurance_expiry?->format('d M Y') ?: 'Not set' }}</span></td>
                    @php $statusColors = ['available' => 'bg-emerald-50 text-emerald-700', 'reserved' => 'bg-amber-50 text-amber-700', 'on_trip' => 'bg-blue-50 text-blue-700', 'under_maintenance' => 'bg-orange-50 text-orange-700', 'inactive' => 'bg-slate-100 text-slate-600']; @endphp
                    <td class="px-6 py-4"><span class="rounded-full px-2.5 py-1 text-xs font-semibold {{ $statusColors[$vehicle->status] }}">{{ str($vehicle->status)->replace('_', ' ')->title() }}</span></td>
                    <td class="px-6 py-4"><div class="flex justify-end gap-2"><a href="{{ route('admin.vehicles.show', $vehicle) }}" title="View vehicle" class="grid size-9 place-items-center rounded-lg bg-blue-50 text-blue-600 transition hover:bg-blue-100"><svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z"/><circle cx="12" cy="12" r="3"/></svg></a><a href="{{ route('admin.vehicles.edit', $vehicle) }}" title="Edit vehicle" class="grid size-9 place-items-center rounded-lg bg-amber-50 text-amber-600 transition hover:bg-amber-100"><svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 20h9M16.5 3.5a2.12 2.12 0 0 1 3 3L8 18l-4 1 1-4Z"/></svg></a><form method="POST" action="{{ route('admin.vehicles.destroy', $vehicle) }}" onsubmit="return confirm('Delete this vehicle?')">@csrf @method('DELETE')<button title="Delete vehicle" class="grid size-9 place-items-center rounded-lg bg-red-50 text-red-600 transition hover:bg-red-100"><svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18M8 6V4h8v2M19 6l-1 15H6L5 6M10 11v6M14 11v6"/></svg></button></form></div></td>
                </tr>@endforeach</tbody></table></div>
            <div class="flex flex-col items-center justify-between gap-4 border-t border-slate-100 px-6 py-4 sm:flex-row"><p class="text-sm text-slate-500">Showing <b>{{ $vehicles->firstItem() }}</b> to <b>{{ $vehicles->lastItem() }}</b> of <b>{{ $vehicles->total() }}</b> entries</p>@include('admin.partials.pagination', ['paginator' => $vehicles])</div>
        @endif
    </section>
@endsection