<div class="page-title">
    <h1><?php echo $this->user->lang("Reports"); ?></h1>
</div>

<div class="reports-wrapper">
    <div class="nav-link-box">
        <ul>
            <li>
                <a href="index.php?fuse=reports&view=viewreport&controller=index&report=Overview&type=Accounts" <?php if ($this->name == 'Overview') { ?>class="active" <?php } ?>>
                    <i class="icon-reports-menu-ic-1"></i> <?php echo $this->user->lang('Overview'); ?>
                </a>
            </li>
            <?php foreach ($this->files as $type => $inner) { ?>
            <li>
                <a href="javascript:void(0)" <?php if ($this->activeType == $type && $this->name != 'Overview') { ?>class="active"<?php } ?>>
                    <i class="<?php echo $this->icons[$type]; ?>"></i> <?php echo $type; ?>
                </a>
                <ul>
                    <?php foreach ($inner as $name) { ?>
                    <li><a href="index.php?fuse=reports&view=viewreport&controller=index&report=<?php echo urlencode($name); ?>&type=<?php echo $type; ?>"><?php echo $name; ?></a></li>
                    <?php } ?>
                </ul>
            <?php } ?>
            </li>
        </ul>
    </div>
    <div class="page-content-box">
        <div class="head">
            <h3><?php echo $this->name; ?></h3>
            <?php if ($this->showCheckBoxPermissionOptions) { ?>
            <div>
                <input type=checkbox onclick='UpdatePublic(this);' name='public' <?php echo $this->PUBLICCHECKED; ?>>&nbsp;<span data-toggle="tooltip" class="tip-target" title="<?php echo $this->user->lang("If checked, the report will be visible to staff having access to the Reports. Additionally if report has a graph, it will be visible to all staff members") ;?>"><?php echo $this->user->lang("Available to all staff?"); ?></span>
            </div>
            <?php } ?>
        </div>

        <?php if ($this->graph_name) { ?>
        <div class="graph-wrapper mb-4" style="">
            <canvas style="padding-left:0; margin-left:0; width: 98%; height: 300px;" id="myChartCanvas"></canvas>
        </div>
        <?php } ?>
        <?php echo $this->unescape($this->processData); ?>
        <?php echo $this->unescape($this->data); ?>

    </div>
</div>

<script data-cfasync="false" type="text/javascript">

    report = {};

     $(document).ready(function() {

        $('.datepicker').datepicker({
            format: parseDateFormat(),
            autoclose: true,
        });

        <?php if ($this->graph_name) { ?>
        // Load CE report data
        clientexec.populate_report(
            "<?php echo $this->graph_name;?>",
            '#myChartCanvas'
        );

        // CE will call report.ShowGraph(data)
        report.ShowGraph = function(graphData) {

            const canvas = document.getElementById('myChartCanvas');
            if (!canvas) return;

            // Destroy old chart if AJAX navigation reloads this page
            if (window.myReportChart) {
                window.myReportChart.destroy();
            }

            window.myReportChart = new Chart(canvas.getContext('2d'), {
                type: graphData.type || 'bar',
                data: graphData.data,
                options: graphData.options || {
                    responsive: true,
                    maintainAspectRatio: false
                }
            });
        };
        <?php } ?>
    });

    <?php if ($this->showCheckBoxPermissionOptions) { ?>
    function UpdatePublic(objCheck) {

        $.ajax({
            url: 'index.php?fuse=reports&action=updatepublic',
            data: {
                reporttype: '<?php echo $this->REPORTTYPE; ?>',
                reportname: '<?php echo $this->REPORTNAME; ?>',
                publishvalue: objCheck.checked ? 1 : 0
            },
            success: function(t) {
                clientexec.parseResponse(t);
            }
        });

    }
    <?php } ?>

    function parseDateFormat() {
        switch (clientexec.dateFormat) {
            case 'm/d/Y':
                return 'mm/dd/yyyy';
                break;
            case 'd/m/Y':
                return 'dd/mm/yyyy';
                break;
        }
    }

    // GRID RENDERER
    report.ShowGrid = function(data) {
        if (!data.length) return;

        const template =
            "<div class='report-data-table overflow-auto'>" +
                "{{#arr}}" +
                    "<div id='{{groupId}}' class='report-group-table {{#istotal}}istotal{{/istotal}}' style='display:{{#isHidden}}none{{/isHidden}};'>" +
                        "<div class='report-group-name fw-semibold mb-2'>{{groupname}}</div>" +
                        "<table class='table table-striped table-sm table-bordered'>" +
                            "<thead>" +
                                "<tr>{{#label}}<th class='text-nowrap'>{{{.}}}</th>{{/label}}</tr>" +
                            "</thead>" +
                            "<tbody>" +
                                "{{#group}}" +
                                   "<tr>{{#.}}<td class='text-nowrap' style='{{colStyle}}'>{{{.}}}</td>{{/.}}</tr>" +
                                "{{/group}}" +
                            "</tbody>" +
                        "</table>" +
                    "</div>" +
                "{{/arr}}" +
            "</div>";

        const output = Mustache.render(template, { arr: data });
        $('#report_datarows').html(output);
    };
</script>
