{% 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 %}Daftar Santri Kelas - Admin Database{% endblock %}

{% block page_header %}
<div class="d-flex align-items-center gap-3">
    <a href="/admin_database/kelas" class="btn btn-light border-light-subtle rounded-circle d-flex align-items-center justify-content-center shadow-sm" style="width: 40px; height: 40px;">
        <i class="fas fa-arrow-left text-muted"></i>
    </a>
    <div>
        <h5 class="mb-1 fw-bold" style="color: #1f2937; font-size: 1.25rem;">Daftar Santri: {{ kelas_info.nama_kelas if kelas_info else 'Tidak Diketahui' }}</h5>
        <small class="text-muted" style="font-size: 0.85rem;">Detail daftar santri yang berada di kelas ini.</small>
    </div>
</div>
{% endblock %}

{% block content %}

<!-- SANTRI PUTRA -->
<h6 class="mt-4 fw-bold text-primary"><i class="fas fa-male me-2"></i>Data Santri Putra</h6>
<div class="bule-card rounded-2 shadow-sm border-0 overflow-hidden bg-white mb-4">
    <div class="table-responsive">
        <table class="table mb-0 align-middle table-hover text-start" style="font-size: 0.875rem;">
            <thead style="background-color: #f8fafc;">
                <tr class="border-bottom border-light-subtle">
                    <th class="py-3 px-4 text-center text-uppercase fw-semibold text-muted" style="width: 60px; font-size: 0.7rem; letter-spacing: 0.05em;">NO</th>
                    <th class="py-3 px-3 text-uppercase fw-semibold text-muted" style="font-size: 0.7rem; letter-spacing: 0.05em;">ID SANTRI</th>
                    <th class="py-3 px-3 text-uppercase fw-semibold text-muted" style="font-size: 0.7rem; letter-spacing: 0.05em;">NAMA LENGKAP</th>
                    <th class="py-3 px-3 text-uppercase fw-semibold text-muted" style="font-size: 0.7rem; letter-spacing: 0.05em;">L/P</th>
                    <th class="py-3 px-3 text-uppercase fw-semibold text-muted" style="font-size: 0.7rem; letter-spacing: 0.05em;">STATUS</th>
                </tr>
            </thead>
            <tbody class="border-top-0">
                {% set found_putra = namespace(value=false) %}
                {% set index_putra = namespace(value=1) %}
                {% for s in santri %}
                    {% if s.jenis_kelamin == 'Laki-laki' or s.jenis_kelamin == 'Putra' %}
                        {% set found_putra.value = true %}
                        <tr class="border-bottom border-light-subtle hover-bg-light transition-all">
                            <td class="text-center text-muted px-4 py-3">{{ index_putra.value }}</td>
                            <td class="px-3 py-3 text-muted fw-medium">{{ s.id_santri or '-' }}</td>
                            <td class="px-3 py-3 text-dark fw-bold">{{ s.nama_lengkap }}</td>
                            <td class="px-3 py-3 text-muted">{{ s.jenis_kelamin }}</td>
                            <td class="px-3 py-3">
                                {% if s.status_keaktifan == 'Aktif' %}
                                <span class="badge bg-success bg-opacity-10 text-success rounded-pill fw-medium px-3 py-2">{{ s.status_keaktifan }}</span>
                                {% else %}
                                <span class="badge bg-danger bg-opacity-10 text-danger rounded-pill fw-medium px-3 py-2">{{ s.status_keaktifan }}</span>
                                {% endif %}
                            </td>
                        </tr>
                        {% set index_putra.value = index_putra.value + 1 %}
                    {% endif %}
                {% endfor %}
                {% if not found_putra.value %}
                <tr>
                    <td colspan="5" class="text-center py-4 text-muted small">
                        <i class="fas fa-folder-open mb-2" style="font-size: 2rem; color: #cbd5e1;"></i>
                        <p class="mb-0">Tidak ada santri putra di kelas ini.</p>
                    </td>
                </tr>
                {% endif %}
            </tbody>
        </table>
    </div>
</div>

<!-- SANTRI PUTRI -->
<h6 class="mt-4 fw-bold" style="color: #d81b60;"><i class="fas fa-female me-2"></i>Data Santri Putri</h6>
<div class="bule-card rounded-2 shadow-sm border-0 overflow-hidden bg-white mb-4">
    <div class="table-responsive">
        <table class="table mb-0 align-middle table-hover text-start" style="font-size: 0.875rem;">
            <thead style="background-color: #f8fafc;">
                <tr class="border-bottom border-light-subtle">
                    <th class="py-3 px-4 text-center text-uppercase fw-semibold text-muted" style="width: 60px; font-size: 0.7rem; letter-spacing: 0.05em;">NO</th>
                    <th class="py-3 px-3 text-uppercase fw-semibold text-muted" style="font-size: 0.7rem; letter-spacing: 0.05em;">ID SANTRI</th>
                    <th class="py-3 px-3 text-uppercase fw-semibold text-muted" style="font-size: 0.7rem; letter-spacing: 0.05em;">NAMA LENGKAP</th>
                    <th class="py-3 px-3 text-uppercase fw-semibold text-muted" style="font-size: 0.7rem; letter-spacing: 0.05em;">L/P</th>
                    <th class="py-3 px-3 text-uppercase fw-semibold text-muted" style="font-size: 0.7rem; letter-spacing: 0.05em;">STATUS</th>
                </tr>
            </thead>
            <tbody class="border-top-0">
                {% set found_putri = namespace(value=false) %}
                {% set index_putri = namespace(value=1) %}
                {% for s in santri %}
                    {% if s.jenis_kelamin == 'Perempuan' or s.jenis_kelamin == 'Putri' %}
                        {% set found_putri.value = true %}
                        <tr class="border-bottom border-light-subtle hover-bg-light transition-all">
                            <td class="text-center text-muted px-4 py-3">{{ index_putri.value }}</td>
                            <td class="px-3 py-3 text-muted fw-medium">{{ s.id_santri or '-' }}</td>
                            <td class="px-3 py-3 text-dark fw-bold">{{ s.nama_lengkap }}</td>
                            <td class="px-3 py-3 text-muted">{{ s.jenis_kelamin }}</td>
                            <td class="px-3 py-3">
                                {% if s.status_keaktifan == 'Aktif' %}
                                <span class="badge bg-success bg-opacity-10 text-success rounded-pill fw-medium px-3 py-2">{{ s.status_keaktifan }}</span>
                                {% else %}
                                <span class="badge bg-danger bg-opacity-10 text-danger rounded-pill fw-medium px-3 py-2">{{ s.status_keaktifan }}</span>
                                {% endif %}
                            </td>
                        </tr>
                        {% set index_putri.value = index_putri.value + 1 %}
                    {% endif %}
                {% endfor %}
                {% if not found_putri.value %}
                <tr>
                    <td colspan="5" class="text-center py-4 text-muted small">
                        <i class="fas fa-folder-open mb-2" style="font-size: 2rem; color: #cbd5e1;"></i>
                        <p class="mb-0">Tidak ada santri putri di kelas ini.</p>
                    </td>
                </tr>
                {% endif %}
            </tbody>
        </table>
    </div>
</div>

<style>
    .hover-bg-light:hover {
        background-color: #f8f9fa!important;
    }
    .transition-all {
        transition: all 0.2s ease-in-out;
    }
</style>
{% endblock %}