@extends('layouts.admin')
@section('title', 'CRM SLA')
@section('content')
@php
  $tone = fn ($s) => match ($s) { 'met' => 'success', 'breached' => 'danger', 'warned' => 'warning', default => 'info' };
  $pills = [
    ['label' => 'All', 'url' => route('admin.crm.sla.index'), 'active' => ! request('status')],
    ['label' => 'Active', 'url' => route('admin.crm.sla.index', ['status' => 'running']), 'active' => request('status') === 'running', 'count' => $stats['active']],
    ['label' => 'Breached', 'url' => route('admin.crm.sla.index', ['status' => 'breached']), 'active' => request('status') === 'breached', 'count' => $stats['breached']],
    ['label' => 'Met', 'url' => route('admin.crm.sla.index', ['status' => 'met']), 'active' => request('status') === 'met', 'count' => $stats['met']],
  ];
@endphp
<x-crm.shell title="SLA dashboard" subtitle="Lead acceptance and quote turnaround clocks with breach visibility.">
    <x-slot:stats>
        <x-crm.stat label="Active clocks" :value="$stats['active']" />
        <x-crm.stat label="Breached" :value="$stats['breached']" :tone="$stats['breached'] ? 'danger' : null" :href="route('admin.crm.sla.index', ['status' => 'breached'])" />
        <x-crm.stat label="Met" :value="$stats['met']" tone="success" />
        <x-crm.stat label="Policies" :value="$stats['policies']" />
    </x-slot:stats>
    <x-slot:filters>
        <x-crm.pills :items="$pills" />
    </x-slot:filters>

    <div class="space-y-5 p-4 sm:p-6 lg:px-8">
        <div class="grid gap-3 md:grid-cols-3">
            @forelse($policies as $policy)
                <div class="rounded-2xl border border-[var(--color-admin-border)] bg-white p-4 shadow-[var(--admin-shadow)] crm-fade-in">
                    <div class="text-sm font-semibold">{{ $policy->name }}</div>
                    <div class="mt-1 text-2xl font-semibold tabular-nums">{{ $policy->target_minutes }}<span class="text-sm font-normal text-[#6d7175]"> min</span></div>
                    <div class="mt-1 text-xs text-[#6d7175]">{{ $policy->metric ?? 'response' }}</div>
                </div>
            @empty
                <div class="md:col-span-3"><x-admin.empty title="No SLA policies" /></div>
            @endforelse
        </div>

        <section class="rounded-2xl border border-[var(--color-admin-border)] bg-white shadow-[var(--admin-shadow)] overflow-hidden">
            <div class="border-b border-[var(--color-admin-border)] px-5 py-3">
                <h2 class="text-sm font-semibold tracking-tight">Active & recent clocks</h2>
            </div>
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead class="bg-[#f6f6f7] text-left text-xs text-[#6d7175]">
                        <tr>
                            <th class="p-3 font-medium">Policy</th>
                            <th class="p-3 font-medium">Started</th>
                            <th class="p-3 font-medium">Due</th>
                            <th class="p-3 font-medium">Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($clocks as $clock)
                            <tr class="border-t border-[var(--color-admin-border)] {{ $clock->status === 'breached' ? 'bg-red-50/40' : '' }}">
                                <td class="p-3 font-medium">{{ $clock->policy?->name ?? '—' }}</td>
                                <td class="p-3 text-[#6d7175]">{{ $clock->started_at?->format('d M Y H:i') }}</td>
                                <td class="p-3">{{ $clock->due_at?->format('d M Y H:i') }}</td>
                                <td class="p-3"><x-admin.badge :tone="$tone($clock->status)">{{ $clock->status }}</x-admin.badge></td>
                            </tr>
                        @empty
                            <tr><td colspan="4" class="p-6 text-[#6d7175]">No SLA clocks yet.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            <div class="border-t border-[var(--color-admin-border)] px-5 py-3">{{ $clocks->links() }}</div>
        </section>
    </div>
</x-crm.shell>
@endsection