@extends('layouts.app')

@section('title', 'Customer Service 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">Customer experience & case visibility</p><h1 class="mt-1 text-2xl font-bold text-[#0b1f38]">Customer Service Command Center</h1><p class="mt-1 text-xs text-slate-500">Answer inquiries using live application status and a complete communication trail.</p></div><div class="flex gap-2"><a href="{{ route('app.customers.index') }}" class="rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-xs font-bold text-slate-700">Customer 360</a>@if(auth()->user()->hasPermission('communications.view'))<a href="{{ route('app.communications.index') }}" class="rounded-xl bg-orange-600 px-4 py-2.5 text-xs font-bold text-white">Communication Center</a>@endif</div></header>

    <section class="grid gap-3 sm:grid-cols-2 xl:grid-cols-5">
        @foreach([
            ['Active Applications',$metrics['active_applications'],'text-blue-600'], ['Returned Cases',$metrics['returned_cases'],'text-amber-600'],
            ['Incoming (7 Days)',$metrics['incoming_messages'],'text-emerald-600'], ['Queued Updates',$metrics['queued_updates'],'text-violet-600'],
            ['Upcoming Visits',$metrics['appointments'],'text-orange-600']
        ] as [$label,$value,$color])
            <article class="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm"><p class="text-[9px] font-bold uppercase tracking-wider text-slate-400">{{ $label }}</p><strong class="mt-2 block text-2xl {{ $color }}">{{ number_format($value) }}</strong></article>
        @endforeach
    </section>

    <div class="grid gap-5 xl:grid-cols-2">
        <section class="erp-panel"><div class="erp-panel-heading"><div><h2>Cases Requiring Visibility</h2><p>Latest open customer applications and current workflow stages.</p></div><a href="{{ route('app.applications.index') }}">View directory</a></div><div class="mt-4 overflow-x-auto"><table class="erp-table"><thead><tr><th>Application</th><th>Customer</th><th>Service / Stage</th><th>Status</th></tr></thead><tbody>
            @forelse($recentApplications as $application)
                <tr><td><a href="{{ route('app.applications.show', $application->id) }}" class="font-bold text-orange-600">{{ $application->application_number }}</a><small>{{ $application->created_at->diffForHumans() }}</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>{{ $application->currentStage?->stage_name_en ?? 'Start stage' }}</small></td><td><span class="erp-status" data-status="{{ $application->status }}">{{ str($application->status)->replace('_',' ')->title() }}</span></td></tr>
            @empty
                <tr><td colspan="4"><div class="erp-empty"><span>C</span><strong>No active customer cases</strong><p>Open applications will appear here.</p></div></td></tr>
            @endforelse
        </tbody></table></div></section>

        <section class="erp-panel"><div class="erp-panel-heading"><div><h2>Recent Conversations</h2><p>Omnichannel messages with delivery status and record links.</p></div>@if(auth()->user()->hasPermission('communications.view'))<a href="{{ route('app.communications.index') }}">Open center</a>@endif</div><div class="mt-4 divide-y divide-slate-100">
            @forelse($recentCommunications as $message)
                <article class="flex gap-3 py-3 first:pt-0"><div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-orange-50 text-[10px] font-bold uppercase text-orange-600">{{ substr($message->channel,0,2) }}</div><div class="min-w-0 flex-1"><div class="flex items-start justify-between gap-3"><strong class="truncate text-xs text-[#0b1f38]">{{ $message->customer?->full_name_en ?? $message->recipient }}</strong><span class="erp-status" data-status="{{ $message->status }}">{{ ucfirst($message->status) }}</span></div><p class="mt-1 truncate text-[10px] text-slate-500">{{ $message->subject ?: str($message->message)->limit(90) }}</p><small class="mt-1 block text-[9px] text-slate-400">{{ ucfirst($message->direction) }} · {{ ucfirst($message->channel) }} · {{ $message->created_at->diffForHumans() }}</small></div></article>
            @empty
                <div class="erp-empty"><span>M</span><strong>No communication history</strong><p>Messages sent through the communication center will be logged here.</p></div>
            @endforelse
        </div></section>
    </div>
</div>
@endsection