<style>

    .table tr td{
        cursor: pointer;
    }
</style>

<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>
    .table th{
        cursor: pointer;
    }
</style>
<script type="text/javascript">

    function switchPage(pos) {
        document.getElementById("pos").value = pos;
        submitForm();
    }

</script>
<form action="index.php?module=assets&event=listDevices" method="post" name="hm"  id="hm" enctype="multipart/form-data" class="form-inline" >
    <input type="hidden" id="sort" name="sort" value="[% $sort %]" />
    <input type="hidden" id="sortorder" name="sortorder" value="[% $sortorder %]" />
    <input type="hidden" id="message" name="message" value="0" />
    <input type="hidden" id="type" name="type" value="" />
    <input type="hidden" name="pos" value="[% $pos %]" id="pos">
    <div class="card panel-fcs-border shadow-sm">
        <div class="card-header">
            <span class="fcs-card-title h2">[% $user->gettext('Assetverwaltung') %]</span>
        </div>
        <div class="card-body">
            <div class="card panel-info shadow-sm rounded">
                <div class="card-body">
                    <div class="form-group row mb-3">
                        <label class="control-label">
                            [% $user->gettext('Eintr&auml;ge pro Seite') %]
                        </label>
                        <select name="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">
                        <select data-style="btn-outline-secondary" size="1" id="devicetype" name="devicetype[]" data-title="[% $user->gettext("Assettyp") %]" class="selectpicker" data-live-search="true" data-selected-text-format="count>0"
                                data-count-selected-text= "[%$user->gettext('Assettyp')%] ({0} [%$user->gettext('gewählt')%])"  title="[% $user->gettext('Assettyp') %] 1" multiple>
                            [% foreach $DeviceTypes as $devicetype %]
                                <option value="[% $devicetype.devicetypeid %]" [% if $Tools->FCS_InArray($devicetype.devicetypeid, $selectedDeviceType) %]selected='selected'[% /if %]>[% $devicetype.typename %] ([% if $devicetype.numberofdevices  %][% $devicetype.numberofdevices  %][% else %]0[% /if %])</option>
                            [% /foreach%]

                        </select>&nbsp;&nbsp;&nbsp;
                    </div>
                    <div class="form-group row mb-3">
                        <input type='submit' class="btn btn-outline-primary" value='[% $user->gettext('Suchen') %]'>
                    </div>
                </div>
            </div>
            <div class="card panel-info shadow-sm rounded">
                <div class="card-header">
                    <div class="row">
                        <div class="col-sm-4">
                            <span class="fcs-card-title h3">[% $user->gettext('Assets') %]</span>[% if $Tools->FCS_Count($nav.entries) %]<span class="fcs-card-title"> - [% $nav.entries %] [% $user->gettext('Eintr&auml;ge gefunden') %]</span>[% /if %]
                        </div>
                        <div class="col-sm-8 text-end">
                            <div class="btn-group">
                        [% if $IsSennebogen %]
                            <a  class="btn btn-outline-primary" type="button" href="index.php?module=assets&class=keyaccount">
                                [%$user->gettext('Key Account')%]
                            </a>
                        [% /if %]
                        <a  class="btn btn-outline-primary" type="button" href="index.php?module=assets&event=manageColumns">
                            [%$user->gettext('Felder verwalten')%]
                        </a>

                        <div class="btn-group">
                            <a  class="btn btn-outline-primary" type="button" href="index.php?module=assets&export=csv">
                                [%$user->gettext('CSV Export')%]
                            </a>
                            <a  class="btn btn-outline-primary" type="button" href="index.php?module=assets&event=CSVImport">
                                [%$user->gettext('CSV Import')%]
                            </a>
                        </div>
                        <a  class="btn btn-outline-primary" type="button" href="index.php?module=assets&event=editDevice">
                            [%$user->gettext('Neues Asset')%]
                        </a>

                        <a  class="btn btn-outline-primary" type="button" href="index.php?module=assets&class=assettypes">
                            [%$user->gettext('Assettypen')%]
                        </a>
                        [%*
                        <a  class="btn btn-outline-primary" type="button" href="index.php?module=assets&class=swproductcatalogs">
                        [%$user->gettext('Softwarekatalog')%]
                        </a>
                        *%]
                        </div>
                        </div>
                    </div>

                  

                </div>
                <div class="card-body">
                    <div class="card panel-info shadow-sm rounded">
                        <div class="card-body">

                            <div class="table-responsive">
                                <table class="table table-striped table-bordered  table-condensed">
                                    <thead>
                                        <tr>
                                            <th><input type="checkbox" class="selectAllAssets" id="chkAll"/></th>
                                            <th>&nbsp;</th>
                                                [% foreach from=$TableHeaders key=field item=label %]
                                                <th class="sort" id="[% $field %]">[% $label.label %]</th>
                                                [% /foreach %]
                                        </tr>
                                    </thead>
                                    <tbody>
                                        [% foreach from=$Devices item=Device key=DeviceID %]
                                            <tr>
                                                <td style="vertical-align:middle"><input type="checkbox" class="selectAsset" id="chkAsset_[% $DeviceID %]" value="[% $DeviceID %]"/></td>
                                                <td class="ActionFields">
                                                    <div class="btn-group">
                                                    <a href="index.php?module=assets&event=editDevice&deviceid=[% $DeviceID %]" class="btn btn-sm btn-outline-secondary"><span class="fa fa-pencil"></span></a>
                                                    <a href="index.php?module=device&event=assetInfo&id=[% $DeviceID %]&assetlist=1"  class="openInIFrameModal btn btn-sm btn-outline-secondary" title="[% $user->gettext('Gerätedaten anzeigen') %]"><span class="fa fa-eye"></span></a>
                                                    <a href="index.php?module=assets&event=CSVOutDevice&deviceid=[% $DeviceID %]"  class="btn btn-sm btn-outline-secondary" title="[% $user->gettext('CSV-Export') %]"><span class="fa fa-list-alt"></span></a>
                                                    <span class="btn btn-sm btn-outline-secondary" onclick="deleteDevice([% $DeviceID %]);" title="[% $user->gettext('Asset löschen') %]"><span class="fa fa-times"></span></span>
                                                    </div>
                                                    </td>
                                                [% foreach from=$TableHeaders key=field item=label %]

                                                    [% if $label.type == 'datetime' %]
                                                        <td  class="deviceRow" data-deviceid="[% $DeviceID %]">[% if $Device.$field %][% $Device.$field|date_format:"%d.%m.%Y" %][% /if %]</td>
                                                    [% else if $label.type=='float' %]
                                                        <td class="deviceRow" data-deviceid="[% $DeviceID %]">[% if $Device.$field %][% $Device.$field|string_format:"%.2f" %][% /if %]</td>
                                                    [% else %]
                                                        <td class="deviceRow" data-deviceid="[% $DeviceID %]">[% $Device.$field %]</td>   
                                                    [% /if %]
                                                [% /foreach %]

                                            </tr>
                                        [% /foreach %]
                                    </tbody>
                                </table>
                            </div>
                            <div class="col-lg-12 col-sm-12 hidden-sm hidden-xs">
                                <div class="row">
                                <div class="col-lg-2 col-sm-2" data-bs-toggle="tooltip" title="[% $user->gettext('Markieren Sie Assets die gelöscht werden sollen') %]">
                                    <a title="[% $user->gettext('Löschen') %]" class="btn btn-outline-primary disabled" id="DeleteAssetCollection" onclick="DeleteAssetCollection()" style="margin:20px 0;" ><span class='fa fa-trash'></span> [% $user->gettext('Löschen')%]</a>
                                </div>
                                <div class="col-lg-4 col-sm-4"></div>
                                <div class="col-lg-6 col-sm-6 text-end">
                                    [% $Paging %]
                                </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</form>

<script>
    var current_sort = $("#sort").val();
    var current_sortorder = $("#sortorder").val();

    showSortIcon();

    $(".sort").on("click", function (e) {
        var sort = $(this).attr('id');
        var sortorder = 'ASC';
        if (current_sort === sort) {
            if (current_sortorder === 'DESC') {
                sortorder = 'ASC';
            } else {
                sortorder = 'DESC';
            }
        }
        $("#sort").val(sort);
        $("#sortorder").val(sortorder);
        submitForm();
    });

    function showSortIcon() {
        var content = $("#" + current_sort).html();
        if (current_sortorder === 'DESC') {
            content += '<span class="fa fa-chevron-down"></span>';

        } else {
            content += '<span class="fa fa-chevron-up"></span>';
        }
        $("#" + current_sort).html(content);
    }

    $('.deviceRow').on('click', function () {
        window.location = "index.php?module=assets&event=editDevice&deviceid=" + $(this).data('deviceid');
    })

    function deleteDevice(id) {
        bootbox.confirm("[% $user->gettext('Asset wirklich löschen?') %]", function (result) {
            if (result) {
                window.location = "index.php?module=assets&event=deleteDevice&deviceid=" + id;
            }
        })

    }

    var checkboxes = [];
    localStorage.removeItem("checkboxes");

    $(".selectAsset").on("change", function () {
        if (this.checked) {
            if (checkboxes.indexOf($(this).val()) == -1) {
                checkboxes.push($(this).val());
            }
            if (checkboxes.length >= 1) {
                $("#DeleteAssetCollection").removeClass('disabled');
            }
        } else {
            if (checkboxes.indexOf($(this).val()) != -1) {
                checkboxes.splice(checkboxes.indexOf($(this).val()), 1)
            }
            if (checkboxes.length <= 0) {
                $("#DeleteAssetCollection").addClass('disabled');
            }
        }

        localStorage.setItem("checkboxes", JSON.stringify(checkboxes));
    });

    $(".selectAllAssets").on("change", function ()
    {
        var CheckBox = $(this);

        $(".selectAsset").each(function ()
        {
            if ($(CheckBox).is(":checked"))
            {
                $(this).prop("checked", true);

                if (checkboxes.indexOf($(this).val()) == -1)
                    checkboxes.push($(this).val());

                if (checkboxes.length >= 1)
                    $("#DeleteAssetCollection").removeClass('disabled');
            } else
            {
                $(this).prop("checked", false);

                if (checkboxes.indexOf($(this).val()) != -1)
                    checkboxes.splice(checkboxes.indexOf($(this).val()), 1)

                if (checkboxes.length <= 0)
                    $("#DeleteAssetCollection").addClass('disabled');
            }
        });

        localStorage.setItem("checkboxes", JSON.stringify(checkboxes));
    });

    function DeleteAssetCollection()
    {
        var values = JSON.parse(localStorage.getItem("checkboxes"));
        var AssetIDs = values.join();
        if (values.length == 0)
        {
            alert("Wählen Sie bitte mindestens ein Asset zum Löschen");
            return;
        }

        $.ajax({
            type: "POST",
            url: "index.php?module=assets&event=DeleteAssetCollection",
            data: {
                AssetIDs: AssetIDs
            }
        }).done(function (data)
        {
            $(".selectAsset").each(function () {
                $(this).prop("checked", false);
                window.location.reload();
            });
        });

        return false;
    }
</script>
