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

    <link href="assets/plugins/custom/fullcalendar/fullcalendar.bundle.css" rel="stylesheet" type="text/css" />
    <link href="assets/plugins/custom/fastColorPicker/fastColorPicker.css" rel="stylesheet" type="text/css" />

    <style>
        .fc-title {
            color: white !important;
        }
        .fc-time {
            color: white !important;
        }
    </style>
@endsection

@section("contenido")
    <div class="card card-custom">
        <div class="card-body">
            <div id="kt_calendar"></div>
        </div>
    </div>
@endsection

@section("modal")
    @include("admin.calendario.modal.administativo")
@endsection

@section("scripts")

    <script src="assets/plugins/custom/fullcalendar/fullcalendar.bundle.js"></script>
    <script src="assets/plugins/custom/fullcalendar/es.js"></script>
    <script src="assets/plugins/custom/fastColorPicker/fastColorPicker.js"></script>
    <script>
        "use strict";
        var calendar;
        let tipo_calendario=1;
        let KTCalendarBasic = {
            init: function() {
                let e = moment().startOf("day"),
                    t = e.format("YYYY-MM"),
                    i = e.clone().subtract(1, "day").format("YYYY-MM-DD"),
                    n = e.format("YYYY-MM-DD"),
                    r = e.clone().add(1, "day").format("YYYY-MM-DD"),
                    o = document.getElementById("kt_calendar");
                calendar = new FullCalendar.Calendar(o, {
                    plugins: [ "interaction", "dayGrid", "timeGrid", "list"],
                    isRTL: KTUtil.isRTL(),
                    header: {
                        left: "prev,next today",
                        center: "title",
                        right: "dayGridMonth,timeGridWeek,timeGridDay"
                    },
                    height: 800,
                    contentHeight: 780,
                    aspectRatio: 3,
                    nowIndicator: !0,
                    now: n + "T09:25:00",
                    views: {
                        dayGridMonth: {buttonText: "Mes"},
                        timeGridWeek: {buttonText: "Semana"},
                        timeGridDay: {buttonText: "Día  "}
                    },
                    defaultView: "dayGridMonth",
                    defaultDate: n,
                    disableDragging: true,
                    editable: false,
                    eventLimit: 10,
                    navLinks: !0,
                    events: "{{ route('admin::calendario.getEventos',":tipo_calendario") }}".replace(":tipo_calendario",tipo_calendario),
                    locale: "es",

                    // Nuevo código para abrir el modal al hacer clic en un día
                    @can("Calendario administrativo agregar")
                        dateClick: function(info) {
                        $("#frmEvento").trigger("reset");

                        let url_insertar = "{{route('admin::evento.insertar',":tipo_calendario")}}".replace(':tipo_calendario', tipo_calendario);
                        $("#frmEvento").attr('action', url_insertar);

                        let fechaSeleccionada = info.dateStr; // Obtiene la fecha clicada en formato YYYY-MM-DD
                        let fechaIncio= fechaSeleccionada + "T07:00"; // Agrega la hora 07:00 AM al formato
                        let fechaFinal= fechaSeleccionada + "T18:00"; // Agrega la hora 07:00 AM al formato

                        $('#start').val(fechaIncio); // Asigna la fecha clicada al input oculto
                        $('#end').val(fechaFinal); // Asigna la fecha clicada al input oculto
                        $('#collapseOne').collapse('hide');

                        $('#btnBorrar').attr('data-evento', "");
                        $('#btnBorrar').css('display', 'none');
                        $('#modalEvento').modal('show'); // Muestra el modal
                    },
                    @endcan
                    @can("Calendario administrativo editar")
                    eventClick: function(info) {
                        let evento = info.event;

                        let id = evento.id;
                        let url_editar = "{{route('admin::evento.editar',":id")}}".replace(':id', id);
                        $("#frmEvento").attr('action', url_editar);

                        let titulo = evento.title;
                        let color = evento.backgroundColor;
                        let descripcion = evento.extendedProps.descripcion;
                        let start = moment(evento.start).format('YYYY-MM-DDTHH:mm');
                        let end = moment(evento.end).format('YYYY-MM-DDTHH:mm');

                        $('#titulo').val(titulo);
                        $('#descripcion').val(descripcion);
                        $('#start').val(start);
                        $('#end').val(end);
                        $('#colorPicker').fastColorPicker('setColor', color);

                        $.ajax({
                            url: "{{route('admin::evento.getUsuariosCompartidos',":id")}}".replace(':id', id),
                            method: 'GET',
                            success: function(usuariosCompartidos) {

                                usuariosCompartidos.forEach(function(userId) {
                                    $('#ck_' + userId).prop('checked', true);
                                });

                                if (usuariosCompartidos.length > 0) {
                                    $('#collapseOne').collapse('show');
                                }else {
                                    $('#collapseOne').collapse('hide');
                                }
                            }
                        });

                        $('#btnBorrar').attr('data-evento', id);
                        $('#btnBorrar').css('display', 'block');
                        $('#modalEvento').modal('show');
                    }
                    @endcan
                });
                calendar.render();
            }
        };

        let nuevoEvento;

        $(document).ready((function() {

                KTCalendarBasic.init();

                let colorArray = ['#1e88e5', '#7460ee', '#26c6da', '#2f3d4a', '#e5ae0a', '#dc3545'];
                let colorPicker= $('#colorPicker').fastColorPicker(colorArray);

                //dame el on submit del form con ajax
                $('#frmEvento').on('submit', function(e){
                    e.preventDefault();
                    let form = $(this);
                    let data = form.serialize();


                    //ajax
                    $.ajax({
                        url: form.attr('action'),
                        type: 'POST',
                        data: data,
                        success: function(response){
                            if(response){
                                $('#modalEvento').modal('hide');
                                calendar.refetchEvents();
                            }else{
                                Swal.fire({icon: 'error', title: 'Error', text: response.message});
                            }
                        },
                        error: function(error){
                            Swal.fire({icon: 'error', title: 'Error', text: 'Ocurrió un error al crear el evento'});
                        }
                    });

                });

                //on change .colorPickerCustom
                $(document).on('change', '.colorPickerCustom', function() {
                    let color = $(this).val();
                    $(".modal-header").css('background-color', color);
                });

                $(document).on('click', '#btnBorrar', function() {
                    Swal.fire({
                        title: '¿Está seguro de eliminar evento?',
                        icon: 'question',
                        showCancelButton: true,
                        confirmButtonColor: '#a80707',
                        cancelButtonColor: '#a1a1a1',
                        cancelButtonText: 'Cancelar',
                        confirmButtonText: 'Sí, Eliminar'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            let url="{{route("admin::evento.borrar", "id")}}".replace("id", $(this).attr('data-evento'));
                            let ajax=$.ajax({
                                url: url,
                                type: 'delete',
                                dataType:"json",
                                headers: {
                                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                },
                            });
                            ajax.done(function(response) {
                                if(response){
                                    $('#modalEvento').modal('hide');
                                    calendar.refetchEvents();
                                }else{
                                    Swal.fire({icon: 'error', title: 'Error', text: response.message});
                                }
                            });
                            ajax.fail(function(error) {
                                console.error('Error en la solicitud AJAX', error);
                            });
                        }
                    });

                });





            })
        );

    </script>
@endsection