{% extends "base.html" %}

{% block title %}Gestión de Aulas - EMI{% endblock %}

{% block content %}
<div class="max-w-md mx-auto">
    <div class="mb-6 flex items-center justify-between">
        <div>
            <h2 class="text-xl font-bold text-white">Gestión de Aulas</h2>
            <p class="text-slate-400 text-sm">Registro de asistencia y servidores</p>
        </div>
        <a href="{{ prefix }}/aulas/lista" class="text-orange-400 hover:text-orange-300 flex flex-col items-center">
            <i class="la la-list text-2xl"></i>
            <span class="text-[10px] font-bold uppercase">Ver Lista</span>
        </a>
    </div>

    <script>
        const urlParams = new URLSearchParams(window.location.search);
        const msg = urlParams.get('msg');
        const type = urlParams.get('type');
        if (msg) {
            document.write(`
                <div class="mb-6 p-4 rounded-xl border ${type === 'success' ? 'bg-emerald-500/10 border-emerald-500/50 text-emerald-400' : 'bg-red-500/10 border-red-500/50 text-red-400'} flex items-center gap-3">
                    <i class="la ${type === 'success' ? 'la-check-circle' : 'la-exclamation-circle'} text-xl"></i>
                    <p class="text-sm font-medium">${msg}</p>
                </div>
            `);
        }
    </script>

    <div class="glass p-6 rounded-2xl border border-white/10 shadow-2xl">
        <form id="aulaForm" action="{{ prefix }}/aulas/crear" method="post" class="space-y-6">
            <!-- ID solo para edición -->
            <div id="id_field" class="hidden">
                <label class="block text-[10px] font-bold text-amber-500 uppercase mb-1 ml-1 tracking-wider">ID de
                    Registro</label>
                <input type="number" name="id" id="aula_id"
                    class="w-full bg-slate-900/50 border border-slate-700 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-orange-500 font-mono">
            </div>

            <!-- SECCIÓN 1: Contexto -->
            <div class="space-y-4">
                <h3 class="text-xs font-bold text-slate-500 uppercase tracking-widest border-b border-white/5 pb-2">
                    Información General</h3>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-[10px] font-semibold text-slate-400 uppercase mb-2 ml-1">Salón /
                            Clase</label>
                        <select name="id_salon" id="aula_id_salon" required
                            class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-orange-500 appearance-none">
                            <option value="">Seleccione...</option>
                            {% for salon in salones %}
                            <option value="{{ salon.id }}">{{ salon.salon }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div>
                        <label class="block text-[10px] font-semibold text-slate-400 uppercase mb-2 ml-1">Fecha de
                            Servicio</label>
                        <input type="date" name="fecha" id="aula_fecha" required
                            class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-orange-500">
                    </div>
                </div>
            </div>

            <!-- SECCIÓN 2: Personal -->
            <div class="space-y-4">
                <h3 class="text-xs font-bold text-slate-500 uppercase tracking-widest border-b border-white/5 pb-2">
                    Personal en Aula</h3>
                <div class="space-y-3">
                    <div>
                        <label
                            class="block text-[10px] font-semibold text-slate-400 uppercase mb-1 ml-1">Maestra(o)</label>
                        <select name="id_maestra" id="aula_maestra"
                            class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-white focus:border-orange-500 appearance-none">
                            <option value="">Sin asignar</option>
                            {% for docente in docentes %}
                            <option value="{{ docente.id }}">{{ docente.nombre }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div>
                        <label
                            class="block text-[10px] font-semibold text-slate-400 uppercase mb-1 ml-1">Auxiliar</label>
                        <select name="id_auxiliar" id="aula_auxiliar"
                            class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-white focus:border-orange-500 appearance-none">
                            <option value="">Sin asignar</option>
                            {% for auxiliar in auxiliares %}
                            <option value="{{ auxiliar.id }}">{{ auxiliar.nombre }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div>
                        <label class="block text-[10px] font-semibold text-slate-400 uppercase mb-1 ml-1">Colaboradores
                            (selección múltiple)</label>
                        <select name="ids_colaboradores" id="aula_colaboradores" multiple size="5"
                            class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-white focus:border-orange-500 appearance-none h-auto">
                            <option value="">Sin asignar</option>
                            {% for colaborador in colaboradores %}
                            <option value="{{ colaborador.id }}">{{ colaborador.nombre }} (ID: {{ colaborador.id }})
                            </option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
            </div>

            <!-- SECCIÓN 3: Estadísticas -->
            <div class="space-y-4">
                <h3 class="text-xs font-bold text-slate-500 uppercase tracking-widest border-b border-white/5 pb-2">
                    Asistencia de Niños</h3>
                <div class="grid grid-cols-2 gap-4">
                    <div class="bg-blue-500/5 p-4 rounded-2xl border border-blue-500/20">
                        <label
                            class="block text-[10px] font-bold text-blue-400 uppercase mb-2 text-center">Niños</label>
                        <input type="number" name="ninos" id="aula_ninos" value="0" min="0" required
                            class="w-full bg-slate-900/50 border border-slate-700 rounded-xl px-2 py-3 text-white focus:outline-none focus:border-blue-500 text-center text-xl font-bold">
                    </div>
                    <div class="bg-rose-500/5 p-4 rounded-2xl border border-rose-500/20">
                        <label
                            class="block text-[10px] font-bold text-rose-400 uppercase mb-2 text-center">Niñas</label>
                        <input type="number" name="ninas" id="aula_ninas" value="0" min="0" required
                            class="w-full bg-slate-900/50 border border-slate-700 rounded-xl px-2 py-3 text-white focus:outline-none focus:border-rose-500 text-center text-xl font-bold">
                    </div>
                </div>
            </div>

            <!-- SECCIÓN 4: Estado -->
            <div class="pt-2">
                <div>
                    <label
                        class="block text-[10px] font-semibold text-slate-500 uppercase mb-2 ml-1 tracking-widest">Estado
                        del Salón</label>
                    <select name="condicion" id="aula_condicion" required
                        class="w-full bg-slate-800 border-2 border-slate-700 rounded-2xl px-4 py-4 text-white focus:outline-none focus:border-orange-500 appearance-none font-bold text-center">
                        <option value="Abierto" selected>Abierto</option>
                        <option value="Cerrado">Cerrado</option>
                    </select>
                </div>
            </div>

            <!-- Botones de Acción -->
            <div class="flex flex-col gap-3 pt-4">
                <button type="submit" id="btn_submit"
                    class="w-full bg-orange-600 hover:bg-orange-500 text-white font-bold py-4 rounded-2xl transition-all active:scale-95 shadow-lg shadow-orange-600/30 uppercase text-sm tracking-widest">
                    Guardar Registro
                </button>
                <button type="button" onclick="cambiarAModoEdicion()" id="btn_mode"
                    class="w-full bg-slate-700/50 hover:bg-slate-600 text-slate-300 font-bold py-3 rounded-2xl transition-all uppercase text-[10px] tracking-widest border border-slate-700">
                    Cambiar a Modo Edición
                </button>
            </div>
        </form>

        <form id="deleteForm" action="{{ prefix }}/aulas/eliminar" method="post" class="hidden">
            <input type="hidden" name="id" id="delete_id">
            <button type="submit" onclick="return confirm('¿Eliminar registro de aula?')"
                class="w-full bg-red-600/10 hover:bg-red-600 text-red-500 hover:text-white font-bold py-4 rounded-2xl border border-red-500/30 transition-all mt-4 uppercase text-xs tracking-widest">
                Eliminar Registro
            </button>
        </form>
    </div>
</div>

<script>
    function actualizarCondicion() {
        let total = 0;

        // Para selectores individuales: si hay algo seleccionado (ID != "") cuenta como 1
        ['aula_maestra', 'aula_auxiliar'].forEach(id => {
            if (document.getElementById(id).value !== "") total += 1;
        });
        // Para colaboradores (multi-select): sumar la cantidad de seleccionados
        total += document.getElementById('aula_colaboradores').selectedOptions.length;
        ['aula_ninos', 'aula_ninas'].forEach(id => {
            total += parseInt(document.getElementById(id).value) || 0;
        });

        const condSelect = document.getElementById('aula_condicion');
        if (total > 0) {
            condSelect.value = "Abierto";
        } else {
            condSelect.value = "Cerrado";
        }
    }

    function cambiarAModoEdicion() {
        const form = document.getElementById('aulaForm');
        const idField = document.getElementById('id_field');
        const delForm = document.getElementById('deleteForm');
        const btnSubmit = document.getElementById('btn_submit');

        idField.classList.toggle('hidden');
        delForm.classList.toggle('hidden');

        if (!idField.classList.contains('hidden')) {
            form.action = "{{ prefix }}/aulas/actualizar";
            btnSubmit.innerText = "ACTUALIZAR";
            document.getElementById('btn_mode').innerText = "MODO CREAR";
            document.getElementById('aula_id').required = true;
            document.getElementById('aula_id').addEventListener('input', (e) => {
                document.getElementById('delete_id').value = e.target.value;
            });
        } else {
            form.action = "{{ prefix }}/aulas/crear";
            btnSubmit.innerText = "REGISTRAR";
            document.getElementById('btn_mode').innerText = "MODO EDICIÓN";
            document.getElementById('aula_id').required = false;
        }
    }

    // Cargar datos desde URL si existen (viniendo de la lista de aulas para editar)
    if (urlParams.get('id')) {
        if (document.getElementById('id_field').classList.contains('hidden')) {
            cambiarAModoEdicion();
        }
        document.getElementById('aula_id').value = urlParams.get('id');
        document.getElementById('delete_id').value = urlParams.get('id');
        document.getElementById('aula_id_salon').value = urlParams.get('id_salon') || "";
        document.getElementById('aula_fecha').value = urlParams.get('fecha') || "";
        document.getElementById('aula_maestra').value = urlParams.get('id_maestra') || "";
        document.getElementById('aula_auxiliar').value = urlParams.get('id_auxiliar') || "";

        // Manejar múltiples colaboradores
        const collaboratorsParam = urlParams.get('ids_colaboradores');
        if (collaboratorsParam) {
            const selectedCollaboratorIds = collaboratorsParam.split(',').map(id => parseInt(id.trim()));
            const collaboratorSelect = document.getElementById('aula_colaboradores');
            Array.from(collaboratorSelect.options).forEach(option => {
                if (selectedCollaboratorIds.includes(parseInt(option.value))) {
                    option.selected = true;
                }
            });
        }
        document.getElementById('aula_ninos').value = urlParams.get('ninos') || 0;
        document.getElementById('aula_ninas').value = urlParams.get('ninas') || 0;
        document.getElementById('aula_condicion').value = urlParams.get('condicion') || "Abierto";
    } else {
        // Solo poner fecha de hoy si no estamos editando un registro existente
        document.getElementById('aula_fecha').valueAsDate = new Date();
    }

    // Vincular detectores de eventos para actualizar la condición automáticamente
    ['aula_maestra', 'aula_auxiliar', 'aula_colaboradores', 'aula_ninos', 'aula_ninas'].forEach(id => {
        document.getElementById(id).addEventListener('input', actualizarCondicion);
    });
    actualizarCondicion(); // Ejecutar al cargar para validar estado inicial
</script>
{% endblock %}