<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>

<form action="index.php?module=ticketlist&event=editTicketFilter" method="POST" id="editTicketFilterForm" class="form form-horizontal form-label-left">
    <input type="hidden" name="save" value="1" />
    <input type="hidden" name="id" value="[% $Filter.filterid %]" />

    <div class="card panel-info shadow-sm rounded">
        <div class="card-header">
            <div class="row">
                <div class="col-6">
                    <span class="fcs-card-title h4">[% $user->gettext('Filter bearbeiten') %] <span class="small">[% $Filter.filtername %]</span></span>

                </div>
                <div class="col-6 text-end">
                    <div class="btn-group">
                        <button class="btn btn-outline-primary" id="submitForm">Speichern</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="card-body">
            <div class="form-group row mb-3">
                <label class="col-lg-4 control-label">[% $user->gettext('Bezeichnung') %]</label>
                <div class="col-lg-8">
                    <input type="text" class="form-control" name="FilterName" id="FilterName" size="20" maxlength="40"  value="[% $Filter.filtername %]"/>
                </div>
            </div>
       
            <div class="form-group row mb-3">
                <label class="col-lg-4 control-label">[% $user->gettext('Farbe') %]</label>
                <div class="col-lg-8">
                    <input type="color" class="form-control" name="FilterColor" id="FilterColor"  value="[% $Filter.color|default:'#ffffff' %]"/>
                </div>
            </div>

        <div class="form-group row mb-3">
            <label class="col-lg-4 control-label">[% $user->gettext('Beschreibung') %]</label>
            <div class="col-lg-8">
                <textarea class="form-control" style="width:100%;height: 5em;" name="FilterDescr" id="FilterDescr" >[% $Filter.filterdescr %]</textarea>
            </div>
        </div>
        <div class="form-group row mb-3">
            <label class="col-lg-4 control-label">[% $user->gettext('Freigeben für') %]</label>
            <div class="col-lg-8">
                <select class="form-control multiple2"  name="FilterGroups[]" id="FilterGroups" multiple="multiple" style="width: 95%;" >
                    [% html_options options=$allgroups selected=$Filter.GroupIDs %]
                </select>
            </div>
        </div>
    </div>
 </div>

</form>

<script type="text/JavaScript" language="JavaScript">
/* must apply only after HTML has loaded */
$("#editTicketFilterForm").ready(function () {
    $("#editTicketFilterForm").on("submit", function(e) {
        var postData = $(this).serializeArray();
        var formURL = $(this).attr("action");
        $.ajax({
            url: formURL,
            type: "POST",
            data: postData,
            success: function(data, textStatus, jqXHR) {
                //$("#universalModal").modal('hide');
             $("#FilterButtonName[% $Filter.filterid %]").html($('#FilterName').val());
             
                $("[data-bs-dismiss=modal]").trigger({ type: "click" });                
            },
            error: function(jqXHR, status, error) {
                //console.log(status + ": " + error);
            }
        });
        e.preventDefault();
    });
     
    $("#submitForm").on('click', function() {
//        $("#editTicketFilterForm").submit();
    });
    
$("#editTicketFilterForm #FilterGroups").select2({theme: 'bootstrap-5'});  
});
   
</script>
