<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>E-Certificate {{ $transaction->event->title }}</title>
    <style>
        /* Mengunci ukuran kertas A4 Landscape murni */
        @page {
            size: a4 landscape;
            margin: 0;
        }
        body {
            font-family: 'Times New Roman', Times, Georgia, serif;
            margin: 0;
            padding: 0;
            background-color: #ffffff;
            width: 100%;
            height: 100%;
        }
        
        /* Pembungkus halaman utama */
        .page-wrapper {
            padding: 35px;
            box-sizing: border-box;
        }

        /* Bingkai Luar Utama */
        .certificate-border-outer {
            border: 2px solid #c5a880; /* Bingkai tipis warna Soft Gold */
            padding: 8px;
            box-sizing: border-box;
        }

        /* Bingkai Dalam Tebal */
        .certificate-border-inner {
            border: 6px double #4f46e5; /* Border ganda warna Indigo megah */
            padding: 40px 30px;
            box-sizing: border-box;
            background-color: #fafafa;
            position: relative;
            height: 600px; /* Mengunci tinggi agar pas satu halaman penuh */
        }

        /* Hiasan Ornamen Sudut (Menggunakan Pixel agar Stabil di DomPDF) */
        .corner-ornament {
            position: absolute;
            width: 30px;
            height: 30px;
            border: 4px solid #c5a880;
        }
        .top-left { top: 15px; left: 15px; border-right: none; border-bottom: none; }
        .top-right { top: 15px; right: 15px; border-left: none; border-bottom: none; }
        .bottom-left { bottom: 15px; left: 15px; border-right: none; border-top: none; }
        .bottom-right { bottom: 15px; right: 15px; border-left: none; border-top: none; }

        /* Desain Tipografi Teks */
        .main-title {
            font-size: 38px;
            font-weight: bold;
            color: #1a1a1a;
            letter-spacing: 6px;
            text-align: center;
            margin-top: 20px;
            margin-bottom: 0;
        }
        .subtitle {
            font-size: 13px;
            font-style: italic;
            color: #555555;
            letter-spacing: 2px;
            text-align: center;
            margin-top: 8px;
            margin-bottom: 35px;
        }
        .awarded-to {
            font-size: 16px;
            color: #666666;
            text-align: center;
            font-style: italic;
            margin-bottom: 10px;
        }
        .participant-name {
            font-size: 40px;
            font-weight: bold;
            color: #4f46e5;
            text-align: center;
            font-style: italic;
            margin-bottom: 5px;
        }
        .name-line {
            width: 60%;
            border-bottom: 2px dashed #c5a880;
            margin: 0 auto 30px auto;
        }
        .reason-text {
            font-size: 16px;
            color: #2c3e50;
            line-height: 1.7;
            text-align: center;
            width: 85%;
            margin: 0 auto;
        }
        .highlight {
            font-weight: bold;
            color: #4f46e5;
        }

        /* Penyusunan Layout Tanda Tangan Menggunakan Tabel Murni */
        .signature-section {
            width: 90%;
            margin: 60px auto 0 auto;
            border-collapse: collapse;
        }
        .signature-box {
            width: 50%;
            text-align: center;
            vertical-align: top;
        }
        .sig-title {
            font-size: 14px;
            color: #555555;
            line-height: 1.5;
        }
        .sig-line {
            width: 180px;
            height: 1px;
            background-color: #a0aec0;
            margin: 55px auto 8px auto;
        }
        .sig-name {
            font-size: 15px;
            font-weight: bold;
            color: #1a1a1a;
        }
    </style>
</head>
<body>

    <div class="page-wrapper">
        <div class="certificate-border-outer">
            <div class="certificate-border-inner">
                
                <!-- Ornamen Pojok Klasik -->
                <div class="corner-ornament top-left"></div>
                <div class="corner-ornament top-right"></div>
                <div class="corner-ornament bottom-left"></div>
                <div class="corner-ornament bottom-right"></div>

                <!-- Konten Teks Sertifikat -->
                <div class="main-title">SERTIFIKAT PENGHARGAAN</div>
                <div class="subtitle">Nomor: CERT/{{ $transaction->order_id }}</div>
                
                <div class="awarded-to">Diberikan secara terhormat kepada:</div>
                <div class="participant-name">{{ $transaction->customer_name }}</div>
                <div class="name-line"></div>
                
                <div class="reason-text">
                    Atas partisipasi aktif dan antusiasmenya sebagai <span style="font-weight: bold;">Peserta</span> dalam kegiatan 
                    <span class="highlight">"{{ $transaction->event->title }}"</span><br>
                    yang diselenggarakan oleh AmikomEventHub pada tanggal {{ \Carbon\Carbon::parse($transaction->event->date)->format('d F Y') }}.
                </div>

                <!-- Tanda Tangan Mandiri Stabil -->
                <table class="signature-section">
                    <tr>
                        <td class="signature-box">
                            <div class="sig-title">Yogyakarta, {{ date('d F Y') }}<br>Ketua Panitia Pelaksana</div>
                            <div class="sig-line"></div>
                            <div class="sig-name">Admin AmikomEventHub</div>
                        </td>
                        <td class="signature-box">
                            <div class="sig-title"><br>Amikom Event Hub Corp</div>
                            <div class="sig-line"></div>
                            <div class="sig-name">Ragisha Hanny</div>
                        </td>
                    </tr>
                </table>

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

</body>
</html>