{#
/**
 * Copyright (C) 2020 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 %}{% set campaignName = campaign.campaign %}{% trans %}{{ campaignName }} - Campaign Builder{% endtrans %} | {% endblock %}

{% set hideNavigation = "1" %}

{% block pageContent %}
    <div id="campaign-builder"
         data-campaign-id="{{ campaign.campaignId }}">
        <div class="back-button">
            <a id="backBtn" class="btn btn-primary" href="{{ url_for("campaign.view") }}">
                <i class="fa fa-angle-left"></i>
                <span>{{ "Back"|trans }}</span>
            </a>
        </div>

        <div class="widget mt-3">
            <div class="widget-body">
                <div class="row">
                    <div class="col-12">
                        <div class="campaign-title">
                            <h1>{{ campaign.campaign }}</h1>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-6">
                        <ul class="nav nav-tabs" role="tablist">
                            <li class="nav-item"><a class="nav-link active" href="#tab-general" role="tab" data-toggle="tab"><span>{% trans "General" %}</span></a></li>
                            <li class="nav-item"><a class="nav-link" href="#tab-refs" role="tab" data-toggle="tab"><span>{% trans "Reference" %}</span></a></li>
                        </ul>
                        <form id="campaign-builder-form-details" class="XiboForm form-horizontal"
                             method="put"
                             action="{{ url_for("campaign.edit", {id: campaign.campaignId}) }}">
                            <div class="tab-content">
                                <div class="tab-pane active" id="tab-general">

                                    {% set title %}{% trans "Name" %}{% endset %}
                                    {% set helpText %}{% trans "The Name for this Campaign" %}{% endset %}
                                    {{ forms.input("name", title, campaign.campaign, helpText) }}

                                    {% set title %}{% trans "Start Date" %}{% endset %}
                                    {% set helpText %}{% trans "Select the start date for this campaign" %}{% endset %}
                                    {{ forms.date("startDt", title, campaign.getStartDt(), helpText, "starttime-control", "required", "") }}

                                    {% set title %}{% trans "End Date" %}{% endset %}
                                    {% set helpText %}{% trans "Select the end date for this campaign" %}{% endset %}
                                    {{ forms.date("endDt", title, campaign.getEndDt(), helpText, "endtime-control", "required", "") }}

                                    {% 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-search-term", value: "displayGroup" },
                                        { 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 "Target Type" %}{% endset %}
                                    {% set helpText %}{% trans "How would you like to set the target for this campaign?" %}{% endset %}
                                    {% set options = [
                                        { id: "plays", name: "Plays"|trans },
                                        { id: "budget", name: "Budget"|trans },
                                        { id: "imp", name: "Impressions"|trans },
                                    ] %}
                                    {{ forms.dropdown("targetType", "single", title, campaign.targetType, options, "id", "name", helpText, "campaign-type-ad") }}

                                    {% set title %}{% trans "Target" %}{% endset %}
                                    {% set helpText %}{% trans "What is the target number for this Campaign over its entire playtime" %}{% endset %}
                                    {{ forms.number("target", title, campaign.target, helpText) }}

                                    {% if currentUser.featureEnabled("tag.tagging") %}
                                        {% set title %}{% trans "Tags" %}{% endset %}
                                        {% set helpText %}{% trans "Tags for this Campaign - Comma separated string of Tags or Tag|Value format. If you choose a Tag that has associated values, they will be shown for selection below." %}{% endset %}
                                        {{ forms.inputWithTags("tags", title, campaign.getTagString(), helpText, 'tags-with-value') }}

                                        <p id="loadingValues" style="margin-left: 17%"></p>

                                        {% set title %}{% trans "Tag value" %}{% endset %}
                                        {{ forms.dropdown("tagValue", "single", title, "", options, "key", "value") }}

                                        <div id="tagValueContainer">
                                            {% set title %}{% trans "Tag value" %}{% endset %}
                                            {% set helpText %}{% trans "Please provide the value for this Tag and confirm by pressing enter on your keyboard." %}{% endset %}
                                            {{ forms.input("tagValueInput", title, "", helpText) }}
                                        </div>

                                        <div id="tagValueRequired" class="alert alert-info">
                                            <p>{% trans "This tag requires a set value, please select one from the Tag value dropdown or provide Tag value in the dedicated field." %}</p>
                                        </div>
                                    {% endif %}
                                </div>
                                <div class="tab-pane" id="tab-refs">
                                    {{ forms.message("Add reference fields if needed"|trans) }}

                                    {% set title %}{% trans "Reference 1" %}{% endset %}
                                    {{ forms.input("ref1", title, campaign.ref1, null) }}

                                    {% set title %}{% trans "Reference 2" %}{% endset %}
                                    {{ forms.input("ref2", title, campaign.ref2, null) }}

                                    {% set title %}{% trans "Reference 3" %}{% endset %}
                                    {{ forms.input("ref3", title, campaign.ref3, null) }}

                                    {% set title %}{% trans "Reference 4" %}{% endset %}
                                    {{ forms.input("ref4", title, campaign.ref4, null) }}

                                    {% set title %}{% trans "Reference 5" %}{% endset %}
                                    {{ forms.input("ref5", title, campaign.ref5, null) }}
                                </div>
                            </div>

                            {{ forms.button("Save"|trans, "submit", null, null, null, "btn-success") }}
                        </form>
                    </div>
                    <div class="col-lg-6">
                        <div class="row">
                            <div class="col-md-12">
                                {# Layouts #}
                                {% set attributes = [
                                    { name: "data-search-url", value:  url_for("layout.search") },
                                    { name: "data-search-term", value: "layout" },
                                    { name: "data-search-term-tags", value: "tags" },
                                    { name: "data-trans-layout", value: "Layout"|trans },
                                    { name: "data-id-property", value: "layoutId" },
                                    { name: "data-text-property", value: "layout" },
                                    { name: "data-placeholder--id", value: null },
                                    { name: "data-placeholder--value", value: "Add a layout"|trans },
                                ] %}

                                {% set title %}{% trans "Add Layout" %}{% endset %}
                                {% set helpText %}{% trans "Please select a Layout to add to this Campaign" %}{% endset %}
                                {{ forms.dropdown("layoutId", "single", title, event.campaignId, null, "campaignId", "campaign", helpText, "layout-control", "", "", "", attributes) }}
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                    <table id="table-campaign-builder-layout-assignments"
                                           data-search-url="{{ url_for("campaign.search") }}?campaignId={{ campaign.campaignId }}&embed=layouts"
                                           data-assignment-delete-url="{{ url_for("campaign.layout.remove.form", {id: campaign.campaignId}) }}"
                                           class="table table-striped">
                                    <thead>
                                    <tr>
                                        <th>{% trans "ID" %}</th>
                                        <th>{% trans "Name" %}</th>
                                        <th>{% trans "Duration" %}</th>
                                        <th>{% trans "Day Parts" %}</th>
                                        <th>{% trans "Days of the week" %}</th>
                                        <th>{% trans "Geofence" %}</th>
                                        <th></th>
                                    </tr>
                                    </thead>
                                    <tbody>

                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="row">
                                    <div class="col-md-12">
                                        <h5>Time - {{ stats.complete }}%</h5>
                                        <div class="progress">
                                            <div class="progress-bar progress-bar-striped progress-bar-animated"
                                                 role="progressbar"
                                                 aria-valuenow="{{ stats.complete }}"
                                                 aria-valuemin="0"
                                                 aria-valuemax="100"
                                                 style="width: {{ stats.complete }}%"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <h5>Target - {{ stats.target }}%</h5>
                                        <div class="progress">
                                            <div class="progress-bar progress-bar-striped progress-bar-animated"
                                                 role="progressbar"
                                                 aria-valuenow="{{ stats.target }}"
                                                 aria-valuemin="0"
                                                 aria-valuemax="100"
                                                 style="width: {{ stats.target }}%"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="row">
                                    <div class="col-md-12">
                                        <table class="table table-striped">
                                            <tbody>
                                                <tr>
                                                    <td>{{ "Plays"|trans }}</td>
                                                    <td>{{ campaign.plays }}</td>
                                                </tr>
                                                <tr>
                                                    <td>{{ "Spend"|trans }}</td>
                                                    <td>{{ campaign.spend }}</td>
                                                </tr>
                                                <tr>
                                                    <td>{{ "Impressions"|trans }}</td>
                                                    <td>{{ campaign.impressions }}</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="alert alert-info">
                                    {{ "Stats need to be enabled on the Displays and Layouts selected on this campaign"|trans }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javaScript %}
    {# Initialise JS variables and translations #}
    <script type="text/javascript" nonce="{{ cspNonce }}" defer>
        {# JS variables #}
        var campaignBuilderDefaultVars = {
            campaignAssignLayoutURL: "{{ url_for('campaign.assign.layout', {id: campaign.campaignId}) }}",
            campaignRemoveLayoutURL: "{{ url_for('campaign.remove.layout', {id: campaign.campaignId}) }}",
            defaultLat: "{{ settings.DEFAULT_LAT }}",
            defaultLong: "{{ settings.DEFAULT_LONG }}",
            dayPartSearchURL:  "{{ url_for('daypart.search')}}" + "?isAlways=0&isCustom=0",
        };

        {# Custom translations #}
        {% autoescape "js" %}
            {# Insert custom translations here #}
            var campaignBuilderTrans = {
              saveButton: '{{ "Save"|trans }}',
              cancelButton: '{{ "Cancel"|trans }}',
              addLayoutFormTitle: '{{ "Add Layout"|trans }}',
              editLayoutFormTitle: '{{ "Edit Layout"|trans }}',
              assignmentEditButton: '{{ "Edit"|trans }}',
              assignmentDeleteButton: '{{ "Delete"|trans }}',
              daysOfWeek: {
                monday: '{{ "Monday"|trans }}',
                tuesday: '{{ "Tuesday"|trans }}',
                wednesday: '{{ "Wednesday"|trans }}',
                thursday: '{{ "Thursday"|trans }}',
                friday: '{{ "Friday"|trans }}',
                saturday: '{{ "Saturday"|trans }}',
                sunday: '{{ "Sunday"|trans }}',
              },
              daysOfWeekDropdownTitle: '{{ "Days of the week"|trans }}',
              daysOfWeekDropdownHelpText: '{{ "Which days of the week should the layout be active?"|trans }}',
              dayPartDropdownTitle: '{{ "Dayparting"|trans }}',
              dayPartDropdownHelpText:'{{ "Should this layout only be shown on selected day parts?"|trans }}',
              builderMessage: '{{ "Draw areas on the map where you want this layout to play"|trans }}',
            };
        {% endautoescape %}
    </script>

    <script src="{{ theme.rootUri() }}dist/leaflet.bundle.min.js?v={{ version }}&rev={{revision}}" nonce="{{ cspNonce }}"></script>
    <script src="{{ theme.rootUri() }}dist/campaignBuilder.bundle.min.js?v={{ version }}&rev={{revision}}" nonce="{{ cspNonce }}"></script>
{% endblock %}