<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>E-Certificate Portal</title>
    <!-- Menggunakan Tailwind CSS CDN untuk styling cepat dan modern -->
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-100 flex items-center justify-center min-h-screen">

    <div class="max-w-md w-full bg-white rounded-2xl shadow-xl p-8 border border-slate-200">
        <!-- Ikon Sertifikat -->
        <div class="flex justify-center mb-6">
            <div class="p-4 bg-amber-50 rounded-full text-amber-500">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" 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>
            </div>
        </div>

        <!-- Informasi Sertifikat -->
        <div class="text-center mb-8">
            <h1 class="text-2xl font-bold text-slate-800">Sertifikat Kelulusan</h1>
            <p class="text-slate-500 mt-2">Selamat! Sertifikat Anda telah diterbitkan dan siap diakses.</p>
            
            <div class="mt-4 p-4 bg-slate-50 rounded-lg text-left border border-slate-100">
                <div class="text-xs text-slate-400 uppercase tracking-wider font-semibold">Nama Peserta</div>
                <div class="text-slate-700 font-medium">Budi Setiawan, S.Kom</div>
                
                <div class="text-xs text-slate-400 uppercase tracking-wider font-semibold mt-3">Kelas</div>
                <div class="text-slate-700 font-medium">Mastering Laravel 12 & Modern Web Development</div>
            </div>
        </div>

        <!-- Tombol Aksi -->
        <div class="space-y-3">
            <!-- Tombol Pratinjau (Membuka di tab baru) -->
            <a href="{{ route('certificate.preview') }}" target="_blank" 
               class="flex items-center justify-center gap-2 w-full py-3 px-4 bg-slate-800 hover:bg-slate-900 text-white font-medium rounded-xl transition duration-200 shadow-md">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                    <path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                </svg>
                Lihat Sertifikat
            </a>

            <!-- Tombol Download Langsung -->
            <a href="{{ route('certificate.download') }}" 
               class="flex items-center justify-center gap-2 w-full py-3 px-4 bg-amber-500 hover:bg-amber-600 text-white font-medium rounded-xl transition duration-200 shadow-md">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                </svg>
                Download PDF
            </a>
        </div>
        
        <p class="text-center text-xs text-slate-400 mt-6">Sistem E-Sertifikat v12.0</p>
    </div>

</body>
</html>