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

{% block page_header %}
<h5 class="mb-1 fw-bold" style="color: #1f2937; font-size: 1.25rem;">Selamat datang, {{ session.get('nama', 'Admin PSSB') }} 👋</h5>
<small class="text-muted" style="font-size: 0.85rem;">Berikut adalah ringkasan pendaftaran santri baru.</small>
{% endblock %}

{% block content %}

<!-- STAT CARDS -->
<div class="row g-3 mb-4">
    <div class="col-6 col-md-3">
        <div class="stat-card">
            <div class="stat-icon blue"><i class="fas fa-server"></i></div>
            <div>
                <div class="stat-value">{{ total }}</div>
                <div class="stat-label">Total Pendaftar</div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="stat-card">
            <div class="stat-icon orange"><i class="fas fa-user-plus"></i></div>
            <div>
                <div class="stat-value">{{ belum_verifikasi }}</div>
                <div class="stat-label">Belum Verifikasi</div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="stat-card">
            <div class="stat-icon green"><i class="fas fa-user-check"></i></div>
            <div>
                <div class="stat-value">{{ diterima }}</div>
                <div class="stat-label">Diterima</div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="stat-card">
            <div class="stat-icon red"><i class="fas fa-user-times"></i></div>
            <div>
                <div class="stat-value">{{ ditolak }}</div>
                <div class="stat-label">Ditolak</div>
            </div>
        </div>
    </div>
</div>

<!-- TABLE SECTION -->
<div class="section-header mt-4">
    <i class="fas fa-list text-primary"></i>
    <h6>Data Pendaftaran Terbaru</h6>
</div>
<div class="card border-0 shadow-sm rounded-4 mb-4 p-3" style="background: white;">
    <div class="table-responsive">
        <table class="table table-hover align-middle mb-0 custom-table">
            <thead>
                <tr class="bg-light">
                    <th>No.</th>
                    <th>No. Pendaftaran (Username)</th>
                    <th>Nama Santri</th>
                    <th>NIK</th>
                    <th>Status Verifikasi</th>
                    <th>Aksi</th>
                </tr>
            </thead>
            <tbody>
                <!-- Melakukan Looping Data dari Database -->
                {% for row in data_pendaftar %}
                <tr>
                    <td>{{ loop.index }}</td>
                    <td class="fw-bold">{{ row.id_pendaftaran }}</td>
                    <td>{{ row.nama_lengkap }}</td>
                    <td>{{ row.nik }}</td>
                    <td>
                        <!-- Logika Warna Status Otomatis -->
                        {% if row.status_verifikasi == 'Menunggu Verifikasi' %}
                            <span class="badge bg-warning bg-opacity-10 text-warning rounded-pill fw-semibold border border-warning px-3 py-2"><i class="fas fa-clock me-1"></i> Menunggu</span>
                        {% elif row.status_verifikasi == 'Diterima' %}
                            <span class="badge bg-success bg-opacity-10 text-success rounded-pill fw-semibold border border-success px-3 py-2"><i class="fas fa-check me-1"></i> Diterima</span>
                        {% elif row.status_verifikasi == 'Ditolak' %}
                            <span class="badge bg-danger bg-opacity-10 text-danger rounded-pill fw-semibold border border-danger px-3 py-2"><i class="fas fa-times me-1"></i> Ditolak</span>
                        {% else %}
                            <span class="badge bg-secondary bg-opacity-10 text-secondary rounded-pill fw-semibold border border-secondary px-3 py-2">{{ row.status_verifikasi }}</span>
                        {% endif %}
                    </td>
                    <td>
                        <div class="d-flex flex-nowrap gap-1 align-items-center">
                            <!-- 1. Tombol Print -->
                            <a href="/api/print_formulir/{{ row.id_pendaftaran }}" target="_blank" class="btn btn-outline-secondary btn-sm text-nowrap">
                                <i class="fas fa-print me-1"></i> Print
                            </a>
                            
                            <!-- 2. Tombol Aksi (Berisi Dropdown) -->
                            <div class="dropdown">
                                <!-- PERBAIKAN: Menambahkan data-bs-boundary="window" di sini -->
                                <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-boundary="window">
                                    <i class="fas fa-cog me-1"></i> Aksi
                                </button>
                                
                                <ul class="dropdown-menu shadow-sm">
                                    <!-- Pilihan Edit -->
                                    <li>
                                        <a class="dropdown-item text-primary" href="/admin_psb/edit/{{ row.id_pendaftaran }}">
                                            <i class="fas fa-edit me-2"></i> Edit Lengkap
                                        </a>
                                    </li>
        
                                    <!-- Pilihan Verifikasi -->
                                    {% if row.status_verifikasi == 'Menunggu Verifikasi' %}
                                    <li>
                                        <a class="dropdown-item text-success" href="#" onclick="verifikasiSantri('{{ row.id_pendaftaran }}', '{{ row.nama_lengkap }}')">
                                            <i class="fas fa-check me-2"></i> Verifikasi
                                        </a>
                                    </li>
                                    {% endif %}
        
                                    <!-- Garis Pemisah -->
                                    <li><hr class="dropdown-divider"></li>
        
                                    <!-- Pilihan Hapus -->
                                    <li>
                                        <a class="dropdown-item text-danger" href="#" onclick="hapusData('{{ row.id_pendaftaran }}')">
                                            <i class="fas fa-trash me-2"></i> Hapus
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </td>
                </tr>
                {% else %}
                <tr>
                    <td colspan="6" class="text-center py-4 text-muted">Belum ada data pendaftar.</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function verifikasiSantri(username, nama) {
    Swal.fire({
        title: 'Verifikasi Pendaftar',
        text: `Tentukan status kelulusan untuk ${nama} (${username}).`,
        icon: 'question',
        showCancelButton: true,
        showDenyButton: true,
        confirmButtonText: '<i class="fas fa-check"></i> Terima',
        confirmButtonColor: '#10ac84',
        denyButtonText: '<i class="fas fa-times"></i> Tolak',
        denyButtonColor: '#ff5252',
        cancelButtonText: 'Batal'
    }).then((result) => {
        if (result.isConfirmed) {
            kirimUpdateStatus(username, 'Diterima');
        } else if (result.isDenied) {
            kirimUpdateStatus(username, 'Ditolak');
        }
    });
}

async function kirimUpdateStatus(username, statusBaru) {
    Swal.fire({ title: 'Memproses...', allowOutsideClick: false, didOpen: () => Swal.showLoading() });

    try {
        const response = await fetch('/api/update_status', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ username: username, status: statusBaru })
        });

        const data = await response.json();

        if (data.status === 'success') {
            Swal.fire('Berhasil!', data.message, 'success').then(() => {
                location.reload(); 
            });
        } else {
            Swal.fire('Gagal!', data.message, 'error');
        }
    } catch (error) {
        Swal.fire('Error!', 'Gagal menghubungi server.', 'error');
    }
}

// 1. FITUR HAPUS DATA (Menggunakan SweetAlert2)
function hapusData(idPendaftaran) {
    Swal.fire({
        title: 'Apakah Anda yakin?',
        text: "Data dengan ID " + idPendaftaran + " akan dihapus secara permanen!",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#d33',
        cancelButtonColor: '#6c757d',
        confirmButtonText: '<i class="fas fa-trash"></i> Ya, Hapus!',
        cancelButtonText: 'Batal'
    }).then((result) => {
        if (result.isConfirmed) {
            Swal.fire(
                'Terhapus!',
                'Data pendaftaran ' + idPendaftaran + ' telah dihapus.',
                'success'
            );
        }
    });
}

// 2. FITUR EDIT DATA
function editData(idPendaftaran) {
    Swal.fire({
        title: 'Fitur Edit Aktif',
        text: 'Membuka data untuk ID Pendaftaran: ' + idPendaftaran,
        icon: 'info',
        confirmButtonColor: '#0d6efd'
    });
}

function konfirmasiCetak(tombol, urlCetak) {
    Swal.fire({
        title: 'Cetak Formulir Word?',
        text: "Sistem membutuhkan waktu beberapa detik untuk merakit dokumen Word.",
        icon: 'info',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: '<i class="fas fa-print"></i> Ya, Cetak',
        cancelButtonText: 'Batal'
    }).then((result) => {
        if (result.isConfirmed) {
            Swal.fire({
                title: 'Merakit Dokumen...',
                html: 'Tunggu sebentar, sedang menyusun data...',
                allowOutsideClick: false,
                didOpen: () => {
                    Swal.showLoading();
                }
            });
            
            window.location.href = urlCetak;
            
            setTimeout(function() {
                Swal.fire({
                    title: 'Berhasil!',
                    text: 'Formulir Word berhasil dibuat dan sedang diunduh.',
                    icon: 'success',
                    confirmButtonColor: '#198754',
                    timer: 4000,
                    timerProgressBar: true
                });
            }, 4500);
        }
    });
}
</script>
{% endblock %}