{% extends 'admin_master/base_admin_master.html' if session.get('role') == 'admin_master' else 'admin_database/base_admin_database.html' %}
{% set active_page = 'mutakhoorijin' %}

{% block page_title %}Data Mutakhoorijin - Admin Database{% endblock %}

{% block page_header %}
<div class="d-flex justify-content-between align-items-end">
    <div>
        <h5 class="mb-1 fw-bold" style="color: #1f2937; font-size: 1.25rem;">Data Mutakhoorijin</h5>
        <small class="text-muted" style="font-size: 0.85rem;">Daftar santri yang tercatat telah lulus (Mutakhoorijin).</small>
    </div>
</div>
{% endblock %}

{% block content %}
<div class="bg-white p-4 rounded-3 shadow-sm border border-light-subtle">
    <!-- Filter Section -->
    <div class="row g-3 mb-4">
        <div class="col-md-4">
            <div class="input-group input-group-sm">
                <span class="input-group-text bg-light border-light-subtle text-muted px-3"><i class="fas fa-search"></i></span>
                <input type="text" id="searchInput" class="form-control border-light-subtle custom-input" placeholder="Cari nama santri..." onkeyup="filterTable()">
            </div>
        </div>
        <div class="col-md-3">
            <select id="statusFilter" class="form-select form-select-sm border-light-subtle custom-input" onchange="filterTable()">
                <option value="">Semua Status</option>
                <option value="Masih di Pondok">Masih di Pondok</option>
                <option value="Sudah Keluar/Alumni">Sudah Keluar / Alumni</option>
            </select>
        </div>
    </div>

    <div class="table-responsive">
        <table class="table table-hover align-middle custom-table" id="mutakhoorijinTable">
            <thead>
                <tr>
                    <th class="text-center" width="5%">No</th>
                    <th width="25%">Nama Lengkap</th>
                    <th width="15%">Lulusan (Tahun)</th>
                    <th width="15%">Tanggal Lulus</th>
                    <th width="25%">Informasi & Status</th>
                    <th class="text-center" width="15%">Aksi</th>
                </tr>
            </thead>
            <tbody>
                {% for item in mutakhoorijin_list %}
                <tr>
                    <td class="text-center text-muted fw-medium">{{ loop.index }}</td>
                    <td>
                        <div class="fw-bold" style="color: #1e293b; font-size: 0.95rem;">{{ item.nama_lengkap }}</div>
                        <div class="text-muted" style="font-size: 0.8rem;">
                            {% if item.jenis_kelamin == 'Laki-laki' %}
                                <i class="fas fa-mars text-primary me-1"></i>
                            {% else %}
                                <i class="fas fa-venus text-danger me-1"></i>
                            {% endif %}
                            {{ item.jenis_kelamin }}
                            {% if item.nomor_wa %}
                            <span class="mx-1">•</span> <i class="fab fa-whatsapp text-success me-1"></i> {{ item.nomor_wa }}
                            {% endif %}
                        </div>
                    </td>
                    <td>
                        <span class="badge bg-light text-dark border border-light-subtle">{{ item.tahun_lulus }}</span>
                    </td>
                    <td>
                        <div style="font-size: 0.9rem;">{{ item.tanggal_lulus }}</div>
                    </td>
                    <td>
                        {% if item.status_pondok == 'Masih di Pondok' %}
                            <span class="badge" style="background-color: rgba(20, 184, 166, 0.1); color: #0d9488; border: 1px solid rgba(20, 184, 166, 0.2);">
                                <i class="fas fa-user-check me-1"></i> Santri Aktif
                            </span>
                            {% if item.tingkat_kelas and item.kamar %}
                            <div class="text-muted mt-1" style="font-size: 0.75rem;">
                                {{ item.tingkat_kelas }} - {{ item.kamar }}
                            </div>
                            {% endif %}
                        {% else %}
                            <span class="badge" style="background-color: rgba(100, 116, 139, 0.1); color: #475569; border: 1px solid rgba(100, 116, 139, 0.2);">
                                <i class="fas fa-user-graduate me-1"></i> Sudah Alumni
                            </span>
                        {% endif %}
                        
                        {% if item.keterangan_kelulusan %}
                        <div class="text-muted mt-1" style="font-size: 0.8rem;">
                            <i class="fas fa-info-circle me-1"></i> {{ item.keterangan_kelulusan }}
                        </div>
                        {% endif %}
                    </td>
                    <td class="text-center">
                        <button onclick="confirmHapus({{ item.id_mutakhoorijin }}, '{{ item.nama_lengkap }}')" class="btn btn-sm btn-outline-danger" title="Batalkan status Mutakhoorijin" style="font-size: 0.75rem; padding: 0.25rem 0.5rem;">
                            <i class="fas fa-times me-1"></i> Batalkan
                        </button>
                    </td>
                </tr>
                {% else %}
                <tr>
                    <td colspan="6" class="text-center py-5">
                        <div class="d-flex flex-column align-items-center justify-content-center text-muted">
                            <i class="fas fa-user-graduate mb-3" style="font-size: 3rem; color: #cbd5e1;"></i>
                            <h6 class="fw-medium mb-1">Belum ada data Mutakhoorijin</h6>
                            <small>Santri yang ditandai lulus III Aliyah akan muncul di sini.</small>
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<style>
    .custom-table { font-size: 0.9rem; }
    .custom-table thead th {
        background-color: #f8fafc; color: #475569; font-weight: 600;
        text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.5px;
        border-bottom: 2px solid #e2e8f0; padding: 1rem;
    }
    .custom-table tbody td { padding: 1rem; vertical-align: middle; border-bottom: 1px solid #f1f5f9; }
    .custom-table tbody tr:hover { background-color: #f8fafc; }
    .custom-input { transition: all 0.2s ease-in-out; font-size: 0.85rem; }
    .custom-input:focus {
        background-color: #ffffff !important; border-color: #0d9488 !important;
        box-shadow: 0 0 0 0.25rem rgba(13, 148, 136, 0.15) !important;
    }
</style>

<!-- Modal Hapus -->
<div class="modal fade" id="modalHapus" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow" style="border-radius: 1rem; overflow: hidden;">
            <div class="modal-header border-0 bg-danger text-white p-4">
                <h5 class="modal-title fw-bold"><i class="fas fa-exclamation-triangle me-2"></i>Batalkan Mutakhoorijin</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-4 text-center">
                <div class="mb-3">
                    <div class="rounded-circle d-inline-flex align-items-center justify-content-center" style="width: 60px; height: 60px; background-color: #fee2e2; color: #ef4444;">
                        <i class="fas fa-times fa-2x"></i>
                    </div>
                </div>
                <h6 class="fw-bold text-dark mb-2">Batalkan status Mutakhoorijin untuk:</h6>
                <p class="text-danger fw-bold fs-5 mb-3" id="namaMutakhoorijin"></p>
                <p class="text-muted mb-0" style="font-size: 0.9rem;">
                    Tindakan ini akan menghapus riwayat kelulusannya dari tabel Mutakhoorijin. Data biodata santri/alumni tetap aman.
                </p>
            </div>
            <div class="modal-footer border-0 p-4 pt-0 justify-content-center">
                <button type="button" class="btn btn-light px-4 border-light-subtle" data-bs-dismiss="modal" style="border-radius: 0.5rem; font-weight: 500;">Batal</button>
                <form method="POST" id="formConfirmHapus"><button type="submit" id="btnConfirmHapus" class="btn btn-danger px-4 shadow-sm" style="border-radius: 0.5rem; font-weight: 500;">Ya, Batalkan</button></form>
            </div>
        </div>
    </div>
</div>

<script>
    function filterTable() {
        const input = document.getElementById("searchInput").value.toLowerCase();
        const statusFilter = document.getElementById("statusFilter").value;
        const rows = document.querySelectorAll("#mutakhoorijinTable tbody tr");

        rows.forEach(row => {
            if(row.children.length === 1) return; // Skip "no data" row
            
            const textContent = row.textContent.toLowerCase();
            const matchesSearch = textContent.includes(input);
            const matchesStatus = statusFilter === "" || row.textContent.includes(statusFilter);

            row.style.display = (matchesSearch && matchesStatus) ? "" : "none";
        });
    }

    function confirmHapus(id, nama) {
        document.getElementById('namaMutakhoorijin').textContent = nama;
        document.getElementById('formConfirmHapus').action = '/admin_database/mutakhoorijin/hapus/' + id;
        new bootstrap.Modal(document.getElementById('modalHapus')).show();
    }
</script>
{% endblock %}