@extends('layouts.app')

@section('title', 'Calendario')

@section('content')

    <style>
        #calendar {
            height: 900px;
        }

        i {
            font-size: 1.3rem;
        }

        @media (max-width: 768px) {
            #calendar {
                height: 500px;
            }
            
            .fc-daygrid-event {
                font-size: 0.5rem;
            }

            i {
                font-size: 1rem;
            }
        }

        .fc-daygrid-event {
            background-color:rgba(71, 179, 35, 0.51);
            margin: 0.20rem !important;
            color: #ffff !important;
            border-radius: 5px;
            padding: 5px;
            text-align: center;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            font-size: 0.9rem;
            font-weight: 500;
            margin: 0.2rem 0;
            cursor: pointer;
            transition: background-color 0.3s ease;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(71, 179, 35, 0.51);
        }

        a {
            color: #333 !important;
            text-decoration: none !important;
        }

        .fc-daygrid-event:hover {
            background-color:rgb(120, 129, 138);
        }

        .fc-daygrid-event.fc-event-selected {
            background-color: rgb(120, 129, 138) !important;
        }

        .fc-daygrid-event.fc-event-selected:hover {
            background-color: rgb(120, 129, 138) !important;
        }
    </style>

    <div class="container-fluid">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h1>Calendario</h1>

            @php 
                $identifier = 'CALENDARIO EDITORIAL';
            @endphp

            <form action="{{ route('tableros.clearSession', ['identifier' => 'CALENDARIO EDITORIAL', 'identifierCalendario' => 'CALENDARIO']) }}" method="GET">
                @csrf
                <button type="submit" class="btn btn-secondary">Volver</button>
            </form>
        </div>
        <br>
        
        <div id="calendar"></div>

    </div>

    <div class="modal fade" id="eventModal" tabindex="-1" role="dialog" aria-labelledby="editDateLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header justify-content-between">
                        <h5 class="modal-title">Ver Contenido</h5>
                        <span class="cerrar-modal" data-dismiss="modal" aria-label="Close" aria-hidden="true" style="cursor: pointer;">
                            <i class="bi bi-x-lg cerrar-modal"></i>
                        </span>
                    </div>

                <div class="modal-body">
                    <div class="col-12 mb-3">
                        <div class="card" style="border: none;">
                            <div class="card-body">
                                <div id="contenido-img-container" style="display: none;">
                                    <img id="contenido-img" class="card-img-top imagen" alt="Imagen" style="max-height: 50rem !important;">
                                    <br><br>
                                </div>

                                <div class="d-flex justify-content-between align-items-baseline">
                                    <h6 class="card-title" id="contenido-title">
                                        <!-- Icono y título se rellenarán con JS -->
                                    </h6>
                                    <small class="text-muted" id="contenido-fecha" style="font-size: 0.8rem; cursor:pointer;">
                                        <!-- Fecha -->
                                    </small>
                                </div>

                                <p class="card-text" id="contenido-description">
                                    <!-- Descripción -->
                                </p>

                                <div class="d-flex justify-content-center mt-3">
                                    <button type="button" class="btn btn-secondary cerrar-modalBtn">Cerrar</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            let calendarEl = document.getElementById('calendar');

            let calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'dayGridMonth',
                locale: 'es',
                events: @json($contenidos),
                headerToolbar: {
                    left: 'prev',
                    center: 'title',
                    right: 'next'
                },
                eventClick: function(info) {
                    console.log(info);

                    const contenido = info.event._def.extendedProps;
                    const fechaObj = new Date(info.event._instance.range.start);

                    // Formato para el input tipo datetime-local
                    const year = fechaObj.getFullYear();
                    const month = String(fechaObj.getMonth() + 1).padStart(2, '0');
                    const day = String(fechaObj.getDate()).padStart(2, '0');
                    const hours = String(fechaObj.getHours()).padStart(2, '0');
                    const minutes = String(fechaObj.getMinutes()).padStart(2, '0');
                    const formattedFecha = `${year}-${month}-${day}T${hours}:${minutes}`;

                    // Formato bonito para visualización
                    const fechaBonita = fechaObj.toLocaleDateString('es-ES') + ' ' + fechaObj.toLocaleTimeString('es-ES', { hour: '2-digit', minute: '2-digit' });
                    document.getElementById('contenido-fecha').innerText = fechaBonita;

                    document.getElementById('contenido-description').innerText = contenido.description || '';

                    // Imagen si existe
                    if (contenido.path) {
                        const imgUrl = `https://s3.eu-south-2.amazonaws.com/autoritas.kanboard/${contenido.path}`;
                        const img = document.getElementById('contenido-img');
                        img.src = imgUrl;
                        document.getElementById('contenido-img-container').style.display = 'block';
                    } else {
                        document.getElementById('contenido-img-container').style.display = 'none';
                    }

                    // Mostrar modal de edición si corresponde
                    const modalBootstrap = new bootstrap.Modal(document.getElementById('eventModal'));
                    modalBootstrap.show();
                },
                eventContent: function(arg) {
                    return {
                        domNodes: [(() => {
                            const iconMap = {'TW': 'twitter-x', 'TWITTER': 'twitter-x', 'FB': 'facebook', 'FACEBOOK': 'facebook', 'IG': 'instagram', 'INSTAGRAM': 'instagram', 'YT': 'youtube', 'YOUTUBE': 'youtube', 'WA': 'whatsapp', 'WHATSAPP': 'whatsapp', 'TIKTOK': 'tiktok', 'LINKEDIN': 'linkedin', 'PINTEREST': 'pinterest', 'NEWSLETTER': 'envelope', 'BLOG': 'newspaper', 'IN': 'file-play-fill', 'THREADS': 'threads', 'GOOGLE': 'google'};

                            const category = arg.event._def.extendedProps.category || '';
                            const upperCategory = category.toUpperCase();
                            const matchedKey = Object.keys(iconMap).find(key => upperCategory.includes(key));
                            const icon = matchedKey ? iconMap[matchedKey] : null;

                            const wrapper = document.createElement('span');

                            if (icon) {
                                const iconElement = document.createElement('i');
                                iconElement.className = `bi bi-${icon}`;
                                iconElement.style.marginRight = '5px';
                                wrapper.appendChild(iconElement);
                            } else {
                                const defaultIcon = document.createElement('i');
                                defaultIcon.className = 'bi bi-pin-angle';
                                defaultIcon.style.marginRight = '5px';
                                wrapper.appendChild(defaultIcon);
                            }


                            return wrapper;
                        })()]
                    };

                }
            });

            calendar.render();

            // Cerrar el modal al hacer clic en el icono de cerrar
            const cerrarModal = document.querySelector('.cerrar-modal');
            cerrarModal.addEventListener('click', function() {
                const modalBootstrap = bootstrap.Modal.getInstance(document.getElementById('eventModal'));
                modalBootstrap.hide();
            });

            const cerrarModalBtn = document.querySelector('.cerrar-modalBtn');
            cerrarModalBtn.addEventListener('click', function() {
                const modalBootstrap = bootstrap.Modal.getInstance(document.getElementById('eventModal'));
                modalBootstrap.hide();
            });
        });
    </script>
@endsection