@extends('layouts.landing')

@section('title', 'Gestión de Tutores')

@section('content')
    <div class="wrapper">
        @include('layouts._partials.header')
        @include('layouts._partials.menuAdmin', ['activeItem' => 'tutores'])

        <div class="content-wrapper p-2">
            <div class="container-fluid">
                <div class="card">
                    <div class="card-body" @if (!$hasActiveAcademicYear) style="display: none;" @endif>
                        <div class="row">
                            <p class="col-md-3">
                                @if ($hasActiveAcademicYear)
                                    Año Académico: {{ $hasActiveAcademicYear->year_name }}
                                @else
                                    <span style="color: red;">¡Por Favor Crear Año Académico!</span>
                                @endif
                            </p>
                            <p class="col-md-7 text-center font-weight-bold">GESTIÓN TUTORES</p>
                            <button class="btn btn-info mb-3 col-md-2" data-bs-toggle="modal"
                                data-bs-target="#createModalTutor">
                                <i class="nav-icon fas fa-user-plus"></i>
                                Agregar Nuevo Tutor
                            </button>
                        </div>
                        <div class="row ">
                            <div class="col-md-6">
                                <div class="input-group">
                                    <select id="filter_select" class="form-select">
                                        <option value="">Todos los grados</option>
                                        @foreach ($degrees as $degree)
                                            <option value="{{ $degree->number_degree }}">{{ $degree->number_degree }}
                                            </option>
                                        @endforeach
                                    </select>

                                    <button class="btn btn-outline-secondary" type="button" id="search_button">Buscar <i
                                            class="fa-solid fa-magnifying-glass" aria-hidden="true"></i></button>
                                </div>
                            </div>
                        </div>
                        <table class="table table-sm table-bordered border-success-subtle table-hover mt-3">
                            <thead class="table-success">
                                <tr>
                                    <th class="text-center">N°</th>
                                    <th class="text-center">DNI</th>
                                    <th class="text-center">NOMBRES</th>
                                    <th class="text-center">APELLIDOS</th>
                                    <th class="text-center">GRADO</th>
                                    <th class="text-center">SECCIÓN</th>
                                    <th class="text-center">EDITAR</th>
                                    <th class="text-center">ARCHIVAR</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($tutors as $index => $tutor)
                                    <tr>
                                        <td class="text-center">{{ $index + 1 }}</td>
                                        <td class="text-center">{{ $tutor->teacher_dni ?? 'Sin DNI' }}</td>
                                        <td class="text-center">{{ $tutor->teacher_name ?? 'Sin Nombre' }}</td>
                                        <td class="text-center">{{ $tutor->teacher_last_name ?? 'Sin Apellidos' }}</td>
                                        <td class="text-center">{{ $tutor->degree ?? 'Sin Grado' }}</td>
                                        <td class="text-center">{{ $tutor->name_section ?? 'Sin Sección' }}</td>
                                        <td class="text-center">
                                            <button class="btn btn-info btn-sm editTutorBtn" data-bs-toggle="modal"
                                                data-bs-target="#editModalTutor" data-dni="{{ $tutor->teacher_dni }}"
                                                data-name="{{ $tutor->teacher_name }} {{ $tutor->teacher_last_name }}"
                                                data-degree="{{ $tutor->degree }}"
                                                data-section="{{ $tutor->id_section }}">
                                                <i class="fas fa-edit"></i>
                                            </button>
                                        </td>
                                        <td class="text-center">
                                            <button class="btn btn-danger btn-sm deleteTutorBtn" data-bs-toggle="modal"
                                                data-bs-target="#deleteModalTutors{{ $tutor->id_tutor }}">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        @include('layouts._partials.footer')
        @include('admin.tutors.create')
        @include('admin.tutors.editTutor')
        @include('admin.tutors.delete')
        @include('components.alert-request')

        <!-- Modal de Alerta -->
        @if (!$hasActiveAcademicYear)
            <!-- Modal -->
            @if (empty($academicYears) || is_null($activeAcademicYearId))
               <x-alert-anio-0 />
            @endif
        @endif
    </div>
    <script>
        document.addEventListener("DOMContentLoaded", function() {

            // Captura todos los botones de edición
            const editButtons = document.querySelectorAll(".editTutorBtn");
            const filterSelect = document.getElementById("filter_select");
            const searchButton = document.getElementById("search_button");

            function filterTable() {
                let selectedDegree = filterSelect.value.toLowerCase();
                let rows = document.querySelectorAll("tbody tr");

                rows.forEach(row => {
                    let degreeCell = row.querySelector("td:nth-child(5)").textContent
                .toLowerCase(); // Columna de grado
                    if (selectedDegree === "" || degreeCell === selectedDegree) {
                        row.style.display = ""; // Mostrar fila
                    } else {
                        row.style.display = "none"; // Ocultar fila
                    }
                });
            }

            // Filtrar al hacer clic en el botón de búsqueda
            searchButton.addEventListener("click", filterTable);

            // Filtrar automáticamente cuando se cambia la selección del grado
            filterSelect.addEventListener("change", filterTable);

            editButtons.forEach(button => {
                button.addEventListener("click", function() {
                    // Obtener los datos del botón
                    const dni = this.getAttribute("data-dni");
                    const name = this.getAttribute("data-name");
                    const degree = this.getAttribute("data-degree");
                    const section = this.getAttribute("data-section");

                    // Llenar los campos del modal con los datos obtenidos
                    document.getElementById("edit_tutors_dni").value = dni;
                    document.getElementById("edit_tutors_name_last_name").value = name;
                    document.getElementById("edit_tutors_degree").value = degree;
                    document.getElementById("edit_tutors_section").value = section;

                    // Cargar las secciones correspondientes al grado seleccionado
                    loadSections(degree,
                    section); // Filtrar por el grado y seleccionar la sección actual
                });
            });


            // Función para cargar las secciones filtradas por el grado
            function loadSections(degreeId, selectedSectionId = null) {
                $('#edit_tutors_section').html('<option value="">Cargando...</option>');

                $.ajax({
                    url: '{{ route('tutors.getSections', ':id') }}'.replace(':id', degreeId),
                    type: 'GET',
                    success: function(sections) {
                        let options = '<option value="">Seleccione la sección</option>';
                        sections.forEach(section => {
                            let selected = selectedSectionId == section.id_section ?
                                'selected' : '';
                            options +=
                                `<option value="${section.id_section}" ${selected}>${section.name_section}</option>`;
                        });
                        $('#edit_tutors_section').html(options);
                    }
                });
            }
        });
    </script>



@endsection