@extends('layouts.app')

@section('title', 'Front Desk Command Center')

@section('content')
<div class="space-y-5">
    <header 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">Reception & customer flow</p>
            <h1 class="mt-1 text-2xl font-bold text-[#0b1f38]">Front Desk Command Center</h1>
            <p class="mt-1 text-xs text-slate-500">Live check-ins, appointments, document readiness and pending collections.</p>
        </div>
        <div class="flex flex-wrap gap-2">
            @if(auth()->user()->hasPermission('queue.manage'))
                <a href="{{ route('app.queue.index') }}" class="rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-xs font-bold text-slate-700">Issue Queue Token</a>
            @endif
            @if(auth()->user()->hasPermission('applications.create'))
                <a href="{{ route('app.applications.create') }}" class="rounded-xl bg-orange-600 px-4 py-2.5 text-xs font-bold text-white shadow-lg shadow-orange-200">+ New Application</a>
            @endif
        </div>
    </header>

    <section class="grid gap-3 sm:grid-cols-2 xl:grid-cols-5">
        <article class="erp-kpi-card"><div class="erp-kpi-icon bg-blue-50 text-blue-600">Q</div><div><p>Customers Waiting</p><strong>{{ number_format($metrics['waiting']) }}</strong><small>{{ $metrics['at_counter'] }} currently at counter</small></div></article>
        <article class="erp-kpi-card"><div class="erp-kpi-icon bg-violet-50 text-violet-600">A</div><div><p>Today's Appointments</p><strong>{{ number_format($metrics['appointments']) }}</strong><small>{{ $metrics['appointments_completed'] }} completed</small></div></article>
        <article class="erp-kpi-card"><div class="erp-kpi-icon bg-amber-50 text-amber-600">D</div><div><p>Document Exceptions</p><strong>{{ number_format($metrics['documents_pending']) }}</strong><small>Pending, missing or exception</small></div></article>
        <article class="erp-kpi-card"><div class="erp-kpi-icon bg-rose-50 text-rose-600">AED</div><div><p>Pending Collections</p><strong>{{ number_format((float) $metrics['payments_pending'], 2) }}</strong><small>Open invoice balance</small></div></article>
        <article class="erp-kpi-card"><div class="erp-kpi-icon bg-emerald-50 text-emerald-600">✓</div><div><p>Queue Progress</p><strong>{{ $metrics['waiting'] + $metrics['at_counter'] > 0 ? number_format(($metrics['at_counter'] / max(1, $metrics['waiting'] + $metrics['at_counter'])) * 100) : 100 }}%</strong><small>Active flow at counters</small></div></article>
    </section>

    <div class="grid gap-5 xl:grid-cols-[1.45fr_.85fr]">
        <section class="erp-panel">
            <div class="erp-panel-heading"><div><h2>Live Waiting Queue</h2><p>Today’s active customer tokens in service priority order.</p></div><a href="{{ route('app.queue.index') }}">Open live board</a></div>
            <div class="mt-4 overflow-x-auto">
                <table class="erp-table">
                    <thead><tr><th>Token</th><th>Customer</th><th>Service</th><th>Check-in</th><th>Counter</th><th>Status</th></tr></thead>
                    <tbody>
                        @forelse($queueTokens as $token)
                            <tr>
                                <td><strong class="text-orange-600">{{ $token->token_number }}</strong><small>{{ $token->service_date?->format('d M Y') }}</small></td>
                                <td><strong>{{ $token->customer?->full_name_en ?? 'Walk-in customer' }}</strong><small>{{ $token->customer?->primary_mobile ?? 'Customer not linked' }}</small></td>
                                <td><strong>{{ $token->service_type }}</strong><small>{{ $token->handler?->name ? 'Handled by '.$token->handler->name : 'Awaiting handler' }}</small></td>
                                <td><strong>{{ $token->checked_in_at?->format('h:i A') ?? '—' }}</strong><small>{{ $token->checked_in_at?->diffForHumans() }}</small></td>
                                <td><strong>{{ $token->counter?->name ?? 'Not assigned' }}</strong></td>
                                <td><span class="erp-status" data-status="{{ $token->status }}">{{ str($token->status)->replace('_', ' ')->title() }}</span></td>
                            </tr>
                        @empty
                            <tr><td colspan="6"><div class="erp-empty"><span>Q</span><strong>No customers are waiting</strong><p>Issue a token when the next walk-in arrives.</p></div></td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </section>

        <section class="erp-panel">
            <div class="erp-panel-heading"><div><h2>Appointment Schedule</h2><p>Today’s booked and checked-in visitors.</p></div><a href="{{ route('app.queue.index') }}">Manage</a></div>
            <div class="mt-4 divide-y divide-slate-100">
                @forelse($appointments as $appointment)
                    <article class="flex items-center gap-3 py-3 first:pt-0">
                        <div class="w-14 shrink-0 rounded-xl bg-slate-50 px-2 py-2 text-center text-[10px] font-bold text-slate-700">{{ \Carbon\Carbon::parse($appointment->appointment_time)->format('h:i') }}<span class="block text-[8px] text-slate-400">{{ \Carbon\Carbon::parse($appointment->appointment_time)->format('A') }}</span></div>
                        <div class="min-w-0 flex-1"><strong class="block truncate text-xs text-[#0b1f38]">{{ $appointment->customer?->full_name_en ?? 'Unlinked customer' }}</strong><small class="block truncate text-[10px] text-slate-500">{{ $appointment->service?->name_en ?? 'General appointment' }}</small></div>
                        <span class="erp-status" data-status="{{ $appointment->status }}">{{ str($appointment->status)->replace('_', ' ')->title() }}</span>
                    </article>
                @empty
                    <div class="erp-empty"><span>A</span><strong>No appointments today</strong><p>New bookings will appear here immediately.</p></div>
                @endforelse
            </div>
        </section>
    </div>
</div>
@endsection