{#
/**
 * 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 pageContent %}
    {% include "theme-dashboard-message.twig" ignore missing %}
    <div class="widget">
        <div class="widget-title">{% trans "All Editable Widgets" %}</div>
        <div class="widget-body">
            <div class="XiboGrid" id="{{ random() }}" data-grid-name="mediaManagerView">
                <div class="XiboFilter well">
                    <div class="FilterDiv" id="Filter">
                        <form class="form-inline">

                            {% set title %}{% trans "Layout" %}{% endset %}
                            {{ inline.input("layout", title, "", "", 'layout-draft') }}

                            {% set title %}{% trans "Region" %}{% endset %}
                            {{ inline.input("region", title, "", "", "layout-draft") }}

                            {% set title %}{% trans "Playlist" %}{% endset %}
                            {{ inline.input("playlist", title, "", "", "playlist") }}

                            {% set title %}{% trans "Media" %}{% endset %}
                            {{ inline.input("media", title) }}

                            {% set title %}{% trans "Module" %}{% endset %}
                            {{ inline.dropdown("type", "single", title, "", [{type:null, name:""}]|merge(modules), "type", "name") }}

                            {% set title = "Widgets From"|trans %}
                            {% set options = [
                                { id: 1, value: "Drafts"|trans },
                                { id: 2, value: "Playlists"|trans }
                            ] %}
                            {{ inline.dropdown("showWidgetsFrom", "single", title, "", options, "id", "value", helpText) }}

                        </form>
                    </div>
                </div>
                <div class="XiboData">
                    <table id="entries" class="table table-striped">
                        <thead>
                            <tr>
                                <th>{% trans "Widget" %}</th>
                                <th>{% trans "Type" %}</th>
                                <th>{% trans "Thumbnail" %}</th>
                                <th>{% trans "Layout" %}</th>
                                <th>{% trans "Region" %}</th>
                                <th>{% trans "Playlist" %}</th>
                                <th>{% trans "Display Order" %}</th>
                                <th>{% trans "Row Menu" %}</th>
                            </tr>
                        </thead>
                        <tbody>

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

{% block javaScript %}
    {# Add common file #}
    {% include "common.twig" %}

    <script type="text/javascript">
        var table;

        $(document).ready(function() {

            if ($('#showWidgetsFrom').val() == 1) {
                $('.playlist').hide();
                $('#playlist').val("");
                $('.layout-draft').show()
            } else {
                $('.layout-draft').hide();
                $('#layout,#region').val("");
                $('.playlist').show()
            }

            $('#showWidgetsFrom').change(function() {
                if ($('#showWidgetsFrom').val() == 1) {
                    $('.playlist').hide();
                    $('#playlist').val("");
                    $('.layout-draft').show()
                } else {
                    $('.layout-draft').hide();
                    $('#layout,#region').val("");
                    $('.playlist').show()
                }
            });

            table = $("#entries").DataTable({
                "language": dataTablesLanguage,
                serverSide: true,
                filter: false,
                searchDelay: 3000,
                "order": [[1, "asc"]],
                ajax: {
                    url: "{{ urlFor("mediamanager.search") }}",
                    "data": function (d) {
                        $.extend(d, $("#entries").closest(".XiboGrid").find(".FilterDiv form").serializeObject());
                    }
                },
                "columns": [
                    {"data": "widget"},
                    {"data": "type"},
                    {
                        "name": "widgetId",
                        "data": null,
                        "render": {"_": "thumbnail", "display": "thumbnail", "sort": "widgetId"}
                    },
                    {
                        "data": "layout",
                        "orderable": false
                    },
                    {
                        "data": "region",
                        "orderable": false
                    },
                    {
                        "data": "playlist"
                    },
                    {"data": "displayOrder"},
                    {
                        "orderable": false,
                        "data": dataTableButtonsColumn
                    }
                ]
            });

            table.on('draw', function(e, settings) {
                dataTableDraw(e, settings);

                // Bind to any media replace buttons
                $("#" + e.target.id).find('.MediaManagerReplaceButton').on('click', function() {
                    e.preventDefault();

                    // $(this) is the button
                    var mediaId = $(this).data().mediaId;
                    var widgetId = $(this).data().widgetId;
                    var validExtensions = $(this).data().validExtensions;

                    // Open the upload dialog with our options.
                    openUploadForm({
                        oldMediaId: mediaId,
                        widgetId: widgetId,
                        updateInAllChecked: {% if settings.LIBRARY_MEDIA_UPDATEINALL_CHECKB == 1 %}true{% else %}false{% endif %},
                        deleteOldRevisionsChecked: {% if settings.LIBRARY_MEDIA_DELETEOLDVER_CHECKB == 1 %}true{% else %}false{% endif %},
                        trans: {
                            addFiles: "{% trans "Add Replacement" %}",
                            startUpload: "{% trans "Start Replace" %}",
                            cancelUpload: "{% trans "Cancel Replace" %}",
                            processing: "{% trans "Processing..." %}",
                            updateInLayouts: {
                                title: "{% trans "Update this media in all layouts it is assigned to?" %}",
                                helpText: "{% trans "Note: It will only be updated in layouts you have permission to edit." %}"
                            },
                            deleteOldRevisions: {
                                title: "{% trans "Delete the old version?" %}",
                                helpText: "{% trans "Completely remove the old version of this media item if a new file is being uploaded." %}"
                            }
                        },
                        upload: {
                            maxSize: {{ libraryUpload.maxSize }},
                            maxSizeMessage: "{{ libraryUpload.maxSizeMessage  }}",
                            validExt: validExtensions
                        }
                    });
                });

                // Bind to any media replace buttons
                $("#" + e.target.id).find('.WidgetEditForm').on('click', function() {
                    e.preventDefault();

                    formHelpers.widgetFormRender($(this), $(this).data());
                });
            });
            table.on('processing.dt', dataTableProcessing);
            dataTableAddButtons(table, $('#entries_wrapper').find('.col-sm-6').eq(1));
        });

        /**
         * Open Upload Form
         */
        function openUploadForm(templateOptions) {

            // Close the current dialog
            XiboDialogClose();

            var template = Handlebars.compile($("#template-file-upload").html());

            // Handle bars and open a dialog
            bootbox.dialog({
                message: template(templateOptions),
                title: "{% trans "Upload media" %}",
                buttons: {
                    main: {
                        label: "{% trans "Done" %}",
                        className: "btn-primary",
                        callback: function() {
                            table.ajax.reload();
                            XiboDialogClose();
                        }
                    }
                }
            }).on('shown.bs.modal', function() {
                // Configure the upload form
                var url = "{{ urlFor("library.add") }}";
                var form = $(this).find("form");

                // Initialize the jQuery File Upload widget:
                form.fileupload({
                    url: url,
                    disableImageResize: true,
                    maxNumberOfFiles: 1,
                    limitMultiFileUploads: 1
                });

                // Upload server status check for browsers with CORS support:
                if ($.support.cors) {
                    $.ajax({
                        url: url,
                        type: 'HEAD'
                    }).fail(function () {
                        $('<span class="alert alert-error"/>')
                                .text('Upload server currently unavailable - ' + new Date())
                                .appendTo(form);
                    });
                }

                // Enable iframe cross-domain access via redirect option:
                form.fileupload(
                        'option',
                        'redirect',
                        window.location.href.replace(
                                /\/[^\/]*$/,
                                '/cors/result.html?%s'
                        )
                );

                form.bind('fileuploadsubmit', function (e, data) {
                    var inputs = data.context.find(':input');
                    if (inputs.filter('[required][value=""]').first().focus().length) {
                        return false;
                    }
                    data.formData = inputs.serializeArray().concat(form.serializeArray());

                    inputs.filter("input").prop("disabled", true);

                }).bind('fileuploadstart', function (e, data) {
                    // Show progress data
                    form.find('.fileupload-progress .progress-extended').show();
                    form.find('.fileupload-progress .progress-end').hide();
                }).bind('fileuploadprogressall', function(e, data) {
                    // Hide progress data and show processing
                    if(data.total > 0 && data.loaded == data.total) {
                        form.find('.fileupload-progress .progress-extended').hide();
                        form.find('.fileupload-progress .progress-end').show();
                    }
                }).bind('fileuploadadded fileuploadcompleted fileuploadfinished', function (e, data) {
                    // Get uploaded and downloaded files and toggle Done button
                    var filesToUploadCount = form.find('tr.template-upload').length;
                    var $button = form.parents('.modal:first').find('button[data-bb-handler="main"]');

                    if(filesToUploadCount == 0) {
                        $button.removeAttr('disabled');
                    } else {
                        $button.attr('disabled', 'disabled');
                    }
                });

                form.bind('fileuploaddone', function (e, data) {
                    table.ajax.reload();
                    XiboDialogClose();
                });
            });
        }

        /**
         * Media Edit form
         */
        function mediaEditFormOpen(dialog) {

            if (dialog.find("form").data().mediaEditable != 1)
                return;

            // Create a new button
            var footer = dialog.find(".modal-footer");
            var mediaId = dialog.find("form").data().mediaId;
            var widgetId = dialog.find("form").data().widgetId;
            var validExtensions = dialog.find("form").data().validExtensions;

            // Append
            var replaceButton = $('<button class="btn btn-warning">').html("{% trans "Replace" %}");
            replaceButton.click(function(e) {
                e.preventDefault();

                // Open the upload dialog with our options.
                openUploadForm({
                    oldMediaId: mediaId,
                    widgetId: widgetId,
                    updateInAllChecked: {% if settings.LIBRARY_MEDIA_UPDATEINALL_CHECKB == 1 %}true{% else %}false{% endif %},
                    deleteOldRevisionsChecked: {% if settings.LIBRARY_MEDIA_DELETEOLDVER_CHECKB == 1 %}true{% else %}false{% endif %},
                    trans: {
                        addFiles: "{% trans "Add Replacement" %}",
                        startUpload: "{% trans "Start Replace" %}",
                        cancelUpload: "{% trans "Cancel Replace" %}",
                        updateInLayouts: {
                            title: "{% trans "Update this media in all layouts it is assigned to?" %}",
                            helpText: "{% trans "Note: It will only be updated in layouts you have permission to edit." %}"
                        },
                        deleteOldRevisions: {
                            title: "{% trans "Delete the old version?" %}",
                            helpText: "{% trans "Completely remove the old version of this media item if a new file is being uploaded." %}"
                        }
                    },
                    upload: {
                        maxSize: {{ libraryUpload.maxSize }},
                        maxSizeMessage: "{{ libraryUpload.maxSizeMessage  }}",
                        validExt: validExtensions
                    }
                });
            });

            footer.find(".btn-primary").before(replaceButton);
        }
    </script>

    {% for module in assignableModules %}
        {% if module.layoutDesignerJavaScript() != "" %}
            {% include module.layoutDesignerJavaScript() ~ ".twig" %}
        {% endif %}
    {% endfor %}
{% endblock %}