@extends('layouts.admin')
@section('title', $vehicle->name)
@section('header-back')<a href="{{ route('admin.vehicles.index') }}" class="inline-flex items-center gap-2 rounded-xl border border-slate-200 bg-white px-3.5 py-2 text-sm font-semibold text-slate-600 shadow-sm hover:bg-blue-50"><svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25"><path d="m15 18-6-6 6-6"/></svg>Back</a>@endsection
@section('header-title', $vehicle->name)
@section('content')
    @php
        $statusColors = ['available' => 'bg-emerald-400/20 text-emerald-100 ring-emerald-300/30', 'reserved' => 'bg-amber-400/20 text-amber-100 ring-amber-300/30', 'on_trip' => 'bg-blue-300/20 text-blue-100 ring-blue-200/30', 'under_maintenance' => 'bg-orange-400/20 text-orange-100 ring-orange-300/30', 'inactive' => 'bg-white/15 text-white/80 ring-white/20'];
        $vehicleImages = collect([$vehicle->image_path, $vehicle->image_path_2, $vehicle->image_path_3, $vehicle->image_path_4])->filter();
        $complianceDocuments = [
            ['Insurance', $vehicle->insurance_expiry, $vehicle->insurance_document_path],
            ['Permit', $vehicle->permit_expiry, $vehicle->permit_document_path],
            ['Fitness certificate', $vehicle->fitness_expiry, $vehicle->fitness_document_path],
            ['Pollution certificate', $vehicle->pollution_expiry, $vehicle->pollution_document_path],
        ];
    @endphp
    <div class="vehicle-details-page space-y-6">
        <section class="overflow-hidden rounded-2xl border border-emerald-100 bg-white shadow-sm"><div class="bg-gradient-to-r from-emerald-700 to-teal-600 px-6 py-6 text-white lg:px-8"><div class="flex flex-col justify-between gap-5 sm:flex-row sm:items-center"><div class="flex items-center gap-4">@if($vehicle->image_path)<img src="{{ asset('vehicle-media/' . $vehicle->image_path) }}" alt="{{ $vehicle->name }}" class="size-20 rounded-2xl object-cover ring-2 ring-white/30">@else<span class="grid size-16 place-items-center rounded-2xl bg-white/15 ring-1 ring-white/25"><svg class="size-8" 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>@endif<div><div class="flex flex-wrap items-center gap-2"><p class="font-bold uppercase tracking-wide">{{ $vehicle->registration_number }}</p><span class="rounded-full px-2.5 py-1 text-xs font-bold ring-1 {{ $statusColors[$vehicle->status] }}">{{ str($vehicle->status)->replace('_', ' ')->title() }}</span></div><p class="mt-2 text-sm text-emerald-100">{{ $vehicle->vehicle_type }} · {{ trim($vehicle->brand.' '.$vehicle->model) ?: 'Brand/model not provided' }}</p><p class="mt-1 text-xs text-emerald-200">{{ $vehicle->seating_capacity }} seats</p></div></div><a href="{{ route('admin.vehicles.edit', $vehicle) }}" class="inline-flex items-center justify-center gap-2 rounded-xl bg-white px-4 py-2.5 text-sm font-bold text-emerald-700 shadow-lg"><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>Edit vehicle</a></div></div>
            <div class="grid divide-y divide-slate-100 sm:grid-cols-4 sm:divide-x sm:divide-y-0"><div class="px-6 py-4"><p class="text-xs uppercase tracking-wide text-slate-400">Current reading</p><p class="mt-1 font-bold text-slate-800">{{ number_format($vehicle->current_km) }} km</p></div><div class="px-6 py-4"><p class="text-xs uppercase tracking-wide text-slate-400">Seating capacity</p><p class="mt-1 font-bold text-slate-800">{{ $vehicle->seating_capacity }} seats</p></div><div class="px-6 py-4"><p class="text-xs uppercase tracking-wide text-slate-400">Buy date</p><p class="mt-1 font-bold text-slate-800">{{ $vehicle->buy_date ? $vehicle->buy_date->format('d M Y') : 'Not set' }}</p></div><div class="px-6 py-4"><p class="text-xs uppercase tracking-wide text-slate-400">Last updated</p><p class="mt-1 font-bold text-slate-800">{{ $vehicle->updated_at->format('d M Y, h:i A') }}</p></div></div>
        </section>
        <section class="overflow-hidden rounded-2xl border border-amber-100 bg-white shadow-sm">
            <div class="border-b border-amber-100 bg-amber-50/60 px-6 py-5">
                <h2 class="font-bold text-slate-900">Compliance documents</h2>
                <p class="mt-1 text-xs text-slate-500">Vehicle certificates and expiry dates</p>
            </div>
            <div class="grid gap-4 p-6 sm:grid-cols-2 xl:grid-cols-4">
                @foreach($complianceDocuments as [$label, $expiry, $path])
                    @php
                        $isExpired = $expiry && $expiry->isPast();
                        $expiresSoon = $expiry && ! $isExpired && now()->diffInDays($expiry, false) <= 30;
                    @endphp
                    <article class="rounded-2xl border border-slate-200 bg-slate-50/60 p-5">
                        <div class="flex items-start justify-between gap-3">
                            <span class="grid size-10 place-items-center rounded-xl bg-amber-100 text-amber-700"><svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 2h9l5 5v15H6z"/><path d="M14 2v6h6M9 13h6M9 17h6"/></svg></span>
                            @if($expiry)
                                <span class="rounded-full px-2.5 py-1 text-xs font-bold {{ $isExpired ? 'bg-red-100 text-red-700' : ($expiresSoon ? 'bg-amber-100 text-amber-700' : 'bg-emerald-100 text-emerald-700') }}">{{ $isExpired ? 'Expired' : ($expiresSoon ? 'Expiring soon' : 'Valid') }}</span>
                            @endif
                        </div>
                        <h3 class="mt-4 font-bold text-slate-900">{{ $label }}</h3>
                        <p class="mt-1 text-sm text-slate-500">{{ $expiry ? 'Expires '.$expiry->format('d M Y') : 'Expiry date not added' }}</p>
                        @if($path)
                            <a href="{{ asset('vehicle-media/' . $path) }}" target="_blank" rel="noopener" class="mt-4 inline-flex items-center gap-1.5 text-sm font-bold text-blue-600 hover:text-blue-700">
                                <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6S2 12 2 12Z"/><circle cx="12" cy="12" r="2.5"/></svg>View document
                            </a>
                        @else
                            <p class="mt-4 text-sm font-semibold text-slate-400">No document uploaded</p>
                        @endif
                    </article>
                @endforeach
            </div>
        </section>
        <div class="grid gap-6 lg:grid-cols-2">
            <section class="overflow-hidden rounded-2xl border border-violet-100 bg-white shadow-sm"><div class="border-b border-violet-100 bg-violet-50/60 px-6 py-5"><h2 class="font-bold text-slate-900">Vehicle images</h2><p class="mt-1 text-xs text-slate-500">Main image and any optional gallery photos</p></div>@if($vehicleImages->isNotEmpty())<div class="grid gap-4 p-6 md:grid-cols-2">@foreach($vehicleImages as $imagePath)<img src="{{ asset('vehicle-media/' . $imagePath) }}" alt="{{ $vehicle->name }}" class="aspect-video w-full rounded-2xl object-cover">@endforeach</div>@else<div class="grid aspect-video place-items-center text-center text-slate-400"><div><svg class="mx-auto size-10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M5 17h14M5 17l-2-5 2-5h14l2 5-2 5"/></svg><p class="mt-2 text-sm">No vehicle image uploaded</p></div></div>@endif</section>
            <section class="rounded-2xl border border-amber-100 bg-amber-50/40 p-6"><h2 class="font-bold text-slate-900">Vehicle notes</h2><p class="mt-3 whitespace-pre-line text-sm leading-6 text-slate-700">{{ $vehicle->notes ?: 'No notes have been added.' }}</p></section>
        </div>
    </div>
@endsection