@extends('layouts.site')

@section('title', 'Certificat de Réussite - ' . $enrollment->course->title)

@push('head')
 <style>
     @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Outfit:wght@300;400;600;900&display=swap');

     body { font-family: 'Outfit', sans-serif; }
     .cert-font { font-family: 'Cinzel', serif; }

     .certificate-container {
         width: 1000px;
         height: 700px;
         background: #fff;
         position: relative;
         padding: 40px;
         border: 20px solid #1e40af; /* blue-800 */
         box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
     }

     .inner-border {
         border: 2px solid #3b82f6; /* blue-500 */
         height: 100%;
         width: 100%;
         padding: 40px;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         text-align: center;
         position: relative;
     }

     .watermark {
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%) rotate(-45deg);
         font-size: 8rem;
         color: rgba(30, 64, 175, 0.03);
         font-weight: 900;
         pointer-events: none;
         z-index: 0;
         white-space: nowrap;
     }

     .seal {
         width: 120px;
         height: 120px;
         background: linear-gradient(135deg, #fbbf24 0%, #b45309 100%);
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
         position: absolute;
         bottom: 40px;
         right: 40px;
     }

     @media print {
         body { background: white; }
         .no-print { display: none; }
         .certificate-container { box-shadow: none; border: 15px solid #1e40af !important; }
     }
 </style>
@endpush

@section('content')
 <div class="bg-gray-100 flex items-center justify-center min-h-screen p-8">
    <div class="no-print absolute top-8 right-8 flex gap-4">
        <button onclick="window.print()" class="bg-blue-600 text-white px-6 py-2 rounded-full font-bold shadow-lg hover:bg-blue-700 transition">Imprimer le Certificat</button>
        <a href="{{ route('dashboard') }}" class="bg-white text-gray-700 px-6 py-2 rounded-full font-bold border border-gray-200 hover:bg-gray-50 transition">Retour au dashboard</a>
    </div>

    <div class="certificate-container bg-white">
        <div class="inner-border">
            <div class="watermark">SCIENCES AFRIQUE</div>
            
            <div class="flex items-center gap-4 mb-8">
                <div class="w-16 h-16 bg-blue-600 rounded-2xl flex items-center justify-center">
                    <span class="text-white font-black text-2xl">U</span>
                </div>
                <div class="text-left">
                    <h2 class="text-2xl font-black tracking-tighter text-gray-900">SCIENCES AFRIQUE</h2>
                    <p class="text-[10px] font-bold text-blue-600 tracking-[0.2em] uppercase">Université d'Excellence Technologique</p>
                </div>
            </div>

            <h1 class="cert-font text-5xl font-bold text-blue-900 mb-4 tracking-widest uppercase">CERTIFICAT DE RÉUSSITE</h1>
            
            <p class="text-gray-500 italic text-xl mb-12">Le présent certificat est fièrement décerné à</p>

            <h2 class="text-6xl font-black text-gray-900 mb-8 tracking-tight">{{ strtoupper($enrollment->user->name) }}</h2>

            <div class="w-24 h-1 bg-blue-600 mb-8"></div>

            <p class="text-gray-600 max-w-2xl text-lg leading-relaxed mb-12">
                Pour avoir complété avec succès et brio le cursus certifiant en <br>
                <span class="font-bold text-gray-900 text-2xl mt-2 block">{{ $enrollment->course->title }}</span>
                <span class="text-sm text-gray-400 block mt-2">{{ $enrollment->course->department->faculty->name }}</span>
            </p>

            <div class="flex justify-between w-full px-12 mt-8 items-end relative z-10">
                <div class="text-center">
                    <div class="w-48 h-px bg-gray-300 mb-2 mx-auto"></div>
                    <p class="text-xs font-bold text-gray-900">Dr. Amadou Diallo</p>
                    <p class="text-[10px] text-gray-400 uppercase tracking-widest">Doyen de la Faculté</p>
                </div>
                
                <div class="text-center">
                    <p class="text-xs font-bold text-gray-900 italic mb-1">{{ $enrollment->created_at->format('d/m/Y') }}</p>
                    <div class="w-48 h-px bg-gray-300 mb-2 mx-auto"></div>
                    <p class="text-[10px] text-gray-400 uppercase tracking-widest">Date de délivrance</p>
                </div>
            </div>

            <div class="seal">
                <div class="w-20 h-20 border-2 border-dashed border-white/30 rounded-full flex items-center justify-center">
                    <svg class="w-12 h-12 text-white" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
                    </svg>
                </div>
            </div>
        </div>
    </div>
 </div>
@endsection