<link rel="stylesheet" href="includes/js/rating/SimpleStarRating.css">
<script src="includes/js/rating/SimpleStarRating.js"></script>
<script src="includes/js/chartjs/chart.js"></script>
<link rel="stylesheet" type="text/css" href="includes/js/datatables_1.11.5/datatables.min.css"/>
<script type="text/javascript" src="includes/js/datatables_1.11.5/datatables.min.js"></script>
[%*
<link rel="stylesheet" href="includes/js/bootstrap-select-1.12.4/dist/css/bootstrap-select.min.css">
<script src="includes/js/bootstrap-select-1.12.4/dist/js/bootstrap-select.min.js"></script>
*%]
<style>
    #hiddenElements .card-body {
        display: none;
    }
    .connectedCol{min-height: 500px;}
    .moveableItem{

        position: relative;
        min-height: 1px;
        padding-left: 15px;
        padding-right: 15px;

    }
    .ui-state-highlight{
        height: 2em;
        border: 1px dotted grey;
        padding-left: 15px;
        padding-right: 15px;
    }

    .fcsgraph{
        width: 90%;
        max-height:500px;
        position: relative;
        height: 25vh;    
        display: none;
    }

    .handle {
        cursor: move;
    }

</style>
<form id="position_form"  enctype="multipart/form-data" method="">
    <input type="hidden" name="position" id="position" value='[% $position %]' />
</form>
<div class="StartPageContent" style="margin-top:20px;">
    [% if false && $user->hasRight(26) %]
        <div class="row tile_count text-center">
            <div class="col-md-1 col-sm-4 col-6 tile_stats_count">
                <span class="count_top"><i class="fa fa-user"></i> [% $user->gettext('Tickets gesamt') %]</span>
                <div class="count">[% $AllTickets.anzahl %]</div>
                <span class="count_bottom"><i class="green">[% $AllOwnTickets.anzahl %]</i> davon Eigene</span>
            </div>
            [% foreach from=$status item=row %]
                <div class="col-md-1 col-sm-4 col-6 tile_stats_count">
                    <span class="count_top"><i class="fa fa-line-chart"></i> <a href="index.php?module=ticketlist&amp;MyTickets=1&amp;StatusID=[% $row.ticketstatusid %]"> Status [% $row.descr %] </a></span>
                    <div class="count">[% $row.anzahl %]</div>
                    <span class="count_bottom">[% $ownstatus[$row.ticketstatusid].anzahl|default:"0" %] Eigene</span>
                </div>
            [% /foreach %]
        </div>
    [% /if %]

    <div class="row">
        <div class="col-md-3">

            <div class="row connectedCol" id="col1" style="min-height: 500px; ">

                <div class="moveableItem" id="shoutboxContainer">
                [% if $user->hasRight(400) %][% include file=$modulePath|cat:"/shoutbox.tpl" %][% /if %]
            </div>

            [% if $smarty.const.SHOWRATING == 1 && $user->hasRight(874) %]
                <div class="moveableItem" id="ratingContainer">
                    <div class="panel-group" id="leftAccordion" role="tablist" aria-multiselectable="true">
                        <!--hiddenElements-->
                        <div class="card panel-info shadow-sm rounded">
                            <div class="card-header handle" role="tab">
                                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#DEACTIVEleftAccordion" href="#ratingPanel" aria-expanded="false" aria-controls="collapseContact">
                                    <div class="row">
                                        <div class="col-4">
                                            <h4 class="card-title">
                                                [% $user->gettext('Ticketbewertung') %]
                                            </h4>
                                        </div>
                                        <div class="col-8 text-end">
                                            <span class="rating" id="avgRating" data-stars="5" data-default-rating="[% $avg_rating %]" title='[% $avg_rating|round:"2"%] von 5' style="display: inline-block;" disabled></span>
                                            <script>
                                                var avgRating = new SimpleStarRating(document.getElementById('avgRating'));
                                            </script>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <div id="ratingPanel" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headinghiddenElements">
                                <div class="card-body connectedCol" id="ratings" style="min-height:0px;">
                                    [% foreach from=$ratings item=$r %]
                                    <div class="row">
                                        <div class="col-sm-6">
                                            <b>[% $r.criteria_name %]</b>
                                            <i class="fa-solid fa-circle-info float-end" title="[% $r.criteria_comment %]"></i>
                                        </div>
                                        <div class="col-sm-6">
                                            <span class="rating float-end" id="rating_[% $r.criteria_id %]" disabled data-stars="5" title="[% $r.average_rating|round:'2' %] von 5" data-default-rating="[% $r.average_rating %]" style="display: inline-block;"></span>
                                        </div>
                                    </div>
                                
                                    <script>
                                        var avgRating = new SimpleStarRating(document.getElementById('rating_[% $r.criteria_id %]'));
                                    </script>
                                    [% /foreach %]
                                </div>
                            </div>
                        </div>
                    </div>
                </div>              
            [% /if %]
            <div class="moveableItem" id="hiddenElementsContainer2">
                <div class="panel-group" id="leftAccordion" role="tablist" aria-multiselectable="true">
                    <!--hiddenElements-->
                    <div class="card panel-info shadow-sm rounded">
                        <div class="card-header handle" role="tab" id="headinghiddenElements">
                            <a class="collapsed" role="button" bs-data-toggle="collapse" bs-data-parent="#DEACTIVEleftAccordion" href="#hiddenElementsPanel" aria-expanded="false" aria-controls="collapseContact">
                                <div class="row">
                                    <div class="col-8">
                                        <h4 class="card-title">
                                            [% $user->gettext('Nicht angezeigte Objekte') %]
                                        </h4>
                                    </div>
                                    <div class="col-4 text-end">
                                        <button class="btn btn-outline-primary btn-sm" id="ResetElements" bs-data-toggle="tooltip" title="[% $user->gettext('Standardansicht wiederherstellen') %]">[% $user->gettext('Reset') %]</button>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div id="hiddenElementsPanel" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headinghiddenElements">
                            <div class="card-body connectedCol" id="hiddenElements" style="min-height:0px;">
                                <p class="well-sm">[% $user->gettext('Ziehen Sie Elemente, die nicht angezeigt werden sollen in dieses Panel.') %]
                                    [% $user->gettext('Durch den Reset-Button können Sie die Standardansicht wieder herstellen.') %]
                                </p>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            [% if !$Sennebogen %]
            <div class="moveableItem" id="TicketOverview1">

                <div class="card panel-info shadow-sm rounded" id="TicketOverview1Panel">
                    <div class="card-header handle">
                        <div class="row">
                            <div class="col-sm-8">
                                <h3 class="card-title">[% $user->gettext('Ticket&uuml;bersicht') %] - [% $user->gettext('nach Status') %]</h3>
                            </div>
                            <div class="col-sm-4 text-end">
                                <h3 class="card-title"><span class="text-end">[% $user->gettext('Nur Eigene') %]</span></h3>
                            </div>
                        </div>

                    </div>
                    <div class="card-body">
                        [% if $Tools->FCS_Count($ownstatus) == 0 %]
                            [% $user->gettext('Keine Tickets vorhanden') %]
                        [% else %]
                            <div class="table-responsive">
                                <table class="table table-striped">
                                    <thead>
                                        <tr>
                                            <th>[% $user->gettext('Status') %]</th>
                                            <th>[% $user->gettext('Anzahl') %]</th>
                                            <th>[% $user->gettext('Aufwand') %] [hh:mm]</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        [% foreach from=$ownstatus item=row %]
                                            <tr>
                                                <td scope="row">
                                                    <a href="index.php?module=ticketlist&amp;MyTickets=1&amp;StatusID=[% $row.ticketstatusid %]">[% $user->gettext($row.descr) %]</a>
                                                </td>
                                                <td>[% $row.anzahl %]</td>
                                                <td>[% $row.aufwandtime %]</td>
                                            </tr>
                                        [% /foreach %]
                                    </tbody>
                                </table>
                            </div>
                            [% if $showchart%]
                                <div class="fcsgraph">
                                    <canvas id="piechart1"></canvas>
                                </div>
                            [% /if %]
                            [%*
                            <div class="fcsgraph">
                            <canvas id="colchart1" style="width:100%; height: 370px;"></canvas>
                            </div>
                            *%]                            
                        [% /if %]
                    </div>
                </div>
            </div>
            [% /if %]
            [% if $user->hasRight(26) && !$Sennebogen %]
                <div class="moveableItem" id="TicketOverview2">
                    <div class="card panel-info shadow-sm rounded" id="TicketOverview2Panel">
                        <div class="card-header handle">
                            <div class="row">
                                <div class="col-sm-8">
                                    <h3 class="card-title">[% $user->gettext('Ticket&uuml;bersicht') %] - [% $user->gettext('nach Priorität') %]</h3>
                                </div>
                                <div class="col-sm-4 text-end">
                                    <h3 class="card-title"><span class="text-end">[% $user->gettext('Nur Eigene') %]</span></h3>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            [% if $Tools->FCS_Count($ownprio) == 0 %]
                                [% $user->gettext('Keine Tickets vorhanden') %]
                            [% else %]
                                <div class="table-responsive">
                                    <table class="table table-striped">
                                        <thead>
                                            <tr>
                                                <th>[% $user->gettext('Priorit&auml;t') %]</th>
                                                <th>[% $user->gettext('Anzahl') %]</th>
                                                <th>[% $user->gettext('Aufwand') %] [hh:mm]</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            [% foreach from=$ownprio item=row %]
                                                <tr>
                                                    [% if $hmcompany == "HOLIDAY AUTOS" %]
                                                        <td class="prio[% $row.ticketprioid %]"><a href="index.php?module=ticketlist&amp;MyTickets=1&amp;PrioID=[% $row.ticketprioid %]"><b>[% $row.descr %]</b></a></td>
                                                                [% else %]
                                                        <td><a href="index.php?module=ticketlist&amp;MyTickets=1&amp;PrioID=[% $row.ticketprioid %]">[% $row.descr %]</a></td>
                                                                [% /if %]
                                                    <td class="right">[% $row.anzahl %]</td>
                                                    <td class="right">[% $row.aufwand %]</td>
                                                </tr>
                                            [% /foreach %]
                                        </tbody>
                                    </table>
                                </div>
                                [% if $showchart%]
                                    <div class="fcsgraph">
                                        <canvas id ="piechart2"></canvas>
                                    </div>
                                [% /if %]
                                [%*
                                <div class="fcsgraph">
                                <canvas id ="colchart2" style="width:100%; height: 370px;"></canvas>
                                </div>
                                *%]
                            [% /if %]
                        </div>
                    </div>
                </div>
            [% /if %]
            [% if $user->hasRight(26) && !$Sennebogen %]
                <div class="moveableItem" id="TicketOverview3">
                    <div class="card panel-info shadow-sm rounded" id="TicketOverview3Panel">
                        <div class="card-header handle">
                            <div class="row">
                                <div class="col-sm-8">
                                    <h3 class="card-title">[% $user->gettext('Ticket&uuml;bersicht') %] - [% $user->gettext('nach Status') %]</h3>
                                </div>
                                <div class="col-sm-4 text-end">
                                    <h3 class="card-title"><span class="text-end">[% $user->gettext('Gesamt') %]</span></h3>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            [% if $Tools->FCS_Count($status) == 0 %]
                                [% $user->gettext('Keine Tickets vorhanden') %]
                            [% else %]
                                <div class="table-responsive">
                                    <table class="table table-striped">
                                        <thead>
                                            <tr>
                                                <th>[% $user->gettext('Status') %]</th>
                                                <th>[% $user->gettext('Anzahl') %]</th>
                                                <th>[% $user->gettext('Aufwand') %] [hh:mm]</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            [% foreach from=$status item=row %]
                                                <tr>
                                                    <td scope="row">
                                                        <a href="index.php?module=ticketlist&amp;StatusID=[% $row.ticketstatusid %]">[% $user->gettext($row.descr) %]</a>
                                                    </td>
                                                    <td class="right">[% $row.anzahl %]</td>
                                                    <td class="right">[% $row.aufwandtime %]</td>
                                                </tr>
                                            [% /foreach %]
                                        </tbody>
                                    </table>
                                </div>
                                       
                                [% if $showchart%]
                                    <div class="fcsgraph">
                                        <canvas id ="piechart4"></canvas>
                                    </div>
                                [% /if %]
                                [%*
                                <div class="fcsgraph">
                                <canvas id ="colchart4" style="width:100%;"></canvas>
                                </div>
                                *%]
                            [% /if %]
                        </div>
                    </div>
                </div>
                [% if $user->hasRight(522) %]  
                    <div class="moveableItem" id="TicketOverviewAllPrio">
                        <div class="card panel-info shadow-sm rounded" id="TicketOverviewAllPrioPanel">
                            <div class="card-header handle">
                                <div class="row">
                                    <div class="col-sm-8">
                                        <h3 class="card-title">[% $user->gettext('Ticket&uuml;bersicht') %] - [% $user->gettext('nach Priorität') %]</h3>
                                    </div>
                                    <div class="col-sm-4 text-end">
                                        <h3 class="card-title"><span class="text-end">[% $user->gettext('Gesamt') %]</span></h3>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body">
                                [% if $Tools->FCS_Count($prio) == 0 %]
                                    [% $user->gettext('Keine Tickets vorhanden') %]
                                [% else %]
                                    <div class="table-responsive">
                                        <table class="table table-striped">
                                            <thead>
                                                <tr>
                                                    <th>[% $user->gettext('Priorit&auml;t') %]</th>
                                                    <th>[% $user->gettext('Anzahl') %]</th>
                                                    <th>[% $user->gettext('Aufwand') %] [hh:mm]</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                [% foreach from=$prio item=row %]
                                                    <tr>
                                                        [% if $hmcompany == "HOLIDAY AUTOS" %]
                                                            <td scope="row" class="prio[% $row.ticketprioid %]"><a href="index.php?module=ticketlist&amp;PrioID=[% $row.ticketprioid %]">[% $row.descr %]</a></td>
                                                                    [% else %]
                                                            <td scope="row"><a href="index.php?module=ticketlist&amp;PrioID=[% $row.ticketprioid %]">[% $row.descr %]</a></td>
                                                                    [% /if %]
                                                        <td class="right">[% $row.anzahl %]</td>
                                                        <td class="right">[% $row.aufwand %]</td>
                                                    </tr>
                                                [% /foreach %]
                                            </tbody>
                                        </table>
                                    </div>

                                    [% if $showchart %]
                                        <div class="fcsgraph" >
                                            <canvas id ="piechart3"></canvas>
                                        </div>
                                    [% /if %]
                                  
                                    [%*
                                    <div class="fcsgraph">
                                    <canvas id ="colchart3" style="width:100%;"></canvas>
                                    </div>
                                    *%]
                                [% /if %]
                            </div>
                        </div>
                    </div>
                [% /if %]
            [% /if %]
                
            [% if $Sennebogen %]
                [% if $user->isInternUser() %]
                <div class="moveableItem" id="OwnTicketsIntern">
                    <div class="card panel-info shadow-sm rounded" id="OwnTicketsPanelIntern">
                        <div class="card-header handle">
                            <div class="row">
                                <div class="col-sm-12">
                                    <h3 class="card-title">[% $user->gettext('Ticket&uuml;bersicht') %] - [% $user->gettext('eigene') %]</h3>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            [% if $Tools->FCS_Count($OwnTickets) == 0 %]
                                [% $user->gettext('Keine Tickets vorhanden') %]
                            [% else %]
                                <div class="table-responsive">
                                    <table class="table table-striped">
                                        <thead>
                                            <tr>
                                                <th>[% $user->gettext('Status') %]</th>
                                                <th>[% $user->gettext('#') %]</th>
                                                <th>[% $user->gettext('Asset') %]</th>
                                                <th>[% $user->gettext('Titel') %]</th>
                                                <th>[% $user->gettext('Priorität') %]</th>
                                                <th>[% $user->gettext('Erstellt am') %]</th>
                                                <th>[% $user->gettext('Firma') %]</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            [% foreach from=$OwnTickets item=row %]
                                                <tr>
                                                    <td class="right">[% $user->gettext($row.descr) %]</td>
                                                    <td class="right">[% $row.id %]</td>
                                                    <td class="right">[% $row.devicename %]</td>
                                                    <td class="right">[% $row.ticketdescr %]</td>
                                                    <td class="right">[% $row.priority %]</td>
                                                    <td class="right">[% $row.createdate|date_format:"%d.%m.%Y" %]</td>
                                                    <td class="right">[% $row.company %]</td>
                                                </tr>
                                            [% /foreach %]
                                        </tbody>
                                    </table>
                                </div>


                                <div class="fcsgraph" >
                                    <canvas id ="piechartOwnIntern"></canvas>
                                </div>
                            [% /if %]
                        </div>
                    </div>
                </div>

                <div class="moveableItem" id="TicketsDeviceType">
                    <div class="card panel-info shadow-sm rounded" id="TicketsDeviceTypePanelIntern">
                        <div class="card-header handle">
                            <div class="row">
                                <div class="col-sm-12">
                                    <h3 class="card-title">[% $user->gettext('Ticket&uuml;bersicht') %]
                                    <select name="DeviceTypes" id="DeviceTypes" data-title="[% $user->gettext('Gerätetyp') %]" class="selectpicker">
                                        [% foreach from=$DeviceTypeList item=row %]
                                            <option value="[% $row.devicetypeid %]" [% if $row.devicetypeid == $SelectedDeviceTypeID %]selected="selected"[% /if %]>[% $row.typename %]</option>
                                        [% /foreach %]
                                    </select>
                                    </h3>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            [% if $Tools->FCS_Count($DeviceTypeTickets) == 0 %]
                                [% $user->gettext('Keine Tickets vorhanden') %]
                            [% else %]
                                <div id="TBody" class="table-responsive">
                                    <table id="tblDeviceType" class="table table-striped">
                                        <thead>
                                            <tr>
                                                <th>[% $user->gettext('Status') %]</th>
                                                <th>[% $user->gettext('#') %]</th>
                                                <th>[% $user->gettext('Asset') %]</th>
                                                <th>[% $user->gettext('Titel') %]</th>
                                                <th>[% $user->gettext('Priorität') %]</th>
                                                <th>[% $user->gettext('Erstellt am') %]</th>
                                                <th>[% $user->gettext('Firma') %]</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            [% foreach from=$DeviceTypeTickets item=row %]
                                                <tr>
                                                    <td class="right">[% $user->gettext($row.status) %]</td>
                                                    <td class="right">[% $row.id %]</td>
                                                    <td class="right">[% $row.devicename %]</td>
                                                    <td class="right">[% $row.ticketdescr %]</td>
                                                    <td class="right">[% $row.priority %]</td>
                                                    <td class="right">[% $row.createdate|date_format:"%d.%m.%Y" %]</td>
                                                    <td class="right">[% $row.company %]</td>
                                                </tr>
                                            [% /foreach %]
                                        </tbody>
                                    </table>
                                </div>


                                <div id="ContainerPiechartDeviceType" class="fcsgraph" >
                                    <canvas id ="piechartDeviceType"></canvas>
                                </div>
                            [% /if %]
                        </div>
                    </div>
                </div>
                
                <div class="moveableItem" id="TicketsAllIntern">
                        <div class="card panel-info shadow-sm rounded" id="TicketsAllPanel">
                            <div class="card-header handle">
                                <div class="row">
                                    <div class="col-sm-12">
                                        <h3 class="card-title">[% $user->gettext('Ticket&uuml;bersicht') %] - [% $user->gettext('Alle') %]</h3>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body">
                                [% if $Tools->FCS_Count($AllTickets) == 0 %]
                                    [% $user->gettext('Keine Tickets vorhanden') %]
                                [% else %]
                                    <div class="table-responsive">
                                        <table class="table table-striped">
                                            <thead>
                                                <tr>
                                                    <th>[% $user->gettext('Status') %]</th>
                                                    <th>[% $user->gettext('#') %]</th>
                                                    <th>[% $user->gettext('Asset') %]</th>
                                                    <th>[% $user->gettext('Titel') %]</th>
                                                    <th>[% $user->gettext('Priorität') %]</th>
                                                    <th>[% $user->gettext('Erstellt am') %]</th>
                                                    <th>[% $user->gettext('Firma') %]</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                [% foreach from=$AllTickets item=row %]
                                                    <tr>
                                                        <td class="right">[% $user->gettext($row.status) %]</td>
                                                        <td class="right">[% $row.id %]</td>
                                                        <td class="right">[% $row.devicename %]</td>
                                                        <td class="right">[% $row.ticketdescr %]</td>
                                                        <td class="right">[% $row.priority %]</td>
                                                        <td class="right">[% $row.createdate|date_format:"%d.%m.%Y" %]</td>
                                                        <td class="right">[% $row.company %]</td>
                                                    </tr>
                                                [% /foreach %]
                                            </tbody>
                                        </table>
                                    </div>


                                    <div class="fcsgraph" >
                                        <canvas id ="piechartAll"></canvas>
                                    </div>
                                [% /if %]
                            </div>
                        </div>
                    </div>
                [% else %]
                <div class="moveableItem" id="OwnTickets">
                    <div class="card panel-info shadow-sm rounded" id="OwnTicketsPanel">
                        <div class="card-header handle">
                            <div class="row">
                                <div class="col-sm-12">
                                    <h3 class="card-title">[% $user->gettext('Ticket&uuml;bersicht') %] - [% $user->gettext('eigene') %]</h3>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            [% if $Tools->FCS_Count($OwnTickets) == 0 %]
                                [% $user->gettext('Keine Tickets vorhanden') %]
                            [% else %]
                                <div class="table-responsive">
                                    <table class="table table-striped">
                                        <thead>
                                            <tr>
                                                <th>[% $user->gettext('Status') %]</th>
                                                <th>[% $user->gettext('#') %]</th>
                                                <th>[% $user->gettext('Asset') %]</th>
                                                <th>[% $user->gettext('Titel') %]</th>
                                                <th>[% $user->gettext('Priorität') %]</th>
                                                <th>[% $user->gettext('Erstellt am') %]</th>
                                                <th>[% $user->gettext('Supporter') %]</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            [% foreach from=$OwnTickets item=row %]
                                                <tr>
                                                    <td class="right">[% $user->gettext($row.status) %]</td>
                                                    <td class="right">[% $row.id %]</td>
                                                    <td class="right">[% $row.devicename %]</td>
                                                    <td class="right">[% $row.ticketdescr %]</td>
                                                    <td class="right">[% $row.priority %]</td>
                                                    <td class="right">[% $row.createdate|date_format:"%d.%m.%Y" %]</td>
                                                    <td class="right">[% $row.supporters %]</td>
                                                </tr>
                                            [% /foreach %]
                                        </tbody>
                                    </table>
                                </div>


                                <div class="fcsgraph" >
                                    <canvas id ="piechartOwn"></canvas>
                                </div>
                            [% /if %]
                        </div>
                    </div>
                </div>

                <div class="moveableItem" id="TicketsCompany">
                    <div class="card panel-info shadow-sm rounded" id="TicketsCompanyPanel">
                        <div class="card-header handle">
                            <div class="row">
                                <div class="col-sm-12">
                                    <h3 class="card-title">[% $user->gettext('Ticket&uuml;bersicht') %] - [% $Company %]</h3>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            [% if $Tools->FCS_Count($CompanyTickets) == 0 %]
                                [% $user->gettext('Keine Tickets vorhanden') %]
                            [% else %]
                                <div class="table-responsive">
                                    <table class="table table-striped">
                                        <thead>
                                            <tr>
                                                <th>[% $user->gettext('Status') %]</th>
                                                <th>[% $user->gettext('#') %]</th>
                                                <th>[% $user->gettext('Asset') %]</th>
                                                <th>[% $user->gettext('Titel') %]</th>
                                                <th>[% $user->gettext('Priorität') %]</th>
                                                <th>[% $user->gettext('Erstellt am') %]</th>
                                                <th>[% $user->gettext('Supporter') %]</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            [% foreach from=$CompanyTickets item=row %]
                                                <tr>
                                                    <td class="right">[% $user->gettext($row.status) %]</td>
                                                    <td class="right">[% $row.id %]</td>
                                                    <td class="right">[% $row.devicename %]</td>
                                                    <td class="right">[% $row.ticketdescr %]</td>
                                                    <td class="right">[% $row.priority %]</td>
                                                    <td class="right">[% $row.createdate|date_format:"%d.%m.%Y" %]</td>
                                                    <td class="right">[% $row.supporters %]</td>
                                                </tr>
                                            [% /foreach %]
                                        </tbody>
                                    </table>
                                </div>


                                <div class="fcsgraph" >
                                    <canvas id ="piechartCompany"></canvas>
                                </div>
                            [% /if %]
                        </div>
                    </div>
                </div>
                
                <div class="moveableItem" id="TicketsCompanyAndCity">
                        <div class="card panel-info shadow-sm rounded" id="TicketsCompanyAndCityPanel">
                            <div class="card-header handle">
                                <div class="row">
                                    <div class="col-sm-12">
                                        <h3 class="card-title">[% $user->gettext('Ticket&uuml;bersicht') %] - [% $user->gettext('Niederlassung') %] [% $Location %]</h3>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body">
                                [% if $Tools->FCS_Count($CompanyAndCityTickets) == 0 %]
                                    [% $user->gettext('Keine Tickets vorhanden') %]
                                [% else %]
                                    <div class="table-responsive">
                                        <table class="table table-striped">
                                            <thead>
                                                <tr>
                                                    <th>[% $user->gettext('Status') %]</th>
                                                    <th>[% $user->gettext('#') %]</th>
                                                    <th>[% $user->gettext('Asset') %]</th>
                                                    <th>[% $user->gettext('Titel') %]</th>
                                                    <th>[% $user->gettext('Priorität') %]</th>
                                                    <th>[% $user->gettext('Erstellt am') %]</th>
                                                    <th>[% $user->gettext('Supporter') %]</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                [% foreach from=$CompanyAndCityTickets item=row %]
                                                    <tr>
                                                        <td class="right">[% $user->gettext($row.status) %]</td>
                                                        <td class="right">[% $row.id %]</td>
                                                        <td class="right">[% $row.devicename %]</td>
                                                        <td class="right">[% $row.ticketdescr %]</td>
                                                        <td class="right">[% $row.priority %]</td>
                                                        <td class="right">[% $row.createdate|date_format:"%d.%m.%Y" %]</td>
                                                        <td class="right">[% $row.supporters %]</td>
                                                    </tr>
                                                [% /foreach %]
                                            </tbody>
                                        </table>
                                    </div>


                                    <div class="fcsgraph" >
                                        <canvas id ="piechartCompanyAndCity"></canvas>
                                    </div>
                                [% /if %]
                            </div>
                        </div>
                    </div>
                [% /if %]
            [% /if %]

            [% if $Tools->FCS_Count($LinkList) %]
               
                <div class="moveableItem" id="LinkList">
                    <div class="card panel-info shadow-sm rounded" id="LinkListPanel">
                        <div class="card-header handle">
                            <h3 class="card-title">[% $user->gettext('Links') %]</h3>
                        </div>
                        <div class="card-body">


                            <ul id="LinkList" class="list-group">
                                
                                    [% foreach from=$LinkList item=Link %]
                                    <a href="[% $Link.url %]" target="[% if $Link.openinsamewindow %]_top[% else %]_blank[% /if %]" title="[% $Link.descr %]">
                                        <li id="Link_[% $Link.position %]" class="list-group-item">

                                <div class="row " style="min-height:60px">
                                            
                                    <div class="col-xl-5 d-flex align-items-center">
                                        [% if $Link.hasimg %]
                                        <img src="[% $Link.imagepath %]" class="img-fluid" style="width: auto; max-height:60px"/>
                                        [% /if %]
                                    </div>

                                    <div class="col-xl-6 ">
                                            <h5 class=" fw-bold text-start">[% $Link.descr %]</h5>
                                            <h6 class="text-start" style="white-space: normal; word-wrap: break-word;"> [% $Link.subdescr %] </h6>
                                    </div>

                                    <div class="col-xl-1 ">
                                        [% if $Link.openinsamewindow %]
                                        <i class="fa-solid fa-arrow-right" title="[% $user->gettext('Im gleichen Fenster öffnen') %]"></i>
                                        [% else %]
                                        <i class="fa-solid fa-up-right-from-square" title="[% $user->gettext('Im neuen Tab öffnen') %]"></i>
                                        [% /if %]
                                    </div>
  
                                </div>
                                        </li>
                                        </a>
                                    [% foreachelse %]
                                        <li class="list-group-item">
                                            [% $user->gettext('Keine Links definiert') %]
                                        </li>
                                    [% /foreach %]
                                    
                            </ul>
                        </div>
                    </div>
                </div>
            
            [% /if %]
            [% if $user->hasRight(31) && $hmcompany == 'PFLITSCH GMBH & CO KG' %]

                <div class="moveableItem" id="TopTenKBArticles">
                    <div class="card panel-info shadow-sm rounded" id="TopTenKBArticlesPanel">
                        <div class="card-header handle">
                            <h3  class="card-title">[% $user->gettext('Knowledgebase') %] <span class="text-end">[% $user->gettext('TOP 10') %]</span></h3>
                        </div>
                        <div class="card-body">

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

            [% /if %]
        </div>
    </div>
    <div class="col-md-6" >
        <div class="row connectedCol " id="col2" style="min-height: 500px;">

            [% if  $smarty.const.DONTCHECKVERSION !== 1 && $user->hasRight(36) %]

                <div class="moveableItem" id="UpdateInfoContainer">
                    <div class="card panel-info shadow-sm rounded" id="UpdateInfoPanel">
                        <div class="card-header handle" title="">
                            <h3 class="card-title">[% $user->gettext('Versionsinfo') %]</h3>
                        </div>
                        <div class="card-body">

                            <img src="images/ajax-loader.gif" alt="loading..." />

                        </div>
                    </div>
                </div>
            [% /if %]

            <div class="moveableItem" id="NewsList">
                <div class="card panel-info shadow-sm rounded" id="NewsListPanel">
                    <div class="card-header handle">
                        <h3 class="card-title">[% $user->gettext('Aktuelle Meldungen') %]</h3>
                    </div>
                    <div class="card-body">

                        <img src="images/ajax-loader.gif" alt="loading..." />

                    </div>
                </div>
            </div>
                    [% if $LogData %]
        <div class="moveableItem" id="ChangeLog">
                <div class="card panel-info shadow-sm rounded" id="ChangeLogPanel">
                    <div class="card-header handle">
                        <h3 class="card-title">[% $user->gettext('ChangeLog') %]</h3>
                    </div>
                    <div class="card-body">

                        [% foreach from=$LogData item=$Log %]
                            <div class="card panel-info shadow-sm rounded">
                                <div class="card-header">
                                    [% $Log.title %]
                                </div>
                                <div class="card-body">
                                    [% $Log.content %]
                                </div>
                            </div>
                        [% /foreach %]

                    </div>
                </div>
            </div>
                        [% /if %]
[%*
            <div class="moveableItem" id="TicketList1">
                <div class="card panel-info shadow-sm rounded" id="TicketList1Panel">
                    <div class="card-header handle">
                        <div class="row">
                            <div class="col-8">
                                <h4 class="card-title">
                                    [% $user->gettext('Ticketliste') %]
                                </h4>
                            </div>
                            <div class="col-4 text-end">

                                <form id="TicketList1Form">
                                    <input type="hidden" name="Export" value="load" />
                                    <input type="hidden" name="startPage" value="1" />
                                    <select name="FilterNames" class="multiselect" onChange="loadTickets1();" >
                                        <option value="20">Drucker</option>
                                        <option value="17">Tests</option>
                                    </select>
                                </form>

                            </div>
                        </div>
                    </div>
                    <div class="card-body">

                        <div id="TicketListBody1">
                            <img src="images/ajax-loader.gif" alt="loading..." />
                        </div>
                    </div>
                </div>
            </div>

            <div class="moveableItem" id="TicketList2">
                <div class="card panel-info shadow-sm rounded" id="TicketList2Panel">
                    <div class="card-header handle">
                        <div class="row">
                            <div class="col-8">
                                <h4 class="card-title">
                                    [% $user->gettext('Ticketliste') %]
                                </h4>
                            </div>
                            <div class="col-4 text-end">

                                <form id="TicketList2Form">
                                    <input type="hidden" name="Export" value="load" />
                                    <input type="hidden" name="startPage" value="1" />
                                    <select name="FilterNames" class="multiselect" onChange="loadTickets2();" >
                                        <option value="17">Tests</option>
                                        <option value="20">Drucker</option>
                                    </select>
                                </form>

                            </div>
                        </div>
                    </div>
                    <div class="card-body">

                        <div id="TicketListBody2">
                            <img src="images/ajax-loader.gif" alt="loading..." />
                        </div>
                    </div>
                </div>
            </div>                        
*%]
        </div>
[%*
    <div class="row connectedCol " id="col2" style="min-height: 500px;">
        <div class="moveableItem" id="ticketlistContainer">
            <div class="panel-group" id="leftAccordion" role="tablist" aria-multiselectable="true">
    
                <div class="card panel-info shadow-sm rounded">
                    <div class="card-header handle" role="tab">

                            <div class="row">
                                <div class="col-4">
                                    <h4 class="card-title">
                                        [% $user->gettext('Ticketlist') %]
                                    </h4>
                                </div>
                                <div class="col-8 text-end">
                                    <select class="form-control" id="FilterSelect">
                                        <option value="0">[% $user->gettext('Bitte wählen Sie ein Filter')%]</option>
                                        [% foreach from=$Filters item=$FiltersInGroup key=$FilterKey %]
                                            [% if $FilterKey != 'activeFilter' %]
                                            <optgroup label="[% $FilterKey %]">
                                                [% foreach from=$FiltersInGroup item=$Filter key=$key %]
                                                    <option value="[% $key %]">[% $Filter.filtername %]</option>
                                                [% /foreach%]
                                            </optgroup>
                                            [% /if %]
                                        [% /foreach %]
                                    </select>
                                </div>
                            </div>

                    </div>
                    <div id="ticketlistPanel" class="" role="tabpanel" aria-labelledby="headinghiddenElements">
                        <div class="card-body connectedCol" id="" style="min-height:0px;">
                            <iframe id="TicketListIframe" src="index.php?module=ticketlist&iniframe=1" width="100%" style="min-height: 500px;"></iframe>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
*%]
    </div>

    <div class="col-md-3 " >
        [% if $user->hasRight(31) %]
            <div class="row connectedCol"  id="col3" style="min-height: 500px;">
                <div class="moveableItem" id="TopTenKBArticles">
                    <div class="card panel-info shadow-sm rounded" id="TopTenKBArticlesPanel">
                        <div class="card-header handle">
                            <h3 class="card-title">[% $user->gettext('Knowledgebase') %] <span class="text-end">[% $user->gettext('TOP 10') %]</span></h3>
                        </div>
                        <div class="card-body">

                            <img src="images/ajax-loader.gif" alt="loading..." />

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


                <div class="moveableItem" id="LatestFiveKBArticles">
                    <div class="card panel-info shadow-sm rounded" id="LatestFiveKBArticlesPanel">
                        <div class="card-header handle">
                            <div class="row">
                                <div class="col-sm-4">
                                    <h3 class="card-title">[% $user->gettext('Knowledgebase') %]</h3>
                                </div>
                                <div class="col-sm-8 text-end">
                                    <h3 class="card-title">[% $user->gettext('Die f&uuml;nf neuesten Artikel') %]</h3>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">

                            <img src="images/ajax-loader.gif" alt="loading..." />

                        </div>
                    </div>
                </div>
            </div>
        [% /if %]
    </div>

</div>
</div>

<script>
    loadPosition();
    var positionList = [];

[%*
//Ticketlisten:
    //$(".multiselect").multiselect();
*%]
    $(function () {
        $(" .connectedCol").sortable({
            connectWith: ".connectedCol",
            items: ".moveableItem",
//            revert: false,
            handle: ".handle",
//            cancel: "",
            placeholder: "ui-state-highlight",
//            forcePlaceholderSize: true,
            update: function (e) {
                $('.connectedCol').children().each(function () {
                    savePosition($(this).attr("id"));
                });
            },
            start: function (e) {
                $('#hiddenElementsPanel').collapse('show');
            },
            stop: function (e) {
                $('#hiddenElementsPanel').collapse('hide');
                submitPosition(JSON.stringify(positionList));
            }
        })
    });

    function submitPosition(position) {
        var http = new XMLHttpRequest();
        http.open("POST", "index.php?module=start", true);
        http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        var params = "position=" + position;
        http.send(params);
        http.onload = function () {
            if (position == "") {
                location.reload();
            }
        }
    }

    function savePosition(id) {
        var el = $("#" + id);
        var container = el.parent().attr("id");
        var index = el.index();
        var obj = {element: id, container: container, index: index};
        updatePosition(obj);
//        localStorage.setItem(id, JSON.stringify({container: container, index: index}));

    }

    function updatePosition(obj) {
        var temp = [];
        for (var i = 0; i < positionList.length; i++) {
            if (positionList[i].element !== obj.element) {
                temp.push(positionList[i]);
            }
        }
        temp.push(obj);
        positionList = temp;
    }

    function loadPosition() {

        var json = [% $position %];
        for (var i = 0; i < json.length; i++) {
            var el = $("#" + json[i].element);
            var container = "#" + json[i].container;
            var index = json[i].index;
            if (index == 0) {
                $(container).prepend(el);
            } else if ($(container).children().eq(index - 1).length == 0) {
                $(container).append(el);
            } else {
                $(container).children().eq(index - 1).after(el);
            }
            //console.log('... el '+ json[i].element);
        }

    }

    $("#ResetElements").on('click', function () {
        submitPosition("");

    })

    var Elements = [% $Elements %];
    [% if FALSE && $PrioJson && $PrioJson != '' %]
    var PrioJson = [% $PrioJson %];
    var PrioOwnJson = [% $PrioOwnJson %];
    var PrioColors = ['[% $Tools->StyleDefault.PrioColor1 %]', '[% $Tools->StyleDefault.PrioColor2 %]', '[% $Tools->StyleDefault.PrioColor3 %]', '[% $Tools->StyleDefault.PrioColor4 %]'];
    [% /if %]


    $(document).ready(function () {
        $('.handle').tooltip({title: "[% $user->gettext('Bewegen Sie das Objekt an die gewünschte Stelle') %]"});
        //$("*[title!='']").tooltip();
        //Warum auch immer im Standard ein in bei dem Panel hinzugefügt wird.
        //So wird die Klasse enterfernt und das Pannel erstmal als geschlossen angezeigt.
        $('#hiddenElementsPanel').removeClass('in');

        //Um die Charts mit oder ohne Legende anzuzeigen muss die Seite neu geladenw erden.
        //Im Prinzip sollte die Legende bei onResize angezeigt oder verborgen werden, das klappt aber nicht.
        //Trigger resize triggert nur wen responsive = false
        setTimeout(triggerRezise, 1500);
    })


    function triggerRezise() {
        $('.fcsgraph').show();
        //console.log('resize');
        /*
         var evt = window.document.createEvent('UIEvents'); 
         evt.initUIEvent('resize', true, false, window, 0); 
         window.dispatchEvent(evt);    
         
         //Alle, außer IE:
         window.dispatchEvent(new Event('resize'));       
         
         //jQuery:
         
         $(window).trigger('resize');
         */
        for (var id in Chart.instances) {
//      console.log("trigger resize on " + id);
            Chart.instances[id].options.responsive = false;
            Chart.instances[id].update();
            Chart.instances[id].resize();
            Chart.instances[id].options.responsive = true;
//    Chart.instances[id].options.title.text = 'new title';
            Chart.instances[id].update();
            //Chart.instances[id].reset();
            //console.log(Chart.instances[id].generateLegend());
        }


    }


    /**
     * getCanvasWidth
     */
    function getCanvasWidth(id) {
        el = document.getElementById(id);
        width = el.width;
//        console.log(id + ' width: ' + width);
        return (width < 340) ? false : true;
    }
    [% if $showchart && !$Sennebogen %]
    $.get("index.php?event=makeAJAXPieChart1", function (data, status) {
        pie1 = JSON.parse(data);
        var myPieChart1 = new Chart(document.getElementById("piechart1").getContext('2d'), {
            type: 'pie',
            data: pie1,
            options: {
                responsive: true,
                maintainAspectRatio: false,
                title: {
                    display: true,
                    text: '[%$user->gettext("Anzahl der Tickets nach Status")%]'
                },
                legend: {
                    display: getCanvasWidth("piechart1")
                },
                onResize: function (myChart, size) {
//                    console.log("Rezising piechart1 - width: " + size.width);
                    var showLegend = (size.width < 340) ? false : true;
                    myChart.options.legend.display = showLegend;
                    myChart.options.responsive = true;

                }
            }

        });
        document.getElementById("piechart1").onclick = function (e) {
            var slice = myPieChart1.getElementAtEvent(e);
            if (!slice.length)
                return; // return if not clicked on slice
            var label = slice[0]._model.label;

            console.log("label: " + label);
            switch (label) {

                case 'OPEN':
                case 'OFFEN':
                    window.location.href = 'index.php?module=ticketlist&MyTickets=1&StatusID=1';
                    break;
                case 'ACTIVE':
                case 'AKTIV':
                    window.location.href = 'index.php?module=ticketlist&MyTickets=1&StatusID=2';
                    break;
                case 'CLOSE':
                case 'GESCHLOSSEN':
                    window.location.href = 'index.php?module=ticketlist&MyTickets=1&StatusID=3';
                    break;
                case 'ASSIGNED':
                case 'ZUGEWIESEN':
                    window.location.href = 'index.php?module=ticketlist&MyTickets=1&StatusID=4';
                    break;
                case 'CHANGED':
                case 'MODIFIZIERT':
                    window.location.href = 'index.php?module=ticketlist&MyTickets=1&StatusID=5';
                    break;
                case 'REOPENED':
                case 'WIEDER OFFEN':
                    window.location.href = 'index.php?module=ticketlist&MyTickets=1&StatusID=6';
                    break;
                case 'VERIFIED':
                case 'BEST&Auml;TIGT':
                    window.location.href = 'index.php?module=ticketlist&MyTickets=1&StatusID=7';
                    break;
                case 'ONHOLD':
                case 'PAUSIERT':
                    window.location.href = 'index.php?module=ticketlist&MyTickets=1&StatusID=8';
                    break;
                case 'DONE':
                case 'ERLEDIGT':
                    window.location.href = 'index.php?module=ticketlist&MyTickets=1&StatusID=9';
                    break;
                case 'IMPOSSIBLE':
                case 'UNM&Ouml;GLICH':
                    window.location.href = 'index.php?module=ticketlist&MyTickets=1&StatusID=11';
                    break;
                case 'RESPONSE':
                case 'BEANTWORTET':
                    window.location.href = 'index.php?module=ticketlist&MyTickets=1&StatusID=13';
                    break;
            }
        };
    });

    $.get("index.php?event=makeAJAXPieChart2", function (data, status) {
        pie2 = JSON.parse(data);
        var myPieChart = new Chart(document.getElementById("piechart2").getContext('2d'), {
            type: 'pie',
            data: pie2,
            options: {
                responsive: true,
                maintainAspectRatio: false,
                title: {
                    display: true,
                    text: '[%$user->gettext("Anzahl der Tickets nach Priorität")%]',
                },
                legend: {
                    display: (document.getElementById("piechart2").width < 340) ? false : true
                },
                onResize: function (myChart, size) {
                    var showLegend = (size.width < 340) ? false : true;
                    myChart.options.legend.display = showLegend;
                }
            }
        });
        document.getElementById("piechart2").onclick = function (e) {
            var slice = myPieChart.getElementAtEvent(e);
            if (!slice.length)
                return; // return if not clicked on slice
            var label = slice[0]._model.label;
            switch (label) {
                // add case for each label/slice                    
                case 'Urgent':
                case 'Dringend':
                case 'Sofort':
                    window.location.href = 'index.php?module=ticketlist&MyTickets=1&PrioID=4';
                    break;
                case 'High':
                case 'Hoch':
                    window.location.href = 'index.php?module=ticketlist&MyTickets=1&PrioID=3';
                    break;
                case 'Medium':
                case 'Mittel':
                case 'Eher hoch':
                    window.location.href = 'index.php?module=ticketlist&MyTickets=1&PrioID=2';
                    break;
                case 'Low':
                case 'Niedrig':
                case 'Eher gering':
                    window.location.href = 'index.php?module=ticketlist&MyTickets=1&PrioID=1';
                    break;
                case 'Gering':
                    window.location.href = 'index.php?module=ticketlist&MyTickets=1&PrioID=5';
                    break;

            }
        };
    });
[% /if %]
[% if $showchart && $user->hasRight(522) && !$Sennebogen %]
    $.get("index.php?event=makeAJAXPieChart3", function (data, status) {
        pie2 = JSON.parse(data);
        var myPieChart = new Chart(document.getElementById("piechart3").getContext('2d'), {
            type: 'pie',
            data: pie2,
            options: {
                responsive: true,
                maintainAspectRatio: false,
                title: {
                    display: true,
                    text: '[%$user->gettext("Anzahl der Tickets nach Priorität")%]'
                },
                legend: {
                    display: (document.getElementById("piechart3").width < 340) ? false : true
                },
                onResize: function (myChart, size) {
                    var showLegend = (size.width < 340) ? false : true;
                    myChart.options.legend.display = showLegend;
                }
            }
        });
        document.getElementById("piechart3").onclick = function (e) {
            var slice = myPieChart.getElementAtEvent(e);
            if (!slice.length)
                return; // return if not clicked on slice
            var label = slice[0]._model.label;
            switch (label) {
                // add case for each label/slice
                case 'Urgent':
                case 'Dringend':
                case 'Sofort':
                    window.location.href = 'index.php?module=ticketlist&PrioID=4';
                    break;
                case 'High':
                case 'Hoch':
                    window.location.href = 'index.php?module=ticketlist&PrioID=3';
                    break;
                case 'Medium':
                case 'Mittel':
                case 'Eher hoch':
                    window.location.href = 'index.php?module=ticketlist&PrioID=2';
                    break;
                case 'Low':
                case 'Niedrig':
                case 'Eher gering':
                    window.location.href = 'index.php?module=ticketlist&PrioID=1';
                    break;
                case 'Gering':
                    window.location.href = 'index.php?module=ticketlist&PrioID=5';
                    break;
            }
        };
    });
[% /if %]
        [% if $showchart && $user->hasRight(26) && !$Sennebogen  %] 
    $.get("index.php?event=makeAJAXPieChart4", function (data, status) {
        pie1 = JSON.parse(data);
        var myPieChart = new Chart(document.getElementById("piechart4").getContext('2d'), {
            type: 'pie',
            data: pie1,
            options: {
                responsive: true,
                maintainAspectRatio: false,
                title: {
                    display: true,
                    text: '[%$user->gettext("Anzahl der Tickets nach Status")%]'
                },
                legend: {
                    display: (document.getElementById("piechart4").width < 340) ? false : true
                },
                onResize: function (myChart, size) {
                    var showLegend = (size.width < 340) ? false : true;
                    myChart.options.legend.display = showLegend;
                }
            }
        });
        document.getElementById("piechart4").onclick = function (e) {
            var slice = myPieChart.getElementAtEvent(e);
            if (!slice.length)
                return; // return if not clicked on slice
            var label = slice[0]._model.label;
            switch (label) {
                // add case for each label/slice
                case 'OPEN':
                case 'OFFEN':
                    window.location.href = 'index.php?module=ticketlist&StatusID=1';
                    break;
                case 'ACTIVE':
                case 'AKTIV':
                    window.location.href = 'index.php?module=ticketlist&StatusID=2';
                    break;
                case 'CLOSE':
                case 'GESCHLOSSEN':
                    window.location.href = 'index.php?module=ticketlist&StatusID=3';
                    break;
                case 'ASSIGNED':
                case 'ZUGEWIESEN':
                    window.location.href = 'index.php?module=ticketlist&StatusID=4';
                    break;
                case 'CHANGED':
                case 'MODIFIZIERT':
                    window.location.href = 'index.php?module=ticketlist&StatusID=5';
                    break;
                case 'REOPENED':
                case 'WIEDER OFFEN':
                    window.location.href = 'index.php?module=ticketlist&StatusID=6';
                    break;
                case 'VERIFIED':
                case 'BEST&Auml;TIGT':
                    window.location.href = 'index.php?module=ticketlist&StatusID=7';
                    break;
                case 'ONHOLD':
                case 'PAUSIERT':
                    window.location.href = 'index.php?module=ticketlist&StatusID=8';
                    break;
                case 'DONE':
                case 'ERLEDIGT':
                    window.location.href = 'index.php?module=ticketlist&StatusID=9';
                    break;
                case 'IMPOSSIBLE':
                case 'UNM&Ouml;GLICH':
                    window.location.href = 'index.php?module=ticketlist&StatusID=11';
                    break;
                case 'RESPONSE':
                case 'BEANTWORTET':
                    window.location.href = 'index.php?module=ticketlist&StatusID=13';
                    break;
            }
        };
    });
[% /if %]
    data = {
        datasets: [{
                data: [10, 20, 30],
                backgroundColor: [
                    'red',
                    'yellow',
                    'rgba(255, 206, 86, 0.2)'
                ]
            }],

        // These labels appear in the legend and in the tooltips when hovering different arcs
        labels: [
            'Red',
            'Yellow',
            'Blue'
        ],

    };
    
    $("#FilterSelect").on("change", function(){
       loadTicketlistWithFilter($(this).val()); 
    });
    
    /**
 * 
 */
        function loadTicketlistWithFilter(Filter) {
   var url = 'index.php?module=ticketlist&Export=load&FilterNames='+Filter+'&iniframe=1';
   console.log(url);
   $('#TicketListIframe').attr('src', url);
  //$("#TicketListIframe").load('index.php?module=ticketlist&Export=load&FilterNames='+Filter+'&inifriame=1');
  //console.log("a");
};
    [% if $Sennebogen %]
        [% if $user->isInternUser() %]
        $.get("index.php?event=CreatePieChart&Type=Own", function (data, status) {
        pie2 = JSON.parse(data);
        var myPieChartOwnIntern = new Chart(document.getElementById("piechartOwnIntern").getContext('2d'), {
            type: 'pie',
            data: pie2,
            options: {
                responsive: true,
                maintainAspectRatio: false,
                title: {
                    display: true,
                    text: '[%$user->gettext("Ticketübersicht – Status")%]'
                },
                legend: {
                    display: (document.getElementById("piechartOwnIntern").width < 340) ? false : true
                },
                onResize: function (myChart, size) {
                    var showLegend = (size.width < 340) ? false : true;
                    myChart.options.legend.display = showLegend;
                }
            }
        });
            document.getElementById("piechartOwnIntern").onclick = function (e)
            {
                var slice = myPieChartOwnIntern.getElementAtEvent(e);
                if (!slice.length)
                    return; // return if not clicked on slice
                var label = slice[0]._model.label;
                switch (label) 
                {
                    case 'REPLY TO SERVICE PARTNER':
                        window.location.href = 'index.php?module=ticketlist&StatusID=18';
                        break;
                    case 'FEEDBACK EXPECTED / SOLUTION PROPOSED':
                        window.location.href = 'index.php?module=ticketlist&StatusID=19';
                        break;
                    case 'DRAFT':
                        window.location.href = 'index.php?module=ticketlist&StatusID=20';
                        break;
                }
            };
        });

        $.get("index.php?event=CreatePieChart&Type=DeviceType&DeviceTypeID=[% $SelectedDeviceTypeID %]", function (data, status) {
        pie2 = JSON.parse(data);
        var myPieChartDeviceType = new Chart(document.getElementById("piechartDeviceType").getContext('2d'), {
            type: 'pie',
            data: pie2,
            options: {
                responsive: true,
                maintainAspectRatio: false,
                title: {
                    display: true,
                    text: '[%$user->gettext("Ticketübersicht – Status")%]'
                },
                legend: {
                    display: (document.getElementById("piechartDeviceType").width < 340) ? false : true
                },
                onResize: function (myChart, size) {
                    var showLegend = (size.width < 340) ? false : true;
                    myChart.options.legend.display = showLegend;
                }
            }
        });
            document.getElementById("piechartDeviceType").onclick = function (e)
            {
                var slice = myPieChartDeviceType.getElementAtEvent(e);
                if (!slice.length)
                    return; // return if not clicked on slice
                var label = slice[0]._model.label;
                switch (label) 
                {
                    case 'REPLY TO SERVICE PARTNER':
                        window.location.href = 'index.php?module=ticketlist&StatusID=18';
                        break;
                    case 'FEEDBACK EXPECTED / SOLUTION PROPOSED':
                        window.location.href = 'index.php?module=ticketlist&StatusID=19';
                        break;
                    case 'DRAFT':
                        window.location.href = 'index.php?module=ticketlist&StatusID=20';
                        break;
                }
            };
        });

    $.get("index.php?event=CreatePieChart&Type=All", function (data, status) {
        pie2 = JSON.parse(data);
        var myPieChartAll = new Chart(document.getElementById("piechartAll").getContext('2d'), {
            type: 'pie',
            data: pie2,
            options: {
                responsive: true,
                maintainAspectRatio: false,
                title: {
                    display: true,
                    text: '[%$user->gettext("Ticketübersicht – Status")%]'
                },
                legend: {
                    display: (document.getElementById("piechartAll").width < 340) ? false : true
                },
                onResize: function (myChart, size) {
                    var showLegend = (size.width < 340) ? false : true;
                    myChart.options.legend.display = showLegend;
                }
            }
        });
            document.getElementById("piechartAll").onclick = function (e)
            {
                var slice = myPieChartAll.getElementAtEvent(e);
                if (!slice.length)
                    return; // return if not clicked on slice
                var label = slice[0]._model.label;
                switch (label) 
                {
                    case 'REPLY TO SERVICE PARTNER':
                        window.location.href = 'index.php?module=ticketlist&StatusID=18';
                        break;
                    case 'FEEDBACK EXPECTED / SOLUTION PROPOSED':
                        window.location.href = 'index.php?module=ticketlist&StatusID=19';
                        break;
                    case 'DRAFT':
                        window.location.href = 'index.php?module=ticketlist&StatusID=20';
                        break;
                }
            };
        });
    [% else %]
        $.get("index.php?event=CreatePieChart&Type=Own", function (data, status) {
            pie2 = JSON.parse(data);
            var myPieChartOwn = new Chart(document.getElementById("piechartOwn").getContext('2d'), {
                type: 'pie',
                data: pie2,
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    title: {
                        display: true,
                        text: '[%$user->gettext("Ticketübersicht – Status")%]'
                    },
                    legend: {
                        display: (document.getElementById("piechartOwn").width < 340) ? false : true
                    },
                    onResize: function (myChart, size) {
                        var showLegend = (size.width < 340) ? false : true;
                        myChart.options.legend.display = showLegend;
                    }
                }
            });

            document.getElementById("piechartOwn").onclick = function (e)
            {
                var slice = myPieChartOwn.getElementAtEvent(e);
                if (!slice.length)
                    return; // return if not clicked on slice
                var label = slice[0]._model.label;
                switch (label) 
                {
                    case 'REPLY TO SERVICE PARTNER':
                        window.location.href = 'index.php?module=ticketlist&StatusID=18';
                        break;
                    case 'FEEDBACK EXPECTED / SOLUTION PROPOSED':
                        window.location.href = 'index.php?module=ticketlist&StatusID=19';
                        break;
                    case 'DRAFT':
                        window.location.href = 'index.php?module=ticketlist&StatusID=20';
                        break;
                }
            };
        });

            $.get("index.php?event=CreatePieChart&Type=Company", function (data, status) {
            pie2 = JSON.parse(data);
            var myPieChartCompany = new Chart(document.getElementById("piechartCompany").getContext('2d'), {
                type: 'pie',
                data: pie2,
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    title: {
                        display: true,
                        text: '[%$user->gettext("Ticketübersicht – Status")%]'
                    },
                    legend: {
                        display: (document.getElementById("piechartCompany").width < 340) ? false : true
                    },
                    onResize: function (myChart, size) {
                        var showLegend = (size.width < 340) ? false : true;
                        myChart.options.legend.display = showLegend;
                    }
                }
            });
        
            document.getElementById("piechartCompany").onclick = function (e)
            {
                var slice = myPieChartCompany.getElementAtEvent(e);
                if (!slice.length)
                    return; // return if not clicked on slice
                var label = slice[0]._model.label;
                switch (label) 
                {
                    case 'REPLY TO SERVICE PARTNER':
                        window.location.href = 'index.php?module=ticketlist&StatusID=18';
                        break;
                    case 'FEEDBACK EXPECTED / SOLUTION PROPOSED':
                        window.location.href = 'index.php?module=ticketlist&StatusID=19';
                        break;
                    case 'DRAFT':
                        window.location.href = 'index.php?module=ticketlist&StatusID=20';
                        break;
                }
            };
        });

        $.get("index.php?event=CreatePieChart&Type=CompanyAndCity", function (data, status) {
            pie2 = JSON.parse(data);
            var myPieChartCompanyAndCity = new Chart(document.getElementById("piechartCompanyAndCity").getContext('2d'), {
                type: 'pie',
                data: pie2,
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    title: {
                        display: true,
                        text: '[%$user->gettext("Ticketübersicht – Status")%]'
                    },
                    legend: {
                        display: (document.getElementById("piechartCompanyAndCity").width < 340) ? false : true
                    },
                    onResize: function (myChart, size) {
                        var showLegend = (size.width < 340) ? false : true;
                        myChart.options.legend.display = showLegend;
                    }
                }
            });

            document.getElementById("piechartCompanyAndCity").onclick = function (e)
            {
                var slice = myPieChartCompanyAndCity.getElementAtEvent(e);
                if (!slice.length)
                    return; // return if not clicked on slice
                var label = slice[0]._model.label;
                switch (label) 
                {
                    case 'REPLY TO SERVICE PARTNER':
                        window.location.href = 'index.php?module=ticketlist&StatusID=18';
                        break;
                    case 'FEEDBACK EXPECTED / SOLUTION PROPOSED':
                        window.location.href = 'index.php?module=ticketlist&StatusID=19';
                        break;
                    case 'DRAFT':
                        window.location.href = 'index.php?module=ticketlist&StatusID=20';
                        break;
                }
            };
        });
    [% /if %]
    [% /if %]


            $('#DeviceTypes').on('change', function (e)
            {
                var canvas = document.getElementById('piechartDeviceType');
                var width = canvas.width;
                var height = canvas.height;

                $("#ContainerPiechartDeviceType").empty();
                $("#ContainerPiechartDeviceType").append("<canvas id =\"piechartDeviceType\" width=\"" + width + "\" height=\"" + height + "\"></canvas>");
                
                $("#TBody").load("index.php?event=getTicketTableBody&DeviceTypeID=" + this.value);

                $.get("index.php?event=CreatePieChart&Type=DeviceType&DeviceTypeID=" + this.value, function (data, status) {
                    pie2 = JSON.parse(data);
                    var myPieChartDeviceType = new Chart(document.getElementById("piechartDeviceType").getContext('2d'), {
                        type: 'pie',
                        data: pie2,
                        options: {
                            responsive: true,
                            maintainAspectRatio: false,
                            title: {
                                display: true,
                                text: '[%$user->gettext("Ticketübersicht – Status")%]'
                            },
        legend: {
                                display: (document.getElementById("piechartDeviceType").width < 340) ? false : true
                            },
        onResize: function (myChart, size) {
                                var showLegend = (size.width < 340) ? false : true;
                                myChart.options.legend.display = showLegend;
                            }
                        }
                    });
        document.getElementById("piechartDeviceType").onclick = function (e)
                        {
                            var slice = myPieChartDeviceType.getElementAtEvent(e);
                            if (!slice.length)
                                return; // return if not clicked on slice
                            var label = slice[0]._model.label;
                            switch (label) 
                            {
                                case 'REPLY TO SERVICE PARTNER':
                                    window.location.href = 'index.php?module=ticketlist&StatusID=18';
                                    break;
                                case 'FEEDBACK EXPECTED / SOLUTION PROPOSED':
                                    window.location.href = 'index.php?module=ticketlist&StatusID=19';
                                    break;
                                case 'DRAFT':
                                    window.location.href = 'index.php?module=ticketlist&StatusID=20';
                                    break;
                            }
                        };
                    })
            });

        $('.table').DataTable({
            dom: 'Brt',
            buttons: [
//              
            ],
            stateSave: true,
            "sPaginationType": "full_numbers",
            "bLengthChange": true,
            "iDisplayLength": 10,
            "oLanguage": {
                "sLengthMenu": '[% $user->gettext("Zeige _MENU_ Eintr&auml;ge") %]',
                "sZeroRecords": '[% $user->gettext("Keine Eintr&auml;ge gefunden") %]',
                "sInfo": '[% $user->gettext("Eintrag _START_ bis _END_ (von _TOTAL_)") %]',
                "sInfoEmpty": " ",
                "sInfoFiltered": '[% $user->gettext(" - gefiltert aus _MAX_ Eintr&auml;gen") %]',
                "sSearch": "Filter",
                "oPaginate": {
                    "sFirst": "&lt;&lt;",
                    "sLast": "&gt;&gt;",
                    "sNext": "&gt;",
                    "sPrevious": "&lt;"
                },
                "aaSorting": [[1, "asc"]]
            },
            initComplete: function () {
                this.api().columns().every(function () {
                    var column = this;
                    var select = $('<select><option value=""></option></select>')
                            .appendTo($(column.footer()).empty())
                            .on('change', function () {
                                var val = $.fn.dataTable.util.escapeRegex(
                                        $(this).val()
                                        );
                                column
                                        .search(val ? '^' + val : '', true, true)
                                        .draw();
                            });
                    column.data().unique().sort().each(function (d, j) {
                        select.append('<option value="' + d + '">' + d + '</option>')
                    });
                });
            }
        });

    [% if $smarty.const.RELOADTICKETLIST %]
        $(function () {
            var intervalID;
            var DashboardListFreqSecs = [% $smarty.const.RELOADTICKETLIST %];

            if (DashboardListFreqSecs > 0) {
                intervalID = setInterval(function () {
                    location.reload();
                }, DashboardListFreqSecs * 1000 * 60);
            }
        });
    [% /if %]
</script>
