<div id="all-timesheet-widget-container">
    <div class="card bg-white">
        <div class="card-header">
            <i data-feather="file-text" class="icon-16"></i>&nbsp; <?php echo app_lang("all_timesheets"); ?>

            <div class="float-end">
                <span id="date-range-selector-all_timesheet_statistics" class="float-end"></span>
            </div>
        </div>

        <div class="card-body rounded-bottom">
            <canvas id="timesheet-statistics-chart-all_timesheet_statistics" style="width: 100%; height: 221px;"></canvas>
        </div>
        <div id="all-timesheet-users-summary" class="avatar-group">
            <?php
            foreach ($timesheet_users_result as $user) {
                $time = convert_seconds_to_time_format($user->total_sec);
            ?>
                <div class="user-avatar avatar-30 avatar-circle" data-bs-toggle='tooltip' title='<?php echo $user->user_name . " - " . $time; ?>'>
                    <img alt="" src="<?php echo get_avatar($user->user_avatar); ?>">
                </div>
            <?php
            }
            ?>
        </div>

    </div>
</div>

<script type="text/javascript">
    $(document).ready(function() {
        var date = {};
        //prepare timesheet statistics Chart
        prepareDashboardTimesheetChart = function() {
            appLoader.show();

            appAjaxRequest({
                url: "<?php echo_uri("projects/timesheet_chart_data") ?>",
                data: {
                    start_date: date.start_date,
                    end_date: date.end_date
                },
                cache: false,
                type: 'POST',
                dataType: "json",
                success: function(response) {
                    appLoader.hide();
                    initDashboardTimesheetChart(response.timesheets, response.ticks);
                    $("#all-timesheet-users-summary").html(response.timesheet_users_result);
                    setTimeout(function() {
                        $('[data-bs-toggle="tooltip"]').tooltip();
                    }, 300);
                }
            });
        };

        $("#date-range-selector-all_timesheet_statistics").appDateRange({
            dateRangeType: "monthly",
            onChange: function(dateRange) {
                date = dateRange;
                prepareDashboardTimesheetChart();
            }
        });

        setTimeout(function() {
            $('[data-bs-toggle="tooltip"]').tooltip();
        }, 300);
        initDashboardTimesheetChart(<?php echo $timesheets; ?>, <?php echo $ticks; ?>);

    });

    var dashboardTimesheetStatisticsContent;

    initDashboardTimesheetChart = function(timesheets, ticks) {
        var timesheetStatisticsChart = document.getElementById("timesheet-statistics-chart-all_timesheet_statistics");

        if (dashboardTimesheetStatisticsContent) {
            dashboardTimesheetStatisticsContent.destroy();
        }

        dashboardTimesheetStatisticsContent = new Chart(timesheetStatisticsChart, {
            type: 'bar',
            data: {
                labels: ticks,
                datasets: [{
                    label: '<?php echo app_lang("timesheet_statistics"); ?>',
                    data: timesheets,
                    fill: true,
                    categoryPercentage: 0.3,
                    borderColor: '#00B493',
                    backgroundColor: '#00B493',
                    borderWidth: 2
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                tooltips: {
                    callbacks: {
                        title: function(tooltipItem, data) {
                            return data['labels'][tooltipItem[0]['index']] + " <?php echo app_lang($month) ?>";
                        },
                        label: function(tooltipItem, data) {
                            return secondsToTimeFormat(data['datasets'][0]['data'][tooltipItem['index']] * 60 * 60);
                        }
                    }
                },
                legend: {
                    display: false
                },
                scales: {
                    xAxes: [{
                        gridLines: {
                            display: false
                        },
                        ticks: {
                            display: true
                        }
                    }],
                    yAxes: [{
                        gridLines: {
                            display: false
                        },
                        ticks: {
                            display: true
                        }
                    }]
                }
            }
        });
    }
</script>