{% extends "authorized.html" %}
{% block links %}
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/@fullcalendar/core@4.2.0/main.min.css'>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@4.3.0/main.min.css'>
{% endblock links %}
{% block center %}
<h1>Calendar</h1>
<div class="mh-100">
    <div id="calendar" class="fc"></div>
</div>

<!-- Modal -->
<div class="modal fade" id="eventDetailsModal" tabindex="-1" role="dialog" aria-labelledby="eventDetailsModalTitle"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="eventDetailsModalTitle">Event details</h5>
            </div>
            <div class="modal-body">
                <p id="eventDetailsModalDateRange"></p>
                <p id="eventDetailsModalBody">Cottage request</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

{% endblock center %}
{% block scripts %}
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/uuid@8.3.2/dist/umd/uuidv4.min.js'></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
            initialView: 'dayGridMonth',
            themeSystem: 'bootstrap5',
            selectable: true,
            displayEventTime: true,
            displayEventEnd: true,
            slotDuration: { hours: 12 },
            slotLabelInterval: { hours: 24 },
            headerToolbar: {
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridMonth,timeGridWeek,timeGridDay,multiMonthYear'
            },
            eventSources: [
                {% for calendar in calendars %}
                {
                url: '/getevents/{{calendar.name}}',
                color: '{{calendar.colour}}',
            },
            {% endfor %}
            ],
        select: function (info) {
            $('#eventDetailsModal').modal('show');
            $('#eventDetailsModalDateRange').text(info.startStr + ' to ' + info.endStr);

            info.view.calendar.addEvent({
                id: uuidv4(),
                title: 'Cottage request',
                start: info.startStr + 'T14:00:00',
                end: info.endStr + 'T10:00:00',
                allDay: false
            });
        }
        });

    calendar.render();
    });
</script>
{% endblock scripts %}