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

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

{% block page_header %}
<h5 class="mb-1 fw-bold" style="color: #1f2937; font-size: 1.25rem;">Data Guru & Staf</h5>
<small class="text-muted" style="font-size: 0.85rem;">Kelola seluruh profil tenaga pengajar dan staf pendidikan.</small>
{% 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: 250px;">
        <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, ID, atau jabatan..." style="padding-left: 30px; font-size: 0.85rem;" onkeyup="filterTable()">
    </div>
    
    <select id="filterStatus" class="form-select form-select-sm text-muted border-light-subtle rounded-1 flex-shrink-0" style="width: auto; min-width: 130px; font-size: 0.85rem;" onchange="filterTable()">
        <option value="">Semua Status</option>
        <option value="Aktif">Aktif</option>
        <option value="Tidak Aktif">Tidak Aktif</option>
    </select>
    
    <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>

    <!-- Actions (Kanan) -->
    <div class="d-flex flex-nowrap align-items-center gap-2 ms-auto">
        <button type="button" class="btn btn-success 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; border: none;" data-bs-toggle="modal" data-bs-target="#importExcelModal">
            <i class="fas fa-file-excel"></i> Import Excel
        </button>
        <a href="/admin_database/guru/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 Guru
        </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="guruTable" 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 GURU</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;">JABATAN</th>
                    <th class="py-3 px-3 text-uppercase fw-semibold text-muted" style="font-size: 0.7rem; letter-spacing: 0.05em; width: 130px;">WALI KELAS</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: 140px;">AKSI</th>
                </tr>
            </thead>
            <tbody class="border-top-0">
                {% for row in guru %}
                <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_guru or '-' }}</td>
                    <td class="fw-medium text-dark px-3 py-3">
                        <div class="d-flex align-items-center gap-2">
                            <div class="rounded-circle d-flex align-items-center justify-content-center bg-light text-muted" style="width: 32px; height: 32px; flex-shrink: 0;">
                                <i class="fas fa-user-tie" style="font-size: 0.85rem;"></i>
                            </div>
                            <div>
                                <span class="d-block">{{ row.nama_lengkap or '-' }}</span>
                                {% if row.nomor_hp %}
                                <span class="d-block text-muted" style="font-size: 0.75rem;"><i class="fab fa-whatsapp me-1 text-success"></i>+62{{ row.nomor_hp }}</span>
                                {% endif %}
                            </div>
                        </div>
                    </td>
                    <td class="text-center text-muted px-3 py-3">
                        {% if row.jenis_kelamin == 'Laki-laki' %}
                            L
                        {% elif row.jenis_kelamin == 'Perempuan' %}
                            P
                        {% else %}
                            -
                        {% endif %}
                    </td>
                    <td class="text-muted px-3 py-3">
                        {{ row.jabatan or '-' }}
                    </td>
                    <td class="text-muted px-3 py-3">
                        {% if row.jumlah_kelas > 0 %}
                        <span class="badge bg-info bg-opacity-10 text-info border border-info border-opacity-25 fw-medium rounded-pill px-2 py-1" style="font-size: 0.7rem;">
                            {{ row.jumlah_kelas }} Kelas
                        </span>
                        {% else %}
                        -
                        {% endif %}
                    </td>
                    <td class="px-3 py-3">
                        {% if row.status == '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>
                        {% else %}
                        <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> Nonaktif
                        </span>
                        {% endif %}
                    </td>
                    <td class="text-center px-4 py-3">
                        <div class="d-flex justify-content-center gap-1 action-buttons">
                            <!-- Cetak Kartu Button -->
                            <a href="/admin_database/guru/cetak_kartu_guru/{{ row.id }}" target="_blank" class="btn btn-sm btn-white border-light-subtle text-muted rounded-2 d-flex align-items-center justify-content-center btn-hover-primary" style="width: 30px; height: 30px;" title="Cetak Kartu">
                                <i class="fas fa-print"></i>
                            </a>
                            
                            <!-- Edit Button -->
                            <a href="/admin_database/guru/edit/{{ row.id }}" class="btn btn-sm btn-white border-light-subtle text-muted rounded-2 d-flex align-items-center justify-content-center btn-hover-primary" style="width: 30px; height: 30px;" title="Edit Data">
                                <i class="fas fa-edit"></i>
                            </a>
                            
                            <!-- Hapus Button -->
                            <button class="btn btn-sm btn-white border-light-subtle text-muted rounded-2 d-flex align-items-center justify-content-center btn-hover-danger" style="width: 30px; height: 30px;" title="Hapus Data" onclick="{% if row.jumlah_kelas > 0 %}alert('TIDAK DAPAT DIHAPUS!\n\nGuru ini masih berstatus aktif sebagai Wali Kelas. Silakan ganti wali kelas terlebih dahulu di menu Data Kelas.');{% else %}confirmDelete('{{ row.id }}', '{{ row.nama_lengkap }}'){% endif %}">
                                <i class="fas fa-trash-alt"></i>
                            </button>
                        </div>
                    </td>
                </tr>
                {% endfor %}
                
                {% if not guru %}
                <tr>
                    <td colspan="8" class="text-center py-5">
                        <div class="d-flex flex-column align-items-center justify-content-center text-muted">
                            <i class="fas fa-chalkboard-teacher fa-3x mb-3 text-light-subtle"></i>
                            <h6 class="fw-semibold text-secondary mb-1">Belum ada data guru</h6>
                            <p class="small mb-3">Silakan tambah data guru baru terlebih dahulu.</p>
                            <a href="/admin_database/guru/tambah" class="btn btn-primary btn-sm rounded-1 px-3">
                                <i class="fas fa-plus me-1"></i> Tambah Data
                            </a>
                        </div>
                    </td>
                </tr>
                {% endif %}
            </tbody>
        </table>
    </div>
</div>

<!-- Form Hapus Tersembunyi -->
<form id="deleteForm" method="POST" action="" style="display: none;">
</form>

<style>
    /* Styling agar seragam dengan tabel santri */
    .bule-card {
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .action-row-hover {
        transition: background-color 0.15s ease;
    }
    .action-row-hover:hover {
        background-color: #f8fafc !important;
    }
    .btn-hover-zoom {
        transition: transform 0.2s ease;
    }
    .btn-hover-zoom:hover {
        transform: scale(1.03);
    }
    .btn-hover-primary:hover {
        background-color: #f0fdfa !important;
        color: #0d9488 !important;
        border-color: #99f6e4 !important;
    }
    .btn-hover-danger:hover {
        background-color: #fef2f2 !important;
        color: #ef4444 !important;
        border-color: #fecaca !important;
    }
</style>

<!-- Modal Import Excel Guru -->
<div class="modal fade" id="importExcelModal" tabindex="-1" aria-labelledby="importExcelModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <form action="/admin_database/guru/import_preview" method="POST" enctype="multipart/form-data">
            <div class="modal-content">
                <div class="modal-header border-0 pb-0">
                    <h5 class="modal-title fw-bold text-dark" id="importExcelModalLabel">
                        <i class="fas fa-file-excel text-success me-2"></i> Import Data Guru
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body pt-3">
                    <p class="text-muted small mb-3">
                        Gunakan fitur ini untuk menambahkan banyak data guru sekaligus menggunakan file Excel. Pastikan format kolom sesuai dengan template standar.
                    </p>
                    <div class="mb-3 p-3 bg-light rounded-3 text-center border border-dashed">
                        <i class="fas fa-download text-muted mb-2 fs-4"></i>
                        <h6 class="fw-semibold mb-1">Belum punya template?</h6>
                        <p class="small text-muted mb-2">Unduh template Excel kosong untuk melihat format yang benar.</p>
                        <a href="/admin_database/guru/export_template_import" class="btn btn-sm btn-outline-success rounded-pill px-3 fw-medium">
                            <i class="fas fa-download me-1"></i> Unduh Template
                        </a>
                    </div>
                    
                    <div class="mb-2">
                        <label class="form-label fw-semibold small text-dark mb-1">Upload File Excel (.xlsx)</label>
                        <input type="file" class="form-control" name="file_excel" accept=".xlsx" required>
                    </div>
                </div>
                <div class="modal-footer border-0 pt-0 bg-light rounded-bottom">
                    <button type="button" class="btn btn-white text-muted fw-medium border-0" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-success fw-medium rounded-2 px-4 shadow-sm">
                        <i class="fas fa-upload me-1"></i> Preview & Import
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

<script>
    // Konfirmasi Hapus
    function confirmDelete(id, nama) {
        if (confirm(`Peringatan: Anda yakin ingin menghapus data guru "${nama}"?\nData tidak dapat dikembalikan!`)) {
            const form = document.getElementById('deleteForm');
            form.action = `/admin_database/guru/hapus/${id}`;
            form.submit();
        }
    }

    // Filter Table Realtime
    function filterTable() {
        const searchText = document.getElementById('searchInput').value.toLowerCase();
        const filterStatus = document.getElementById('filterStatus').value;
        const filterLP = document.getElementById('filterLP').value;
        const tbody = document.querySelector('#guruTable tbody');
        
        // Skip jika tidak ada baris data sesungguhnya
        if (!tbody.querySelector('tr.action-row-hover')) return;

        const rows = tbody.querySelectorAll('tr.action-row-hover');
        let visibleCount = 0;

        rows.forEach(row => {
            let showRow = true;
            
            // Kolom untuk pencarian: ID Guru (1), Nama (2), Jabatan (4)
            const idGuru = row.cells[1].innerText.toLowerCase();
            const nama = row.cells[2].innerText.toLowerCase();
            const jabatan = row.cells[4].innerText.toLowerCase();
            
            // Kolom filter presisi: L/P (3), Status (6)
            const lp = row.cells[3].innerText.trim();
            const statusFull = row.cells[6].innerText.toLowerCase();

            // Cek Search
            if (searchText) {
                if (!idGuru.includes(searchText) && 
                    !nama.includes(searchText) && 
                    !jabatan.includes(searchText)) {
                    showRow = false;
                }
            }
            
            // Cek Status
            if (showRow && filterStatus) {
                if (!statusFull.includes(filterStatus.toLowerCase())) showRow = false;
            }
            
            // Cek L/P
            if (showRow && filterLP) {
                if (lp !== filterLP) showRow = false;
            }

            // Terapkan visibility
            row.style.display = showRow ? '' : 'none';
            if (showRow) visibleCount++;
        });
    }
</script>

{% endblock %}