{#
/**
 * Copyright (C) 2023 Xibo Signage Ltd
 *
 * Xibo - Digital Signage - http://www.xibo.org.uk
 *
 * This file is part of Xibo.
 *
 * Xibo is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * any later version.
 *
 * Xibo is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with Xibo.  If not, see <http://www.gnu.org/licenses/>.
 */
#}
{% extends "authed.twig" %}
{% import "inline.twig" as inline %}
{% import "forms.twig" as forms %}

{% block title %}{{ "Schedule"|trans }} | {% endblock %}

{% block actionMenu %}
    <div class="widget-action-menu pull-right">
        {% if currentUser.featureEnabled("schedule.add") %}
            {% if currentUser.featureEnabled("schedule.sync") %}
                <button class="btn btn-white XiboFormButton btns" title="{% trans "Add a new Sync event" %}"
                        href="{{ url_for("schedule.add.sync.form") }}"><span
                            class="fa fa-plus"></span> {% trans "Add Synchronised Event" %}</button>
            {% endif %}
            <button class="btn btn-success XiboFormButton btns" title="{% trans "Add a new Scheduled event" %}"
                    href="{{ url_for("schedule.add.form") }}"><span class="fa fa-plus"></span> {% trans "Add Event" %}
            </button>
        {% endif %}
        <button class="btn btn-primary" id="refreshGrid" title="{% trans "Refresh the Table" %}" href="#"><i class="fa fa-refresh" aria-hidden="true"></i></button>
    </div>
{% endblock %}

{% block pageContent %}
    <div class="widget">
        <div class="widget-title">{% trans "Schedule" %}</div>
        <div class="widget-body">
            <div class="XiboGrid" id="{{ random() }}" data-grid-name="scheduleGridView">
                <div class="XiboFilter card mb-3 bg-light">
                    <div class="FilterDiv card-body" id="schedule-filter">
                        <form class="form-inline">
                            {% set title %}{% trans "Range" %}{% endset %}
                            {% set range %}{% trans "Select a range" %}{% endset %}
                            {% set day %}{% trans "Today" %}{% endset %}
                            {% set week %}{% trans "This Week" %}{% endset %}
                            {% set month %}{% trans "This Month" %}{% endset %}
                            {% set year %}{% trans "This Year" %}{% endset %}
                            {% set yesterday %}{% trans "Yesterday" %}{% endset %}
                            {% set lastweek %}{% trans "Last Week" %}{% endset %}
                            {% set lastmonth %}{% trans "Last Month" %}{% endset %}
                            {% set lastyear %}{% trans "Last Year" %}{% endset %}
                            {% set agenda %}{% trans "Agenda" %}{% endset %}
                            {% set options = [
                                { name: "custom", range: range },
                                { name: "day", range: day },
                                { name: "week", range: week },
                                { name: "month", range: month },
                                { name: "year", range: year },
                                { name: "lastday", range: yesterday },
                                { name: "lastweek", range: lastweek },
                                { name: "lastmonth", range: lastmonth },
                                { name: "lastyear", range: lastyear },
                                { name: "agenda", range: agenda}
                            ] %}
                            {{ inline.dropdown("range", "single", title, "month", options, "name", "range", "", "date-range-input") }}

                            {% set title %}{% trans 'From Date' %}{% endset %}
                            {{ inline.dateTime("fromDt", title, "", "", "custom-date-range", "", "") }}

                            {% set title %}{% trans 'To Date' %}{% endset %}
                            {{ inline.dateTime("toDt", title, "", "", "custom-date-range", "", "") }}

                            {% set title %}{% trans "Name" %}{% endset %}
                            {{ inline.inputNameGrid('name', title, "non-agenda-filter") }}

                            {% set title %}{% trans 'Event Type' %}{% endset %}
                            {{ inline.dropdown("eventTypeId", "single", title, "", [{eventTypeId: null, eventTypeName: "All"}]|merge(eventTypes), "eventTypeId", "eventTypeName", "", "non-agenda-filter") }}

                            {% set title %}{% trans "Layout / Campaign" %}{% endset %}
                            {% set helpText %}{% trans "Please select a Layout or Campaign for this Event to show" %}{% endset %}

                            <div class="form-group mr-1 mb-1 non-agenda-filter">
                                <label class="control-label mr-1" for="campaignId" title=""
                                       accesskey="">{{ title }}</label>
                                <select name="campaignId" id="campaignIdFilter" class="form-control"
                                        data-search-url="{{ url_for("campaign.search") }}"
                                        data-trans-campaigns="{% trans "Campaigns" %}"
                                        data-trans-layouts="{% trans "Layouts" %}"
                                        data-allow-clear="true"
                                        data-width="100%"
                                        title="{% trans "Layout / Campaign" %}"
                                        data-placeholder="{% trans "Layout / Campaign" %}"
                                        data-dropdownAutoWidth
                                >
                                </select>
                            </div>

                            {% set title %}{% trans "Displays" %}{% endset %}
                            <div class="form-group mr-1 mb-1 pagedSelect" style="min-width: 200px">
                                <label class="control-label mr-1" for="DisplayList" title=""
                                       accesskey="">{{ title }}</label>
                                <select id="DisplayList" class="form-control" name="displaySpecificGroupIds[]"
                                        data-width="100%"
                                        data-placeholder="{% trans "Displays" %}"
                                        data-search-url="{{ url_for("display.search") }}"
                                        data-search-term="display"
                                        data-id-property="displayGroupId"
                                        data-text-property="display"
                                        data-additional-property="displayGroupId"
                                        data-allow-clear="true"
                                        data-initial-key="displayGroupIds[]"
                                        multiple>
                                </select>
                            </div>

                            {% set title %}{% trans "Display Groups" %}{% endset %}
                            <div class="form-group mr-2 mb-1 pagedSelect" style="min-width: 200px">
                                <label class="control-label mr-1" for="DisplayGroupList" title=""
                                       accesskey="">{{ title }}</label>
                                <select id="DisplayGroupList" class="form-control" name="displayGroupIds[]"
                                        data-width="100%"
                                        data-placeholder="{% trans "Display Groups" %}"
                                        data-search-url="{{ url_for("displayGroup.search") }}"
                                        data-search-term="displayGroup"
                                        data-id-property="displayGroupId"
                                        data-text-property="displayGroup"
                                        data-allow-clear="true"
                                        data-initial-key="displayGroupIds[]"
                                        multiple>
                                </select>
                            </div>

                            {% set label %}{% trans "Direct Schedule?" %}{% endset %}
                            {% set title %}{% trans "Show only events scheduled directly on selected Displays/Groups" %}{% endset %}
                            <div class="form-group mr-1 mb-1">
                                <label class="control-label mr-1" title="{{ title }}" for="directSchedule" accesskey="">{{ label }}</label>
                                <div>
                                    <div class="input-group" style="height: 34px">
                                        <div class="input-group-text h-100">
                                            <input title="{{ title }}" type="checkbox" id="directSchedule" name="directSchedule">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {% set title %}{% trans "Only show schedules which appear on all filtered displays/groups?" %}{% endset %}
                            {% set label %}{% trans "Shared Schedule?" %}{% endset %}
                            <div class="form-group mr-1 mb-1">
                                <label class="control-label mr-1" title="{{ title }}" for="sharedSchedule" accesskey="">{{ label }}</label>
                                <div>
                                    <div class="input-group" style="height: 34px">
                                        <div class="input-group-text h-100">
                                            <input title="{{ title }}" type="checkbox" id="sharedSchedule" name="sharedSchedule">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {% set title %}{% trans 'Geo Aware?' %}{% endset %}
                            {% set options = [
                                { id: null, name: "Both"|trans },
                                { id: 0, name: "No"|trans },
                                { id: 1, name: "Yes"|trans }
                            ] %}
                            {{ inline.dropdown("geoAware", "single", title, "both", options, "id", "name", "", "non-agenda-filter") }}

                            {% set title %}{% trans 'Recurring?' %}{% endset %}
                            {% set options = [
                                { id: null, name: "Both" },
                                { id: 0, name: "No"|trans },
                                { id: 1, name: "Yes"|trans }
                            ] %}
                            {{ inline.dropdown("recurring", "single", title, "both", options, "id", "name", "", "non-agenda-filter") }}
                        </form>
                    </div>
                </div>

                <div class="card-header">
                    <ul class="nav nav-tabs card-header-tabs">
                        <li class="nav-item">
                            <a class="schedule-nav nav-link active" id="grid-tab" href="#grid-view" role="tab"
                               data-toggle="tab"><span>{% trans "Grid" %}</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="schedule-nav nav-link" id="calendar-tab" href="#calendar-view"
                               data-calendar-view="month" role="tab"
                               data-toggle="tab"><span>{% trans "Calendar" %}</span></a>
                        </li>
                    </ul>
                </div>

                <div class="card-body">
                    <div class="tab-content">
                    <div class="tab-pane active" id="grid-view">
                        <div class="XiboData pt-3">
                            <table id="schedule-grid" class="table table-striped w-100"
                                   data-state-preference-name="scheduleGrid">
                                <thead>
                                <tr>
                                    <th>{% trans 'ID' %}</th>
                                    <th></th>
                                    <th>{% trans 'Event Type' %}</th>
                                    <th>{% trans 'Name' %}</th>
                                    <th>{% trans 'Start' %}</th>
                                    <th>{% trans 'End' %}</th>
                                    <th>{% trans 'Event' %}</th>
                                    <th>{% trans 'Campaign ID' %}</th>
                                    <th>{% trans 'Display Groups' %}</th>
                                    <th>{% trans 'SoV' %}</th>
                                    <th>{% trans 'Max Plays per Hour' %}</th>
                                    <th>{% trans 'Geo Aware?' %}</th>
                                    <th>{% trans 'Recurring?' %}</th>
                                    <th>{% trans 'Recurrence Description' %}</th>
                                    <th>{% trans 'Recurrence Type' %}</th>
                                    <th>{% trans 'Recurrence Interval' %}</th>
                                    <th>{% trans 'Recurrence Repeats On' %}</th>
                                    <th>{% trans 'Recurrence End' %}</th>
                                    <th>{% trans 'Priority?' %}</th>
                                    <th>{% trans 'Criteria?' %}</th>
                                    <th>{% trans 'Created On' %}</th>
                                    <th>{% trans 'Updated On' %}</th>
                                    <th>{% trans 'Modified By' %}</th>
                                    <th class="rowMenu"></th>
                                </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="tab-pane" id="calendar-view">
                        <div class="row">
                            <div class="text-center text-danger col-lg-12" id="calendar-error-message">
                                <span>{% trans "Please select a Display, Display Group or Layout / Campaign to view the calendar" %}</span>
                            </div>
                            <div class="xibo-calendar-controls-container align-content-start justify-content-end col-xl-12 pl-0 form-inline text-right">
                                <div class="btn-group xibo-calendar-controls xibo-agenda-calendar-controls">
                                    <button type="button" class="btn btn-primary" data-calendar-nav="prev"><span
                                                class="fa fa-backward"></span> {% trans "Prev" %}</button>
                                    <button type="button" class="btn btn-white"
                                            data-calendar-nav="today">{% trans "Today" %}</button>
                                    <button type="button" class="btn btn-primary"
                                            data-calendar-nav="next">{% trans "Next" %} <span
                                                class="fa fa-forward"></span></button>
                                </div>
                                <div class="xibo-calendar-controls xibo-agenda-calendar-controls">
                                    <div class="inputgroup date calendar-date-picker-input" id="dateInput">
                                        <span class="btn btn-outline-dark date-open-button" role="button">
                                            <i class="fa fa-calendar"></i>
                                        </span>
                                        <input type="text" class="form-control" id="dateInputLink" data-input/>
                                    </div>
                                </div>
                                <div class="btn-group xibo-calendar-controls">
                                    {% if currentUser.featureEnabled("schedule.agenda") %}
                                        <button type="button" id="btn-agenda-view" class="btn btn-outline-info" data-calendar-view="agenda">{% trans "Agenda" %}</button>
                                    {% endif %}
                                    <button type="button" id="btn-month-view" class="btn btn-outline-info" data-calendar-view="month">{% trans "Back" %}</button>
                                </div>
                            </div>
                            <div class="text-center col-xl-12">
                                <h1 class="page-header"></h1>
                                <div class="calendar-loading">
                                    <span id="calendar-progress" class="fa fa-spin fa-cog"></span>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-12 cal-event-agenda-filter">
                                <!-- Time Slider -->
                                <div class="cal-event-time-bar">
                                    <div class="btn slider-step-btn time-picker-step-btn" data-step="-1">
                                        <span class="fa fa-step-backward"></span>
                                    </div>
                                    <input id="timePicker" type="text"
                                           data-slider-id='timePickerSlider'
                                           data-slider-min="0"
                                           data-slider-max="1439"
                                           data-slider-step="1"
                                           data-slider-value="0"
                                           data-slider-handle="square"
                                    />
                                    <div class="btn slider-step-btn time-picker-step-btn" data-step="1">
                                        <span class="fa fa-step-forward"></span>
                                    </div>
                                </div>

                                <!-- Geo location -->
                                <form class="form-inline cal-event-location">
                                    <button id="toggleMap" type="button" class="btn btn-primary pull-right"
                                            title="{% trans "Map" %}"><i class="fa fa-map"></i></button>
                                    <button id="getLocation" type="button" class="btn btn-white pull-right"
                                            title="{% trans "Get browser location!" %}"><i class="fa fa-map-marker"></i>
                                    </button>
                                    <button id="clearLocation" type="button" class="btn btn-white pull-right"
                                            title="{% trans "Clear coordinates!" %}"><i class="fa fa-times"></i>
                                    </button>
                                    <div class="form-group pull-right">
                                        <input type="email" class="form-control" id="geoLongitude"
                                               placeholder="Longitude">
                                    </div>
                                    <div class="form-group pull-right">
                                        <input type="text" class="form-control" id="geoLatitude" placeholder="Latitude">
                                    </div>
                                </form>

                                <!-- Geo location map -->
                                <div class="cal-event-location-map" data-default-lat="{{ defaultLat }}"
                                     data-default-long="{{ defaultLong }}">
                                    <div id="geoFilterAgendaMap" style="height: 400px; width: 100%"
                                         class="d-none"></div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div id="CalendarContainer" data-event-source="{{ url_for("schedule.calendar.data") }}"
                                 data-agenda-link="{{ url_for("schedule.events", {id: ':id'}) }}"
                                 data-calendar-type="{{ settings.CALENDAR_TYPE }}" class="col-sm-12">
                                <div class="calendar-view" id="Calendar"></div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="cal-legend">
                                    <ul>
                                        <li class="event-always"><span
                                                    class="fa fa-retweet"></span> {% trans "Always showing" %}</li>
                                        <li class="event-info"><span
                                                    class="fa fa-desktop"></span> {% trans "Single Display" %}</li>
                                        <li class="event-success"><span
                                                    class="fa fa-desktop"></span> {% trans "Multi Display" %}</li>
                                        <li class="event-important"><span
                                                    class="fa fa-bullseye"></span> {% trans "Priority" %}</li>
                                        <li class="event-special"><span
                                                    class="fa fa-repeat"></span> {% trans "Recurring" %}</li>
                                        <li class="event-inverse"><span
                                                    class="fa fa-lock"></span> {% trans "View Only" %}</li>
                                        <li class="event-command"><span
                                                    class="fa fa-wrench"></span> {% trans "Command" %}</li>
                                        <li class="event-interrupt"><span
                                                    class="fa fa-hand-paper"></span> {% trans "Interrupt" %}</li>
                                        <li class="event-geo-location"><span
                                                    class="fa fa-map-marker"></span> {% trans "Geo Location" %}</li>
                                        <li class="event-action"><span
                                                    class="fa fa-paper-plane "></span> {% trans "Interactive Action" %}
                                        </li>
                                        <li class="event-sync"><span
                                                    class="fa fa-refresh"></span> {% trans "Synchronised" %}</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javaScript %}
    {# Initialise JS variables #}
    <script type="text/javascript" nonce="{{ cspNonce }}">
        {# JS variables #}
        var scheduleRecurrenceDeleteUrl = "{{ url_for("schedule.recurrence.delete.form", {id:':id'}) }}";
        var layoutPreviewUrl = "{{ url_for("layout.preview", {id: ':id'}) }}";
        var scheduleSearchUrl = "{{ url_for("schedule.search") }}";

        {# Custom translations #}
        var schedulePageTrans = {
            always: "{% trans "Always" %}",
            adjustTimesofTimer: "{% trans "Adjust the times of this timer. To add or remove a day, use the Display Profile." %}",
            daysOfTheWeek: {
                monday: "{% trans "Monday" %}",
                tuesday: "{% trans "Tuesday" %}",
                wednesday: "{% trans "Wednesday" %}",
                thursday: "{% trans "Thursday" %}",
                friday: "{% trans "Friday" %}",
                saturday: "{% trans "Saturday" %}",
                sunday: "{% trans "Sunday" %}",
            },
        };
    </script>

    {# Add page source code bundle ( JS ) #}
    <script src="{{ theme.rootUri() }}dist/leaflet.bundle.min.js?v={{ version }}&rev={{revision}}" nonce="{{ cspNonce }}"></script>
    <script src="{{ theme.rootUri() }}dist/pages/schedule-page.bundle.min.js?v={{ version }}&rev={{revision}}" nonce="{{ cspNonce }}"></script>
{% endblock %}