@extends('layouts.app')

@section('title', 'Typist Command Center')

@section('content')
<div class="mx-auto max-w-[1800px] space-y-5" x-data="{ filtersOpen: {{ collect($filters)->filter()->isNotEmpty() ? 'true' : 'false' }}, focusMode: false }">
    @php
        $viewLinks = [
            ['mine', 'My queue', $metrics['active']],
            ['returned', 'Returned', $metrics['returned']],
            ['documents', 'Document holds', $metrics['documents_pending']],
            ['payment', 'Payment holds', $metrics['payment_holds']],
            ['sla', 'SLA risk', $metrics['sla_warnings']],
            ['paused', 'Paused', $metrics['paused']],
        ];
        if (auth()->user()->hasPermission('applications.assign')) {
            $viewLinks[] = ['unassigned', 'Unassigned', $metrics['unassigned']];
        }
    @endphp

    @include('tenant.partials.typist-page-nav')

    <section class="relative overflow-hidden rounded-[28px] border border-sky-100 bg-gradient-to-br from-white via-sky-50 to-orange-50 px-5 py-6 text-slate-950 shadow-sm sm:px-7 lg:px-8">
        <div class="absolute -right-16 -top-24 h-72 w-72 rounded-full bg-orange-200/40 blur-3xl"></div>
        <div class="absolute bottom-0 right-[28%] h-36 w-36 rounded-full bg-sky-200/40 blur-2xl"></div>
        <div class="relative flex flex-col gap-6 xl:flex-row xl:items-center xl:justify-between">
            <div class="max-w-2xl">
                <div class="flex flex-wrap items-center gap-2 text-[10px] font-bold uppercase tracking-[.18em] text-orange-600">
                    <span>Typist operations</span>
                    <span class="h-1 w-1 rounded-full bg-orange-400"></span>
                    <span>{{ auth()->user()->defaultBranch?->name ?? 'Active branch' }}</span>
                    <span class="rounded-full border border-emerald-200 bg-emerald-100 px-2 py-1 text-[9px] tracking-wider text-emerald-700">Live queue</span>
                </div>
                <h1 class="mt-3 text-2xl font-bold tracking-tight sm:text-3xl">Typing Command Center</h1>
                <p class="mt-2 max-w-xl text-xs leading-5 text-slate-600">Welcome, {{ auth()->user()->name }}. Process verified applications, resolve government returns, monitor SLA commitments and hand work to supervisors from one focused workspace.</p>
            </div>
            <div class="grid grid-cols-2 gap-2 sm:grid-cols-4 xl:min-w-[560px]">
                <div class="rounded-2xl border border-slate-200 bg-white/90 p-3.5 shadow-sm backdrop-blur-sm">
                    <p class="text-[9px] font-bold uppercase tracking-wider text-slate-400">Active work</p>
                    <strong class="mt-1.5 block text-2xl">{{ number_format($metrics['active']) }}</strong>
                    <span class="text-[9px] text-slate-400">Assigned to me</span>
                </div>
                <div class="rounded-2xl border border-orange-200 bg-orange-100/70 p-3.5 backdrop-blur-sm">
                    <p class="text-[9px] font-bold uppercase tracking-wider text-orange-700">Due attention</p>
                    <strong class="mt-1.5 block text-2xl text-orange-700">{{ number_format($metrics['sla_warnings']) }}</strong>
                    <span class="text-[9px] text-orange-600">SLA risk or overdue</span>
                </div>
                <div class="rounded-2xl border border-slate-200 bg-white/90 p-3.5 shadow-sm backdrop-blur-sm">
                    <p class="text-[9px] font-bold uppercase tracking-wider text-slate-400">Completed today</p>
                    <strong class="mt-1.5 block text-2xl text-emerald-600">{{ number_format($metrics['completed_today']) }}</strong>
                    <span class="text-[9px] text-slate-400">{{ number_format($metrics['completed_week']) }} this week</span>
                </div>
                <div class="rounded-2xl border border-slate-200 bg-white/90 p-3.5 shadow-sm backdrop-blur-sm">
                    <p class="text-[9px] font-bold uppercase tracking-wider text-slate-400">On-time rate</p>
                    <strong class="mt-1.5 block text-2xl">{{ $metrics['on_time_rate'] === null ? '—' : $metrics['on_time_rate'].'%' }}</strong>
                    <span class="text-[9px] text-slate-400">Last 30 days</span>
                </div>
            </div>
        </div>
    </section>

    <section class="grid grid-cols-2 gap-3 sm:grid-cols-3 xl:grid-cols-6" x-show="!focusMode" x-transition>
        @foreach([
            ['Assigned today', $metrics['assigned_today'], 'AS', 'bg-blue-50 text-blue-600', 'New handoffs'],
            ['Typing now', $metrics['typing'], 'TY', 'bg-orange-50 text-orange-600', 'Ready and in progress'],
            ['Returned cases', $metrics['returned'], 'RT', 'bg-amber-50 text-amber-700', 'Correction required'],
            ['Document holds', $metrics['documents_pending'], 'DC', 'bg-violet-50 text-violet-600', 'Missing or unverified'],
            ['Payment holds', $metrics['payment_holds'], 'PY', 'bg-rose-50 text-rose-600', 'Awaiting clearance'],
            ['Overdue', $metrics['overdue'], 'SL', 'bg-red-50 text-red-600', 'Immediate action'],
        ] as [$label, $value, $icon, $iconClass, $note])
            <article class="group rounded-2xl border border-slate-200/80 bg-white p-4 shadow-sm transition hover:-translate-y-0.5 hover:border-orange-200 hover:shadow-lg">
                <div class="flex items-start justify-between gap-3">
                    <span class="grid h-9 w-9 place-items-center rounded-xl text-[10px] font-black {{ $iconClass }}">{{ $icon }}</span>
                    <span class="text-[9px] font-bold uppercase tracking-wider text-slate-300">Today</span>
                </div>
                <strong class="mt-4 block text-2xl text-[#0b1f38]">{{ number_format($value) }}</strong>
                <p class="mt-0.5 text-[11px] font-bold text-slate-700">{{ $label }}</p>
                <p class="mt-1 text-[9px] text-slate-400">{{ $note }}</p>
            </article>
        @endforeach
    </section>

    <div class="grid gap-5 2xl:grid-cols-[minmax(0,1fr)_340px]">
        <section class="min-w-0 rounded-[24px] border border-slate-200 bg-white shadow-sm">
            <div class="border-b border-slate-100 px-4 py-4 sm:px-5">
                <div class="flex flex-col gap-4 xl:flex-row xl:items-center xl:justify-between">
                    <div>
                        <div class="flex items-center gap-2">
                            <span class="grid h-8 w-8 place-items-center rounded-xl bg-orange-50 text-[10px] font-black text-orange-600">SQ</span>
                            <div><h2 class="text-sm font-bold text-[#0b1f38]">Smart Queue</h2><p class="text-[10px] text-slate-400">Priority, government returns and SLA risk are ranked automatically.</p></div>
                        </div>
                    </div>
                    <div class="flex flex-wrap items-center gap-2">
                        <button type="button" @click="focusMode = !focusMode" class="rounded-xl border border-slate-200 px-3 py-2 text-[10px] font-bold text-slate-600 transition hover:border-orange-200 hover:text-orange-600"><span x-text="focusMode ? 'Exit focus mode' : 'Focus mode'"></span></button>
                        <button type="button" @click="filtersOpen = !filtersOpen" class="rounded-xl border border-slate-200 px-3 py-2 text-[10px] font-bold text-slate-600 transition hover:border-orange-200 hover:text-orange-600">Advanced filters</button>
                        <a href="{{ route('app.applications.kanban') }}" class="rounded-xl bg-[#0b1f38] px-3.5 py-2 text-[10px] font-bold text-white shadow-sm transition hover:bg-orange-600">Workflow board</a>
                    </div>
                </div>

                <nav class="mt-4 flex gap-2 overflow-x-auto pb-1" aria-label="Queue views">
                    @foreach($viewLinks as [$key, $label, $count])
                        <a href="{{ request()->fullUrlWithQuery(['view' => $key, 'page' => null]) }}" class="inline-flex shrink-0 items-center gap-2 rounded-xl border px-3 py-2 text-[10px] font-bold transition {{ $view === $key ? 'border-orange-200 bg-orange-50 text-orange-700 shadow-sm' : 'border-slate-200 text-slate-500 hover:border-slate-300 hover:text-slate-800' }}">
                            {{ $label }} <span class="rounded-md {{ $view === $key ? 'bg-orange-600 text-white' : 'bg-slate-100 text-slate-500' }} px-1.5 py-0.5 text-[8px]">{{ number_format($count) }}</span>
                        </a>
                    @endforeach
                </nav>

                <form method="GET" action="{{ route('app.work_queue') }}" x-show="filtersOpen" x-transition class="mt-4 rounded-2xl border border-slate-200 bg-slate-50/80 p-3">
                    <input type="hidden" name="view" value="{{ $view }}">
                    <div class="grid gap-2 md:grid-cols-2 xl:grid-cols-[minmax(220px,1.5fr)_repeat(5,minmax(120px,1fr))_auto]">
                        <label class="relative block">
                            <span class="sr-only">Search queue</span>
                            <input name="q" value="{{ $filters['q'] ?? '' }}" placeholder="Application, customer, mobile or service" class="erp-input h-10 bg-white pl-3 text-[10px]">
                        </label>
                        <select name="priority" class="erp-input h-10 bg-white text-[10px]"><option value="">All priorities</option>@foreach(['urgent' => 'Urgent', 'vip' => 'VIP', 'high' => 'High', 'normal' => 'Normal'] as $key => $label)<option value="{{ $key }}" @selected(($filters['priority'] ?? '') === $key)>{{ $label }}</option>@endforeach</select>
                        <select name="stage_id" class="erp-input h-10 bg-white text-[10px]"><option value="">All stages</option>@foreach($stageOptions as $stage)<option value="{{ $stage->id }}" @selected((string) ($filters['stage_id'] ?? '') === (string) $stage->id)>{{ $stage->stage_name_en }}</option>@endforeach</select>
                        <select name="service_id" class="erp-input h-10 bg-white text-[10px]"><option value="">All services</option>@foreach($serviceOptions as $service)<option value="{{ $service->id }}" @selected((string) ($filters['service_id'] ?? '') === (string) $service->id)>{{ $service->name_en }}</option>@endforeach</select>
                        <select name="branch_id" class="erp-input h-10 bg-white text-[10px]"><option value="">All branches</option>@foreach($branchOptions as $branch)<option value="{{ $branch->id }}" @selected((string) ($filters['branch_id'] ?? '') === (string) $branch->id)>{{ $branch->name }}</option>@endforeach</select>
                        <select name="sort" class="erp-input h-10 bg-white text-[10px]"><option value="smart" @selected(($filters['sort'] ?? 'smart') === 'smart')>Smart ranking</option><option value="sla" @selected(($filters['sort'] ?? '') === 'sla')>Nearest SLA</option><option value="priority" @selected(($filters['sort'] ?? '') === 'priority')>Priority first</option><option value="oldest" @selected(($filters['sort'] ?? '') === 'oldest')>Oldest first</option><option value="newest" @selected(($filters['sort'] ?? '') === 'newest')>Newest first</option></select>
                        <div class="flex gap-2"><button class="h-10 rounded-xl bg-orange-600 px-4 text-[10px] font-bold text-white">Apply</button><a href="{{ route('app.work_queue') }}" class="grid h-10 place-items-center rounded-xl border border-slate-200 bg-white px-3 text-[10px] font-bold text-slate-500">Reset</a></div>
                    </div>
                </form>
            </div>

            <div class="space-y-3 p-3 sm:p-4">
                @forelse($applications as $application)
                    @php
                        $isPaused = $application->sla_paused_at !== null;
                        $isOverdue = !$isPaused && $application->due_at?->isPast();
                        $isRisk = !$isPaused && ($isOverdue || in_array($application->sla_status, ['at_risk', 'warning', 'overdue'], true) || $application->due_at?->lessThanOrEqualTo(now()->addHours(4)));
                        $transitions = collect($application->queue_transitions ?? []);
                        $readyTransition = $transitions->firstWhere('ready', true);
                        $blockedTransition = $transitions->first(fn ($transition) => !($transition['ready'] ?? false));
                        $latestSubmission = $application->latest_submission;
                        $paymentReady = (float) $application->total_price <= 0 || in_array($application->payment_status, ['paid', 'credit_account', 'corporate_credit'], true);
                        $documentsReady = (int) $application->pending_documents_count === 0 && !in_array($application->document_status, ['missing_documents', 'exception'], true);
                    @endphp
                    <article class="group relative overflow-hidden rounded-2xl border {{ $isOverdue ? 'border-rose-200 bg-rose-50/20' : ($application->status === 'returned' || $application->currentStage?->stage_code === 'GOVERNMENT_RETURNED' ? 'border-amber-200 bg-amber-50/20' : 'border-slate-200 bg-white') }} p-4 transition hover:border-orange-200 hover:shadow-[0_14px_40px_rgba(15,23,42,.08)] sm:p-5">
                        <span class="absolute inset-y-0 left-0 w-1 {{ $application->priority === 'urgent' ? 'bg-rose-500' : ($application->priority === 'vip' ? 'bg-violet-500' : ($application->priority === 'high' ? 'bg-orange-500' : 'bg-sky-500')) }}"></span>
                        <div class="grid gap-4 xl:grid-cols-[minmax(0,1.5fr)_minmax(230px,.75fr)_190px] xl:items-center">
                            <div class="min-w-0 pl-1">
                                <div class="flex flex-wrap items-center gap-2">
                                    <a href="{{ route('app.applications.show', $application->id) }}" class="text-sm font-black tracking-tight text-orange-600 hover:text-orange-700">{{ $application->application_number }}</a>
                                    <span class="erp-status" data-status="{{ $application->priority }}">{{ ucfirst($application->priority) }}</span>
                                    @if($application->status === 'returned' || $application->currentStage?->stage_code === 'GOVERNMENT_RETURNED')<span class="rounded-full bg-amber-100 px-2 py-1 text-[8px] font-black uppercase tracking-wider text-amber-700">Government return</span>@endif
                                    @if($isPaused)<span class="erp-status" data-status="paused">SLA paused</span>@elseif($isOverdue)<span class="erp-status" data-status="overdue">Overdue</span>@elseif($isRisk)<span class="erp-status" data-status="warning">SLA risk</span>@endif
                                </div>
                                <div class="mt-2 flex min-w-0 flex-col gap-1 sm:flex-row sm:items-center sm:gap-3">
                                    <h3 class="truncate text-sm font-bold text-[#0b1f38]">{{ $application->customer?->full_name_en ?? 'Customer unavailable' }}</h3>
                                    <span class="hidden h-1 w-1 rounded-full bg-slate-300 sm:block"></span>
                                    <p class="truncate text-[11px] font-semibold text-slate-500">{{ $application->service?->name_en ?? 'Service unavailable' }}</p>
                                </div>
                                <div class="mt-3 flex flex-wrap items-center gap-x-4 gap-y-2 text-[9px] text-slate-500">
                                    <span><strong class="text-slate-700">Mobile:</strong> {{ $application->customer?->contact?->primary_mobile ?? 'Not recorded' }}</span>
                                    <span><strong class="text-slate-700">Authority:</strong> {{ $application->service?->authority?->name_en ?? $latestSubmission?->authority_code ?? 'Not assigned' }}</span>
                                    <span><strong class="text-slate-700">Branch:</strong> {{ $application->branch?->name ?? 'Main branch' }}</span>
                                    <span><strong class="text-slate-700">Waiting:</strong> {{ ($application->stage_entered_at ?? $application->updated_at)->diffForHumans(null, true) }}</span>
                                </div>
                                @if($application->currentStage?->instructions)
                                    <p class="mt-3 line-clamp-2 rounded-xl bg-slate-50 px-3 py-2 text-[9px] leading-4 text-slate-500"><strong class="text-slate-700">Stage instruction:</strong> {{ $application->currentStage->instructions }}</p>
                                @endif
                            </div>

                            <div class="rounded-2xl border border-slate-100 bg-slate-50/80 p-3">
                                <div class="flex items-center justify-between gap-3">
                                    <div class="min-w-0"><p class="text-[8px] font-bold uppercase tracking-wider text-slate-400">Current stage</p><p class="mt-1 truncate text-[11px] font-bold text-[#0b1f38]">{{ $application->currentStage?->stage_name_en ?? 'Start stage' }}</p></div>
                                    <span class="shrink-0 rounded-lg bg-white px-2 py-1 text-[8px] font-black text-slate-500 shadow-sm">{{ $application->currentStage?->stage_code ?? 'START' }}</span>
                                </div>
                                <div class="mt-3 grid grid-cols-3 gap-1.5">
                                    <div class="rounded-lg {{ $documentsReady ? 'bg-emerald-50 text-emerald-700' : 'bg-amber-50 text-amber-700' }} px-2 py-2 text-center"><strong class="block text-[9px]">{{ $documentsReady ? 'Ready' : $application->pending_documents_count.' pending' }}</strong><span class="text-[7px] uppercase tracking-wider">Documents</span></div>
                                    <div class="rounded-lg {{ $paymentReady ? 'bg-emerald-50 text-emerald-700' : 'bg-rose-50 text-rose-700' }} px-2 py-2 text-center"><strong class="block text-[9px]">{{ $paymentReady ? 'Cleared' : 'On hold' }}</strong><span class="text-[7px] uppercase tracking-wider">Payment</span></div>
                                    <div class="rounded-lg {{ $application->open_tasks_count ? 'bg-blue-50 text-blue-700' : 'bg-slate-100 text-slate-500' }} px-2 py-2 text-center"><strong class="block text-[9px]">{{ $application->open_tasks_count }}</strong><span class="text-[7px] uppercase tracking-wider">Open tasks</span></div>
                                </div>
                                @if($latestSubmission)
                                    <div class="mt-2 flex items-center justify-between border-t border-slate-200 pt-2 text-[8px]"><span class="text-slate-400">Gov. attempt {{ $latestSubmission->attempt_number }}</span><span class="erp-status" data-status="{{ $latestSubmission->status }}">{{ str($latestSubmission->status)->replace('_', ' ')->title() }}</span></div>
                                @endif
                            </div>

                            <div class="flex flex-col gap-2 xl:items-stretch">
                                <div class="rounded-xl border {{ $isOverdue ? 'border-rose-200 bg-rose-50' : ($isRisk ? 'border-amber-200 bg-amber-50' : 'border-slate-200 bg-white') }} px-3 py-2.5">
                                    <p class="text-[8px] font-bold uppercase tracking-wider {{ $isOverdue ? 'text-rose-500' : ($isRisk ? 'text-amber-600' : 'text-slate-400') }}">{{ $isPaused ? 'SLA paused' : ($isOverdue ? 'SLA overdue' : 'Stage deadline') }}</p>
                                    <strong class="mt-1 block text-[11px] {{ $isOverdue ? 'text-rose-700' : 'text-slate-700' }}">{{ $isPaused ? str($application->sla_pause_reason)->replace('_', ' ')->title() : ($application->due_at?->diffForHumans() ?? 'Not configured') }}</strong>
                                    @if($application->due_at && !$isPaused)<span class="mt-0.5 block text-[8px] text-slate-400">{{ $application->due_at->format('d M Y, h:i A') }}</span>@endif
                                </div>
                                <a href="{{ route('app.applications.show', $application->id) }}" class="grid h-10 place-items-center rounded-xl bg-[#0b1f38] px-3 text-[10px] font-bold text-white transition hover:bg-orange-600">Open Application 360</a>
                                @if(!$application->assigned_user_id && auth()->user()->hasPermission('applications.assign'))
                                    <form method="POST" action="{{ route('app.applications.claim', $application->id) }}">@csrf<button class="h-10 w-full rounded-xl border border-orange-200 bg-orange-50 text-[10px] font-bold text-orange-700">Claim application</button></form>
                                @elseif($readyTransition)
                                    <form method="POST" action="{{ route('app.applications.transition', $application->id) }}">@csrf<input type="hidden" name="target_stage_id" value="{{ $readyTransition['to_stage_id'] }}"><button class="h-10 w-full rounded-xl border border-emerald-200 bg-emerald-50 px-2 text-[9px] font-bold text-emerald-700">{{ $readyTransition['action_name_en'] }}</button></form>
                                @elseif($blockedTransition && !empty($blockedTransition['blockers']))
                                    <p class="rounded-lg bg-amber-50 px-2.5 py-2 text-[8px] leading-3 text-amber-700">Blocked: {{ $blockedTransition['blockers'][0] }}</p>
                                @endif
                            </div>
                        </div>
                    </article>
                @empty
                    <div class="py-16 text-center">
                        <span class="mx-auto grid h-16 w-16 place-items-center rounded-2xl bg-emerald-50 text-lg font-black text-emerald-600">OK</span>
                        <h3 class="mt-4 text-base font-bold text-[#0b1f38]">Your work queue is clear</h3>
                        <p class="mx-auto mt-2 max-w-md text-xs leading-5 text-slate-400">There are no applications matching this view. Assigned typing work and government corrections will appear here automatically.</p>
                        @if(collect($filters)->filter()->isNotEmpty())<a href="{{ route('app.work_queue') }}" class="mt-4 inline-flex rounded-xl bg-[#0b1f38] px-4 py-2.5 text-[10px] font-bold text-white">Clear queue filters</a>@endif
                    </div>
                @endforelse
            </div>

            @if($applications->hasPages())
                <div class="border-t border-slate-100 px-4 py-4">{{ $applications->links() }}</div>
            @endif
        </section>

        <aside class="space-y-5" x-show="!focusMode" x-transition>
            <section class="rounded-[24px] border border-slate-200 bg-white p-5 shadow-sm">
                <div class="flex items-start justify-between"><div><h2 class="text-sm font-bold text-[#0b1f38]">Daily Output</h2><p class="mt-1 text-[9px] text-slate-400">Applications completed over 7 days.</p></div><span class="rounded-lg bg-emerald-50 px-2 py-1 text-[9px] font-bold text-emerald-600">{{ $metrics['completed_week'] }} this week</span></div>
                <div class="mt-5 flex h-36 items-end justify-between gap-2 rounded-2xl bg-slate-50 p-3">
                    @foreach($dailyOutput as $day)
                        @php($height = max(8, (int) round(($day['count'] / $dailyOutputMax) * 100)))
                        <div class="flex h-full flex-1 flex-col items-center justify-end gap-1.5">
                            <span class="text-[8px] font-bold text-slate-500">{{ $day['count'] }}</span>
                            <div class="w-full max-w-6 rounded-t-md {{ $day['date'] === today()->format('Y-m-d') ? 'bg-gradient-to-t from-orange-600 to-orange-400' : 'bg-gradient-to-t from-sky-700 to-sky-400' }}" style="height: {{ $height }}%"></div>
                            <span class="text-[7px] font-bold uppercase text-slate-400">{{ $day['label'] }}</span>
                        </div>
                    @endforeach
                </div>
                <div class="mt-4 grid grid-cols-2 gap-2">
                    <div class="rounded-xl border border-slate-100 p-3"><span class="text-[8px] font-bold uppercase text-slate-400">Avg. turnaround</span><strong class="mt-1 block text-sm text-[#0b1f38]">{{ $metrics['average_minutes'] === null ? 'No data' : ($metrics['average_minutes'] >= 1440 ? number_format($metrics['average_minutes'] / 1440, 1).' days' : ($metrics['average_minutes'] >= 60 ? number_format($metrics['average_minutes'] / 60, 1).' hrs' : $metrics['average_minutes'].' min')) }}</strong></div>
                    <div class="rounded-xl border border-slate-100 p-3"><span class="text-[8px] font-bold uppercase text-slate-400">On-time rate</span><strong class="mt-1 block text-sm text-[#0b1f38]">{{ $metrics['on_time_rate'] === null ? 'No data' : $metrics['on_time_rate'].'%' }}</strong></div>
                </div>
            </section>

            <section class="rounded-[24px] border border-slate-200 bg-white p-5 shadow-sm">
                <div class="flex items-center justify-between"><div><h2 class="text-sm font-bold text-[#0b1f38]">Workload by Stage</h2><p class="mt-1 text-[9px] text-slate-400">Your live workflow distribution.</p></div><span class="text-lg font-black text-orange-600">{{ $metrics['active'] }}</span></div>
                <div class="mt-4 space-y-3">
                    @forelse($stageBreakdown->take(6) as $stage)
                        <div>
                            <div class="flex items-center justify-between gap-3 text-[9px]"><span class="truncate font-bold text-slate-600">{{ $stage['name'] }}</span><strong class="text-[#0b1f38]">{{ $stage['total'] }}</strong></div>
                            <div class="mt-1.5 h-1.5 overflow-hidden rounded-full bg-slate-100"><div class="h-full rounded-full bg-gradient-to-r from-sky-600 to-orange-500" style="width: {{ $stage['percent'] }}%"></div></div>
                        </div>
                    @empty
                        <p class="rounded-xl bg-slate-50 px-3 py-4 text-center text-[9px] text-slate-400">No active stage workload.</p>
                    @endforelse
                </div>
            </section>

            <section class="rounded-[24px] border border-slate-200 bg-white p-5 shadow-sm">
                <div class="flex items-center justify-between"><div><h2 class="text-sm font-bold text-[#0b1f38]">My Workflow Tasks</h2><p class="mt-1 text-[9px] text-slate-400">Stage handoffs and follow-ups.</p></div><a href="{{ route('app.tasks.index') }}" class="text-[9px] font-bold text-orange-600">View all</a></div>
                <div class="mt-4 space-y-2.5">
                    @forelse($myTasks as $task)
                        <div class="rounded-xl border {{ $task->due_at?->isPast() ? 'border-rose-200 bg-rose-50/30' : 'border-slate-100 bg-slate-50/60' }} p-3">
                            <div class="flex items-start justify-between gap-2"><div class="min-w-0"><p class="truncate text-[10px] font-bold text-slate-700">{{ $task->title }}</p><p class="mt-1 text-[8px] text-slate-400">{{ $task->task_number }} · {{ $task->due_at?->diffForHumans() ?? 'No deadline' }}</p></div><span class="erp-status" data-status="{{ $task->priority }}">{{ ucfirst($task->priority) }}</span></div>
                            @if(auth()->user()->hasPermission('tasks.manage'))
                                <form method="POST" action="{{ route('app.tasks.status', $task->id) }}" class="mt-2 flex gap-1.5">@csrf<select name="status" class="erp-select-compact flex-1"><option value="in_progress">Start</option><option value="waiting">Waiting</option><option value="completed">Complete</option></select><button class="rounded-lg bg-[#0b1f38] px-2.5 text-[8px] font-bold text-white">Update</button></form>
                            @endif
                        </div>
                    @empty
                        <p class="rounded-xl bg-slate-50 px-3 py-5 text-center text-[9px] text-slate-400">No open workflow tasks.</p>
                    @endforelse
                </div>
            </section>

            <section class="rounded-[24px] border border-slate-200 bg-white p-5 shadow-sm">
                <div class="flex items-center justify-between"><div><h2 class="text-sm font-bold text-[#0b1f38]">Recent Completions</h2><p class="mt-1 text-[9px] text-slate-400">Your latest finished work.</p></div><span class="grid h-8 w-8 place-items-center rounded-xl bg-emerald-50 text-[9px] font-black text-emerald-600">DONE</span></div>
                <div class="mt-4 divide-y divide-slate-100">
                    @forelse($recentCompleted as $completed)
                        <a href="{{ route('app.applications.show', $completed->id) }}" class="flex items-center gap-3 py-2.5 first:pt-0 last:pb-0"><span class="grid h-8 w-8 shrink-0 place-items-center rounded-lg bg-slate-50 text-[8px] font-black text-slate-500">{{ str($completed->customer?->full_name_en ?? 'NA')->substr(0, 2)->upper() }}</span><span class="min-w-0 flex-1"><strong class="block truncate text-[9px] text-slate-700">{{ $completed->application_number }}</strong><small class="block truncate text-[8px] text-slate-400">{{ $completed->service?->name_en }}</small></span><time class="text-[8px] text-slate-400">{{ $completed->completed_at?->format('d M') }}</time></a>
                    @empty
                        <p class="rounded-xl bg-slate-50 px-3 py-5 text-center text-[9px] text-slate-400">Completed applications will appear here.</p>
                    @endforelse
                </div>
            </section>
        </aside>
    </div>
</div>
@endsection