@extends('layouts.front')

@section('title', 'Verifikasi Sertifikat — AAI')

@section('content')
<div class="min-h-[60vh] flex items-center justify-center py-16 px-4">
    <div class="w-full max-w-lg">
        @if($certificate)
            {{-- Sertifikat Ditemukan --}}
            <div class="bg-white dark:bg-slate-900 rounded-2xl shadow-xl border border-slate-200 dark:border-slate-800 overflow-hidden">
                {{-- Header --}}
                <div class="bg-gradient-to-r from-green-500 to-emerald-600 px-6 py-5 text-center">
                    <div class="w-16 h-16 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center mx-auto mb-3">
                        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                    </div>
                    <h1 class="text-xl font-bold text-white">Sertifikat Terverifikasi</h1>
                    <p class="text-green-100 text-sm mt-1">Sertifikat ini diterbitkan secara sah oleh PN-AAI</p>
                </div>

                {{-- Body --}}
                <div class="px-6 py-6 space-y-4">
                    <div class="text-center pb-4 border-b border-slate-200 dark:border-slate-800">
                        <p class="text-sm text-slate-500 dark:text-slate-400">Pemegang Sertifikat</p>
                        <p class="text-xl font-bold text-slate-900 dark:text-white mt-1">{{ $holderName }}</p>
                    </div>

                    <div class="space-y-3">
                        <div class="flex justify-between items-center text-sm">
                            <span class="text-slate-500 dark:text-slate-400">Nomor Sertifikat</span>
                            <span class="font-semibold text-slate-800 dark:text-slate-200 font-mono">{{ $certificateNumber }}</span>
                        </div>

                        <div class="flex justify-between items-center text-sm">
                            <span class="text-slate-500 dark:text-slate-400">Tanggal Terbit</span>
                            <span class="font-semibold text-slate-800 dark:text-slate-200">{{ $issuedAt?->translatedFormat('d F Y') ?? '-' }}</span>
                        </div>

                        @if($expiredAt)
                            <div class="flex justify-between items-center text-sm">
                                <span class="text-slate-500 dark:text-slate-400">Masa Berlaku</span>
                                <span class="font-semibold {{ $expiredAt->isPast() ? 'text-red-600' : 'text-slate-800 dark:text-slate-200' }}">
                                    {{ $expiredAt->translatedFormat('d F Y') }}
                                    @if($expiredAt->isPast())
                                        <span class="text-xs text-red-500">(Kedaluwarsa)</span>
                                    @endif
                                </span>
                            </div>
                        @endif

                        @foreach($extra as $label => $value)
                            <div class="flex justify-between items-center text-sm">
                                <span class="text-slate-500 dark:text-slate-400">{{ $label }}</span>
                                <span class="font-semibold text-slate-800 dark:text-slate-200">{{ $value }}</span>
                            </div>
                        @endforeach
                    </div>
                </div>

                {{-- Footer --}}
                <div class="bg-slate-50 dark:bg-slate-800/50 px-6 py-4 text-center">
                    <p class="text-xs text-slate-500 dark:text-slate-400">
                        Diterbitkan oleh Pengurus Nasional Asosiasi Arsiparis Indonesia (PN-AAI)
                    </p>
                </div>
            </div>
        @else
            {{-- Sertifikat Tidak Ditemukan --}}
            <div class="bg-white dark:bg-slate-900 rounded-2xl shadow-xl border border-slate-200 dark:border-slate-800 overflow-hidden">
                <div class="bg-gradient-to-r from-red-500 to-rose-600 px-6 py-5 text-center">
                    <div class="w-16 h-16 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center mx-auto mb-3">
                        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                    </div>
                    <h1 class="text-xl font-bold text-white">Sertifikat Tidak Ditemukan</h1>
                    <p class="text-red-100 text-sm mt-1">Nomor sertifikat tidak terdaftar dalam sistem kami</p>
                </div>

                <div class="px-6 py-6 text-center">
                    <p class="text-sm text-slate-600 dark:text-slate-400 mb-4">
                        Nomor <span class="font-mono font-semibold">{{ $certificateNumber }}</span> tidak ditemukan.
                        Pastikan QR Code yang di-scan benar, atau hubungi sekretariat PN-AAI.
                    </p>
                    <a href="{{ route('front.home') }}" class="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl bg-amber-500 hover:bg-amber-600 text-white dark:text-slate-950 font-bold text-sm transition-colors">
                        Kembali ke Beranda
                    </a>
                </div>
            </div>
        @endif
    </div>
</div>
@endsection