<?php
$title = 'View Certificate';
ob_start();
?>

<div class="container mx-auto px-4 py-8 font-sans">
    <div class="max-w-4xl mx-auto">
        <!-- Certificate Header -->
        <div class="flex items-center justify-between mb-6">
            <div>
                <h1 class="text-xl font-bold text-gray-800">Certificate of Completion</h1>
                <p class="text-sm text-gray-600">View and download your achievement</p>
            </div>
            <div class="flex items-center gap-4">
                <a href="<?php echo APP_URL; ?>/certificates/download/<?php echo $certificate['id']; ?>" 
                   class="inline-flex items-center px-4 py-2 text-sm bg-emerald-600 text-white rounded-lg hover:bg-emerald-700 transition-colors">
                    <i class="fas fa-download mr-2"></i>
                    Download PDF
                </a>
                <a href="<?php echo APP_URL; ?>/dashboard/learner" 
                   class="inline-flex items-center px-4 py-2 text-sm text-gray-600 hover:text-gray-800 transition-colors">
                    <i class="fas fa-arrow-left mr-2"></i>
                    Back to Dashboard
                </a>
            </div>
        </div>

        <!-- Certificate Preview -->
        <div class="bg-white rounded-xl shadow-lg overflow-hidden">
            <!-- Certificate Header -->
            <div class="bg-gradient-to-r from-emerald-600 to-emerald-700 p-8 text-center">
                <div class="flex justify-center mb-6">
                    <img src="<?php echo SITE_URL; ?>/assets/images/mastercard-logo.png" alt="MasterCard" class="h-12 w-auto">
                </div>
                <h2 class="text-2xl font-bold text-white mb-2">Certificate of Completion</h2>
                <p class="text-emerald-100">This is to certify that</p>
            </div>

            <!-- Certificate Content -->
            <div class="p-8 text-center">
                <h3 class="text-3xl font-bold text-gray-800 mb-4"><?php echo htmlspecialchars($_SESSION['user_name']); ?></h3>
                <p class="text-gray-600 mb-6">has successfully completed the course</p>
                <h4 class="text-2xl font-semibold text-emerald-600 mb-6"><?php echo htmlspecialchars($certificate['course_title']); ?></h4>
                
                <div class="flex justify-center items-center gap-8 mb-8">
                    <div class="text-center">
                        <p class="text-sm text-gray-500 mb-1">Issued On</p>
                        <p class="text-gray-800"><?php echo formatDate($certificate['issued_at']); ?></p>
                    </div>
                    <div class="text-center">
                        <p class="text-sm text-gray-500 mb-1">Certificate ID</p>
                        <p class="text-gray-800"><?php echo $certificate['id']; ?></p>
                    </div>
                </div>

                <!-- Verification QR Code -->
                <div class="flex justify-center items-center gap-8">
                    <div class="text-center">
                        <div class="w-32 h-32 bg-gray-100 rounded-lg flex items-center justify-center mb-2">
                            <!-- QR Code will be generated here -->
                            <i class="fas fa-qrcode text-4xl text-gray-400"></i>
                        </div>
                        <p class="text-xs text-gray-500">Scan to verify</p>
                    </div>
                </div>
            </div>

            <!-- Certificate Footer -->
            <div class="border-t border-gray-200 p-8">
                <div class="flex justify-between items-center">
                    <div class="flex items-center gap-4">
                        <img src="<?php echo SITE_URL; ?>/assets/images/mcgill.png" alt="McGill" class="h-8 w-auto">
                        <img src="<?php echo SITE_URL; ?>/assets/images/agi.png" alt="AGI" class="h-8 w-auto">
                    </div>
                    <div class="text-right">
                        <p class="text-sm text-gray-600">In Partnership with</p>
                        <img src="<?php echo SITE_URL; ?>/public/assets/images/mastercard-logo1.png" alt="MasterCard" class="h-8 w-auto mt-2">
                    </div>
                </div>
            </div>
        </div>

        <!-- Certificate Details -->
        <div class="mt-8 bg-white rounded-lg shadow p-6">
            <h3 class="text-lg font-semibold text-gray-800 mb-4">Certificate Details</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <p class="text-sm text-gray-500 mb-1">Course Title</p>
                    <p class="text-gray-800"><?php echo htmlspecialchars($certificate['course_title']); ?></p>
                </div>
                <div>
                    <p class="text-sm text-gray-500 mb-1">Issued To</p>
                    <p class="text-gray-800"><?php echo htmlspecialchars($_SESSION['user_name']); ?></p>
                </div>
                <div>
                    <p class="text-sm text-gray-500 mb-1">Issue Date</p>
                    <p class="text-gray-800"><?php echo formatDate($certificate['issued_at']); ?></p>
                </div>
                <div>
                    <p class="text-sm text-gray-500 mb-1">Certificate ID</p>
                    <p class="text-gray-800"><?php echo $certificate['id']; ?></p>
                </div>
            </div>
        </div>

        <!-- Verification Instructions -->
        <div class="mt-8 bg-white rounded-lg shadow p-6">
            <h3 class="text-lg font-semibold text-gray-800 mb-4">How to Verify This Certificate</h3>
            <div class="space-y-4">
                <p class="text-sm text-gray-600">
                    This certificate can be verified by:
                </p>
                <ul class="list-disc list-inside text-sm text-gray-600 space-y-2">
                    <li>Scanning the QR code on the certificate</li>
                    <li>Visiting our verification page and entering the Certificate ID</li>
                    <li>Contacting our support team with the Certificate ID</li>
                </ul>
            </div>
        </div>
    </div>
</div>

<?php
$content = ob_get_clean();
require APP_PATH . '/views/layouts/dashboard.php';
?>