@extends('layouts.app')
@section('title', 'Queue & Appointments')

@section('content')
<div class="space-y-5" x-data="{ tokenOpen: false, appointmentOpen: false }">
    <div class="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between"><div><p class="text-[10px] font-bold uppercase tracking-[.18em] text-orange-600">Front-office flow control</p><h1 class="mt-1 text-2xl font-bold text-[#0b1f38]">Live Queue & Appointments</h1><p class="mt-1 text-xs text-slate-500">Manage arrival tokens, counter flow and upcoming customer bookings.</p></div><div class="flex gap-2">@if(auth()->user()->hasPermission('appointments.manage'))<button @click="appointmentOpen=!appointmentOpen" class="rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-xs font-bold text-slate-700">Book Appointment</button>@endif @if(auth()->user()->hasPermission('queue.manage'))<button @click="tokenOpen=!tokenOpen" class="rounded-xl bg-orange-600 px-4 py-2.5 text-xs font-bold text-white">+ Issue Token</button>@endif</div></div>

    <div class="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
        <div class="erp-kpi-card"><span class="erp-kpi-icon bg-amber-50 text-amber-600">W</span><p class="erp-kpi-label">Waiting</p><p class="erp-kpi-value">{{ $queueCounts['waiting'] ?? 0 }}</p><p class="erp-kpi-note">Customers in today's queue</p></div>
        <div class="erp-kpi-card"><span class="erp-kpi-icon bg-blue-50 text-blue-600">C</span><p class="erp-kpi-label">Called / At Counter</p><p class="erp-kpi-value">{{ ($queueCounts['called'] ?? 0) + ($queueCounts['at_counter'] ?? 0) }}</p><p class="erp-kpi-note">Currently being served</p></div>
        <div class="erp-kpi-card"><span class="erp-kpi-icon bg-emerald-50 text-emerald-600">✓</span><p class="erp-kpi-label">Completed Today</p><p class="erp-kpi-value">{{ $queueCounts['completed'] ?? 0 }}</p><p class="erp-kpi-note">Finished counter visits</p></div>
        <div class="erp-kpi-card"><span class="erp-kpi-icon bg-violet-50 text-violet-600">M</span><p class="erp-kpi-label">Average Wait</p><p class="erp-kpi-value">{{ $averageWaitMinutes }}m</p><p class="erp-kpi-note">Based on called tokens</p></div>
    </div>

    <div class="grid gap-4 xl:grid-cols-2">
        @if(auth()->user()->hasPermission('queue.manage'))<section x-show="tokenOpen" x-transition class="erp-panel"><div class="erp-panel-heading"><div><h2>Issue Queue Token</h2><p>No sensitive customer details appear on public displays.</p></div><button @click="tokenOpen=false">×</button></div><form method="POST" action="{{ route('app.queue.tokens.store') }}" class="mt-4 grid gap-3 sm:grid-cols-2">@csrf<select name="branch_id" required class="erp-input"><option value="">Select branch *</option>@foreach($branches as $branch)<option value="{{ $branch->id }}">{{ $branch->name }}</option>@endforeach</select><select name="counter_id" class="erp-input"><option value="">Assign counter later</option>@foreach($counters as $counter)<option value="{{ $counter->id }}">{{ $counter->name }}</option>@endforeach</select><select name="customer_id" class="erp-input sm:col-span-2"><option value="">Walk-in not yet identified</option>@foreach($customers as $customer)<option value="{{ $customer->id }}">{{ $customer->full_name_en }} · {{ $customer->customer_code }}</option>@endforeach</select><select name="service_type" class="erp-input"><option value="general">General service</option><option value="visa">Visa service</option><option value="corporate">Corporate service</option><option value="vip">VIP</option><option value="cashier">Cashier</option></select><button class="rounded-xl bg-orange-600 py-3 text-xs font-bold text-white">Issue Token</button></form></section>@endif
        @if(auth()->user()->hasPermission('appointments.manage'))<section x-show="appointmentOpen" x-transition class="erp-panel"><div class="erp-panel-heading"><div><h2>Book Appointment</h2><p>Schedule by branch, customer and service.</p></div><button @click="appointmentOpen=false">×</button></div><form method="POST" action="{{ route('app.appointments.store') }}" class="mt-4 grid gap-3 sm:grid-cols-2">@csrf<select name="customer_id" required class="erp-input sm:col-span-2"><option value="">Select customer *</option>@foreach($customers as $customer)<option value="{{ $customer->id }}">{{ $customer->full_name_en }} · {{ $customer->customer_code }}</option>@endforeach</select><select name="branch_id" required class="erp-input"><option value="">Branch *</option>@foreach($branches as $branch)<option value="{{ $branch->id }}">{{ $branch->name }}</option>@endforeach</select><select name="service_id" class="erp-input"><option value="">General consultation</option>@foreach($services as $service)<option value="{{ $service->id }}">{{ $service->name_en }}</option>@endforeach</select><input name="appointment_date" type="date" min="{{ today()->format('Y-m-d') }}" required class="erp-input"><input name="appointment_time" type="time" required class="erp-input"><select name="duration_minutes" class="erp-input"><option value="15">15 minutes</option><option value="30" selected>30 minutes</option><option value="45">45 minutes</option><option value="60">60 minutes</option></select><select name="assigned_user_id" class="erp-input"><option value="">Assign staff later</option>@foreach($users as $user)<option value="{{ $user->id }}">{{ $user->name }}</option>@endforeach</select><input name="notes" placeholder="Booking notes" class="erp-input sm:col-span-2"><button class="rounded-xl bg-[#0b1f38] py-3 text-xs font-bold text-white sm:col-span-2">Book Appointment</button></form></section>@endif
    </div>

    <section class="erp-panel"><div class="erp-panel-heading"><div><h2>Live Queue Board</h2><p>Operational staff view for {{ today()->format('d M Y') }}.</p></div><span class="erp-live-dot">Updating</span></div><div class="mt-5 grid gap-3 md:grid-cols-2 xl:grid-cols-4">@forelse($tokens as $token)<article class="rounded-2xl border p-4 {{ $token->status === 'at_counter' ? 'border-emerald-200 bg-emerald-50/40' : ($token->status === 'called' ? 'border-blue-200 bg-blue-50/40' : 'border-slate-200 bg-white') }}"><div class="flex items-start justify-between"><span class="text-3xl font-black tracking-tight text-[#0b1f38]">{{ $token->token_number }}</span><span class="erp-status" data-status="{{ $token->status }}">{{ str($token->status)->replace('_',' ')->title() }}</span></div><p class="mt-3 truncate text-xs font-bold text-slate-700">{{ $token->customer?->full_name_en ?? 'Walk-in customer' }}</p><p class="mt-1 text-[9px] text-slate-400">{{ str($token->service_type)->title() }} · {{ $token->counter?->name ?? 'Counter pending' }}</p><p class="mt-2 text-[9px] text-slate-400">Waiting {{ $token->created_at->diffForHumans(['parts'=>1]) }}</p>@if(auth()->user()->hasPermission('queue.manage'))<div class="mt-4 flex gap-1">@foreach(['called'=>'Call','at_counter'=>'Serve','completed'=>'Complete','no_show'=>'No show'] as $status=>$label)@php($allowed = ($token->status==='waiting' && in_array($status,['called','no_show'])) || ($token->status==='called' && in_array($status,['at_counter','no_show'])) || ($token->status==='at_counter' && $status==='completed') || ($token->status==='no_show' && $status==='called'))@if($allowed)<form method="POST" action="{{ route('app.queue.tokens.status', $token->id) }}">@csrf<input type="hidden" name="status" value="{{ $status }}"><button class="rounded-lg {{ $status==='no_show' ? 'bg-rose-50 text-rose-600' : 'bg-[#0b1f38] text-white' }} px-2.5 py-1.5 text-[9px] font-bold">{{ $label }}</button></form>@endif @endforeach</div>@endif</article>@empty<div class="erp-empty col-span-full"><span>Q</span><strong>The live queue is clear</strong><p>Issue a token when the next customer arrives.</p></div>@endforelse</div></section>

    <section class="erp-panel"><div class="erp-panel-heading"><div><h2>Upcoming Appointments</h2><p>Confirmed and booked visits for the next 14 days.</p></div><span class="text-[10px] font-bold text-slate-400">{{ $appointments->count() }} scheduled</span></div><div class="mt-4 overflow-x-auto"><table class="erp-table"><thead><tr><th>Reference</th><th>Date & Time</th><th>Customer</th><th>Service / Branch</th><th>Assigned Staff</th><th>Status / Action</th></tr></thead><tbody>@forelse($appointments as $appointment)<tr><td><strong>{{ $appointment->reference_number ?: '#'.$appointment->id }}</strong><small>{{ $appointment->duration_minutes }} minutes</small></td><td><strong>{{ $appointment->appointment_date->format('d M Y') }}</strong><small>{{ date('h:i A', strtotime($appointment->appointment_time)) }}</small></td><td><strong>{{ $appointment->customer?->full_name_en }}</strong><small>{{ $appointment->customer?->customer_code }}</small></td><td><strong>{{ $appointment->service?->name_en ?? 'General consultation' }}</strong><small>{{ $appointment->branch?->name }}</small></td><td>{{ $appointment->assignedUser?->name ?? 'Unassigned' }}</td><td>@if(auth()->user()->hasPermission('appointments.manage') && !in_array($appointment->status,['completed','cancelled','no_show']))<form method="POST" action="{{ route('app.appointments.status', $appointment->id) }}" class="flex gap-1">@csrf<select name="status" class="erp-select-compact">@if($appointment->status==='booked')<option value="confirmed">Confirm</option>@endif<option value="checked_in">Check in</option>@if($appointment->status==='checked_in')<option value="completed">Complete</option>@endif<option value="cancelled">Cancel</option><option value="no_show">No show</option></select><button class="rounded-lg bg-slate-900 px-2 text-[9px] font-bold text-white">Update</button></form>@else<span class="erp-status" data-status="{{ $appointment->status }}">{{ str($appointment->status)->replace('_',' ')->title() }}</span>@endif</td></tr>@empty<tr><td colspan="6"><div class="erp-empty"><span>A</span><strong>No upcoming appointments</strong><p>Book customer visits to coordinate staff and counters.</p></div></td></tr>@endforelse</tbody></table></div></section>
</div>
@endsection