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

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

{% block actionMenu %}
    {% if currentUser.featureEnabled("campaign.add") %}
    <div class="widget-action-menu pull-right">
        <button class="btn btn-success XiboFormButton" title="{% trans "Add a new Campaign" %}" href="{{ url_for("campaign.add.form") }}"> <i class="fa fa-plus-circle" aria-hidden="true"></i>  {% trans "Add Campaign" %}</button>
    </div>
    {% endif %}
{% endblock %}


{% block pageContent %}
    <div class="widget">
        <div class="widget-title">{% trans "Campaigns" %}</div>
        <div class="widget-body">
            <div class="XiboGrid" id="{{ random() }}" data-grid-name="campaignView">
                <div class="XiboFilter card mb-3 bg-light">
                    <div class="FilterDiv card-body" id="Filter">
                        <form class="form-inline">

                            <div class="form-group mr-1 mb-1">
                                <label class="control-label mr-1" title="" for="name" accesskey="">{% trans "Name" %}</label>
                                <div>
                                    <div class="input-group">
                                        <input class="form-control" name="name" type="text" id="name" value="">
                                        <div class="input-group-append input-group-addon">
                                            <div class="input-group-text">
                                                <input title="{% trans "Use Regex?" %}" type="checkbox" id="useRegexForName" name="useRegexForName">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {% if currentUser.featureEnabled("tag.tagging") %}
                                {% set title %}{% trans "Tags" %}{% endset %}
                                {% set exactTagTitle %}{% trans "Exact match?" %}{% endset %}
                                {% set helpText %}{% trans "A comma separated list of tags to filter by. Enter a Tag value preceded with | to filter by Tag values. Enter --no-tag to see items without tags." %}{% endset %}
                                {{ inline.inputWithTags("tags", title, null, helpText, null, null, null, "exactTags", exactTagTitle) }}
                            {% endif %}

                            {% set title %}{% trans "Layouts" %}{% endset %}
                            {% set values = [{id: 0, value: ""}, {id: 2, value: "Yes"}, {id: 1, value: "No"}] %}
                            {{ inline.dropdown("hasLayouts", "single", title, 0, values, "id", "value") }}

                            {{ inline.hidden("folderId") }}
                        </form>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-1 form-group" style="padding: 0">
                        <button type="button" id="folder-tree-select-folder-button" class="btn btn-outline-secondary btn-sm" title="{% trans "Open / Close Folder Search options" %}"><i class="fas fa-bars fa-1x"></i></button>
                    </div>
                    <div class="form-group col-sm-11" style="padding: 0">
                        <div id="breadcrumbs" style="margin-top: 5px;"></div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-2 p-3 bg-light" id="grid-folder-filter">
                        <div class="form-check">
                            <input type="checkbox" class="form-check-input" id="folder-tree-clear-selection-button">
                            <label class="form-check-label" for="folder-tree-clear-selection-button" title="{% trans "Search in all folders" %}">{% trans "Global Search" %}</label>
                        </div>
                        <div id="container-folder-tree"></div>
                    </div>
                    <div id="datatable-container" class="card col-sm-10 pt-4 px-2">
                        <div class="XiboData">
                            <table id="campaigns" class="table table-striped" data-content-type="campaign" data-content-id-name="campaignId" data-state-preference-name="campaignGrid" style="width: 100%;">
                                <thead>
                                    <tr>
                                        <th>{% trans "Name" %}</th>
                                        <th>{% trans "# Layouts" %}</th>
                                        {% if currentUser.featureEnabled("tag.tagging") %}<th>{% trans "Tags" %}</th>{% endif %}
                                        <th>{% trans "Duration" %}</th>
                                        <th class="rowMenu"></th>
                                    </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javaScript %}
    <script type="text/javascript">
        {% if not currentUser.featureEnabled("folder.view") %}
        disableFolders();
        {% endif %}

        // Configure the DataTable
        var table = $("#campaigns").DataTable({ "language": dataTablesLanguage,
            serverSide: true,
            stateSave: true,
            stateDuration: 0,
            responsive: true,
            stateLoadCallback: dataTableStateLoadCallback,
            stateSaveCallback: dataTableStateSaveCallback,
            "filter": false,
            searchDelay: 3000,
            "order": [[ 0, "asc"]],
            ajax: {
                url: "{{ url_for("campaign.search") }}",
                "data": function(d) {
                    $.extend(d, $("#campaigns").closest(".XiboGrid").find(".FilterDiv form").serializeObject());
                }
            },
            "columns": [
                {
                    "data": "campaign" ,
                    responsivePriority: 2,
                    "render": dataTableSpacingPreformatted
                },
                { "data": "numberLayouts", responsivePriority: 2 },
                {% if currentUser.featureEnabled("tag.tagging") %} {
                    "sortable": false,
                    responsivePriority: 2,
                    "data": dataTableCreateTags
                },{% endif %}
                {
                    "data": "totalDuration",
                    responsivePriority: 2,
                    "render": dataTableTimeFromSeconds
                },
                {
                    "orderable": false,
                    responsivePriority: 1,
                    "data": dataTableButtonsColumn
                }
            ]
        });

        // Data Table events
        table.on('draw', dataTableDraw);
        table.on('draw', { form: $("#campaigns").closest(".XiboGrid").find(".FilterDiv form") }, dataTableCreateTagEvents);
        table.on('processing.dt', dataTableProcessing);
        dataTableAddButtons(table, $('#campaigns_wrapper').find('.col-md-6').eq(1));

        // Callback for the media form
        // Fired when the media form opens
        function campaignAssignLayoutsFormOpen(dialog) {
            // Layout element template
            var layoutElementTemplate = Handlebars.compile($("#campaign-assign-layout").html());

            // Convert our filter form tags inputs into actual tag inputs
            $(dialog).find("#tags").tagsinput();

            // Hold a container for the layouts we have assigned already
            var container = $("#LayoutAssign");

            // Assignment table
            var $layoutAssignments = $("#layoutAssignments");

            var $layoutAssignSortable = $("#LayoutAssignSortable");

            // Update all the layout element positions
            var updateSortablePositions = function() {
                var layoutElements = $layoutAssignSortable.find('li');

                layoutElements.each(function(idx, el) {
                    $(el).find('.layout-order').html(idx+1);
                })
            };

            // Populate layouts
            var layoutsArray = $layoutAssignSortable.data('layouts');
            for (layoutIndex = 0; layoutIndex < layoutsArray.length; layoutIndex++) {
                var layout = layoutsArray[layoutIndex];

                // Append to our layouts list
                var newItem = layoutElementTemplate({
                    index: (layoutIndex + 1),
                    layoutId: layout.layoutId,
                    layoutName: layout.layout,
                    locked: layout.locked
                });

                $(newItem).appendTo("#LayoutAssignSortable");
            }

            // Layout DataTable
            var layoutTable = $layoutAssignments.DataTable({ "language": dataTablesLanguage,
                serverSide: true,
                stateSave: true,
                stateDuration: 0,
                pageLength: 5,
                lengthMenu: [5, 10, 25, 50],
                stateLoadCallback: dataTableStateLoadCallback,
                stateSaveCallback: dataTableStateSaveCallback,
                searchDelay: 3000,
                "order": [[ 0, "asc"]],
                "filter": false,
                ajax: {
                    url: "{{ url_for("layout.search") }}",
                    "data": function(d) {
                        $.extend(d, $layoutAssignments.closest(".XiboGrid").find(".layoutAssignFilterOptions form").serializeObject());
                    }
                },
                "columns": [
                    { "data": "layoutId" },
                    {
                        "data": "layout",
                        "render": dataTableSpacingPreformatted
                    },
                    {
                        "name": "status",
                        "data": function (data, type) {
                            if (type != "display")
                                return data.status;

                            var icon = "";
                            if (data.status == 1)
                                icon = "fa-check";
                            else if (data.status == 2)
                                icon = "fa-exclamation";
                            else if (data.status == 3)
                                icon = "fa-cogs";
                            else
                                icon = "fa-times";

                            return "<span class='fa " + icon + "' title='" + (data.statusDescription) + ((data.statusMessage == null) ? "" : " - " + (data.statusMessage)) + "'></span>";
                        }
                    },
                    {
                        "sortable": false,
                        "data": function(data, type, row, meta) {
                            if (type !== "display")
                                return "";

                            // Create a click-able span
                            return "<a href=\"#\" class=\"assignItem\"><span class=\"fa fa-plus\"></a>";
                        }
                    }
                ]
            });

            layoutTable.on('draw', { form: $layoutAssignments.closest(".XiboGrid").find("form") }, function(e, settings) {
                dataTableDraw(e, settings);
                dataTableCreateTagEvents(e, settings);

                // Bind a click event to each table rows + button (span)
                $layoutAssignments.find(".assignItem").on("click", function() {
                    // Get the row that this is in.
                    var data = layoutTable.row($(this).closest("tr")).data();

                    // Append to our layouts list
                    var newItem = layoutElementTemplate({
                        index: ($("#LayoutAssignSortable").find('li').length + 1),
                        layoutId: data.layoutId,
                        layoutName: data.layout,
                        locked: false
                    }); 

                    $(newItem).appendTo("#LayoutAssignSortable");
                });
            });
            layoutTable.on('processing.dt', dataTableProcessing);

            // Make our little list sortable
            $layoutAssignSortable.sortable({
                cancel: ".ui-state-disabled",
                update: function( event, ui ) {
                    updateSortablePositions();
                }
            });

            // Bind to the existing items in the list
            $layoutAssignSortable.on('click', '.layout-remove', function () {
                $(this).parent().remove();
                updateSortablePositions();
            });

            // Bind the filter form
            $(".layoutAssignFilterOptions").find("input, select").change(function() {
                layoutTable.ajax.reload();
            });
        }

        function campaignFormSubmit($form) {

            // Process layouts to add
            layoutAssignSubmit($form);

            // Submit form
            $form.submit();
        }
        
        function layoutAssignSubmit($form) {
            // Get the final sortable positions
            var finalLayoutPositions = [];
            $("#LayoutAssignSortable").find("li").each(function(){
                finalLayoutPositions.push($(this).data("layoutId"));
            });

            // Send flag to manage layouts
            $('<input>').attr({
                type: 'hidden',
                name: 'manageLayouts'
            }).val(1).appendTo($form);

            //Build the array of layouts
            var layoutOrderArray = [];
            for (i = 0; i < finalLayoutPositions.length; i++) {
                $('<input>').attr({
                    type: 'hidden',
                    name: 'layoutIds[' + i + ']'
                }).val(finalLayoutPositions[i]).appendTo($form.find('#assignLayouts'));
            }
        }
    </script>

    {% verbatim %}
        <script type="text/x-handlebars-template" id="campaign-assign-layout">
            <li data-layout-id="{{ layoutId }}" class="btn btn-sm btn-white {{#if locked}}ui-state-disabled{{/if}}">
                <div class="float-left text-left layout-order">{{index}}</div>
                <div class="layout-name float-left" title="{{ layoutName }}">{{ layoutName }}</div>
                <div class="layout-icon fa {{#if locked}}fa-lock{{else}}fa-minus layout-remove{{/if}}"></div>
            </li>
        </script>
    {% endverbatim %}
{% endblock %}