<?php
$head=[];
$data=[];
$columns=[];
if(isset($reportData['head'])){
    $head=$reportData['head'];
    $columns[]=[
        'className'=>'dt-control',
        'orderable'=>false,
        'data'=>null,
        'defaultContent'=>''

    ];
    foreach($head as $h){
        $columns[]=['title'=>$h['title']];
    }
    foreach($reportData['data'] as $d){
        $row=[
            []
        ];
        foreach($head as $h){
            if(isset($d[$h['key']])){
                if(is_array($d[$h['key']])){
                    if($d[$h['key']]['t']!==false){
                        $row[]=$d[$h['key']]['t'];
                    }
                    else{
                        $row[]='';
                    }

                }
                else{
                    $row[]=$d[$h['key']];    
                }
            }
            else{
                $row[]='';
            }
        }
        $data[]=$row;
    }
    
    
}
?>
<style type="text/css">
.red{
    color:red
}
.black{
    color:black
}
</style>
<table id="report" class="display" width="100%"></table>
<?php
    foreach($head as $i=>$j){
        //print_r($j);
        ?><a class="toggle-vis black" data-column="<?php echo $i+1;?>"><?php echo $j['title'];?></a> - <?php
    }
?>
<script>
    <?='const dataSet ='.json_encode($data).';'?>
    <?='const columns ='.json_encode($columns).';'?>
    //})
    function format(d) {
        data='<table>';
        let i=0
        columns.forEach(e => {
            if(e.hasOwnProperty('title')){
                data+='<tr>';
                data+='<td>';
                data+=e.title;
                data+='</td>';
                data+='<td>';
                data+=d[i];
                data+='</td>';
                data+='</tr>';
            }
            i++;
        });

        data+='</table>';
        return data;
    }

    let table=new DataTable('#report', {
        columns: columns,
        pageLength:300,
        lengthMenu: [
            [10, 50,    100,    200,    300,-1],
            [10, 50,    100,    200,    300,'All']
        ],
        data: dataSet
    });
    table.on('click', 'td.dt-control', function (e) {
        let tr = e.target.closest('tr');
        let row = table.row(tr);
        if (row.child.isShown()) {
            row.child.hide();
        }
        else {
            row.child(format(row.data())).show();
        }
    });
    table.on('click', 'tbody tr', function (e) {
        e.currentTarget.classList.toggle('selected');
    });
    document.querySelectorAll('a.toggle-vis').forEach((el) => {
        el.addEventListener('click', function (e) {
            e.preventDefault();

            let columnIdx = e.target.getAttribute('data-column');
            let column = table.column(columnIdx);
            let visivleStatus=column.visible();
            if(visivleStatus){
                el.classList.add('red');
                el.classList.remove('black');
            }
            else{
                el.classList.add('black');
                el.classList.remove('red');
            }
            // Toggle the visibility
            column.visible(!visivleStatus);
        });
    });
</script>
