@extends('layouts.plantillamovil')

@section('cdn')
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous">
    </script>
    <link rel="stylesheet" href="../resources/css/app.css">
    <script src="https://kit.fontawesome.com/b1f3d5c1f6.js" crossorigin="anonymous"></script>
    <script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.9/index.global.min.js'></script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            let formulario = document.querySelector("form");
            var calendarEl = document.getElementById('calendar');
            var calendar = new FullCalendar.Calendar(calendarEl, {

                initialView: 'dayGridMonth',
                locale: "es",

                headerToolbar: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,listWeek'
                },

                //

                events: "https://centrodeinformacion-isic-itsoeh.org.mx/calendario/mostrar",



                //

                dateClick: function(info) {
                    formulario.reset();
                    console.log('clicked on ' + info.dateStr);
                    // Seleccionamos los campos del formulario por su nombre
                    $("#text-inicio-c").val(info.dateStr); // Asigna el valor al campo de inicio
                    $("#text-termino-c").val(info.dateStr); // Asigna el valor al campo de termino
                    $("#evento").modal("show");

                },
                eventClick: function(info) {
                    formulario.reset();
                    console.log('clicked on ' + info.event.id);
                    //alert(info.event.id+" "+info.event.title+" "+info.event.end);
                    var id = info.event.id;
                    $.ajax({
                        url: 'https://centrodeinformacion-isic-itsoeh.org.mx/calendario/traer/' +
                            id,
                        type: 'GET',
                        success: function(eventos) {
                            $('#text-id-ce').val(eventos.EV_ID);
                            $('#text-nombre-ce').val(eventos.EV_NOMBRE);
                            $('#text-descripcion-ce').val(eventos.EV_DESCRIPCION);
                            $('#text-inicio-ce').val(eventos.EV_INICIO);
                            $('#text-termino-ce').val(eventos.EV_FIN);
                            $('#text-importe-ce').val(eventos.EV_IMPORTANTE);
                        }
                    });

                    $("#eventoed").modal("show");

                    // change the border color just for fun
                    info.el.style.borderColor = 'red';
                }

            });


            calendar.render();

            document.getElementById('btnEliminar').addEventListener('click', function() {
                var id = document.getElementById('text-id-ce').value;

                $.ajax({
                    url: 'https://centrodeinformacion-isic-itsoeh.org.mx/calendario/borrar/' + id,
                    type: 'GET',
                    success: function(response) {
                        console.log(response);
                    }
                });
            });
            document.getElementById("btnModificar").addEventListener("click", function() {
                const datos = {
                    'text-nombre-ce': $("#text-nombre-ce").val(),
                    'text-descripcion-ce': $("#text-descripcion-ce").val(),
                    'text-inicio-ce': $("#text-inicio-ce").val(),
                    'text-termino-ce': $("#text-termino-ce").val(),
                    'text-importe-ce': $("#text-importe-ce").val(),
                };

                const idEvento = $("#text-id-ce").val(); // Obtener el ID del evento

                axios.post(
                        `https://centrodeinformacion-isic-itsoeh.org.mx/calendario/modificar/${idEvento}`,
                        datos)
                    .then(
                        (respuesta) => {
                            $("#eventoed").modal(
                                "hide"); // Es posible que quieras cerrar el modal 'eventoed'
                            console.log("si lo hice");
                        }
                    )
                    .catch(
                        error => {
                            if (error.response) {
                                console.log(error.response.data);
                            }
                        }
                    )
            });


            document.getElementById("btnGuardar").addEventListener("click", function() {
                const datos = {
                    'text-nombre-c': $("#text-nombre-c").val(),
                    'text-descripcion-c': $("#text-descripcion-c").val(),
                    'text-inicio-c': $("#text-inicio-c").val(),
                    'text-termino-c': $("#text-termino-c").val(),
                    'text-importe-c': $("#text-importe-c").val(),
                };

                axios.post("https://centrodeinformacion-isic-itsoeh.org.mx/calendario/agregar", datos)
                    .then(
                        (respuesta) => {
                            $("#evento").modal("hide");
                            console.log("si lo hice");
                        }
                    ) 
                    .catch(
                        error => {
                            if (error.response) {
                                console.log(error.response.data);
                            }
                        }
                    )
            });
        });
        document.addEventListener('DOMContentLoaded', function() {
            axios.get('https://centrodeinformacion-isic-itsoeh.org.mx/calendario/mostrar')
                .then(function(response) {
                    console.log('Respuesta del servidor:', response);
                })
                .catch(function(error) {
                    console.error('Error al cargar los eventos:', error);
                });
        });
    </script>
@endsection
@section('content')
    @if (optional(Auth::user())->US_ROL == 'INVESTIGADOR')
        <div class="d-flex justify-content-center align-items-center">
            <!-- Botón para abrir el modal -->
            <div class="col">

                <div class="modal" id="evento" name="evento" data-bs-backdrop="static" data-bs-keyboard="false"
                    tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h1 class="modal-title fs-5" id="staticBackdropLabel">
                                    <span class="fa-solid fa-add"></span>
                                    Agregar Evento
                                </h1>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                    aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <form id="form" name="form" class="px-4 py-3" action="">
                                    @csrf
                                    <label for="text-nombre" class="form-label">Titulo</label>
                                    <input type="text" class="form-control" id="text-nombre-c" name="text-nombre-c"
                                        placeholder="Ingrese nombre de ubicacion">
                                    <div class="mb-3">
                                        <label for="text-descripcion-c" class="form-label">Descripcion:</label>
                                        <textarea name="text-descripcion-c" id="text-descripcion-c" cols="20" rows="3" class="form-control"></textarea>
                                    </div>
                                    <label for="text-inicio-c" class="form-label">Inicio</label>
                                    <input type="date" class="form-control" id="text-inicio-c" name="text-inicio-c"
                                        placeholder="Ingrese el dia de comienzo" value="">
                                    <label for="text-termino-c" class="form-label">Fin</label>
                                    <input type="date" class="form-control" id="text-termino-c" name="text-termino-c"
                                        placeholder="Ingrese el dia de finalizacion">
                                    <label for="text-importe-c" class="form-label">Importante</label>
                                    <select class="form-select" id="text-importe-c" name="text-importe-c">
                                        <option value="S">Sí</option>
                                        <option value="N">No</option>
                                    </select>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary"
                                            data-bs-dismiss="modal">Cancelar</button>
                                        <button type="submit" class="btn btn-success" id="btnGuardar">Guardar</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    @endif
    <!-- Botón para abrir el modal -->
    <div class="col">
        @if (optional(Auth::user())->US_ROL == 'INVESTIGADOR')
            <div class="modal" id="eventoed" name="eventoed" data-bs-backdrop="static" data-bs-keyboard="false"
                tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title fs-5" id="staticBackdropLabel">
                                <span class="fa-solid fa-add"></span>
                                Editar Evento
                            </h1>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <form id="forme" name="forme" class="px-4 py-3" action="">
                                @csrf
                                <label for="text-nombre-ce" class="form-label">Titulo</label>
                                <input type="text" class="form-control" id="text-nombre-ce" name="text-nombre-ce"
                                    placeholder="Ingrese nombre de ubicacion">
                                <div class="mb-3">
                                    <label for="text-descripcion-ce" class="form-label">Descripción:</label>
                                    <textarea name="text-descripcion-ce" id="text-descripcion-ce" cols="20" rows="3" class="form-control"></textarea>
                                </div>
                                <label for="text-inicio-ce" class="form-label">Inicio</label>
                                <input type="date" class="form-control" id="text-inicio-ce" name="text-inicio-ce"
                                    placeholder="Ingrese el dia de comienzo" value="">
                                <label for="text-termino-ce" class="form-label">Fin</label>
                                <input type="date" class="form-control" id="text-termino-ce" name="text-termino-ce"
                                    placeholder="Ingrese el dia de finalizacion">
                                <label for="text-importe-ce" class="form-label">Importante</label>
                                <select class="form-select" id="text-importe-ce" name="text-importe-ce">
                                    <option value="S">Sí</option>
                                    <option value="N">No</option>
                                </select>
                                <div class="modal-footer">

                                    <button type="submit" class="btn btn-primary" id="btnModificar">Modificar</button>
                                    <input type="hidden" class="form-control" id="text-id-ce" name="text-id-ce">
                                    <button type="submit" class="btn btn-danger" id="btnEliminar">Eliminar</button>
                                    <button type="button" class="btn btn-secondary"
                                        data-bs-dismiss="modal">Cancelar</button>

                                </div>
                            </form>
                        </div>
                    </div>
                </div>
        @endif
    </div>
    </div>
    </div>

    <section class="row">
        <div class ="container">
            <div id='calendar'></div>
        </div>
    </section>


@endsection