{% extends "cms/admin_home.html" %}
{% load sekizai_tags static i18n tz %}
{% get_current_timezone as TIME_ZONE %}

{% block content %}

<h1>{% trans "School Calendars" %}</h1>

<dl>
<dt>{% trans "Links To Calendar Feeds" %}:</dt>
<dd>
    {% if privateFeeds.ownPublicEvents %}
        <a class="btn btn-outline-secondary btn-sm" href="{{ privateFeeds.ownPublicEvents }}">{% trans "Your Classes &amp; Events" %}</a>
    {% endif %}
    {% if privateFeeds.privateEvents %}
        <a class="btn btn-outline-secondary btn-sm" href="{{ privateFeeds.privateEvents }}">{% trans "Private Events &amp; Reminders" %}</a>
    {% endif %}

    <a class="btn btn-outline-secondary btn-sm" href="{{ publicFeed }}">{% trans "Public Calendar Feed" %}</a>
({% trans "copy and paste these URLs to add them to Google Calendar, etc." %})</dd>
</dl>

<div class="card mt-4">
    <div class="card-header">{% trans "Select Calendar Options" %}</div>
    <div class="card-body">
        <form name='calendarSelect' id='calendarSelect'>

            <p>
            <select name="calendarFilters">
                <option data-publicevents="{{ jsonPublicFeed }}" data-privateevents="{{ jsonPrivateFeeds.privateEvents }}" data-privatelessons="{{ jsonPrivateFeeds.privateLessons }}" selected>{% trans "All Events and Reminders" %}</option>
                <option data-publicevents="{{ jsonPublicFeed }}">{% trans "Only Public Events" %}</option>
                <option data-publicevents="{{ jsonPrivateFeeds.ownPublicEvents }}" data-privateevents="{{ jsonPrivateFeeds.privateEvents }}" data-privatelessons="{{ jsonPrivateFeeds.ownPrivateLessons }}">{% trans "Only My Events" %}</option>
                {% for i in locations %}
                    <option data-id="{{ i.id }}" data-publicevents="{{ i.jsonCalendarFeed }}" data-privateevents="{{ i.jsonPrivateCalendarFeed }}" data-privatelessons="{{ i.jsonPrivateLessonFeed }}">{% trans "Location" %}: {{ i.name }}</option>
                {% endfor %}
                {% for i in rooms %}
                    <option data-id="{{ i.id }}" data-publicevents="{{ i.jsonCalendarFeed }}" data-privateevents="{{ i.jsonPrivateCalendarFeed }}" data-privatelessons="{{ i.jsonPrivateLessonFeed }}">{% trans "Room" %}: {{ i.name }}, {{ i.location.name }}</option>
                {% endfor %}
            </select>
            </p>

        </form>
    </div>
</div>

<div id="calendarbox" class="mt-4">&nbsp;</div>

<p><em>{% trans "Note" %}:</em> {% blocktrans %}For all calendar options, private reminders and private lessons displayed include only those events that are visible to your user account.{% endblocktrans %}</p>


<!-- Modal for existing events -->
<div aria-labelledby="eventDetails" class="modal fade my-5" id="eventContent" role="dialog" tabindex="-1" title="{% trans "Event Details" %}">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header"><button aria-label="{% trans 'Close' %}" class="close" data-dismiss="modal" type="button"><span aria-hidden="true">&times;</span></button>

<h3 class="modal-title" id="eventTitle">&nbsp;</h3>
</div>

<div class="modal-body">
<dl>
	<dt>{% trans "Start" %}:</dt>
	<dd id="startTime">&nbsp;</dd>
	<dt>{% trans "End" %}:</dt>
	<dd id="endTime">&nbsp;</dd>
</dl>

<div id="eventInfo">&nbsp;</div>
</div>

<div class="modal-footer"><a class="btn btn-outline-secondary" href="" id="eventEditLink" type="button">{% trans "Edit Details" %}</a><a class="btn btn-outline-secondary" href="" id="eventLink" type="button">{% trans "Read More" %}</a><button class="btn btn-outline-secondary" data-dismiss="modal" id="closeLink" type="button">{% trans "Close" %}</button></div>
</div>
</div>
</div>

<!-- Modal to create new events -->
<div aria-labelledby="eventNew" class="modal fade my-5" id="eventNew" role="dialog" tabindex="-1" title="{% trans 'Add Event' %}">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header"><button aria-label="{% trans 'Close' %}" class="close" data-dismiss="modal" type="button"><span aria-hidden="true">&times;</span></button>

<h3 class="modal-title" id="eventNewTitle">&nbsp;</h3>
</div>

<div class="modal-body">
<div id="eventNewInfo">
    <div id="eventNewExistingInfo" class="mb-4"></div>
    <div id="eventNewLinks">
        {% if 'core.add_series' in perms or user.is_superuser %}<a class="btn btn-outline-secondary" href="{% url 'admin:core_series_add' %}" id="seriesNewLink" type="button">{% trans "Add A Class" %}</a>{% endif %}
        {% if 'core.add_publicevent' in perms or user.is_superuser %}<a class="btn btn-outline-secondary" href="{% url 'admin:core_publicevent_add' %}" id="eventNewLink" type="button">{% trans "Add A Public Event" %}</a>{% endif %}
        {% if 'private_events.add_privateevent' in perms or user.is_superuser %}<a class="btn btn-outline-secondary" href="" id="privateEventNewLink" type="button">{% trans "Add A Private Event/Reminder" %}</a>{% endif %}
    </div>
</div>
</div>

<div class="modal-footer">
    <button class="btn btn-secondary" data-dismiss="modal" id="closeNewLink" type="button">{% trans "Close" %}</button>
</div>
</div>
</div>
</div>

{% addtoblock "css" %}
    <link rel='stylesheet' type="text/css" href='{% static 'fullcalendar/fullcalendar.min.css' %}' />
{% endaddtoblock %}
{% addtoblock "css" %}
    <style media="screen" type="text/css">
        .fc-day-grid-event > .fc-content {
            white-space: normal;
        }
    </style>
{% endaddtoblock %}
{% addtoblock "js" %}
    <script src='{% static 'jquery-ui/jquery-ui.min.js' %}'></script>
{% endaddtoblock %}
{% addtoblock "js" %}
    <script src='{% static 'moment/moment.min.js' %}'></script>
{% endaddtoblock %}
{% addtoblock "js" %}
    <script src='{% static 'fullcalendar/fullcalendar.min.js' %}'></script>
{% endaddtoblock %}
{% addtoblock "js" %}
<script type="text/javascript">
$(document).ready(function() {

    function updateCalendarFeeds() {
        var selected = $('#calendarSelect option:selected')
        $('#calendarbox').fullCalendar('removeEvents');
        if (selected.data('publicevents')) {
            $('#calendarbox').fullCalendar('addEventSource', selected.data('publicevents'));            
        }
        if (selected.data('privateevents')) {
            $('#calendarbox').fullCalendar('addEventSource', selected.data('privateevents'));            
        }
        if (selected.data('privatelessons')) {
            $('#calendarbox').fullCalendar('addEventSource', selected.data('privatelessons'));
        }
        $('#calendarbox').fullCalendar('rerenderEvents');
    }

    // page is now ready, initialize the calendar...

    $('#calendarbox').fullCalendar({
        // put your options and callbacks here
        eventTextColor: '#ffffff',
        timezone: "{{ TIME_ZONE }}",
        height: "auto",
        aspectRatio: 1,
        header: {right: 'month,agendaWeek,listMonth prev,next today'},
        eventRender: function (event, element) {
            element.attr('href', 'javascript:void(0);');
            element.click(function() {
                $("#startTime").html(moment(event.start).format('MMM Do h:mm A'));
                $("#endTime").html(moment(event.end).format('MMM Do h:mm A'));
                var titleBox = event.title;
                if (event.category) {
                    titleBox += '&nbsp;&nbsp;<span class="label label-default"';
                    if (event.color) {
                        titleBox += 'style="background-color: ' + event.color + '"';
                    }
                    titleBox += '>' + event.category +'</span>';
                }
                $("#eventTitle").html(titleBox);
                $("#eventInfo").html(event.description);
                switch(event.type) {
                    case "privateEvent":
                        $('#eventEditLink').show();
                        $("#eventEditLink").attr('href', '{% url "admin:private_events_privateevent_changelist" %}' + event.id_number + '/change/');
                        break;
                    case "privateLesson":
                        $('#eventEditLink').show();
                        $("#eventEditLink").attr('href', '{{ privateLessonAdminUrl }}' + event.id_number + '/change/');
                        break;
                    case "event":
                        $('#eventEditLink').show();
                        $("#eventEditLink").attr('href', '{% url "admin:core_event_changelist" %}' + event.id_number + '/change/');
                        break;
                    case "series":
                        $('#eventEditLink').show();
                        $("#eventEditLink").attr('href', '{% url "admin:core_series_changelist" %}' + event.id_number + '/change/');
                        break;
                    default:
                        $('#eventEditLink').hide();                        
                }

                if (!event.url) {
                    $("#eventLink").hide();
                }
                else {
                    $("#eventLink").show();
                    $("#eventLink").attr('href', event.url);
                }
                $("#eventContent").modal();
            });
        },
        {% if 'private_events.add_privateevent' in perms or user.is_superuser %}
        dayClick: function (date, jsEvent, view) {
            $('#eventNewTitle').html(date.format('dddd, MMMM Do YYYY'));
            $('#privateEventNewLink').attr('href', "{% url 'addPrivateEvent' %}?startTime=" + date.format('YYYY-MM-DD'));
            todayEvents = $('#calendarbox').fullCalendar('clientEvents',function(event) {
                return (event.start.isSame(date.endOf('day'),'day'));
            });
            if (todayEvents.length > 0) {
                existingList = '<h6>{% trans "Currently scheduled" %}</h6><ul>';
                todayEvents.forEach(function(element) {
                    existingList += '<li>' + element.title + ': ' + element.start.format('h:mm a') + ' - ' + element.end.format('h:mm a') + '</li>';
                });
                existingList += '</ul>';

                $('#eventNewExistingInfo').html(existingList);
            }
            else {
                $('#eventNewExistingInfo').html('{% trans "No currently scheduled events." %}');
            }
            $("#eventNew").modal();
        }
        {% endif %}
    });
    $("#closeLink").click(function() {
        $("#eventContent").hide();
    });
    $('#calendarSelect').change(function(event) {
        // Get the ID of the location, submit to AJAX view,
        // and finally load the calendars for thos location
        event.preventDefault();
        updateCalendarFeeds();
    });

    // Update calendar feeds to start
    updateCalendarFeeds();

});
</script>
{% endaddtoblock %}
{% endblock %}
