{% 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 %}Tambah Kelas Baru - Admin Database{% endblock %}

{% block page_header %}
<div class="d-flex align-items-center gap-3 mb-1">
    <a href="/admin_database/kelas" class="btn btn-light btn-sm rounded-circle d-flex align-items-center justify-content-center text-muted hover-text-dark border-0" style="width: 32px; height: 32px; background-color: #f1f5f9;">
        <i class="fas fa-arrow-left"></i>
    </a>
    <h5 class="mb-0 fw-bold" style="color: #1f2937; font-size: 1.25rem;">Tambah Kelas & Penugasan Santri</h5>
</div>
<small class="text-muted ms-5" style="font-size: 0.85rem;">Buat master kelas baru sekaligus masukkan santri ke dalamnya secara massal.</small>
{% endblock %}

{% block content %}
<form action="/admin_database/kelas/simpan" method="POST" id="formTambahKelas">
    
    <!-- Bagian Atas: Detail Kelas -->
    <div class="bule-card rounded-2 shadow-sm border-0 overflow-hidden bg-white mb-4">
        <div class="border-bottom border-light-subtle px-4 py-3" style="background-color: #f8fafc;">
            <h6 class="mb-0 fw-bold text-dark"><i class="fas fa-info-circle me-2 text-primary"></i>1. Informasi Kelas</h6>
        </div>
        <div class="px-4 py-4">
            <div class="row g-4">
                <div class="col-md-3">
                    <label class="form-label text-muted fw-medium mb-3" style="font-size: 0.85rem;">Nama Kelas <span class="text-danger">*</span></label>
                    <input type="text" class="form-control border-light-subtle rounded-1 bg-light custom-input px-3 py-2" name="nama_kelas" required placeholder="Contoh: I Tsanawiyah">
                </div>
                <div class="col-md-3">
                    <label class="form-label text-muted fw-medium mb-3" style="font-size: 0.85rem;">Tahun Ajaran <span class="text-danger">*</span></label>
                    <select class="form-select border-light-subtle rounded-1 bg-light custom-input px-3 py-2" name="id_tahun_ajaran" required>
                        <option value="" disabled>Pilih...</option>
                        {% for ta in tahun_ajaran %}
                        <option value="{{ ta.id }}" {% if ta.status == 'Aktif Utama' %}selected{% endif %}>
                            {{ ta.nama_hijriyah }}
                        </option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label text-muted fw-medium mb-3" style="font-size: 0.85rem;">Jenjang <span class="text-danger">*</span></label>
                    <select class="form-select border-light-subtle rounded-1 bg-light custom-input px-3 py-2" name="jenjang" required>
                        <option value="" disabled selected>Pilih...</option>
                        <option value="SP">SP (Salafiyah)</option>
                        <option value="MTs">MTs (Tsanawiyah)</option>
                        <option value="MA">MA (Aliyah)</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label text-muted fw-medium mb-3" style="font-size: 0.85rem;">Tingkat <span class="text-danger">*</span></label>
                    <select class="form-select border-light-subtle rounded-1 bg-light custom-input px-3 py-2" name="tingkat" id="selectTingkat" required>
                        <option value="" disabled selected>Pilih...</option>
                        <option value="I">I (Satu)</option>
                        <option value="II">II (Dua)</option>
                        <option value="III">III (Tiga)</option>
                        <option value="-">- (Khusus SP)</option>
                    </select>
                </div>
                
                <div class="col-md-6">
                    <div class="p-3 rounded-1 border border-light-subtle bg-light">
                        <label class="form-label text-dark fw-medium mb-3" style="font-size: 0.85rem;"><i class="fas fa-user-tie me-2 text-primary"></i>Wali Kelas Putra</label>
                        <select class="form-select border-light-subtle rounded-1 bg-white custom-input py-2" name="id_wali_putra">
                            <option value="">-- Belum Diatur --</option>
                            {% for g in guru %}
                            <option value="{{ g.id }}">{{ g.nama_lengkap }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="p-3 rounded-1 border border-light-subtle bg-light">
                        <label class="form-label text-dark fw-medium mb-3" style="font-size: 0.85rem;"><i class="fas fa-user-tie me-2 text-danger"></i>Wali Kelas Putri</label>
                        <select class="form-select border-light-subtle rounded-1 bg-white custom-input py-2" name="id_wali_putri">
                            <option value="">-- Belum Diatur --</option>
                            {% for g in guru %}
                            <option value="{{ g.id }}">{{ g.nama_lengkap }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bagian Bawah: Checklist Santri -->
    <div class="bule-card rounded-2 shadow-sm border-0 overflow-hidden bg-white mb-4">
        <div class="border-bottom border-light-subtle px-4 py-3 d-flex justify-content-between align-items-center" style="background-color: #f8fafc;">
            <h6 class="mb-0 fw-bold text-dark"><i class="fas fa-users me-2 text-success"></i>2. Pilih Santri ke Kelas Ini</h6>
            <small class="text-muted">Hanya menampilkan santri yang belum memiliki kelas</small>
        </div>
        
        <div class="row g-0">
            <!-- Kolom Putra -->
            <div class="col-lg-6 border-end border-light-subtle">
                <div class="px-4 py-3 border-bottom border-light-subtle d-flex justify-content-between align-items-center bg-light">
                    <div class="fw-semibold text-dark"><i class="fas fa-male me-2 text-primary"></i>Santri Putra</div>
                    <div class="form-check mb-0 d-flex align-items-center gap-2">
                        <input class="form-check-input m-0" type="checkbox" id="checkAllPutra" onchange="toggleCheckAll('putra', this)">
                        <label class="form-check-label small fw-medium mt-1" for="checkAllPutra">Pilih Semua</label>
                    </div>
                </div>
                <div class="p-3" style="max-height: 400px; overflow-y: auto; background-color: #ffffff;">
                    {% set putra_count = namespace(value=0) %}
                    {% for s in santri %}
                        {% if s.jenis_kelamin in ['Laki-laki', 'L', 'Putra', 'laki-laki', 'putra'] %}
                            {% set putra_count.value = putra_count.value + 1 %}
                            <div class="form-check p-2 hover-bg-light rounded-1 border-bottom border-light-subtle mb-2 d-flex align-items-center gap-2">
                                <input class="form-check-input mt-0 m-0 check-putra" type="checkbox" name="id_santri[]" value="{{ s.id_santri }}" id="s_{{ s.id_santri }}" style="width: 1.1rem; height: 1.1rem;">
                                <label class="form-check-label flex-grow-1 cursor-pointer mt-1" for="s_{{ s.id_santri }}">
                                    <div class="fw-medium text-dark">{{ s.nama_lengkap }}</div>
                                    <div class="text-muted" style="font-size: 0.75rem;">ID: {{ s.id_santri }} {% if s.kamar %} | Kamar lama: {{ s.kamar }}{% endif %}</div>
                                </label>
                            </div>
                        {% endif %}
                    {% endfor %}
                    
                    {% if putra_count.value == 0 %}
                    <div class="text-center py-4 text-muted small">
                        <i>Tidak ada santri putra yang belum memiliki kelas.</i>
                    </div>
                    {% endif %}
                </div>
            </div>
            
            <!-- Kolom Putri -->
            <div class="col-lg-6">
                <div class="px-4 py-3 border-bottom border-light-subtle d-flex justify-content-between align-items-center bg-light">
                    <div class="fw-semibold text-dark"><i class="fas fa-female me-2 text-danger"></i>Santri Putri</div>
                    <div class="form-check mb-0 d-flex align-items-center gap-2">
                        <input class="form-check-input m-0" type="checkbox" id="checkAllPutri" onchange="toggleCheckAll('putri', this)">
                        <label class="form-check-label small fw-medium mt-1" for="checkAllPutri">Pilih Semua</label>
                    </div>
                </div>
                <div class="p-3" style="max-height: 400px; overflow-y: auto; background-color: #ffffff;">
                    {% set putri_count = namespace(value=0) %}
                    {% for s in santri %}
                        {% if s.jenis_kelamin in ['Perempuan', 'P', 'Putri', 'perempuan', 'putri'] %}
                            {% set putri_count.value = putri_count.value + 1 %}
                            <div class="form-check p-2 hover-bg-light rounded-1 border-bottom border-light-subtle mb-2 d-flex align-items-center gap-2">
                                <input class="form-check-input mt-0 m-0 check-putri" type="checkbox" name="id_santri[]" value="{{ s.id_santri }}" id="s_{{ s.id_santri }}" style="width: 1.1rem; height: 1.1rem;">
                                <label class="form-check-label flex-grow-1 cursor-pointer mt-1" for="s_{{ s.id_santri }}">
                                    <div class="fw-medium text-dark">{{ s.nama_lengkap }}</div>
                                    <div class="text-muted" style="font-size: 0.75rem;">ID: {{ s.id_santri }} {% if s.kamar %} | Kamar lama: {{ s.kamar }}{% endif %}</div>
                                </label>
                            </div>
                        {% endif %}
                    {% endfor %}
                    
                    {% if putri_count.value == 0 %}
                    <div class="text-center py-4 text-muted small">
                        <i>Tidak ada santri putri yang belum memiliki kelas.</i>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
    
    <div class="d-flex justify-content-end gap-2 mb-5">
        <a href="/admin_database/kelas" class="btn btn-white border border-light-subtle text-secondary rounded-3 px-4 py-2 fw-medium shadow-sm">Batal</a>
        <button type="submit" class="btn text-white rounded-3 px-4 py-2 fw-medium shadow-sm" style="background-color: #00685f;">
            <i class="fas fa-save me-2"></i>Simpan Kelas & Santri
        </button>
    </div>
    
</form>
{% endblock %}

{% block extra_scripts %}
<style>
    .bule-card { background-color: #ffffff; }
    .btn-white { background-color: #ffffff; }
    .hover-bg-light:hover { background-color: #f8fafc; }
    .cursor-pointer { cursor: pointer; }
    
    .custom-input:focus {
        background-color: #ffffff !important;
        border-color: #00685f;
        box-shadow: 0 0 0 2px rgba(0, 104, 95, 0.25) !important;
        outline: none;
    }
</style>
<script>
// Script SP
document.addEventListener('DOMContentLoaded', function() {
    const selectJenjang = document.querySelector('select[name="jenjang"]');
    const selectTingkat = document.getElementById('selectTingkat');
    
    if(selectJenjang && selectTingkat) {
        selectJenjang.addEventListener('change', function() {
            if(this.value === 'SP') {
                selectTingkat.value = '-';
            } else {
                if(selectTingkat.value === '-') {
                    selectTingkat.value = '';
                }
            }
        });
    }
});

// Script CheckAll
function toggleCheckAll(kelompok, source) {
    let checkboxes = document.querySelectorAll('.check-' + kelompok);
    for (let i = 0; i < checkboxes.length; i++) {
        checkboxes[i].checked = source.checked;
    }
}
</script>
{% endblock %}