<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Certificate Verification — Al Rahma Sunday School</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.7.2/font/bootstrap-icons.min.css">
    <style>
        body { background: #f4f6f9; }
        .verify-card { max-width: 520px; margin: 60px auto; }
        .badge-valid   { background: #198754; }
        .badge-invalid { background: #dc3545; }
        .cert-logo { width: 70px; height: 70px; border-radius: 50%; object-fit: cover; }
        .field-label { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: #6c757d; }
        .field-value { font-size: 1.05rem; font-weight: 500; }
    </style>
</head>
<body>
<div class="verify-card px-3">

    <!-- Header -->
    <div class="text-center mb-4 mt-5">
        <img src="<?= base_url('assets/images/alrahma_logo.png') ?>" alt="Al Rahma Sunday School" class="cert-logo mb-3">
        <h4 class="fw-bold mb-0">Certificate Verification</h4>
        <p class="text-muted small">Al Rahma Sunday School</p>
    </div>

    <?php if ($record): ?>

    <!-- Valid -->
    <div class="card shadow-sm border-0">
        <div class="card-body p-4">

            <div class="d-flex align-items-center gap-2 mb-4">
                <span class="badge badge-valid text-white px-3 py-2 fs-6">
                    <i class="bi bi-patch-check-fill me-1"></i>Verified
                </span>
                <code class="text-muted"><?= esc($record['certificate_number']) ?></code>
            </div>

            <div class="row g-3">
                <div class="col-12">
                    <div class="field-label">Student Name</div>
                    <div class="field-value"><?= esc($record['student_name']) ?></div>
                </div>
                <div class="col-6">
                    <div class="field-label">Grade / Class</div>
                    <div class="field-value"><?= esc($record['grade'] ?? '—') ?></div>
                </div>
                <div class="col-6">
                    <div class="field-label">School Year</div>
                    <div class="field-value"><?= esc($record['school_year'] ?? '—') ?></div>
                </div>               
                <div class="col-12">
                    <div class="field-label">Issued On</div>
                    <div class="field-value">
                        <?= $record['issued_at'] ? esc(date('F j, Y \a\t g:i A', strtotime($record['issued_at']))) : '—' ?>
                    </div>
                </div>
            </div>

        </div>
        <div class="card-footer text-muted small text-center py-2">
            This certificate was officially issued by Al Rahma Sunday School.
        </div>
    </div>

    <?php else: ?>

    <!-- Not found -->
    <div class="card shadow-sm border-0">
        <div class="card-body p-4 text-center">
            <span class="badge badge-invalid text-white px-3 py-2 fs-6 mb-3 d-inline-block">
                <i class="bi bi-x-circle-fill me-1"></i>Not Found
            </span>
            <p class="mb-0">No certificate matching this code was found in our records.<br>
            Please check the code and try again.</p>
        </div>
    </div>

    <?php endif; ?>

    <p class="text-center text-muted small mt-4">
        &copy; <?= date('Y') ?> Al Rahma Sunday School
    </p>
</div>
</body>
</html>
