@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>
                    <button type="button" class="btn btn-info btn-sm" id="syncCalendarsBtn" onclick="syncCalendars()">
                        <i class="fas fa-sync mr-1"></i> Sync
                    </button>
                    <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>
function syncCalendars() {
    var btn = document.getElementById('syncCalendarsBtn');
    btn.disabled = true;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i> Sync...';

    fetch('{{ route('calendario-connessioni.sync-all') }}', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || '',
            'Content-Type': 'application/json',
        },
    })
    .then(function(r) { return r.json(); })
    .then(function(data) {
        var msg = data.connections + ' connessioni sincronizzate.';
        msg += ' Importati: ' + data.total_imported + ', Esportati: ' + data.total_exported + '.';
        if (data.success) {
            alert('✅ Sync completato!\n' + msg);
        } else {
            alert('⚠️ Sync completato con errori.\n' + msg);
        }
        if (window.calendar) {
            window.calendar.refetchEvents();
        }
    })
    .catch(function(err) {
        alert('❌ Errore sync: ' + err.message);
    })
    .finally(function() {
        btn.disabled = false;
        btn.innerHTML = '<i class="fas fa-sync mr-1"></i> Sync';
    });
}

document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    
    window.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
        }
    });
    
    window.calendar.render();
});
</script>
@endsection