@extends('admin.layout.index')
@section('title', 'Lusyi | Dashboard')

@section('content')
    <div class="row">
        <div class="col-12">
            <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                <h3 class="mb-sm-0">Dashboard</h3>
                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="javascript: void(0);">Dashboards</a></li>
                        <li class="breadcrumb-item active">Analytics</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>

    <!-- Usage Analytics -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title mb-0">Usage Analytics</h4>
                </div>
                <div class="card-body">
                    <div class="row g-3 mb-4">
                        <div class="col-xl-4 col-md-6">
                            <div class="card card-animate">
                                <div class="card-body">
                                    <div class="d-flex align-items-center">
                                        <div class="flex-grow-1 overflow-hidden">
                                            <p class="text-uppercase fw-medium text-muted text-truncate mb-0">Daily Active
                                                Users</p>
                                        </div>
                                    </div>
                                    <div class="d-flex align-items-end justify-content-between mt-4">
                                        <div>
                                            <h4 class="fs-22 fw-semibold ff-secondary mb-4">
                                                <span class="counter-value"
                                                    data-target="{{ $activeUsersStats['dau'] }}">0</span>
                                            </h4>
                                        </div>
                                        <div class="avatar-sm flex-shrink-0">
                                            <span class="avatar-title bg-primary-subtle rounded fs-3">
                                                <i class="ri-user-line text-primary"></i>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-xl-4 col-md-6">
                            <div class="card card-animate">
                                <div class="card-body">
                                    <div class="d-flex align-items-center">
                                        <div class="flex-grow-1 overflow-hidden">
                                            <p class="text-uppercase fw-medium text-muted text-truncate mb-0">Weekly Active
                                                Users</p>
                                        </div>
                                    </div>
                                    <div class="d-flex align-items-end justify-content-between mt-4">
                                        <div>
                                            <h4 class="fs-22 fw-semibold ff-secondary mb-4">
                                                <span class="counter-value"
                                                    data-target="{{ $activeUsersStats['wau'] }}">0</span>
                                            </h4>
                                        </div>
                                        <div class="avatar-sm flex-shrink-0">
                                            <span class="avatar-title bg-success-subtle rounded fs-3">
                                                <i class="ri-user-follow-line text-success"></i>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-xl-4 col-md-6">
                            <div class="card card-animate">
                                <div class="card-body">
                                    <div class="d-flex align-items-center">
                                        <div class="flex-grow-1 overflow-hidden">
                                            <p class="text-uppercase fw-medium text-muted text-truncate mb-0">Monthly Active
                                                Users</p>
                                        </div>
                                    </div>
                                    <div class="d-flex align-items-end justify-content-between mt-4">
                                        <div>
                                            <h4 class="fs-22 fw-semibold ff-secondary mb-4">
                                                <span class="counter-value"
                                                    data-target="{{ $activeUsersStats['mau'] }}">0</span>
                                            </h4>
                                        </div>
                                        <div class="avatar-sm flex-shrink-0">
                                            <span class="avatar-title bg-info-subtle rounded fs-3">
                                                <i class="ri-group-line text-info"></i>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- <div class="col-xl-3 col-md-6">
                            <div class="card card-animate">
                                <div class="card-body">
                                    <div class="d-flex align-items-center">
                                        <div class="flex-grow-1 overflow-hidden">
                                            <p class="text-uppercase fw-medium text-muted text-truncate mb-0">Avg. Travel
                                                Sessions</p>
                                        </div>
                                    </div>
                                    <div class="d-flex align-items-end justify-content-between mt-4">
                                        <div>
                                            <h4 class="fs-22 fw-semibold ff-secondary mb-4">
                                                <span class="counter-value"
                                                    data-target="{{ $activeUsersStats['avgSessions'] }}">0</span>
                                            </h4>
                                        </div>
                                        <div class="avatar-sm flex-shrink-0">
                                            <span class="avatar-title bg-warning-subtle rounded fs-3">
                                                <i class="ri-roadster-line text-warning"></i>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div> --}}
                    </div>

                    <div class="row g-3 mb-4">
                        <div class="col-lg-5">
                            <div class="card border h-100">
                                <div class="card-body">
                                    <h4 class="card-title mb-3">Users by Device</h4>
                                    <div id="usersByDeviceChart" style="min-height: 320px;"></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-7">
                            <div class="card border h-100">
                                <div class="card-header">
                                    <div class="d-flex align-items-center justify-content-between">
                                        <h4 class="card-title mb-0">Usage Trends</h4>
                                        <div class="btn-group" role="group" id="usageFilterButtons">
                                            <button type="button" class="btn btn-primary btn-sm"
                                                data-filter="daily">Daily</button>
                                            <button type="button" class="btn btn-light btn-sm"
                                                data-filter="weekly">Weekly</button>
                                            <button type="button" class="btn btn-light btn-sm"
                                                data-filter="monthly">Monthly</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div id="usageAreaChart" style="min-height: 320px;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Peak Usage Times -->
    {{-- <div class="row mb-4">
        <div class="col-lg-8">
            <div class="card border h-100">
                <div class="card-header">
                    <div class="d-flex align-items-center justify-content-between">
                        <h4 class="card-title mb-0">Peak Usage Times</h4>
                        <div class="btn-group" role="group">
                            <button type="button" class="btn btn-primary btn-sm">Daily</button>
                            <button type="button" class="btn btn-light btn-sm">Weekly</button>
                            <button type="button" class="btn btn-light btn-sm">Monthly</button>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row g-3 mb-3">
                        <div class="col-md-3">
                            <div class="text-center">
                                <p class="text-muted mb-1 fs-15">Peak Hour</p>
                                <h3 class="mb-0">6:00 PM</h3>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="text-center">
                                <p class="text-muted mb-1 fs-15">Peak Day</p>
                                <h3 class="mb-0">Friday</h3>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="text-center">
                                <p class="text-muted mb-1 fs-15">Avg. Peak Users</p>
                                <h3 class="mb-0">12,450</h3>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="text-center">
                                <p class="text-muted mb-1 fs-15">Time Range</p>
                                <h3 class="mb-0">5 PM - 8 PM</h3>
                            </div>
                        </div>
                    </div>
                    <div id="peakUsageChart" style="min-height: 380px;"></div>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card border h-100">
                <div class="card-header d-flex align-items-center justify-content-between">
                    <h4 class="card-title mb-0">Other Peak Hours</h4>
                    <span class="badge bg-primary">Top Windows</span>
                </div>
                <div class="card-body">
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <span>7:00 AM - 8:00 AM</span>
                            <span class="badge bg-light text-dark">8.1k</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <span>12:00 PM - 1:00 PM</span>
                            <span class="badge bg-light text-dark">9.4k</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <span>3:00 PM - 4:00 PM</span>
                            <span class="badge bg-light text-dark">10.7k</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <span>8:00 PM - 9:00 PM</span>
                            <span class="badge bg-light text-dark">11.2k</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <span>10:00 PM - 11:00 PM</span>
                            <span class="badge bg-light text-dark">7.9k</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div> --}}

    <!-- Safety & Alert Analytics -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title mb-0">Safety & Alert Analytics</h4>
                </div>
                <div class="card-body">
                    <div class="row g-3 mb-3">
                        <div class="col-xl-4 col-md-6">
                            <div class="card card-animate">
                                <div class="card-body">
                                    <div class="d-flex align-items-center">
                                        <div class="flex-grow-1 overflow-hidden">
                                            <p class="text-uppercase fw-medium text-muted text-truncate mb-0">Total Alerts
                                            </p>
                                        </div>
                                    </div>
                                    <div class="d-flex align-items-end justify-content-between mt-4">
                                        <div>
                                            <h4 class="fs-22 fw-semibold ff-secondary mb-4">
                                                <span class="counter-value"
                                                    data-target="{{ $alertStats['totalAlerts'] }}">0</span>
                                            </h4>
                                        </div>
                                        <div class="avatar-sm flex-shrink-0">
                                            <span class="avatar-title bg-danger-subtle rounded fs-3">
                                                <i class="ri-alarm-warning-line text-danger"></i>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-xl-4 col-md-6">
                            <div class="card card-animate">
                                <div class="card-body">
                                    <div class="d-flex align-items-center">
                                        <div class="flex-grow-1 overflow-hidden">
                                            <p class="text-uppercase fw-medium text-muted text-truncate mb-0">Speed Alerts
                                            </p>
                                        </div>
                                    </div>
                                    <div class="d-flex align-items-end justify-content-between mt-4">
                                        <div>
                                            <h4 class="fs-22 fw-semibold ff-secondary mb-4">
                                                <span class="counter-value"
                                                    data-target="{{ $alertStats['speedAlerts'] }}">0</span>
                                            </h4>
                                        </div>
                                        <div class="avatar-sm flex-shrink-0">
                                            <span class="avatar-title bg-warning-subtle rounded fs-3">
                                                <i class="ri-speed-line text-warning"></i>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-xl-4 col-md-6">
                            <div class="card card-animate">
                                <div class="card-body">
                                    <div class="d-flex align-items-center">
                                        <div class="flex-grow-1 overflow-hidden">
                                            <p class="text-uppercase fw-medium text-muted text-truncate mb-0">Accident
                                                Alerts</p>
                                        </div>
                                    </div>
                                    <div class="d-flex align-items-end justify-content-between mt-4">
                                        <div>
                                            <h4 class="fs-22 fw-semibold ff-secondary mb-4">
                                                <span class="counter-value"
                                                    data-target="{{ $alertStats['accidentAlerts'] }}">0</span>
                                            </h4>
                                        </div>
                                        <div class="avatar-sm flex-shrink-0">
                                            <span class="avatar-title bg-success-subtle rounded fs-3">
                                                <i class="ri-radar-line text-success"></i>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-12">
                            <div class="card border">
                                <div class="card-header">
                                    <div class="d-flex align-items-center justify-content-between">
                                        <h4 class="card-title mb-0">Alert Trends</h4>
                                        <div class="btn-group" role="group" id="alertFilterButtons">
                                            <button type="button" class="btn btn-primary btn-sm"
                                                data-filter="daily">Daily</button>
                                            <button type="button" class="btn btn-light btn-sm"
                                                data-filter="weekly">Weekly</button>
                                            <button type="button" class="btn btn-light btn-sm"
                                                data-filter="monthly">Monthly</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div id="alertTrendsChart" style="min-height: 350px;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- System Health Analytics -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title mb-0">System Health Analytics</h4>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-12">
                            <div class="card border">
                                <div class="card-header d-flex justify-content-between">
                                    <h4 class="card-title mb-0">Error and Crash Trend Reports</h4>
                                    <div class="btn-group" role="group" id="errorTrendFilter">
                                        <button type="button" class="btn btn-sm btn-primary" data-filter="daily"
                                            onclick="filterErrorTrends('daily')">Daily</button>
                                        <button type="button" class="btn btn-sm btn-light" data-filter="weekly"
                                            onclick="filterErrorTrends('weekly')">Weekly</button>
                                        <button type="button" class="btn btn-sm btn-light" data-filter="monthly"
                                            onclick="filterErrorTrends('monthly')">Monthly</button>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="row g-3 mb-3">
                                        <div class="col-md-4">
                                            <div class="text-center">
                                                <p class="text-muted mb-1 fs-15">Total Errors (7d)</p>
                                                <h3 class="mb-0 text-danger" id="totalErrors">
                                                    {{ number_format($errorTrendsData['totalErrors7d']) }}</h3>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="text-center">
                                                <p class="text-muted mb-1 fs-15">Total Crashes (7d)</p>
                                                <h3 class="mb-0 text-warning" id="totalCrashes">
                                                    {{ number_format($errorTrendsData['totalCrashes7d']) }}</h3>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="text-center">
                                                <p class="text-muted mb-1 fs-15">Error Rate</p>
                                                <h3 class="mb-0" id="errorRate">{{ $errorTrendsData['errorRate'] }}%
                                                </h3>
                                            </div>
                                        </div>
                                    </div>
                                    <div id="errorTrendsChart" style="min-height: 350px;"></div>

                                    <!-- Loading Spinner -->
                                    <div id="chartLoading"
                                        style="display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
                                        <div class="spinner-border text-primary" role="status">
                                            <span class="visually-hidden">Loading...</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('custom-script')
    <script>
        $(document).ready(function() {
            // Users by Device Chart (Donut)
            // Users by Device Chart (Donut) - Now Dynamic
            var usersByDeviceOptions = {
                chart: {
                    type: 'donut',
                    height: 320,
                    toolbar: {
                        show: false
                    }
                },
                colors: ['#405189', '#0ab39c', '#f7b84b', '#f06548', '#299cdb'],
                series: @json($deviceCounts),
                labels: @json($deviceLabels),
                legend: {
                    position: 'bottom'
                },
                dataLabels: {
                    enabled: true,
                    formatter: function(val) {
                        return val.toFixed(1) + "%"
                    }
                },
                plotOptions: {
                    pie: {
                        donut: {
                            labels: {
                                show: true,
                                total: {
                                    show: true,
                                    label: 'Total Users',
                                    formatter: function(w) {
                                        return w.globals.seriesTotals.reduce((a, b) => a + b, 0).toFixed(
                                            1) + '%'
                                    }
                                }
                            }
                        }
                    }
                }
            };
            var usersByDeviceChart = new ApexCharts(document.querySelector("#usersByDeviceChart"),
                usersByDeviceOptions);
            usersByDeviceChart.render();



            // Peak Usage Times Chart (Bar)
            var peakUsageOptions = {
                chart: {
                    type: 'bar',
                    height: 300,
                    toolbar: {
                        show: false
                    }
                },
                colors: ['#405189'],
                plotOptions: {
                    bar: {
                        horizontal: false,
                        columnWidth: '55%',
                        endingShape: 'rounded'
                    }
                },
                dataLabels: {
                    enabled: false
                },
                stroke: {
                    show: true,
                    width: 2,
                    colors: ['transparent']
                },
                series: [{
                    name: 'Active Users',
                    data: [3200, 4100, 5800, 7200, 8900, 12450, 11200, 9800, 7600, 5400, 3800, 2900]
                }],
                xaxis: {
                    categories: ['6 AM', '8 AM', '10 AM', '12 PM', '2 PM', '4 PM', '6 PM', '8 PM', '10 PM',
                        '12 AM', '2 AM', '4 AM'
                    ]
                },
                yaxis: {
                    title: {
                        text: 'Active Users'
                    },
                    labels: {
                        formatter: function(val) {
                            return val >= 1000 ? (val / 1000) + 'k' : val;
                        }
                    }
                },
                fill: {
                    opacity: 1
                },
                grid: {
                    strokeDashArray: 4
                }
            };
            var peakUsageChart = new ApexCharts(document.querySelector("#peakUsageChart"), peakUsageOptions);
            peakUsageChart.render();

        });

        var errorTrendsChart; // Declare globally

        document.addEventListener('DOMContentLoaded', function() {
            var errorTrendsOptions = {
                chart: {
                    type: 'area',
                    height: 280,
                    toolbar: {
                        show: false
                    },
                    zoom: {
                        enabled: false
                    },
                    animations: {
                        enabled: true,
                        easing: 'easeinout',
                        speed: 800
                    }
                },
                colors: ['#f06548', '#f7b84b'],
                dataLabels: {
                    enabled: false
                },
                stroke: {
                    curve: 'smooth',
                    width: 2
                },
                series: [{
                    name: 'Errors',
                    data: @json($errorTrendsData['errorData'])
                }, {
                    name: 'Crashes',
                    data: @json($errorTrendsData['crashData'])
                }],
                xaxis: {
                    categories: @json($errorTrendsData['categories']),
                    axisBorder: {
                        show: false
                    },
                    axisTicks: {
                        show: false
                    }
                },
                yaxis: {
                    title: {
                        text: 'Count'
                    }
                },
                legend: {
                    position: 'top',
                    horizontalAlign: 'right'
                },
                grid: {
                    strokeDashArray: 4
                },
                tooltip: {
                    shared: true,
                    intersect: false
                }
            };

            // Initialize chart
            errorTrendsChart = new ApexCharts(document.querySelector("#errorTrendsChart"), errorTrendsOptions);
            errorTrendsChart.render();
        });

        // Function to filter error trends with AJAX
        function filterErrorTrends(filter) {
            // Check if chart is initialized
            if (!errorTrendsChart) {
                console.error('Chart not initialized yet');
                return;
            }

            // Show loading spinner
            const loadingElement = document.getElementById('chartLoading');
            if (loadingElement) {
                loadingElement.style.display = 'block';
            }

            // Update active button
            const buttons = document.querySelectorAll('#errorTrendFilter button');
            buttons.forEach(btn => {
                if (btn.getAttribute('data-filter') === filter) {
                    btn.classList.remove('btn-light');
                    btn.classList.add('btn-primary');
                } else {
                    btn.classList.remove('btn-primary');
                    btn.classList.add('btn-light');
                }
            });

            // Make AJAX request
            fetch('{{ route('dashboard.error.trends') }}?filter=' + filter, {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    }
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Network response was not ok');
                    }
                    return response.json();
                })
                .then(data => {
                    console.log('Received data:', data); // Debug log

                    // Format numbers for display
                    const formatNumber = (num) => {
                        return new Intl.NumberFormat('en-US').format(num);
                    };

                    // Update statistics
                    const totalErrorsEl = document.getElementById('totalErrors');
                    const totalCrashesEl = document.getElementById('totalCrashes');
                    const errorRateEl = document.getElementById('errorRate');

                    if (totalErrorsEl) {
                        totalErrorsEl.textContent = formatNumber(data.totalErrors7d);
                    }
                    if (totalCrashesEl) {
                        totalCrashesEl.textContent = formatNumber(data.totalCrashes7d);
                    }
                    if (errorRateEl) {
                        errorRateEl.textContent = data.errorRate + '%';
                    }

                    // Update chart with new data
                    errorTrendsChart.updateSeries([{
                        name: 'Errors',
                        data: data.errorData
                    }, {
                        name: 'Crashes',
                        data: data.crashData
                    }], true);

                    // Update categories
                    errorTrendsChart.updateOptions({
                        xaxis: {
                            categories: data.categories,
                            axisBorder: {
                                show: false
                            },
                            axisTicks: {
                                show: false
                            }
                        }
                    }, false, true);

                    // Hide loading spinner
                    if (loadingElement) {
                        loadingElement.style.display = 'none';
                    }
                })
                .catch(error => {
                    console.error('Error fetching data:', error);

                    // Hide loading spinner on error
                    if (loadingElement) {
                        loadingElement.style.display = 'none';
                    }

                    alert('Failed to load data. Please try again. Error: ' + error.message);
                });
        }

        // Alert Trends Chart Configuration
        let alertTrendsChart;

        function initAlertTrendsChart(data) {
            const options = {
                series: [{
                    name: 'Speed Alerts',
                    data: data.speedData
                }, {
                    name: 'Accident Alerts',
                    data: data.accidentData
                }, {
                    name: 'Total Alerts',
                    data: data.totalData
                }],
                chart: {
                    type: 'line',
                    height: 350,
                    toolbar: {
                        show: false
                    }
                },
                colors: ['#f1b44c', '#34c38f', '#f46a6a'],
                dataLabels: {
                    enabled: false
                },
                stroke: {
                    curve: 'smooth',
                    width: 2
                },
                xaxis: {
                    categories: data.categories
                },
                yaxis: {
                    title: {
                        text: 'Number of Alerts'
                    }
                },
                legend: {
                    position: 'top'
                },
                grid: {
                    borderColor: '#f1f1f1'
                }
            };

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

            alertTrendsChart = new ApexCharts(document.querySelector("#alertTrendsChart"), options);
            alertTrendsChart.render();
        }

        // Initialize chart on page load
        document.addEventListener('DOMContentLoaded', function() {
            const initialData = @json($alertTrendsData);
            initAlertTrendsChart(initialData);

            // Handle filter button clicks
            document.querySelectorAll('#alertFilterButtons button').forEach(button => {
                button.addEventListener('click', function() {
                    const filter = this.getAttribute('data-filter');

                    // Update button states
                    document.querySelectorAll('#alertFilterButtons button').forEach(btn => {
                        btn.classList.remove('btn-primary');
                        btn.classList.add('btn-light');
                    });
                    this.classList.remove('btn-light');
                    this.classList.add('btn-primary');

                    // Fetch new data
                    fetch(`{{ route('dashboard.alert.trends') }}?filter=${filter}`)
                        .then(response => response.json())
                        .then(data => {
                            initAlertTrendsChart(data);
                        })
                        .catch(error => console.error('Error:', error));
                });
            });
        });

        // Usage Trends Chart
        let usageChart;

        function initUsageTrendsChart(data) {
            const usageOptions = {
                chart: {
                    type: 'area',
                    height: 280,
                    toolbar: {
                        show: false
                    },
                    zoom: {
                        enabled: false
                    }
                },
                colors: ['#0ab39c'],
                dataLabels: {
                    enabled: false
                },
                stroke: {
                    curve: 'smooth',
                    width: 2
                },
                series: [{
                    name: 'Active Users',
                    data: data.activeUsersData
                }],
                xaxis: {
                    categories: data.categories,
                    axisBorder: {
                        show: false
                    },
                    axisTicks: {
                        show: false
                    }
                },
                yaxis: {
                    labels: {
                        formatter: function(val) {
                            return val >= 1000 ? (val / 1000) + 'k' : val;
                        }
                    }
                },
                legend: {
                    position: 'top',
                    horizontalAlign: 'right'
                },
                grid: {
                    strokeDashArray: 4
                }
            };

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

            usageChart = new ApexCharts(document.querySelector("#usageAreaChart"), usageOptions);
            usageChart.render();
        }

        // Initialize chart on page load
        document.addEventListener('DOMContentLoaded', function() {
            const initialData = @json($usageTrendsData);
            initUsageTrendsChart(initialData);

            // Handle filter button clicks
            document.querySelectorAll('#usageFilterButtons button').forEach(button => {
                button.addEventListener('click', function() {
                    const filter = this.getAttribute('data-filter');

                    // Update button states
                    document.querySelectorAll('#usageFilterButtons button').forEach(btn => {
                        btn.classList.remove('btn-primary');
                        btn.classList.add('btn-light');
                    });
                    this.classList.remove('btn-light');
                    this.classList.add('btn-primary');

                    // Fetch new data
                    fetch(`{{ route('dashboard.usage.trends') }}?filter=${filter}`)
                        .then(response => response.json())
                        .then(data => {
                            initUsageTrendsChart(data);
                        })
                        .catch(error => console.error('Error:', error));
                });
            });
        });
    </script>
@endpush