@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.admin.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.admin.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>
                                                                <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="2024-12-16"/>
                                                                                <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="2024-12-25"/>
                                                                                <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="updateChartView(this.value)">
                                                                                <option value="minutes">Minutes</option>
                                                                                <option value="hours">Hours</option>
                                                                                <option value="daily" selected>Daily</option>
                                                                                <option value="weekly">Weekly</option>
                                                                                <option value="monthly">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">
                                                                                <option value="All Assistants">All Assistants</option>
                                                                                <option value="Assistants">Assistants</option>
                                                                            </select>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </form>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="metricsec col-lg-3 col-md-6 col-sm-12 col-xs-12">
                                                            <div class="metric-card1">
                                                                <h3>Total Call Minutes</h3>
                                                                <div class="metric-value">1234</div>
                                                                <div id="container1" style="width: 100%;"></div>
                                                            </div>
                                                        </div>
                                                        <div class="metricsec col-lg-3 col-md-6 col-sm-12 col-xs-12">
                                                            <div class="metric-card2">
                                                                <h3>Number of Calls</h3>
                                                                <div class="metric-value">3500</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">$264.53</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">$0.07</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-4 col-md-6 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-4 col-md-6 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-6 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-4 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-4 col-md-12 col-sm-12 col-xs-12">
                                                            <div class="metric-card">
                                                                <h3 class="mb-4 px-2">Unsuccessful calls</h3>
                                                                <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>Trikon health check 3 - 6 month</h4>
                                                                            <p>22 Sep, 12:06 | +61408110281</p>
                                                                        </div>
                                                                        <div class="metricdivright col-lg-3 col-md-12 col-sm-12 col-xs-12">
                                                                            <p>Failed</p>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <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>Widoph logistics assistant</h4>
                                                                            <p>22 Sep, 12:06 | +61408110281</p>
                                                                        </div>
                                                                        <div class="metricdivright col-lg-3 col-md-12 col-sm-12 col-xs-12">
                                                                            <p>Failed</p>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <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>MetaClick_v1</h4>
                                                                            <p>22 Sep, 12:06 | +61408110281</p>
                                                                        </div>
                                                                        <div class="metricdivright col-lg-3 col-md-12 col-sm-12 col-xs-12">
                                                                            <p>Failed</p>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <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>Widoph logistics assistant</h4>
                                                                            <p>22 Sep, 12:06 | +61408110281</p>
                                                                        </div>
                                                                        <div class="metricdivright col-lg-3 col-md-12 col-sm-12 col-xs-12">
                                                                            <p>Failed</p>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <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>CN</h4>
                                                                            <p>22 Sep, 12:06 | +61408110281</p>
                                                                        </div>
                                                                        <div class="metricdivright col-lg-3 col-md-12 col-sm-12 col-xs-12">
                                                                            <p>Failed</p>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="metricdivlistbtn col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                                                    <a>View More</a>
                                                                </div>
                                                            </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>
<script>
    const historyLimitDays = {{ Auth::user()->customer->history_limit ?? 0 }};
    const today = new Date();
    const minDate = new Date();
    minDate.setDate(today.getDate() - historyLimitDays);

    flatpickr("#startDate", {
        enableTime: false,
        altInput: true,
        altFormat: "Y-m-d",
        dateFormat: "Y-m-d",
        time_24hr: true,
        maxDate: today,
        minDate: historyLimitDays > 0 ? minDate : null,
        disableMobile: true
    });

    flatpickr("#endDate", {
        enableTime: false,
        altInput: true,
        altFormat: "Y-m-d",
        dateFormat: "Y-m-d",
        time_24hr: true,
        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 updateChartColors(theme) {
        const textColor = theme === 'dark' ? '#5b5e78' : '#5b5e78';
        const legendColor = theme === 'dark' ? '#ffffff' : '#5b5e78';
        
        [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 } }
                });
            }
        });
    }

    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() {
        // Date inputs
        $('#startDate, #endDate').on('change', updateChartByDateRange);
        // Chart 1
        chart1 = Highcharts.chart('container1', {
            chart: {
                type: 'areaspline',
                height: 250,
                backgroundColor: 'transparent'
            },
            title: {
                text: null
            },
            xAxis: {
                categories: ['2024-12-16', '2024-12-17', '2024-12-18', '2024-12-19', '2024-12-20','2024-12-21', '2024-12-22', '2024-12-23', '2024-12-24', '2024-12-25'],
                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: 'Total Call Minutes',
                data: [0, 40, 10, 20, 5, 60, 25, 40, 30, 10],
                color: '#107a58',
                fillOpacity: 0.2
            }]
        });
        // Chart 2
        chart2 = Highcharts.chart('container2', {
            chart: {
                type: 'areaspline',
                height: 250,
                backgroundColor: 'transparent'
            },
            title: {
                text: null
            },
            xAxis: {
                categories: ['2024-12-16', '2024-12-17', '2024-12-18', '2024-12-19', '2024-12-20','2024-12-21', '2024-12-22', '2024-12-23', '2024-12-24', '2024-12-25'],
                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: 'Number of Calls',
                data: [0, 10, 20, 30, 40, 20, 10, 15, 2, 1],
                color: '#a0690e',
                fillOpacity: 0.2
            }]
        });
        // Chart 3
        chart3 = Highcharts.chart('container3', {
            chart: {
                type: 'areaspline',
                height: 250,
                backgroundColor: 'transparent'
            },
            title: {
                text: null
            },
            xAxis: {
                categories: ['2024-12-16', '2024-12-17', '2024-12-18', '2024-12-19', '2024-12-20','2024-12-21', '2024-12-22', '2024-12-23', '2024-12-24', '2024-12-25'],
                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: 'Total Spent',
                data: [0, 25, 40, 30, 10, 35, 20, 45, 25, 30],
                color: '#5d40a3',
                fillOpacity: 0.2
            }]
        });
        // Chart 4
        chart4 = Highcharts.chart('container4', {
            chart: {
                type: 'areaspline',
                height: 250,
                backgroundColor: 'transparent'
            },
            title: {
                text: null
            },
            xAxis: {
                categories: ['2024-12-16', '2024-12-17', '2024-12-18', '2024-12-19', '2024-12-20','2024-12-21', '2024-12-22', '2024-12-23', '2024-12-24', '2024-12-25'],
                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: 'Avg Cost per Call',
                data: [0, 15, 5, 50, 20, 25, 35, 10, 40, 30],
                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: ['2024-12-16', '2024-12-17', '2024-12-18', '2024-12-19', '2024-12-20','2024-12-21', '2024-12-22', '2024-12-23', '2024-12-24', '2024-12-25'],
            },
            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: [{
                name: 'customer-ended-call',
                data: [148, 133, 124, 100, 500, 800, 150, 600, 120, 110],
                color: '#107a58'
            }, {
                name: 'voicemail',
                data: [102, 98, 65, 148, 500, 124, 700, 50, 800, 150],
                color: '#a0690e'
            }, {
                name: 'assistant-ended-call',
                data: [113, 122, 95, 102, 98, 800, 148, 400, 124, 500],
                color: '#5d40a3'
            }, {
                name: 'customer-did-not-answer',
                data: [77, 72, 80, 500, 122, 300, 100, 98, 600],
                color: '#2b58a3'
            }]
        });
        // Chart 6
        chart6 = Highcharts.chart('container6', {
            chart: {
                type: 'column',
                height: 350,
                backgroundColor: 'transparent'
            },
            title: {
                text: '',
                align: 'left'
            },
            xAxis: {
                lineWidth: 0,
                tickWidth: 0,
                categories: ['2024-12-16', '2024-12-17', '2024-12-18', '2024-12-19', '2024-12-20','2024-12-21', '2024-12-22', '2024-12-23', '2024-12-24', '2024-12-25'],
            },
            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: [{
                name: 'Trikon health check 3 - 6 month',
                data: [148, 133, 124, 100, 500, 800, 150, 600, 120, 110],
                color: '#107a58'
            }, {
                name: 'TrikonHealthCheck-ContractExpiring',
                data: [102, 98, 65, 148, 500, 124, 700, 50, 800, 150],
                color: '#a0690e'
            }, {
                name: 'TriCallAI',
                data: [113, 122, 95, 102, 98, 800, 148, 400, 124, 500],
                color: '#5d40a3'
            }]
        });
        // Chart 7
        chart7 = Highcharts.chart('container7', {
            chart: {
                type: 'column',
                height: 350,
                backgroundColor: 'transparent'
            },
            title: {
                text: '',
                align: 'left'
            },
            xAxis: {
                lineWidth: 0,
                tickWidth: 0,
                categories: ['2024-12-16', '2024-12-17', '2024-12-18', '2024-12-19', '2024-12-20','2024-12-21', '2024-12-22', '2024-12-23', '2024-12-24', '2024-12-25'],
            },
            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: [{
                name: 'LLM',
                data: [148, 133, 124, 100, 500, 800, 150, 600, 120, 110],
                color: '#107a58'
            }, {
                name: 'STT',
                data: [102, 98, 65, 148, 500, 124, 700, 50, 800, 150],
                color: '#a0690e'
            }, {
                name: 'TTS',
                data: [113, 122, 95, 102, 98, 800, 148, 400, 124, 500],
                color: '#5d40a3'
            }, {
                name: 'VAPI',
                data: [77, 72, 80, 500, 122, 300, 100, 98, 600],
                color: '#2b58a3'
            }]
        });
        // Chart 8
        chart8 = Highcharts.chart('container8', {
            chart: {
                type: 'column',
                height: 400,
                backgroundColor: 'transparent'
            },
            title: {
                text: '',
                align: 'left'
            },
            xAxis: {
                lineWidth: 0,
                tickWidth: 0,
                categories: ['2024-12-16', '2024-12-17', '2024-12-18', '2024-12-19', '2024-12-20','2024-12-21', '2024-12-22', '2024-12-23', '2024-12-24', '2024-12-25'],
            },
            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: [{
                name: 'unsuccessful',
                data: [148, 133, 124, 100, 500, 800, 150, 600, 120, 110],
                color: '#107a58'
            }, {
                name: 'voicemail',
                data: [102, 98, 65, 148, 500, 124, 700, 50, 800, 150],
                color: '#a0690e'
            }, {
                name: 'Unknown',
                data: [113, 122, 95, 102, 98, 800, 148, 400, 124, 500],
                color: '#5d40a3'
            }, {
                name: 'Unsuccessful',
                data: [77, 72, 80, 500, 122, 300, 100, 98, 600],
                color: '#2b58a3'
            }, {
                name: 'false',
                data: [77, 72, 80, 500, 122, 300, 100, 98, 600],
                color: '#e74c3c'
            }, {
                name: 'call back later',
                data: [77, 72, 80, 500, 122, 300, 100, 98, 600],
                color: '#f39c12'
            }, {
                name: 'true',
                data: [77, 72, 80, 500, 122, 300, 100, 98, 600],
                color: '#27ae60'
            }, {
                name: 'appointment booked',
                data: [77, 72, 80, 500, 122, 300, 100, 98, 600],
                color: '#8e44ad'
            }, {
                name: 'Successful',
                data: [77, 72, 80, 500, 122, 300, 100, 98, 600],
                color: '#3498db'
            }, {
                name: 'Other',
                data: [77, 72, 80, 500, 122, 300, 100, 98, 600],
                color: '#95a5a6'
            }]
        });
        // Chart 9
        chart9 = Highcharts.chart('container9', {
            chart: {
                type: 'areaspline',
                height: 400,
                backgroundColor: 'transparent'
            },
            title: {
                text: null
            },
            xAxis: {
                categories: ['2024-12-16', '2024-12-17', '2024-12-18', '2024-12-19', '2024-12-20','2024-12-21', '2024-12-22', '2024-12-23', '2024-12-24', '2024-12-25'],
                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: 'Avg Cost per Call',
                data: [0, 15, 5, 50, 20, 25, 35, 10, 40, 30],
                color: '#5d40a3',
                fillOpacity: 0.2
            }]
        });

        const savedChartTheme = localStorage.getItem('theme') || 'light';
        updateChartColors(savedChartTheme);
        
        $('#light_mode,#moblight_mode').on('click', function () {
            updateChartColors('light');
        });

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