<?php
    /*
     * DomPDF constraints:
     *   - No CSS linear-gradient  → solid hex only
     *   - No rgba()               → solid hex approximations
     *   - position:fixed IS supported by DomPDF for repeating header/footer
     *     across pages — but since this is a single page certificate we use
     *     it to pin header to top and footer to bottom without page-break issues
     *   - background-image with data:image/svg+xml IS supported
     *   - border-radius on table cells IS supported
     *   - A4 portrait = 210mm × 297mm
     */

    // ── Watermark SVG (595 × 170 pt — full A4 width) ────────────────────
    $wm  = '<svg xmlns="http://www.w3.org/2000/svg" width="595" height="170">';
    $wm .= '<rect width="595" height="170" fill="#1a3a5c"/>';

    $labels = [
        [8,32,30,14],[95,12,24,-10],[175,44,28,8],[265,18,26,-5],[345,48,30,12],
        [435,10,24,-8],[515,38,28,5],[52,75,26,-12],[135,95,30,10],[225,68,24,-6],
        [315,88,28,14],[405,62,26,-9],[495,84,30,7],[22,125,24,11],[112,115,28,-7],
        [205,135,26,5],[295,118,30,-13],[385,138,24,9],[475,124,28,-4],[558,108,26,12],
        [62,152,30,-8],[152,148,24,6],[242,155,28,-11],[332,145,26,8],[422,158,30,-5],
        [542,150,24,10],
    ];
    foreach ($labels as [$x,$y,$size,$rot]) {
        $wm .= '<text x="'.$x.'" y="'.$y.'" font-family="Arial" font-size="'.$size.'" '
             . 'font-weight="bold" fill="#e8813a" opacity="0.20" '
             . 'transform="rotate('.$rot.' '.$x.' '.$y.')">SSHIA</text>';
    }

    $dots = [
        [44,18],[82,56],[162,22],[202,76],[252,36],[296,62],[352,26],[392,72],
        [447,32],[482,66],[532,22],[572,56],[26,96],[72,132],[116,102],[157,142],
        [197,107],[237,127],[277,97],[317,132],[357,102],[397,142],[437,112],
        [477,147],[517,97],[562,132],[36,157],[76,162],[122,157],[167,162],
        [210,18],[310,42],[460,18],[540,72],[88,112],[188,158],[288,48],
    ];
    foreach ($dots as [$dx,$dy]) {
        $wm .= '<circle cx="'.$dx.'" cy="'.$dy.'" r="1.8" fill="#e8813a" opacity="0.16"/>';
    }
    $wm .= '</svg>';
    $wmDataUri = 'data:image/svg+xml;base64,' . base64_encode($wm);

    // ── Logo ─────────────────────────────────────────────────────────────
    $logoPath    = public_path('assets/img/logo.png');
    $logoDataUri = '';
    if (file_exists($logoPath)) {
        $logoDataUri = 'data:image/png;base64,' . base64_encode(file_get_contents($logoPath));
    }

    $orgName = $organization->name ?? config('app.name');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
    * { margin: 0; padding: 0; box-sizing: border-box; }

    @page {
        margin: 0;
        size: 210mm 297mm;
    }

    body {
        font-family: 'DejaVu Sans', Arial, sans-serif;
        background: #ffffff;
        width: 210mm;
        height: 297mm;
        color: #1a1a2e;
        margin: 0;
        padding: 0;
    }

    /* ══════════════════════════════════════════════════════════
       HERO HEADER — position:fixed pins it to the top of the
       page without consuming flow space that would push content
       down and trigger a page break.
       height: 52mm leaves room for logo + org name comfortably.
    ══════════════════════════════════════════════════════════ */
    #hero-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 210mm;
        height: 52mm;
        background-color: #1a3a5c;
        background-image: url('<?php echo e($wmDataUri); ?>');
        background-repeat: no-repeat;
        background-size: cover;
        text-align: center;
        padding: 14px 30px 10px;
    }
    #hero-header .org-logo {
        height: 48px;
        width: auto;
        display: block;
        margin: 0 auto 6px;
    }
    #hero-header .org-name {
        color: #ffffff;
        font-size: 15px;
        font-weight: bold;
        letter-spacing: 2.5px;
        text-transform: uppercase;
        font-family: 'DejaVu Serif', Georgia, serif;
        line-height: 1.2;
    }

    /* ══════════════════════════════════════════════════════════
       HERO FOOTER — position:fixed pins it to the bottom.
       height: 38mm for the footer content + stripe.
    ══════════════════════════════════════════════════════════ */
    #hero-footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 210mm;
    }

    /* Rounded-top cap: 3-col table, centre cell has border-radius */
    .footer-cap-table {
        width: 100%;
        border-collapse: collapse;
        table-layout: fixed;
    }
    .footer-cap-side {
        width: 14px;
        height: 12px;
        background-color: #ffffff;
    }
    .footer-cap-mid {
        height: 12px;
        background-color: #1a3a5c;
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
    }

    .cert-footer {
        background-color: #1a3a5c;
        padding: 10px 24px 10px;
        width: 100%;
    }
    .footer-inner {
        display: table;
        width: 100%;
        table-layout: fixed;
    }
    .footer-left {
        display: table-cell;
        vertical-align: middle;
        width: 62%;
        padding-right: 8px;
    }
    .footer-right {
        display: table-cell;
        vertical-align: middle;
        width: 38%;
        text-align: right;
        padding-left: 4px;
    }
    .cert-number-label {
        font-size: 7px;
        color: #a8c0d8;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 1px;
    }
    .cert-number-value {
        font-size: 9px;
        font-weight: bold;
        color: #ffffff;
        margin-bottom: 4px;
    }
    .verify-label {
        font-size: 7px;
        color: #a8c0d8;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    .verify-url {
        font-size: 8px;
        color: #e8c49a;
        font-weight: bold;
        word-break: break-all;
    }
    .qr-wrap img {
        width: 58px;
        height: 58px;
        background-color: #ffffff;
        padding: 3px;
    }
    .qr-label {
        font-size: 6.5px;
        color: #a8c0d8;
        margin-top: 2px;
        text-align: right;
    }
    .footer-stripe {
        background-color: #c0392b;
        height: 5px;
        width: 100%;
    }

    /* ══════════════════════════════════════════════════════════
       BODY CONTENT
       top-margin = hero header height (52mm)
       bottom-margin = hero footer height (~42mm: 12px cap + ~36mm footer + 5px stripe)
       This keeps the content between the two fixed elements.
    ══════════════════════════════════════════════════════════ */
    #cert-content {
        margin-top: 52mm;
        margin-bottom: 44mm;
        padding: 5mm 6mm 4mm;
    }

    /* Decorative border only around the body content */
    .outer-border {
        border: 5px double #1a3a5c;
        padding: 4px;
        height: 100%;
    }
    .inner-border {
        border: 2px solid #c0392b;
        padding: 18px 36px 14px;
        text-align: center;
    }

    .cert-title-accent {
        width: 55px;
        height: 3px;
        background-color: #c0392b;
        margin: 0 auto 10px;
        display: block;
    }
    .cert-title {
        font-size: 21px;
        font-weight: bold;
        color: #1a3a5c;
        letter-spacing: 3px;
        text-transform: uppercase;
        font-family: 'DejaVu Serif', Georgia, serif;
        margin-bottom: 3px;
    }
    .cert-subtitle {
        font-size: 9px;
        color: #6b7280;
        letter-spacing: 2px;
        text-transform: uppercase;
        margin-bottom: 20px;
    }
    .cert-presented {
        font-size: 11px;
        color: #6b7280;
        margin-bottom: 6px;
    }
    .cert-recipient {
        font-size: 25px;
        font-weight: bold;
        color: #1a3a5c;
        font-family: 'DejaVu Serif', Georgia, serif;
        border-bottom: 2px solid #c0392b;
        display: inline-block;
        padding-bottom: 3px;
        margin-bottom: 16px;
        min-width: 220px;
    }
    .cert-body-text {
        font-size: 11px;
        color: #4b5563;
        line-height: 1.6;
        margin-bottom: 8px;
    }
    .cert-course-name {
        font-size: 14px;
        font-weight: bold;
        color: #1a3a5c;
        font-family: 'DejaVu Serif', Georgia, serif;
        margin: 10px 0 8px;
        padding: 7px 18px;
        border: 2px solid #1a3a5c;
        display: inline-block;
    }
    .cert-score {
        font-size: 11px;
        color: #6b7280;
        margin-top: 12px;
    }
</style>
</head>
<body>

    
    <div id="hero-header">
        <?php if($logoDataUri): ?>
            <img src="<?php echo e($logoDataUri); ?>" class="org-logo" alt="<?php echo e($orgName); ?>">
        <?php endif; ?>
        <div class="org-name"><?php echo e($orgName); ?></div>
    </div>

    
    <div id="hero-footer">
        <table class="footer-cap-table">
            <tr>
                <td class="footer-cap-side"></td>
                <td class="footer-cap-mid"></td>
                <td class="footer-cap-side"></td>
            </tr>
        </table>
        <div class="cert-footer">
            <div class="footer-inner">
                <div class="footer-left">
                    <div class="cert-number-label">Certificate Number</div>
                    <div class="cert-number-value"><?php echo e($certificate->certificate_number); ?></div>
                    <div class="cert-number-label">Verification Code</div>
                    <div class="cert-number-value"><?php echo e($certificate->verification_code); ?></div>
                    <div class="verify-label" style="margin-top:5px;">Verify at</div>
                    <div class="verify-url"><?php echo e($verificationUrl); ?></div>
                </div>
                <div class="footer-right">
                    <img src="<?php echo e($qrDataUri); ?>" alt="QR Code" style="width:58px;height:58px;background-color:#ffffff;padding:3px;">
                    <div class="qr-label">Scan to verify</div>
                </div>
            </div>
        </div>
        <div class="footer-stripe"></div>
    </div>

    
    <div id="cert-content">
        <div class="outer-border">
            <div class="inner-border">

                <span class="cert-title-accent"></span>
                <div class="cert-title">Certificate of Completion</div>
                <div class="cert-subtitle">Self-Paced Learning Programme</div>

                <div class="cert-presented">This is to certify that</div>
                <div class="cert-recipient"><?php echo e($certificate->user->name); ?></div>

                <div class="cert-body-text">
                    has successfully completed the self-paced online course
                </div>

                <div class="cert-course-name"><?php echo e($certificate->course->title); ?></div>

                <div class="cert-score">
                    with a score of <strong><?php echo e(number_format((float) $result->score_percentage, 1)); ?>%</strong>
                    &nbsp;&nbsp;|&nbsp;&nbsp;
                    Issued on: <strong><?php echo e($certificate->getFormattedIssueDate()); ?></strong>
                </div>

            </div>
        </div>
    </div>

</body>
</html>
<?php /**PATH /home/www/sshia.org/sshia/resources/views/self-paced/pdf/certificate-portrait.blade.php ENDPATH**/ ?>