@php
    $user = auth()->user();
@endphp
<div class="col-xl-8">
    <!--begin::Chart widget 18-->
    <div class="card card-flush h-xl-100">
        <!--begin::Header-->
        <div class="card-header pt-7">
            <!--begin::Title-->
            <h3 class="card-title align-items-start flex-column">
                <span class="card-label fw-bold text-gray-800">Learn
                    Activity</span>
                <span class="text-gray-500 mt-1 fw-semibold fs-6">Minutes Per Category</span>
            </h3>
            <!--end::Title-->
            <!--begin::Toolbar-->
            <div class="card-toolbar">
                <!--begin::Daterangepicker(defined in src/js/layout/app.js)-->
                <form id="daterange">

                    <div data-kt-daterangepicker-opens="left" id="learning_duration_daterangepicker"
                        class="btn btn-sm btn-light d-flex align-items-center px-4">
                        <!--begin::Display range-->
                        <div class="text-gray-600 fw-bold">Loading date range...</div>
                        <!--end::Display range-->
                        <i class="ki-outline ki-calendar-8 text-gray-500 lh-0 fs-2 ms-2 me-0"></i>
                    </div>
                </form>
                <!--end::Daterangepicker-->
            </div>
            <!--end::Toolbar-->
        </div>
        <!--end::Header-->
        <!--begin::Body-->
        <div class="card-body d-flex align-items-end px-0 pt-3 pb-5">
            <!--begin::Chart-->
            <div id="learning_duration_chart" class="h-325px w-100 min-h-auto ps-4 pe-6"
                data-chart='@json($learningDuration)'></div>

            <!--end::Chart-->
        </div>
        <!--end: Card Body-->
    </div>
    <!--end::Chart widget 18-->
</div>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        console.log("loaded");
        var learning_duration_chart = (function() {
            var chart = {
                self: null,
                rendered: false
            };

            function formatDuration(seconds) {
                const hrs = Math.floor(seconds / 3600);
                const mins = Math.floor((seconds % 3600) / 60);
                const secs = Math.floor(seconds % 60);

                return `${hrs.toString().padStart(2, '0')}:${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
            }

            // Private methods
            var initChart = function(chart) {
                var element = document.getElementById("learning_duration_chart");
                if (!element) {
                    return;
                }

                // Get the data from the element's data attribute
                var rawData;
                try {
                    rawData = JSON.parse(element.getAttribute('data-chart'));
                    if (!rawData || typeof rawData !== 'object') {
                        console.error('Invalid chart data format', rawData);
                        return;
                    }
                } catch (e) {
                    console.error('Failed to parse chart data:', e);
                    return;
                }

                // Convert the object into an array
                var chartData = Object.values(rawData);

                var height = parseInt(KTUtil.css(element, 'height'));
                var labelColor = KTUtil.getCssVariableValue('--bs-gray-900');
                var borderColor = KTUtil.getCssVariableValue('--bs-border-dashed-color');

                var options = {
                    series: [{
                        name: 'Learning Duration',
                        data: chartData.map(item => item.duration)
                    }],
                    chart: {
                        fontFamily: 'inherit',
                        type: 'bar',
                        height: height,
                        toolbar: {
                            show: false
                        }
                    },
                    plotOptions: {
                        bar: {
                            horizontal: false,
                            columnWidth: '15%',
                            borderRadius: 5,
                            dataLabels: {
                                position: "top"
                            },
                            startingShape: 'flat'
                        },
                    },
                    legend: {
                        show: false
                    },
                    dataLabels: {
                        enabled: true,
                        offsetY: -28,
                        style: {
                            fontSize: '13px',
                            colors: [labelColor]
                        },
                        formatter: function(val) {
                            return formatDuration(val);
                        }
                    },
                    stroke: {
                        show: true,
                        width: 2,
                        colors: ['transparent']
                    },
                    xaxis: {
                        categories: chartData.map(item => item.category),
                        axisBorder: {
                            show: false,
                        },
                        axisTicks: {
                            show: false
                        },
                        labels: {
                            style: {
                                colors: KTUtil.getCssVariableValue('--bs-gray-500'),
                                fontSize: '13px'
                            }
                        }
                    },
                    yaxis: {
                        labels: {
                            style: {
                                colors: KTUtil.getCssVariableValue('--bs-gray-500'),
                                fontSize: '13px'
                            },
                            formatter: function(val) {
                                return formatDuration(val);
                            }
                        }
                    },
                    tooltip: {
                        style: {
                            fontSize: '12px'
                        },
                        y: {
                            formatter: function(val) {
                                return formatDuration(val);
                            }
                        }
                    },
                    colors: ['#50CD89'],
                    grid: {
                        borderColor: borderColor,
                        strokeDashArray: 4,
                        yaxis: {
                            lines: {
                                show: true
                            }
                        }
                    }
                };

                chart.self = new ApexCharts(element, options);

                // Set timeout to properly get the parent elements width
                setTimeout(function() {
                    chart.self.render();
                    chart.rendered = true;
                }, 200);
            }

            var updateChartData = function(data) {
                if (chart.self) {
                    var chartData = Object.values(data);
                    chart.self.updateSeries([{
                        name: 'Learning Duration',
                        data: chartData.map(item => item.duration)
                    }]);
                    chart.self.updateOptions({
                        xaxis: {
                            categories: chartData.map(item => item.category)
                        }
                    });
                }
            };

            return {
                init: function() {
                    initChart(chart);
                },
                update: function(data) {
                    updateChartData(data);
                }

            };
        })();

        learning_duration_chart.init();

        //initialize daterangepicker
        var start = moment().subtract(29, "days");
        var end = moment();

        function cb(start, end) {
            $("#learning_duration_daterangepicker").html(start.format("MMMM D, YYYY") + " - " + end.format("MMMM D, YYYY"));
        }

        $("#learning_duration_daterangepicker").daterangepicker({
            startDate: start,
            endDate: end,
            ranges: {
                "Today": [moment(), moment()],
                "Yesterday": [moment().subtract(1, "days"), moment().subtract(1, "days")],
                "Last 7 Days": [moment().subtract(6, "days"), moment()],
                "Last 30 Days": [moment().subtract(29, "days"), moment()],
                "This Month": [moment().startOf("month"), moment().endOf("month")],
                "Last Month": [moment().subtract(1, "month").startOf("month"), moment().subtract(1,
                    "month").endOf("month")],
                    "This Year": [moment().startOf("year"), moment().endOf("year")],
                    "All Time": [moment('2000-01-01'), moment()]
            }
        }, cb);

        cb(start, end);
        $('#learning_duration_daterangepicker').on('apply.daterangepicker', function(ev, picker) {
            var startDate = picker.startDate.format('YYYY-MM-DD');
            var endDate = picker.endDate.format('YYYY-MM-DD');

            $.ajax({
                url: "{{ route('panel.widgets.learning-duration') }}",
                method: 'GET',
                data: {
                    start_date: startDate,
                    end_date: endDate
                },
                success: function(response) {
                    learning_duration_chart.update(response);
                },
                error: function(xhr, status, error) {
                    console.error('Error fetching learning duration data:', error);
                }
            });

        });
    });
</script>