{#
/*
 * Copyright (C) 2023 Xibo Signage Ltd
 *
 * Xibo - Digital Signage - https://xibosignage.com
 *
 * 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>
                <li class="nav-item criteria"><a class="nav-link" href="#tab-criteria" role="tab" data-toggle="tab"><span>{% trans "Criteria" %}</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"
                  data-set-displays-from-grid-filters="{{ setDisplaysFromFilter }}">
                <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 },
                            { name: "data-initial-key", value: "displayGroupIds[]"},
                            { name: "data-id-property", value: "displayGroupId"},
                            { name: "data-text-property", value: "displayGroup"}
                        ] %}
                        {{ 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 style="{% if not (currentUser.featureEnabled('campaign.view') or currentUser.featureEnabled('layout.view')) %}display: none;{% endif %}">
                            <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>

                        <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 %}
                        {% set attributes = [
                            { name: "data-width", value: "100%" },
                            { name: "data-search-url", value: url_for("command.search") },
                            { name: "data-search-term", value: "command" },
                            { name: "data-id-property", value: "commandId" },
                            { name: "data-text-property", value: "command" }
                        ] %}
                        {{ forms.dropdown("commandId", "single", title, "", null, "commandId", "command", helpText, "pagedSelect command-control", "", "", "", attributes) }}

                        {% set title %}{% trans "DataSet" %}{% endset %}
                        {% set helpText %}{% trans "Please select the real time DataSet related to this Data Connector event" %}{% endset %}

                        {% set attributes = [
                            { name: "data-width", value: "100%" },
                            { name: "data-search-url", value: url_for("dataSet.search") ~ "?isRealTime=1" },
                            { name: "data-search-term", value: "dataSet" },
                            { name: "data-id-property", value: "dataSetId" },
                            { name: "data-text-property", value: "dataSet" }
                        ] %}
                        {{ forms.dropdown("dataSetId", "single", title, "", null, "dataSetId", "dataSet", helpText, "pagedSelect data-connector-control", "", "", "", attributes) }}

                        {% set title %}{% trans "Data Connector Parameters" %}{% endset %}
                        {% set helpText %}{% trans "Optionally provide any parameters to be used by the Data Connector." %}{% endset %}
                        {{ forms.input("dataSetParams", title, "", helpText, 'data-connector-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', "", "", "", "0") }}

                        {% 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', "", "", "", "0") }}

                        {% 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', "", "", "", "0") }}

                        {% 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" min="0" 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 class="tab-pane" id="tab-criteria">
                        {% set message %}{% trans "Set criteria to determine when this event is active. All conditions must be true for an event to be included in the schedule loop. Events without criteria are always active." %}{% endset %}
                        {{ forms.message(message) }}

                        <div class="form-criteria-field-headings">
                            <div class="form-group schedule-criteria-row">
                                <div class="col-form-label schedule-criteria-cell schedule-criteria-type">{{ "Type"|trans }}</div>
                                <div class="col-form-label schedule-criteria-cell schedule-criteria-metric">{{ "Metric"|trans }}</div>
                                <div class="col-form-label schedule-criteria-cell schedule-criteria-condition">{{ "Condition"|trans }}</div>
                                <div class="col-form-label schedule-criteria-cell schedule-criteria-value">{{ "Value"|trans }}</div>
                            </div>
                        </div>

                        <div id="scheduleCriteriaFields" data-criteria="" data-schedule-criteria="{{ scheduleCriteria|json_encode|e('html_attr') }}" data-criteria-default-condition="{{ criteriaDefaultCondition|json_encode|e('html_attr') }}"></div>
                    </div>
                </div>
            </form>
        </div>
    </div>
{% endblock %}
