<x-app-layout>
    <x-module-hero
        title="Certificate Preview"
        description="Preview how the certificate will appear before generating"
        icon="fa-eye">

        <x-slot name="backButton">
            <a href="{{ route('mentorship.certificates.index') }}"
               class="inline-flex items-center gap-1 text-sm text-[#475569] hover:text-[#1e293b] transition-colors">
                <i class="fas fa-arrow-left text-xs"></i> Back to Certificates
            </a>
        </x-slot>

        <x-slot name="tabs">
            @can('view mentorship programmes')
                <a href="{{ route('mentorship.programmes.index') }}"
                   class="module-hero-tab {{ request()->routeIs('mentorship.programmes.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }} inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                    <i class="fas fa-list text-sm"></i> Programmes
                </a>
            @endcan
            @can('view mentorship certificates')
                <a href="{{ route('mentorship.certificates.index') }}"
                   class="module-hero-tab {{ request()->routeIs('mentorship.certificates.index') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }} inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                    <i class="fas fa-certificate text-sm"></i> Certificates
                </a>
            @endcan
            @can('download mentorship certificates')
                <a href="{{ route('mentorship.certificates.my-certificates') }}"
                   class="module-hero-tab {{ request()->routeIs('mentorship.certificates.my-certificates') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }} inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                    <i class="fas fa-award text-sm"></i> My Certificates
                </a>
            @endcan
            @can('view mentorship assignments')
                <a href="{{ route('mentorship.assignments.index') }}"
                   class="module-hero-tab {{ request()->routeIs('mentorship.assignments.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }} inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                    <i class="fas fa-link text-sm"></i> Assignments
                </a>
            @endcan
        </x-slot>
    </x-module-hero>

    <div class="p-6">
        {{-- Preview Notice --}}
        <div class="mb-4 p-4 bg-blue-50 border border-blue-200 rounded-lg flex items-start gap-3">
            <i class="fas fa-info-circle text-blue-500 mt-0.5"></i>
            <div>
                <h4 class="text-sm font-semibold text-blue-800">Preview Mode</h4>
                <p class="text-sm text-blue-700 mt-0.5">
                    This is a preview of how the certificate will appear. The actual certificate will include a unique certificate number and verification code.
                </p>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            {{-- Certificate Preview --}}
            <div class="lg:col-span-2">
                <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
                    <div class="p-4 border-b border-gray-200">
                        <h3 class="text-base font-semibold text-gray-800 flex items-center gap-2">
                            <i class="fas fa-eye text-amber-500"></i> Certificate Preview
                        </h3>
                    </div>
                    <div class="p-6 bg-gradient-to-br from-gray-100 to-gray-200">
                        <div class="bg-white shadow-2xl mx-auto certificate-frame"
                             style="max-width: {{ ($certificateData['orientation'] ?? 'landscape') === 'landscape' ? '700px' : '500px' }}; aspect-ratio: {{ ($certificateData['orientation'] ?? 'landscape') === 'landscape' ? '1.414/1' : '1/1.414' }};">
                            <div class="p-3 border-8 border-double border-amber-400 h-full">
                                <div class="border-2 border-amber-300 h-full p-6 flex flex-col justify-between">
                                    <div class="text-center">
                                        <div class="w-16 h-16 mx-auto bg-gradient-to-br from-amber-400 to-amber-600 rounded-full flex items-center justify-center mb-3">
                                            <i class="fas fa-award text-white text-2xl"></i>
                                        </div>
                                        <h1 class="text-2xl font-bold text-amber-600 tracking-wider uppercase">Certificate</h1>
                                        <p class="text-gray-500 text-xs mt-1">of Completion</p>
                                    </div>
                                    <div class="text-center flex-grow flex flex-col justify-center py-6">
                                        <p class="text-gray-600 text-xs mb-2">This is to certify that</p>
                                        <h2 class="text-2xl font-bold text-gray-800 font-serif my-3 border-b-2 border-amber-400 pb-2 inline-block mx-auto">
                                            {{ $certificateData['recipient_name'] ?? 'Participant Name' }}
                                        </h2>
                                        <p class="text-gray-600 text-xs mt-3 mb-2">has successfully completed</p>
                                        <h3 class="text-lg font-semibold text-amber-700">
                                            {{ $certificateData['programme_name'] ?? 'Programme Name' }}
                                        </h3>
                                        @if($certificateData['mentor_name'] ?? null)
                                            <p class="text-gray-600 text-xs mt-3">
                                                under the guidance of <span class="font-semibold">{{ $certificateData['mentor_name'] }}</span>
                                            </p>
                                        @endif
                                    </div>
                                    <div class="grid grid-cols-3 gap-4 items-end">
                                        <div class="text-center">
                                            <div class="border-t border-gray-300 pt-2">
                                                <p class="text-xs text-gray-500">Date Issued</p>
                                                <p class="text-xs font-semibold text-gray-700">
                                                    {{ isset($certificateData['issue_date']) ? \Carbon\Carbon::parse($certificateData['issue_date'])->format('M d, Y') : now()->format('M d, Y') }}
                                                </p>
                                            </div>
                                        </div>
                                        <div class="text-center">
                                            <div class="w-12 h-12 mx-auto mb-1 rounded-full border-2 border-amber-400 bg-amber-50 flex items-center justify-center">
                                                <i class="fas fa-shield-alt text-amber-500"></i>
                                            </div>
                                            <p class="text-xs text-gray-500">{{ $certificateData['organization_name'] ?? config('app.name') }}</p>
                                        </div>
                                        <div class="text-center">
                                            <div class="border-t border-gray-300 pt-2">
                                                <p class="text-xs text-gray-500">Verification</p>
                                                <p class="text-xs font-mono text-gray-700">PREVIEW</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Sidebar --}}
            <div class="space-y-4">
                <div class="bg-white rounded-lg border border-gray-200 p-6">
                    <h3 class="text-base font-semibold text-gray-800 mb-4 flex items-center gap-2">
                        <i class="fas fa-info-circle text-blue-500"></i> Certificate Details
                    </h3>
                    <div class="space-y-3 text-sm">
                        <div>
                            <p class="text-xs text-gray-500">Recipient</p>
                            <p class="font-semibold text-gray-900">{{ $certificateData['recipient_name'] ?? 'N/A' }}</p>
                        </div>
                        <div>
                            <p class="text-xs text-gray-500">Programme</p>
                            <p class="font-semibold text-gray-900">{{ $certificateData['programme_name'] ?? 'N/A' }}</p>
                        </div>
                        @if($certificateData['mentor_name'] ?? null)
                            <div>
                                <p class="text-xs text-gray-500">Mentor</p>
                                <p class="font-semibold text-gray-900">{{ $certificateData['mentor_name'] }}</p>
                            </div>
                        @endif
                        <div>
                            <p class="text-xs text-gray-500">Orientation</p>
                            <p class="font-semibold text-gray-900 capitalize">{{ $certificateData['orientation'] ?? 'Landscape' }}</p>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-lg border border-gray-200 p-6">
                    <h3 class="text-base font-semibold text-gray-800 mb-3">Actions</h3>
                    <div class="space-y-2">
                        <a href="{{ route('mentorship.certificates.index') }}"
                           class="w-full inline-flex items-center justify-center gap-2 px-4 py-2 bg-amber-500 text-white rounded-lg hover:bg-amber-600 transition text-sm">
                            <i class="fas fa-certificate"></i> View All Certificates
                        </a>
                        <button onclick="window.print()"
                                class="w-full inline-flex items-center justify-center gap-2 px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition text-sm">
                            <i class="fas fa-print"></i> Print Preview
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>
