<!DOCTYPE html>
<html lang="ms">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sijil Digital — {{ $certificate->program->title }}</title>
    <style>
        body { font-family: Arial, sans-serif; background: #f4f6f8; margin: 0; padding: 20px; color: #333; }
        .container { max-width: 580px; margin: 0 auto; background: #ffffff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
        .header { background: #1a56a0; color: white; padding: 32px 40px; text-align: center; }
        .header h1 { margin: 0; font-size: 20px; font-weight: 700; }
        .header p { margin: 8px 0 0; font-size: 14px; opacity: 0.85; }
        .body { padding: 32px 40px; }
        .body p { line-height: 1.6; margin: 0 0 16px; }
        .cert-box { background: #f0f7ff; border: 1px solid #c3dafe; border-radius: 6px; padding: 20px; margin: 24px 0; }
        .cert-box table { width: 100%; border-collapse: collapse; }
        .cert-box td { padding: 6px 0; font-size: 14px; }
        .cert-box td:first-child { color: #666; width: 40%; }
        .cert-box td:last-child { font-weight: 600; }
        .btn { display: inline-block; background: #1a56a0; color: white; text-decoration: none; padding: 14px 32px; border-radius: 6px; font-size: 15px; font-weight: 600; margin: 8px 0; }
        .footer { background: #f4f6f8; padding: 20px 40px; text-align: center; font-size: 12px; color: #888; }
        .footer a { color: #1a56a0; }
    </style>
</head>
<body>
<div class="container">
    <div class="header">
        <h1>🏆 Sijil Digital (eCert)</h1>
        <p>{{ $certificate->program->organizer ?? config('app.name') }}</p>
    </div>

    <div class="body">
        <p>Salam sejahtera, <strong>{{ $certificate->participant->name }}</strong>,</p>

        <p>
            Terima kasih kerana menghadiri program di bawah. Sijil digital anda telah sedia untuk dimuat turun.
        </p>

        <div class="cert-box">
            <table>
                <tr>
                    <td>Program</td>
                    <td>{{ $certificate->program->title }}</td>
                </tr>
                @if($certificate->program->start_date)
                <tr>
                    <td>Tarikh Program</td>
                    <td>{{ $certificate->program->start_date->format('d M Y') }}</td>
                </tr>
                @endif
                @if($certificate->certificate_no)
                <tr>
                    <td>No. Sijil</td>
                    <td>{{ $certificate->certificate_no }}</td>
                </tr>
                @endif
            </table>
        </div>

        <p>Klik butang di bawah untuk memuat turun sijil anda:</p>

        <div style="text-align: center; margin: 24px 0;">
            <a href="{{ route('public.certificate.show', $certificate->token) }}" class="btn">
                Muat Turun Sijil Saya
            </a>
        </div>

        <p style="font-size:13px; color:#666;">
            Pautan di atas adalah unik untuk anda. Sila simpan emel ini sebagai rujukan.
            Jika anda menghadapi sebarang masalah, sila hubungi penganjur program.
        </p>
    </div>

    <div class="footer">
        <p>
            Emel ini dihantar secara automatik oleh sistem eCert MBIP.<br>
            &copy; {{ date('Y') }} {{ config('app.name') }}. Hak cipta terpelihara.
        </p>
        <p>
            Jika anda tidak menjangkakan emel ini,
            sila abaikan atau hubungi kami di
            <a href="mailto:{{ config('mail.from.address') }}">{{ config('mail.from.address') }}</a>.
        </p>
    </div>
</div>
</body>
</html>
