<link rel="stylesheet" type="text/css" href="includes/js/select2/css/select2.min.css"/>
<script type="text/javascript" src="includes/js/select2/js/select2.full.min.js"></script>
<script type="text/javascript" src="includes/js/select2/js/i18n/de.js"></script>

<style type="text/css">

    table#formwizard tr td {
        padding             : 1px   !important;
        background-color    : transparent;
    }
</style>

<script>


    function openCategory() {
        //console.log("1");
        var url = "index.php?module=category&class=select&id=1&fwiz=1&cid=[% $form.categoryid %]";
        $("#dialog-category").fancybox({
            title: 'Kategorie wählen',
            href: url,
            type: 'ajax',
            minWidth: 200,
            minHeight: 200,
            autoResize: true
        }).trigger("click");
    }

    function deaktivateCatSelection() {
        document.getElementById('CategoryDescr1').value = '';
        document.getElementById('CategoryDescr2').value = '';
        document.getElementById('CategoryID1').value = '';
        document.getElementById('CategoryID2').value = '';
    }

    /**
 *
 */

    function validateAndSubmitForm() {

        $(".ErrorMsg").remove();
        var hasError = false;

         $('.allFieldName').each(function () {
           var value = $(this).val();
           names.push(value.toLowerCase());
          });
        if ($("#newTitleField").val() !== "" || $("#newFeldname").val() !== "" || $("#newFeldtyp").val() !== "") {
            if ($("#newTitleField").val() === "") {
                $("#newTitleField").addClass('error').before('<span class="ErrorMsg error">Bitte geben Sie einen Feldtitel an</span><br/>');
                hasError = true;
            } else {
                $("#newTitleField").removeClass('error');
            }
            if ($("#newFeldname").val() === "" || !valid_alphanumeric($("#newFeldname").val())) {
                $("#newFeldname").addClass('error').before('<span class="ErrorMsg error">Bitte geben Sie einen Feldnamen ohne Sonder- oder Leerzeichen an</span><br/>');
                hasError = true;
            } else {
                $("#newFeldname").removeClass('error');
            }
            console.log("names:" + names);
            if (names.includes(newName.toLowerCase())) {
                $("#newFeldname").addClass('error').before('<span class="ErrorMsg error">Es gibt schon ein Feld mit diesem Namen</span><br/>');
                hasError = true;
            } else {
                $("#newFeldname").removeClass('error');
            }
            if ($("#newFeldtyp").val() === "") {
                $("#newFeldtyp").addClass('error').before('<span class="ErrorMsg error">Wählen Sie einen Feldtyp</span><br/>');
                hasError = true;
            } else {
                $("#newFeldtyp").removeClass('error');
            }
        }
        $('.TitleField').each(function () {
            var field = $(this);
            if ("" === field.val()) {
                field.addClass('error').before('<span class="ErrorMsg error">Bitte geben Sie einen Feldtitel an</span><br/>');
                hasError = true;
            } else {
                field.removeClass('error');
            }
        });
        $('.Feldtyp').each(function () {
            var field = $(this);
            if ("" === field.val()) {
                field.addClass('error').before('<span class="ErrorMsg error">Wählen Sie einen Feldtyp</span><br/>');
                hasError = true;
            } else {
                field.removeClass('error');
            }
        });
        $('.Feldname').each(function () {
            var field = $(this);
            if ("" === field.val()) {
                field.addClass('error').before('<span class="ErrorMsg error">Bitte geben Sie einen Feldnamen ohne Sonder- oder Leerzeichen an</span><br/>');
                hasError = true;
            } else {
                field.removeClass('error');
            }
        });
        if (!hasError) {
            //submitForm();
        }
    }

    function valid_alphanumeric(Alpha)
    {
        var regex = /^[a-zA-Z0-9_-]*$/;
        return (Alpha.match(regex)) ? true : false;
    }

    $(document).ready(function () {
        $(".dialog").fancybox({
            maxWidth: 800,
            maxHeight: 600,
            closeClick: false
        });

        $(".multiple").select2({theme: 'bootstrap-5'});

    });


</script>

<form action="" method="post" name="hm" id="hm" enctype="multipart/form-data" style="margin:0;padding:0;" class="form-label-left form-fcs-padding form-horizontal">

    <input type="hidden" name="FormID" value="[% $form.formid %]" />
    <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">
            [% if $FormErrors %]
                <div class="alert alert-danger">
                    <b>[% $user->gettext('Fehler')%]</b>
                    <ul>
                        [% foreach from=$FormErrors item=$err %]
                            <li>[% $err %]</li>
                            [% /foreach %]
                    </ul>
                </div>
                [% /if %]
            <div class="row">
                <div class="col-lg-6">
                    <div class="card panel-info shadow-sm rounded">
                        <div class="card-body  text-center">
                            <div class="btn-group">
                                <input type="submit" value="Update" class="btn btn-outline-primary"  />
                                <a  class="btn btn-outline-primary openInLargeModal" href = 'index.php?module=formwizard&event=viewFormular&fid=[% $form.formid %]'>[% $user->gettext('Vorschau') %]</a>
                                <input type="button" value="[% $user->gettext('Zur&uuml;ck') %]" class="btn btn-outline-secondary " onclick="document.location.href = 'index.php?module=formwizard';" />

                            </div>
                        </div>
                    </div>
                    <div class="card panel-info shadow-sm rounded">
                        <div class="card-header">
                            <span class="fcs-card-title h3">
                                [% $user->gettext('Formular bearbeiten') %]
                            </span>
                        </div>
                        <div class="card-body">
                            <div class="form-group row mb-3">
                                <label class="control-panel col-lg-4">
                                    [% $user->gettext('Tabelle') %]:
                                </label>
                                <div class="col-lg-8">
                                    <p class="form-control-static">
                                        [% $form.tablename %]
                                    </p>
                                </div>
                            </div>

                            <div class="form-group row mb-3">
                                <label class="control-panel col-lg-4">
                                    [% $user->gettext('Formularname') %]:
                                </label>
                                <div class="col-lg-8">
                                    <input type="text" name="FormName" size="35" maxlength="100" class="form-control " value="[% $form.formname %]" required="required" />
                                </div>
                            </div>

                            <div class="form-group row mb-3">
                                <label class="control-panel col-lg-4">
                                    [% $user->gettext('Kategorie') %]:
                                </label>
                                <div class="col-lg-8">
                                    <div class="input-group">
                                        <input type="hidden" name="CategoryID" id="CategoryID1" value="[% $form.categoryid %]">
                                        <input type="hidden" id="CategoryID2" value="" />
                                        <input type="hidden" id="CategoryDescr2" value="" />
                                        <input type="text" class="form-control" id="CategoryDescr1" readonly="readonly" value="[% $form.categoryname %]">
                                        <span class="input-group-text">
                                            <a href="JavaScript:void(0);" onclick="openCategory(1);" class="btn btn-outline-primary"><i class="fa  fa-folder-open"  title="[% $user->gettext('Kategorie ausw&auml;hlen') %]"></i></a>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row mb-3">
                                <label class="control-panel col-lg-4">
                                    [% $user->gettext('Ticketvorlage') %]:
                                </label>
                                <div class="col-lg-8">
                                    <select id="TicketTemplateID" class="form-control multiple" name="TicketTemplateID" onchange="deaktivateCatSelection();" style="width:100%;">
                                        [% html_options size="1" options=$TicketTemplates selected=$form.tickettemplateid %]
                                    </select>
                                </div>
                            </div>

                            <div class="form-group row mb-3">
                                <label class="control-panel col-lg-4">
                                    [% $user->gettext('Freigabe') %]:
                                </label>
                                <div class="col-lg-8">
                                    <input type="checkbox" value="Y" [% if $form.published == 1 %]checked="checked"[% /if %] name="Published" />
                                </div>
                            </div>

                            <div class="form-group row mb-3">
                                <label class="control-panel col-lg-4">
                                    [% $user->gettext('Mit unausgefüllten Pflichtfeldern') %]:
                                </label>
                                <div class="col-lg-8">
                                    <label><input type="checkbox" value="1" [% if $form.required == 1 || $form.required == 3 %]checked="checked"[% /if %] name="Required_close" />&nbsp;[% $user->gettext('Ticket schließen nicht möglich') %]</label>
                                    <br />
                                    <label><input type="checkbox" value="2" [% if $form.required == 2 || $form.required == 3 %]checked="checked"[% /if %] name="Required_edit" />&nbsp;[% $user->gettext('Ticket bearbeiten nicht möglich') %]</label>
                                </div>
                            </div>
                        </div>
                    </div>


                </div>

                <div class="col-lg-6">
                    [% include file=$modulePath|cat:"/new_field.tpl" %]
                </div>
            </div>
        </div>
    </div>



</form>
<div id="dialog-category" style="display:none;" width="500" hight="500">

</div>

<script>
    function removeField(FieldID) {

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


</script>

    <script  src="includes/js/quill2.0.3/hm_quill_wf.js"></script>

