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

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

{% block page_header %}
<h5 class="mb-1 fw-bold" style="color: #1f2937; font-size: 1.25rem;">Data Alumni</h5>
<small class="text-muted" style="font-size: 0.85rem;">Kelola data arsip alumni dan santri yang telah lulus/keluar dari pondok.</small>
{% endblock %}

{% block topbar_actions %}{% endblock %}

{% block content %}

<!-- CONTROL BAR (Filter & Actions) -->
<div class="mt-4 mb-4 d-flex flex-nowrap align-items-center gap-2 bg-transparent">
    <!-- Filters -->
    <div class="position-relative flex-shrink-0" style="width: 180px;">
        <i class="fas fa-search position-absolute text-muted" style="left: 10px; top: 50%; transform: translateY(-50%); font-size: 0.8rem;"></i>
        <input type="text" id="searchInput" class="form-control form-control-sm border-light-subtle rounded-1 w-100" placeholder="Cari nama atau ID..." style="padding-left: 30px; font-size: 0.85rem;" onkeyup="filterTable()">
    </div>
    
    <select id="filterLP" class="form-select form-select-sm text-muted border-light-subtle rounded-1 flex-shrink-0" style="width: auto; min-width: 110px; font-size: 0.85rem;" onchange="filterTable()">
        <option value="">Semua (L/P)</option>
        <option value="L">Laki-laki (L)</option>
        <option value="P">Perempuan (P)</option>
    </select>
    
    <select id="filterTahun" class="form-select form-select-sm text-muted border-light-subtle rounded-1 flex-shrink-0" style="width: auto; min-width: 120px; font-size: 0.85rem;" onchange="filterTable()">
        <option value="">Semua Tahun</option>
        {% set tahun_list = [] %}
        {% for a in alumni %}
            {% if a.tahun_keluar and a.tahun_keluar not in tahun_list %}
                {% set _ = tahun_list.append(a.tahun_keluar) %}
            {% endif %}
        {% endfor %}
        {% for th in tahun_list|sort(reverse=True) %}
        <option value="{{ th }}">{{ th }}</option>
        {% endfor %}
    </select>

    <!-- Actions (Kanan) -->
    <div class="d-flex flex-nowrap align-items-center gap-2 ms-auto">
        <div class="dropdown">
            <button class="btn btn-white btn-sm border border-light-subtle text-secondary shadow-sm rounded-1 d-flex align-items-center gap-2 px-3 py-1 btn-hover-border" type="button" data-bs-toggle="dropdown" style="font-size: 0.85rem; font-weight: 500;">
                <i class="fas fa-file-export"></i> Export / Print
            </button>
            <ul class="dropdown-menu dropdown-menu-end border-light-subtle shadow-sm rounded-2 mt-1">
                <li><a class="dropdown-item text-muted" href="#" style="font-size: 0.85rem;" onclick="window.print()"><i class="fas fa-print me-2 text-secondary"></i>Print Laporan</a></li>
                <li><a class="dropdown-item text-muted" href="#" style="font-size: 0.85rem;"><i class="fas fa-file-excel me-2 text-success"></i>Export Excel</a></li>
            </ul>
        </div>
        <a href="/admin_database/alumni/tambah" class="btn btn-primary btn-sm rounded-1 px-3 py-1 fw-medium shadow-sm d-flex align-items-center gap-2 btn-hover-zoom" style="font-size: 0.85rem; background: linear-gradient(135deg, #0d9488, #0f766e); border: none;">
            <i class="fas fa-plus"></i> Tambah Data
        </a>
    </div>
</div>

<!-- KARTU TABEL UTAMA -->
<div class="bule-card rounded-2 shadow-sm border-0 overflow-hidden bg-white">
    <div class="table-responsive">
        <table class="table mb-0 align-middle table-hover text-start" id="alumniTable" style="font-size: 0.875rem;">
            <thead>
                <tr class="bg-white border-bottom border-light-subtle">
                    <th class="py-3 px-4 text-uppercase fw-semibold text-muted text-center" style="font-size: 0.7rem; letter-spacing: 0.05em; width: 60px;">NO</th>
                    <th class="py-3 px-3 text-uppercase fw-semibold text-muted" style="font-size: 0.7rem; letter-spacing: 0.05em; width: 120px;">ID ALUMNI</th>
                    <th class="py-3 px-3 text-uppercase fw-semibold text-muted" style="font-size: 0.7rem; letter-spacing: 0.05em; min-width: 200px;">NAMA LENGKAP</th>
                    <th class="py-3 px-3 text-uppercase fw-semibold text-muted text-center" style="font-size: 0.7rem; letter-spacing: 0.05em; width: 80px;">L/P</th>
                    <th class="py-3 px-3 text-uppercase fw-semibold text-muted" style="font-size: 0.7rem; letter-spacing: 0.05em; min-width: 150px;">KELAS TERAKHIR</th>
                    <th class="py-3 px-3 text-uppercase fw-semibold text-muted" style="font-size: 0.7rem; letter-spacing: 0.05em; width: 120px;">TAHUN</th>
                    <th class="py-3 px-4 text-uppercase fw-semibold text-muted text-center" style="font-size: 0.7rem; letter-spacing: 0.05em; min-width: 140px;">AKSI</th>
                </tr>
            </thead>
            <tbody class="border-top-0">
                {% for row in alumni %}
                <tr class="action-row-hover border-bottom border-light-subtle">
                    <td class="text-center text-muted px-4 py-3">{{ loop.index }}</td>
                    <td class="text-muted font-monospace px-3 py-3">{{ row.id_alumni or '-' }}</td>
                    <td class="fw-medium text-dark px-3 py-3">
                        {{ row.nama_lengkap or '-' }}<br>
                        <small class="text-muted fw-normal"><i class="fas fa-id-card-alt me-1"></i>{{ row.id_santri_lama or '-' }}</small>
                    </td>
                    <td class="text-center text-muted px-3 py-3">
                        {% if not row.jenis_kelamin %}
                            -
                        {% elif row.jenis_kelamin in ['Laki-laki', 'L', 'Putra'] %}
                            L
                        {% elif row.jenis_kelamin in ['Perempuan', 'P', 'Putri', 'perempuan', 'putri'] %}
                            P
                        {% else %}
                            -
                        {% endif %}
                    </td>
                    <td class="text-muted px-3 py-3">
                        {{ row.kelas_terakhir or '-' }}
                    </td>
                    <td class="text-muted px-3 py-3">
                        {% if row.tahun_keluar %}
                        <span class="badge rounded-pill fw-medium d-inline-flex align-items-center gap-1" style="background-color: rgba(59, 130, 246, 0.15); color: #2563eb; font-size: 0.7rem; padding: 0.35rem 0.65rem;">
                            <i class="fas fa-sign-out-alt me-1"></i> {{ row.tahun_keluar }}
                        </span>
                        {% else %}
                        -
                        {% endif %}
                    </td>
                    <td class="text-center px-4 py-3">
                        <!-- Action Buttons -->
                        <div class="d-flex justify-content-center gap-1 action-buttons transition-opacity">
                            <a href="/admin_database/alumni/edit/{{ row.id }}" class="btn btn-sm btn-icon border-0 text-muted hover-text-warning rounded-3" title="Edit Data">
                                <i class="fas fa-edit"></i>
                            </a>
                            <button type="button" class="btn btn-sm btn-icon border-0 text-muted hover-text-info rounded-3" title="Tandai Mutakhoorijin" onclick='bukaModalMutakhoorijin({{ row.id }}, {{ row.nama_lengkap|tojson }})'>
                                <i class="fas fa-award"></i>
                            </button>
                            <form action="/admin_database/alumni/hapus/{{ row.id }}" method="POST" class="d-inline" onsubmit="return confirm('Hapus data alumni?');">
                                <button type="submit" class="btn btn-sm btn-icon border-0 text-muted hover-text-danger rounded-3" title="Hapus">
                                    <i class="fas fa-trash-alt"></i>
                                </button>
                            </form>
                        </div>
                    </td>
                </tr>
                {% else %}
                <tr>
                    <td colspan="7" class="text-center py-5 text-muted">
                        <i class="fas fa-user-graduate mb-3" style="font-size: 3rem; color: #cbd5e1;"></i>
                        <h5>Belum ada data alumni</h5>
                        <p>Silakan klik tombol "Tambah Data" atau luluskan santri dari menu Data Santri.</p>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    
    <!-- Pagination Footer -->
    <div class="bg-white px-4 py-3 border-top border-light-subtle d-flex justify-content-between align-items-center">
        <span class="text-muted" style="font-size: 0.875rem;">Menampilkan <span class="fw-medium text-dark">{{ alumni|length }}</span> hasil</span>
    </div>
</div>

<script>
    function filterTable() {
        var searchInput = document.getElementById("searchInput").value.toLowerCase();
        var filterLP = document.getElementById("filterLP").value.toLowerCase();
        var filterTahun = document.getElementById("filterTahun").value.toLowerCase();
        var table = document.getElementById("alumniTable");
        var tr = table.getElementsByTagName("tbody")[0].getElementsByTagName("tr");

        for (var i = 0; i < tr.length; i++) {
            if (tr[i].getElementsByTagName("td").length < 7) continue;

            var tdId = tr[i].getElementsByTagName("td")[1];
            var tdNama = tr[i].getElementsByTagName("td")[2];
            var tdLP = tr[i].getElementsByTagName("td")[3];
            var tdTahun = tr[i].getElementsByTagName("td")[5];

            if (tdId && tdNama && tdLP && tdTahun) {
                var txtId = tdId.textContent || tdId.innerText;
                var txtNama = tdNama.textContent || tdNama.innerText;
                var txtLP = tdLP.textContent || tdLP.innerText;
                var txtTahun = tdTahun.textContent || tdTahun.innerText;

                var matchSearch = txtNama.toLowerCase().indexOf(searchInput) > -1 || txtId.toLowerCase().indexOf(searchInput) > -1;
                var matchLP = filterLP === "" || txtLP.toLowerCase().trim() === filterLP;
                var matchTahun = filterTahun === "" || txtTahun.toLowerCase().indexOf(filterTahun) > -1;

                if (matchSearch && matchLP && matchTahun) {
                    tr[i].style.display = "";
                } else {
                    tr[i].style.display = "none";
                }
            }
        }
    }
    
    function bukaModalMutakhoorijin(id_db, namaLengkap) {
        document.getElementById('namaSantriMutakhoorijin').textContent = namaLengkap;
        document.getElementById('formMutakhoorijin').action = '/admin_database/alumni/tandai_mutakhoorijin/' + id_db;
        new bootstrap.Modal(document.getElementById('modalMutakhoorijin')).show();
    }
</script>

<!-- Modal Tandai Mutakhoorijin -->
<div class="modal fade" id="modalMutakhoorijin" tabindex="-1" aria-labelledby="modalMutakhoorijinLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow" style="border-radius: 1rem;">
            <div class="modal-header border-bottom-0 pb-0">
                <h5 class="modal-title fw-bold" id="modalMutakhoorijinLabel"><i class="fas fa-award text-info me-2"></i>Tandai Mutakhoorijin</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="formMutakhoorijin" method="POST" action="">
                <div class="modal-body">
                    <p class="text-muted mb-4" style="font-size: 0.9rem;">
                        Anda akan menandai alumni <strong id="namaSantriMutakhoorijin" class="text-dark"></strong> sebagai <strong>Mutakhoorijin</strong> (Lulus Aliyah).
                    </p>
                    
                    <div class="mb-3">
                        <label class="form-label text-muted fw-medium" style="font-size: 0.85rem;">Tahun Lulus <span class="text-danger">*</span></label>
                        <input type="text" class="form-control border-light-subtle rounded-3 bg-light" name="tahun_lulus" required placeholder="Contoh: 1448/1449 H">
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label text-muted fw-medium" style="font-size: 0.85rem;">Tanggal Lulus</label>
                        <input type="date" class="form-control border-light-subtle rounded-3 bg-light" name="tanggal_lulus">
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label text-muted fw-medium" style="font-size: 0.85rem;">Keterangan / Catatan</label>
                        <textarea class="form-control border-light-subtle rounded-3 bg-light" name="keterangan" rows="2" placeholder="Opsional..."></textarea>
                    </div>
                </div>
                <div class="modal-footer border-top-0 pt-0">
                    <button type="button" class="btn btn-light px-4 border-light-subtle" data-bs-dismiss="modal" style="border-radius: 0.5rem;">Batal</button>
                    <button type="submit" class="btn btn-info text-white px-4 shadow-sm" style="border-radius: 0.5rem;">Simpan Mutakhoorijin</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}