@extends('layouts.adminlte')
@section('title', 'Calendario Eventi')
@section('page_title', 'Calendario Eventi')

@section('content')
<div class="row">
    <div class="col-12">
        <div class="card card-primary">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="fas fa-calendar-alt mr-2"></i>Calendario Eventi
                </h3>
                <div class="card-tools">
                    <a href="{{ route('eventi.index') }}" class="btn btn-secondary btn-sm">
                        <i class="fas fa-list mr-1"></i> Elenco Eventi
                    </a>
                    <a href="{{ route('eventi.create') }}" class="btn btn-success btn-sm">
                        <i class="fas fa-plus mr-1"></i> Nuovo Evento
                    </a>
                    <form action="{{ route('eventi.export-selected-ics') }}" method="POST" class="d-inline">
                        @csrf
                        <button type="submit" class="btn btn-success btn-sm">
                            <i class="fas fa-calendar-plus mr-1"></i> Esporta ICS
                        </button>
                    </form>
                </div>
            </div>
            <div class="card-body">
                <div id="calendar"></div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('styles')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.10/index.global.min.css">
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.10/index.global.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    
    var calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth',
        locale: 'it',
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,listWeek'
        },
        buttonText: {
            today: 'Oggi',
            month: 'Mese',
            week: 'Settimana',
            list: 'Lista'
        },
        eventSources: [
            {
                url: '/eventi/calendar/events',
                method: 'GET',
                extraParams: function() {
                    return {
                        _token: document.querySelector('meta[name="csrf-token"]')?.content || ''
                    };
                },
                startParam: 'start',
                endParam: 'end',
                success: function(response) {
                    console.log('Eventi caricati:', response.length, response);
                },
                failure: function(error) {
                    console.error('Errore:', error);
                    console.log('XHR:', error.xhr);
                    alert('Errore nel caricamento degli eventi. Controlla la console per dettagli.');
                }
            }
        ],
        eventClick: function(info) {
            info.jsEvent.preventDefault();
            window.location.href = info.event.url;
        },
        eventDisplay: 'block',
        displayEventTime: true,
        displayEventEnd: true,
        nowIndicator: true,
        height: 'auto',
        expandRows: true,
        stickyHeaderDates: true,
        dayMaxEvents: true,
        eventTimeFormat: {
            hour: '2-digit',
            minute: '2-digit',
            hour12: false
        }
    });
    
    calendar.render();
});
</script>
@endsection