@extends('layouts.app')
@section('title', 'Service appointments')
@section('heading', 'Service appointments')
@section('content')
<form method="GET" class="grid gap-3 sm:grid-cols-4" role="search"><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="">Open (new and confirmed)</option>@foreach (['requested' => 'New', 'confirmed' => 'Confirmed', 'completed' => 'Done', 'cancelled' => 'Cancelled', 'no_show' => 'No-show'] as $k => $l)<option value="{{ $k }}" @selected(($f['status'] ?? '') === $k)>{{ $l }}</option>@endforeach</select></div>
<div><label for="date" class="mb-1 block text-xs font-medium text-muted">Day</label><input id="date" type="date" name="date" value="{{ $f['date'] ?? '' }}" class="field"></div><div class="flex items-end"><button class="btn-primary">Apply</button></div></form>
<ul class="mt-4 space-y-3">@forelse ($items as $a)
<li class="rounded-lg border border-line bg-panel p-4"><div class="flex flex-wrap items-start justify-between gap-2"><div><p class="font-semibold">{{ $a->vehicle_label }}{{ $a->reg_no ? ' · '.$a->reg_no : '' }}</p><p class="text-sm">{{ $a->customer->name }} · {{ $a->customer->display_phone }}</p><p class="text-xs text-muted">{{ $a->branch->name }} · {{ config('experience.portal.service_types')[$a->service_type] ?? $a->service_type }} · {{ $a->when }}</p>@if ($a->notes)<p class="mt-1 text-sm">{{ $a->notes }}</p>@endif</div><span class="rounded border border-line px-2 py-0.5 text-xs">{{ ucfirst(str_replace('_', ' ', $a->status)) }}</span></div>
@if ($a->is_open) @can('appointments.manage')<div class="mt-3 flex flex-wrap items-start gap-2 text-sm">
 @if ($a->status === 'requested')<form method="POST" action="{{ route('appointments.confirm', $a) }}" class="flex gap-1">@csrf<label class="sr-only" for="t{{ $a->id }}">Time</label><input id="t{{ $a->id }}" type="time" name="time" class="field w-28"><button class="btn-primary px-3">Confirm</button></form>@endif
 @if ($a->status === 'confirmed')<a class="btn-quiet" target="_blank" rel="noopener" href="{{ $links[$a->id] }}">Tell customer on WhatsApp</a>@endif
 <details class="rounded-md border border-line"><summary class="cursor-pointer list-none px-3 py-2 font-medium hover:bg-ground">Mark done</summary><form method="POST" action="{{ route('appointments.complete', $a) }}" class="grid gap-2 border-t border-line p-3 sm:w-96">@csrf
  <label class="text-xs font-medium" for="s{{ $a->id }}">What was done (short)</label><input id="s{{ $a->id }}" name="summary" required maxlength="200" class="field">
  <label class="text-xs font-medium" for="w{{ $a->id }}">Details</label><textarea id="w{{ $a->id }}" name="work_done" rows="2" class="field"></textarea>
  <div class="grid grid-cols-2 gap-2"><div><label class="text-xs font-medium" for="m{{ $a->id }}">Mileage</label><input id="m{{ $a->id }}" name="mileage" type="number" min="0" class="field"></div><div><label class="text-xs font-medium" for="c{{ $a->id }}">Cost (KES)</label><input id="c{{ $a->id }}" name="cost" type="number" step="0.01" min="0" class="field"></div></div>
  <label class="flex items-center gap-2 text-xs"><input type="checkbox" name="visible_to_customer" value="1" checked class="rounded border-line"> Show in the customer's service history</label><button class="btn-primary">Save to service history</button></form></details>
 <form method="POST" action="{{ route('appointments.no-show', $a) }}">@csrf<button class="btn-quiet">No-show</button></form>
 <details class="rounded-md border border-line"><summary class="cursor-pointer list-none px-3 py-2 hover:bg-ground">Cancel</summary><form method="POST" action="{{ route('appointments.cancel', $a) }}" class="flex gap-1 border-t border-line p-2">@csrf<label class="sr-only" for="x{{ $a->id }}">Reason</label><input id="x{{ $a->id }}" name="reason" required maxlength="255" placeholder="Reason" class="field"><button class="btn-quiet px-3">Cancel booking</button></form></details></div>@endcan @endif</li>
@empty<li class="rounded-lg border border-line bg-panel p-8 text-center text-sm text-muted">No appointments.</li>@endforelse</ul>
<div class="mt-3">{{ $items->links() }}</div>
@endsection