@extends('layouts.master')

@section('title')
    Planteles
@endsection

@section('content')
    @component('components.breadcrumb')
        @slot('li_1') Configuración @endslot
        @slot('li_2') Mi institución @endslot
        @slot('title') Planteles @endslot
    @endcomponent

    <div class="row">
        <div class="col-12">
            <!-- Filtros de búsqueda -->
            <div class="card">
                <div class="card-body">
                    <p class="text-muted mb-4">
                        Usa el siguiente formulario para mostrar los planteles registrados en la aplicación.
                    </p>

                    <form id="formFiltrosPlanteles" class="needs-validation" novalidate>
                        <div class="row g-3">
                            <div class="col-md-4">
                                <label for="filtroNombrePlantel" class="form-label">Nombre</label>
                                <input type="text" class="form-control" id="filtroNombrePlantel" placeholder="Ingresa nombre del plantel">
                            </div>
                            <div class="col-md-4">
                                <label for="filtroEstatusPlantel" class="form-label">Estatus</label>
                                <select class="form-select" id="filtroEstatusPlantel">
                                    <option value="">-- Todos --</option>
                                    <option value="1">Activos</option>
                                    <option value="0">Inactivos</option>
                                </select>
                            </div>
                            <div class="col-md-4"></div>
                        </div>

                        <div class="row mt-4">
                            <div class="col-12">
                                <div class="d-flex gap-2 justify-content-end">
                                    <button type="submit" class="btn btn-primary">
                                        <i class="ri-search-line me-1"></i>Buscar
                                    </button>
                                    <button type="button" class="btn btn-warning" id="btnRegistrarPlantel">
                                        <i class="ri-user-add-line me-1"></i>Registrar
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Sección de resultados -->
            <div class="card mt-4">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h5 class="card-title mb-0">
                            <i class="ri-file-list-3-line me-2"></i>Resultados de búsqueda
                        </h5>
                        <div class="d-flex align-items-center gap-2">
                            <label for="seccionConsultarPlanteles" class="mb-0 me-2">Sección a consultar:</label>
                            <select class="form-select form-select-sm" id="seccionConsultarPlanteles" style="width: 220px;">
                                <option value="listado">Listado de planteles</option>
                            </select>
                        </div>
                    </div>

                    <!-- Estado vacío -->
                    <div id="estadoVacioPlanteles" class="text-center py-5">
                        <div class="avatar-lg mx-auto mb-4">
                            <div class="avatar-title bg-light text-muted rounded-circle">
                                <i class="ri-information-line fs-1"></i>
                            </div>
                        </div>
                        <h5 class="text-muted mb-2">Sin resultados</h5>
                        <p id="estadoVacioPlantelesMensaje" class="text-muted mb-0">Usa los filtros para realizar una búsqueda.</p>
                    </div>

                    <!-- Tabla de resultados -->
                    <div id="resultadosContainerPlanteles" class="d-none">
                        <div class="table-responsive">
                            <table class="table table-hover align-middle">
                                <thead class="table-light">
                                    <tr>
                                        <th>Nombre</th>
                                        <th>Contacto</th>
                                        <th>Teléfono</th>
                                        <th>Correo</th>
                                        <th>Estatus</th>
                                        <th class="text-center">Acciones</th>
                                    </tr>
                                </thead>
                                <tbody id="resultadosBodyPlanteles"></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @include('configuracion.mi-institucion.partials.modal-plantel')
@endsection

@section('script')
    <script src="{{ URL::asset('build/libs/sweetalert2/sweetalert2.min.js') }}"></script>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        var baseUrl = '{{ url("") }}';
        var csrf = '{{ csrf_token() }}';

        function buscarPlanteles() {
            var params = new URLSearchParams();
            var nombre = document.getElementById('filtroNombrePlantel').value.trim();
            var activa = document.getElementById('filtroEstatusPlantel').value;
            if (nombre) params.set('nombre', nombre);
            if (activa !== '') params.set('activa', activa);

            fetch(baseUrl + '/api/escuelas/list?' + params.toString(), { headers: { 'Accept': 'application/json' } })
                .then(function(r) { return r.json(); })
                .then(function(data) {
                    var listado = Array.isArray(data) ? data : [];
                    var tbody = document.getElementById('resultadosBodyPlanteles');
                    var container = document.getElementById('resultadosContainerPlanteles');
                    var estadoVacio = document.getElementById('estadoVacioPlanteles');

                    tbody.innerHTML = '';
                    if (listado.length === 0) {
                        container.classList.add('d-none');
                        estadoVacio.classList.remove('d-none');
                        var msgEl = document.getElementById('estadoVacioPlantelesMensaje');
                        if (msgEl) msgEl.textContent = 'No se encontraron planteles con los filtros seleccionados.';
                        return;
                    }
                    var msgElInit = document.getElementById('estadoVacioPlantelesMensaje');
                    if (msgElInit) msgElInit.textContent = 'Usa los filtros para realizar una búsqueda.';

                    estadoVacio.classList.add('d-none');
                    container.classList.remove('d-none');
                    listado.forEach(function(p) {
                        var tr = document.createElement('tr');
                        var nombre = (p.nombre || '-').replace(/</g, '&lt;').replace(/"/g, '&quot;');
                        var contacto = (p.contacto || '-').replace(/</g, '&lt;');
                        var telefono = (p.telefono || '-').replace(/</g, '&lt;');
                        var email = (p.email || '-').replace(/</g, '&lt;');
                        var estatus = p.activa ? '<span class="badge bg-success">Activo</span>' : '<span class="badge bg-secondary">Inactivo</span>';
                        tr.innerHTML =
                            '<td>' + nombre + '</td>' +
                            '<td>' + contacto + '</td>' +
                            '<td>' + telefono + '</td>' +
                            '<td>' + email + '</td>' +
                            '<td>' + estatus + '</td>' +
                            '<td class="text-center">' +
                            '<button type="button" class="btn btn-sm btn-soft-primary me-1 btnEditarPlantel" data-id="' + p.id + '" title="Editar"><i class="ri-pencil-line"></i></button>' +
                            '<button type="button" class="btn btn-sm btn-soft-danger btnEliminarPlantel" data-id="' + p.id + '" data-nombre="' + nombre + '" title="Eliminar"><i class="ri-delete-bin-line"></i></button>' +
                            '</td>';
                        tbody.appendChild(tr);
                    });

                    document.querySelectorAll('.btnEditarPlantel').forEach(function(btn) {
                        btn.addEventListener('click', function() { abrirModalEditar(parseInt(this.getAttribute('data-id'), 10)); });
                    });
                    document.querySelectorAll('.btnEliminarPlantel').forEach(function(btn) {
                        btn.addEventListener('click', function() {
                            var id = parseInt(this.getAttribute('data-id'), 10);
                            var nombre = this.getAttribute('data-nombre');
                            if (typeof Swal === 'undefined') {
                                if (confirm('¿Eliminar el plantel "' + nombre + '"?')) eliminarPlantel(id);
                                return;
                            }
                            Swal.fire({
                                title: '¿Eliminar plantel?',
                                html: 'Se eliminará el plantel <strong>' + nombre + '</strong>. Esta acción no se puede deshacer.',
                                icon: 'warning',
                                showCancelButton: true,
                                confirmButtonColor: '#d33',
                                cancelButtonColor: '#3085d6',
                                confirmButtonText: 'Sí, eliminar'
                            }).then(function(result) {
                                if (result.isConfirmed) eliminarPlantel(id);
                            });
                        });
                    });
                })
                .catch(function() {
                    if (typeof Swal !== 'undefined') Swal.fire({ icon: 'error', title: 'Error', text: 'No se pudo cargar el listado.' });
                });
        }

        function eliminarPlantel(id) {
            fetch(baseUrl + '/api/escuelas/' + id, {
                method: 'DELETE',
                headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': csrf, 'X-Requested-With': 'XMLHttpRequest' }
            }).then(function(r) { return r.json(); }).then(function(res) {
                if (res.success) {
                    if (typeof Swal !== 'undefined') Swal.fire({ icon: 'success', title: 'Eliminado', text: res.message || 'Plantel eliminado correctamente.' });
                    buscarPlanteles();
                } else {
                    if (typeof Swal !== 'undefined') Swal.fire({ icon: 'error', title: 'Error', text: res.message || 'No se pudo eliminar.' });
                }
            }).catch(function() {
                if (typeof Swal !== 'undefined') Swal.fire({ icon: 'error', title: 'Error', text: 'Error de conexión.' });
            });
        }

        function abrirModalEditar(id) {
            fetch(baseUrl + '/api/escuelas/' + id, { headers: { 'Accept': 'application/json' } })
                .then(function(r) { return r.json(); })
                .then(function(p) {
                    document.getElementById('plantelId').value = p.id;
                    document.getElementById('modalPlantelTitulo').textContent = 'Editar plantel';
                    document.getElementById('plantelNombre').value = p.nombre || '';
                    document.getElementById('plantelContacto').value = p.contacto || '';
                    document.getElementById('plantelTelefono').value = p.telefono || '';
                    document.getElementById('plantelEmail').value = p.email || '';
                    document.getElementById('plantelCalle').value = p.calle_numero || '';
                    document.getElementById('plantelColonia').value = p.colonia || '';
                    document.getElementById('plantelCodigoPostal').value = p.codigo_postal || '';
                    document.getElementById('plantelLocalidad').value = p.localidad || '';
                    document.getElementById('plantelEntidad').value = p.entidad_federativa || '';
                    document.getElementById('plantelActiva').checked = p.activa !== false;
                    var modal = new bootstrap.Modal(document.getElementById('modalPlantel'));
                    modal.show();
                })
                .catch(function() {
                    if (typeof Swal !== 'undefined') Swal.fire({ icon: 'error', title: 'Error', text: 'No se pudo cargar el plantel.' });
                });
        }

        function limpiarModal() {
            document.getElementById('plantelId').value = '';
            document.getElementById('modalPlantelTitulo').textContent = 'Registrar plantel';
            document.getElementById('plantelNombre').value = '';
            document.getElementById('plantelContacto').value = '';
            document.getElementById('plantelTelefono').value = '';
            document.getElementById('plantelEmail').value = '';
            document.getElementById('plantelCalle').value = '';
            document.getElementById('plantelColonia').value = '';
            document.getElementById('plantelCodigoPostal').value = '';
            document.getElementById('plantelLocalidad').value = '';
            document.getElementById('plantelEntidad').value = '';
            document.getElementById('plantelActiva').checked = true;
        }

        document.getElementById('formFiltrosPlanteles').addEventListener('submit', function(e) {
            e.preventDefault();
            buscarPlanteles();
        });

        document.getElementById('formFiltrosPlanteles').addEventListener('reset', function() {
            var estadoVacio = document.getElementById('estadoVacioPlanteles');
            var container = document.getElementById('resultadosContainerPlanteles');
            var msgEl = document.getElementById('estadoVacioPlantelesMensaje');
            estadoVacio.classList.remove('d-none');
            container.classList.add('d-none');
            if (msgEl) msgEl.textContent = 'Usa los filtros para realizar una búsqueda.';
        });

        document.getElementById('btnRegistrarPlantel').addEventListener('click', function() {
            limpiarModal();
            document.getElementById('modalPlantelTitulo').textContent = 'Registrar plantel';
            var modal = new bootstrap.Modal(document.getElementById('modalPlantel'));
            modal.show();
        });

        document.getElementById('formModalPlantel').addEventListener('submit', function(e) {
            e.preventDefault();
            var id = document.getElementById('plantelId').value.trim();
            var payload = {
                nombre: document.getElementById('plantelNombre').value.trim(),
                contacto: document.getElementById('plantelContacto').value.trim() || null,
                telefono: document.getElementById('plantelTelefono').value.trim() || null,
                email: document.getElementById('plantelEmail').value.trim() || null,
                calle_numero: document.getElementById('plantelCalle').value.trim() || null,
                colonia: document.getElementById('plantelColonia').value.trim() || null,
                codigo_postal: document.getElementById('plantelCodigoPostal').value.trim() || null,
                localidad: document.getElementById('plantelLocalidad').value.trim() || null,
                entidad_federativa: document.getElementById('plantelEntidad').value.trim() || null,
                activa: document.getElementById('plantelActiva').checked
            };

            if (!payload.nombre) {
                if (typeof Swal !== 'undefined') Swal.fire({ icon: 'warning', title: 'Campo requerido', text: 'El nombre del plantel es obligatorio.' });
                return;
            }

            var url = baseUrl + '/api/escuelas';
            var method = 'POST';
            if (id) {
                url = baseUrl + '/api/escuelas/' + id;
                method = 'PUT';
            }

            fetch(url, {
                method: method,
                headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': csrf, 'X-Requested-With': 'XMLHttpRequest' },
                body: JSON.stringify(payload)
            }).then(function(r) { return r.json(); }).then(function(res) {
                if (res.success) {
                    if (typeof Swal !== 'undefined') Swal.fire({ icon: 'success', title: 'Guardado', text: res.message || 'Plantel guardado correctamente.' });
                    bootstrap.Modal.getInstance(document.getElementById('modalPlantel')).hide();
                    limpiarModal();
                    if (document.getElementById('resultadosContainerPlanteles').classList.contains('d-none') === false) buscarPlanteles();
                } else {
                    var msg = res.message || (res.errors ? Object.values(res.errors).flat().join(' ') : 'No se pudo guardar.');
                    if (typeof Swal !== 'undefined') Swal.fire({ icon: 'error', title: 'Error', text: msg });
                }
            }).catch(function() {
                if (typeof Swal !== 'undefined') Swal.fire({ icon: 'error', title: 'Error', text: 'Error de conexión.' });
            });
        });
    });
    </script>
@endsection