@extends('layouts.app')

@section('title', 'Application Directory')

@section('content')
<div class="space-y-5">
    @include('tenant.partials.typist-page-nav')

    <section class="rounded-[28px] border border-sky-100 bg-gradient-to-br from-white via-sky-50 to-orange-50 p-6 shadow-sm sm:p-8">
        <div class="flex flex-col gap-5 lg:flex-row lg:items-end lg:justify-between">
            <div>
                <span class="text-[11px] font-bold uppercase tracking-[0.18em] text-sky-700">Live service register</span>
                <h1 class="mt-2 text-2xl font-bold tracking-tight text-slate-950 sm:text-3xl">Application directory</h1>
                <p class="mt-2 max-w-2xl text-sm text-slate-600">Track ownership, processing stage, fees and customer service accountability from one desk.</p>
            </div>
            <div class="flex flex-wrap gap-2">
                <a href="{{ route('app.work_queue') }}" class="rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-xs font-bold text-slate-700 shadow-sm hover:border-sky-300">Open work queue</a>
                <a href="{{ route('app.applications.kanban') }}" class="rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-xs font-bold text-slate-700 shadow-sm hover:border-sky-300">Kanban</a>
                <a href="{{ route('app.applications.create') }}" class="rounded-xl bg-orange-500 px-4 py-2.5 text-xs font-bold text-white shadow-sm hover:bg-orange-600">+ New application</a>
            </div>
        </div>
    </section>

    <section class="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
        @foreach([
            ['Active applications', $metrics['active'], 'bg-sky-100 text-sky-700'],
            ['Completed today', $metrics['completed_today'], 'bg-emerald-100 text-emerald-700'],
            ['Returned for correction', $metrics['returned'], 'bg-orange-100 text-orange-700'],
            ['SLA attention', $metrics['sla_risk'], 'bg-red-100 text-red-700'],
        ] as [$label, $value, $tone])
            <article class="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm"><div class="flex items-center justify-between"><span class="text-xs font-bold text-slate-600">{{ $label }}</span><span class="grid h-9 w-9 place-items-center rounded-xl {{ $tone }}">●</span></div><strong class="mt-4 block text-2xl text-slate-950">{{ number_format($value) }}</strong></article>
        @endforeach
    </section>

    <form method="GET" class="rounded-3xl border border-slate-200 bg-white p-4 shadow-sm">
        <div class="grid gap-3 md:grid-cols-2 xl:grid-cols-6">
            <label class="xl:col-span-2"><span class="sr-only">Search</span><input name="q" value="{{ request('q') }}" class="w-full rounded-xl border-slate-200 bg-slate-50 px-4 py-2.5 text-xs focus:border-sky-400 focus:ring-sky-200" placeholder="Search reference, customer or service"></label>
            <select name="status" class="rounded-xl border-slate-200 bg-slate-50 px-3 py-2.5 text-xs"><option value="">All statuses</option>@foreach(['draft','submitted','in_progress','pending','returned','completed','delivered','rejected','cancelled'] as $status)<option value="{{ $status }}" @selected(request('status') === $status)>{{ str($status)->replace('_',' ')->title() }}</option>@endforeach</select>
            <select name="priority" class="rounded-xl border-slate-200 bg-slate-50 px-3 py-2.5 text-xs"><option value="">All priorities</option>@foreach(['normal','high','urgent','vip'] as $priority)<option value="{{ $priority }}" @selected(request('priority') === $priority)>{{ ucfirst($priority) }}</option>@endforeach</select>
            <select name="stage_id" class="rounded-xl border-slate-200 bg-slate-50 px-3 py-2.5 text-xs"><option value="">All stages</option>@foreach($stages as $stage)<option value="{{ $stage->id }}" @selected((string) request('stage_id') === (string) $stage->id)>{{ $stage->stage_name_en }}</option>@endforeach</select>
            <div class="flex gap-2"><button class="flex-1 rounded-xl bg-slate-900 px-4 py-2.5 text-xs font-bold text-white">Filter</button><a href="{{ route('app.applications.index') }}" class="rounded-xl border border-slate-200 px-3 py-2.5 text-xs font-bold text-slate-500">Reset</a></div>
        </div>
        <details class="mt-3 border-t border-slate-100 pt-3" @if(request('attended_by') || request('typed_by')) open @endif>
            <summary class="cursor-pointer text-xs font-bold text-sky-700">Service accountability filters</summary>
            <div class="mt-3 grid gap-3 md:grid-cols-2">
                <select name="attended_by" class="rounded-xl border-slate-200 bg-slate-50 px-3 py-2.5 text-xs"><option value="">Any customer attendant</option>@foreach($teamMembers as $member)<option value="{{ $member->id }}" @selected((string) request('attended_by') === (string) $member->id)>{{ $member->name }}</option>@endforeach</select>
                <select name="typed_by" class="rounded-xl border-slate-200 bg-slate-50 px-3 py-2.5 text-xs"><option value="">Any typist</option>@foreach($teamMembers as $member)<option value="{{ $member->id }}" @selected((string) request('typed_by') === (string) $member->id)>{{ $member->name }}</option>@endforeach</select>
            </div>
        </details>
    </form>

    <section class="overflow-hidden rounded-3xl border border-slate-200 bg-white shadow-sm">
        <div class="overflow-x-auto">
            <table class="w-full min-w-[1100px] text-left text-xs">
                <thead class="border-b border-slate-200 bg-slate-50 text-[10px] font-bold uppercase tracking-wider text-slate-500"><tr><th class="px-5 py-4">Reference</th><th class="px-5 py-4">Customer & service</th><th class="px-5 py-4">Customer attended by</th><th class="px-5 py-4">Typist / owner</th><th class="px-5 py-4">Stage</th><th class="px-5 py-4">Status</th><th class="px-5 py-4">Fee</th><th class="px-5 py-4 text-right">Action</th></tr></thead>
                <tbody class="divide-y divide-slate-100">
                    @forelse($applications as $application)
                        @php
                            $priorityTone = in_array($application->priority, ['urgent','vip']) ? 'bg-orange-100 text-orange-700' : ($application->priority === 'high' ? 'bg-amber-100 text-amber-700' : 'bg-slate-100 text-slate-600');
                            $statusTone = in_array($application->status, ['completed','delivered']) ? 'bg-emerald-100 text-emerald-700' : ($application->status === 'returned' ? 'bg-red-100 text-red-700' : 'bg-sky-100 text-sky-700');
                        @endphp
                        <tr class="transition hover:bg-sky-50/40">
                            <td class="px-5 py-4"><a href="{{ route('app.applications.show', $application->id) }}" class="font-bold text-sky-700 hover:text-orange-600">{{ $application->application_number }}</a><span class="mt-1 block w-fit rounded-full px-2 py-0.5 text-[9px] font-bold uppercase {{ $priorityTone }}">{{ $application->priority }}</span></td>
                            <td class="px-5 py-4"><strong class="block text-slate-900">{{ $application->customer?->full_name_en ?? 'Customer unavailable' }}</strong><span class="mt-1 block text-slate-500">{{ $application->service?->name_en ?? 'Service unavailable' }}</span></td>
                            <td class="px-5 py-4"><strong class="block text-slate-800">{{ $application->attendedBy?->name ?? 'Not recorded' }}</strong><span class="mt-1 block text-[10px] text-slate-400">Front desk service</span></td>
                            <td class="px-5 py-4"><strong class="block text-slate-800">{{ $application->typedByUser?->name ?? $application->assignedUser?->name ?? 'Unassigned' }}</strong><span class="mt-1 block text-[10px] text-slate-400">{{ $application->typing_started_at ? 'Started '.$application->typing_started_at->diffForHumans() : 'Not started' }}</span></td>
                            <td class="px-5 py-4 text-slate-600">{{ $application->currentStage?->stage_name_en ?? 'Intake' }}</td>
                            <td class="px-5 py-4"><span class="rounded-full px-2.5 py-1 text-[9px] font-bold uppercase {{ $statusTone }}">{{ str($application->status)->replace('_',' ') }}</span></td>
                            <td class="px-5 py-4 font-bold text-slate-900">AED {{ number_format($application->total_price ?? 0, 2) }}</td>
                            <td class="px-5 py-4 text-right"><a href="{{ route('app.applications.show', $application->id) }}" class="inline-flex rounded-xl border border-slate-200 bg-white px-3 py-2 font-bold text-slate-700 hover:border-orange-300 hover:text-orange-600">Open 360°</a></td>
                        </tr>
                    @empty
                        <tr><td colspan="8" class="px-6 py-16 text-center"><strong class="block text-base text-slate-700">No applications match this view</strong><span class="mt-2 block text-sm text-slate-400">Clear the filters or start a new customer application.</span><a href="{{ route('app.applications.create') }}" class="mt-4 inline-flex rounded-xl bg-orange-500 px-4 py-2 text-xs font-bold text-white">Create application</a></td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($applications->hasPages())<div class="border-t border-slate-100 px-5 py-4">{{ $applications->links() }}</div>@endif
    </section>
</div>
@endsection