<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
    * { margin: 0; padding: 0; box-sizing: border-box; }

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

    /* ── Outer Border ── */
    .outer-border {
        border: 8px double #0f3460;
        margin: 6mm;
        min-height: 196mm;
    }
    .inner-border {
        border: 2px solid #e94560;
        margin: 5px;
        min-height: 183mm;
        display: table;
        width: calc(100% - 10px);
    }

    /* ── Left Panel (Hero) ── */
    .left-panel {
        display: table-cell;
        width: 32%;
        background: linear-gradient(180deg, #1a1a2e 0%, #0f3460 100%);
        padding: 30px 20px;
        text-align: center;
        vertical-align: middle;
    }
    .org-logo {
        max-height: 55px;
        max-width: 140px;
        margin-bottom: 10px;
    }
    .org-name {
        color: #ffffff;
        font-size: 13px;
        font-weight: bold;
        letter-spacing: 1px;
        text-transform: uppercase;
        line-height: 1.4;
        margin-bottom: 6px;
    }
    .org-tagline {
        color: #a8b2d8;
        font-size: 9px;
        letter-spacing: 0.5px;
    }
    .left-divider {
        border: none;
        border-top: 2px solid #e94560;
        margin: 16px auto;
        width: 60px;
    }
    .left-label {
        color: #a8b2d8;
        font-size: 9px;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 4px;
    }
    .left-cert-num {
        color: #ffffff;
        font-size: 10px;
        font-weight: bold;
        word-break: break-all;
    }
    .qr-wrap {
        margin-top: 14px;
    }
    .qr-wrap img {
        width: 65px;
        height: 65px;
        background: #fff;
        padding: 3px;
        border-radius: 3px;
    }
    .qr-label {
        color: #a8b2d8;
        font-size: 8px;
        margin-top: 4px;
    }

    /* ── Right Panel (Content) ── */
    .right-panel {
        display: table-cell;
        vertical-align: middle;
        padding: 30px 40px;
        text-align: center;
    }

    .cert-title-line {
        display: block;
        width: 60px;
        height: 3px;
        background: #e94560;
        margin: 0 auto 12px;
        border-radius: 2px;
    }

    .cert-title {
        font-size: 26px;
        font-weight: bold;
        color: #0f3460;
        letter-spacing: 3px;
        text-transform: uppercase;
        margin-bottom: 3px;
    }

    .cert-subtitle {
        font-size: 10px;
        color: #6b7280;
        letter-spacing: 2px;
        text-transform: uppercase;
        margin-bottom: 18px;
    }

    .cert-presented {
        font-size: 11px;
        color: #6b7280;
        margin-bottom: 5px;
    }

    .cert-recipient {
        font-size: 28px;
        font-weight: bold;
        color: #0f3460;
        border-bottom: 2px solid #e94560;
        display: inline-block;
        padding-bottom: 3px;
        margin-bottom: 14px;
        min-width: 220px;
    }

    .cert-body-text {
        font-size: 11px;
        color: #4b5563;
        margin-bottom: 6px;
    }

    .cert-course-name {
        font-size: 16px;
        font-weight: bold;
        color: #0f3460;
        margin: 8px 0 5px;
        padding: 6px 18px;
        border: 2px solid #0f3460;
        display: inline-block;
        border-radius: 4px;
    }

    .cert-score {
        font-size: 11px;
        color: #6b7280;
        margin-bottom: 16px;
    }

    .divider {
        border: none;
        border-top: 1px solid #e5e7eb;
        margin: 14px 0;
    }

    /* ── Signature Row ── */
    .sig-row {
        display: table;
        width: 100%;
        margin-top: 8px;
    }
    .sig-cell {
        display: table-cell;
        width: 50%;
        text-align: center;
        vertical-align: bottom;
        padding: 0 10px;
    }
    .sig-line {
        border-top: 1px solid #374151;
        margin: 0 auto 4px;
        width: 110px;
    }
    .sig-name {
        font-size: 10px;
        font-weight: bold;
        color: #1f2937;
    }
    .sig-title {
        font-size: 8px;
        color: #6b7280;
    }

    /* ── Bottom Strip ── */
    .bottom-strip {
        background: #f9fafb;
        border-top: 2px solid #0f3460;
        padding: 8px 40px;
        text-align: center;
    }
    .verify-text {
        font-size: 9px;
        color: #6b7280;
    }
    .verify-url {
        font-size: 10px;
        color: #0f3460;
        font-weight: bold;
    }
</style>
</head>
<body>
<div class="outer-border">
<div class="inner-border">

    {{-- Left Panel: Hero Header with Organisation --}}
    <div class="left-panel">
        @if(!empty($organization->logo) && file_exists(public_path('storage/' . $organization->logo)))
            <img src="{{ public_path('storage/' . $organization->logo) }}" class="org-logo" alt="{{ $organization->name }}">
            <br>
        @endif
        <div class="org-name">{{ $organization->name ?? config('app.name') }}</div>
        @if(!empty($organization->city) || !empty($organization->country))
            <div class="org-tagline">{{ implode(', ', array_filter([$organization->city ?? null, $organization->country ?? null])) }}</div>
        @endif

        <hr class="left-divider">

        <div class="left-label">Certificate No.</div>
        <div class="left-cert-num">{{ $certificate->certificate_number }}</div>

        <div class="left-label" style="margin-top:8px;">Verification Code</div>
        <div class="left-cert-num">{{ $certificate->verification_code }}</div>

        <div class="qr-wrap">
            <img src="{{ $qrDataUri }}" alt="QR Code">
            <div class="qr-label">Scan to verify</div>
        </div>
    </div>

    {{-- Right Panel: Certificate Content --}}
    <div class="right-panel">
        <span class="cert-title-line"></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">{{ $certificate->user->name }}</div>

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

        <div class="cert-course-name">{{ $certificate->course->title }}</div>

        <div class="cert-score">
            Score: <strong>{{ number_format((float) $result->score_percentage, 1) }}%</strong>
            &nbsp;|&nbsp; Issued: <strong>{{ $certificate->getFormattedIssueDate() }}</strong>
        </div>

        <hr class="divider">

        <div class="sig-row">
            <div class="sig-cell">
                <div class="sig-line"></div>
                <div class="sig-name">{{ $certificate->generator->name ?? ($organization->name ?? config('app.name')) }}</div>
                <div class="sig-title">Authorised Signatory</div>
            </div>
            @if($certificate->course->instructor)
            <div class="sig-cell">
                <div class="sig-line"></div>
                <div class="sig-name">{{ $certificate->course->instructor->name }}</div>
                <div class="sig-title">Course Instructor</div>
            </div>
            @endif
        </div>

        <div class="bottom-strip" style="margin-top:14px;">
            <span class="verify-text">Verify this certificate at: </span>
            <span class="verify-url">{{ $verificationUrl }}</span>
        </div>
    </div>

</div>
</div>
</body>
</html>
