@extends('layouts.admin')

@section('breadcrumb')
<div class="container">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{ url('admin') }}">Inicio</a></li>
        <li class="breadcrumb-item active" aria-current="page">Calendario</li>
    </ol>
</div>
@endsection

@section('content')
<style>
	@media (max-width: 768px) {
    .modal-dialog {
        width: 100% !important;
        margin: 1.75rem auto;
    }
}
@media (max-width: 991px) {
            .table_movil table {
                overflow-x: auto;
                display: block;
            }
        }
</style>
<style>
    .fc-col-header-cell {
        background-color: #0b0230;
    }
</style>
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-10">
            <div class="card">
                <div class="card-header"><b>Calendario</b></div>
                <div class="card-body">
                    <div id="calendar"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="eventModal" tabindex="-1" role="dialog" aria-labelledby="eventModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="eventModalLabel">Detalles de la Audiencia</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" id="cerrarModalBtn">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="eventDetails"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" id="cerrarModalBtnFooter">Cerrar</button>
                <a id="eventLink" href="#" class="btn btn-primary">Ver Solicitud</a>
            </div>
        </div>
    </div>
    </div>
</div>
<script src='https://cdn.jsdelivr.net/npm/fullcalendar/index.global.min.js'></script>
@php
use Illuminate\Support\Facades\Auth;
@endphp
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const calendarEl = document.getElementById('calendar');
    
        const calendar = new FullCalendar.Calendar(calendarEl, {
            initialView: 'timeGridWeek',
            allDaySlot: false,
            locale: 'es',
            events: @json(array_merge($events, $dataFeriados)),
            views: {
            timeGrid: {
                dayHeaderFormat: { weekday: 'short', day: 'numeric', omitCommas: true } // formato abreviado para todos los dispositivos por defecto
                }
            },
            windowResize: function(view) {
                if (document.documentElement.clientWidth >= 768) {
                    calendar.setOption('views', {
                        timeGrid: {
                            dayHeaderFormat: { weekday: 'long', day: 'numeric', omitCommas: true } // formato largo cuando la pantalla es más ancha
                        }
                    });
                } else {
                    calendar.setOption('views', {
                        timeGrid: {
                            dayHeaderFormat: { weekday: 'short', day: 'numeric', omitCommas: true } // mantener formato corto para pantallas estrechas
                        }
                    });
                }
            },
            buttonText: { today: 'Hoy' },
            eventDidMount: function(info) {
                if (info.event.extendedProps.tipo === 'feriado') {
                    info.el.style.pointerEvents = 'none';
                }
            },
            eventClick: function(info) {
                if (info.event.extendedProps.tipo !== 'feriado') {
                    const modal = document.getElementById('eventModal');
                    const eventDetails = document.getElementById('eventDetails');
                    const eventLink = document.getElementById('eventLink');
    
                    eventDetails.innerHTML = '';
                    
                    const fechaFormateada = obtenerFechaFormateada(info.event.start);
                    @php
                        if (Auth::user()->hasRol('admin')) {
                    @endphp
                            eventDetails.innerHTML += `
                                <p><strong>Sujeto Pasivo: </strong> ${info.event.extendedProps.nombrePasivo}</p>
                            `;
                    @php    
                        }
                    @endphp
    
                    eventDetails.innerHTML += `
                        <p><strong>Sujeto Activo: </strong> ${info.event.extendedProps.nombre}</p> 
                        <p><strong>Tema:</strong> ${info.event.extendedProps.tema}</p>
                        <p><strong>Fecha:</strong> ${fechaFormateada}</p>
                        <p><strong>Lugar:</strong> ${info.event.extendedProps.lugar}</p>
                    `;
                    eventLink.href = "{{ route('admin.solicitud.ver', ['id' => ':id']) }}".replace(':id', info.event.extendedProps.enlace);
//                    eventLink.href = info.event.extendedProps.enlace;
                    $('#eventModal').modal('show');
                }
            }
        });
    
        calendar.render();
    
        function obtenerFechaFormateada(fecha) {
            const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric' };
            return fecha.toLocaleString('es-ES', options);
        }
    
        document.getElementById('cerrarModalBtn').addEventListener('click', function() {
            $('#eventModal').modal('hide');
        });
    
        document.getElementById('cerrarModalBtnFooter').addEventListener('click', function() {
            $('#eventModal').modal('hide');
        });
    });
    
    document.getElementById('cerrarModalBtn').addEventListener('click', function() {
        $('#eventModal').modal('hide');
    });
</script>
@endsection