@extends('layouts.app')

@section('title', 'Vehicles')

@section('content')
    @php
        $money = fn ($v) => \App\Support\Fmt::money2($v);
        $litres1 = fn ($v) => number_format((float) $v, 1);
    @endphp

    <div class="flex flex-col gap-6">
        <div class="flex items-end justify-between gap-3">
            <div>
                <p class="text-xs font-medium text-muted-foreground">Fleet vehicles, drivers and fuel tracking</p>
                <h1 class="text-lg font-semibold">Vehicles</h1>
            </div>
            <div class="flex items-center gap-2">
                <a href="{{ route('transport.vehicles.csv', $filters) }}"
                   class="rounded-lg border border-border bg-card px-3 py-2 text-sm font-medium hover:bg-accent">CSV</a>
                <button type="button" onclick="document.getElementById('vehicle-new').open = true"
                        class="rounded-lg bg-primary px-3 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90">
                    Add Vehicle
                </button>
            </div>
        </div>

        @include('partials.flashes')

        <div class="grid grid-cols-2 gap-3 lg:grid-cols-4">
            @foreach ([
                ['label' => 'Total Vehicles', 'value' => $stats['Total Vehicles']],
                ['label' => 'Assigned to Routes', 'value' => $stats['Assigned to Routes']],
                ['label' => 'Total Seats', 'value' => $stats['Total Seats']],
                ['label' => 'Fuel Entries', 'value' => $stats['Fuel Entries']],
            ] as $stat)
                <div class="rounded-xl border border-border bg-card p-4">
                    <div class="flex flex-col">
                        <span class="text-lg font-semibold leading-tight tabular-nums">{{ $stat['value'] }}</span>
                        <span class="text-xs text-muted-foreground">{{ $stat['label'] }}</span>
                    </div>
                </div>
            @endforeach
        </div>

        <form method="get" action="{{ route('transport.vehicles') }}"
              class="flex flex-wrap items-end gap-3 rounded-xl border border-border bg-card p-3">
            <div class="flex flex-col gap-1.5">
                <label class="text-xs text-muted-foreground">Search</label>
                <input type="search" name="q" value="{{ $filters['q'] }}" placeholder="Search vehicles..."
                       class="h-9 w-64 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
            </div>
            <div class="flex flex-col gap-1.5">
                <label class="text-xs text-muted-foreground">Per Page</label>
                <select name="per_page" class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                    @foreach ([5, 8, 10, 20] as $n)
                        <option value="{{ $n }}" @selected($filters['per_page'] === $n)>{{ $n }} per page</option>
                    @endforeach
                </select>
            </div>
            <button class="h-9 rounded-lg bg-primary px-3 text-sm font-medium text-primary-foreground hover:bg-primary/90">Filter</button>
            <a href="{{ route('transport.vehicles') }}" class="h-9 rounded-lg border border-border px-3 py-2 text-sm hover:bg-accent">Clear</a>
        </form>

        <div class="rounded-xl border border-border bg-card">
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead>
                        <tr class="border-b text-left text-xs uppercase text-muted-foreground">
                            <th class="px-3 py-2 font-medium">Registration</th>
                            <th class="px-3 py-2 font-medium">Type</th>
                            <th class="px-3 py-2 text-right font-medium">Year</th>
                            <th class="px-3 py-2 text-right font-medium">Capacity</th>
                            <th class="px-3 py-2 font-medium">Driver</th>
                            <th class="px-3 py-2 font-medium">Assigned Routes</th>
                            <th class="px-3 py-2 text-right font-medium">Total Fuel (L)</th>
                            <th class="px-3 py-2 text-right font-medium">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($rows as $vehicle)
                            @php
                                $fuel = $vehicle->fuelEntries;
                                $totalL = $fuel->sum('litres');
                                $totalCost = $fuel->sum('amount');
                            @endphp
                            <tr class="border-b last:border-0 hover:bg-accent/40">
                                <td class="px-3 py-2">
                                    <div class="flex flex-col">
                                        <span class="font-medium">{{ $vehicle->registration_no }}</span>
                                        <span class="font-mono text-xs text-muted-foreground">{{ $vehicle->id }}</span>
                                    </div>
                                </td>
                                <td class="px-3 py-2">{{ $vehicle->type }}</td>
                                <td class="px-3 py-2 text-right tabular-nums">{{ $vehicle->year }}</td>
                                <td class="px-3 py-2 text-right tabular-nums">{{ $vehicle->capacity }}</td>
                                <td class="px-3 py-2 text-muted-foreground">{{ $vehicle->driverName() }}</td>
                                <td class="px-3 py-2">
                                    {{ $vehicle->routes->count() > 0 ? $vehicle->routes->pluck('name')->implode(', ') : '—' }}
                                </td>
                                <td class="px-3 py-2 text-right tabular-nums">{{ $litres1($totalL) }}</td>
                                <td class="px-3 py-2">
                                    <div class="flex items-center justify-end gap-1">
                                        <button type="button" onclick="document.getElementById('vehicle-view-{{ $vehicle->id }}').classList.toggle('hidden')"
                                                class="rounded-md border border-border px-2 py-1 text-xs hover:bg-accent">View</button>
                                        <button type="button" onclick="document.getElementById('vehicle-{{ $vehicle->id }}').classList.toggle('hidden')"
                                                class="rounded-md border border-border px-2 py-1 text-xs hover:bg-accent">Edit</button>
                                        <button type="button" onclick="document.getElementById('vehicle-fuel-{{ $vehicle->id }}').classList.toggle('hidden')"
                                                class="rounded-md border border-border px-2 py-1 text-xs hover:bg-accent">Add fuel</button>
                                        <form method="post" action="{{ route('transport.vehicles.destroy', $vehicle) }}"
                                              onsubmit="return confirm('Delete Vehicle {{ $vehicle->registration_no }}?')">
                                            @csrf @method('DELETE')
                                            <button class="rounded-md border border-rose-300 px-2 py-1 text-xs text-rose-700 hover:bg-rose-50">Delete</button>
                                        </form>
                                    </div>
                                </td>
                            </tr>

                            <tr class="hidden" id="vehicle-view-{{ $vehicle->id }}">
                                <td colspan="8" class="bg-muted/30 px-3 py-4">
                                    <div class="rounded-lg border border-border bg-card p-4">
                                        <div class="flex items-start justify-between gap-3">
                                            <div>
                                                <h3 class="font-medium">{{ $vehicle->registration_no }}</h3>
                                                <p class="text-xs text-muted-foreground">
                                                    {{ $vehicle->type }} &middot; {{ $vehicle->year }} &middot;
                                                    {{ $vehicle->capacity }} seats &middot; Driver: {{ $vehicle->driverName() }}
                                                </p>
                                            </div>
                                            <div class="flex flex-wrap items-center gap-1.5">
                                                <span class="rounded-full px-2 py-0.5 text-[10px] font-medium {{ $vehicle->routes->count() > 0 ? 'bg-secondary text-secondary-foreground' : 'border border-border text-foreground' }}">
                                                    {{ $vehicle->routes->count() > 0 ? 'Assigned' : 'Unassigned' }}
                                                </span>
                                                @foreach ($vehicle->routes as $route)
                                                    <span class="rounded-full border border-border px-2 py-0.5 text-[10px] font-medium text-foreground">{{ $route->name }}</span>
                                                @endforeach
                                                <button type="button" onclick="document.getElementById('vehicle-fuel-{{ $vehicle->id }}').classList.toggle('hidden')"
                                                        class="rounded-lg border border-border px-2 py-1 text-xs hover:bg-accent">Add Fuel Entry</button>
                                            </div>
                                        </div>

                                        <div class="mt-3 grid grid-cols-3 gap-3">
                                            @foreach ([
                                                ['label' => 'Total Fuel', 'value' => $litres1($totalL).' L'],
                                                ['label' => 'Total Cost', 'value' => $money($totalCost)],
                                                ['label' => 'Entries', 'value' => $fuel->count()],
                                            ] as $mini)
                                                <div class="rounded-lg border border-border p-3">
                                                    <div class="flex flex-col">
                                                        <span class="text-lg font-semibold leading-tight tabular-nums">{{ $mini['value'] }}</span>
                                                        <span class="text-xs text-muted-foreground">{{ $mini['label'] }}</span>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>

                                        <div class="mt-4 flex items-center gap-2">
                                            <span class="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Fuel History</span>
                                            <span class="h-px flex-1 bg-border"></span>
                                        </div>

                                        <div class="mt-2 grid gap-1">
                                            @forelse ($fuel->sortByDesc('id') as $i => $entry)
                                                @if ($i > 0)<div class="my-1 border-t border-border"></div>@endif
                                                <div class="flex items-center justify-between gap-3 px-1 py-1">
                                                    <div class="flex flex-col">
                                                        <span class="text-sm font-medium">{{ \App\Support\Fmt::day($entry->isoDate()) }}</span>
                                                        <span class="text-xs text-muted-foreground">
                                                            {{ $entry->station ?: '—' }} &middot;
                                                            {{ \App\Support\Fmt::litres($entry->litres) }} L @ {{ $money($entry->price_per_litre) }}
                                                        </span>
                                                    </div>
                                                    <div class="flex items-center gap-2">
                                                        <span class="text-sm font-medium">{{ $money($entry->amount) }}</span>
                                                        <form method="post" action="{{ route('transport.vehicles.fuel.destroy', $entry) }}"
                                                              onsubmit="return confirm('Delete Fuel Entry?')">
                                                            @csrf @method('DELETE')
                                                            <button class="rounded-md border border-rose-300 px-2 py-1 text-xs text-rose-700 hover:bg-rose-50">Delete entry</button>
                                                        </form>
                                                    </div>
                                                </div>
                                            @empty
                                                <p class="px-1 py-2 text-sm text-muted-foreground">No fuel entries recorded for this vehicle.</p>
                                            @endforelse
                                        </div>

                                        <div class="mt-3 flex justify-end">
                                            <button type="button" onclick="document.getElementById('vehicle-view-{{ $vehicle->id }}').classList.add('hidden')"
                                                    class="rounded-lg border border-border px-3 py-1.5 text-xs hover:bg-accent">Close</button>
                                        </div>
                                    </div>
                                </td>
                            </tr>

                            <tr class="hidden" id="vehicle-fuel-{{ $vehicle->id }}">
                                <td colspan="8" class="bg-muted/30 px-3 py-4">
                                    <div class="rounded-lg border border-border bg-card p-4">
                                        <h3 class="font-medium">Add Fuel Entry</h3>
                                        <p class="mb-3 text-xs text-muted-foreground">{{ $vehicle->registration_no }}</p>
                                        @include('transport.partials.fuel-form')
                                    </div>
                                </td>
                            </tr>

                            <tr class="hidden" id="vehicle-{{ $vehicle->id }}">
                                <td colspan="8" class="bg-muted/30 px-3 py-4">
                                    @include('transport.partials.vehicle-form', [
                                        'action' => route('transport.vehicles.update', $vehicle),
                                        'method' => 'PUT',
                                        'prefix' => 'vehicle-'.$vehicle->id,
                                        'row' => $vehicle,
                                        'staff' => $staff,
                                    ])
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="8" class="px-3 py-10 text-center text-sm text-muted-foreground">No vehicles match your filters.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            <div class="flex items-center justify-between border-t px-4 py-2 text-xs text-muted-foreground">
                <span>{{ $rows->count() }} of {{ $all->count() }} vehicles</span>
                <div class="flex items-center gap-2">
                    @if ($rows->onFirstPage())
                        <span class="rounded-md border border-border px-2 py-1 opacity-50">Previous</span>
                    @else
                        <a href="{{ $rows->previousPageUrl() }}" class="rounded-md border border-border px-2 py-1 hover:bg-accent">Previous</a>
                    @endif
                    <span>Page {{ $rows->currentPage() }} of {{ max(1, $rows->lastPage()) }}</span>
                    @if ($rows->hasMorePages())
                        <a href="{{ $rows->nextPageUrl() }}" class="rounded-md border border-border px-2 py-1 hover:bg-accent">Next</a>
                    @else
                        <span class="rounded-md border border-border px-2 py-1 opacity-50">Next</span>
                    @endif
                </div>
            </div>
        </div>

        <details id="vehicle-new" class="rounded-xl border border-border bg-card p-4" @if ($errors->any()) open @endif>
            <summary class="cursor-pointer text-sm font-semibold">Add Vehicle</summary>
            <div class="mt-3">
                <p class="mb-3 text-xs text-muted-foreground">Fields marked * are required.</p>
                @include('transport.partials.vehicle-form', [
                    'action' => route('transport.vehicles.store'),
                    'method' => 'POST',
                    'prefix' => 'vehicle-new',
                    'row' => null,
                    'staff' => $staff,
                ])
            </div>
        </details>
    </div>
@endsection