@extends('layouts.master')

@section('title')
    Asignación de materias
@endsection

@section('content')
    @component('components.breadcrumb')
        @slot('li_1') Control Escolar @endslot
        @slot('li_2') Profesores @endslot
        @slot('title') Asignación de materias @endslot
    @endcomponent

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title mb-2 text-primary"><i class="ri-book-open-line me-2"></i>Asignación de materias</h5>
                    <p class="text-muted mb-4">Selecciona un profesor y el ciclo, plan de estudios y grado para asignar las materias que impartirá en el ciclo escolar. Puedes editar el nivel de estudios del profesor en este formulario; el cambio se reflejará en todo el sistema.</p>
                    <form id="formAsignacionMaterias">
                        <div class="row g-3 mb-3">
                            <div class="col-12 col-md-6">
                                <label for="asigDocente" class="form-label">Nombre del profesor</label>
                                <select class="form-select" id="asigDocente">
                                    <option value="">-- Seleccione un profesor --</option>
                                </select>
                            </div>
                            <div class="col-12 col-md-3">
                                <label class="form-label">Correo</label>
                                <div class="form-control bg-light" id="asigEmail" readonly>—</div>
                            </div>
                            <div class="col-12 col-md-3">
                                <label for="asigNivelEstudios" class="form-label">Nivel de estudios</label>
                                <input type="text" class="form-control" id="asigNivelEstudios" placeholder="Ej: Licenciatura, Maestría, Doctorado" maxlength="100" list="asigNivelEstudiosList">
                                <datalist id="asigNivelEstudiosList">
                                    <option value="Licenciatura">
                                    <option value="Maestría">
                                    <option value="Doctorado">
                                    <option value="Técnico">
                                    <option value="Ingeniería">
                                </datalist>
                                <small class="text-muted">Editable; se actualiza en todo el sistema.</small>
                            </div>
                        </div>
                        <div class="row g-3 mb-3">
                            <div class="col-12 col-md-4">
                                <label for="asigOferta" class="form-label">Oferta educativa</label>
                                <select class="form-select" id="asigOferta">
                                    <option value="">-- Seleccione --</option>
                                </select>
                            </div>
                            <div class="col-12 col-md-4">
                                <label for="asigPlan" class="form-label">Plan de estudios</label>
                                <select class="form-select" id="asigPlan">
                                    <option value="">-- Seleccione oferta primero --</option>
                                </select>
                            </div>
                            <div class="col-12 col-md-4">
                                <label for="asigCiclo" class="form-label">Ciclo escolar</label>
                                <select class="form-select" id="asigCiclo">
                                    <option value="">-- Seleccione --</option>
                                </select>
                            </div>
                        </div>
                        <div class="row g-3 mb-3">
                            <div class="col-12 col-md-4">
                                <label for="asigGrado" class="form-label">Grado</label>
                                <select class="form-select" id="asigGrado">
                                    <option value="">-- Todos --</option>
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                    <option value="4">4</option>
                                    <option value="5">5</option>
                                    <option value="6">6</option>
                                    <option value="7">7</option>
                                    <option value="8">8</option>
                                    <option value="9">9</option>
                                </select>
                            </div>
                        </div>
                        <div class="row g-3 mb-3">
                            <div class="col-12">
                                <label class="form-label">Materias a asignar</label>
                                <div class="d-flex justify-content-end gap-2 mb-2">
                                    <a href="#" class="text-warning text-decoration-none small" id="asigMarcarTodas">Marcar todas</a>
                                    <a href="#" class="text-warning text-decoration-none small" id="asigDesmarcarTodas">Desmarcar todas</a>
                                </div>
                                <div class="border rounded p-3 bg-light" id="asigMateriasChips" style="min-height: 80px; max-height: 280px; overflow-y: auto;">
                                    <span class="text-muted small">Selecciona Plan de estudios y Grado para cargar las materias.</span>
                                </div>
                            </div>
                        </div>
                        <div class="d-flex gap-2 justify-content-end">
                            <button type="button" class="btn btn-secondary" id="asigBtnCargar">Cargar asignación actual</button>
                            <button type="submit" class="btn btn-primary" id="asigBtnGuardar"><i class="ri-save-line me-1"></i>Guardar asignación</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script>
    document.addEventListener('DOMContentLoaded', function() {
        var baseUrl = '{{ url('') }}';
        var listadoMateriasAsig = [];
        var materiasAsigSel = {};
        var docentesListaAsig = [];

        function renderChipsAsigMaterias() {
            var cont = document.getElementById('asigMateriasChips');
            if (!cont) return;
            if (listadoMateriasAsig.length === 0) {
                cont.innerHTML = '<span class="text-muted small">Selecciona Plan de estudios y Grado para cargar las materias.</span>';
                return;
            }
            var chips = listadoMateriasAsig.map(function(m) {
                var id = String(m.id);
                var nombre = (m.clave || '') + ' - ' + (m.nombre || ''); nombre = nombre.replace(/</g, '&lt;');
                var sel = materiasAsigSel[id];
                if (sel) {
                    return '<span class="badge bg-secondary me-2 mb-2 d-inline-flex align-items-center" data-materia-id="' + id + '"><i class="ri-close-line me-1 chip-remove-asig" style="cursor:pointer;"></i>' + nombre + '</span>';
                }
                return '<span class="badge bg-light text-dark border me-2 mb-2 chip-asig-no-sel" data-materia-id="' + id + '" style="cursor:pointer;">' + nombre + '</span>';
            }).join('');
            cont.innerHTML = chips;
            cont.querySelectorAll('.chip-remove-asig').forEach(function(el) {
                el.onclick = function(e) { e.preventDefault(); var id = this.closest('[data-materia-id]').getAttribute('data-materia-id'); delete materiasAsigSel[id]; renderChipsAsigMaterias(); };
            });
            cont.querySelectorAll('.chip-asig-no-sel').forEach(function(el) {
                el.onclick = function() { var id = this.getAttribute('data-materia-id'); var m = listadoMateriasAsig.find(function(x) { return String(x.id) === id; }); if (m) materiasAsigSel[id] = true; renderChipsAsigMaterias(); };
            });
        }

        fetch(baseUrl + '/api/profesores/docentes-list', { headers: { 'Accept': 'application/json' } }).then(function(r) { return r.json(); }).then(function(data) {
            docentesListaAsig = data || [];
            var sel = document.getElementById('asigDocente');
            if (sel) sel.innerHTML = '<option value="">-- Seleccione un profesor --</option>' + (docentesListaAsig || []).map(function(d) {
                return '<option value="' + d.id + '">' + (d.nombre_completo || '').replace(/</g, '&lt;') + '</option>';
            }).join('');
        });
        fetch(baseUrl + '/api/ofertas-educativas', { headers: { 'Accept': 'application/json' } }).then(function(r) { return r.json(); }).then(function(data) {
            var sel = document.getElementById('asigOferta');
            if (sel) sel.innerHTML = '<option value="">-- Seleccione --</option>' + (data || []).map(function(o) {
                return '<option value="' + o.id + '">' + (o.nombre || '').replace(/</g, '&lt;') + '</option>';
            }).join('');
        });
        fetch(baseUrl + '/api/profesores/ciclos', { headers: { 'Accept': 'application/json' } }).then(function(r) { return r.json(); }).then(function(data) {
            var sel = document.getElementById('asigCiclo');
            if (sel) sel.innerHTML = '<option value="">-- Seleccione --</option>' + (data || []).map(function(c) {
                return '<option value="' + c.id + '">' + (c.nombre || '').replace(/</g, '&lt;') + '</option>';
            }).join('');
        });

        var asigDocente = document.getElementById('asigDocente');
        if (asigDocente) asigDocente.addEventListener('change', function() {
            var id = this.value;
            var emailEl = document.getElementById('asigEmail');
            var nivelEl = document.getElementById('asigNivelEstudios');
            if (!id) { if (emailEl) emailEl.textContent = '—'; if (nivelEl) nivelEl.value = ''; return; }
            var d = docentesListaAsig.find(function(x) { return String(x.id) === id; });
            if (d) {
                if (emailEl) emailEl.textContent = d.email || '—';
                if (nivelEl) nivelEl.value = d.nivel_estudios || '';
                return;
            }
            fetch(baseUrl + '/api/profesores/docente/' + id, { headers: { 'Accept': 'application/json' } }).then(function(r) { return r.json(); }).then(function(d) {
                if (emailEl) emailEl.textContent = d.email || '—';
                if (nivelEl) nivelEl.value = d.nivel_estudios || '';
            });
        });

        var asigNivel = document.getElementById('asigNivelEstudios');
        if (asigNivel) asigNivel.addEventListener('blur', function() {
            var docenteId = document.getElementById('asigDocente').value;
            if (!docenteId) return;
            var nivel = this.value.trim();
            fetch(baseUrl + '/api/profesores/docente/' + docenteId + '/nivel-estudios', {
                method: 'PUT',
                headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'X-Requested-With': 'XMLHttpRequest' },
                body: JSON.stringify({ nivel_estudios: nivel || null })
            }).then(function(r) { return r.json(); }).then(function(res) {
                if (res.success && typeof Swal !== 'undefined') Swal.fire({ icon: 'success', title: 'Actualizado', text: 'Nivel de estudios actualizado en todo el sistema.' });
            }).catch(function() {});
        });

        var asigOferta = document.getElementById('asigOferta');
        if (asigOferta) asigOferta.addEventListener('change', function() {
            var ofertaId = this.value;
            var sel = document.getElementById('asigPlan');
            if (!ofertaId) { if (sel) sel.innerHTML = '<option value="">-- Seleccione oferta primero --</option>'; listadoMateriasAsig = []; materiasAsigSel = {}; renderChipsAsigMaterias(); return; }
            fetch(baseUrl + '/api/profesores/planes-estudio?oferta_educativa_id=' + ofertaId, { headers: { 'Accept': 'application/json' } }).then(function(r) { return r.json(); }).then(function(data) {
                if (sel) sel.innerHTML = '<option value="">-- Seleccione plan --</option>' + (data || []).map(function(p) {
                    return '<option value="' + p.id + '">' + (p.nombre || p.clave_plan || '').replace(/</g, '&lt;') + '</option>';
                }).join('');
                listadoMateriasAsig = []; materiasAsigSel = {}; renderChipsAsigMaterias();
            });
        });

        var asigPlan = document.getElementById('asigPlan');
        var asigGrado = document.getElementById('asigGrado');
        if (asigPlan) asigPlan.addEventListener('change', function() { listadoMateriasAsig = []; materiasAsigSel = {}; renderChipsAsigMaterias(); cargarMateriasAsig(); });
        if (asigGrado) asigGrado.addEventListener('change', function() { listadoMateriasAsig = []; materiasAsigSel = {}; renderChipsAsigMaterias(); cargarMateriasAsig(); });

        function cargarMateriasAsig() {
            var planId = document.getElementById('asigPlan') && document.getElementById('asigPlan').value;
            var grado = document.getElementById('asigGrado') && document.getElementById('asigGrado').value;
            var cont = document.getElementById('asigMateriasChips');
            if (!planId) { if (cont) cont.innerHTML = '<span class="text-muted small">Selecciona Plan de estudios.</span>'; return; }
            var url = baseUrl + '/api/profesores/materias-plan-grado?plan_estudio_id=' + planId;
            if (grado) url += '&grado=' + encodeURIComponent(grado);
            fetch(url, { headers: { 'Accept': 'application/json' } }).then(function(r) { return r.json(); }).then(function(data) {
                listadoMateriasAsig = data || [];
                materiasAsigSel = {};
                renderChipsAsigMaterias();
            });
        }

        var asigMarcar = document.getElementById('asigMarcarTodas');
        var asigDesmarcar = document.getElementById('asigDesmarcarTodas');
        if (asigMarcar) asigMarcar.addEventListener('click', function(e) { e.preventDefault(); listadoMateriasAsig.forEach(function(m) { materiasAsigSel[String(m.id)] = true; }); renderChipsAsigMaterias(); });
        if (asigDesmarcar) asigDesmarcar.addEventListener('click', function(e) { e.preventDefault(); materiasAsigSel = {}; renderChipsAsigMaterias(); });

        var asigBtnCargar = document.getElementById('asigBtnCargar');
        if (asigBtnCargar) asigBtnCargar.addEventListener('click', function() {
            var docenteId = document.getElementById('asigDocente').value;
            var cicloId = document.getElementById('asigCiclo').value;
            var planId = document.getElementById('asigPlan').value;
            var grado = document.getElementById('asigGrado').value;
            if (!docenteId || !cicloId || !planId) {
                if (typeof Swal !== 'undefined') Swal.fire({ icon: 'warning', title: 'Faltan datos', text: 'Selecciona profesor, ciclo y plan de estudios.' });
                return;
            }
            if (listadoMateriasAsig.length === 0) {
                if (typeof Swal !== 'undefined') Swal.fire({ icon: 'info', title: 'Cargar materias primero', text: 'Selecciona plan y grado para cargar las materias, luego podrás cargar la asignación actual.' });
                return;
            }
            var url = baseUrl + '/api/profesores/asignacion-materias?docente_id=' + docenteId + '&ciclo_id=' + cicloId + '&plan_estudio_id=' + planId;
            if (grado) url += '&grado=' + encodeURIComponent(grado);
            fetch(url, { headers: { 'Accept': 'application/json' } }).then(function(r) { return r.json(); }).then(function(res) {
                materiasAsigSel = {};
                (res.items || []).forEach(function(mid) { materiasAsigSel[String(mid)] = true; });
                renderChipsAsigMaterias();
                if (typeof Swal !== 'undefined') Swal.fire({ icon: 'success', title: 'Cargado', text: 'Asignación actual cargada.' });
            });
        });

        var formAsig = document.getElementById('formAsignacionMaterias');
        if (formAsig) formAsig.addEventListener('submit', function(e) {
            e.preventDefault();
            var docenteId = document.getElementById('asigDocente').value;
            var cicloId = document.getElementById('asigCiclo').value;
            var planId = document.getElementById('asigPlan').value;
            var grado = document.getElementById('asigGrado').value;
            if (!docenteId || !cicloId || !planId) {
                if (typeof Swal !== 'undefined') Swal.fire({ icon: 'warning', title: 'Faltan datos', text: 'Selecciona profesor, ciclo escolar y plan de estudios.' });
                return;
            }
            var materiaIds = Object.keys(materiasAsigSel).filter(function(k) { return materiasAsigSel[k]; });
            fetch(baseUrl + '/api/profesores/asignacion-materias', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'X-Requested-With': 'XMLHttpRequest' },
                body: JSON.stringify({ docente_id: docenteId, ciclo_id: cicloId, plan_estudio_id: planId, grado: grado || null, materia_ids: materiaIds })
            }).then(function(r) { return r.json(); }).then(function(res) {
                if (res.success) {
                    if (typeof Swal !== 'undefined') Swal.fire({ icon: 'success', title: 'Guardado', text: 'Asignación de materias guardada correctamente.' });
                } else {
                    if (typeof Swal !== 'undefined') Swal.fire({ icon: 'error', title: 'Error', text: (res.message || 'No se pudo guardar.') });
                }
            }).catch(function() {
                if (typeof Swal !== 'undefined') Swal.fire({ icon: 'error', title: 'Error', text: 'Error de conexión.' });
            });
        });
    });
    </script>
@endsection