@extends('layouts.app')

@section('content')

    @include('documents.top-submenu')

    <div class="mb-5 flex flex-wrap items-center justify-between gap-3">
        <div>
            <h1 class=" font-semibold uppercase tracking-[0.18em] text-primary">Documents Dashboard</h1>
            <p class="mt-1 text-sm text-slate-500">Track document health, expiry timelines, and compliance coverage.</p>
        </div>
    </div>

    <div class="space-y-6">
        <div class="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-5">
            <x-kpi-card title="Total Documents" :value="$kpis['total'] ?? 0" accent="slate" />
            <x-kpi-card title="Active" :value="$kpis['active'] ?? 0" accent="emerald" />
            <x-kpi-card title="Expiring Soon" :value="$kpis['expiring_soon'] ?? 0" tone="warning" accent="amber" />
            <x-kpi-card title="Expired" :value="$kpis['expired'] ?? 0" tone="critical" accent="rose" />
            <x-kpi-card title="Mandatory Missing" :value="$kpis['mandatory_missing'] ?? 0" accent="violet" />
        </div>

        <div class="flex flex-wrap gap-3">
            <a href="{{ route('documents.create') }}" class="inline-flex items-center gap-2 rounded-full border border-indigo-200 bg-indigo-50 px-3.5 py-1.5 text-sm font-medium text-indigo-800 shadow-sm transition hover:bg-indigo-100">Upload Document</a>
            <a href="{{ route('documents.index', ['status' => 'expired']) }}" class="inline-flex items-center gap-2 rounded-full border border-rose-200 bg-rose-50 px-3.5 py-1.5 text-sm font-medium text-rose-800 shadow-sm transition hover:bg-rose-100">View Expired</a>
            <a href="{{ route('documents.index', ['status' => 'expiring_soon']) }}" class="inline-flex items-center gap-2 rounded-full border border-amber-200 bg-amber-50 px-3.5 py-1.5 text-sm font-medium text-amber-900 shadow-sm transition hover:bg-amber-100">View Expiring Soon</a>
        </div>

        <div class="grid grid-cols-1 gap-6 xl:grid-cols-2">
            <div class="rounded-xl border border-slate-200 bg-white">
                <div class="border-b border-slate-200 px-4 py-3">
                    <h2 class="font-medium text-slate-800">Expiring Soon (30 Days)</h2>
                </div>
                <div class="overflow-x-auto">
                    <table class="min-w-full">
                        <thead class="bg-slate-50">
                            <tr>
                                <th class="px-4 py-2 text-left text-xs font-semibold uppercase text-slate-500">Document</th>
                                <th class="px-4 py-2 text-left text-xs font-semibold uppercase text-slate-500">Expiry</th>
                                <th class="px-4 py-2 text-left text-xs font-semibold uppercase text-slate-500">Owner</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($expiringSoon as $doc)
                                <tr class="border-t border-slate-100">
                                    <td class="px-4 py-2 text-sm text-slate-700">{{ $doc->name }}</td>
                                    <td class="px-4 py-2 text-sm text-slate-700">{{ optional($doc->expires_on)->format('M d, Y') ?: 'N/A' }}</td>
                                    <td class="px-4 py-2 text-sm text-slate-500">{{ $doc->uploader?->name ?? 'N/A' }}</td>
                                </tr>
                            @empty
                                <tr><td colspan="3" class="px-4 py-6 text-center text-sm text-slate-500">No documents expiring soon.</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="rounded-xl border border-slate-200 bg-white">
                <div class="border-b border-slate-200 px-4 py-3">
                    <h2 class="font-medium text-slate-800">Recently Uploaded</h2>
                </div>
                <div class="overflow-x-auto">
                    <table class="min-w-full">
                        <thead class="bg-slate-50">
                            <tr>
                                <th class="px-4 py-2 text-left text-xs font-semibold uppercase text-slate-500">Document</th>
                                <th class="px-4 py-2 text-left text-xs font-semibold uppercase text-slate-500">Category</th>
                                <th class="px-4 py-2 text-left text-xs font-semibold uppercase text-slate-500">Uploaded</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($recentDocuments as $doc)
                                <tr class="border-t border-slate-100">
                                    <td class="px-4 py-2 text-sm text-slate-700">{{ $doc->name }}</td>
                                    <td class="px-4 py-2 text-sm text-slate-700">{{ $doc->category ?? $doc->type ?? 'N/A' }}</td>
                                    <td class="px-4 py-2 text-sm text-slate-500">{{ optional($doc->created_at)->format('M d, Y') }}</td>
                                </tr>
                            @empty
                                <tr><td colspan="3" class="px-4 py-6 text-center text-sm text-slate-500">No recent documents yet.</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

@endsection