@extends("admin.layout.layout")
@section("styles")
    @php
        $titulo = "Agenda";
        $modulo = "Agenda";
        $vista="Programar";
    @endphp
    <title>{{getenv("APP_NAME")}} | {{$titulo }} {{$vista}}</title>
@endsection

@section("contenido")
    <div class="row">

        <div class="card mb-5 mb-xxl-12">
            <div class="card-body pb-0">
                @if ($errors->any())
                    <div class="alert alert-danger">
                        <h4>El registro tiene los siguientes errores.</h4>
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
                @if (session('success'))
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        <strong>{{ session('success') }}</strong>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif
            </div>
        </div>




        <div class="card mb-2 col-md-4">
            <div class="card-body">
                <label for="fecha">
                    <span class="fs-6"><b>Escoja un fecha</b></span>
                </label>
                <input type="date" class="form-control" name="fecha" id="fecha">
            </div>

        </div>
        <div id="spinner" style="display: none; text-align: center;">
            <i class="fas fa-spinner fa-spin" style="font-size: 2em; color: #007bff;"></i>
        </div>


        <div class="d-flex  flex-wrap" id="citasContainer"></div>
    </div>



    <div class="modal fade" id="modalAgendar" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Crear estructura </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="frmAccion" method="post" action="{{ route('admin::agenda.insertar.estructura') }}">
                    @csrf
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="fechaAgendar" class="form-label">Fecha</label>
                            <input type="date" class="form-control" id="fechaAgendar" name="fechaAgendar">
                        </div>
                        <div class="mb-3">
                            <label for="funcionarios" class="form-label">Funcionarios</label>
                            <input type="number" class="form-control" id="funcionarios" name="funcionarios" value="1">
                        </div>
                        <div class="mb-3">
                            <label for="horaInicio" class="form-label">Hora de Inicio</label>
                            <input type="time" class="form-control" id="horaInicio" name="horaInicio" value="07:00">
                        </div>
                        <div class="mb-3">
                            <label for="horaFin" class="form-label">Hora de Fin</label>
                            <input type="time" class="form-control" id="horaFin" name="horaFin" value="16:00">
                        </div>
                        <div class="mb-3">
                            <label for="intervalo" class="form-label">Intervalo en  minutos</label>
                            <input type="number" class="form-control" id="intervalo" name="intervalo" >
                        </div>
                        <lablel id="citasPosibles">0</lablel>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                        <button type="submit" id="bnt_submit" class="btn btn-success">Crear agenda</button>
                    </div>
                </form>

            </div>
        </div>
    </div>
@endsection

@section("scripts")
    @vite('resources/js/global/validaciones.js')

    <script>
        $( document ).ready(function() {
            $('#fecha').on('change', function () {
                let fecha = $(this).val();
                cargarFecha(fecha);
            });

            $(document).on('click', '.borrarCita', function(e) {
                let id = $(this).val();
                let fecha = $("#fecha").val();
                let url="{{route('admin::agenda.eliminar.estructura',":id")}}";
                url = url.replace(":id", id);

                $(this).prop('disabled', true);

                $.ajax({
                    url: url,
                    type: 'DELETE',
                    dataType: 'json',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        cargarFecha(fecha);
                    },
                    error: function(error) {
                        console.error('Error al eliminar la estructura de la agenda', error);
                    }
                });
            });

            $('#fechaAgendar, #horaInicio, #horaFin, #intervalo, #funcionarios').on('change', function () {
                // Obtén los valores de los campos
                let fechaInicio = $('#fechaAgendar').val();
                let horaInicio = $('#horaInicio').val();
                let horaFin = $('#horaFin').val();
                let intervalo = parseInt($('#intervalo').val());
                let funcionarios = parseInt($('#funcionarios').val());

                // Validaciones y cálculos
                if (fechaInicio && horaInicio && horaFin && !isNaN(intervalo) && intervalo > 0 && funcionarios > 0) {
                    let fechaInicioCompleta = new Date(fechaInicio + ' ' + horaInicio);
                    let fechaFinCompleta = new Date(fechaInicio + ' ' + horaFin);
                    let tiempoTotal = fechaFinCompleta - fechaInicioCompleta;

                    // Calcula la cantidad de citas posibles
                    let citasPosibles = Math.floor(tiempoTotal / (intervalo * 60000));

                    // Multiplica por la cantidad de funcionarios
                    let citasTotales = citasPosibles * funcionarios;

                    // Muestra la cantidad de citas totales en el span
                    $('#citasPosibles').text('Citas posibles por funcionario: ' + citasPosibles + '. Citas totales: ' + citasTotales);
                } else {
                    // Si falta algún dato, muestra un mensaje indicando que se necesitan completar los campos
                    $('#citasPosibles').text('Completa todos los campos para calcular citas posibles');
                }
            });


            $(document).on('submit', '#frmAccion', function(e) {
                e.preventDefault()
                let fecha = $("#fecha").val();

                let ajax=$.ajax({
                    type: "POST",
                    url: this.action,
                    dataType: "json",
                    method: "post",
                    data: $(this).serialize(),
                })
                ajax.done(function(response) {
                    cargarFecha(fecha)
                    $('#modalAgendar').modal('hide');

                });
            });


            function cargarFecha(fecha){
                $("#citasContainer").empty();
                $("#spinner").show();
                $("#intervalo").val(0);
                let url="{{route('admin::agenda.getXFecha',":fecha")}}";
                url = url.replace(":fecha", fecha);
                let ajax=$.ajax({
                    type: "GET",
                    url: url,
                    dataType: "json",
                })
                ajax.done(function(response) {
                    $("#spinner").hide();
                    if (response.length === 0) {
                        $("#fechaAgendar").val(fecha);
                        $('#modalAgendar').modal('show');
                    } else {
                        $.each(response, function(index, cita) {
                            let borrarButtonHtml = '';

                            if (cita.disponible) {
                                borrarButtonHtml = `<button type="button" class="btn btn-danger btn-sm float-end borrarCita" value="${cita.id}">Borrar</button>`;
                            }

                            let cardHtml = `
                                 <div class="card col-md-3 mb-3 mx-1 ${cita.disponible ? 'bg-success' : 'bg-secondary'}">
                                    <div class="card-body">
                                        ${borrarButtonHtml}
                                        <div class="row">
                                            <div class="col-md-6">
                                                <label>Fecha: ${cita.fecha}</label>
                                            </div>
                                            <div class="col-md-6">
                                                <label>Hora: ${cita.hora}</label>
                                            </div>
                                        </div>
                                       <div class="row">
                                         ${cita.disponible ? '<label>Disponible</label>' : `<label>Estudiante: ${cita.matricula.estudiante.nombre_completo}</label>`}
                                        </div>
                                    </div>
                                </div>`;
                            $("#citasContainer").append(cardHtml);
                            $('#citasPosibles').text(0);

                            $("#bnt_submit").prop("disabled", false);
                        });
                    }
                });
                ajax.fail(function (jqXHR, textStatus, errorThrown) {
                    console.error('Error en la petición AJAX', errorThrown);
                    $("#spinner").hide();
                });
            }
        });
    </script>
@endsection