@extends('layouts.app')
@section('title', 'Wishlists')
@section('heading', 'Customer wishlists')

@section('content')
<p class="max-w-prose text-sm text-muted">When a vehicle reaches stock (or its price drops) and matches a wishlist, the salesperson is alerted with a WhatsApp message ready to send. Each customer is alerted once per vehicle.</p>

<div class="mt-4 overflow-x-auto rounded-lg border border-line bg-panel">
    <table class="min-w-full text-left text-sm">
        <caption class="sr-only">Active wishlists</caption>
        <thead class="border-b border-line bg-ground text-xs text-muted"><tr><th scope="col" class="px-3 py-2 font-medium">Customer</th><th scope="col" class="px-3 py-2 font-medium">Looking for</th><th scope="col" class="px-3 py-2 font-medium">Matches</th><th scope="col" class="px-3 py-2"><span class="sr-only">Actions</span></th></tr></thead>
        <tbody class="divide-y divide-line">
        @forelse ($wishlists as $w)
            <tr class="align-top">
                <td class="px-3 py-2 font-medium"><a class="underline decoration-line underline-offset-2" href="{{ route('customers.show', $w->customer) }}">{{ $w->customer->name }}</a><span class="block text-xs text-muted">{{ $w->customer->display_phone }}</span></td>
                <td class="px-3 py-2">{{ $w->summary() }}@if ($w->expires_at)<span class="block text-xs text-muted">until {{ $w->expires_at->format('d M Y') }}</span>@endif</td>
                <td class="px-3 py-2">
                    @forelse ($w->matches as $m)
                        <form method="POST" action="{{ route('wishlists.whatsapp', $m) }}" target="_blank" rel="noopener" class="mb-1 flex items-center gap-2">@csrf
                            <span>{{ $m->vehicle->display_name }} <span class="text-xs text-muted">{{ $m->vehicle->stock_id }}</span></span>
                            <button class="btn-quiet px-2 py-1 text-xs">{{ $m->contacted_at ? 'WhatsApp again' : 'WhatsApp' }}</button>
                        </form>
                    @empty<span class="text-muted">None yet</span>@endforelse
                </td>
                <td class="px-3 py-2 text-right"><form method="POST" action="{{ route('wishlists.destroy', $w) }}" onsubmit="return confirm('Cancel this wishlist?')">@csrf @method('DELETE')<button class="text-xs text-stop underline">Cancel</button></form></td>
            </tr>
        @empty
            <tr><td colspan="4" class="px-3 py-10 text-center text-muted">No active wishlists.</td></tr>
        @endforelse
        </tbody>
    </table>
</div>
<div class="mt-3">{{ $wishlists->links() }}</div>

<form method="POST" action="{{ route('wishlists.store') }}" x-data="{ makes: @js($makes), make: '' }" class="mt-6 grid gap-3 rounded-lg border border-line bg-panel p-4 sm:grid-cols-4">
    @csrf
    <h2 class="text-sm font-semibold sm:col-span-4">New wishlist</h2>
    <div class="sm:col-span-2"><label for="w_c" class="mb-1 block text-xs font-medium">Customer</label>
        <select id="w_c" name="customer_id" required class="field"><option value="">Select customer</option>@foreach ($customers as $c)<option value="{{ $c->id }}">{{ $c->name }} · {{ \App\Support\Phone::display($c->phone) }}</option>@endforeach</select></div>
    <div><label for="w_make" class="mb-1 block text-xs font-medium">Make</label><select id="w_make" name="make_id" x-model="make" class="field"><option value="">Any</option><template x-for="m in makes" :key="m.id"><option :value="m.id" x-text="m.name"></option></template></select></div>
    <div><label for="w_model" class="mb-1 block text-xs font-medium">Model</label><select id="w_model" name="model_id" :disabled="!make" class="field"><option value="">Any</option><template x-for="m in (makes.find(x => x.id == make)?.models ?? [])" :key="m.id"><option :value="m.id" x-text="m.name"></option></template></select></div>
    <div><label for="w_yf" class="mb-1 block text-xs font-medium">Year from</label><input id="w_yf" name="year_from" type="number" class="field"></div>
    <div><label for="w_yt" class="mb-1 block text-xs font-medium">Year to</label><input id="w_yt" name="year_to" type="number" class="field"></div>
    <div><label for="w_pr" class="mb-1 block text-xs font-medium">Max price (KES)</label><input id="w_pr" name="max_price" type="number" min="0" class="field"></div>
    <div><label for="w_mi" class="mb-1 block text-xs font-medium">Max mileage</label><input id="w_mi" name="max_mileage" type="number" min="0" class="field"></div>
    <div><label for="w_tr" class="mb-1 block text-xs font-medium">Transmission</label><select id="w_tr" name="transmission" class="field"><option value="">Any</option>@foreach (config('inventory.transmissions') as $k => $l)<option value="{{ $k }}">{{ $l }}</option>@endforeach</select></div>
    <div><label for="w_fu" class="mb-1 block text-xs font-medium">Fuel</label><select id="w_fu" name="fuel_type" class="field"><option value="">Any</option>@foreach (config('inventory.fuel_types') as $k => $l)<option value="{{ $k }}">{{ $l }}</option>@endforeach</select></div>
    <div><label for="w_bo" class="mb-1 block text-xs font-medium">Body</label><select id="w_bo" name="body_type" class="field"><option value="">Any</option>@foreach (config('inventory.body_types') as $k => $l)<option value="{{ $k }}">{{ $l }}</option>@endforeach</select></div>
    <div><label for="w_ex" class="mb-1 block text-xs font-medium">Keep looking until</label><input id="w_ex" name="expires_at" type="date" min="{{ today()->addDay()->toDateString() }}" class="field"></div>
    <div class="sm:col-span-4"><button class="btn-primary">Save wishlist</button></div>
</form>
@endsection