@extends('layouts.app')
@section('content')
<div class="app sidebar-mini">
    <!-- Page -->
    <div class="page">
        <div class="page-main">
            <!-- App-Content -->
            <div class="app-content main-content">
                <div class="side-app">
                    <!--app header-->
                    @include('layouts.appheader')
                    <!--/app header-->
                    <div class="containersection">
                        <!--Page header-->
                        <div class="page-header">
                            <div class="page-leftheader">
                            </div>
                            <div class="flashmsgec">
                                @include('layouts.flashmsg')
                            </div>
                            <div class="page-rightheader">
                            </div>
                        </div>
                        <!--End Page header-->
                        <div class="card carddivision">
                            <div class="row">
                                <!-- Side Menu Bar Start -->
                                <div class="ringimaimenubar col-lg-1 col-md-1 col-sm-1 col-xs-1">
                                    @include('layouts.sidemenubar')
                                </div>
                                <!-- Side Menu Bar End -->
                                <!-- Main View Start -->
                                <div class="ringimaimain col-lg-11 col-md-11 col-sm-11 col-xs-11">
                                    <div class="row">
                                        <div class="cardleft col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                            <div class="card carddivision commcard">
                                                <div class="card-header mb-4">
                                                    <div class="card-title">Metrics</div>
                                                </div>
                                                <div class="card-body cardbody">
                                                    <div class="row">
                                                        <div class="chart-filters col-lg-12 col-md-12 col-sm-12 mb-4">
                                                            <form>
                                                                <input type="hidden" name="user_timezone" id="user_timezone"/>
                                                                <div class="row filterrow">
                                                                    <div class="filterformdiv calllogsfilter4 col-lg-3 col-md-6 col-sm-12 mb-0 schedule">
                                                                        <div class="form-group">
                                                                            <label class="form-label">Filter by Date : From </label>
                                                                            <div class="input-group">
                                                                                <input type="text" name="createdAtGe" id="startDate" class="form-control" placeholder="Select From Date" value="" onchange="initData({ first_load: 2 });"/>
                                                                                <div class="input-group-prepend datepickerprepend">
                                                                                    <span class="input-group-text">
                                                                                        <i class="fe fe-calendar"></i>
                                                                                    </span>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="filterformdiv calllogsfilter5 col-lg-3 col-md-6 col-sm-12 mb-0 schedule">
                                                                        <div class="form-group">
                                                                            <label class="form-label">Filter by Date : To </label>
                                                                            <div class="input-group">
                                                                                <input type="text" name="createdAtLe" id="endDate" class="form-control" placeholder="Select To Date" value="" onchange="initData({ first_load: 2 });"/>
                                                                                <div class="input-group-prepend datepickerprepend">
                                                                                    <span class="input-group-text">
                                                                                        <i class="fe fe-calendar"></i>
                                                                                    </span>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="filterformdiv calllogsfilter1 col-lg-3 col-md-6 col-sm-12 mb-0">
                                                                        <div class="form-group">
                                                                            <label class="form-label">Filter by Group</label>
                                                                            <select name="call_name" id="groupBySelect" class="form-control select2 select2-show-search" onchange="initData({ first_load: 1 });">
                                                                                <option value="minute">Minutes</option>
                                                                                <option value="hour">Hours</option>
                                                                                <option value="day" selected>Days</option>
                                                                                <option value="week">Weekly</option>
                                                                                <option value="month">Monthly</option>
                                                                            </select>
                                                                        </div>
                                                                    </div>
                                                                    <div class="filterformdiv calllogsfilter1 col-lg-3 col-md-6 col-sm-12 mb-0">
                                                                        <div class="form-group">
                                                                            <label class="form-label">Filter by Assistants</label>
                                                                            <select name="call_name" id="assistantBySelect" class="form-control select2 select2-show-search" onchange="initData({ first_load: 2 });">
                                                                                <option value="0" selected>All Assistants</option>
                                                                                @foreach($assistants as $assistant)
                                                                                    <option value="{{ $assistant['id'] }}" {{ request('assistantId') == $assistant['id'] ? 'selected' : '' }}>
                                                                                        {{ $assistant['name'] }}
                                                                                    </option>
                                                                                @endforeach
                                                                            </select>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </form>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="metricsec col-lg-6 col-md-12 col-sm-12 col-xs-12">
                                                            <div class="metric-card1">
                                                                <h3>Total Call Minutes</h3>
                                                                <div class="metric-value" id="t_minutes"></div>
                                                                <div id="container1" style="width: 100%;"></div>
                                                            </div>
                                                        </div>
                                                        <div class="metricsec col-lg-6 col-md-12 col-sm-12 col-xs-12">
                                                            <div class="metric-card2">
                                                                <h3>Number of Calls</h3>
                                                                <div class="metric-value" id="t_calls"></div>
                                                                <div id="container2" style="width: 100%;"></div>
                                                            </div>
                                                        </div>
                                                        <!-- <div class="metricsec col-lg-3 col-md-6 col-sm-12 col-xs-12">
                                                            <div class="metric-card3">
                                                                <h3>Total Spent</h3>
                                                                <div class="metric-value" id="t_spent"></div>
                                                                <div id="container3" style="width: 100%;"></div>
                                                            </div>
                                                        </div>
                                                        <div class="metricsec col-lg-3 col-md-6 col-sm-12 col-xs-12">
                                                            <div class="metric-card4">
                                                                <h3>Avg Cost per Call</h3>
                                                                <div class="metric-value" id="t_avgcost"></div>
                                                                <div id="container4" style="width: 100%;"></div>
                                                            </div>
                                                        </div> -->
                                                    </div>
                                                </div>
                                                <div class="card-header mb-4">
                                                    <div class="card-title">Call Analytics</div>
                                                </div>
                                                <div class="card-body cardbody">
                                                    <div class="row">
                                                        <div class="metricsec col-lg-6 col-md-12 col-sm-12 col-xs-12">
                                                            <div class="metric-card">
                                                                <h3>Reason Call Ended</h3>
                                                                <div id="container5" style="width: 100%;margin-top: 5%;"></div>
                                                            </div>
                                                        </div>
                                                        <div class="metricsec col-lg-6 col-md-12 col-sm-12 col-xs-12">
                                                            <div class="metric-card">
                                                                <h3>Average Call Duration by Assistant</h3>
                                                                <div id="container6" style="width: 100%;margin-top: 5%;"></div>
                                                            </div>
                                                        </div>
                                                        <!-- <div class="metricsec col-lg-4 col-md-12 col-sm-12 col-xs-12">
                                                            <div class="metric-card">
                                                                <h3>Cost Breakdown</h3>
                                                                <div id="container7" style="width: 100%;margin-top: 5%;"></div>
                                                            </div>
                                                        </div> -->
                                                    </div>
                                                    <div class="row mt-5">
                                                        <div class="metricsec col-lg-6 col-md-12 col-sm-12 col-xs-12">
                                                            <div class="metric-card">
                                                                <h3>Success Evaluation</h3>
                                                                <div id="container8" style="width: 100%;margin-top: 5%;"></div>
                                                            </div>
                                                        </div>
                                                        <div class="metricsec col-lg-6 col-md-12 col-sm-12 col-xs-12">
                                                            <div class="metric-card" id="unsuc_calls">
                                                                
                                                            </div>
                                                        </div>
                                                        <!-- <div class="metricsec col-lg-4 col-md-12 col-sm-12 col-xs-12">
                                                            <div class="metric-card">
                                                                <h3>Number of Concurrent Calls</h3>
                                                                <div id="container9" style="width: 100%;margin-top: 5%;"></div>
                                                            </div>
                                                        </div> -->
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- Main View End -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End app-content-->
        </div>
        <!--Footer-->
        @include('layouts.appfooter')
        <!-- End Footer-->
    </div>
    <!-- End Page -->

    <!-- Back to top -->
    <a href="#top" id="back-to-top"><i class="fe fe-chevrons-up"></i></a>
</div>
@include('includes.jslinks_common')
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/themes/adaptive.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<!-- Metrics Charts Start -->
<script>
    const historyLimitDays = {{ Auth::user()->customer->history_limit ?? 0 }};
    const today = new Date();

    const startDateDefault = new Date(today);
    startDateDefault.setMonth(startDateDefault.getMonth() - 1);

    const minDate = new Date();
    minDate.setDate(today.getDate() - historyLimitDays);

    let defaultStartDate = startDateDefault < minDate ? minDate : startDateDefault;

    flatpickr("#startDate", {
        enableTime: false,
        altInput: true,
        altFormat: "Y-m-d",
        dateFormat: "Y-m-d",
        defaultDate: defaultStartDate,  // set default as last month same date
        maxDate: today,
        minDate: historyLimitDays > 0 ? minDate : null,
        disableMobile: true
    });

    flatpickr("#endDate", {
        enableTime: false,
        altInput: true,
        altFormat: "Y-m-d",
        dateFormat: "Y-m-d",
        defaultDate: today, // set default as today
        maxDate: today,
        minDate: historyLimitDays > 0 ? minDate : null,
        disableMobile: true
    });

    $(document).ready(function() {
        $('.datepickerprepend').click(function() {
            var inputId = $(this).siblings('input').attr('id');
            $('#' + inputId)[0]._flatpickr.open();
        });
    });
</script>
<!-- Metrics Charts -->
<script>
    let chart1, chart2, chart3, chart4, chart5, chart6, chart7, chart8, chart9;

    function initData(filters = {}) {
    const startDate = $('#startDate').val();
    const endDate = $('#endDate').val();
    const groupBy = $('#groupBySelect').val();
    const assistantBy = $('#assistantBySelect').val();

    $.ajax({
        url: "{{ route('user.metrics.data') }}",
        type: "GET",
        data: {
            ...filters,          // merge filters
            timezone: $('#user_timezone').val(),   // add timezone explicitly
            startDate: startDate,
            endDate : endDate,
            groupBy : groupBy,
            assistantBy : assistantBy
        },
        dataType: "json",
        success: function(response) {
            $('#t_minutes').html(response.chart1.total);
            $('#t_calls').html(response.chart2.total);
            $('#t_spent').html('$'+response.chart3.total);
            $('#t_avgcost').html('$'+response.chart4.total);
            console.log(response.chart4.minutesData)
            chart1 = Highcharts.chart('container1', {
                chart: {
                    type: 'areaspline',
                    height: 250,
                    backgroundColor: 'transparent'
                },
                title: {
                    text: null
                },
                xAxis: {
                    categories: response.chart1.categories,
                    lineWidth: 0,
                    tickWidth: 0,
                    labels: { 
                        style: { 
                            fontSize: '10px',
                            color: '#5b5e78'
                        } 
                    }
                },
                yAxis: {
                    title: { 
                        text: null 
                    },
                    lineWidth: 0,
                    tickWidth: 0,
                    gridLineWidth: 0,
                    labels: { 
                        style: { 
                            fontSize: '10px',
                            color: '#5b5e78' 
                        } 
                    }
                },
                legend: { 
                    enabled: false 
                },
                credits: { 
                    enabled: false 
                },
                series: [{
                    name: 'callMinutes',
                    data: response.chart1.minutesData,
                    color: '#107a58',
                    fillOpacity: 0.2
                }]
            });
            // Chart 2
            chart2 = Highcharts.chart('container2', {
                chart: {
                    type: 'areaspline',
                    height: 250,
                    backgroundColor: 'transparent'
                },
                title: {
                    text: null
                },
                xAxis: {
                    categories: response.chart2.categories,
                    lineWidth: 0,
                    tickWidth: 0,
                    labels: { 
                        style: { 
                            fontSize: '10px',
                            color: '#5b5e78'
                        } 
                    }
                },
                yAxis: {
                    title: { 
                        text: null 
                    },
                    lineWidth: 0,
                    tickWidth: 0,
                    gridLineWidth: 0,
                    labels: { 
                        style: { 
                            fontSize: '10px',
                            color: '#5b5e78' 
                        } 
                    }
                },
                legend: { 
                    enabled: false 
                },
                credits: { 
                    enabled: false 
                },
                series: [{
                    name: 'callCount',
                    data: response.chart2.minutesData,
                    color: '#a0690e',
                    fillOpacity: 0.2
                }]
            });
            // Chart 3
            // chart3 = Highcharts.chart('container3', {
            //     chart: {
            //         type: 'areaspline',
            //         height: 250,
            //         backgroundColor: 'transparent'
            //     },
            //     title: {
            //         text: null
            //     },
            //     xAxis: {
            //         categories: response.chart3.categories,
            //         lineWidth: 0,
            //         tickWidth: 0,
            //         labels: { 
            //             style: { 
            //                 fontSize: '10px',
            //                 color: '#5b5e78'
            //             } 
            //         }
            //     },
            //     yAxis: {
            //         title: { 
            //             text: null 
            //         },
            //         lineWidth: 0,
            //         tickWidth: 0,
            //         gridLineWidth: 0,
            //         labels: { 
            //             style: { 
            //                 fontSize: '10px',
            //                 color: '#5b5e78' 
            //             } 
            //         }
            //     },
            //     legend: { 
            //         enabled: false 
            //     },
            //     credits: { 
            //         enabled: false 
            //     },
            //     series: [{
            //         name: 'totalSpent',
            //         data: response.chart3.minutesData,
            //         color: '#5d40a3',
            //         fillOpacity: 0.2
            //     }]
            // });
            // Chart 4
            // chart4 = Highcharts.chart('container4', {
            //     chart: {
            //         type: 'areaspline',
            //         height: 250,
            //         backgroundColor: 'transparent'
            //     },
            //     title: {
            //         text: null
            //     },
            //     xAxis: {
            //         categories: response.chart4.categories,
            //         lineWidth: 0,
            //         tickWidth: 0,
            //         labels: { 
            //             style: { 
            //                 fontSize: '10px',
            //                 color: '#5b5e78'
            //             } 
            //         }
            //     },
            //     yAxis: {
            //         title: { 
            //             text: null 
            //         },
            //         lineWidth: 0,
            //         tickWidth: 0,
            //         gridLineWidth: 0,
            //         labels: { 
            //             style: { 
            //                 fontSize: '10px',
            //                 color: '#5b5e78' 
            //             } 
            //         }
            //     },
            //     legend: { 
            //         enabled: false 
            //     },
            //     credits: { 
            //         enabled: false 
            //     },
            //     series: [{
            //         name: 'avgCallCost',
            //         data: response.chart4.minutesData,
            //         color: '#2b58a3',
            //         fillOpacity: 0.2
            //     }]
            // });
            // Chart 5
            chart5 = Highcharts.chart('container5', {
                chart: {
                    type: 'column',
                    height: 350,
                    backgroundColor: 'transparent'
                },
                title: {
                    text: '',
                    align: 'left'
                },
                xAxis: {
                    lineWidth: 0,
                    tickWidth: 0,
                    categories: response.chart5.categories,
                },
                yAxis: {
                    lineWidth: 0,
                    tickWidth: 0,
                    gridLineWidth: 0,
                    allowDecimals: false,
                    min: 0,
                    title: {
                        text: ''
                    }
                },
                tooltip: {
                    format: '<b>{key}</b><br/>{series.name}: {y}<br/>' +
                        'Total: {point.stackTotal}'
                },
                legend: {
                    itemStyle: {
                        color: '#ffffff'
                    }
                },
                plotOptions: {
                    column: {
                        stacking: 'normal',
                        borderWidth: 0
                    }
                },
                series: Object.keys(response.chart5.datas).map(function(reason, index) {
                            var colors = ['#107a58', '#a0690e', '#5d40a3', '#2b58a3'];
                            return {
                                name: reason,
                                data: response.chart5.datas[reason],
                                color: colors[index % colors.length]
                            };
                        })
            });
            // Chart 6
            chart6 = Highcharts.chart('container6', {
                chart: {
                    type: 'column',
                    height: 350,
                    backgroundColor: 'transparent'
                },
                title: {
                    text: '',
                    align: 'left'
                },
                xAxis: {
                    lineWidth: 0,
                    tickWidth: 0,
                    categories: response.chart6.categories,
                },
                yAxis: {
                    lineWidth: 0,
                    tickWidth: 0,
                    gridLineWidth: 0,
                    allowDecimals: false,
                    min: 0,
                    title: {
                        text: ''
                    }
                },
                tooltip: {
                    format: '<b>{key}</b><br/>{series.name}: {y}<br/>' +
                        'Total: {point.stackTotal}'
                },
                legend: {
                    itemStyle: {
                        color: '#ffffff'
                    }
                },
                plotOptions: {
                    column: {
                        stacking: 'normal',
                        borderWidth: 0,
                        borderRadius: 5
                    }
                },
                series:  Object.keys(response.chart6.datas).map(function(reason, index) {
                            var colors = ['#107a58', '#a0690e', '#5d40a3', '#2b58a3'];
                            return {
                                name: reason,
                                data: response.chart6.datas[reason],
                                color: colors[index % colors.length]
                            };
                        })
            });
            // Chart 7
            // chart7 = Highcharts.chart('container7', {
            //     chart: {
            //         type: 'column',
            //         height: 350,
            //         backgroundColor: 'transparent'
            //     },
            //     title: {
            //         text: '',
            //         align: 'left'
            //     },
            //     xAxis: {
            //         lineWidth: 0,
            //         tickWidth: 0,
            //         categories: response.chart7.categories,
            //     },
            //     yAxis: {
            //         lineWidth: 0,
            //         tickWidth: 0,
            //         gridLineWidth: 0,
            //         allowDecimals: false,
            //         min: 0,
            //         title: {
            //             text: ''
            //         }
            //     },
            //     tooltip: {
            //         format: '<b>{key}</b><br/>{series.name}: {y}<br/>' +
            //             'Total: {point.stackTotal}'
            //     },
            //     legend: {
            //         itemStyle: {
            //             color: '#ffffff'
            //         }
            //     },
            //     plotOptions: {
            //         column: {
            //             stacking: 'normal',
            //             borderWidth: 0,
            //             borderRadius: 5
            //         }
            //     },
            //     series: Object.keys(response.chart7.datas).map(function(reason, index) {
            //                 var colors = ['#107a58', '#a0690e', '#5d40a3', '#2b58a3'];
            //                 return {
            //                     name: reason,
            //                     data: response.chart7.datas[reason],
            //                     color: colors[index % colors.length]
            //                 };
            //             })
            // });
            // Chart 8
            chart8 = Highcharts.chart('container8', {
                chart: {
                    type: 'column',
                    height: 400,
                    backgroundColor: 'transparent'
                },
                title: {
                    text: '',
                    align: 'left'
                },
                xAxis: {
                    lineWidth: 0,
                    tickWidth: 0,
                    categories: response.chart8.categories,
                },
                yAxis: {
                    lineWidth: 0,
                    tickWidth: 0,
                    gridLineWidth: 0,
                    allowDecimals: false,
                    min: 0,
                    title: {
                        text: ''
                    }
                },
                tooltip: {
                    format: '<b>{key}</b><br/>{series.name}: {y}<br/>' +
                        'Total: {point.stackTotal}'
                },
                legend: {
                    itemStyle: {
                        color: '#ffffff'
                    }
                },
                plotOptions: {
                    column: {
                        stacking: 'normal',
                        borderWidth: 0,
                        borderRadius: 5
                    }
                },
                series: Object.keys(response.chart8.datas).map(function(reason, index) {
                            var colors = ['#107a58', '#a0690e', '#5d40a3', '#2b58a3'];
                            return {
                                name: reason,
                                data: response.chart8.datas[reason],
                                color: colors[index % colors.length]
                            };
                        })
            });
            // Chart 9
            // if (response.chart9.minutesData && response.chart9.minutesData.length > 0) {
            //     chart9 = Highcharts.chart('container9', {
            //         chart: {
            //             type: 'areaspline',
            //             height: 400,
            //             backgroundColor: 'transparent'
            //         },
            //         title: {
            //             text: null
            //         },
            //         xAxis: {
            //             categories: response.chart9.categories,
            //             lineWidth: 0,
            //             tickWidth: 0,
            //             labels: { 
            //                 style: { 
            //                     fontSize: '10px',
            //                     color: '#5b5e78'
            //                 } 
            //             }
            //         },
            //         yAxis: {
            //             title: { 
            //                 text: null 
            //             },
            //             lineWidth: 0,
            //             tickWidth: 0,
            //             gridLineWidth: 0,
            //             labels: { 
            //                 style: { 
            //                     fontSize: '10px',
            //                     color: '#5b5e78' 
            //                 } 
            //             }
            //         },
            //         legend: { 
            //             enabled: false 
            //         },
            //         credits: { 
            //             enabled: false 
            //         },
            //         series: [{
            //             name: 'concurrency',
            //             data: response.chart9.minutesData,
            //             color: '#5d40a3',
            //             fillOpacity: 0.2
            //         }]
            //     });
            // } else {
            //     $('#container9').empty();
            //     $('#container9').append('<h4 class="mb-4 px-2 notavailablemsg">No Available Data</h4>');
            // }

            $('#unsuc_calls').empty();
            var html = '<h3 class="mb-4 px-2">Unsuccessful calls</h3>';

            if (response.calls && response.calls.length > 0) 
            {
                $.each(response.calls, function(index, call) {
                    var dateFormatted = new Date(call.createdAt);
                    var day = dateFormatted.getDate().toString().padStart(2, '0');
                    var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
                                    "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
                    var month = monthNames[dateFormatted.getMonth()];
                    var hours = dateFormatted.getHours().toString().padStart(2, '0');
                    var minutes = dateFormatted.getMinutes().toString().padStart(2, '0');

                    html += `
                    <div class="metricdivlist col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <div class="row">
                            <div class="metricdivleft col-lg-9 col-md-12 col-sm-12 col-xs-12">
                                <h4>${call.assistant_name || 'N/A'}</h4>
                                <p>${day} ${month}, ${hours}:${minutes} | ${call.customerPhoneNumber || 'N/A'}</p>
                            </div>
                            <div class="metricdivright col-lg-3 col-md-12 col-sm-12 col-xs-12">
                                <p>Failed</p>
                            </div>
                        </div>
                    </div>
                    `;
                });

                html += `
                <div class="metricdivlistbtn col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <a href="{{route('admin.call_logs')}}">View More</a>
                </div>
                `;
            } else {
                html += `
                <h4 class="mb-4 px-2 notavailablemsg">
                    There are no unsuccessful calls in the selected time period.
                </h4>
                `;
            }

            $('#unsuc_calls').append(html);
            // Apply theme
            const savedChartTheme = localStorage.getItem('theme') || 'light';
            updateChartColors(savedChartTheme);
        },
        error: function() {
            console.error("Failed to load chart data.");
        }
    });
}

function updateChartColors(theme) {
        const textColor = theme === 'dark' ? '#5b5e78' : '#5b5e78';
        const legendColor = theme === 'dark' ? '#ffffff' : '#5b5e78';
        const legendHoverColor = theme === 'dark' ? '#03b3e2' : '#03b3e2';
        
        [chart1, chart2, chart3, chart4, chart5, chart6, chart7, chart8, chart9].forEach(chart => {
            if (chart) {
                chart.update({
                    xAxis: { labels: { style: { color: textColor } } },
                    yAxis: { labels: { style: { color: textColor } } },
                    legend: { itemStyle: { color: legendColor },itemHoverStyle: { color: legendHoverColor } }
                });
            }
        });
    }

    function updateChartByDateRange() {
        if (!chart1 || !chart2 || !chart3 || !chart4 || !chart5 || !chart6 || !chart7 || !chart8 || !chart9) return;
        
        const startDate = document.getElementById('startDate').value;
        const endDate = document.getElementById('endDate').value;
        
        const start = new Date(startDate);
        const end = new Date(endDate);
        const categories = [];
        const data1 = [], data2 = [], data3 = [], data4 = [], data5 = [], data6 = [], data7 = [], data8 = [], data9 = [];
        
        for (let d = new Date(start); d <= end; d.setDate(d.getDate() + 1)) {
            categories.push(d.toISOString().split('T')[0]);
            data1.push(Math.floor(Math.random() * 50) + 10);
            data2.push(Math.floor(Math.random() * 60) + 5);
            data3.push(Math.floor(Math.random() * 40) + 15);
            data4.push(Math.floor(Math.random() * 30) + 20);
            data5.push(Math.floor(Math.random() * 25) + 30);
            data6.push(Math.floor(Math.random() * 25) + 30);
            data7.push(Math.floor(Math.random() * 25) + 30);
            data8.push(Math.floor(Math.random() * 25) + 30);
            data9.push(Math.floor(Math.random() * 25) + 30);
        }
        
        chart1.update({ xAxis: { categories }, series: [{ data: data1 }] });
        chart2.update({ xAxis: { categories }, series: [{ data: data2 }] });
        chart3.update({ xAxis: { categories }, series: [{ data: data3 }] });
        chart4.update({ xAxis: { categories }, series: [{ data: data4 }] });
        chart5.update({ xAxis: { categories }, series: [{ data: data5 }] });
        chart6.update({ xAxis: { categories }, series: [{ data: data6 }] });
        chart7.update({ xAxis: { categories }, series: [{ data: data7 }] });
        chart8.update({ xAxis: { categories }, series: [{ data: data8 }] });
        chart9.update({ xAxis: { categories }, series: [{ data: data9 }] });
    }

    function updateChartView(period) {
        if (!chart1 || !chart2 || !chart3 || !chart4 || !chart5 || !chart6 || !chart7 || !chart8 || !chart9) return;
        
        let categories, data1, data2, data3, data4, date5, date6, date7, date8, date9;
        
        if (period === 'minutes') {
            categories = ['10:00', '10:15', '10:30', '10:45', '11:00'];
            data1 = [5, 12, 8, 15, 10];
            data2 = [8, 15, 12, 18, 14];
            data3 = [10, 8, 15, 12, 16];
            data4 = [6, 10, 9, 13, 11];
            data5 = [12, 18, 15, 20, 17];
            data6 = [10, 8, 15, 12, 16];
            data7 = [6, 10, 9, 13, 11];
            data8 = [8, 15, 12, 18, 14];
            data9 = [6, 10, 9, 13, 11];
        } else if (period === 'hours') {
            categories = ['09:00', '10:00', '11:00', '12:00', '13:00'];
            data1 = [25, 40, 35, 50, 30];
            data2 = [30, 45, 40, 55, 35];
            data3 = [20, 35, 30, 45, 25];
            data4 = [15, 25, 20, 30, 18];
            data5 = [40, 50, 45, 60, 42];
            data6 = [30, 45, 40, 55, 35];
            data7 = [15, 25, 20, 30, 18];
            data8 = [20, 35, 30, 45, 25];
            data9 = [20, 35, 30, 45, 25];
        } else if (period === 'daily') {
            categories = ['2024-12-16', '2024-12-17', '2024-12-18', '2024-12-19', '2024-12-20'];
            data1 = [0, 40, 10, 20, 5];
            data2 = [0, 50, 25, 10, 3];
            data3 = [0, 25, 40, 30, 10];
            data4 = [0, 15, 5, 50, 20];
            data5 = [148, 133, 124, 102, 98];
            data6 = [112, 123, 104, 08, 78];
            data7 = [108, 103, 104, 100, 198];
            data8 = [50, 63, 84, 100, 98];
            data9 = [0, 25, 40, 30, 10];
        } else if (period === 'weekly') {
            categories = ['Week 1', 'Week 2', 'Week 3', 'Week 4'];
            data1 = [150, 200, 180, 220];
            data2 = [180, 230, 210, 250];
            data3 = [120, 170, 150, 190];
            data4 = [90, 140, 120, 160];
            data5 = [200, 250, 220, 280];
            data6 = [100, 150, 120, 180];
            data7 = [90, 140, 120, 160];
            data8 = [120, 170, 150, 190];
            data9 = [180, 230, 210, 250];
        } else {
            categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May'];
            data1 = [800, 900, 750, 1000, 850];
            data2 = [900, 1000, 850, 1100, 950];
            data3 = [700, 800, 650, 900, 750];
            data4 = [500, 600, 450, 700, 550];
            data5 = [1000, 1200, 900, 1400, 1100];
            data6 = [500, 600, 300, 700, 300];
            data7 = [700, 800, 650, 900, 750];
            data8 = [900, 1000, 850, 1100, 950];
            data9 = [800, 900, 750, 1000, 850];
        }
        
        chart1.update({ xAxis: { categories }, series: [{ data: data1 }] });
        chart2.update({ xAxis: { categories }, series: [{ data: data2 }] });
        chart3.update({ xAxis: { categories }, series: [{ data: data3 }] });
        chart4.update({ xAxis: { categories }, series: [{ data: data4 }] });
        chart5.update({ xAxis: { categories }, series: [{ data: data5 }] });
        chart6.update({ xAxis: { categories }, series: [{ data: data6 }] });
        chart7.update({ xAxis: { categories }, series: [{ data: data7 }] });
        chart8.update({ xAxis: { categories }, series: [{ data: data8 }] });
        chart9.update({ xAxis: { categories }, series: [{ data: data9 }] });
    }

    $(document).ready(function() {
        const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
        $('#user_timezone').val(timezone);
        initData({ first_load: 2 });
        // Date inputs
        $('#startDate, #endDate').on('change', updateChartByDateRange);
        
        $('#light_mode,#moblight_mode').on('click', function () {
            updateChartColors('light');
        });

        $('#dark_mode,#mobdark_mode').on('click', function () {
            updateChartColors('dark');
        });
    });
</script>
@endsection