<!-- Component SLA-List begin -->
<div id="loadedContent">
    <form action="" method="post" name="hm" onsubmit="return false" id="hm" enctype="multipart/form-data" style="margin:0;padding:0;" class="form-inline">

        <input type="hidden" name="pos" value="[% $pos %]" id="pos">
        <input type="hidden" name="task"  id="task" value="" />
        <input type="hidden" name ="jsonSLAsToCalc" id="jsonSLAsToCalc" value="[% $jsonSLAsToCalc %]" />
        <input type="hidden" name="sort" id="sort" value="[% $sort %]" />
        <input type="hidden" name="sortorder" id="sortorder" value="[% $sortorder %]" />


        <!-- ###CONTENT### begin -->
        <div class="card panel-fcs-border shadow-sm">
            <div class="card-header">
                <span class="fcs-card-title h2">[% $user->gettext('SLA-Definitionen') %] [% $oSLA->Description %]</span>
            </div>
            <div class="card-body">
                <div class="card panel-info shadow-sm rounded">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-lg-9">
                                <label class="control-label">[% $user->gettext('Zeitraum')%]:</label>
                                <div class="form-group row mb-3">
                                    <div class="input-group">
                                        <span class = "input-group-text">[% $user->gettext('Von')%] </span>
                                        <input type="text" value="[% $smarty.session.SLA.startdate %]"  name="startdate" class="form-control datepicker" onkeyup="keyEvent(event)" />
                                        <span class = "input-group-text">[% $user->gettext('Bis')%] </span>
                                        <input type="text" value="[% $smarty.session.SLA.enddate %]"  name="enddate" class="form-control datepicker" onkeyup="keyEvent(event)" />

                                    </div>
                                </div>
                                <div class="form-group row mb-3">
                                    <select name="period" class="form-control multiple" onchange="changePeriod(this);">
                                        <option value="" selected>--- [% $user->gettext('Auswahl') %] ---</option>
                                        <option value="0">[% $user->gettext('Heute') %]</option>
                                        <option value="1">[% $user->gettext('Gestern') %]</option>
                                        <option value="2">[% $user->gettext('letzte Woche') %]</option>
                                        <option value="3">[% $user->gettext('letzten Monat') %]</option>
                                        [% if $timing_add %]
                                            [% foreach from=$timing_add key=k item=v %]
                                                <option value="[% $v.id %]">[% $k %]</option>
                                            [% /foreach %]
                                        [% /if %]
                                    </select>
                                </div>
                                <div class="form-group row mb-3">
                                    <label for="entries_per_page" class="control-label">[% $user->gettext('Eintr&auml;ge pro Seite:') %]</label>
                                    <select name="entries_per_page" id="entries_per_page" onchange="document.hm.submit();" class="form-control">
                                        <option value="10" [% if $entries_per_page == 10 %]selected="selected"[% /if %]>10</option>
                                        <option value="20" [% if $entries_per_page == 20 %]selected="selected"[% /if %]>20</option>
                                        <option value="50" [% if $entries_per_page == 50 %]selected="selected"[% /if %]>50</option>
                                        <option value="100" [% if $entries_per_page == 100 %]selected="selected"[% /if %]>100</option>
                                    </select>
                                </div>
                                <div class="form-group row mb-3">
                                    <label for="search" class="control-label">[% $user->gettext('Filter') %]:</label>
                                    <input type="text" name="search" class="form-control" value="[% $search %]" onkeyup="if (event.keyCode == 13) {submitForm(); }">
                                </div>
                                <div class="form-group row mb-3">
                                    <select size="1" name="searchSLAs[]" id="searchSLAs" class="form-control" multiple="multiple">
                                        <option value="0" [% if !$searchSLAs || $searchSLAs == 0 %]selected="selected"[% /if %]>-- [% $user->gettext('Alle SLAs') %] --</option>
                                        [% html_options options=$SLAforSearch selected=$searchSLAs %]
                                    </select>
                                </div>
                                <div class="form-group row mb-3">
                                    <a href="JavaScript:void(0);" onclick="submitForm();" class="btn btn-outline-primary" ><span class="fa fa-arrows-rotate"></span></a>
                                </div>
                            </div>
                            <div class="col-lg-3 text-end">
                                <div class="btn-group">
                                    <a href="javascript:void(0);" id="excelExport" title="[% $user->gettext('Excel Export') %]" class="btn btn-outline-primary" >[% $user->gettext('Export') %]</a>
                                    [% if $user->hasRight(303) %]
                                        <a href="javascript:openNewSLA();" data-fancybox-type="iframe" class="btn btn-outline-primary">[% $user->gettext('Neuer SLA') %]</a>
                                    [% /if %]

                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="card panel-info shadow-sm rounded">
                    <div class="card-header">
                        <span class="fcs-card-title h3">
                        [% if $nav.entries > 1 %]([% $nav.entries %] &nbsp;[% $user->gettext('Eintr&auml;ge gefunden') %])[% else %][% $user->gettext('Keine Einträge gefunden') %][% /if %]
                    </span>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                                <tr class="fields">
                                    <td width="200px;">
                                    </td>
                                    <td style="cursor:pointer;" onclick="document.getElementById(
                                        [% if $sort == "Description" %]
                                        'sortorder').value = '[% if $sortorder == "DESC" %]ASC[% else %]DESC[% /if %]'
                                        [% else %]
                                            'sort').value = 'Description'
                                        [% /if %]; submitForm();">
                                        [% $user->gettext('SLA') %]
                                        [% if $sort == "Description" %]&nbsp;<span class="fa fa-chevron-[% if $sortorder == "DESC" %]down[% else %]up[% /if %]"></span>[% /if %]
                                    </td>
                                    <td style="cursor:pointer;" onclick="document.getElementById(
                                        [% if $sort == "SLAObjectField" %]
                                        'sortorder').value = '[% if $sortorder == "DESC" %]ASC[% else %]DESC[% /if %]'
                                        [% else %]
                                            'sort').value = 'SLAObjectField'
                                        [% /if %]; submitForm();">
                                        [% $user->gettext('Betrifft') %]
                                        [% if $sort == "SLAObjectField" %]&nbsp;<span class="fa fa-chevron-[% if $sortorder == "DESC" %]down[% else %]up[% /if %]"></span>[% /if %]
                                    </td>
                                    <td style="cursor:pointer;" onclick="document.getElementById(
                                        [% if $sort == "TargetName" %]
                                        'sortorder').value = '[% if $sortorder == "DESC" %]ASC[% else %]DESC[% /if %]'
                                        [% else %]
                                            'sort').value = 'TargetName'
                                        [% /if %]; submitForm();">
                                        [% $user->gettext('Ziel-Name') %]
                                        [% if $sort == "TargetName" %]&nbsp;<span class="fa fa-chevron-[% if $sortorder == "DESC" %]down[% else %]up[% /if %]"></span>[% /if %]
                                    </td>
                                    <td style="cursor:pointer;" onclick="document.getElementById(
                                        [% if $sort == "TargetStatus" %]
                                        'sortorder').value = '[% if $sortorder == "DESC" %]ASC[% else %]DESC[% /if %]'
                                        [% else %]
                                            'sort').value = 'TargetStatus'
                                        [% /if %]; submitForm();">
                                        [% $user->gettext('Bedingung') %]
                                        [% if $sort == "TargetStatus" %]&nbsp;<span class="fa fa-chevron-[% if $sortorder == "DESC" %]down[% else %]up[% /if %]"></span>[% /if %]
                                    </td>
                                    <td style="cursor:pointer;" onclick="document.getElementById(
                                        [% if $sort == "SLATime" %]
                                        'sortorder').value = '[% if $sortorder == "DESC" %]ASC[% else %]DESC[% /if %]'
                                        [% else %]
                                            'sort').value = 'SLATime'
                                        [% /if %]; submitForm();">
                                        [% $user->gettext('Minuten') %]
                                        [% if $sort == "SLATime" %]&nbsp;<span class="fa fa-chevron-[% if $sortorder == "DESC" %]down[% else %]up[% /if %]"></span>[% /if %]
                                    </td>
                                    <td style="cursor:pointer;" onclick="document.getElementById(
                                        [% if $sort == "Tickets" %]
                                        'sortorder').value = '[% if $sortorder == "DESC" %]ASC[% else %]DESC[% /if %]'
                                        [% else %]
                                            'sort').value = 'Tickets'
                                        [% /if %]; submitForm();">
                                        [% $user->gettext('Tickets') %]
                                        [% if $sort == "Tickets" %]&nbsp;<span class="fa fa-chevron-[% if $sortorder == "DESC" %]down[% else %]up[% /if %]"></span>[% /if %]
                                    </td>
                                    <td style="cursor:pointer;" onclick="document.getElementById(
                                        [% if $sort == "inTime" %]
                                        'sortorder').value = '[% if $sortorder == "DESC" %]ASC[% else %]DESC[% /if %]'
                                        [% else %]
                                            'sort').value = 'inTime'
                                        [% /if %]; submitForm();">
                                        [% $user->gettext('IN') %]
                                        [% if $sort == "inTime" %]&nbsp;<span class="fa fa-chevron-[% if $sortorder == "DESC" %]down[% else %]up[% /if %]"></span>[% /if %]
                                    </td>
                                    <td style="cursor:pointer;" onclick="document.getElementById(
                                        [% if $sort == "outTime" %]
                                        'sortorder').value = '[% if $sortorder == "DESC" %]ASC[% else %]DESC[% /if %]'
                                        [% else %]
                                            'sort').value = 'outTime'
                                        [% /if %]; submitForm();">
                                        [% $user->gettext('OUT') %]
                                        [% if $sort == "outTime" %]&nbsp;<span class="fa fa-chevron-[% if $sortorder == "DESC" %]down[% else %]up[% /if %]"></span>[% /if %]
                                    </td>

                                    <td>&nbsp;</td>
                                </tr>
                            </thead>
                            <tbody>
                                [% foreach from=$SLAs item=SLA key=SLAID name=SLAList %]
                                    <tr class="" id="sla_[% $SLAID %]">
                                        <td >
                                            <div style="border:1px solid #636;background-color:#F00; [% if $SLA.ready || $SLA.AnzahlTickets == 0 %]width:200px;[% else %]width:0px;[% /if %] display:inline-block;" id="outTimePercent_[% $SLAID %]" >
                                                <div style="border-right:1px solid #636;background-color:green;[% if $SLA.ready %]width:[% $SLA.inTimePercent*2 %]px;[% else %]width:0px;[% /if %] display:inline-block;" id="inTimePercent_[% $SLAID %]" >&nbsp;</div>
                                            </div>
                                            <div id="loading_[% $SLAID %]" style="display:inline-block;"></div>
                                        </td>
                                        <td>&nbsp;[% $SLA.description %]&nbsp;</td>
                                        <td>&nbsp;[% $user->gettext($SLA.targettype) %]&nbsp;</td>
                                        <td>&nbsp;[% $SLA.targetname %]&nbsp;</td>
                                        <td>&nbsp;[% $SLA.targetstatusdescr %]&nbsp;</td>
                                        <td>&nbsp;[% $SLA.slatime %]&nbsp;</td>

                                        <td id="count_[% $SLAID %]" >&nbsp;[% $SLA.AnzahlTickets %]&nbsp;</td>
                                        <td id="countIN_[% $SLAID %]" > [% $SLA.inTimePercent|replace:'.':',' %]%&nbsp;([% $SLA.inTime %])&nbsp;</td>
                                        <td id="countOUT_[% $SLAID %]" > [% $SLA.outTimePercent|replace:'.':',' %]% &nbsp; ([% $SLA.outTime %])&nbsp;</td>

                                        <td>
                                            <div style="text-align:center;">


                                                [% if $user->hasRight(303) %]
                                                    <a href="index.php?module=sla&event=remove&id=[% $SLAID %]" onclick="return confirm('[% $SLA.description %] \n[% $user->gettext('wirklich löschen?') %]');" class="btn btn-outline-secondary"><span class="fa fa-trash" title="[% $user->gettext('Löschen') %]"></span></a>
                                                    <a href="index.php?module=sla&event=editSLA&id=[% $SLAID %]" class="dialog btn btn-outline-secondary" data-fancybox-type="iframe"><span class="fa fa-trash" title="[% $user->gettext('Bearbeiten') %]"></span></a>
                                                    [% /if %]

                                                <a href="javascript:editSLA('[% $SLAID %]')" class="btn btn-outline-secondary"><span class="fa fa-search" title="[% $user->gettext('Tickets') %]" ></span></a>

                                            </div>
                                        </td>
                                    </tr>
                                [% foreachelse %]
                                    <tr class="even">
                                        <td colspan="10">
                                            <div align="center">[% $user->gettext('Keine Einträge vorhanden') %]</div>
                                        </td>
                                    </tr>
                                [% /foreach %]

                            </tbody>
                        </table>
                        <div class="text-center">
                            [% $Paging %]
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

<div class="modal fade" id="slaModal" tabindex="-1" role="dialog" aria-labelledby="slaModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body modalContent">
                ...
            </div>
        </div>
    </div>
</div>

<script>

    function keyEvent(event) {
    if (event.keyCode == 13) {
    switchPage(0);
    }
    }
    [% if $close %]
    parent.$.fancybox.close();
    parent.reload();
    [% /if %]

    $(document).ready(function(){


    $("select#SLASource").on("change", function(){
    // Post string
    var post_string = "type=" + $(this).val();
    // Send the request and update sub category dropdown
    $.ajax({
    type: "POST",
            data: post_string,
            dataType: "json",
            cache: false,
            url: 'index.php?module=sla&event=getOptions',
            timeout: 2000,
            error: function() {
            alert("Failed to submit");
            },
            success: function(data) {
            // Clear all options from sub category select
            if (data["0"]) $("select#SLAObjects option").remove();
            // Fill sub category select
            $.each(data, function(i, j){
            if ($('#selectedID').val() == i){
            var row = "<option value=" + i + " selected=\"selected\">" + j + "</option>";
            } else {
            var row = "<option value=" + i + ">" + j + "</option>";
            }
            $(row).appendTo("select#SLAObjects");
            });
            }
    });
    });
    $('#SLASource').trigger('change');
    $(".multiple").select2({theme: 'bootstrap-5'});
    $(".datepicker").datepicker();
    });
    function Validate(){
    var valid = true;
    if ('' == $('#Description').val()){
    valid = false;
    $('#Description').addClass('textboxerror');
    $('#DescriptionError').css('display', 'block');
    } else {
    $('#Description').removeClass('textboxerror');
    $('#DescriptionError').hide();
    }
    if (0 == $('#SLASource').val()){
    valid = false;
    $('#SLASource').addClass('textboxerror');
    $('#SLASourceError').css('display', 'block');
    } else {
    $('#SLASource').removeClass('textboxerror');
    $('#SLASourceError').hide();
    }
    if (0 == $('#SLAObjects').val()){
    valid = false;
    $('#SLAObjects').addClass('textboxerror');
    $('#SLASourceError').css('display', 'block');
    } else {
    $('#SLAObjects').removeClass('textboxerror');
    $('#SLAObjectsError').hide();
    }
    if (0 == $('#TargetStatus').val()){
    valid = false;
    $('#TargetStatus').addClass('textboxerror');
    $('#TargetStatusError').css('display', 'block');
    } else {
    $('#TargetStatus').removeClass('textboxerror');
    $('#TargetStatusError').hide();
    }
    if ('' == $('#SLATime').val()){
    valid = false;
    $('#SLATime').addClass('textboxerror');
    $('#SLATimeError').css('display', 'block');
    } else {
    $('#SLATime').removeClass('textboxerror');
    $('#SLATimeError').hide();
    }
    if (! checkDate($('#ValidRangeBegin').val())){
    valid = false;
    $('#ValidRangeBegin').addClass('textboxerror');
    $('#ValidRangeBeginError').css('display', 'block');
    } else {
    $('#ValidRangeBegin').removeClass('textboxerror');
    $('#ValidRangeBeginError').hide();
    }
    return valid;
    }


    function checkDate(date) {
    var check = false;
    var re = /^\d{1,2}\.\d{1,2}\.\d{4}$/;
    if (re.test(date)){
    var adata = date.split('.');
    var dd = parseInt(adata[0], 10);
    var mm = parseInt(adata[1], 10);
    var yyyy = parseInt(adata[2], 10);
    var xdata = new Date(yyyy, mm - 1, dd);
    if ((xdata.getFullYear() == yyyy) && (xdata.getMonth () == mm - 1) && (xdata.getDate() == dd))
            check = true;
    else
            check = false;
    } else {
    check = false;
    }
    return check;
    }


    function openNewSLA(){
    $(".modalContent").load("index.php?module=sla&event=newSLA #loadedSLAContent");
    $("#slaModal").modal('toggle');
    }

    function editSLA(id){
    $(".modalContent").load("index.php?module=sla&event=editSLA&id=" + id + " #loadedSLAContent");
    $("#slaModal").modal('toggle');
    }
    var jsonSLAsToCalc = [% if $jsonSLAsToCalc %][% $jsonSLAsToCalc %][% else %]false[% /if %];
        var unfinishSLAArray = [% if $unfinishSLAArray %][% $unfinishSLAArray %][% else %]false[% /if %];
            function changePeriod(element) {

            var value = element.options[element.selectedIndex].value;
            var startdate = document.forms['hm'].elements['startdate'];
            var enddate = document.forms['hm'].elements['enddate'];
            var now = new Date();
            var Tag = now.getDate();
            var Monat = now.getMonth();
            if (value == 0) {
            startdate.value = "[% $today %]";
            enddate.value = startdate.value;
            } else if (value == 1) {
            startdate.value = "[% $yesterday %]";
            enddate.value = startdate.value;
            } else if (value == 2) {
            startdate.value = "[% $lastweek %]";
            enddate.value = "[% $today %]";
            } else if (value == 3) {
            startdate.value = "[% $lastmonth_start %]";
            enddate.value = "[% $lastmonth_end %]";
            }
    [% if $timing_add %]
        [% foreach from=$timing_add item=timing2 %]
            else if (value == [% $timing2.id %]){

            startdate.value = "[% $timing2.start %]";
            enddate.value = "[% $timing2.end %]";
            }
        [% /foreach %]
    [% /if %]
            document.hm.submit();
            }

            function keyEvent(event) {
            if (event.keyCode == 13) {
            if (document.getElementById("action")) {
            document.getElementById("action").value = "";
            }
            submitForm();
            }
            }


            $(document).ready(function () {

            $("#searchSLAs")
                    .multiselect({
                        buttonClass: 'form-select',
    templates: {
        button: '<button type="button" class="multiselect dropdown-toggle" data-bs-toggle="dropdown"><span class="multiselect-selected-text"></span></button>',
    },
                    noneSelectedText: '[% $user->gettext("SLA wählen") %]',
                            height: 'auto',
                            checkAllText: '[% $user->gettext("Alle") %]',
                            uncheckAllText: '[% $user->gettext("Keine") %]',
                            selectedText: '# SLAs [% $user->gettext("gewählt") %]',
                            selectedList: 1,
                            header: true,
                            click: function(event, ui){
                            if (ui.checked){
                            //Wenn ein Auswahl getroffen wird (beim anchecken)
                            if (0 == ui.value){
                            //Wenn -Alle- gewählt ist: Alle anderen unchecken...
                            $("#searchSLAs").multiselect("widget").find(":checked").each(function () {
                            //if the current falue is in the array click the checkbbox
                            if (ui.value != $(this).val())
                                    this.trigger("click");
                            });
                            } else {
                            //Wenn andere Werte gecklickt werden, -alle- abwählen:
                            $("#searchSLAs").multiselect("widget").find(":checked").each(function () {
                            //if the current falue is in the array click the checkbbox
                            if (0 == $(this).val())
                                    this.trigger("click");
                            });
                            }
                            }
                            },
                            close: function(event, ui){
                            document.hm.submit();
                            }
                    })


///AJAX ansatz:

                    if (unfinishSLAArray){
            getUnfinishData2();
            }


            $(".datepicker").datepicker();
            function getUnfinishData2(){
            if (unfinishSLAArray.length){
            SlaID = unfinishSLAArray.shift();
            getAndSetSLAData(SlaID);
            }
            }

            function getAndSetSLAData(SlaID){
            LoadingHTML = '<img src="images/ajax-loader.gif" width="16px" heigth="16" alt="...loading..." titel="Lade SLA-Daten">'
                    $('#loading_' + SlaID).html(LoadingHTML);
            $.getJSON("index.php?module=sla&event=calcTickets", { id: SlaID}, function(json) {

            if (json["AnzahlTickets"]){
            $('#count_' + SlaID).html(json["AnzahlTickets"]);
            inTimeString = json.inTimePercent + '% (' + json.inTime + ')';
            $('#countIN_' + SlaID).html(inTimeString);
            outTimeString = json.outTimePercent + '% (' + json.outTime + ')';
            $('#countOUT_' + SlaID).html(outTimeString);
            } else {
            $('#count_' + SlaID).html('0');
            $('#countIN_' + SlaID).html('-');
            $('#countOUT_' + SlaID).html('-');
            }

            $('#outTimePercent_' + SlaID).width((parseFloat(json.inTimePercent) + parseFloat(json.outTimePercent)) * 2);
            $('#inTimePercent_' + SlaID).width(parseFloat(json.inTimePercent) * 2);
            if (json["ready"]){
            $('#loading_' + SlaID).html('');
            getUnfinishData2()
            } else {
            getAndSetSLAData(SlaID);
            }
            });
            }



            $('#excelExport').on("click", function (e){
            $('#task').val('excel');
            submitForm();
            $('#task').val('');
            });
            $(".multiple").select2({theme: 'bootstrap-5'});
            $(".dialog").fancybox({
            maxWidth : 690,
                    maxHeight: 350,
                    closeClick: false
            });
            });
            function switchPage(pos) {
            document.getElementById("pos").value = pos;
            submitForm();
            }

</script>
<!-- Component Contact end -->

</div>
