@extends('layouts.self-paced-dashboard')

@section('title', 'Certificate — ' . $certificate->certificate_number)
@section('page-title', 'Certificate Details')
@section('page-subtitle', $certificate->certificate_number . ' — ' . ($certificate->user->name ?? 'Unknown Holder'))

@section('hero-actions')
    {{-- Download PDF --}}
    <div x-data="{ format: 'portrait' }" class="flex items-center gap-2">
        <select x-model="format"
                class="text-sm border border-white/30 bg-white/10 text-white rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-white/40 transition">
            <option value="portrait">Portrait</option>
            <option value="landscape">Landscape</option>
        </select>
        <a :href="'{{ route('self-paced.dashboard.certificates.download', $certificate) }}?format=' + format"
           class="inline-flex items-center gap-2 px-4 py-2 bg-white text-indigo-700 font-semibold text-sm rounded-lg hover:bg-indigo-50 transition shadow">
            <i class="fas fa-download"></i> Download PDF
        </a>
    </div>

    {{-- Regenerate PDF --}}
    @if(!$certificate->is_revoked)
    <form action="{{ route('self-paced.dashboard.certificates.regenerate', $certificate) }}" method="POST" class="inline">
        @csrf
        <button type="submit"
                class="inline-flex items-center gap-2 px-4 py-2 bg-white/10 hover:bg-white/20 text-white text-sm font-medium rounded-lg transition border border-white/30">
            <i class="fas fa-sync-alt"></i> Regenerate PDF
        </button>
    </form>
    @endif

    <a href="{{ route('self-paced.dashboard.certificates.index') }}"
       class="inline-flex items-center gap-2 px-4 py-2 bg-white/10 hover:bg-white/20 text-white text-sm font-medium rounded-lg transition border border-white/30">
        <i class="fas fa-arrow-left"></i> Back
    </a>
@endsection

@section('content')
<div x-data="certificateShow()" class="space-y-5">

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-5">

        {{-- Main Certificate Info --}}
        <div class="lg:col-span-2 bg-white rounded-xl shadow-sm border border-gray-100 p-6">

            {{-- Status Hero --}}
            <div class="flex items-center gap-5 mb-6 pb-6 border-b border-gray-100">
                @if($certificate->is_revoked)
                    <div class="w-20 h-20 bg-red-100 rounded-full flex items-center justify-center flex-shrink-0">
                        <i class="fas fa-ban text-red-400 text-3xl"></i>
                    </div>
                    <div>
                        <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-sm font-bold bg-red-100 text-red-700 mb-1">
                            <i class="fas fa-ban"></i> Revoked
                        </span>
                        <p class="text-lg font-bold text-gray-800 font-mono">{{ $certificate->certificate_number }}</p>
                        <p class="text-sm text-gray-400 mt-0.5">Issued {{ $certificate->issue_date?->format('d M Y') }}</p>
                    </div>
                @else
                    <div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center flex-shrink-0">
                        <i class="fas fa-certificate text-green-500 text-3xl"></i>
                    </div>
                    <div>
                        <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-sm font-bold bg-green-100 text-green-700 mb-1">
                            <i class="fas fa-check-circle"></i> Valid
                        </span>
                        <p class="text-lg font-bold text-gray-800 font-mono">{{ $certificate->certificate_number }}</p>
                        <p class="text-sm text-gray-400 mt-0.5">Issued {{ $certificate->issue_date?->format('d M Y') }}</p>
                    </div>
                @endif
            </div>

            {{-- Detail Grid --}}
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">

                {{-- Holder --}}
                <div>
                    <p class="text-xs text-gray-400 mb-1 flex items-center gap-1">
                        <i class="fas fa-user text-gray-300"></i> Certificate Holder
                    </p>
                    <div class="flex items-center gap-2">
                        <span class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center text-sm font-bold text-blue-600 flex-shrink-0">
                            {{ strtoupper(substr($certificate->user->name ?? 'U', 0, 1)) }}
                        </span>
                        <div>
                            <p class="text-sm font-semibold text-gray-800">{{ $certificate->user->name ?? '—' }}</p>
                            <p class="text-xs text-gray-400">{{ $certificate->user->email ?? '—' }}</p>
                        </div>
                    </div>
                </div>

                {{-- Course --}}
                <div>
                    <p class="text-xs text-gray-400 mb-1 flex items-center gap-1">
                        <i class="fas fa-book text-gray-300"></i> Course
                    </p>
                    <a href="{{ route('self-paced.dashboard.courses.show', $certificate->course) }}"
                       class="text-sm font-semibold text-indigo-600 hover:text-indigo-800 transition">
                        {{ $certificate->course->title ?? '—' }}
                    </a>
                </div>

                {{-- Issue Date --}}
                <div>
                    <p class="text-xs text-gray-400 mb-1 flex items-center gap-1">
                        <i class="fas fa-calendar text-gray-300"></i> Issue Date
                    </p>
                    <p class="text-sm font-semibold text-gray-800">{{ $certificate->issue_date?->format('d M Y') ?? '—' }}</p>
                </div>

                {{-- Verification Code --}}
                <div>
                    <p class="text-xs text-gray-400 mb-1 flex items-center gap-1">
                        <i class="fas fa-key text-gray-300"></i> Verification Code
                    </p>
                    <div class="flex items-center gap-2">
                        <span class="font-mono text-xs font-semibold text-gray-700 bg-gray-100 px-2 py-1 rounded" id="verif-code">
                            {{ $certificate->verification_code }}
                        </span>
                        <button type="button"
                                @click="copyCode('{{ $certificate->verification_code }}')"
                                title="Copy code"
                                class="w-6 h-6 flex items-center justify-center rounded bg-gray-100 hover:bg-gray-200 text-gray-500 transition">
                            <i class="fas fa-copy text-xs"></i>
                        </button>
                        <span x-show="copied" x-cloak x-transition class="text-xs text-green-600 font-medium">Copied!</span>
                    </div>
                </div>

                {{-- Generated By --}}
                <div>
                    <p class="text-xs text-gray-400 mb-1 flex items-center gap-1">
                        <i class="fas fa-user-shield text-gray-300"></i> Generated By
                    </p>
                    <p class="text-sm text-gray-700">{{ $certificate->generator->name ?? '—' }}</p>
                    <p class="text-xs text-gray-400">{{ $certificate->created_at?->format('d M Y, H:i') }}</p>
                </div>

                {{-- Enrollment --}}
                <div>
                    <p class="text-xs text-gray-400 mb-1 flex items-center gap-1">
                        <i class="fas fa-id-card text-gray-300"></i> Enrollment
                    </p>
                    @if($certificate->enrollment)
                        <a href="{{ route('self-paced.dashboard.enrollments.show', $certificate->enrollment) }}"
                           class="text-sm text-indigo-600 hover:text-indigo-800 font-medium transition">
                            View Enrollment #{{ $certificate->enrollment_id }}
                        </a>
                    @else
                        <p class="text-sm text-gray-400">—</p>
                    @endif
                </div>

            </div>
        </div>

        {{-- Right Panel --}}
        <div class="space-y-4">

            {{-- Verification Stats --}}
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-5">
                <h2 class="text-sm font-semibold text-gray-800 mb-4 flex items-center gap-2">
                    <i class="fas fa-chart-line text-indigo-500"></i> Verification Stats
                </h2>
                <div class="space-y-3">
                    <div class="flex items-center justify-between">
                        <span class="text-xs text-gray-500 flex items-center gap-1.5">
                            <i class="fas fa-eye text-gray-300"></i> Total Verifications
                        </span>
                        <span class="text-sm font-bold text-rose-600">{{ $certificate->verification_count }}</span>
                    </div>
                    <div class="flex items-center justify-between">
                        <span class="text-xs text-gray-500 flex items-center gap-1.5">
                            <i class="fas fa-clock text-gray-300"></i> Last Verified
                        </span>
                        <span class="text-xs text-gray-600">
                            {{ $certificate->last_verified_at?->format('d M Y, H:i') ?? 'Never' }}
                        </span>
                    </div>
                </div>

                {{-- QR Code Preview --}}
                <div class="mt-4 pt-4 border-t border-gray-100">
                    <p class="text-xs text-gray-400 mb-2 flex items-center gap-1">
                        <i class="fas fa-qrcode text-gray-300"></i> Verification QR Code
                    </p>
                    <div class="flex flex-col items-center gap-2">
                        <img src="https://api.qrserver.com/v1/create-qr-code/?size=120x120&data={{ urlencode(route('self-paced.public.verify') . '?code=' . $certificate->verification_code) }}"
                             alt="QR Code"
                             class="w-28 h-28 rounded border border-gray-100"
                             onerror="this.style.display='none'">
                        <a href="{{ route('self-paced.public.verify') }}?code={{ $certificate->verification_code }}"
                           target="_blank"
                           class="text-xs text-indigo-500 hover:text-indigo-700 transition flex items-center gap-1">
                            <i class="fas fa-external-link-alt text-xs"></i> Open Verification Page
                        </a>
                    </div>
                </div>
            </div>

            {{-- Revocation Section --}}
            @if($certificate->is_revoked)
            <div class="bg-red-50 rounded-xl border border-red-200 p-5">
                <h2 class="text-sm font-semibold text-red-800 mb-3 flex items-center gap-2">
                    <i class="fas fa-ban text-red-500"></i> Revocation Details
                </h2>
                <div class="space-y-2 text-xs">
                    <div>
                        <span class="text-red-400">Revoked At</span>
                        <p class="font-semibold text-red-700 mt-0.5">{{ $certificate->revoked_at?->format('d M Y, H:i') ?? '—' }}</p>
                    </div>
                    <div>
                        <span class="text-red-400">Revoked By</span>
                        <p class="font-semibold text-red-700 mt-0.5">{{ $certificate->revoker->name ?? '—' }}</p>
                    </div>
                    <div>
                        <span class="text-red-400">Reason</span>
                        <p class="text-red-700 mt-0.5 leading-relaxed">{{ $certificate->revocation_reason ?? '—' }}</p>
                    </div>
                </div>
            </div>
            @else
            {{-- Revoke Action --}}
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-5">
                <h2 class="text-sm font-semibold text-gray-800 mb-3 flex items-center gap-2">
                    <i class="fas fa-shield-alt text-gray-400"></i> Certificate Actions
                </h2>
                @can('manage self-paced certificates')
                <button type="button"
                        @click="revokeModal = true"
                        class="w-full inline-flex items-center justify-center gap-2 px-4 py-2 bg-red-50 hover:bg-red-100 text-red-600 text-sm font-semibold rounded-lg transition border border-red-200">
                    <i class="fas fa-ban"></i> Revoke Certificate
                </button>
                @endcan
            </div>
            @endif

        </div>
    </div>

    {{-- Revoke Modal --}}
    <div x-show="revokeModal"
         x-cloak
         class="fixed inset-0 z-50 flex items-center justify-center p-4"
         @keydown.escape.window="revokeModal = false">
        <div class="absolute inset-0 bg-black/40 backdrop-blur-sm" @click="revokeModal = false"></div>
        <div class="relative bg-white rounded-2xl shadow-2xl w-full max-w-md overflow-hidden" x-transition>
            <div class="flex items-center justify-between px-6 py-4 bg-gradient-to-r from-red-600 to-red-700 rounded-t-2xl">
                <div>
                    <h3 class="text-base font-semibold text-white flex items-center gap-2">
                        <i class="fas fa-ban"></i> Revoke Certificate
                    </h3>
                    <p class="text-xs text-red-200">{{ $certificate->certificate_number }}</p>
                </div>
                <button type="button" @click="revokeModal = false" class="text-white/80 hover:text-white transition">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="p-6">
            <form action="{{ route('self-paced.dashboard.certificates.revoke', $certificate) }}" method="POST">
                @csrf
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1">
                        <i class="fas fa-comment-alt text-gray-400 mr-1"></i> Revocation Reason <span class="text-red-500">*</span>
                    </label>
                    <textarea name="revocation_reason"
                              rows="3"
                              required
                              placeholder="Provide a reason for revoking this certificate…"
                              class="w-full text-sm border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-red-300 focus:border-red-400 transition resize-none"></textarea>
                </div>
                <div class="flex gap-3">
                    <button type="button"
                            @click="revokeModal = false"
                            class="flex-1 px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition">
                        Cancel
                    </button>
                    <button type="submit"
                            class="flex-1 px-4 py-2 text-sm font-semibold text-white bg-red-500 hover:bg-red-600 rounded-lg transition">
                        <i class="fas fa-ban mr-1"></i> Revoke
                    </button>
                </div>
            </form>
            </div>
        </div>
    </div>

</div>
@endsection

@push('scripts')
<script>
function certificateShow() {
    return {
        revokeModal: false,
        copied: false,

        copyCode(code) {
            navigator.clipboard.writeText(code).then(() => {
                this.copied = true;
                setTimeout(() => { this.copied = false; }, 2000);
            });
        },
    };
}
</script>
@endpush
