@extends('layouts.app')
@section('title', 'Trade-ins')
@section('heading', 'Trade-in appraisals')

@section('content')
<form method="GET" class="grid gap-3 sm:grid-cols-4" role="search">
    <div class="sm:col-span-2"><label for="q" class="mb-1 block text-xs font-medium text-muted">Search make, model, plate, VIN or customer</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 (['draft' => 'Draft', 'offered' => 'Offered', 'accepted' => 'Accepted', 'rejected' => 'Declined'] as $k => $l)<option value="{{ $k }}" @selected(($filters['status'] ?? '') === $k)>{{ $l }}</option>@endforeach</select></div>
    <div class="flex items-end gap-2"><button class="btn-primary">Apply</button>@can('tradeins.manage')<a href="{{ route('trade-ins.create') }}" class="btn-quiet">New appraisal</a>@endcan</div>
</form>

<ul class="mt-4 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
@forelse ($tradeIns as $t)
    <li class="overflow-hidden rounded-lg border border-line bg-panel">
        <a href="{{ route('trade-ins.show', $t) }}" class="flex gap-3 p-3 hover:bg-ground/60">
            <span class="grid size-20 shrink-0 place-items-center overflow-hidden rounded bg-ground text-xs text-muted">
                @if ($t->photos->first())<img src="{{ route('trade-ins.photo', [$t->photos->first(), 'thumb' => 1]) }}" alt="" class="size-full object-cover" loading="lazy">@else No photo @endif</span>
            <span class="min-w-0 text-sm"><span class="block truncate font-semibold">{{ $t->display_name }}</span>
                <span class="block truncate text-muted">{{ $t->customer->name }}</span>
                <span class="mt-1 flex flex-wrap items-center gap-2">
                    @if ($t->condition_grade)<span class="rounded border border-line px-1.5 text-xs font-semibold">Grade {{ $t->condition_grade }}</span>@endif
                    <span class="rounded-full border px-2 text-xs {{ ['draft' => 'border-slate-300 bg-slate-100', 'offered' => 'border-amber-300 bg-amber-100', 'accepted' => 'border-emerald-300 bg-emerald-100', 'rejected' => 'border-red-300 bg-red-100'][$t->status] ?? '' }}">{{ ['rejected' => 'Declined'][$t->status] ?? ucfirst($t->status) }}</span></span>
                @if ($t->offered_value !== null)<span class="mt-1 block font-medium">Offer KSh {{ number_format((float) $t->offered_value) }}</span>@endif</span>
        </a>
    </li>
@empty
    <li class="col-span-full rounded-lg border border-line bg-panel p-8 text-center text-sm text-muted">No appraisals yet.</li>
@endforelse
</ul>
<div class="mt-3">{{ $tradeIns->links() }}</div>
@endsection