@php
    $permisoActividades = auth()->user()->can('Actividades - Visor') || auth()->user()->can('Actividades - Editor')
@endphp
@if($permisoActividades)
@extends('layouts/app')
@section('tituloModulo','ACTIVIDADES')
@section('contenido')
<link href="https://cdn.jsdelivr.net/npm/@fullcalendar/core@6.1.4/main.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@6.1.4/main.min.css" rel="stylesheet">
    <style>
        .fc .fc-col-header-cell-cushion {
    display: inline-block;
    padding: 2px 4px;
    }
    .fc .fc-col-header-cell-cushion { /* needs to be same precedence */
        padding-top: 5px; /* an override! */
        padding-bottom: 5px; /* an override! */
    }
    </style>
<div class="card">
    <div class="card-body">
        <div class="container mt-4">
            <h2>Calendario</h2>
            <div id="calendar" class="d-none d-md-block"></div>
            <div id="mobileView" class="d-block d-md-none"> <!-- Este div se muestra solo en dispositivos móviles -->
                <div class="datatable-wrapper datatable-loading no-footer sortable searchable fixed-columns">
                    <div class="datatable-container">
                        <table class="table datatable datatable-table">
                            <thead>
                                <tr class="text">
                                    <th data-sortable="true" scope="col">CLIENTE</th>
                                    <th data-sortable="true" scope="col">ABOGADO</th>
                                    <th data-sortable="true" scope="col">FECHA DEL EVENTO</th>
                                    <th data-sortable="true" scope="col">NÚMERO DE CASO</th>
                                    <th data-sortable="true" scope="col">NÚMERO DE EXPENDIENTE</th>
                                    <th data-sortable="true" scope="col">NOMBRE DE REFERENCIA</th>
                                    <th data-sortable="true" scope="col">TITULO</th>
                                    <th data-sortable="true" scope="col">DESCRIPCIÓN</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($eventos as $item)
                                <tr>
                                    <td data-title="CLIENTE">{{ $item->cliente }}</td>
                                    <td data-title="ABOGADO">{{ $item->abogado }}</td>
                                    <td data-title="FECHA DEL EVENTO">{{ date("d/m/Y", strtotime($item->start)) }}</td>
                                    <td data-title="NÚMERO DE CASO">{{ $item->nombre_referencia_caso }}</td>
                                    <td data-title="NÚMERO DE EXPENDIENTE">{{ $item->numero_expendiente_caso }}</td>
                                    <td data-title="NOMBRE DE REFERENCIA">{{ $item->cliente }}</td>
                                    <td data-title="TITULO">{{ $item->title }}</td>
                                    <td data-title="DESCRIPCIÓN">{{ $item->descripcion_caac }}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    <div class="datatable-bottom">
                        <nav class="datatable-pagination">
                            <ul class="datatable-pagination-list"></ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Modal para mostrar detalles del evento -->
<div class="modal fade" id="eventModal" tabindex="-1" aria-labelledby="eventModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="eventModalLabel">Detalles del Evento</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <table class="table table-bordered">
                    <tbody>
                        <tr>
                            <th scope="row"><strong>Fecha del evento:</strong></th>
                            <td><span id="eventStart"></span></td>
                        </tr>
                        <tr>
                            <th scope="row"><strong>Actividad:</strong></th>
                            <td><span id="eventTitle"></span></td>
                        </tr>
                        <tr>
                            <th scope="row"><strong>Descripción:</strong></th>
                            <td><span id="descripcion"></span></td>
                        </tr>
                        <tr>
                            <th scope="row"><strong>Cliente:</strong></th>
                            <td><span id="cliente"></span></td>
                        </tr>
                        <tr>
                            <th scope="row"><strong>Abogado:</strong></th>
                            <td><span id="abogado"></span></td>
                        </tr>
                        <tr>
                            <th scope="row"><strong>Nombre de referencia:</strong></th>
                            <td><span id="referencia"></span></td>
                        </tr>
                        <tr>
                            <th scope="row"><strong>Número de caso:</strong></th>
                            <td><span id="numeroCaso"></span></td>
                        </tr>
                        <tr>
                            <th scope="row"><strong>Número de expediente:</strong></th>
                            <td><span id="numeroExpendiente"></span></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>
<!-- Incluir JS de FullCalendar desde CDN -->
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.js'></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var calendarEl = document.getElementById('calendar');
            var calendar = new FullCalendar.Calendar(calendarEl, {
                //initialView: 'dayGridMonth'
                locale: 'es', // Configura el idioma a español
                headerToolbar: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,timeGridDay'
                },
                buttonText: {
                    today:    'Hoy',
                    month:    'Mes',
                    week:     'Semana',
                    day:      'Día',
                    list:     'Lista'
                },
                views: {
                    dayGridMonth: { // name of view
                        titleFormat: { year: 'numeric', month: '2-digit', day: '2-digit' }
                        // other view-specific options here
                    }
                },
                events: '{{Request::root()}}/actividades/eventos', // Aquí es donde se carga la ruta del controlador
                eventClick: function(info) {
                    // Muestra el modal y los datos del evento
                    $('#abogado').text(info.event.extendedProps.abogado);
                    $('#cliente').text(info.event.extendedProps.cliente);
                    $('#descripcion').text(info.event.extendedProps.descripcion_caac);
                    $('#referencia').text(info.event.extendedProps.nombre_referencia_caso);
                    $('#numeroCaso').text(info.event.extendedProps.numero_caso);
                    $('#numeroExpendiente').text(info.event.extendedProps.numero_expendiente_caso);
                    $('#eventTitle').text(info.event.title);
                    $('#eventStart').text(info.event.start.toLocaleDateString());
                    $('#eventModal').modal('show');
                }
            });
            calendar.render();
        });
    </script>
@endsection
@endif