{#<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>#}
    <link href='https://cdn.jsdelivr.net/npm/@fullcalendar/core@4.4.2/main.min.css' rel='stylesheet' />
    <link href='https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@4.4.2/main.min.css' rel='stylesheet' />
    <link href='https://cdn.jsdelivr.net/npm/@fullcalendar/timegrid@4.4.2/main.min.css' rel='stylesheet' />
    <style>
        body div#calendarApp .btn-primary {
            background: #000 !important;
            border-color: #fff !important;
        }
        button.fc-prev-button.btn.btn-primary svg:first-child, button.fc-next-button.btn.btn-primary svg:first-child {
            display: block;
        }
        
        button.fc-prev-button.btn.btn-primary svg, button.fc-next-button.btn.btn-primary svg {
            display: none;
        }
        .ui-dialog.ui-corner-all.ui-widget.ui-widget-content.ui-front {
            z-index: 9999;
        }
        .subscribe-calendar a {
            background: #dc3545;
            padding: 10px 20px;
            color: #fff;
            border-radius: 20px;
        }
        div#event-details-modal {	
            background: rgba(0,0,0, .5);	
        }
        div#loading {
            position: absolute;
            height: 100%;
            width: 100%;
            text-align: center;
            background: rgba(0, 0, 0, 0.4);
            z-index: 2;
        }

        .lds-ripple {
            display: inline-block;
            position: relative;
            width: 80px;
            height: 80px;
            top: 50%;
        }

        .lds-ripple div {
            position: absolute;
            border: 4px solid #fff;
            opacity: 1;
            border-radius: 50%;
            animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
        }

        .lds-ripple div:nth-child(2) {
            animation-delay: -0.5s;
        }

        @keyframes lds-ripple {
            0% {
                top: 36px;
                left: 36px;
                width: 0;
                height: 0;
                opacity: 0;
            }

            4.9% {
                top: 36px;
                left: 36px;
                width: 0;
                height: 0;
                opacity: 0;
            }

            5% {
                top: 36px;
                left: 36px;
                width: 0;
                height: 0;
                opacity: 1;
            }

            100% {
                top: 0px;
                left: 0px;
                width: 72px;
                height: 72px;
                opacity: 0;
            }
        }
        div#myModal {
            background: rgba(0,0,0,.5);
        }
        .modal-body li a {
            color: #007bff !important;
        }
        #calendarLegend .col-12.mb-2 {
            font-size: 13px;
        }
        .container.position-relative.mb-5.mt-5 .col-md-9 {
            padding: 0 !important;
        }
        div#calendarApp {
            height: 700px;
        }
    </style>
    
    <!-- The Modal -->
    <div class="modal" id="myModal" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
    
          <!-- Modal Header -->
          <div class="modal-header">
            <h4 class="modal-title">Subscribe to a calendar</h4>
          </div>
    
          <!-- Modal body -->
          <div class="modal-body">
            <ol>
            {% for key, item in data %}
                <li>
                <a href="https://calendar.google.com/calendar/u/5?cid=ZWFzaWx5Z3JlYXR3b3JrQGdtYWlsLmNvbQ" target="_blank">{{ item.name }}</a>
                </li>
            {% endfor %}
            </ol>
            <p><strong>How to unsubscribe?</strong></p>
            <ol>
            <li> Go to your calendar. You should be logged in your Gmail account.</li>
            <li> Click the wheel icon for settings on the top right.</li>
            <li> Click “Other Calendars” on the left side menu.</li>
            <li> You may have to click the dropdown arrow beside it if you do not see any calendar names under “Other Calendars”.</li>
            <li> Once you have found the name of the calendar to be removed under “Other Calendars”, click on the cross (X) icon on its right side to unsubscribe.</li>
            </ol>
          </div>
    
          <!-- Modal footer -->
          <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
          </div>
    
        </div>
      </div>
    </div>
    
    <div class="container position-relative mb-5 mt-5">
        
        {#<div id="loading">#}
        {#    <div class="lds-ripple">#}
        {#        <div></div>#}
        {#        <div></div>#}
        {#    </div>#}
        {#</div>#}
        <div class="row">
            <div class="col-md-3">
                <div class="subscribe-calendar">
                    <button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#myModal">
                        Subscribe to a calendar
                      </button>
                </div>
                <div id="calendarLegend" class="row py-3"></div>
            </div>
            <div class="col-md-9">
                <div id="calendarApp"> </div>
            </div>
        </div>
    </div>

    <div class="modal fade" tabindex="-1" data-bs-backdrop="static" id="event-details-modal">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content rounded-0">
                <div class="modal-header rounded-0">
                    <h5 class="modal-title">Schedule Details</h5>
                     <button type="button" class="btn btn-danger" data-bs-dismiss="modal">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body rounded-0">
                    <div class="container-fluid">
                        <dl>
                            <dt class="text-muted">Title</dt>
                            <dd id="title" class="fw-bold fs-4"></dd>
                            <dt class="text-muted">Description</dt>
                            <dd id="description" class=""></dd>
                            <dt class="text-muted">Start</dt>
                            <dd id="start" class=""></dd>
                            <dt class="text-muted">End</dt>
                            <dd id="end" class=""></dd>
                            <input type="hidden" id="eventURL" value="" />
                        </dl>
                    </div>
                </div>
                <div class="modal-footer rounded-0">
                    <div class="text-end">
                        {#<button type="button" class="btn btn-primary btn-sm rounded-0" id="addToGoogle" data-url=""#}
                        {#    data-id="">Add to Google Calendar</button>#}
                        <button type="button" class="btn btn-danger btn-sm rounded-0" id="addToiCal" data-id="">Add to
                            iCal Calendar</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment-with-locales.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.11/moment-timezone-with-data.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>

<!--<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/combine/npm/fullcalendar@5.11.3,npm/fullcalendar@5.11.3/locales-all.min.js"></script>-->
<script src='https://cdn.jsdelivr.net/npm/@fullcalendar/core@4.4.2/main.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@4.4.2/main.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/@fullcalendar/timegrid@4.4.2/main.min.js'></script>
<script>
    jQuery(function () {
        'use strict'
        
        var azHolidayEvents = [
            {% for key, item in events %}
            {% if item.id is not empty %}
                {
                  id: '{{ item.id }}',
                  backgroundColor: '{{ item.color }}',
                  borderColor: '{{ item.color }}',
                  
                  events: [
                    {% for key, event in item.events %}
                   
                    {
                        id: '{{ event.id }}',
                        start: '{{ event.start }}',
                        end: '{{ event.end }}',
                        title: '{{ event.title }}',
                    },
                    {% endfor %}
                  ]
                },
            {% endif %}
            {% endfor %}
        ];
        
        var events = {};
        azHolidayEvents.forEach(function (arrayItem) {
            var x = arrayItem;
            
            events[x.id] = x;
        });
        console.log(events);

        let eventSources = [
            
            {% for key, item in items.account %}
            {% if item.name is not empty %}
            {
                googleCalendarId: '{{ item.link }}',
                className: 'gcal-event',
                color: '{{ item.color }}',
                title: '{{ item.name }}',
                id: '{{ item.id }}'
            },
            {% endif %}
            {% endfor %}
            // {
            //     googleCalendarId: '3kirfs2j6u2dob2n587e5om1gs@group.calendar.google.com',
            //     className: 'gcal-event',
            //     color: '#a30000',
            //     title: 'Secondary School Calendar 22-23',
            //     id: 1
            // },
            // {
            //     googleCalendarId: 'aabhg894sclir172cthh8hesjo@group.calendar.google.com',
            //     className: 'gcal-event',
            //     color: '#000000',
            //     title: 'Early Start Secondary Schools 22-23',
            //     id: 2
            // }
        ];

        let wrapper = jQuery('#calLinkWrapper');
        let legendWrapper = jQuery("#calendarLegend");

        let wrapperContent = `<div class="row mb-3">
            <div class="col-6">
                <input class="w-100 py-1 item-link" name="item[link][]" type="text" value="">
                </div>
            <div class="col-4">
                <input class="w-100 py-1 item-title" name="item[title][]" type="text" value="">
                </div>
            <div class="col-2">
                <input type="color" class="w-100 item-color" name="item[color][]" value="">
                </div>
        </div>`;

        const renderLegend = function(item){
            return `<div class="col-12 mb-2" style="color: ${item.color}; font-weight:bold;"><input type='checkbox' class="legend-input" data-cal="${item.id}" checked > ${item.title}</div>`;
        }

        const renderWrapperContent = function () {
            let wrapperHtml = '';
            let legendHtml = '';
            jQuery.each(eventSources, function (key, item) {
                legendHtml += renderLegend(item)

                wrapperHtml += `<div class="row mb-3">
            <div class="col-6">
                <input class="w-100 py-1 item-link" name="item[link][]" type="text" value="${item.googleCalendarId}">
                </div>
            <div class="col-4">
                <input class="w-100 py-1 item-title" name="item[title][]" type="text" value="${item.title}">
                </div>
            <div class="col-2">
                <input type="color" class="w-100 item-color" name="item[color][]" value="${item.color}">
                </div>
        </div>`;

            })

            wrapper.html(wrapperHtml);
            legendWrapper.html(legendHtml)
        }

        renderWrapperContent();

        jQuery(document).on('click', '#addLink', function (e) {
            e.preventDefault();
            //let linkid = $('#calLinkWrapper').find('input').length + 1;
            //let link = '<div class="row mb-3"><div class="col-6"><input class="w-100 py-1 callink1" name="callink' + linkid + '" type="text" value="" placeholder="Calendar Link"></div><div class="col-4"><input class="w-100 py-1 callink1" name="callname' + linkid + '" type="text" placeholder="Calendar Name"></div><div class="col-2"><input type="color" class="w-100 py-1" name="calcolor' + linkid + '" placeholder="Color Hex Code" ></div></div > '
            // let link = '<input class="w-100 mb-3 py-1 callink' + linkid + '" name="callink' + linkid + '" type="text">'
            wrapper.append(wrapperContent)
        });



        let _detailModal = jQuery('#event-details-modal')

        let calendarEl = document.getElementById('calendarApp')
        //$('#calendarApp').FullCalendar({
        let calendar = new FullCalendar.Calendar(calendarEl, {
            header: {
                left: "prev,next,today",
                center: "title",
                right: 'dayGridMonth,timeGridWeek,timeGridDay',
              },
            selectable: true,
            themeSystem: 'bootstrap',
            //googleCalendarApiKey: '{{ items.google_calendar_api_key }}',
            plugins: [ 'dayGrid', 'timeGrid' ],
            //timeZone: 'UTC',
            eventLimit: true,
           // eventSources: eventSources,
            //eventSources: ["https://yrdsb.w3creatives.com/micro/web/calendar-data"],
            eventSources: azHolidayEvents,
            
            eventClick: function (info) {
                info.jsEvent.preventDefault();

                let event = info.event;
                let id = event.id;

                if (!!info.event.id) {
                    _detailModal.find('#title').text(event.title)
                    _detailModal.find('#description').text(event.extendedProps.description)
                    _detailModal.find('#start').text(moment(event.start).format('MMM Do YYYY, h:mm A'))
                    _detailModal.find('#end').text(moment(event.end).format('MMM Do YYYY, h:mm A'))
                    _detailModal.find('#eventURL').val(event.url)
                    _detailModal.find('#addToGoogle').attr('data-url', event.url)
                    _detailModal.modal('show')
                } else {
                    alert("Event is undefined");
                }
            },
            loading: function (bool) {
                console.log(bool)
                if (bool) {
                    jQuery('#loading').show();
                } else {
                    jQuery('#loading').hide();
                }
            }
        });
        calendar.render();

        jQuery('#calendarForm').submit(function (e) {
            e.preventDefault();

            let itemLinks = jQuery(this).find('.item-link');
            let itemTitles = jQuery(this).find('.item-title');
            let itemColors = jQuery(this).find('.item-color');

            
            let legendHtml = '';

            let items = [];
            if (itemLinks.length) {
                jQuery.each(itemLinks, function (key, item) {
                    
                    let etSource = calendar.getEventSourceById(key)

                    if(etSource)
                        etSource.remove()

                    let event = {
                        id: key,
                        googleCalendarId: jQuery(item).val(),
                        className: 'gcal-event',
                        color: jQuery(itemColors[key]).val(),
                        title: jQuery(itemTitles[key]).val()
                    };

                    calendar.addEventSource(event)

                    legendHtml += renderLegend(event)

                    items.push(event)
                })
            }
            eventSources = items;
            legendWrapper.html(legendHtml)
        })

        //$("#calendarLegend").append("<div class='col'><input type='checkbox' data-cal='0frjpl08d72hetlk4ci2vioqms@group.calendar.google.com' checked><span style='background:#019827'></span> Elementary Calendar 22-23</div>"); $("#calendarLegend").append("<div class='col'><input type='checkbox' data-cal='3kirfs2j6u2dob2n587e5om1gs@group.calendar.google.com' checked><span style='background:#a30000'></span> Secondary School Calendar 22-23</div>"); $("#calendarLegend").append("<div class='col'><input type='checkbox' data-cal='aabhg894sclir172cthh8hesjo@group.calendar.google.com' checked><span style='background:#000000'></span> Early Start Secondary Schools 22-23</div>");
       
        jQuery(this).on('click', '.legend-input', function(e){
            
            let legendId = jQuery(this).data('cal')
            
            if(jQuery(this).is(":checked")){
                console.log(legendId);
                
                //var id = 'events_' +legendId;
                //console.log(id);
                calendar.addEventSource(events[legendId]);
                
                
            } else {
                
                let etSource = calendar.getEventSourceById(legendId)
                    if(etSource)
                        etSource.remove()
                    
            }

        })


        jQuery('#addToGoogle').on('click', function () {
            let eventURL = $(this).data('url');
            let w = window.open(eventURL, "popupWindow", "width=600, height=400, scrollbars=yes");
            _detailModal.modal('hide')
        })

        jQuery('#addToiCal').on('click', function () {
            window.open( "data:text/calendar;charset=utf8," + escape(calendar));
            _detailModal.modal('hide')
        })
        
        jQuery('.modal-header button.btn.btn-danger').on('click', function () {
            _detailModal.modal('hide')
        });
        
        jQuery('.subscribe-calendar button').on('click', function(){
            jQuery('#myModal').toggle();
        })
        
        jQuery('#myModal .modal-footer button').on('click', function(){
            jQuery('#myModal').toggle();
        })
    })
</script>