{% 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 %}Kenaikan Kelas Massal - 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;">Kenaikan / Pemindahan Kelas Massal</h5>
        <small class="text-muted" style="font-size: 0.85rem;">Pindahkan beberapa atau seluruh santri ke kelas baru secara otomatis.</small>
    </div>
</div>
{% endblock %}

{% block content %}
<div class="row g-4 mt-2 mb-4">
    <!-- Kolom Kelas Asal -->
    <div class="col-md-5">
        <div class="bule-card border-0 shadow-sm rounded-3 bg-white h-100 p-4">
            <h6 class="fw-bold text-dark mb-3"><i class="fas fa-sign-out-alt text-danger me-2"></i>1. Pilih Kelas Asal</h6>
            <select class="form-select border-light-subtle rounded-2 shadow-sm" id="selectKelasAsal">
                <option value="">-- Pilih Kelas Asal --</option>
                {% for tahun, list_kelas in kelas_grouped.items() %}
                <optgroup label="Tahun Ajaran {{ tahun }}">
                    {% for row in list_kelas %}
                    <option value="{{ row.id }}">{{ row.nama_kelas }} ({{ row.jenjang }} - Tkt {{ row.tingkat }})</option>
                    {% endfor %}
                </optgroup>
                {% endfor %}
            </select>
            <button class="btn btn-primary w-100 mt-3 rounded-2 shadow-sm fw-medium" id="btnLoadSantri">
                <i class="fas fa-users me-2"></i>Tampilkan Santri
            </button>
        </div>
    </div>
    
    <!-- Icon Panah -->
    <div class="col-md-2 d-flex justify-content-center align-items-center py-3 py-md-0">
        <div class="rounded-circle bg-white shadow-sm d-flex justify-content-center align-items-center" style="width: 60px; height: 60px; border: 1px solid #e2e8f0;">
            <i class="fas fa-arrow-right fs-3 text-success"></i>
        </div>
    </div>
    
    <!-- Kolom Kelas Tujuan -->
    <div class="col-md-5">
        <div class="bule-card border-0 shadow-sm rounded-3 bg-white h-100 p-4">
            <h6 class="fw-bold text-dark mb-3"><i class="fas fa-sign-in-alt text-success me-2"></i>2. Pilih Kelas Tujuan</h6>
            <select class="form-select border-light-subtle rounded-2 shadow-sm" id="selectKelasTujuan" disabled>
                <option value="">-- Pilih Kelas Tujuan --</option>
                {% for tahun, list_kelas in kelas_grouped.items() %}
                <optgroup label="Tahun Ajaran {{ tahun }}">
                    {% for row in list_kelas %}
                    <option value="{{ row.id }}">{{ row.nama_kelas }} ({{ row.jenjang }} - Tkt {{ row.tingkat }})</option>
                    {% endfor %}
                </optgroup>
                {% endfor %}
            </select>
            <p class="small text-muted mt-3 mb-0"><i class="fas fa-info-circle text-primary me-1"></i> Pilih kelas tujuan untuk seluruh santri yang dicentang di bawah.</p>
        </div>
    </div>
</div>

<!-- Tabel Pilihan Santri -->
<div class="bule-card border-0 shadow-sm rounded-3 bg-white overflow-hidden mb-5">
    <div class="bg-light border-bottom border-light-subtle py-3 px-4 d-flex flex-wrap justify-content-between align-items-center gap-3">
        <h6 class="fw-bold text-dark mb-0"><i class="fas fa-list-check text-primary me-2"></i>3. Pilih Santri yang Akan Dipindah</h6>
        <div class="d-flex align-items-center gap-3">
            <span class="badge bg-primary rounded-pill px-3 py-2" id="naikSelectedCount">0 Santri Terpilih</span>
            <button type="button" class="btn btn-sm text-white px-4 rounded-2 d-flex align-items-center gap-2 shadow-sm" style="background-color: #00685f; font-weight: 600;" id="btnSubmitNaik" disabled>
                <i class="fas fa-check-circle"></i> Proses Pindah Kelas
            </button>
        </div>
    </div>
    <div class="p-0">
        <div class="text-center py-5 d-none" id="naikLoader">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
            <p class="text-muted small mt-3">Memuat data santri...</p>
        </div>
        <div class="text-center py-5" id="naikEmpty">
            <i class="fas fa-search mb-3" style="font-size: 3rem; color: #cbd5e1;"></i>
            <h6 class="text-muted">Pilih Kelas Asal Terlebih Dahulu</h6>
        </div>
        <div class="table-responsive d-none" id="naikTableContainer">
            <table class="table mb-0 align-middle table-hover text-start" style="font-size: 0.85rem;">
                <thead style="background-color: #f8fafc;">
                    <tr class="border-bottom border-light-subtle">
                        <th class="py-3 px-4 text-center" style="width: 50px;">
                            <input class="form-check-input" type="checkbox" id="checkAllNaik" checked>
                        </th>
                        <th class="py-3 px-3 text-uppercase fw-semibold text-muted">ID SANTRI</th>
                        <th class="py-3 px-3 text-uppercase fw-semibold text-muted">NAMA LENGKAP</th>
                        <th class="py-3 px-3 text-uppercase fw-semibold text-muted">L/P</th>
                        <th class="py-3 px-3 text-uppercase fw-semibold text-muted">STATUS</th>
                    </tr>
                </thead>
                <tbody class="border-top-0" id="naikTbody">
                    <!-- Injected via JS -->
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
    const selectKelasAsal = document.getElementById('selectKelasAsal');
    const selectKelasTujuan = document.getElementById('selectKelasTujuan');
    const btnLoadSantri = document.getElementById('btnLoadSantri');
    const btnSubmitNaik = document.getElementById('btnSubmitNaik');
    const checkAllNaik = document.getElementById('checkAllNaik');
    
    let currentSantriData = [];

    btnLoadSantri.addEventListener('click', function() {
        const idKelas = selectKelasAsal.value;
        if(!idKelas) {
            alert('Pilih kelas asal terlebih dahulu!');
            return;
        }

        document.getElementById('naikEmpty').classList.add('d-none');
        document.getElementById('naikTableContainer').classList.add('d-none');
        document.getElementById('naikLoader').classList.remove('d-none');
        selectKelasTujuan.disabled = true;
        btnSubmitNaik.disabled = true;

        // Use the new API endpoint
        fetch(`/admin_database/api/kelas/${idKelas}/santri`)
            .then(res => res.json())
            .then(data => {
                document.getElementById('naikLoader').classList.add('d-none');
                if(data.error) {
                    alert("Error: " + data.error);
                    document.getElementById('naikEmpty').classList.remove('d-none');
                    return;
                }

                currentSantriData = data;
                
                if(data.length === 0) {
                    document.getElementById('naikEmpty').classList.remove('d-none');
                    document.getElementById('naikEmpty').querySelector('h6').textContent = 'Tidak Ada Santri di Kelas Ini';
                } else {
                    const tbody = document.getElementById('naikTbody');
                    tbody.innerHTML = '';
                    
                    data.forEach((s, idx) => {
                        const tr = document.createElement('tr');
                        tr.className = 'border-bottom border-light-subtle';
                        tr.innerHTML = `
                            <td class="text-center px-4 py-2">
                                <input class="form-check-input naik-checkbox" type="checkbox" value="${s.id_santri}" checked>
                            </td>
                            <td class="px-3 py-2 text-muted fw-medium">${s.id_santri || '-'}</td>
                            <td class="px-3 py-2 text-dark fw-bold">${s.nama_lengkap}</td>
                            <td class="px-3 py-2 text-muted">${s.jenis_kelamin}</td>
                            <td class="px-3 py-2">
                                <span class="badge ${s.status_keaktifan === 'Aktif' ? 'bg-success bg-opacity-10 text-success' : 'bg-danger bg-opacity-10 text-danger'} rounded-pill fw-medium px-2 py-1">${s.status_keaktifan}</span>
                            </td>
                        `;
                        tbody.appendChild(tr);
                    });
                    
                    document.getElementById('naikTableContainer').classList.remove('d-none');
                    selectKelasTujuan.disabled = false;
                    checkAllNaik.checked = true;
                    updateNaikCount();

                    // attach event listeners to new checkboxes
                    document.querySelectorAll('.naik-checkbox').forEach(cb => {
                        cb.addEventListener('change', updateNaikCount);
                    });
                }
            })
            .catch(err => {
                console.error(err);
                document.getElementById('naikLoader').classList.add('d-none');
                document.getElementById('naikEmpty').classList.remove('d-none');
                alert("Terjadi kesalahan jaringan.");
            });
    });

    function updateNaikCount() {
        const checked = document.querySelectorAll('.naik-checkbox:checked').length;
        document.getElementById('naikSelectedCount').textContent = `${checked} Santri Terpilih`;
        
        checkAllNaik.checked = (checked === currentSantriData.length && currentSantriData.length > 0);
        
        validateNaikSubmit();
    }

    checkAllNaik.addEventListener('change', function() {
        document.querySelectorAll('.naik-checkbox').forEach(cb => cb.checked = this.checked);
        updateNaikCount();
    });

    selectKelasTujuan.addEventListener('change', validateNaikSubmit);

    function validateNaikSubmit() {
        const checked = document.querySelectorAll('.naik-checkbox:checked').length;
        const tujuan = selectKelasTujuan.value;
        btnSubmitNaik.disabled = (checked === 0 || !tujuan || selectKelasAsal.value === tujuan);
    }

    btnSubmitNaik.addEventListener('click', function() {
        const tujuan = selectKelasTujuan.value;
        const selectedIds = Array.from(document.querySelectorAll('.naik-checkbox:checked')).map(cb => cb.value);
        
        if(!confirm(`Yakin ingin memindahkan ${selectedIds.length} santri ke kelas yang baru dipilih?`)) {
            return;
        }

        const btnText = this.innerHTML;
        this.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i> Memproses...';
        this.disabled = true;

        fetch('/admin_database/kelas/naik_massal', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                id_kelas_asal: selectKelasAsal.value,
                id_kelas_tujuan: tujuan,
                santri_ids: selectedIds
            })
        })
        .then(res => res.json())
        .then(data => {
            if(data.success) {
                alert(`Berhasil memindahkan ${data.affected} santri!`);
                window.location.href = "/admin_database/kelas"; // Redirect back
            } else {
                alert("Gagal: " + (data.error || "Terjadi kesalahan"));
                this.innerHTML = btnText;
                this.disabled = false;
            }
        })
        .catch(err => {
            console.error(err);
            alert("Terjadi kesalahan jaringan.");
            this.innerHTML = btnText;
            this.disabled = false;
        });
    });
</script>
{% endblock %}