<div id="loading"></div>
<?php

if($logo==="yes"){
    $img = file_get_contents('images/company/logo.jpg');
    $image = 'images/company/logo.jpg';
    // Read image path, convert to base64 encoding
    $imageData = base64_encode($img);
    // Format the image SRC:  data:{mime};base64,{data};
    $src = 'data: image/jpeg;base64,'.$imageData; 
}

?>



<?php if(empty($length)){$length=10;}?>
<?php if(empty($showFilter)){$filter=1;}else{$filter=0;}?>
<?php if(!empty($scroll)){
$scroller='
scrollY:'.$scroll.',
deferRender:    true,
scroller:       true,
';}?>

<link href='<?=ROOT_URL?>/packages/font-awesome/css/all.min.css?7' rel='stylesheet'>
<link href="<?=ROOT_URL?>/packages/dfinal/datatables.min.css" rel="stylesheet" type="text/css" />
<link href="<?=ROOT_URL?>/packages/dfinal/pagi.css" rel="stylesheet" type="text/css" />
<link href="<?=ROOT_URL?>/src/css/table.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<?=ROOT_URL?>/packages/dfinal/datatables.min.js"></script>
<script type="text/javascript" src="<?=ROOT_URL?>/packages/dfinance/moment.js"></script>




<script>
$('#<?= $table?>').dataTable({
    processing: true,
    pageLength: <?= $length?>,
    responsive: true,
    lengthMenu: [
        [10, 25, 50, 100, 150, 200, 500, -1],
        [10, 25, 50, 100, 150, 200, 500, "All"]
    ],

    dom: 'lBfrtipB',
    fixedHeader: true,
    initComplete: function(settings, json) {
        $('#loadingObject').css('display', 'none');
        $('#<?= $table?>').css('display', 'table');

    },
    drawCallback: function(settings) {

    },
    language: {
        searchPanes: {
            clearMessage: 'Clear filters',
            collapse: {
                0: 'Search Options',
                _: 'Custom Filter (%d)'
            }
        }
    },
    buttons: [
        'selectAll',
        'selectNone',

        {

            extend: 'print',
            title: '',
            text: '',
            orientation: 'landscape',
            pageSize: 'A4',
            header: true,
            footer: true,
            className: 'fad fa-print fa-1x me-3 duoBlue',
            exportOptions: {
                columns: "thead th:not(.noExport),span:not(.noExport)",
                orientation: 'landscape',
                pageSize: 'A4',
                orthogonal: 'export',
                stripHtml: false,
                modifier: {
                    page: 'current'
                }
            },
            repeatingHead: {
                logo: '/images/company/logo_thumb.jpg',
                logoPosition: 'left',
                logoStyle: '',
                orientation: 'landscape',
                pageSize: 'A4',
                title: $('#exportTitle').text()
            },
            customize: function(win) {

                $(win.document.body).css('font-size', '10pt').prepend('<img src="../../images/company/logo_thumb.jpg" style="position:absolute; top:0; left:0;" />');
                $(win.document.body).find('table').addClass('table').addClass('table-sm').addClass('compact').css({
                    'page-break-after': 'avoid',
                    'font-size': '10px',
                    'width': '100%'
                }).css('font-size', '10px');
                $(win.document.body).find('table th').attr('style', 'background-color:#353b50; color:#353b50')
                $(win.document.body).find('table th:nth-child(5)').attr('style', 'width:20%;color:#353b50')
                $(win.document.body).find('table th:nth-child(6)').attr('style', 'width:20%;color:#353b50')
                $(win.document.body).find('table th:nth-child(7)').attr('style', 'width:20%;color:#353b50')
                $(win.document.body).append('<br><br>Generated by EnRep Reporting System: <?= date('d-m-Y')?>');

            }
        },

        {
            extend: 'csvHtml5',
            title: $('#exportTitle').text(),
            text: '',
            className: 'fad fa-file-excel fa-1x me-3 duoGreen',
            exportOptions: {
                columns: "thead th:not(.noExport)",
                modifier: {
                    page: 'current'
                }
            },
        },
        {
            extend: 'pdfHtml5',
            footer: true,
            title: $('#exportTitle').text(),
            filename: $('#exportTitle').text().replace(/ /g, ""),
            text: '',
            orientation: 'landscape',
            pageSize: 'A4',
            className: 'fad fa-file-pdf fa-1x duoRed',
            exportOptions: {
                columns: "thead th:not(.noExport)",
                modifier: {
                    page: 'current',
                    orthogonal: 'export'
                }
            },

            customize: function(doc) {
                doc.pageMargins = [20, 20, 80, 20];
                doc.defaultStyle.alignment = 'left';
                doc.defaultStyle.padding = '10px';
                doc.styles.tableHeader.alignment = 'left';
                doc.styles.tableHeader.padding = '10';
                doc.styles.tableBody = {
                    padding: '10'
                };
                <?php
                if(!empty($logo)){?>
                doc['header'] = (function() {
                    return {
                        columns: [{
                            image: '<?= $src?>',
                            width: 150
                        }],
                        margin: 10
                    }
                });
                doc['footer'] = (function(page, pages) {
                    return {
                        columns: [{
                            alignment: 'left',
                            text: ['Generated by EnRep Reporting System: <?= date('d-m-Y')?>']
                        }],
                        margin: [10, 0]
                    }
                });
                <?php }?>

                doc.styles.tableHeader.alignment = 'left';
                doc.content[1].table.widths = [98, 98, 98, 98, 90, 90, 90, 90];
            }
        }

        <?= $scroller?>
        <?= $selector?>
    ],
    searchPanes: {
        cascadePanes: true,
        layout: 'columns-4',
        viewTotal: true
    },
    "stateSave": true,
    "stateSaveParams": function(settings, data) {
        delete data.select;
    },
    "stateLoadParams": function(settings, data) {
        delete data.select;
    },

    fixedHeader: true

});
// $('#<?= $table?>').DataTable().searchPanes.rebuildPane();
function clearSearcher(n) {
    var table = $('#<?= $table?>').dataTable().api();
    $.fn.dataTable.ext.search.pop()
    table.search('').draw();
    $("#siteList").val(null).trigger("change");
}



var table = $('#<?= $table?>').DataTable();

var selectedRowsIDs = []; // To keep track of selected row IDs

table.on('select', function(e, dt, type, indexes) {
    var rows = table.rows(indexes).data().toArray();

    for (var i = 0; i < rows.length; i++) {
        var rowID = table.row(indexes[i]).id();

        // Add the ID to the array if it's not already present
        if (!selectedRowsIDs.includes(rowID)) {
            selectedRowsIDs.push(rowID);
        }
    }

    console.log(selectedRowsIDs);
    $('#selectedItems').text(selectedRowsIDs);

    if (selectedRowsIDs.length > 0) {
        $('#massMigrate').css('display', 'inline-block');
        $('#massArchive').css('display', 'inline-block');
        $('#massCode').css('display', 'inline-block');
        $('#assignAsset').css('display', 'inline-block');
        // $('#selectedItems').text(v)
    }
});
table.on('draw.dt', function() {
    // Popovers
    var popoverElements = document.querySelectorAll('[data-mdb-popover-init]');
    for (var i = 0; i < popoverElements.length; ++i) {
        new MDB.Popover(popoverElements[i]);
    }

    // Tooltips
    var tooltipElements = document.querySelectorAll('[data-mdb-tooltip-init]');
    for (var i = 0; i < tooltipElements.length; ++i) {
        new MDB.Tooltip(tooltipElements[i]);
    }
});
// Handle the row deselection event
table.on('deselect', function(e, dt, type, indexes) {
    var rows = table.rows(indexes).data().toArray();

    for (var i = 0; i < rows.length; i++) {
        var rowID = table.row(indexes[i]).id();

        // Remove the ID from the array
        var index = selectedRowsIDs.indexOf(rowID);
        if (index > -1) {
            selectedRowsIDs.splice(index, 1);
        }
    }

    console.log(selectedRowsIDs);
    $('#selectedItems').text(selectedRowsIDs)
    if (selectedRowsIDs.length === 0) {
        $('#massMigrate').css('display', 'none');
        $('#massArchive').css('display', 'none');
        $('#massCode').css('display', 'none');
        $('#assignAsset').css('display', 'none');
        // $('#selectedItems').text('')
    }

});

var data = table
    .rows()
    .data();

if (data.length == 0) {}
</script>

<style>
.dtsp-nameButton {
    display: none
}

.dtsp-countButton {
    display: none
}

.dtsp-collapseButton {
    display: none
}

.dtsp-showAll {
    display: none
}

.dtsp-collapseAll {
    display: none
}

@media print {

    html,
    body {
        height: auto;
    }

    .dt-print-table,
    .dt-print-table thead,
    .dt-print-table th,
    .dt-print-table tr {
        border: 0 none !important;
    }

    .dt-print-table td a {
        border: 0 none !important;
        text-decoration: none !important;
    }
}
</style>
<script>
$('.dt-buttons').find('.btn').each(function() {
    $(this).addClass('btn-sm').addClass('me-3').removeClass('btn-light').addClass('btn-secondary')
});
</script>