@extends('layouts.master')

@section('title')
    Disponibilidad de profesores
@endsection

@section('content')
    @component('components.breadcrumb')
        @slot('li_1') Control Escolar @endslot
        @slot('li_2') Horarios @endslot
        @slot('title') Disponibilidad de profesores @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-user-clock-line me-2"></i>Disponibilidad de profesores
                    </h5>
                    <p class="text-muted mb-4">
                        Usa el siguiente formulario para seleccionar a un profesor y registrar su disponibilidad de horario de acuerdo al plantel y periodo seleccionado.
                    </p>

                    <form id="filtrosForm">
                        <div class="row g-3 align-items-end">
                            <div class="col-md-5">
                                <label class="form-label">Plantel</label>
                                <div class="d-flex justify-content-between align-items-center mb-1">
                                    <span class="text-muted small">Selecciona una o más opciones</span>
                                    <div>
                                        <a href="#" class="text-warning text-decoration-none small me-2" id="filtroPlantelMarcarTodos">Marcar todos</a>
                                        <a href="#" class="text-secondary text-decoration-none small" id="filtroPlantelDesmarcarTodos">Desmarcar todos</a>
                                    </div>
                                </div>
                                <select class="form-select" id="filtroPlantel" multiple size="4">
                                </select>
                            </div>
                            <div class="col-md-5">
                                <label class="form-label">Ciclo escolar</label>
                                <div class="d-flex justify-content-between align-items-center mb-1">
                                    <span class="text-muted small">Selecciona una o más opciones</span>
                                    <div>
                                        <a href="#" class="text-warning text-decoration-none small me-2" id="filtroCicloMarcarTodos">Marcar todos</a>
                                        <a href="#" class="text-secondary text-decoration-none small" id="filtroCicloDesmarcarTodos">Desmarcar todos</a>
                                    </div>
                                </div>
                                <select class="form-select" id="filtroCiclo" multiple size="4">
                                </select>
                            </div>
                        </div>
                        <div class="row mt-3">
                            <div class="col-12 text-end">
                                <button type="button" class="btn btn-warning me-2" id="btnCargaMultiple">
                                    <i class="ri-upload-cloud-line me-1"></i>Carga Múltiple
                                </button>
                                <button type="submit" class="btn btn-primary" id="btnBuscar">
                                    <i class="ri-search-line me-1"></i>Buscar
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <div id="estadoInicial" class="card mt-4">
                <div class="card-body text-center py-5">
                    <div class="avatar-lg mx-auto mb-3">
                        <div class="avatar-title bg-light text-muted rounded-circle">
                            <i class="ri-information-line fs-1"></i>
                        </div>
                    </div>
                    <p class="text-muted mb-0">Usa los filtros para realizar una búsqueda.</p>
                </div>
            </div>

            <div id="panelResultados" class="card mt-4 d-none">
                <div class="card-header">
                    <h6 class="card-title mb-0">Profesores y disponibilidad</h6>
                </div>
                <div class="card-body">
                    <div id="resultadosContenido"></div>
                </div>
            </div>
        </div>
    </div>

    @include('disponibilidad-profesores.partials.modal-carga-multiple')
    @include('disponibilidad-profesores.partials.modal-registrar-disponibilidad')
@endsection

@section('script')
    <script>
    var baseUrl = '{{ url("") }}';
    var datosBusqueda = { docentes: [], disponibilidades: [] };

    function cargarSelects() {
        fetch(baseUrl + '/api/disponibilidad-profesores/planteles').then(function(r) { return r.json(); }).then(function(data) {
            var sel = document.getElementById('filtroPlantel');
            sel.innerHTML = (data || []).map(function(p) {
                return '<option value="' + p.id + '">' + (p.nombre || '') + '</option>';
            }).join('');
        });
        fetch(baseUrl + '/api/disponibilidad-profesores/ciclos').then(function(r) { return r.json(); }).then(function(data) {
            var sel = document.getElementById('filtroCiclo');
            sel.innerHTML = (data || []).map(function(c) {
                return '<option value="' + c.id + '">' + (c.nombre || '') + '</option>';
            }).join('');
        });
    }

    function marcarTodos(selectId) {
        var sel = document.getElementById(selectId);
        if (!sel || !sel.multiple) return;
        for (var i = 0; i < sel.options.length; i++) sel.options[i].selected = true;
    }
    function desmarcarTodos(selectId) {
        var sel = document.getElementById(selectId);
        if (!sel) return;
        for (var i = 0; i < sel.options.length; i++) sel.options[i].selected = false;
    }

    document.getElementById('filtroPlantelMarcarTodos').addEventListener('click', function(e) { e.preventDefault(); marcarTodos('filtroPlantel'); });
    document.getElementById('filtroPlantelDesmarcarTodos').addEventListener('click', function(e) { e.preventDefault(); desmarcarTodos('filtroPlantel'); });
    document.getElementById('filtroCicloMarcarTodos').addEventListener('click', function(e) { e.preventDefault(); marcarTodos('filtroCiclo'); });
    document.getElementById('filtroCicloDesmarcarTodos').addEventListener('click', function(e) { e.preventDefault(); desmarcarTodos('filtroCiclo'); });

    function obtenerIdsMulti(selectId) {
        var sel = document.getElementById(selectId);
        if (!sel || !sel.multiple) return [];
        return Array.from(sel.selectedOptions).map(function(o) { return o.value; });
    }

    function buscar() {
        var plantelIds = obtenerIdsMulti('filtroPlantel');
        var cicloIds = obtenerIdsMulti('filtroCiclo');
        if (plantelIds.length === 0 || cicloIds.length === 0) {
            document.getElementById('estadoInicial').classList.remove('d-none');
            document.getElementById('panelResultados').classList.add('d-none');
            Swal.fire({ icon: 'warning', title: 'Aviso', text: 'Selecciona al menos un plantel y un ciclo escolar para buscar.' });
            return;
        }
        var params = new URLSearchParams();
        plantelIds.forEach(function(id) { params.append('plantel_id[]', id); });
        cicloIds.forEach(function(id) { params.append('ciclo_id[]', id); });
        fetch(baseUrl + '/api/disponibilidad-profesores/buscar?' + params, { headers: { 'Accept': 'application/json' } })
            .then(function(r) { return r.json(); })
            .then(function(data) {
                datosBusqueda.docentes = data.docentes || [];
                datosBusqueda.disponibilidades = data.disponibilidades || [];
                document.getElementById('estadoInicial').classList.add('d-none');
                document.getElementById('panelResultados').classList.remove('d-none');
                renderResultados();
            })
            .catch(function() {
                datosBusqueda.docentes = [];
                datosBusqueda.disponibilidades = [];
                document.getElementById('estadoInicial').classList.remove('d-none');
                document.getElementById('panelResultados').classList.add('d-none');
            });
    }

    function renderResultados() {
        var cont = document.getElementById('resultadosContenido');
        if (!datosBusqueda.docentes.length) {
            cont.innerHTML = '<p class="text-muted mb-0">No hay profesores que coincidan con los filtros. Ajusta plantel y/o ciclo escolar.</p>';
            return;
        }
        function fmtHora(h) { return (h || '').substr ? (h || '').substr(0, 5) : (h || ''); }
        var html = '<div class="table-responsive"><table class="table table-bordered table-hover mb-0"><thead class="table-light"><tr><th>Profesor</th><th>Nº empleado</th><th>Disponibilidad registrada</th><th>Acciones</th></tr></thead><tbody>';
        datosBusqueda.docentes.forEach(function(d) {
            var slots = (datosBusqueda.disponibilidades || []).filter(function(disp) { return disp.docente_id == d.id; });
            var dispHtml = slots.length ? slots.map(function(s) {
                return '<span class="badge bg-secondary me-1">' + s.dia_semana + ' ' + fmtHora(s.hora_inicio) + '-' + fmtHora(s.hora_fin) + ' <button type="button" class="btn btn-link btn-sm p-0 text-danger btnEliminarDisp" data-id="' + s.id + '" title="Eliminar">&times;</button></span>';
            }).join(' ') : '—';
            html += '<tr><td>' + (d.nombre_completo || '') + '</td><td>' + (d.numero_empleado || '') + '</td><td class="small">' + dispHtml + '</td><td><button type="button" class="btn btn-sm btn-outline-primary btnRegistrarDisp" data-docente-id="' + d.id + '" data-docente-nombre="' + (d.nombre_completo || '').replace(/"/g, '&quot;') + '"><i class="ri-add-line me-1"></i>Registrar</button></td></tr>';
        });
        html += '</tbody></table></div>';
        cont.innerHTML = html;
        cont.querySelectorAll('.btnRegistrarDisp').forEach(function(btn) {
            btn.addEventListener('click', function() {
                abrirModalRegistrar(this.dataset.docenteId, this.dataset.docenteNombre);
            });
        });
        cont.querySelectorAll('.btnEliminarDisp').forEach(function(btn) {
            btn.addEventListener('click', function() {
                var id = this.dataset.id;
                Swal.fire({
                    title: '¿Eliminar esta franja de disponibilidad?',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Sí, eliminar',
                    cancelButtonText: 'Cancelar'
                }).then(function(result) {
                    if (!result.isConfirmed) return;
                    fetch(baseUrl + '/api/disponibilidad-profesores/disponibilidad/' + id, { method: 'DELETE', headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' } })
                        .then(function(r) {
                            if (r.status === 204) {
                                datosBusqueda.disponibilidades = (datosBusqueda.disponibilidades || []).filter(function(d) { return d.id != id; });
                                renderResultados();
                            }
                        });
                });
            });
        });
    }

    function abrirModalRegistrar(docenteId, docenteNombre) {
        document.getElementById('modalRegistrarDocenteId').value = docenteId;
        document.getElementById('modalRegistrarDocenteNombre').textContent = docenteNombre || '';
        document.getElementById('modalRegistrarDia').value = 'Lunes';
        document.getElementById('modalRegistrarHoraInicio').value = '08:00';
        document.getElementById('modalRegistrarHoraFin').value = '09:00';
        var plantelIds = obtenerIdsMulti('filtroPlantel');
        var cicloIds = obtenerIdsMulti('filtroCiclo');
        if (plantelIds.length) document.getElementById('modalRegistrarEscuela').value = plantelIds[0];
        if (cicloIds.length) document.getElementById('modalRegistrarCiclo').value = cicloIds[0];
        new bootstrap.Modal(document.getElementById('modalRegistrarDisponibilidad')).show();
    }

    document.getElementById('filtrosForm').addEventListener('submit', function(e) {
        e.preventDefault();
        buscar();
    });

    document.getElementById('btnCargaMultiple').addEventListener('click', function() {
        cargarSelectsModalCarga();
        new bootstrap.Modal(document.getElementById('modalCargaMultiple')).show();
    });

    function cargarSelectsModalCarga() {
        fetch(baseUrl + '/api/disponibilidad-profesores/planteles').then(function(r) { return r.json(); }).then(function(data) {
            var sel = document.getElementById('cargaPlantel');
            sel.innerHTML = (data || []).map(function(p) { return '<option value="' + p.id + '">' + (p.nombre || '') + '</option>'; }).join('');
        });
        fetch(baseUrl + '/api/disponibilidad-profesores/ciclos').then(function(r) { return r.json(); }).then(function(data) {
            var sel = document.getElementById('cargaCiclo');
            sel.innerHTML = (data || []).map(function(c) { return '<option value="' + c.id + '">' + (c.nombre || '') + '</option>'; }).join('');
        });
        fetch(baseUrl + '/api/disponibilidad-profesores/docentes').then(function(r) { return r.json(); }).then(function(data) {
            var sel = document.getElementById('cargaProfesor');
            sel.innerHTML = (data || []).map(function(d) { return '<option value="' + d.id + '">' + (d.nombre_completo || d.numero_empleado || '') + '</option>'; }).join('');
        });
    }

    document.getElementById('cargaPlantelMarcarTodos').addEventListener('click', function(e) { e.preventDefault(); marcarTodos('cargaPlantel'); });
    document.getElementById('cargaPlantelDesmarcarTodos').addEventListener('click', function(e) { e.preventDefault(); desmarcarTodos('cargaPlantel'); });
    document.getElementById('cargaCicloMarcarTodos').addEventListener('click', function(e) { e.preventDefault(); marcarTodos('cargaCiclo'); });
    document.getElementById('cargaCicloDesmarcarTodos').addEventListener('click', function(e) { e.preventDefault(); desmarcarTodos('cargaCiclo'); });
    document.getElementById('cargaProfesorMarcarTodos').addEventListener('click', function(e) { e.preventDefault(); marcarTodos('cargaProfesor'); });
    document.getElementById('cargaProfesorDesmarcarTodos').addEventListener('click', function(e) { e.preventDefault(); desmarcarTodos('cargaProfesor'); });

    document.getElementById('btnCargaMultipleBuscar').addEventListener('click', function() {
        var plantelIds = Array.from(document.getElementById('cargaPlantel').selectedOptions).map(function(o) { return o.value; });
        var cicloIds = Array.from(document.getElementById('cargaCiclo').selectedOptions).map(function(o) { return o.value; });
        var docenteIds = Array.from(document.getElementById('cargaProfesor').selectedOptions).map(function(o) { return o.value; });
        if (!plantelIds.length || !cicloIds.length) {
            Swal.fire({ icon: 'warning', title: 'Aviso', text: 'Selecciona al menos un plantel y un ciclo escolar.' });
            return;
        }
        var params = new URLSearchParams();
        plantelIds.forEach(function(id) { params.append('plantel_id[]', id); });
        cicloIds.forEach(function(id) { params.append('ciclo_id[]', id); });
        if (docenteIds.length) docenteIds.forEach(function(id) { params.append('docente_id[]', id); });
        fetch(baseUrl + '/api/disponibilidad-profesores/buscar?' + params, { headers: { 'Accept': 'application/json' } })
            .then(function(r) { return r.json(); })
            .then(function(data) {
                datosBusqueda.docentes = data.docentes || [];
                datosBusqueda.disponibilidades = data.disponibilidades || [];
                bootstrap.Modal.getInstance(document.getElementById('modalCargaMultiple')).hide();
                document.getElementById('estadoInicial').classList.add('d-none');
                document.getElementById('panelResultados').classList.remove('d-none');
                renderResultados();
            })
            .catch(function() { Swal.fire({ icon: 'error', title: 'Error', text: 'Error al buscar.' }); });
    });

    function cargarSelectsModalRegistrar() {
        fetch(baseUrl + '/api/disponibilidad-profesores/planteles').then(function(r) { return r.json(); }).then(function(data) {
            var sel = document.getElementById('modalRegistrarEscuela');
            var v = sel.value;
            sel.innerHTML = '<option value="">-- Seleccione --</option>' + (data || []).map(function(p) { return '<option value="' + p.id + '">' + (p.nombre || '') + '</option>'; }).join('');
            if (v) sel.value = v;
        });
        fetch(baseUrl + '/api/disponibilidad-profesores/ciclos').then(function(r) { return r.json(); }).then(function(data) {
            var sel = document.getElementById('modalRegistrarCiclo');
            var v = sel.value;
            sel.innerHTML = '<option value="">-- Seleccione --</option>' + (data || []).map(function(c) { return '<option value="' + c.id + '">' + (c.nombre || '') + '</option>'; }).join('');
            if (v) sel.value = v;
        });
    }

    document.getElementById('modalRegistrarDisponibilidad').addEventListener('show.bs.modal', function() {
        cargarSelectsModalRegistrar();
    });

    document.getElementById('btnGuardarDisponibilidad').addEventListener('click', function() {
        var docenteId = document.getElementById('modalRegistrarDocenteId').value;
        var escuelaId = document.getElementById('modalRegistrarEscuela').value;
        var cicloId = document.getElementById('modalRegistrarCiclo').value;
        var dia = document.getElementById('modalRegistrarDia').value;
        var horaInicio = document.getElementById('modalRegistrarHoraInicio').value;
        var horaFin = document.getElementById('modalRegistrarHoraFin').value;
        if (!docenteId || !escuelaId || !cicloId) {
            Swal.fire({ icon: 'warning', title: 'Aviso', text: 'Completa plantel y ciclo escolar.' });
            return;
        }
        if (!horaInicio || !horaFin) {
            Swal.fire({ icon: 'warning', title: 'Aviso', text: 'Indica hora de inicio y fin.' });
            return;
        }
        var payload = { docente_id: docenteId, escuela_id: escuelaId, ciclo_id: cicloId, dia_semana: dia, hora_inicio: horaInicio, hora_fin: horaFin };
        fetch(baseUrl + '/api/disponibilidad-profesores/disponibilidad', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            body: JSON.stringify(payload)
        }).then(function(r) {
            if (!r.ok) return r.json().then(function(e) { throw new Error(e.message || 'Error'); });
            return r.json();
        }).then(function(disp) {
            bootstrap.Modal.getInstance(document.getElementById('modalRegistrarDisponibilidad')).hide();
            datosBusqueda.disponibilidades.push(disp);
            renderResultados();
        }).catch(function(err) { Swal.fire({ icon: 'error', title: 'Error', text: err.message || 'Error al guardar.' }); });
    });

    cargarSelects();
    </script>
@endsection