@extends('layouts.app')

@section('title', 'Processing Control Tower')

@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">Quality, approvals & SLA control</p><h1 class="mt-1 text-2xl font-bold text-[#0b1f38]">Processing Control Tower</h1><p class="mt-1 text-xs text-slate-500">Review verified submissions, returned cases and service bottlenecks.</p></div><div class="flex gap-2"><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">Workflow Board</a><a href="{{ route('app.tasks.index') }}" class="rounded-xl bg-orange-600 px-4 py-2.5 text-xs font-bold text-white">Tasks & Approvals</a></div></header>

    <section class="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
        <article class="erp-kpi-card"><div class="erp-kpi-icon bg-blue-50 text-blue-600">R</div><div><p>Ready for Review</p><strong>{{ number_format($metrics['ready_review']) }}</strong><small>Verified or submitted cases</small></div></article>
        <article class="erp-kpi-card"><div class="erp-kpi-icon bg-emerald-50 text-emerald-600">✓</div><div><p>Approved Today</p><strong>{{ number_format($metrics['approved_today']) }}</strong><small>Completed applications</small></div></article>
        <article class="erp-kpi-card"><div class="erp-kpi-icon bg-amber-50 text-amber-600">↩</div><div><p>Returned Today</p><strong>{{ number_format($metrics['returned_today']) }}</strong><small>Requires rework</small></div></article>
        <article class="erp-kpi-card"><div class="erp-kpi-icon bg-rose-50 text-rose-600">!</div><div><p>SLA Warnings</p><strong>{{ number_format($metrics['sla_warnings']) }}</strong><small>Due within four hours or overdue</small></div></article>
    </section>

    <section class="erp-panel">
        <div class="erp-panel-heading"><div><h2>Supervisor Review Queue</h2><p>Open the 360° workspace to verify evidence and execute an allowed workflow transition.</p></div><span class="text-[10px] font-bold text-slate-400">{{ $applications->total() }} awaiting review</span></div>
        <div class="mt-4 overflow-x-auto"><table class="erp-table"><thead><tr><th>Application</th><th>Customer</th><th>Service</th><th>Current Stage</th><th>Assigned Typist</th><th>SLA / Priority</th><th>Review</th></tr></thead><tbody>
            @forelse($applications as $application)
                <tr>
                    <td><strong class="text-orange-600">{{ $application->application_number }}</strong><small>{{ $application->created_at->format('d M Y, h:i A') }}</small></td>
                    <td><strong>{{ $application->customer?->full_name_en ?? 'Customer unavailable' }}</strong><small>{{ $application->customer?->primary_mobile }}</small></td>
                    <td><strong>{{ $application->service?->name_en ?? 'Unassigned service' }}</strong><small>Documents: {{ str($application->document_status)->replace('_',' ')->title() }}</small></td>
                    <td><strong>{{ $application->currentStage?->stage_name_en ?? 'Start stage' }}</strong><small><span class="erp-status" data-status="{{ $application->status }}">{{ ucfirst($application->status) }}</span></small></td>
                    <td><strong>{{ $application->assignedUser?->name ?? 'Unassigned' }}</strong></td>
                    <td><strong class="{{ $application->due_at?->isPast() ? 'text-rose-600' : '' }}">{{ $application->due_at?->diffForHumans() ?? 'No SLA deadline' }}</strong><small>{{ ucfirst($application->priority) }} priority</small></td>
                    <td><a href="{{ route('app.applications.show', $application->id) }}" class="rounded-lg bg-[#0b1f38] px-3 py-2 text-[10px] font-bold text-white">Review 360°</a></td>
                </tr>
            @empty
                <tr><td colspan="7"><div class="erp-empty"><span>✓</span><strong>No applications need supervisor review</strong><p>Verified and submitted cases will appear here automatically.</p></div></td></tr>
            @endforelse
        </tbody></table></div>
        <div class="mt-4">{{ $applications->links() }}</div>
    </section>
</div>
@endsection