<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="utf-8">
    <meta name="description" content="STAI SILIWANGI BANDUNG, STAI SILIWANGI BANDUNG, hadir dengan berbagai program pendidikan yang dirancang khusus untuk karyawan dan profesional. Dapatkan gelar S1 Ekonomi Syariah Bandung,S1 Pendidikan Agama Islam,S1 Tadrish Pendidikan Bahasa Inggris,S1 Hukum Ekonomi Syariah,S1 Perbankan Syariah, dan S1 PGMI dengan biaya kuliah yang sangat terjangkau, hanya Rp 450.000 per bulan. Kuliah di STAI SILIWANGI BANDUNG memungkinkan Anda belajar pada hari sabtu atau melalui kelas ekstensi, cocok untuk yang memiliki jadwal padat, dan tersedia kelas RPL dengan kuliah singkat, edunitas." />
    <meta name="keywords" content="Program Kuliah Malam STAI SILIWANGI BANDUNG,Kuliah untuk Karyawan Bandung,Kuliah S1 Ekonomi Syariah Bandung,S1 Pendidikan Agama Islam,S1 Tadrish Pendidikan Bahasa Inggris,S1 Hukum Ekonomi Syariah,S1 Perbankan Syariah, dan S1 PGMI,Kampus Terjangkau Bandung,Kampus Karyawan Bandung,Sekolah Tinggi Manajemen Bandung,Biaya Kuliah Terjangkau STAI SILIWANGI BANDUNG,Kuliah Karyawan di Bandung,Universitas Bandung untuk Karyawan,Kuliah Sabtu STAI SILIWANGI BANDUNG ,Universitas Murah untuk Karyawan Bandung,Kampus STAI SILIWANGI BANDUNG lampung,Akreditasi STAI SILIWANGI BANDUNG , stima immi, edunitas, rpl STAI SILIWANGI BANDUNG, UT, universitas terbuka, S1 Komputer di Bandung , D4 Manajemen Keuangan Sektor Publik di Bandung Utara, kampus di lampung, daftar online kuliah karyawan, cara kuliah di STAI SILIWANGI BANDUNG, jadwal kuliah di STAI SILIWANGI BANDUNG, biaya kuliah di STAI SILIWANGI BANDUNG, cara daftar online di STAI SILIWANGI BANDUNG, jurusan di STAI SILIWANGI BANDUNG, lokasi kampus STAI SILIWANGI BANDUNG, edunitas" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!--ADS GSC-->


    <title>@yield('title') &mdash; STAI SILIWANGI BANDUNG (Kelas Karyawan)</title>
    <meta property="og:title" content="STAI SILIWANGI BANDUNG (Kelas Karyawan)">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://stai-siliwangi.info">
    <meta property="og:image" content="https://stai-siliwangi.info//images/background/hero1.png" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta property="og:description" content="STAI SILIWANGI BANDUNG menawarkan fleksibilitas jadwal kuliah yang dirancang untuk memenuhi kebutuhan mahasiswa dengan berbagai latar belakang, termasuk profesional yang bekerja. Dengan pendekatan pembelajaran yang adaptif, universitas ini memungkinkan mahasiswa untuk mengatur waktu belajar tanpa mengorbankan komitmen lain. Dukungan dari dosen berpengalaman dan program studi yang relevan menjadikan STAI SILIWANGI BANDUNG pilihan tepat bagi mereka yang mengutamakan pendidikan berkualitas dengan jadwal yang fleksibel.">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:creator" content="@_kuliahkaryawan">
    <meta name="twitter:site" content="@_kuliahkaryawan">
    <meta name="twitter:title" content="STAI SILIWANGI BANDUNG (Kelas Karyawan)">
    <meta name="twitter:description" content="STAI SILIWANGI BANDUNG adalah institusi pendidikan tinggi yang berkomitmen untuk mencetak generasi unggul melalui program akademik berkualitas dan inovatif. Dengan pendekatan yang berfokus pada pengembangan keterampilan praktis dan integritas akademik, STAI SILIWANGI BANDUNG menyediakan berbagai fakultas dan program studi yang relevan dengan kebutuhan industri dan masyarakat. Didukung oleh tenaga pengajar profesional dan fasilitas modern, universitas ini menjadi tempat yang ideal bagi mahasiswa untuk meraih prestasi dan membangun karier yang gemilang.">
    <meta name="twitter:domain" content="https://stai-siliwangi.info">
    <meta property="og:image" content="https://stai-siliwangi.info//images/background/hero1.png">
    <meta name="author" content="Kuliah Karyawan Team" />
    <meta http-equiv="cache-control" content="public" />
    <meta name="application-name" content="STAI SILIWANGI BANDUNG | Kuliah Karyawan K2" />

    <link rel="apple-touch-icon" sizes="57x57" href="/images/favicons/apple-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="/images/favicons/apple-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="/images/favicons/apple-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="/images/favicons/apple-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="/images/favicons/apple-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="/images/favicons/apple-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="/images/favicons/apple-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="/images/favicons/apple-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="/images/favicons/apple-icon-180x180.png">
    <link rel="icon" type="image/png" sizes="192x192"  href="/images/favicons/android-icon-192x192.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/images/favicons/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="96x96" href="/images/favicons/favicon-96x96.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/images/favicons/favicon-16x16.png">
    <link rel="manifest" href="/images/favicons/manifest.json">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="msapplication-TileImage" content="/images/favicons/ms-icon-144x144.png">
    <meta name="theme-color" content="#ffffff">

    <link href="https://cdn.jsdelivr.net/npm/flowbite@2.5.2/dist/flowbite.min.css" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet">
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* Warna Utama #169E16 (22,158,22) */
        :root {
            --primary: #169E16;
            --primary-light: #1eb81e;
            --primary-dark: #0f7a0f;
        }

        body {
            font-family: 'DM Sans', sans-serif;
            background: linear-gradient(135deg, #f0f2f5 0%, #e2e6ea 100%);
            padding: 40px 20px;
        }

        .print-container {
            max-width: 1000px;
            margin: 0 auto;
        }

        .print-card {
            background: white;
            border-radius: 20px;
            box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.15);
            overflow: hidden;
        }

        .print-header {
            background: white;
            padding: 30px 40px 20px;
            text-align: center;
            border-bottom: 3px solid #000000;
        }

        .logo-wrapper {
            margin-bottom: 15px;
            display: flex;
            justify-content: center;
        }

        .logo-wrapper img {
            width: 80px;
            height: auto;
        }

        .print-header h2 {
            font-family: 'Poppins', sans-serif;
            font-size: 22px;
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 5px;
        }

        .print-header .kampus-name {
            font-family: 'Poppins', sans-serif;
            font-size: 16px;
            font-weight: 800;
            color: var(--primary);
            margin-top: 10px;
            letter-spacing: 1px;
        }

        .print-header .subtitle {
            font-size: 13px;
            color: #6b7280;
            margin-top: 5px;
        }

        .print-body {
            padding: 35px 40px;
        }

        .badge-number {
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
            border-radius: 12px;
            padding: 14px 24px;
            margin-bottom: 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 15px;
        }

        .badge-number .label {
            color: white;
            font-size: 13px;
            font-weight: 600;
            letter-spacing: 1px;
        }

        .badge-number .label i {
            margin-right: 8px;
        }

        .badge-number .value {
            color: white;
            font-size: 22px;
            font-weight: 800;
            font-family: monospace;
            letter-spacing: 2px;
            background: rgba(255, 255, 255, 0.2);
            padding: 6px 18px;
            border-radius: 8px;
        }

        .info-section {
            margin-bottom: 30px;
        }

        .section-title {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 18px;
            padding-bottom: 10px;
            border-bottom: 2px solid #e5e7eb;
        }

        .section-title i {
            width: 30px;
            height: 30px;
            background: var(--primary);
            border-radius: 8px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 13px;
        }

        .section-title h3 {
            font-family: 'Poppins', sans-serif;
            font-size: 16px;
            font-weight: 700;
            color: var(--primary);
            margin: 0;
        }

        .info-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px 30px;
        }

        .info-item {
            display: flex;
            align-items: baseline;
            font-size: 13px;
            padding: 6px 0;
            border-bottom: 1px dashed #f0f0f0;
        }

        .info-label {
            width: 135px;
            font-weight: 600;
            color: #6b7280;
            flex-shrink: 0;
        }

        .info-value {
            flex: 1;
            color: #374151;
            font-weight: 500;
        }

        .info-value.highlight {
            color: var(--primary);
            font-weight: 700;
        }

        /* Payment Section Styles - Lebih besar dan di-highlight */
        .payment-section {
            margin-bottom: 30px;
            background: linear-gradient(135deg, #fff9e6 0%, #fff3cc 100%);
            border-radius: 16px;
            padding: 20px;
            border: 2px solid #f59e0b;
            box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15);
        }

        .payment-section .section-title {
            border-bottom: 2px solid #f59e0b;
            margin-bottom: 15px;
        }

        .payment-section .section-title i {
            background: #f59e0b;
        }

        .payment-section .section-title h3 {
            color: #f59e0b;
            font-size: 18px;
        }

        .payment-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px 30px;
        }

        .payment-item {
            display: flex;
            align-items: baseline;
            font-size: 15px;
            padding: 10px 0;
            border-bottom: 1px solid #ffe0b3;
        }

        .payment-label {
            width: 145px;
            font-weight: 700;
            color: #b45309;
            flex-shrink: 0;
            font-size: 14px;
        }

        .payment-value {
            flex: 1;
            color: #d97706;
            font-weight: 800;
            font-size: 18px;
        }

        .payment-value strong {
            font-size: 20px;
            color: #ea580c;
        }

        .rekening-info {
            background: #ffffff;
            border-radius: 12px;
            padding: 15px;
            margin-top: 10px;
            border: 1px solid #fed7aa;
        }

        .rekening-info .bank-name {
            font-weight: 800;
            font-size: 16px;
            color: #b45309;
            margin-bottom: 8px;
        }

        .rekening-info .rek-number {
            font-weight: 800;
            font-size: 18px;
            color: #ea580c;
            font-family: monospace;
            letter-spacing: 1px;
            background: #fff7ed;
            display: inline-block;
            padding: 4px 12px;
            border-radius: 8px;
            margin: 5px 0;
        }

        .rekening-info .rek-number span {
            font-size: 14px;
            font-family: inherit;
        }

        .payment-note {
            margin-top: 15px;
            padding: 12px;
            background: #fffbeb;
            border-left: 4px solid #f59e0b;
            border-radius: 8px;
            font-size: 14px;
            color: #92400e;
        }

        .payment-note i {
            margin-right: 8px;
            color: #f59e0b;
        }

        .payment-note .highlight-note {
            font-weight: 700;
            color: #ea580c;
        }

        .signature-area {
            margin-top: 50px;
            padding-top: 30px;
            border-top: 2px dashed #e5e7eb;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 80px;
            flex-wrap: wrap;
        }

        .signature-left {
            text-align: center;
            min-width: 200px;
        }

        .signature-left .kampus-name {
            font-family: 'Poppins', sans-serif;
            font-size: 13px;
            font-weight: 600;
            color: var(--primary);
            margin-bottom: 12px;
        }

        .signature-left img {
            width: 110px;
            height: auto;
            margin: 8px auto;
            display: block;
        }

        .signature-left .staff-label {
            font-size: 12px;
            font-weight: 600;
            color: var(--primary);
            margin-top: 8px;
        }

        .signature-right {
            text-align: center;
            min-width: 200px;
        }

        .signature-right .date {
            font-size: 12px;
            color: #6b7280;
            margin-bottom: 35px;
        }

        .signature-right .candidate-label {
            font-size: 13px;
            color: #374151;
            margin-bottom: 50px;
        }

        .signature-right .candidate-name {
            font-size: 14px;
            font-weight: 800;
            color: var(--primary);
            text-transform: uppercase;
            letter-spacing: 1px;
            padding-top: 12px;
            border-top: 1px solid #e5e7eb;
            display: inline-block;
            min-width: 200px;
        }

        .print-footer {
            background: #f9fafb;
            padding: 20px 40px;
            text-align: center;
            border-top: 1px solid #e5e7eb;
        }

        .btn-download {
            background: var(--primary);
            color: white;
            border: none;
            padding: 12px 32px;
            border-radius: 10px;
            font-weight: 600;
            font-size: 14px;
            font-family: 'Poppins', sans-serif;
            cursor: pointer;
            transition: all 0.3s ease;
            align-items: center;
            gap: 10px;
        }

        .btn-download:hover {
            background: var(--primary-dark);
            transform: translateY(-2px);
        }

        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 9999;
        }

        .loading-overlay.active {
            display: flex;
        }

        .spinner {
            width: 60px;
            height: 60px;
            border: 5px solid #f3f3f3;
            border-top: 5px solid var(--primary);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .loading-text {
            color: white;
            margin-top: 20px;
            font-family: 'Poppins', sans-serif;
            font-size: 14px;
        }

        @media (max-width: 768px) {
            .print-body {
                padding: 25px;
            }
            
            .info-grid {
                grid-template-columns: 1fr;
            }
            
            .info-item {
                flex-direction: column;
                gap: 4px;
            }
            
            .info-label {
                width: 100%;
            }

            .payment-grid {
                grid-template-columns: 1fr;
            }

            .payment-item {
                flex-direction: column;
                gap: 4px;
            }

            .payment-label {
                width: 100%;
            }
            
            .badge-number {
                flex-direction: column;
                text-align: center;
            }
            
            .signature-area {
                flex-direction: column;
                gap: 40px;
            }
        }

        @media print {
            body {
                background: white;
                padding: 0;
                margin: 0;
            }
            
            .print-container {
                max-width: 100%;
                margin: 0;
                padding: 0;
            }
            
            .print-card {
                border-radius: 0;
                box-shadow: none;
            }
            
            .print-header {
                border-bottom: 3px solid #000000;
            }
            
            .badge-number {
                background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
            }
            
            .section-title i {
                background: var(--primary);
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
            }

            .payment-section {
                background: linear-gradient(135deg, #fff9e6 0%, #fff3cc 100%);
                border: 2px solid #f59e0b;
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
            }

            .rekening-info {
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
            }
            
            .print-footer {
                display: none;
            }
        }
    </style>
</head>

<body>

<div class="print-container">
    <div class="print-card">
        <div class="print-header">
            <div class="logo-wrapper">
                <img src="{{ asset('./images/logo/logo1.png') }}" alt="Logo Kampus">
            </div>
            <h2>FORMULIR PENDAFTARAN</h2>
            <h2>CALON MAHASISWA BARU</h2>
            <div class="kampus-name">{{ strtoupper($settings['nama kampus'] ?? 'INSTITUT SAINS DAN TEKNOLOGI AL-KAMAL') }}</div>
        </div>

        <div class="print-body">
            <div class="badge-number">
                <span class="label"><i class="fas fa-qrcode"></i> NOMOR PENDAFTARAN</span>
                <span class="value">{{ $registrationData->daftar_id }}</span>
            </div>

            <!-- INFORMASI PEMBAYARAN - Lebih besar dan di-highlight -->
            <div class="payment-section">
                <div class="section-title">
                    <i class="fas fa-credit-card"></i>
                    <h3>INFORMASI PEMBAYARAN</h3>
                </div>
                <div class="payment-grid">
                    <div class="payment-item">
                        <span class="payment-label">Biaya Pendaftaran S1</span>
                        <span class="payment-value"><strong>Rp 150.000,-</strong></span>
                    </div>

                </div>
                
                <div class="rekening-info">
                    <div class="bank-name">
                        <i class="fas fa-university"></i> BANK BNI
                    </div>
                    <div class="rek-number">
                        No. Rekening: <span>8282823875</span>
                    </div>
                    <div style="font-size: 13px; color: #78350f; margin-top: 5px;">
                        a.n. Edukasi Indonesia Jaya
                    </div>
                </div>

                <div class="payment-note">
                    <i class="fas fa-info-circle"></i> 
                    <span class="highlight-note">Note:</span> Bisa juga datang ke kampus bertemu dengan staff PMB kami untuk melakukan pembayaran.
                </div>
            </div>
            <div class="info-section">
                <div class="section-title">
                    <i class="fas fa-graduation-cap"></i>
                    <h3>PROGRAM STUDI</h3>
                </div>
                <div class="info-grid">
                    <div class="info-item">
                        <span class="info-label">Perguruan Tinggi</span>
                        <span class="info-value">{{ $registrationData->kampus }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Jurusan</span>
                        <span class="info-value highlight">{{ $registrationData->jurusan }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Kelas</span>
                        <span class="info-value">{{ $registrationData->kelas }}</span>
                    </div>
                </div>
            </div>

            <div class="info-section">
                <div class="section-title">
                    <i class="fas fa-user"></i>
                    <h3>DATA PRIBADI</h3>
                </div>
                <div class="info-grid">
                    <div class="info-item">
                        <span class="info-label">Nama Lengkap</span>
                        <span class="info-value highlight">{{ $registrationData->nama_leng }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Jenis Kelamin</span>
                        <span class="info-value">{{ $registrationData->j_kel == 'L' ? 'Laki-laki' : 'Perempuan' }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Tempat, Tgl Lahir</span>
                        <span class="info-value">{{ $registrationData->tmpt_lahir }}, {{ $registrationData->tgl_lahir }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Nama Ibu Kandung</span>
                        <span class="info-value">{{ $registrationData->ibu }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Alamat KTP</span>
                        <span class="info-value">{{ $registrationData->al_ktp }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Alamat Domisili</span>
                        <span class="info-value">{{ $registrationData->al_dom }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Nomor KTP</span>
                        <span class="info-value">{{ $registrationData->no_ktp }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Nomor Darurat (Orang Tidak Serumah)</span>
                        <span class="info-value">{{ $registrationData->no_hp }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Nomor HP/WhatsApp</span>
                        <span class="info-value">{{ $registrationData->no_wa }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Email</span>
                        <span class="info-value">{{ $registrationData->email }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Agama</span>
                        <span class="info-value">{{ $registrationData->agama }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Ukuran Jaket</span>
                        <span class="info-value">{{ $registrationData->jaket }}</span>
                    </div>
                </div>
            </div>

            <div class="info-section">
                <div class="section-title">
                    <i class="fas fa-school"></i>
                    <h3>DATA PENDIDIKAN</h3>
                </div>
                <div class="info-grid">
                    <div class="info-item">
                        <span class="info-label">Lulusan</span>
                        <span class="info-value">{{ $registrationData->lulusan }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Nama Sekolah / Universitas</span>
                        <span class="info-value">{{ $registrationData->sekolah }}</span>
                    </div>
                </div>
            </div>

            <div class="info-section">
                <div class="section-title">
                    <i class="fas fa-briefcase"></i>
                    <h3>DATA PEKERJAAN & INFORMASI LAINNYA</h3>
                </div>
                <div class="info-grid">
                    <div class="info-item">
                        <span class="info-label">Pekerjaan</span>
                        <span class="info-value">{{ $registrationData->pekerjaan }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Sumber Informasi</span>
                        <span class="info-value">{{ $registrationData->info }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Biaya</span>
                        <span class="info-value highlight">{{ $registrationData->biaya }}</span>
                    </div>
                </div>
            </div>



            <div class="signature-area">
                <div class="signature-left">
                    <div class="kampus-name">{{ $settings['nama kampus'] ?? 'INSTITUT SAINS DAN TEKNOLOGI AL-KAMAL' }}</div>
                    <img src="{{ asset('images/ttd_cap_fix.png') }}" alt="TTD Cap">
                    <div class="staff-label">STAFF PMB</div>
                </div>
                <div class="signature-right">
                    <div class="date">{{ date('d-m-Y') }}</div>
                    <div class="candidate-label">Calon Mahasiswa,</div>
                    <div class="candidate-name">{{ strtoupper($registrationData->nama_leng) }}</div>
                </div>
            </div>
        </div>

        <div class="print-footer">
            <button id="downloadBtn" class="btn-download" onclick="downloadPDF()">
                <i class="fas fa-download"></i> Download PDF
            </button>
        </div>
    </div>
</div>

<div id="loadingOverlay" class="loading-overlay">
    <div style="text-align: center;">
        <div class="spinner"></div>
        <div class="loading-text">Sedang memproses PDF...</div>
    </div>
</div>

<script>
    function downloadPDF() {
        const loadingOverlay = document.getElementById('loadingOverlay');
        const downloadBtn = document.getElementById('downloadBtn');
        
        // Tampilkan loading
        loadingOverlay.classList.add('active');
        downloadBtn.disabled = true;
        downloadBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Memproses...';
        
        const noDaftar = '{{ $registrationData->daftar_id }}';
        
        // Redirect ke route download PDF
        window.location.href = '{{ url("/pendaftaran/download-pdf") }}/' + noDaftar;
        
        // Sembunyikan loading setelah 3 detik
        setTimeout(function() {
            loadingOverlay.classList.remove('active');
            downloadBtn.disabled = false;
            downloadBtn.innerHTML = '<i class="fas fa-download"></i> Download PDF';
        }, 3000);
    }
</script>

@stack('prpend-script')
@stack('addon-script')

<script src="https://cdn.jsdelivr.net/npm/flowbite@2.5.2/dist/flowbite.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script src="{{ asset('./js/app.js') }}"></script>

</body>

</html>