<link rel="stylesheet" href="includes/js/sceditor-2.1.2/minified/themes/default.min.css" type="text/css" media="all" />
<script type="text/javascript" src="includes/js/sceditor-2.1.2/minified/jquery.sceditor.bbcode.min.js"></script>
<script type="text/javascript" src="includes/js/sceditor-2.1.2/languages/[% $user->language_type %].js"></script>
<script type="text/javascript" src="includes/js/sceditor-2.1.2/development/plugins/hmfunctions.js"></script>
<style>
    .sceditor-button-insertSnippet div { background: url('images/project.png'); }
    .sceditor-button-addSnippet div { background: url('images/project_add.png'); }
    .sceditor-button-showSnippetlist div { background: url('images/content.png'); }
    .ui-multiselect-menu {min-width: 225px !important;}

    .close.withoutHeader {
        margin-right: -30px;
        margin-top: -31px;
        font-size: 2em;
    }


</style>
<style>
    .sceditor-button-insertSnippet div { background: url('images/project.png') !important; }
    .sceditor-button-addSnippet div { background: url('images/project_add.png') !important; }
    .sceditor-button-showSnippetlist div { background: url('images/content.png') !important; }
    .sceditor-container html{height: 100% !important;}
</style>
<style type="text/css">
    body{
        background: rgb(245,245,245);background: -moz-linear-gradient(top,  rgba(255,255,255,1) 1%, rgba(238,238,238,1) 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(255,255,255,1)), color-stop(100%,rgba(238,238,238,1)));
        background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 1%,rgba(238,238,238,1) 100%);
        background: -o-linear-gradient(top,  rgba(255,255,255,1) 1%,rgba(238,238,238,1) 100%);
        background: -ms-linear-gradient(top,  rgba(255,255,255,1) 1%,rgba(238,238,238,1) 100%);
        background: linear-gradient(to bottom,  rgba(255,255,255,1) 1%,rgba(238,238,238,1) 100%);
    }
    table#formwizard tr td {
        padding             : 1px   !important;
        background-color    : transparent;
    }
    .card-body{
        background-color: #fff !important;
    }
</style>


<form action="index.php?module=workflow&event=activityform[% if $ActivityDef %]&ad=1[% /if %]" method="post" name="Update" id="Update" class="form-horizontal form-label-left">
    <div class="card panel-fcs-border shadow-sm">

        <div class="card-header">
            <span class="fcs-card-title h2">
                [% $user->gettext('Formular bearbeiten')%]
            </span>
        </div>
        <div class="card-body">
            <div style="margin-bottom: 20px;">
            [% if $smarty.const.DISABLEWYSIWYGBUTTON !== 1 %]
                [% if $useWYSIWYG === TRUE %]
                    <td><button  id="toggleWYSIWYG"  class="btn btn-outline-primary">[% $user->gettext('WYSIWYG-Editor deaktivieren') %] </button></td>
                [% else %]
                    <td><button  id="toggleWYSIWYG"  class="btn btn-outline-primary">[% $user->gettext('WYSIWYG-Editor aktivieren') %]</button></td>
                    [% /if %]
                [% /if %]
            </div>
            <input type="hidden" name="FormID" value="[% $form.formid %]" />
            [% include file=$modulePath|cat:"/new_workflowfield.tpl" Elements=$form.fields initialCall=1 %]
        </div>
        <div class="row" style="background-color: #fff !important; padding-bottom: 20px;">
            <div class="col-lg-12 text-center" id="formwizard">
                <div class="btn-group" id="EndOfForm">
                    <input type="submit" id="btnUpdateForm" value="Update" class="btn btn-outline-primary" onclick="" />
                    [% if $Tools->FCS_Count($form.fields) %]
                        <input type="button" value="[% $user->gettext('Vorschau') %]" class="btn btn-outline-primary" onclick="document.location.href = 'index.php?module=workflow&event=view_activityform&fid=[% $form.formid %][% if $ActivityDef %]&ad=1[% /if %]';" />
                    [% /if %]
                </div>
            </div>
        </div>
    </div>


</form>     
<a href="index.php?module=ticket&class=snippets" id="showSnippetlist" class="dialog_ticketlist" style="display:none;">SnippetList</a>
<a href="#addSnippet" id="showAddSnippet" class="dialog_medium" style="display:none;">Add Snippet</a>

<div id="addSnippet" style="display:none;">
    <div class="card panel-info shadow-sm rounded">
        <div class="card-header">
            <h3 class="fcs-card-title">[% $user->gettext('Textbaustein zufügen') %]</h3>
        </div>
        <div class="card-body">
            <form action="index.php?module=ticket&class=snippets&event=add"  id="addSnippetForm"  method="POST" class="form-horizontal form-label-left">
                <div class="form-group row mb-3">
                    <label class="col-lg-4 control-label">[% $user->gettext('Titel') %]</label>
                    <div class="col-lg-8">
                        <input type="text" name="title" maxlength="100" class="form-control" required="required" placeholder="[% $user->gettext('Titel des Textbausteines') %]"/>
                    </div>
                </div>
                <div class="form-group row mb-3">
                    <label class="col-lg-4 control-label">Text</label>
                    <div class="col-lg-8">
                        <textarea name="snippet" required="required" style="width:100%;height: 20em;"></textarea>
                    </div>
                </div>
                [% if $user->hasRight(224) %]
                    <div class="form-group row mb-3">
                        <label class="col-lg-4 control-label" for="public">[% $user->gettext('Öffentlich') %]</label>
                        <div class="col-lg-8">
                            <input type="checkbox" name="public" value="1">
                        </div>
                    </div>
                [% /if %]
                <input type="submit" onclick="" class="btn btn-outline-primary" value="[% $user->gettext('Speichern') %]" />
            </form>
        </div>
    </div>
</div>
<script  src="includes/js/hm-quill-wf.js"></script>

[% if $gotoend %]                    
    <script type="text/javascript" language="JavaScript">

                        window.location = "#EndOfForm";

    </script>
[% /if %]

<script type="text/javascript" language="JavaScript">
    var $l_ToggleWYSIWYG = '[% $user->gettext('WYSIWYG-Editor aktivieren') %]';
    var $l_ToggleWYSIWYGDeactivate = '[% $user->gettext('WYSIWYG-Editor deaktivieren') %]';
    [% if FALSE && $gotoend %]
    window.location = "#EndOfForm";
    [% /if %]



    $(".multiple").multiselect({
        buttonClass: 'form-select',
    templates: {
        button: '<button type="button" class="multiselect dropdown-toggle" data-bs-toggle="dropdown"><span class="multiselect-selected-text"></span></button>',
    },
        enableFiltering: true,
        selectedText: '# gewählt',
        selectedList: 2,
        header: '',
        multiple: true
    });

            $('.userSelect').select2({
            theme: 'bootstrap-5',
            language: ts_lang,
        ajax: {
            url: 'index.php?module=user&event=getAllUsersJSON&WithUsername=1',
            processResults: function (data) {
                return {
                    results: data.items
                };
            }
        }
    });


    function removeField(Field) {

        bootbox.confirm('[% $user->gettext("Formularfeld löschen?") %]', function (result) {
            if (result) {
                //FieldID = FieldID.replace('\\', '\\\\').replace('\/', '\\\/');
                Field.next('input').val('Y');
                //$('#removeField' + FieldID).val('Y');
                Field.prev('.panel-fcs-content').fadeOut();
                //$('.field_' + FieldID).fadeOut();
                document.getElementById('Update').submit();
            }
        })
    }


    function removeElement(FieldID, ElementID, isSubForm, SubFormParent, ParentElementIndex) {

        bootbox.confirm('[% $user->gettext("Element wirklich löschen?") %]', function (result) {
            if (result) {
                $.get("index.php?module=workflow&event=removeElement", {FormID: [% $form.formid|default:0 %], FieldID: FieldID, ElementID: ElementID, isSubform: isSubForm, SubFormParent: SubFormParent, ParentElementIndex:ParentElementIndex})
                        .done(function (data) {
                            if (data > 0) {
                                $('#Field_' + FieldID + 'Element_' + ElementID).fadeOut();
                                //iFieldSize = parseInt($('input[name="field[' + FieldID + '][size]"]').val()) - 1;
                                $('input[name="field[' + FieldID + '][size]"]').val(data);
                            }
                        });
            }
        })
    }

    $(".addTranseferPanel").on("click", function (e) {

        var id = $(this).attr('id');
        var PanelID = id.replace('add', '');
        $('#' + PanelID).show();
        $("#SubFormField").val($(this).data("field"));
        $("#SubFormElement").val($(this).data("element"));
        $("#NewField").detach().appendTo('#' + PanelID);

    })

    $('#Update').submit(function (e) {
        $('#ActivityFormFrame', window.parent.document).attr('src', function (i, val) {
            return val;
        });
    })
    [% if $useWYSIWYG === TRUE %]
    /*
     setTimeout(function () {
     $(".wf_textarea").sceditor({
     format: "bbcode",
     style: "includes/js/sceditor-2.1.2/minified/jquery.sceditor.default.min.css",
     toolbar: "bold,italic,underline,subscript,superscript,horizontalrule,bulletlist,orderedlist|font,color|pastetext,source,maximize|insertSnippet,addSnippet,showSnippetlist",
     //toolbar: "bold,italic,underline,subscript,superscript,horizontalrule,bulletlist,orderedlist|font,color|pastetext,source,maximize",
     colors: '#000|#F00|#11C11D|#00F|#B700B7|#FF8C00|#008080|#808080|#D3D3D3',
     emoticonsEnabled: false,
     charset: 'ISO-8859-1',
     autoUpdate: true,
     autoExpand: true,
     autofocusEnd: true,
     enablePasteFiltering: false,
     locale: ts_lang
     });
     $(".wf_textarea").each(function () {
     var sceinst = $(this).sceditor("instance");
     
     sceinst.on('paste', function (e) {
     // var pastedData = e.originalEvent.clipboardData.getData('text');
     var pastedContent = e.detail.val;
     var fileSize = 0;
     if (pastedContent.indexOf('[img]') !== -1) {
     if (pastedContent[pastedContent.length - 8] === '=') {
     fileSize = ((pastedContent.length - 32) * 3 / 4) - 2;
     } else {
     fileSize = ((pastedContent.length - 32) * 3 / 4) - 1;
     }
     if (fileSize > 600000) {
     alert('Das Bild, das Sie einfügen möchten, ist zu groß! Die maximal zulässige Größe beträgt 600 KB. Anstatt dieses Bild direkt einzufügen, können Sie das Dokument über das Dokument-Panel anhängen.');
     e.detail.val = "";
     e.preventDefault();
     }
     }
     });
     });
     
     }, 1);*/
    [% /if %]
    function getStyle(className) {
        var rules = "";
        var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules;
        for (var x = 0; x < classes.length; x++) {
            if (classes[x].selectorText == className) {
                if (classes[x].cssText) {
                    rules = classes[x].cssText;
                } else {
                    rules = classes[x].style.cssText;
                }
                //(classes[x].cssText) ? alert(classes[x].cssText) : alert(classes[x].style.cssText);
            }
        }
        return rules.replace(className, '');
    }

    $("#addSnippetForm").submit(function (event) {
        // Das eigentliche Absenden verhindern
        event.preventDefault();

        // Das sendende Formular und die Metadaten bestimmen
        var form = $(this); // Dieser Zeiger $(this) oder $("form"), falls die ID form im HTML exisitiert, klappt übrigens auch ohne jQuery ;)
        var action = form.attr("action"), // attr() kann enweder den aktuellen Inhalt des gennanten Attributs auslesen, oder setzt ein neuen Wert, falls ein zweiter Parameter gegeben ist
                method = form.attr("method"),
                data = form.serialize(); // baut die Daten zu einem String nach dem Muster vorname=max&nachname=Müller&alter=42 ... zusammen

        // Der eigentliche AJAX Aufruf
        $.ajax({
            url: action,
            type: method,
            data: data
        }).done(function (data) {
            // Bei Erfolg
            //alert("Erfolgreich:" + data);
            form.find('input:text, input:password, input:file, select, textarea').val('');
            $("#addSnippetForm").trigger("reset");
            $.fancybox.close();
        }).fail(function () {
            // Bei Fehler
            alert("Fehler!");
        }).always(function () {
            // Immer
            //alert("Beendet!");
        });
    });

    $(".dialog_medium").fancybox({
        maxWidth: 1000,
        maxHeight: 1000,
        closeClick: false
    });
    $(".dialog_ticketlist").fancybox({
        type: 'iframe',
        autoSize: false,
        autoResize: true,
        autoCenter: true,
        beforeLoad: function () {
            this.width = 1300;
            this.height = 600;
        }
    });
    /*
     $("#toggleWYSIWYG").on("click", function (event) {
     $.ajax({
     type: "POST",
     cache: false,
     url: "index.php?module=ticket&event=toggleWYSIWYG",
     dataType: "html",
     success: function (data) {
     if (1 == data) {
     $("#toggleWYSIWYG").attr("src", "images/search.gif").html($l_ToggleWYSIWYGDeactivate).removeClass('button-grey').addClass('button-green');
     var WYSIWYG = $(".wf_textarea").sceditor({
     format: "bbcode",
     style: "includes/js/sceditor-2.1.2/minified/jquery.sceditor.default.min.css",
     toolbar: "bold,italic,underline,subscript,superscript,horizontalrule,bulletlist,orderedlist|font,color|pastetext,source,maximize|insertSnippet,addSnippet,showSnippetlist",
     //toolbar: "bold,italic,underline,subscript,superscript,horizontalrule,bulletlist,orderedlist|font,color|pastetext,source,maximize",
     colors: '#000|#F00|#11C11D|#00F|#B700B7|#FF8C00|#008080|#808080|#D3D3D3',
     emoticonsEnabled: false,
     charset: 'ISO-8859-1',
     autoUpdate: true,
     width: '85%',
     //autoExpand: true,
     autofocus: true,
     enablePasteFiltering: true,
     locale: ts_lang
     });
     $(".wf_textarea").each(function () {
     var sceinst = $(this).sceditor("instance");
     
     sceinst.on('paste', function (e) {
     // var pastedData = e.originalEvent.clipboardData.getData('text');
     var pastedContent = e.detail.val;
     var fileSize = 0;
     if (pastedContent.indexOf('[img]') !== -1) {
     if (pastedContent[pastedContent.length - 8] === '=') {
     fileSize = ((pastedContent.length - 32) * 3 / 4) - 2;
     } else {
     fileSize = ((pastedContent.length - 32) * 3 / 4) - 1;
     }
     if (fileSize > 600000) {
     alert('Das Bild, das Sie einfügen möchten, ist zu groß! Die maximal zulässige Größe beträgt 600 KB. Anstatt dieses Bild direkt einzufügen, können Sie das Dokument über das Dokument-Panel anhängen.');
     e.detail.val = "";
     e.preventDefault();
     }
     }
     });
     });
     
     } else {
     $("#toggleWYSIWYG").attr("src", "images/search_grey.gif").html($l_ToggleWYSIWYG)
     .removeClass('button-green').addClass('button-grey');
     $(".wf_textarea").each(function () {
     $(this).sceditor('instance').destroy();
     });
     
     $(".wf_textarea").prop('readonly', false);
     }
     }
     });
     event.preventDefault();
     return false;
     });*/
</script>
