@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-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">Daily Active Users</p>
                                    </div>
                                    <div class="flex-shrink-0">
                                        <h5 class="text-success fs-14 mb-0">
                                            <i class="ri-arrow-right-up-line fs-13 align-middle"></i> +16.24%
                                        </h5>
                                    </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="8.42">0</span>k</h4>
                                        <a href="" class="text-decoration-underline">View details</a>
                                    </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-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">Weekly Active Users</p>
                                    </div>
                                    <div class="flex-shrink-0">
                                        <h5 class="text-success fs-14 mb-0">
                                            <i class="ri-arrow-right-up-line fs-13 align-middle"></i> +29.08%
                                        </h5>
                                    </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="52.18">0</span>k</h4>
                                        <a href="" class="text-decoration-underline">View details</a>
                                    </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-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">Monthly Active Users</p>
                                    </div>
                                    <div class="flex-shrink-0">
                                        <h5 class="text-success fs-14 mb-0">
                                            <i class="ri-arrow-right-up-line fs-13 align-middle"></i> +12.45%
                                        </h5>
                                    </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="218.45">0</span>k</h4>
                                        <a href="" class="text-decoration-underline">View details</a>
                                    </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 class="flex-shrink-0">
                                        <h5 class="text-success fs-14 mb-0">
                                            <i class="ri-arrow-right-up-line fs-13 align-middle"></i> +5.32%
                                        </h5>
                                    </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="12.4">0</span></h4>
                                        <a href="" class="text-decoration-underline">View details</a>
                                    </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">
                                        <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 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 class="flex-shrink-0">
                                        <h5 class="text-danger fs-14 mb-0">
                                            <i class="ri-arrow-right-up-line fs-13 align-middle"></i> +8.45%
                                        </h5>
                                    </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="45.23">0</span>k</h4>
                                        <a href="" class="text-decoration-underline">View all alerts</a>
                                    </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 class="flex-shrink-0">
                                        <h5 class="text-warning fs-14 mb-0">
                                            <i class="ri-arrow-right-up-line fs-13 align-middle"></i> +12.32%
                                        </h5>
                                    </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="18.42">0</span>k</h4>
                                        <a href="" class="text-decoration-underline">View speed alerts</a>
                                    </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">Proximity Alerts</p>
                                    </div>
                                    <div class="flex-shrink-0">
                                        <h5 class="text-info fs-14 mb-0">
                                            <i class="ri-arrow-right-up-line fs-13 align-middle"></i> +6.78%
                                        </h5>
                                    </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="15.68">0</span>k</h4>
                                        <a href="" class="text-decoration-underline">View proximity alerts</a>
                                    </div>
                                    <div class="avatar-sm flex-shrink-0">
                                        <span class="avatar-title bg-info-subtle rounded fs-3">
                                            <i class="ri-radar-line text-info"></i>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row g-3 mb-4">
                    <div class="col-12">
                        <div class="card border bg-light">
                            <div class="card-body py-3">
                                <div class="d-flex flex-wrap gap-3 align-items-center fs-15">
                                    <span class="fw-semibold">Breakdown:</span>
                                    <span class="badge bg-white text-dark border px-3 py-2">Speed: 18,420</span>
                                    <span class="badge bg-white text-dark border px-3 py-2">Proximity: 15,680</span>
                                    <span class="badge bg-white text-dark border px-3 py-2">Accident: 11,130</span>
                                </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">
                                        <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>
                                        <button type="button" class="btn btn-light btn-sm">Custom</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 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">Socket Connection</p>
                                    </div>
                                    <div class="flex-shrink-0">
                                        <h5 class="text-success fs-14 mb-0">
                                            <i class="ri-arrow-right-up-line fs-13 align-middle"></i> +0.2%
                                        </h5>
                                    </div>
                                </div>
                                <div class="d-flex align-items-end justify-content-between mt-4">
                                    <div>
                                        <h4 class="fs-22 fw-semibold ff-secondary mb-2"><span class="counter-value" data-target="99.8">0</span>%</h4>
                                        <small class="text-muted d-block mb-3">Uptime: 99.8% | Downtime: 0.2%</small>
                                        <a href="" class="text-decoration-underline">View details</a>
                                    </div>
                                    <div class="avatar-sm flex-shrink-0">
                                        <span class="avatar-title bg-success-subtle rounded fs-3">
                                            <i class="ri-wifi-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">API Response Time</p>
                                    </div>
                                    <div class="flex-shrink-0">
                                        <h5 class="text-success fs-14 mb-0">
                                            <i class="ri-arrow-right-down-line fs-13 align-middle"></i> -5.2%
                                        </h5>
                                    </div>
                                </div>
                                <div class="d-flex align-items-end justify-content-between mt-4">
                                    <div>
                                        <h4 class="fs-22 fw-semibold ff-secondary mb-2"><span class="counter-value" data-target="142">0</span>ms</h4>
                                        <small class="text-muted d-block mb-3">Avg: 142ms | P95: 285ms | P99: 420ms</small>
                                        <a href="" class="text-decoration-underline">View details</a>
                                    </div>
                                    <div class="avatar-sm flex-shrink-0">
                                        <span class="avatar-title bg-primary-subtle rounded fs-3">
                                            <i class="ri-timer-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">Error Rate</p>
                                    </div>
                                    <div class="flex-shrink-0">
                                        <h5 class="text-danger fs-14 mb-0">
                                            <i class="ri-arrow-right-down-line fs-13 align-middle"></i> -2.1%
                                        </h5>
                                    </div>
                                </div>
                                <div class="d-flex align-items-end justify-content-between mt-4">
                                    <div>
                                        <h4 class="fs-22 fw-semibold ff-secondary mb-2"><span class="counter-value" data-target="0.12">0</span>%</h4>
                                        <small class="text-muted d-block mb-3">Errors: 234 | Crashes: 12</small>
                                        <a href="" class="text-decoration-underline">View details</a>
                                    </div>
                                    <div class="avatar-sm flex-shrink-0">
                                        <span class="avatar-title bg-danger-subtle rounded fs-3">
                                            <i class="ri-error-warning-line text-danger"></i>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-12">
                        <div class="card border">
                            <div class="card-header">
                                <h4 class="card-title mb-0">Error and Crash Trend Reports</h4>
                            </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">Total Errors (7d)</p>
                                            <h3 class="mb-0 text-danger">1,234</h3>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="text-center">
                                            <p class="text-muted mb-1 fs-15">Total Crashes (7d)</p>
                                            <h3 class="mb-0 text-warning">45</h3>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="text-center">
                                            <p class="text-muted mb-1 fs-15">Error Rate</p>
                                            <h3 class="mb-0">0.12%</h3>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="text-center">
                                            <p class="text-muted mb-1 fs-15">Avg. Resolution</p>
                                            <h3 class="mb-0">2.4h</h3>
                                        </div>
                                    </div>
                                </div>
                                <div id="errorTrendsChart" style="min-height: 350px;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('custom-script')
<script>
    $(document).ready(function() {
        // Users by Device Chart (Donut)
        var usersByDeviceOptions = {
            chart: {
                type: 'donut',
                height: 320,
                toolbar: { show: false }
            },
            colors: ['#405189', '#0ab39c', '#f7b84b'],
            series: [45, 38, 17],
            labels: ['iOS', 'Android', 'Other'],
            legend: {
                position: 'bottom'
            },
            dataLabels: {
                enabled: true,
                formatter: function(val) {
                    return val + "%"
                }
            }
        };
        var usersByDeviceChart = new ApexCharts(document.querySelector("#usersByDeviceChart"), usersByDeviceOptions);
        usersByDeviceChart.render();

        // Usage Trends Chart (Area)
        var usageOptions = {
            chart: {
                type: 'area',
                height: 280,
                toolbar: { show: false },
                zoom: { enabled: false }
            },
            colors: ['#405189', '#0ab39c'],
            dataLabels: { enabled: false },
            stroke: { curve: 'smooth', width: 2 },
            series: [{
                name: 'Active Users',
                data: [4200, 4800, 5100, 6300, 7200, 8100, 9400]
            }, {
                name: 'Sessions',
                data: [5200, 5500, 5900, 6400, 7000, 7600, 8200]
            }],
            xaxis: {
                categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                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 }
        };
        var usageChart = new ApexCharts(document.querySelector("#usageAreaChart"), usageOptions);
        usageChart.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();

        // Alert Trends Chart (Area)
        var alertTrendsOptions = {
            chart: {
                type: 'area',
                height: 280,
                toolbar: { show: false },
                zoom: { enabled: false }
            },
            colors: ['#f06548', '#f7b84b', '#0ab39c'],
            dataLabels: { enabled: false },
            stroke: { curve: 'smooth', width: 2 },
            series: [{
                name: 'Speed Alerts',
                data: [420, 480, 510, 630, 720, 810, 940]
            }, {
                name: 'Proximity Alerts',
                data: [380, 450, 490, 580, 650, 720, 850]
            }, {
                name: 'Accident Alerts',
                data: [120, 150, 180, 210, 240, 280, 320]
            }],
            xaxis: {
                categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                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 }
        };
        var alertTrendsChart = new ApexCharts(document.querySelector("#alertTrendsChart"), alertTrendsOptions);
        alertTrendsChart.render();

        // Error Trends Chart (Area)
        var errorTrendsOptions = {
            chart: {
                type: 'area',
                height: 280,
                toolbar: { show: false },
                zoom: { enabled: false }
            },
            colors: ['#f06548', '#f7b84b'],
            dataLabels: { enabled: false },
            stroke: { curve: 'smooth', width: 2 },
            series: [{
                name: 'Errors',
                data: [120, 145, 180, 165, 190, 210, 234]
            }, {
                name: 'Crashes',
                data: [8, 10, 12, 9, 11, 13, 12]
            }],
            xaxis: {
                categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                axisBorder: { show: false },
                axisTicks: { show: false }
            },
            yaxis: {
                title: { text: 'Count' }
            },
            legend: { position: 'top', horizontalAlign: 'right' },
            grid: { strokeDashArray: 4 }
        };
        var errorTrendsChart = new ApexCharts(document.querySelector("#errorTrendsChart"), errorTrendsOptions);
        errorTrendsChart.render();
    });
</script>
@endpush