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

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

{% block page_header %}
<h5 class="mb-1 fw-bold" style="color: #1f2937; font-size: 1.25rem;">Data Santri</h5>
<small class="text-muted" style="font-size: 0.85rem;">Kelola seluruh data induk santri, profil keaktifan, dan penempatan.</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="filterKelas" 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 Kelas</option>
        {% set kelas_list = [] %}
        {% for s in santri %}
            {% if s.tingkat_kelas and s.tingkat_kelas not in kelas_list %}
                {% set _ = kelas_list.append(s.tingkat_kelas) %}
            {% endif %}
        {% endfor %}
        {% for kl in kelas_list|sort %}
        <option value="{{ kl }}">{{ kl }}</option>
        {% endfor %}
    </select>
    
    <select id="filterKamar" 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 Kamar</option>
        {% set kamar_list = [] %}
        {% for s in santri %}
            {% if s.kamar and s.kamar not in kamar_list %}
                {% set _ = kamar_list.append(s.kamar) %}
            {% endif %}
        {% endfor %}
        {% for k in kamar_list|sort %}
        <option value="{{ k }}">{{ k }}</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="/admin_database/santri/export" style="font-size: 0.85rem;"><i class="fas fa-file-excel me-2 text-success"></i>Export Excel</a></li>
            </ul>
        </div>
        <div class="dropdown">
            <button 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" type="button" data-bs-toggle="dropdown" style="font-size: 0.85rem; background: linear-gradient(135deg, #0d9488, #0f766e); border: none;">
                <i class="fas fa-plus"></i> Tambah Data
            </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="/admin_database/santri/tambah" style="font-size: 0.85rem;"><i class="fas fa-user-plus me-2 text-primary"></i>Input Manual</a></li>
                <li><a class="dropdown-item text-muted" href="#" style="font-size: 0.85rem;" data-bs-toggle="modal" data-bs-target="#importModal"><i class="fas fa-file-import me-2 text-success"></i>Import dari Excel (.xlsx)</a></li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item text-muted" href="/admin_database/santri/template" style="font-size: 0.85rem;"><i class="fas fa-file-download me-2 text-info"></i>Unduh Template Excel</a></li>
            </ul>
        </div>
    </div>
</div>

<!-- Modal Import CSV -->
<div class="modal fade" id="importModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 rounded-2 shadow">
            <div class="modal-header border-bottom border-light-subtle bg-light">
                <h6 class="modal-title fw-bold text-dark"><i class="fas fa-file-import me-2 text-primary"></i>Import Data Santri</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="/admin_database/santri/import" method="POST" enctype="multipart/form-data">
                <div class="modal-body p-4">
                    <div class="alert alert-info border-0 rounded-1 small mb-4">
                        <i class="fas fa-info-circle me-2"></i> Pastikan file berformat <strong>.xlsx</strong> dan sesuai dengan <a href="/admin_database/santri/template" class="fw-bold text-info">template yang disediakan</a>.
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-muted small fw-medium">Pilih File Excel (.xlsx)</label>
                        <input type="file" name="file_xlsx" class="form-control form-control-sm rounded-1" accept=".xlsx" required>
                    </div>
                </div>
                <div class="modal-footer border-top border-light-subtle bg-light">
                    <button type="button" class="btn btn-white btn-sm border border-light-subtle text-muted rounded-1 px-3" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary btn-sm border-0 rounded-1 px-4" style="background-color: #0d9488;">Upload & Import</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- KARTU TABEL UTAMA -->
<div class="bule-card rounded-2 shadow-sm border-0 overflow-hidden">
    <div class="table-responsive">
        <table class="table mb-0 align-middle table-hover text-start" id="santriTable" 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 SANTRI</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 & KAMAR</th>
                    <th class="py-3 px-3 text-uppercase fw-semibold text-muted" style="font-size: 0.7rem; letter-spacing: 0.05em; width: 120px;">STATUS</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: 180px;">AKSI</th>
                </tr>
            </thead>
            <tbody class="border-top-0">
                {% for row in santri %}
                <tr class="action-row-hover border-bottom border-light-subtle" data-nik="{{ row.nik or '' }}" data-nisn="{{ row.nisn or '' }}">
                    <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_santri or '-' }}</td>
                    <td class="fw-medium text-dark px-3 py-3">{{ row.nama_lengkap or '-' }}</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.tingkat_kelas or '-' }} <br>
                        <span style="font-size: 0.75rem;">{{ row.kamar or '-' }}</span>
                    </td>
                    <td class="px-3 py-3">
                        {% if row.status_keaktifan == 'Aktif' %}
                        <span class="badge rounded-pill fw-medium d-inline-flex align-items-center gap-1" style="background-color: rgba(20, 184, 166, 0.15); color: #0d9488; font-size: 0.7rem; padding: 0.35rem 0.65rem;">
                            <span class="rounded-circle" style="width: 6px; height: 6px; background-color: #0d9488;"></span> Aktif
                        </span>
                        {% elif row.status_keaktifan == 'Lulus' %}
                        <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;">
                            <span class="rounded-circle" style="width: 6px; height: 6px; background-color: #2563eb;"></span> Lulus
                        </span>
                        {% elif row.status_keaktifan == 'Boyong' %}
                        <span class="badge rounded-pill fw-medium d-inline-flex align-items-center gap-1" style="background-color: rgba(239, 68, 68, 0.15); color: #ef4444; font-size: 0.7rem; padding: 0.35rem 0.65rem;">
                            <span class="rounded-circle" style="width: 6px; height: 6px; background-color: #ef4444;"></span> Boyong
                        </span>
                        {% else %}
                        <span class="badge rounded-pill fw-medium d-inline-flex align-items-center gap-1" style="background-color: rgba(100, 116, 139, 0.15); color: #475569; font-size: 0.7rem; padding: 0.35rem 0.65rem;">
                            <span class="rounded-circle" style="width: 6px; height: 6px; background-color: #475569;"></span> {{ row.status_keaktifan or 'Nonaktif' }}
                        </span>
                        {% 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/santri/detail/{{ row.no_baris }}" class="btn btn-sm btn-icon border-0 text-muted hover-text-primary rounded-3" title="Detail Santri">
                                <i class="fas fa-eye"></i>
                            </a>
                            <a href="/admin_database/santri/edit/{{ row.no_baris }}" 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>
                            <div class="dropdown d-inline">
                                <button class="btn btn-sm btn-icon border-0 text-muted hover-text-secondary rounded-3" type="button" data-bs-toggle="dropdown" aria-expanded="false" title="Cetak Kartu">
                                    <i class="fas fa-print"></i>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-end shadow-sm border-0" style="font-size: 0.85rem;">
                                    <li><a class="dropdown-item" href="/admin_database/santri/cetak_kartu_santri/{{ row.no_baris }}" target="_blank"><i class="fas fa-id-card text-muted me-2"></i> Kartu Santri (KTS)</a></li>
                                    <li><a class="dropdown-item" href="/admin_database/santri/cetak_kartu_madrasah/{{ row.no_baris }}" target="_blank"><i class="fas fa-address-card text-muted me-2"></i> Kartu Madrasah</a></li>
                                </ul>
                            </div>
                            <form action="/admin_database/santri/pindah_alumni/{{ row.no_baris }}" method="POST" class="d-inline" onsubmit="return confirm('Pindahkan santri ini ke Data Alumni? Data santri aktif akan dihapus dan dipindahkan ke tabel Alumni.');">
                                <button type="submit" class="btn btn-sm btn-icon border-0 text-muted hover-text-success rounded-3" title="Luluskan / Pindah Alumni">
                                    <i class="fas fa-user-graduate"></i>
                                </button>
                            </form>
                            <button type="button" class="btn btn-sm btn-icon border-0 text-muted hover-text-info rounded-3" title="Tandai Mutakhoorijin" onclick='bukaModalMutakhoorijin({{ row.no_baris }}, {{ row.nama_lengkap|tojson }})'>
                                <i class="fas fa-award"></i>
                            </button>
                            <form action="/admin_database/santri/hapus/{{ row.no_baris }}" method="POST" class="d-inline" onsubmit="return confirm('Hapus data santri?');">
                                <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-folder-open mb-3" style="font-size: 3rem; color: #cbd5e1;"></i>
                        <h5>Belum ada data santri</h5>
                        <p>Silakan klik tombol "Tambah Santri" untuk memasukkan data baru.</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">{{ santri|length }}</span> hasil</span>
    </div>
</div>
{% endblock %}

{% block extra_scripts %}
<style>
/* CSS khusus untuk santri.html agar identik dengan blueprint */
.btn-white {
    background-color: #ffffff;
}
.btn-hover-border:hover {
    color: #00685f !important;
    border-color: #00685f !important;
    background-color: #f8fafc;
}
.btn-hover-zoom {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-hover-zoom:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}
.stat-hover {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.stat-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

/* Tabel Hover & Actions */
.action-row-hover:hover .action-buttons {
    opacity: 1 !important;
}
.transition-opacity {
    transition: opacity 0.2s ease-in-out;
}
.btn-icon {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.hover-text-primary:hover { color: #00685f !important; background-color: rgba(0, 104, 95, 0.1) !important; }
.hover-text-warning:hover { color: #f59e0b !important; background-color: rgba(245, 158, 11, 0.1) !important; }
.hover-text-secondary:hover { color: #14b8a6 !important; background-color: rgba(20, 184, 166, 0.1) !important; }
.hover-text-danger:hover { color: #ef4444 !important; background-color: rgba(239, 68, 68, 0.1) !important; }

.action-row-hover:hover {
    background-color: #f8fafc !important; 
}
</style>
<script>
// Fungsi Pencarian & Filter Kombinasi
function filterTable() {
    let inputSearch = document.getElementById("searchInput") ? document.getElementById("searchInput").value.toLowerCase() : "";
    let filterStatus = document.getElementById("filterStatus") ? document.getElementById("filterStatus").value.toLowerCase() : "";
    let filterLP = document.getElementById("filterLP") ? document.getElementById("filterLP").value.toLowerCase() : "";
    let filterKelas = document.getElementById("filterKelas") ? document.getElementById("filterKelas").value.toLowerCase() : "";
    let filterKamar = document.getElementById("filterKamar") ? document.getElementById("filterKamar").value.toLowerCase() : "";
    
    let table = document.getElementById("santriTable");
    let tr = table.getElementsByTagName("tr");

    for (let i = 1; i < tr.length; i++) {
        let tds = tr[i].getElementsByTagName("td");
        if (tds.length > 0) {
            let idSantri = (tds[1].textContent || tds[1].innerText).toLowerCase();
            let nama = (tds[2].textContent || tds[2].innerText).toLowerCase();
            let lp = (tds[3].textContent || tds[3].innerText).toLowerCase().trim();
            let kelasKamar = (tds[4].textContent || tds[4].innerText).toLowerCase();
            let status = (tds[5].textContent || tds[5].innerText).toLowerCase();
            
            let nik = tr[i].getAttribute('data-nik') || "";
            let nisn = tr[i].getAttribute('data-nisn') || "";

            // Cek Search (ID, Nama, NIK, NISN)
            let matchSearch = (idSantri.indexOf(inputSearch) > -1) || 
                              (nama.indexOf(inputSearch) > -1) ||
                              (nik.indexOf(inputSearch) > -1) ||
                              (nisn.indexOf(inputSearch) > -1);
            
            // Cek Filter Status
            let matchStatus = true;
            if (filterStatus !== "") {
                matchStatus = status.indexOf(filterStatus) > -1;
            }
            
            // Cek Filter L/P
            let matchLP = true;
            if (filterLP !== "") {
                matchLP = (lp === filterLP);
            }
            
            // Cek Filter Kelas
            let matchKelas = true;
            if (filterKelas !== "") {
                matchKelas = kelasKamar.indexOf(filterKelas) > -1;
            }

            // Cek Filter Kamar
            let matchKamar = true;
            if (filterKamar !== "") {
                matchKamar = kelasKamar.indexOf(filterKamar) > -1;
            }
            
            // Jika semua kondisi terpenuhi, tampilkan
            if (matchSearch && matchStatus && matchLP && matchKelas && matchKamar) {
                tr[i].style.display = "";
            } else {
                tr[i].style.display = "none";
            }
        }
    }
}

function bukaModalMutakhoorijin(noBaris, namaLengkap) {
    document.getElementById('namaSantriMutakhoorijin').textContent = namaLengkap;
    document.getElementById('formMutakhoorijin').action = '/admin_database/santri/tandai_mutakhoorijin/' + noBaris;
    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 santri <strong id="namaSantriMutakhoorijin" class="text-dark"></strong> sebagai <strong>Mutakhoorijin</strong> (Lulus Aliyah). Data biodata santri ini tidak akan dihapus.
                    </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 %}