@extends('layouts.app')
@section('title', 'Test drives')
@section('heading', 'Test drives')

@section('content')
@forelse ($upcoming as $date => $drives)
    <section class="mb-6" aria-labelledby="d-{{ $date }}">
        <h2 id="d-{{ $date }}" class="mb-2 text-sm font-semibold">{{ \Illuminate\Support\Carbon::parse($date)->isToday() ? 'Today' : \Illuminate\Support\Carbon::parse($date)->format('l d M') }}</h2>
        <ul class="space-y-3">
        @foreach ($drives as $t)
            <li class="rounded-lg border border-line bg-panel p-4">
                <div class="flex flex-wrap items-start justify-between gap-3">
                    <div>
                        <p class="font-semibold">{{ $t->scheduled_for->format('H:i') }}–{{ $t->ends_at->format('H:i') }} · {{ $t->customer->name }}</p>
                        <p class="text-sm">{{ $t->vehicle->display_name }} <span class="text-muted">{{ $t->vehicle->stock_id }}</span></p>
                        <p class="text-xs text-muted">With {{ $t->assignee?->name ?? 'unassigned' }} · <a class="underline" href="{{ route('leads.show', $t->lead_id) }}">lead</a></p>
                    </div>
                    <span class="rounded-full border px-2.5 py-0.5 text-xs font-semibold {{ $t->is_signed ? 'border-emerald-300 bg-emerald-100 text-emerald-900' : 'border-amber-400 bg-amber-100 text-amber-900' }}">{{ $t->is_signed ? 'Indemnity signed' : 'Indemnity not signed' }}</span>
                </div>
                <div class="mt-3 flex flex-wrap items-start gap-2 text-sm">
                    @unless ($t->is_signed)
                        <a href="{{ route('test-drives.indemnity', $t) }}" class="btn-primary">Sign now on this device</a>
                        <a href="{{ $links[$t->id]['whatsapp'] }}" target="_blank" rel="noopener" class="btn-quiet">Send signing link on WhatsApp</a>
                    @endunless
                    <details class="rounded-md border border-emerald-300">
                        <summary class="cursor-pointer list-none px-3 py-2 font-medium text-emerald-900 hover:bg-emerald-50">Complete</summary>
                        <form method="POST" action="{{ route('test-drives.complete', $t) }}" class="space-y-2 border-t border-emerald-200 p-3">@csrf
                            <label class="block text-xs font-medium" for="o{{ $t->id }}">How did it go?</label><input id="o{{ $t->id }}" name="outcome_note" maxlength="500" class="field">
                            <button class="btn-primary">Mark completed</button>
                            @unless ($t->is_signed)<p class="text-xs text-stop">The indemnity must be signed first.</p>@endunless
                        </form>
                    </details>
                    <details class="rounded-md border border-line">
                        <summary class="cursor-pointer list-none px-3 py-2 font-medium hover:bg-ground">Cancel or no-show</summary>
                        <form method="POST" action="{{ route('test-drives.close', $t) }}" class="space-y-2 border-t border-line p-3">@csrf
                            <label class="block text-xs font-medium" for="s{{ $t->id }}">Outcome</label>
                            <select id="s{{ $t->id }}" name="status" class="field"><option value="cancelled">Cancelled</option><option value="no_show">Customer did not show</option></select>
                            <label class="block text-xs font-medium" for="r{{ $t->id }}">Reason</label><input id="r{{ $t->id }}" name="reason" maxlength="300" class="field">
                            <button class="btn-quiet">Save</button>
                        </form>
                    </details>
                </div>
            </li>
        @endforeach
        </ul>
    </section>
@empty
    <p class="rounded-lg border border-line bg-panel p-6 text-center text-sm text-muted">No test drives booked. Book one from a lead's page.</p>
@endforelse

@if ($recent->count())
<section class="mt-8" aria-labelledby="recent-h">
    <h2 id="recent-h" class="mb-2 text-sm font-semibold">Recent</h2>
    <div class="overflow-x-auto rounded-lg border border-line bg-panel"><table class="min-w-full text-left text-sm">
        <caption class="sr-only">Recent test drives</caption>
        <thead class="border-b border-line bg-ground text-xs text-muted"><tr><th scope="col" class="px-3 py-2 font-medium">When</th><th scope="col" class="px-3 py-2 font-medium">Customer</th><th scope="col" class="px-3 py-2 font-medium">Vehicle</th><th scope="col" class="px-3 py-2 font-medium">Outcome</th><th scope="col" class="px-3 py-2"><span class="sr-only">Record</span></th></tr></thead>
        <tbody class="divide-y divide-line">
        @foreach ($recent as $t)
            <tr><td class="px-3 py-2">{{ $t->scheduled_for->format('d M, H:i') }}</td><td class="px-3 py-2">{{ $t->customer->name }}</td><td class="px-3 py-2">{{ $t->vehicle->display_name }}</td>
                <td class="px-3 py-2">{{ ucfirst(str_replace('_', ' ', $t->status)) }}{{ $t->outcome_note ? ' · '.$t->outcome_note : '' }}</td>
                <td class="px-3 py-2 text-right">@if ($t->indemnity_signature_path)<a class="text-xs underline" target="_blank" href="{{ route('test-drives.signature', $t) }}">View signature</a>@endif</td></tr>
        @endforeach
        </tbody></table></div>
</section>
@endif
@endsection