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

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

{% block page_header %}
<h5 class="mb-1 fw-bold" style="color: #1f2937; font-size: 1.25rem;">Data Kelas Pendidikan</h5>
<small class="text-muted" style="font-size: 0.85rem;">Kelola master kelas, jenjang, dan penugasan wali kelas tahun ajaran aktif.</small>
{% endblock %}

{% block content %}
<!-- CONTROL BAR (Filter & Actions) - Frameless Design -->
<div class="mt-2 mb-4 d-flex flex-column flex-lg-row align-items-lg-center justify-content-between gap-3 bg-transparent">
    <!-- Filters (Kiri) -->
    <div class="d-flex flex-wrap align-items-center gap-2">
        <div class="position-relative" style="width: 250px;">
            <i class="fas fa-search position-absolute text-muted" style="left: 12px; top: 50%; transform: translateY(-50%); font-size: 0.85rem;"></i>
            <input type="text" id="searchInput" class="form-control form-control-sm border-light-subtle rounded-1" placeholder="Cari nama kelas atau wali..." style="padding-left: 35px; font-size: 0.875rem; padding-top: 0.5rem; padding-bottom: 0.5rem;" onkeyup="filterTable()">
        </div>
        <select id="filterJenjang" class="form-select form-select-sm text-muted border-light-subtle rounded-1" style="width: 130px; font-size: 0.875rem; padding-top: 0.5rem; padding-bottom: 0.5rem;" onchange="filterTable()">
            <option value="">Semua Jenjang</option>
            <option value="SP">SP</option>
            <option value="MTs">MTs</option>
            <option value="MA">MA</option>
        </select>
    </div>
    
    <!-- Actions (Kanan) -->
    <div class="d-flex flex-wrap align-items-center gap-2">
        <a href="/admin_database/kelas/naik_massal" 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-2 btn-hover-border" style="font-size: 0.85rem; font-weight: 500;">
            <i class="fas fa-level-up-alt text-success"></i> Kenaikan Kelas Massal
        </a>
        <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-2 btn-hover-border" style="font-size: 0.85rem; font-weight: 500;">
            <i class="fas fa-download"></i> Export Excel
        </button>
        <a href="/admin_database/kelas/tambah" class="btn btn-sm text-white shadow-sm rounded-1 d-flex align-items-center gap-2 px-3 py-2 btn-hover-zoom" style="background-color: #00685f; font-size: 0.85rem; font-weight: 500;">
            <i class="fas fa-plus"></i> Tambah Kelas
        </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="kelasTable" 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; min-width: 180px;">NAMA KELAS</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: 100px;">JENJANG</th>
                    <th class="py-3 px-3 text-uppercase fw-semibold text-muted" style="font-size: 0.7rem; letter-spacing: 0.05em; min-width: 160px;">WALI PUTRA</th>
                    <th class="py-3 px-3 text-uppercase fw-semibold text-muted" style="font-size: 0.7rem; letter-spacing: 0.05em; min-width: 160px;">WALI PUTRI</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: 120px;">JML SANTRI</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 kelas %}
                <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="fw-medium text-dark px-3 py-3 class-name-cell">
                        {{ row.nama_kelas }}
                        <div class="text-muted fw-normal" style="font-size: 0.75rem;">Tingkat: {{ row.tingkat }}</div>
                    </td>
                    <td class="text-center px-3 py-3 jenjang-cell">
                        <span class="badge rounded-pill bg-light text-secondary border border-secondary-subtle px-2 py-1">{{ row.jenjang }}</span>
                    </td>
                    <td class="text-muted px-3 py-3 wali-putra-cell">
                        {% if row.nama_wali_putra %}
                        <i class="fas fa-user-tie me-1 text-primary opacity-75"></i> {{ row.nama_wali_putra }}
                        {% else %}
                        <span class="text-danger opacity-75" style="font-size: 0.8rem;"><i>Belum diatur</i></span>
                        {% endif %}
                    </td>
                    <td class="text-muted px-3 py-3 wali-putri-cell">
                        {% if row.nama_wali_putri %}
                        <i class="fas fa-user-tie me-1 text-danger opacity-75"></i> {{ row.nama_wali_putri }}
                        {% else %}
                        <span class="text-danger opacity-75" style="font-size: 0.8rem;"><i>Belum diatur</i></span>
                        {% endif %}
                    </td>
                    <td class="text-center px-3 py-3 text-muted">
                        <span class="fw-medium text-dark">{{ row.jumlah_santri | default('0') }}</span> Santri
                    </td>
                    <td class="text-center px-4 py-3">
                        <div class="d-flex justify-content-center gap-1 action-buttons transition-opacity">
                            <a href="/admin_database/kelas/{{ row.id }}/santri" class="btn btn-sm btn-icon border-0 text-muted hover-text-info rounded-3" title="Lihat Santri">
                                <i class="fas fa-users"></i>
                            </a>
                            <a href="/admin_database/kelas/edit/{{ row.id }}" class="btn btn-sm btn-icon border-0 text-muted hover-text-warning rounded-3" title="Edit Kelas">
                                <i class="fas fa-edit"></i>
                            </a>
                            <form action="/admin_database/kelas/hapus/{{ row.id }}" method="POST" class="d-inline" onsubmit="return confirm('Yakin ingin menghapus kelas ini?');">
                                <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">
                        <div class="d-inline-flex align-items-center justify-content-center rounded-circle mb-3" style="width: 64px; height: 64px; background-color: #f1f5f9;">
                            <i class="fas fa-chalkboard text-secondary" style="font-size: 1.5rem;"></i>
                        </div>
                        <h6 class="fw-medium text-dark mb-1">Belum Ada Kelas</h6>
                        <p class="small mb-3">Silakan tambahkan data kelas pendidikan baru.</p>
                        <a href="/admin_database/kelas/tambah" class="btn btn-sm btn-white border border-light-subtle text-secondary shadow-sm rounded-1">
                            <i class="fas fa-plus me-1"></i> Tambah Kelas Pertama
                        </a>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<style>
    .btn-icon {
        width: 32px;
        height: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s;
    }
    .hover-text-info:hover {
        color: #0dcaf0 !important;
        background-color: #f8f9fa;
    }
    .hover-text-warning:hover {
        color: #ffc107 !important;
        background-color: #f8f9fa;
    }
    .hover-text-danger:hover {
        color: #dc3545 !important;
        background-color: #f8f9fa;
    }
    .btn-hover-border:hover {
        border-color: #adb5bd !important;
        background-color: #f8f9fa !important;
    }
    .btn-hover-zoom:hover {
        transform: scale(1.02);
        opacity: 0.95;
    }
</style>

<script>
    // Search Table Logic
    function filterTable() {
        const searchInput = document.getElementById('searchInput').value.toLowerCase();
        const jenjangInput = document.getElementById('filterJenjang').value.toLowerCase();
        const rows = document.querySelectorAll('#kelasTable tbody tr.action-row-hover');
        
        rows.forEach(row => {
            const textContent = row.textContent.toLowerCase();
            const jenjang = row.querySelector('.jenjang-cell').textContent.toLowerCase();
            
            const matchSearch = textContent.includes(searchInput);
            const matchJenjang = jenjangInput === "" || jenjang.includes(jenjangInput);
            
            if (matchSearch && matchJenjang) {
                row.style.display = '';
            } else {
                row.style.display = 'none';
            }
        });
    }
</script>
{% endblock %}