{% extends '@EasyAdmin/default/list.html.twig' %}

{% block main %}
    {#<a href="{{ path('booking_new') }}">Create new booking</a>#}
    <div class="container">{% include '@Calendar/calendar.html' %}</div>
{% endblock %}

{% block head_stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fullcalendar/core@4.1.0/main.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@4.1.0/main.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fullcalendar/timegrid@4.1.0/main.min.css">
{% endblock %}

{% block body_javascript %}
    {{ parent() }}
    <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/core@4.1.0/main.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/interaction@4.1.0/main.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@4.1.0/main.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/timegrid@4.1.0/main.min.js"></script>

    <script type="text/javascript">

        document.addEventListener('DOMContentLoaded', () => {
            var calendarEl = document.getElementById('calendar-holder');

            var calendar = new FullCalendar.Calendar(calendarEl, {
                defaultView: 'dayGridMonth',
                editable: true,
                eventSources: [
                    {
                        url: "/fc-load-events",
                        method: "POST",
                        extraParams: {
                            filters: JSON.stringify({})
                        },
                        failure: () => {
                            // alert("There was an error while fetching FullCalendar!");
                        },
                    },
                ],
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,timeGridDay',
                },
                plugins: [ 'interaction', 'dayGrid', 'timeGrid' ], // https://fullcalendar.io/docs/plugin-index
                timeZone: 'UTC',
            });
            calendar.render();
        });

    //     $(function () {
    //         $('#calendar-holder').fullCalendar({
    //             locale: 'fr',
    //             themeSystem: 'bootstrap4',
    //             // aspectRatio: 2.5,
    //             header: {
    //                 left: 'prev,next today',
    //                 center: 'title',
    //                 right: 'month,agendaWeek,agendaDay,listMonth'
    //             },
    //             weekNumbers: true,
    //             eventLimit: true, // allow "more" link when too many events
    //             lazyFetching: true,
    //             navLinks: true,
    //             eventSources: [
    //                 {
    //                     url: "",
    //                     type: 'POST',
    //                     data:  {
    //                         filters: {}
    //                     },
    //                     error: function () {
    //                         alert('There was an error while fetching FullCalendar!');
    //                     }
    //                 }
    //             ]
    //         });
    //     });
    </script>

{% endblock %}