@extends('layouts.app')

@section('title', 'Verifikasi Sertifikat')
@section('meta_description', 'Verifikasi keaslian sertifikat pelatihan dari Instrudigi')

@section('content')
{{-- Hero Section --}}
<section class="relative py-28 overflow-hidden -mt-20 pt-28">
    <div class="absolute inset-0 hero-gradient"></div>
    <div class="hero-mesh"></div>
    <div class="max-w-4xl mx-auto px-4 sm:px-6 relative z-10 text-center">
        @if($participant->status === 'completed')
        {{-- Verified Badge --}}
        <div class="inline-flex items-center gap-2 bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 px-5 py-2.5 rounded-full text-sm font-semibold mb-6 backdrop-blur-sm">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/></svg>
            Sertifikat Terverifikasi
        </div>
        @else
        <div class="inline-flex items-center gap-2 bg-amber-500/10 border border-amber-500/20 text-amber-400 px-5 py-2.5 rounded-full text-sm font-semibold mb-6 backdrop-blur-sm">
            <svg class="w-5 h-5" 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>
            Peserta {{ $participant->status_label }}
        </div>
        @endif

        <h1 class="text-display text-3xl md:text-4xl text-white mb-3" style="animation: textReveal 1s ease forwards;">
            {{ $participant->training->title }}
        </h1>
        <p class="text-white/50 text-sm">Kode Sertifikat: <span class="font-mono text-white/70">{{ $participant->certificate_code }}</span></p>
    </div>
    <div class="wave-divider"><svg viewBox="0 0 1200 120" preserveAspectRatio="none" fill="#fafbfd"><path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V120H0V95.8C57.1,118.92,156.63,69.08,321.39,56.44Z"/></svg></div>
</section>

{{-- Main Content --}}
<section class="py-16 -mt-8">
    <div class="max-w-4xl mx-auto px-4 sm:px-6">

        @if($participant->status === 'completed')
        {{-- Success Banner --}}
        <div class="bg-gradient-to-r from-emerald-50 to-teal-50 border border-emerald-200 rounded-2xl p-6 mb-8 flex items-start gap-4">
            <div class="w-12 h-12 bg-emerald-100 rounded-xl flex items-center justify-center flex-shrink-0">
                <svg class="w-6 h-6 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
            </div>
            <div>
                <h3 class="font-heading font-bold text-emerald-800 text-lg">Sertifikat Valid & Terverifikasi</h3>
                <p class="text-emerald-600 text-sm mt-1">Sertifikat ini mengonfirmasi bahwa peserta telah menyelesaikan pelatihan yang diselenggarakan oleh Instrudigi.</p>
            </div>
        </div>
        @endif

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            {{-- Left: Info Peserta --}}
            <div class="lg:col-span-2 space-y-6">

                {{-- Info Peserta --}}
                <div class="bg-white rounded-2xl border border-gray-100 overflow-hidden shadow-sm">
                    <div class="px-6 py-4 bg-gradient-to-r from-gray-50 to-white border-b border-gray-100">
                        <h2 class="font-heading font-bold text-gray-800 flex items-center gap-2">
                            <svg class="w-5 h-5 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
                            Informasi Peserta
                        </h2>
                    </div>
                    <div class="p-6">
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-y-5 gap-x-8">
                            <div>
                                <p class="text-xs text-gray-400 font-semibold uppercase tracking-wider">Nama Peserta</p>
                                <p class="text-gray-800 font-bold text-lg mt-1">{{ $participant->participant_name }}</p>
                            </div>
                            <div>
                                <p class="text-xs text-gray-400 font-semibold uppercase tracking-wider">Status</p>
                                <span class="inline-flex items-center gap-1.5 mt-1 px-3 py-1 rounded-full text-sm font-semibold
                                    {{ $participant->status === 'completed' ? 'bg-emerald-50 text-emerald-700' : ($participant->status === 'in_progress' ? 'bg-amber-50 text-amber-700' : 'bg-gray-100 text-gray-600') }}">
                                    <span class="w-2 h-2 rounded-full {{ $participant->status === 'completed' ? 'bg-emerald-500' : ($participant->status === 'in_progress' ? 'bg-amber-500' : 'bg-gray-400') }}"></span>
                                    {{ $participant->status_label }}
                                </span>
                            </div>
                            @if($participant->participant_institution)
                            <div>
                                <p class="text-xs text-gray-400 font-semibold uppercase tracking-wider">Asal Instansi</p>
                                <p class="text-gray-700 mt-1">{{ $participant->participant_institution }}</p>
                            </div>
                            @endif
                            <div>
                                <p class="text-xs text-gray-400 font-semibold uppercase tracking-wider">Nama Pelatihan</p>
                                <p class="text-gray-700 mt-1">{{ $participant->training->title }}</p>
                            </div>
                            @if($participant->completed_at)
                            <div>
                                <p class="text-xs text-gray-400 font-semibold uppercase tracking-wider">Tanggal Selesai</p>
                                <p class="text-gray-700 mt-1">{{ $participant->completed_at->translatedFormat('d F Y') }}</p>
                            </div>
                            @endif
                            <div>
                                <p class="text-xs text-gray-400 font-semibold uppercase tracking-wider">Kode Sertifikat</p>
                                <p class="text-gray-700 mt-1 font-mono text-sm bg-gray-50 inline-block px-3 py-1 rounded-lg">{{ $participant->certificate_code }}</p>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Konfirmasi Pejabat --}}
                @if($participant->status === 'completed' && ($participant->known_by || $participant->signed_by))
                <div class="bg-white rounded-2xl border border-gray-100 overflow-hidden shadow-sm">
                    <div class="px-6 py-4 bg-gradient-to-r from-gray-50 to-white border-b border-gray-100">
                        <h2 class="font-heading font-bold text-gray-800 flex items-center gap-2">
                            <svg class="w-5 h-5 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
                            Konfirmasi Dokumen
                        </h2>
                    </div>
                    <div class="p-6">
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
                            @if($participant->known_by)
                            <div class="text-center p-6 bg-gradient-to-br from-gray-50 to-white rounded-xl border border-gray-100">
                                <p class="text-xs text-gray-400 font-semibold uppercase tracking-wider mb-4">Mengetahui</p>
                                <div class="w-16 h-0.5 bg-gray-300 mx-auto mb-4"></div>
                                <p class="text-gray-800 font-bold text-base">{{ $participant->known_by }}</p>
                                <p class="text-gray-500 text-sm mt-1">{{ $participant->known_by_title }}</p>
                            </div>
                            @endif
                            @if($participant->signed_by)
                            <div class="text-center p-6 bg-gradient-to-br from-gray-50 to-white rounded-xl border border-gray-100">
                                <p class="text-xs text-gray-400 font-semibold uppercase tracking-wider mb-4">Menandatangani</p>
                                <div class="w-16 h-0.5 bg-gray-300 mx-auto mb-4"></div>
                                <p class="text-gray-800 font-bold text-base">{{ $participant->signed_by }}</p>
                                <p class="text-gray-500 text-sm mt-1">{{ $participant->signed_by_title }}</p>
                            </div>
                            @endif
                        </div>
                    </div>
                </div>
                @endif
            </div>

            {{-- Right: Sidebar --}}
            <div class="space-y-6">
                {{-- Info Pelatihan --}}
                <div class="bg-white rounded-2xl border border-gray-100 overflow-hidden shadow-sm">
                    <div class="px-6 py-4 bg-gradient-to-r from-gray-50 to-white border-b border-gray-100">
                        <h3 class="font-heading font-bold text-gray-800 text-sm flex items-center gap-2">
                            <svg class="w-4 h-4 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.26 10.147a60.436 60.436 0 00-.491 6.347A48.627 48.627 0 0112 20.904a48.627 48.627 0 018.232-4.41 60.46 60.46 0 00-.491-6.347"/></svg>
                            Detail Pelatihan
                        </h3>
                    </div>
                    <div class="p-6 space-y-4">
                        @if($participant->training->schedule)
                        <div>
                            <p class="text-xs text-gray-400 font-semibold uppercase tracking-wider">Jadwal</p>
                            <p class="text-gray-700 text-sm mt-1">{{ $participant->training->schedule }}</p>
                        </div>
                        @endif
                        @if($participant->training->target_audience)
                        <div>
                            <p class="text-xs text-gray-400 font-semibold uppercase tracking-wider">Target Peserta</p>
                            <p class="text-gray-700 text-sm mt-1">{{ $participant->training->target_audience }}</p>
                        </div>
                        @endif
                    </div>
                </div>

                {{-- Issued by --}}
                <div class="bg-gradient-to-br from-primary-950 to-[#0c1b33] rounded-2xl p-6 text-center">
                    <img src="{{ asset('images/logo.png') }}" alt="Instrudigi" class="w-12 h-12 mx-auto mb-3">
                    <p class="text-white font-heading font-bold text-sm">Instru<span class="text-accent">digi</span></p>
                    <p class="text-white/40 text-xs mt-2 leading-relaxed">Sertifikat ini diterbitkan secara resmi oleh Instrudigi sebagai bukti keikutsertaan pelatihan.</p>
                    <div class="mt-4 pt-4 border-t border-white/10">
                        <p class="text-white/30 text-[10px] uppercase tracking-wider">Diterbitkan</p>
                        <p class="text-white/60 text-xs mt-1">{{ $participant->completed_at ? $participant->completed_at->translatedFormat('d F Y') : $participant->created_at->translatedFormat('d F Y') }}</p>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>
@endsection