{#
/**
 * 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") %}
            <button class="btn btn-icon btn-success XiboFormButton" title="{% trans "Add a new Scheduled event" %}"
                    href="{{ url_for("schedule.add.form") }}"><i class="fa fa-plus" aria-hidden="true"></i>
            </button>
        {% endif %}
        <button class="btn btn-icon 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="ots-displays-page">
        <div class="page-header ots-page-header">
            <h1>{% trans "Schedule" %}</h1>
            <p class="text-muted">{% trans "Schedule content to your displays." %}</p>
        </div>

        <div class="widget dashboard-card ots-displays-card">
            <div class="widget-body ots-displays-body">
                <div class="XiboGrid" id="{{ random() }}" data-grid-name="scheduleGridView">
                    <div class="XiboFilter card mb-3 bg-light dashboard-card ots-filter-card">
                        <div class="ots-filter-header">
                            <h3 class="ots-filter-title">{% trans "Filter Schedule" %}</h3>
                            <button type="button" class="ots-filter-toggle" id="ots-filter-collapse-btn" title="{% trans 'Toggle filter panel' %}">
                                <i class="fa fa-chevron-down"></i>
                            </button>
                        </div>
                        <div class="ots-filter-content collapsed" id="ots-filter-content">
                            <div class="FilterDiv card-body" id="schedule-filter">
                        <ul class="nav nav-tabs" role="tablist">
                            <li class="nav-item"><a class="nav-link active" href="#general-filter" role="tab" data-toggle="tab" aria-selected="true"><span>{% trans "General" %}</span></a></li>
                            <li class="nav-item"><a class="nav-link" href="#advanced-filter" role="tab" data-toggle="tab" aria-selected="false"><span>{% trans "Advanced" %}</span></a></li>
                        </ul>
                        <form class="form-inline">
                            <div class="tab-content">
                                <div class="tab-pane active" id="general-filter" role="tabpanel">
                                    {% set title %}{% trans "Range" %}{% endset %}
                                    {% set range %}{% trans "Custom" %}{% endset %}
                                    {% set day %}{% trans "Day" %}{% endset %}
                                    {% set week %}{% trans "Week" %}{% endset %}
                                    {% set month %}{% trans "Month" %}{% endset %}
                                    {% set year %}{% trans "Year" %}{% endset %}
                                    {% set options = [
                                        { name: "custom", range: range },
                                        { name: "day", range: day },
                                        { name: "week", range: week },
                                        { name: "month", range: month },
                                        { name: "year", range: year },
                                    ] %}
                                    {{ 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 d-none", "", "") }}

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

                                    {% set title %}{% trans "Date Controls" %}{% endset %}
                                    <div class="form-group mr-1 mb-1 controls-date-range"> 
                                        <div class="control-label mr-1" title=""
                                            accesskey="">{{ title }}</div>
                                        <div class="controls-date-inputs">
                                            <div class="inputgroup date" id="dateInput">
                                                <span class="btn btn-outline-primary date-open-button" role="button">
                                                    <i class="fa fa-calendar"></i>
                                                </span>
                                                <input type="text" class="form-control" id="dateInputLink" data-input style="display:none;"/>
                                            </div>
                                            <div class="btn-group">
                                                <button type="button" class="btn btn-secondary" data-calendar-nav="prev"><span class="fa fa-caret-left"></span> {% trans "Prev" %}</button>
                                                <button type="button" class="btn btn-outline-secondary" data-calendar-nav="today">{% trans "Today" %}</button>
                                                <button type="button" class="btn btn-secondary" data-calendar-nav="next">{% trans "Next" %} <span class="fa fa-caret-right"></span></button>
                                            </div>
                                        </div>
                                    </div>

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

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

                                    {% 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">
                                        <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>
                                </div>

                                <div class="tab-pane" id="advanced-filter" role="tabpanel">
                                    {% set label %}{% trans "Direct Schedule?" %}{% endset %}
                                    {% set title %}{% trans "Show only events scheduled directly on selected Displays/Groups" %}{% endset %}
                                    <div class="form-group ml-2 mr-3 mb-1">
                                        <div class="form-check">
                                            <input title="{{ title }}" class="form-check-input" type="checkbox" id="directSchedule" name="directSchedule">
                                            <label class="form-check-label" title="{{ title }}" for="directSchedule" accesskey="">{{ label }}</label>
                                        </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 ml-2 mr-3 mb-1">
                                        <div class="form-check">
                                            <input title="{{ title }}" class="form-check-input" type="checkbox" id="sharedSchedule" name="sharedSchedule">
                                            <label class="form-check-label" title="{{ title }}" for="sharedSchedule" accesskey="">{{ label }}</label>
                                        </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") }}

                                    {% 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") }}
                                </div>
                            </div>
                        </form>
                            </div>
                        </div>
                    </div>
                
                <div class="XiboSchedule card dashboard-card ots-table-card">
                    <div class="card-header">
                        <ul class="nav nav-tabs card-header-tabs">
                            <li class="nav-item">
                                <a class="schedule-nav grid-nav nav-link active" id="grid-tab" href="#grid-view"
                                data-schedule-view="grid"
                                role="tab"
                                data-toggle="tab"><span>{% trans "Grid" %}</span></a>
                            </li>
                            <li class="nav-item">
                                <a class="schedule-nav calendar-nav nav-link" id="calendar-tab" href="#calendar-view"
                                data-schedule-view="calendar"
                                data-calendar-view="month"
                                role="tab"
                                data-toggle="tab"><span>{% trans "Calendar" %}</span></a>
                            </li>
                        </ul>
                    </div>

                    <div class="card-body">
                        <div class="xibo-calendar-header-container col-xl-12 d-inline-flex justify-content-between">
                            <div class="xibo-calendar-header text-center d-inline-flex">
                                <h1 class="page-header"></h1>
                            </div>

                            <div class="calendar-loading">
                                <span id="calendar-progress-table" class="fa fa-spin fa-cog"></span>
                                <span id="calendar-progress" class="fa fa-spin fa-cog"></span>
                            </div>
                        </div>

                        <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 id="CalendarContainer"
                                    data-agenda-link="{{ url_for("schedule.events", {id: ':id'}) }}"
                                    data-calendar-type="{{ settings.CALENDAR_TYPE }}" class="col-sm-12"
                                    data-default-lat="{{ defaultLat }}"
                                    data-default-long="{{ defaultLong }}">
                                    <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 = "{{ theme.rootUri() }}preview/layout/preview/:id";
        var scheduleSearchUrl = "{{ url_for("schedule.search") }}";
        var userAgendaViewEnabled = "{{ currentUser.featureEnabled('schedule.agenda') }}";

        {# 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 %}