{% extends 'admin_master/base_admin_master.html' if session.get('role') == 'admin_master' else 'admin_psb/base_admin_psb.html' %}
{% set active_page = 'psb_laporan' if session.get('role') == 'admin_master' else 'laporan' %}

{% block page_title %}Laporan Data Pendaftar PSB{% endblock %}

{% block topbar_actions %}
<button onclick="window.print()" class="btn btn-primary fw-bold btn-print shadow-sm px-4">
    <i class="fas fa-print me-2"></i> Cetak Dokumen / PDF
</button>
{% endblock %}

{% block extra_head %}
<style>
    /* KOP SURAT (Disembunyikan di layar, ditampilkan saat print) */
    .kop-surat { display: none; text-align: center; margin-bottom: 20px; border-bottom: 3px solid #000; padding-bottom: 15px; }
    .kop-surat img { width: 80px; position: absolute; left: 0; }
    
    /* =========================================
       PENGATURAN KERTAS CETAK (MAGIC PRINT)
       ========================================= */
    @media print {
        /* Sembunyikan elemen yang tidak perlu diprint */
        .sidebar, .topbar, .btn-print, .shadow-sm, .card-custom { box-shadow: none !important; margin: 0 !important; padding: 0 !important;}
        .btn { display: none !important; } /* Sembunyikan semua tombol */
        
        /* Tampilkan KOP Surat */
        .kop-surat { display: block; position: relative; }
        
        /* Sesuaikan layout agar full screen di kertas */
        .main-content { margin-left: 0 !important; padding: 0 !important; background-color: white; }
        body { background-color: white; font-size: 12pt; }
        
        /* Rapikan Tabel untuk PDF/Kertas */
        table { width: 100%; border-collapse: collapse; }
        th, td { border: 1px solid #000 !important; padding: 8px; font-size: 11pt; color: black !important; }
        th { background-color: #f0f0f0 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
        
        /* Ubah warna badge (Diterima/Ditolak) menjadi teks biasa agar tinta irit */
        .badge { border: none !important; color: black !important; background: transparent !important; padding: 0 !important; font-size: 11pt; font-weight: normal;}
    }
</style>
{% endblock %}

{% block content %}

        <div class="card border-0 shadow-sm rounded-4 p-4 bg-white" id="areaCetak">
            
            <!-- KOP SURAT (Hanya Muncul Saat di-Print) -->
            <div class="kop-surat" style="border-bottom: 3px solid #000; padding-bottom: 15px; margin-bottom: 20px;">
                {% if settings.get('kop_surat_pondok') %}
                <img src="/static/uploads/{{ settings.kop_surat_pondok }}" alt="Kop Surat" style="width: 100%; height: auto; display: block; position: relative;">
                {% endif %}
            </div>

            <!-- JUDUL LAPORAN -->
            <div class="text-center mb-4 mt-3">
                
                
                <!-- KOTAK STATISTIK RINGKASAN -->
                <div class="row justify-content-center btn-print">
                    <div class="col-md-10">
                        <div class="d-flex justify-content-between bg-light p-3 rounded shadow-sm border">
                            <div class="text-center px-3 border-end">
                                <small class="text-muted d-block">Total Pendaftar</small>
                                <span class="fw-bold fs-5">{{ stat.total }}</span>
                            </div>
                            <div class="text-center px-3 border-end">
                                <small class="text-success d-block fw-bold">Diterima</small>
                                <span class="fw-bold fs-5">{{ stat.diterima }}</span>
                            </div>
                            <div class="text-center px-3 border-end">
                                <small class="text-danger d-block fw-bold">Ditolak</small>
                                <span class="fw-bold fs-5">{{ stat.ditolak }}</span>
                            </div>
                            <div class="text-center px-3 border-end">
                                <small class="text-warning d-block fw-bold">Menunggu</small>
                                <span class="fw-bold fs-5">{{ stat.menunggu }}</span>
                            </div>
                            <div class="text-center px-3 border-end">
                                <small class="text-primary d-block fw-bold">Putra</small>
                                <span class="fw-bold fs-5">{{ stat.putra }}</span>
                            </div>
                            <div class="text-center px-3">
                                <small class="text-primary d-block fw-bold">Putri</small>
                                <span class="fw-bold fs-5">{{ stat.putri }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- TABEL DATA SANTRI -->
            <div class="table-responsive mt-4">
                <table class="table table-bordered table-striped">
                    <thead class="table-dark">
                        <tr>
                            <th class="text-center" width="5%">No</th>
                            <th width="15%">No. Daftar</th>
                            <th width="25%">Nama Santri</th>
                            <th width="15%">Jenis Kelamin</th>
                            <th width="20%">Asal Sekolah</th>
                            <th width="15%">Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for row in data_laporan %}
                        <tr>
                            <td class="text-center">{{ loop.index }}</td>
                            <td>{{ row.id_pendaftaran }}</td>
                            <td class="fw-bold">{{ row.nama_lengkap }}</td>
                            <td>{{ row.jenis_kelamin }}</td>
                            <td>{{ row.asal_sekolah }}</td>
                            <td>
                                {% if row.status_verifikasi == 'Diterima' %}
                                    <span class="badge bg-success">Diterima</span>
                                {% elif row.status_verifikasi == 'Ditolak' %}
                                    <span class="badge bg-danger">Ditolak</span>
                                {% else %}
                                    <span class="badge bg-warning text-dark">Menunggu</span>
                                {% endif %}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            
            <!-- TANDA TANGAN (Hanya Muncul Saat di-Print) -->
            <div class="kop-surat border-0 mt-5 pt-3" style="text-align: right; margin-right: 50px;">
                <p style="margin-bottom: 70px;">Kemuning, ............................ 20..</p>
                <p style="font-weight: bold; text-decoration: underline; margin-bottom: 0;">Ketua Panitia PSB</p>
                <p>NIP/NIY: ........................</p>
            </div>

        </div>
{% endblock %}