@extends('comunidad.layout.master')

@section('title', 'Educa Auge - Accede a los mejores cursos online para docentes')
@section('styles')
    <link rel="stylesheet" href="{{ asset('assets/css/comunidad/index.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/css/comunidad/eventos.css') }}" />

@endsection
@section('content')
    <main class="page-main">

        <div class="uk-container ">
            <div class="principal">
                <div id="calendario"></div>
            </div>

        </div>
    </main>


    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var calendarEl = document.getElementById('calendario');
            var calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'dayGridMonth',
                locale: 'es',
                headerToolbar: {
                    left: 'prev,next',
                    center: 'title',
                    right: ''
                },
                events: {
                    url: '{{ route('eventos.publicos') }}',
                    failure: function() {
                        alert('No se pudieron cargar los eventos');
                    }
                },
                eventClick: function(info) {
                    if (info.event.url) {
                        window.open(info.event.url, '_blank');
                        info.jsEvent.preventDefault();
                    }
                },
                eventContent: function(arg) {
                    return {
                        html: `
                <div>
                    <div style="font-weight:600;" class="fc-event-title">${arg.event.title}</div>
                    <span class="uk-label" style="background-color:${arg.event.backgroundColor};" class="fc-event-title">
                        ${arg.event.extendedProps.tipo}
                    </span>
                </div>`
                    };
                }
            });

            calendar.render();

            window.addEventListener('load', function() {
                calendar.updateSize();
            });
            window.addEventListener('resize', function() {
                calendar.updateSize();
            });
        });
    </script>
@endsection