{% extends 'base_layout.html' %}

{% block content %}
        <main>
                    <div class="container-fluid px-4">
                        <h1 class="mt-4"> Lidojumu kalendārs </h1>
                        <div class="row">
                            <div id='calendar'></div>
                        </div>
                    </div>
                </main>
        <script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.js'></script>
        <script type="text/javascript">
            document.addEventListener('DOMContentLoaded', function() {
                var calendarEl = document.getElementById('calendar')
                var calendar = new FullCalendar.Calendar(calendarEl, {
                    locale: 'lv',
                    selectable: true,
                    initialView: 'multiMonthYear',
                    multiMonthMaxColumns: 1,
                    views: {
                        multiMonthYear: {
                            type: 'multiMonthYear',
                            duration: { months: 1 }
                        }
                    },
                    buttonText: {
                        today: 'Šodien' // Change the button name to 'šodien'
                    },
                    firstDay: 1 // Set Monday as the first day of the week
                });
                flights = jQuery.parseJSON('{{ flights|escapejs }}');

                blocks = jQuery.parseJSON('{{ blockJSON|escapejs }}');
                flightplans = jQuery.parseJSON('{{ flightplans|escapejs }}');

                for (var i = 0; i < flights.length; i++) {
                    plan = flightplans.find(x => x.pk === flights[i].fields.plan);
                    block = blocks.find(x => x.pk === plan.fields.block);
                    calendar.addEvent({
                        title: "Lidojums kvartālā - " + block.fields.name,
                        start: flights[i].fields.start_date,
                        end: flights[i].fields.end_date,
                        allDay: false,
                        url : flights[i].fields.url,
                    });
                    console.log(flights[i].fields);
                }

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