{#
/**
 * Copyright (C) 2021 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 "form-base.twig" %}
{% import "forms.twig" as forms %}

{% block formTitle %}
    {% trans "Schedule Event" %}
{% endblock %}

{% block callBack %}setupScheduleForm{% endblock %}

{% block formButtons %}
    {% trans "Cancel" %}, XiboDialogClose()
    {% if not isScheduleNow %}
        {% trans "Next" %}, XiboDialogApply("#scheduleAddForm")
    {% endif %}
    {% trans "Save" %}, beforeSubmitScheduleForm($("#scheduleAddForm"))
{% endblock %}

{% block formHtml %}
    <div class="row">
        <div class="col-md-12">
            <ul class="nav nav-tabs" role="tablist">
                <li class="nav-item"><a class="nav-link active" href="#general" role="tab" data-toggle="tab"><span>{% trans "General" %}</span></a></li>
                <li class="nav-item repeats"><a class="nav-link" href="#repeats" role="tab" data-toggle="tab"><span>{% trans "Repeats" %}</span></a></li>
                <li class="nav-item reminders"><a class="nav-link" href="#reminders" role="tab" data-toggle="tab"><span>{% trans "Reminder" %}</span></a></li>
                <li class="nav-item geoSchedule"><a class="nav-link" href="#geoSchedule" role="tab" data-toggle="tab"><span>{% trans "Geo Location" %}</span></a></li>
            </ul>
            {% set dayPartMessage %}{% trans "Select the start time for this event" %}{% endset %}
            {% set notDayPartMessage %}{% trans "Start and end time will be defined by the daypart's configuration for this day of the week. Use a repeating schedule to apply this event over multiple days" %}{% endset %}
            <form id="scheduleAddForm" autocomplete="off" class="form-horizontal" method="post" action="{{ url_for("schedule.add") }}"
                  data-daypart-message="{{ dayPartMessage }}"
                  data-not-daypart-message="{{ notDayPartMessage }}"
                  data-default-lat="{{ defaultLat }}"
                  data-default-long = "{{ defaultLong }}"
                  data-library-get-url="{{ url_for("library.search") }}?fullScreenScheduleCheck=true&types[]=image&types[]=video"
                  data-playlist-get-url="{{ url_for("playlist.search") }}?fullScreenScheduleCheck=true">
                <div class="tab-content">
                    <div class="tab-pane active" id="general">
                        {% set title %}{% trans "Name" %}{% endset %}
                        {% set helpText %}{% trans "Optional Name for this Event (1-50 characters)" %}{% endset %}
                        {{ forms.input("name", title, "", helpText) }}
                        
                        {% if isScheduleNow %}
                            {{ forms.hidden("eventTypeId", eventTypeId) }}
                        {% else %}
                            {% set title %}{% trans "Event Type" %}{% endset %}
                            {% set helpText %}{% trans "Select the type of event to schedule" %}{% endset %}
                            {{ forms.dropdown("eventTypeId", "single", title, "", eventTypes, "eventTypeId", "eventTypeName", helpText) }}
                        {% endif %}


                        {% set title %}{% trans "Display" %}{% endset %}
                        {% set helpText %}{% trans "Please select one or more displays / groups for this event to be shown on." %}{% endset %}
                        {% set attributes = [
                            { name: "data-search-url", value:  url_for("displayGroup.search") },
                            { name: "data-trans-groups", value:  "Groups"|trans },
                            { name: "data-trans-display", value:  "Display"|trans }
                        ] %}
                        {{ forms.dropdown("displayGroupIds[]", "dropdownmulti", title, displayGroupIds, displayGroups, "displayGroupId", "displayGroup", helpText, "", "", "", "", attributes) }}

                        {% set title %}{% trans "Dayparting" %}{% endset %}
                        {% set helpText %}{% trans "Select the dayparting information for this event. To set your own times select custom and to have the event run constantly select Always." %}{% endset %}
                        <div class="form-group row day-part-control">
                            <label class="col-sm-2 control-label" for="dayPartId">{{ title }}</label>
                            <div class="col-sm-10">
                                <select class="form-control" name="dayPartId" id="dayPartId">
                                    {% for dayPart in dayParts %}
                                        <option {% if dayPart.isCustom == 1 %}selected{% endif %}
                                                value="{{ dayPart.dayPartId }}"
                                                data-is-always="{{ dayPart.isAlways }}"
                                                data-is-custom="{{ dayPart.isCustom }}">{{ dayPart.name }}</option>
                                    {% endfor %}
                                </select>
                                <small class="form-text text-muted">{{ helpText }}</small>
                            </div>
                        </div>

                        {% set title %}{% trans "Use Relative time?" %}{% endset %}
                        {% set helpText %}{% trans "Switch between relative time inputs and Date pickers for start and end time." %}{% endset %}
                        {{ forms.checkbox("relativeTime", title, relativeTime, helpText, 'relative-time-checkbox') }}

                        {% set title %}{% trans "Hours" %}{% endset %}
                        {% set helpText %}{% trans "Hours this event should be scheduled for" %}{% endset %}
                        {{ forms.number("hours", title, "", helpText, "duration-part relative-time-control") }}

                        {% set title %}{% trans "Minutes" %}{% endset %}
                        {% set helpText %}{% trans "Minutes this event should be scheduled for" %}{% endset %}
                        {{ forms.number("minutes", title, "", helpText, "duration-part relative-time-control") }}

                        {% set title %}{% trans "Seconds" %}{% endset %}
                        {% set helpText %}{% trans "Seconds this event should be scheduled for" %}{% endset %}
                        {{ forms.number("seconds", title, "", helpText, "schedule-now-seconds-field duration-part relative-time-control") }}

                        {% set messageNoSyncTimezone %}{% trans %}Your event will be scheduled from [fromDt] to [toDt] in each of your selected Displays respective timezones{% endtrans %}{% endset %}
                        {% set messageSyncTimezone %}{% trans %}Your event will be scheduled from [fromDt] to [toDt] in the CMS timezone, please check this covers each of your Displays in their respective timezones.{% endtrans %}{% endset %}
                        <div class="alert alert-info scheduleNowMessage d-none relative-time-control" data-template-sync="{{ messageSyncTimezone }}" data-template-no-sync="{{ messageNoSyncTimezone }}"></div>

                        {% set title %}{% trans "Start Time" %}{% endset %}
                        {% set helpText %}{% trans "Select the start time for this event" %}{% endset %}
                        {{ forms.dateTime("fromDt", title, "", helpText, "starttime-control", "required") }}

                        {% set title %}{% trans "End Time" %}{% endset %}
                        {% set helpText %}{% trans "Select the end time for this event" %}{% endset %}
                        {{ forms.dateTime("toDt", title, "", helpText, "endtime-control", "required") }}

                        {# Campaign / Layout list. We want to build two arrays for us to use. #}
                        {% set attributes = [
                            { name: "data-search-url", value:  url_for("campaign.search") ~ "?type=list" },
                            { name: "data-search-is-layout-specific", value: -1 },
                            { name: "data-trans-layout", value: "Layout"|trans },
                            { name: "data-trans-layout-help-text", value: "Please select a Layout for this Event to show"|trans },
                            { name: "data-trans-campaign", value: "Campaign"|trans },
                            { name: "data-trans-campaign-help-text", value: "Please select a Campaign for this Event to show"|trans },
                        ] %}

                        {% set title %}{% trans "Layout" %}{% endset %}
                        {% set helpText %}{% trans "Please select a Layout for this Event to show" %}{% endset %}
                        {{ forms.dropdown("campaignId", "single", title, campaign.campaignId, [campaign], "campaignId", "campaign", helpText, "layout-control", "", "", "", attributes, "", "", "", readonlySelect) }}

                        {% set title %}{% trans "Media" %}{% endset %}
                        {% set helpText %}{% trans "Select a Media file from the Library to use. The selected file will be shown full screen for this event." %}{% endset %}
                        {{ forms.inputFullScreenSchedule('media', title, "", helpText, "media-control full-screen-control", mediaId, "", "", readonlySelect) }}

                        {% set title %}{% trans "Playlist" %}{% endset %}
                        {% set helpText %}{% trans "Select a Playlist to use. The selected playlist will be shown full screen for this event." %}{% endset %}
                        {{ forms.inputFullScreenSchedule('playlist', title, "", helpText, "playlist-control full-screen-control", playlistId, "", "", readonlySelect) }}
                        {{ forms.hidden('fullScreenCampaignId') }}

                        <div class="form-group row preview-button-container">
                            <div class="offset-md-2 col-md-10">
                                <a id="previewButton" class="btn btn-success" target="_blank" data-url="{{ url_for("campaign.preview", {id: ':id'}) }}">{% trans "Preview" %} <span class="fa fa-tablet"></span></a>
                                <small class="form-text text-muted">{% trans "Preview your selection in a new tab" %}</small>
                            </div>
                        </div>

                        <div class="form-group row interrupt-control" style="display: flex;">
                            <label class="col-sm-2 control-label" for="shareOfVoice" accesskey="">{% trans "Share of Voice" %}</label>
                            <div class="col-sm-5">
                                <input class="form-control" name="shareOfVoice" type="number" id="shareOfVoice" value="0" min="0" max="3600" step="1">
                                <small class="form-text text-muted">{% trans "The amount of time this Layout should be shown, in seconds per hour." %}</small>
                            </div>

                            <div class="col-sm-5">
                                <input class="form-control" name="shareOfVoicePercentage" type="number" id="shareOfVoicePercentage" value="">
                                <small class="form-text text-muted">{% trans "As a percentage" %}</small>
                            </div>
                        </div>

                        {% set title %}{% trans "Action Type" %}{% endset %}
                        {% set helpText %}{% trans "Please select action Type" %}{% endset %}
                        {% set navLayout %}{% trans "Navigate to Layout" %}{% endset %}
                        {% set command %}{% trans "Command" %}{% endset %}
                        {% set options = [
                            { typeid: "navLayout", type: navLayout },
                            { typeid: "command", type: command },
                        ] %}
                        {{ forms.dropdown("actionType", "single", title,"", options, "typeid","type", helpText, 'action-control') }}

                        {% set title %}{% trans "Trigger Code" %}{% endset %}
                        {% set helpText %}{% trans "Web hook trigger code for this Action" %}{% endset %}
                        {{ forms.input("actionTriggerCode", title, "", helpText, 'action-control') }}

                        {% set title %}{% trans "Layout Code" %}{% endset %}
                        {% set helpText %}{% trans "Please select the Code identifier for the Layout that Player should navigate to when this Action is triggered." %}{% endset %}

                        {% set attributes = [
                            { name: "data-width", value: "100%" },
                            { name: "data-search-url", value: url_for("layout.code.search") },
                            { name: "data-search-term", value: "code" },
                            { name: "data-id-property", value: "code" },
                            { name: "data-text-property", value: "code" }
                        ] %}
                        {{ forms.dropdown("actionLayoutCode", "single", title, "", null, "code", "code", helpText, "pagedSelect action-control layout-code-control", "", "", "", attributes) }}

                        {% set title %}{% trans "Command" %}{% endset %}
                        {% set helpText %}{% trans "Please select a command for this Event." %}{% endset %}
                        {{ forms.dropdown("commandId", "single", title, "", [{commandId: "", command: ""}]|merge(commands), "commandId", "command", helpText, "command-control") }}

                        {% set title %}{% trans "Display Order" %}{% endset %}
                        {% set helpText %}{% trans "Please select the order this event should appear in relation to others when there is more than one event scheduled" %}{% endset %}
                        {{ forms.number("displayOrder", title, "", helpText, 'displayOrder-control') }}

                        {% set title %}{% trans "Priority" %}{% endset %}
                        {% set helpText %}{% trans "Sets the event priority - events with the highest priority play in preference to lower priority events." %}{% endset %}
                        {{ forms.number("isPriority", title, "", helpText, 'priority-control') }}

                        {% set title %}{% trans "Maximum plays per hour" %}{% endset %}
                        {% set helpText %}{% trans "Limit the number of times this event will play per hour on each display. For unlimited plays set to 0." %}{{ forms.playerCompat("R308", "", "", "", "R306", "") }}{% endset %}
                        {{ forms.number("maxPlaysPerHour", title, 0, helpText, 'max-plays-control') }}

                        {% set title %}{% trans "Run at CMS Time?" %}{% endset %}
                        {% set helpText %}{% trans "When selected, your event will run according to the timezone set on the CMS, otherwise the event will run at Display local time" %}{% endset %}
                        {{ forms.checkbox("syncTimezone", title, 0, helpText) }}
                    </div>

                    <div class="tab-pane" id="repeats">
                        {% set title %}{% trans "Repeats" %}{% endset %}
                        {% set helpText %}{% trans "Select the type of Repeat required for this Event." %}{% endset %}
                        {% set noneOption %}{% trans "None" %}{% endset %}
                        {% set minute %}{% trans "Per Minute" %}{% endset %}
                        {% set hourly %}{% trans "Hourly" %}{% endset %}
                        {% set daily %}{% trans "Daily" %}{% endset %}
                        {% set weekly %}{% trans "Weekly" %}{% endset %}
                        {% set monthly %}{% trans "Monthly" %}{% endset %}
                        {% set yearly %}{% trans "Yearly" %}{% endset %}
                        {% set options = [
                            { id: "", name: noneOption },
                            { id: "Minute", name: minute },
                            { id: "Hour", name: hourly},
                            { id: "Day", name: daily},
                            { id: "Week", name: weekly},
                            { id: "Month", name: monthly},
                            { id: "Year", name: yearly}
                        ] %}
                        {{ forms.dropdown("recurrenceType", "single", title, "", options, "id", "name", helpText) }}

                        {% set helpText %}{% trans "Use the drop-down to select which days of the week this Event should be repeated." %}{% endset %}
                        {% set monday %}{% trans "Monday" %}{% endset %}
                        {% set tuesday %}{% trans "Tuesday" %}{% endset %}
                        {% set wednesday %}{% trans "Wednesday" %}{% endset %}
                        {% set thursday %}{% trans "Thursday" %}{% endset %}
                        {% set friday %}{% trans "Friday" %}{% endset %}
                        {% set saturday %}{% trans "Saturday" %}{% endset %}
                        {% set sunday %}{% trans "Sunday" %}{% endset %}
                        {% set options = [
                            { id: 1, name: monday },
                            { id: 2, name: tuesday },
                            { id: 3, name: wednesday },
                            { id: 4, name: thursday },
                            { id: 5, name: friday },
                            { id: 6, name: saturday },
                            { id: 7, name: sunday },
                        ] %}
                        {{ forms.dropdown("recurrenceRepeatsOn[]", "dropdownmulti", "", "", options, "id", "name", helpText, "repeat-weekly-control-group") }}

                        {% set helpText %}{% trans "Should this Event Repeat by Day of the month (eg. Monthly on Day 21) or by a Weekday in the month (eg. Monthly on the third Thursday)." %}{% endset %}
                        {% set attributes = [
                            { name: "data-trans-day", value: "on the [DAY] day"|trans },
                            { name: "data-trans-weekday", value: "on the [POSITION] [WEEKDAY]"|trans }
                        ] %}
                        {{ forms.dropdown("recurrenceMonthlyRepeatsOn", "single", "", 0, [], "id", "name", helpText, "repeat-monthly-control-group", "", "", "", attributes) }}

                        {% set title %}{% trans "Every" %}{% endset %}
                        {% set helpText %}{% trans "Include a number to determine the Repeat frequency required for this Event." %}{% endset %}
                        <div class="form-group row repeat-control-group">
                            <label class="col-sm-2 control-label" for="recurrenceDetail">{{ title }}</label>
                            <div class="col-sm-10">
                                <div class="input-group">
                                    <input class="form-control" name="recurrenceDetail" type="number" id="recurrenceDetail" value="{{ event.recurrenceDetail }}" />
                                    <div class="input-group-append">
                                        <span class="input-group-text input-group-addon"></span>
                                    </div>
                                </div>
                                <span class="form-text text-muted">{{ helpText }}</span>
                            </div>
                        </div>

                        {% set title %}{% trans "Until" %}{% endset %}
                        {% set helpText %}{% trans "Provide a date and time to end the Repeat for this Event. Leave empty to Repeat indefinitely." %}{% endset %}
                        {{ forms.dateTime("recurrenceRange", title, "", helpText, "repeat-control-group", "", "") }}
                    </div>

                    <div class="tab-pane" id="reminders">
                        {% set message %}{% trans "Use the form fields below to create a set of reminders for this event. New fields can be added by clicking on the + icon at the end of the row. Use the tick box to receive a notification by email alternatively reminders will be shown in the message center." %}{% endset %}
                        {{ forms.message(message) }}
                        <div id="reminderFields" data-reminders="{{ reminders|json_encode }}"></div>
                    </div>

                    <div class="tab-pane" id="geoSchedule">
                        {% set title %}{% trans "Geo Schedule?" %}{% endset %}
                        {% set helpText %}{% trans "Should this event be location aware? Enable this checkbox and select an area by drawing a polygon or rectangle layer on the map below." %}{% endset %}
                        {{ forms.checkbox("isGeoAware", title, 0, helpText, "") }}

                        <div id="geoScheduleMap" style="height: 500px; width: 100%" class="d-none"></div>

                        {{ forms.hidden("geoLocation", "") }}
                    </div>
                </div>
            </form>
        </div>
    </div>
{% endblock %}