@extends('layouts.app')

@section('title', 'Calendario · Comercio')

@section('content')
<div class="container py-3" style="max-width: 1100px;">
    {{-- Header mobile-first --}}
    <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center gap-2 mb-3">
        <div>
            <h1 class="h4 fw-bold mb-1">Calendario</h1>
            <div class="text-muted small">Vista mensual (adaptada a smartphone)</div>
        </div>

        <div class="d-grid d-md-flex gap-2 w-100 w-md-auto">
            <a class="btn btn-outline-secondary w-100 w-md-auto" href="{{ route('comercio.eventos.index') }}">
                Gestionar eventos
            </a>
            <a class="btn btn-primary w-100 w-md-auto" href="{{ route('comercio.eventos.create') }}">
                + Crear evento
            </a>
        </div>
    </div>

    <div class="card border-0 shadow-sm rounded-4">
        <div class="card-body p-2 p-md-3">
            <div id="calendar"></div>
        </div>
    </div>
</div>

{{-- FullCalendar --}}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.css">
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.js"></script>

<style>
    /* Altura y respiración */
    #calendar .fc-view-harness { min-height: 70vh; }

    /* Ajustes mobile para vista mensual */
    @media (max-width: 576px) {
        .fc .fc-toolbar { gap: .25rem; }
        .fc .fc-toolbar-title { font-size: 1.05rem; }

        .fc .fc-button {
            padding: .30rem .45rem;
            font-size: .82rem;
        }

        /* Reduce el padding interno del grid */
        .fc .fc-daygrid-day-frame {
            padding: 2px;
        }

        /* Números del día un poco más compactos */
        .fc .fc-daygrid-day-number {
            font-size: .82rem;
            padding: 2px 4px;
        }

        /* Eventos más compactos */
        .fc .fc-daygrid-event {
            margin-top: 2px;
        }

        .fc .fc-daygrid-event .fc-event-title {
            font-size: .78rem;
            font-weight: 600;
        }

        /* “+X más” más visible/tocable */
        .fc .fc-daygrid-more-link {
            font-size: .78rem;
            padding: 2px 4px;
            border-radius: 8px;
        }

        /* Popover más ancho en móvil */
        .fc .fc-popover {
            max-width: calc(100vw - 20px);
        }
    }
</style>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const calendarEl = document.getElementById('calendar');
    const isMobile = window.matchMedia('(max-width: 576px)').matches;

    const calendar = new FullCalendar.Calendar(calendarEl, {
        locale: 'es',
        height: 'auto',

        // ✅ Siempre mensual
        initialView: 'dayGridMonth',

        // ✅ Toolbar compacto en móvil
        headerToolbar: isMobile
            ? { left: 'prev,next', center: 'title', right: 'today' }
            : { left: 'prev,next today', center: 'title', right: 'dayGridMonth,timeGridWeek,timeGridDay' },

        // ✅ Para que el mes sea usable en pantallas chicas
        fixedWeekCount: false,             // no forzar 6 semanas si no es necesario
        showNonCurrentDates: false,        // menos ruido visual
        dayMaxEvents: isMobile ? 2 : true, // limita eventos por día en móvil

        // Carga eventos
        events: {
            url: "{{ route('comercio.calendario.events') }}",
            method: 'GET'
        },

        eventTimeFormat: {
            hour: '2-digit',
            minute: '2-digit',
            hour12: false
        },

        // Click en evento => abrir edit
        eventClick: function(info) {
            if (info.event.url) {
                info.jsEvent.preventDefault();
                window.location.href = info.event.url;
            }
        },

        // Tap/click en un día => crear evento con fecha
        // En móvil es más natural click en día (porque seleccionar rango es incómodo)
        dateClick: function(info) {
            window.location.href = "{{ route('comercio.eventos.create') }}" + "?fecha_evento=" + info.dateStr;
        },

        // Si quieres mantener selección por arrastre en desktop:
        selectable: !isMobile,
        selectMirror: true,
        select: function(info) {
            const date = info.startStr.substring(0,10);
            window.location.href = "{{ route('comercio.eventos.create') }}" + "?fecha_evento=" + date;
        },

        // Colorear por estado (borde izquierdo)
        eventDidMount: function(info) {
            const estado = info.event.extendedProps.estado;

            if (estado === 'confirmado') {
                info.el.style.borderLeft = '4px solid #198754';
            } else if (estado === 'pendiente') {
                info.el.style.borderLeft = '4px solid #ffc107';
            } else if (estado === 'cancelado') {
                info.el.style.borderLeft = '4px solid #dc3545';
            }
        }
    });

    calendar.render();
});
</script>
@endsection