@extends('layouts.app')

@section('title', 'Customer Document Vault')

@section('content')
<div class="space-y-5">
    @include('tenant.partials.typist-page-nav')

    <section class="rounded-[28px] border border-violet-100 bg-gradient-to-br from-white via-violet-50 to-sky-50 p-6 shadow-sm sm:p-8">
        <div class="flex flex-col gap-5 lg:flex-row lg:items-end lg:justify-between">
            <div><span class="text-[11px] font-bold uppercase tracking-[0.18em] text-violet-700">Secure customer records</span><h1 class="mt-2 text-2xl font-bold tracking-tight text-slate-950 sm:text-3xl">Document vault</h1><p class="mt-2 max-w-2xl text-sm text-slate-600">Find passports, Emirates IDs, visas and certificates, then act before expiry interrupts a service.</p></div>
            <div class="flex gap-2"><a href="{{ route('app.renewals.index') }}" class="rounded-xl border border-violet-200 bg-white px-4 py-2.5 text-xs font-bold text-violet-700 shadow-sm">Renewal center</a><a href="{{ route('app.customers.index') }}" class="rounded-xl bg-slate-900 px-4 py-2.5 text-xs font-bold text-white">Open customers</a></div>
        </div>
    </section>

    <section class="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
        @foreach([
            ['Current documents', $metrics['total'], 'bg-violet-100 text-violet-700'],
            ['Valid beyond 60 days', $metrics['valid'], 'bg-emerald-100 text-emerald-700'],
            ['Expiring in 60 days', $metrics['expiring'], 'bg-orange-100 text-orange-700'],
            ['Expired', $metrics['expired'], 'bg-red-100 text-red-700'],
        ] as [$label, $value, $tone])
            <article class="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm"><div class="flex items-center justify-between"><span class="text-xs font-bold text-slate-600">{{ $label }}</span><span class="grid h-9 w-9 place-items-center rounded-xl {{ $tone }}">◆</span></div><strong class="mt-4 block text-2xl text-slate-950">{{ number_format($value) }}</strong></article>
        @endforeach
    </section>

    <form method="GET" class="grid gap-3 rounded-3xl border border-slate-200 bg-white p-4 shadow-sm md:grid-cols-4">
        <input name="q" value="{{ request('q') }}" class="rounded-xl border-slate-200 bg-slate-50 px-4 py-2.5 text-xs focus:border-violet-400 focus:ring-violet-200" placeholder="Search customer, document or number">
        <select name="expiry" class="rounded-xl border-slate-200 bg-slate-50 px-3 py-2.5 text-xs"><option value="">Any expiry status</option><option value="valid" @selected(request('expiry') === 'valid')>Valid</option><option value="expiring" @selected(request('expiry') === 'expiring')>Expiring in 60 days</option><option value="expired" @selected(request('expiry') === 'expired')>Expired</option></select>
        <select name="document_type_id" class="erp-input"><option value="">All document types</option>@foreach($documentTypes as $type)<option value="{{ $type->id }}" @selected(request('document_type_id')==$type->id)>{{ $type->name_en }}</option>@endforeach</select>
        <select name="verification_status" class="erp-input"><option value="">Any verification</option>@foreach(['pending_verification','verified','rejected'] as $v)<option value="{{ $v }}" @selected(request('verification_status')===$v)>{{ str($v)->replace('_',' ')->title() }}</option>@endforeach</select>
        <div class="flex gap-2"><button class="rounded-xl bg-slate-900 px-5 py-2.5 text-xs font-bold text-white">Search vault</button><a href="{{ route('app.customers.documents.index') }}" class="rounded-xl border border-slate-200 px-3 py-2.5 text-xs font-bold text-slate-500">Reset</a></div>
    </form>

    <section class="overflow-hidden rounded-3xl border border-slate-200 bg-white shadow-sm">
        <div class="overflow-x-auto">
            <table class="w-full min-w-[950px] text-left text-xs">
                <thead class="border-b border-slate-200 bg-slate-50 text-[10px] font-bold uppercase tracking-wider text-slate-500"><tr><th class="px-5 py-4">Customer</th><th class="px-5 py-4">Document</th><th class="px-5 py-4">Number</th><th class="px-5 py-4">Expiry</th><th class="px-5 py-4">Health</th><th class="px-5 py-4">Version</th><th class="px-5 py-4 text-right">Secure file</th></tr></thead>
                <tbody class="divide-y divide-slate-100">
                    @forelse($documents as $document)
                        @php
                            $expired = $document->expiry_date && $document->expiry_date->isPast();
                            $expiring = !$expired && $document->expiry_date && $document->expiry_date->lte(today()->addDays(60));
                            $healthLabel = $expired ? 'Expired' : ($expiring ? 'Expiring soon' : 'Valid');
                            $healthTone = $expired ? 'bg-red-100 text-red-700' : ($expiring ? 'bg-orange-100 text-orange-700' : 'bg-emerald-100 text-emerald-700');
                        @endphp
                        <tr class="hover:bg-violet-50/40">
                            <td class="px-5 py-4"><a href="{{ route('app.customers.show', $document->customer_id) }}" class="font-bold text-slate-900 hover:text-violet-700">{{ $document->customer?->full_name_en ?? 'Customer unavailable' }}</a><span class="mt-1 block text-[10px] text-slate-400">{{ $document->customer?->customer_code }} · {{ $document->customer?->contact?->primary_mobile ?? 'No mobile' }}</span></td>
                            <td class="px-5 py-4"><strong class="block text-slate-800">{{ $document->document_name }}</strong><span class="mt-1 block text-[10px] text-slate-400">{{ $document->documentType?->name_en ?? 'Customer document' }}</span></td>
                            <td class="px-5 py-4 font-mono text-slate-600">{{ $document->document_number ?: 'Not recorded' }}</td>
                            <td class="px-5 py-4"><strong class="block text-slate-800">{{ $document->expiry_date?->format('d M Y') ?? 'No expiry' }}</strong>@if($document->expiry_date)<span class="mt-1 block text-[10px] text-slate-400">{{ $document->expiry_date->diffForHumans() }}</span>@endif</td>
                            <td class="px-5 py-4"><span class="rounded-full px-2.5 py-1 text-[9px] font-bold uppercase {{ $healthTone }}">{{ $healthLabel }}</span></td>
                            <td class="px-5 py-4 text-slate-500">v{{ $document->version }}<small class="block">{{ str($document->verification_status)->replace('_',' ')->title() }}</small></td>
                            <td class="px-5 py-4 text-right"><div class="flex justify-end gap-2"><a href="{{ route('app.customers.documents.preview',$document) }}" target="_blank">Preview</a><a href="{{ route('app.customers.documents.download',$document) }}">Download</a><a href="{{ route('app.customers.documents.history',$document) }}">History</a>@if($document->verification_status==='pending_verification')<form method="POST" action="{{ route('app.customers.documents.review',$document) }}">@csrf<input type="hidden" name="decision" value="verified"><button class="font-bold text-emerald-700">Verify</button></form>@endif</div></td>
                        </tr>
                    @empty
                        <tr><td colspan="7" class="px-6 py-16 text-center"><strong class="block text-base text-slate-700">No documents found</strong><span class="mt-2 block text-sm text-slate-400">Adjust the filters or upload documents from a customer profile.</span><a href="{{ route('app.customers.index') }}" class="mt-4 inline-flex rounded-xl bg-violet-600 px-4 py-2 text-xs font-bold text-white">Find a customer</a></td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($documents->hasPages())<div class="border-t border-slate-100 px-5 py-4">{{ $documents->links() }}</div>@endif
    </section>
</div>
@endsection