@extends('layouts.app')

@section('title', 'Vehicles')
@section('heading', 'Vehicles')

@section('content')
@php
    $bandLabels = ['fresh' => ['30 days or less', 'bg-emerald-500'], 'normal' => ['31 to 60 days', 'bg-sky-500'], 'warning' => ['Approaching alert', 'bg-amber-500'], 'critical' => ['Past alert', 'bg-red-600']];
    $totalAging = max(1, array_sum($aging));
@endphp

{{-- Stock age: one bar, sized by how many unsold vehicles sit in each age band. Each part filters the list. --}}
<section aria-labelledby="aging-h" class="rounded-lg border border-line bg-panel p-4">
    <div class="flex flex-wrap items-baseline justify-between gap-2">
        <h2 id="aging-h" class="text-sm font-semibold">Unsold stock by time in inventory</h2>
        <p class="text-sm text-muted">{{ array_sum($aging) }} {{ Str::plural('vehicle', array_sum($aging)) }}</p>
    </div>
    <div class="mt-3 flex h-3 overflow-hidden rounded-full bg-ground" role="img"
         aria-label="@foreach ($aging as $band => $n){{ $bandLabels[$band][0] }}: {{ $n }}. @endforeach">
        @foreach ($aging as $band => $n)
            @if ($n > 0)<span class="{{ $bandLabels[$band][1] }}" style="width: {{ $n / $totalAging * 100 }}%"></span>@endif
        @endforeach
    </div>
    <ul class="mt-3 flex flex-wrap gap-x-5 gap-y-1 text-sm">
        @foreach ($aging as $band => $n)
            <li>
                <a href="{{ route('vehicles.index', ['aging' => $band]) }}" class="inline-flex items-center gap-2 hover:underline @if (($filters['aging'] ?? null) === $band) font-semibold @endif">
                    <span class="size-2.5 rounded-sm {{ $bandLabels[$band][1] }}"></span>{{ $bandLabels[$band][0] }}: {{ $n }}
                </a>
            </li>
        @endforeach
    </ul>
</section>

<form method="GET" class="mt-4 grid gap-3 sm:grid-cols-2 lg:grid-cols-6" role="search">
    <div class="lg:col-span-2">
        <label for="q" class="mb-1 block text-xs font-medium text-muted">Search stock ID, VIN, plate, make or model</label>
        <input id="q" name="q" value="{{ $filters['q'] ?? '' }}" class="field" autocomplete="off">
    </div>
    <div>
        <label for="status" class="mb-1 block text-xs font-medium text-muted">Status</label>
        <select id="status" name="status" class="field">
            <option value="">All</option>
            @foreach (\App\Enums\VehicleStatus::cases() as $s)
                <option value="{{ $s->value }}" @selected(($filters['status'] ?? null) === $s->value)>{{ $s->label() }}</option>
            @endforeach
        </select>
    </div>
    <div>
        <label for="make_id" class="mb-1 block text-xs font-medium text-muted">Make</label>
        <select id="make_id" name="make_id" class="field">
            <option value="">All</option>
            @foreach ($makes as $make)<option value="{{ $make->id }}" @selected(($filters['make_id'] ?? null) == $make->id)>{{ $make->name }}</option>@endforeach
        </select>
    </div>
    <div>
        <label for="sort" class="mb-1 block text-xs font-medium text-muted">Sort by</label>
        <select id="sort" name="sort" class="field">
            @foreach (['newest' => 'Newest added', 'oldest_stock' => 'Longest in stock', 'price_low' => 'Price, low to high', 'price_high' => 'Price, high to low'] as $k => $label)
                <option value="{{ $k }}" @selected(($filters['sort'] ?? 'newest') === $k)>{{ $label }}</option>
            @endforeach
        </select>
    </div>
    <div class="flex items-end gap-2">
        <button class="btn-primary">Apply filters</button>
        @if (array_filter($filters))<a href="{{ route('vehicles.index') }}" class="btn-quiet">Clear</a>@endif
    </div>
</form>

<div class="mt-4 flex items-center justify-between">
    <p class="text-sm text-muted">{{ $vehicles->total() }} {{ Str::plural('vehicle', $vehicles->total()) }}</p>
    @can('vehicles.create')<a href="{{ route('vehicles.create') }}" class="btn-primary">Add vehicle</a>@endcan
</div>

<form method="GET" action="{{ route('labels.print') }}" target="_blank">
<div class="mt-2 overflow-x-auto rounded-lg border border-line bg-panel">
    <table class="min-w-full text-left text-sm">
        <caption class="sr-only">Vehicles</caption>
        <thead class="border-b border-line bg-ground text-xs text-muted">
            <tr>
                <th scope="col" class="w-8 px-3 py-2"><span class="sr-only">Select for labels</span></th>
                <th scope="col" class="px-3 py-2 font-medium">Stock ID</th>
                <th scope="col" class="px-3 py-2 font-medium">Vehicle</th>
                <th scope="col" class="px-3 py-2 font-medium">Status</th>
                <th scope="col" class="px-3 py-2 font-medium">In inventory</th>
                <th scope="col" class="px-3 py-2 text-right font-medium">Mileage</th>
                <th scope="col" class="px-3 py-2 text-right font-medium">Asking price</th>
                @can('vehicles.view_cost')<th scope="col" class="px-3 py-2 text-right font-medium">Landed cost</th>@endcan
            </tr>
        </thead>
        <tbody class="divide-y divide-line">
            @forelse ($vehicles as $v)
                <tr class="hover:bg-ground/60">
                    <td class="px-3 py-2"><input type="checkbox" name="ids[]" value="{{ $v->id }}" aria-label="Select {{ $v->stock_id }} for a label"></td>
                    <td class="px-3 py-2 font-medium"><a href="{{ route('vehicles.show', $v) }}" class="underline decoration-line underline-offset-2 hover:decoration-ink">{{ $v->stock_id }}</a></td>
                    <td class="px-3 py-2">
                        {{ $v->display_name }}
                        <span class="block text-xs text-muted">{{ $v->vin }} · {{ $v->color }} · {{ config('inventory.transmissions')[$v->transmission] ?? $v->transmission }} · {{ config('inventory.fuel_types')[$v->fuel_type] ?? $v->fuel_type }}</span>
                    </td>
                    <td class="px-3 py-2"><x-status-badge :status="$v->status" /></td>
                    <td class="px-3 py-2"><x-aging-chip :vehicle="$v" /></td>
                    <td class="px-3 py-2 text-right">{{ number_format($v->mileage) }} {{ $v->mileage_unit }}</td>
                    <td class="px-3 py-2 text-right">@include('partials.kes', ['amount' => $v->selling_price])</td>
                    @can('vehicles.view_cost')<td class="px-3 py-2 text-right">@include('partials.kes', ['amount' => $v->landed_cost])</td>@endcan
                </tr>
            @empty
                <tr><td colspan="8" class="px-3 py-10 text-center text-muted">No vehicles match. @can('vehicles.create')<a href="{{ route('vehicles.create') }}" class="underline">Add the first one</a>.@endcan</td></tr>
            @endforelse
        </tbody>
    </table>
</div>
<div class="mt-3 flex items-center justify-between">
    <button class="btn-quiet">Print labels for selected</button>
    <div>{{ $vehicles->links() }}</div>
</div>
</form>
@endsection