<!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: 210mm;
        color: #1a1a2e;
        font-size: 12px;
        margin: 0;
        padding: 0;
    }

    /* ── Hero Header ── */
    /* DomPDF does not support CSS gradients or rgba() — use solid hex colors only */
    .hero-header {
        background-color: #1a3a5c;
        padding: 0;
        margin: 0;
        width: 100%;
        border-bottom: 4px solid #c0392b;
    }

    /* Top band: logo + org name */
    .hero-top {
        padding: 10px 30px 4px;
        text-align: center;
        background-color: #1a3a5c;
    }
    .org-logo {
        max-height: 40px;
        max-width: 130px;
        margin-bottom: 4px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    .org-name {
        color: #ffffff;
        font-size: 15px;
        font-weight: bold;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        line-height: 1.2;
    }

    /* Contact row — same background as hero, no separate band */
    .hero-contact {
        background-color: #1a3a5c;
        padding: 3px 30px 4px;
        text-align: center;
        font-size: 8.5px;
        color: #b8cfe8;
    }
    .hero-contact-inner {
        display: table;
        width: 100%;
    }
    .contact-item {
        display: table-cell;
        text-align: center;
        vertical-align: middle;
        padding: 0 4px;
        white-space: nowrap;
        color: #b8cfe8;
    }
    .contact-sep {
        display: table-cell;
        text-align: center;
        vertical-align: middle;
        color: #c0392b;
        font-size: 10px;
        padding: 0 2px;
    }
    .contact-icon {
        font-style: normal;
        font-weight: bold;
        margin-right: 2px;
        color: #e8a87c;
    }

    /* Course name — compact, engraved look using border + darker bg */
    .hero-course {
        background-color: #142d4c;
        padding: 6px 30px 8px;
        text-align: center;
    }
    .course-name {
        color: #f0f6ff;
        font-size: 13px;
        font-weight: bold;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        border: 1px solid #2e5f8a;
        display: inline-block;
        padding: 4px 18px;
    }

    /* ── Document Title ── */
    .doc-title-bar {
        background: #0f3460;
        color: #ffffff;
        text-align: center;
        padding: 10px;
        font-size: 14px;
        font-weight: bold;
        letter-spacing: 2px;
        text-transform: uppercase;
    }

    /* ── Body ── */
    .slip-body {
        padding: 24px 40px;
    }

    .info-table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 20px;
    }
    .info-table td {
        padding: 7px 10px;
        border: 1px solid #e5e7eb;
        font-size: 11px;
    }
    .info-table td.label {
        background: #f3f4f6;
        font-weight: bold;
        color: #374151;
        width: 35%;
    }
    .info-table td.value {
        color: #1f2937;
    }

    /* ── Score Card ── */
    .score-card {
        border: 2px solid #0f3460;
        border-radius: 6px;
        padding: 18px;
        text-align: center;
        margin-bottom: 20px;
        background: #f0f4ff;
    }
    .score-big {
        font-size: 48px;
        font-weight: bold;
        color: #0f3460;
        line-height: 1;
    }
    .score-label {
        font-size: 11px;
        color: #6b7280;
        margin-top: 4px;
    }
    .score-fraction {
        font-size: 14px;
        color: #374151;
        margin-top: 6px;
    }

    /* ── Pass/Fail Badge ── */
    .badge {
        display: inline-block;
        padding: 6px 24px;
        border-radius: 20px;
        font-size: 16px;
        font-weight: bold;
        letter-spacing: 2px;
        text-transform: uppercase;
        margin-top: 10px;
    }
    .badge-pass {
        background: #d1fae5;
        color: #065f46;
        border: 2px solid #10b981;
    }
    .badge-fail {
        background: #fee2e2;
        color: #991b1b;
        border: 2px solid #ef4444;
    }

    /* ── Threshold Note ── */
    .threshold-note {
        font-size: 10px;
        color: #6b7280;
        margin-top: 8px;
    }

    /* ── Footer ── */
    .slip-footer {
        border-top: 2px solid #0f3460;
        padding: 12px 40px;
        background: #f9fafb;
        font-size: 9px;
        color: #9ca3af;
        text-align: center;
    }
    .slip-footer strong {
        color: #374151;
    }

    .section-title {
        font-size: 12px;
        font-weight: bold;
        color: #0f3460;
        border-bottom: 2px solid #e94560;
        padding-bottom: 4px;
        margin-bottom: 10px;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
</style>
</head>
<body>

    {{-- ═══════════════════════════════════════════════════════════════
         HERO HEADER — full-width gradient, edge to edge
         Row 1 : Logo + Organisation Name
         Row 2 : Email | Phone | Social Links (with icons)
         Row 3 : Engraved / protruded Course Name
    ═══════════════════════════════════════════════════════════════ --}}
    <div class="hero-header">

        {{-- Row 1: Logo + Org Name --}}
        <div class="hero-top">
            @if(!empty($organization->logo) && file_exists(public_path('storage/' . $organization->logo)))
                <img src="{{ public_path('storage/' . $organization->logo) }}" class="org-logo" alt="{{ $organization->name ?? '' }}">
            @endif
            <div class="org-name">{{ $organization->name ?? config('app.name') }}</div>
        </div>

        {{-- Row 2: Contact details — email | phone | social links --}}
        @php
            $contactItems = [];

            if (!empty($organization->email)) {
                $contactItems[] = ['icon' => '@', 'text' => $organization->email];
            }

            if (!empty($organization->hotline)) {
                $contactItems[] = ['icon' => 'T', 'text' => $organization->hotline];
            }

            $socialLinks = $organization->social_media_links ?? [];
            $socialIcons = [
                'website'  => 'W',
                'facebook' => 'f',
                'twitter'  => 't',
                'linkedin' => 'in',
                'youtube'  => 'YT',
            ];
            foreach ($socialIcons as $platform => $icon) {
                if (!empty($socialLinks[$platform])) {
                    // Show domain only for cleaner display
                    $display = preg_replace('#^https?://(www\.)?#i', '', rtrim($socialLinks[$platform], '/'));
                    $contactItems[] = ['icon' => $icon, 'text' => $display];
                }
            }
        @endphp

        @if(count($contactItems))
        <div class="hero-contact">
            <div class="hero-contact-inner">
                @foreach($contactItems as $idx => $item)
                    <div class="contact-item">
                        <i class="contact-icon">{{ $item['icon'] }}</i>{{ $item['text'] }}
                    </div>
                    @if(!$loop->last)
                        <div class="contact-sep">|</div>
                    @endif
                @endforeach
            </div>
        </div>
        @endif

        {{-- Row 3: Course name — compact, engraved --}}
        <div class="hero-course">
            <div class="course-name">{{ $result->course->title }}</div>
        </div>

    </div>

    <div class="doc-title-bar">Examination Result Slip</div>

    <div class="slip-body">

        {{-- Candidate & Course Info --}}
        <div class="section-title">Candidate Information</div>
        <table class="info-table">
            <tr>
                <td class="label">Candidate Name</td>
                <td class="value">{{ $result->user->name }}</td>
            </tr>
            <tr>
                <td class="label">Course</td>
                <td class="value">{{ $result->course->title }}</td>
            </tr>
            <tr>
                <td class="label">Exam Date</td>
                <td class="value">{{ $result->created_at->format('F j, Y \a\t g:i A') }}</td>
            </tr>
            <tr>
                <td class="label">Attempt Reference</td>
                <td class="value">#{{ $result->attempt_id }}</td>
            </tr>
        </table>

        {{-- Score Card --}}
        <div class="section-title">Result Summary</div>
        <div class="score-card">
            <div class="score-big">{{ number_format((float) $result->score_percentage, 1) }}%</div>
            <div class="score-label">Overall Score</div>
            <div class="score-fraction">
                {{ $result->correct_answers }} correct out of {{ $result->total_questions }} questions
            </div>
            <div>
                <span class="badge {{ $result->passed ? 'badge-pass' : 'badge-fail' }}">
                    {{ $result->passed ? 'PASS' : 'FAIL' }}
                </span>
            </div>
            <div class="threshold-note">
                Passing threshold: {{ $result->passing_threshold }}%
            </div>
        </div>

        {{-- Result Details --}}
        <div class="section-title">Result Details</div>
        <table class="info-table">
            <tr>
                <td class="label">Total Questions</td>
                <td class="value">{{ $result->total_questions }}</td>
            </tr>
            <tr>
                <td class="label">Correct Answers</td>
                <td class="value">{{ $result->correct_answers }}</td>
            </tr>
            <tr>
                <td class="label">Incorrect / Unanswered</td>
                <td class="value">{{ $result->total_questions - $result->correct_answers }}</td>
            </tr>
            <tr>
                <td class="label">Score Percentage</td>
                <td class="value">{{ number_format((float) $result->score_percentage, 2) }}%</td>
            </tr>
            <tr>
                <td class="label">Passing Threshold</td>
                <td class="value">{{ $result->passing_threshold }}%</td>
            </tr>
            <tr>
                <td class="label">Status</td>
                <td class="value" style="font-weight:bold; color:{{ $result->passed ? '#065f46' : '#991b1b' }}">
                    {{ $result->passed ? 'PASSED' : 'FAILED' }}
                </td>
            </tr>
            @if($result->passed && $certificate)
            <tr>
                <td class="label">Certificate Number</td>
                <td class="value">{{ $certificate->certificate_number }}</td>
            </tr>
            @endif
        </table>

        {{-- Per-Topic Breakdown --}}
        @if(!empty($result->topic_scores))
        <div class="section-title">Performance by Topic</div>
        <table class="info-table" style="width:100%;border-collapse:collapse;">
            <thead>
                <tr>
                    <th style="background:#f3f4f6;padding:7px 10px;border:1px solid #e5e7eb;text-align:left;font-size:11px;font-weight:bold;color:#374151;">Topic</th>
                    <th style="background:#f3f4f6;padding:7px 10px;border:1px solid #e5e7eb;text-align:center;font-size:11px;font-weight:bold;color:#374151;">Questions</th>
                    <th style="background:#f3f4f6;padding:7px 10px;border:1px solid #e5e7eb;text-align:center;font-size:11px;font-weight:bold;color:#374151;">Correct</th>
                    <th style="background:#f3f4f6;padding:7px 10px;border:1px solid #e5e7eb;text-align:center;font-size:11px;font-weight:bold;color:#374151;">Score</th>
                </tr>
            </thead>
            <tbody>
                @foreach($result->topic_scores as $ts)
                <tr>
                    <td style="padding:7px 10px;border:1px solid #e5e7eb;font-size:11px;color:#1f2937;">{{ $ts['topic_title'] }}</td>
                    <td style="padding:7px 10px;border:1px solid #e5e7eb;text-align:center;font-size:11px;color:#1f2937;">{{ $ts['total_questions'] }}</td>
                    <td style="padding:7px 10px;border:1px solid #e5e7eb;text-align:center;font-size:11px;color:#1f2937;">{{ $ts['correct_answers'] }}</td>
                    <td style="padding:7px 10px;border:1px solid #e5e7eb;text-align:center;font-size:11px;font-weight:bold;color:{{ $ts['score_percentage'] >= $result->passing_threshold ? '#065f46' : '#991b1b' }};">{{ number_format($ts['score_percentage'], 1) }}%</td>
                </tr>
                @endforeach
            </tbody>
        </table>
        @endif

    </div>

    {{-- Footer --}}
    <div class="slip-footer">
        <strong>{{ $organization->name ?? config('app.name') }}</strong>
        @if(!empty($organization->email)) &nbsp;|&nbsp; {{ $organization->email }} @endif
        @if(!empty($organization->hotline)) &nbsp;|&nbsp; {{ $organization->hotline }} @endif
        <br>
        This result slip was generated on {{ now()->format('F j, Y \a\t g:i A') }}.
        This document is for informational purposes only.
    </div>

</body>
</html>
