{#
/*
 * Copyright (C) 2019 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/>.
 */
#}

<script type="text/javascript">

    // Runs after form opens
    function subplaylist_form_edit_open() {

        // Get form object
        const $form = $(this);

        // Bind our tooltips
        $form.find('[data-toggle="tooltip"]').tooltip();

        // Translations
        let fillTitle = "{% trans "Fill" %}";
        let fillHelpText = "{% trans "Fill - use the first Playlist to fill any remaining Spots" %}";
        let padTitle = "{% trans "Pad" %}";
        let padHelpText = "{% trans "Pad - use the first Playlist to pad any remaining Spots" %}";
        let repeatTitle = "{% trans "Repeat" %}";
        let repeatHelpText = "{% trans "Repeat - repeat the Widgets in this Playlist until the number of Spots have been filled" %}";
        let noPlaylistsMessage = "{% trans "No playlists" %}";
        let noPlaylistsHelpMessage = "{% trans "You don't have available playlists" %}";
        let noPlaylistsAccessHelpMessage = "{% trans "You don't have access to this playlist" %}";
        let playlistIdMessage = "{% trans "Playlist Id " %}";

        // Order Clause
        var subPlaylistFields = $(".sub-playlists", $form);

        // Get template
        var subPlaylistFormTemplate = formHelpers.getTemplate('subPlaylistFormTemplate');

        if(subPlaylistFields.length === 0)
            return;

        if($form.data().extra.subPlaylistId.length === 0) {
            // Add a template row
            subPlaylistFields.append(subPlaylistFormTemplate({
                playlists: $form.data().extra.playlists,
                isPlaylistEditable: true,
                title: "1",
                subPlaylistId: "",
                subPlaylistIdSpots: "",
                subPlaylistIdSpotLength: "",
                subPlaylistIdSpotFill: "",
                buttonGlyph: "fa-plus",
                fillTitle: fillTitle,
                padTitle: padTitle,
                repeatTitle: repeatTitle,
                fillHelpText: fillHelpText,
                padHelpText: padHelpText,
                repeatHelpText: repeatHelpText,
                noPlaylistsMessage: noPlaylistsMessage,
                noPlaylistsHelpMessage: noPlaylistsHelpMessage,
                noPlaylistsAccessHelpMessage: noPlaylistsAccessHelpMessage,
                playlistIdMessage: playlistIdMessage
            }));
        } else {
            // For each of the existing codes, create form components
            var i = 0;
            $.each($form.data().extra.subPlaylistId, function(index, field) {
                i++;

                let isPlaylistEditable = false;

                $.each($form.data().extra.playlists, function(index2, field2) {
                    if(field == field2.playlistId) {
                        isPlaylistEditable = true;
                    }
                });

                subPlaylistFields.append(subPlaylistFormTemplate({
                    playlists: $form.data().extra.playlists,
                    title: i,
                    isPlaylistEditable: isPlaylistEditable,
                    subPlaylistId: field,
                    subPlaylistIdSpots: ($form.data().extra.subPlaylistOptions[field] === undefined) ? "" : $form.data().extra.subPlaylistOptions[field].subPlaylistIdSpots,
                    subPlaylistIdSpotLength: ($form.data().extra.subPlaylistOptions[field] === undefined) ? "" : $form.data().extra.subPlaylistOptions[field].subPlaylistIdSpotLength,
                    subPlaylistIdSpotFill: ($form.data().extra.subPlaylistOptions[field] === undefined) ? "" : $form.data().extra.subPlaylistOptions[field].subPlaylistIdSpotFill,
                    buttonGlyph: ((i === 1) ? "fa-plus" : "fa-minus"),
                    fillTitle: fillTitle,
                    padTitle: padTitle,
                    repeatTitle: repeatTitle,
                    fillHelpText: fillHelpText,
                    padHelpText: padHelpText,
                    repeatHelpText: repeatHelpText,
                    noPlaylistsMessage: noPlaylistsMessage,
                    noPlaylistsHelpMessage: noPlaylistsHelpMessage,
                    noPlaylistsAccessHelpMessage: noPlaylistsAccessHelpMessage,
                    playlistIdMessage: playlistIdMessage
                }));
            });
        }

        // Nabble the resulting buttons
        subPlaylistFields.on("click", "button", function(e) {
            e.preventDefault();

            // find the gylph
            if($(this).find("i").hasClass("fa-plus")) {
                subPlaylistFields.append(subPlaylistFormTemplate({
                    playlists: $form.data().extra.playlists,
                    isPlaylistEditable: true,
                    title: subPlaylistFields.find('.form-group').length + 1,
                    subPlaylistId: "",
                    subPlaylistIdSpots: "",
                    subPlaylistIdSpotLength: "",
                    subPlaylistIdSpotFill: "",
                    buttonGlyph: "fa-minus",
                    fillTitle: fillTitle,
                    padTitle: padTitle,
                    repeatTitle: repeatTitle,
                    fillHelpText: fillHelpText,
                    padHelpText: padHelpText,
                    repeatHelpText: repeatHelpText,
                    noPlaylistsMessage: noPlaylistsMessage,
                    noPlaylistsHelpMessage: noPlaylistsHelpMessage,
                    noPlaylistsAccessHelpMessage: noPlaylistsAccessHelpMessage,
                    playlistIdMessage: playlistIdMessage
                }));

                subplaylist_init_row($form);
            } else {
                // Remove this row
                $(this).closest(".form-group").remove();
            }
        });

        subplaylist_init_row($form);
    }

    function subplaylist_init_row($row) {
        $row.find('.subPlaylistSelect').select2({
            dropdownAutoWidth: true
        });
        $row.find('select[name="subPlaylistIdSpotFill[]"]').select2({
            templateResult: function(state) {
                if (!state.id) {
                    return state.text;
                }
                return $(state.element).data().templateResult;
            },
            dropdownAutoWidth: true,
            minimumResultsForSearch: -1
        });
    }

</script>