@extends('layouts.app')

@section('title', 'Dashboard')

@section('page-wrapper')
    <div class="page-header d-print-none">
        <div class="container-fluid">
            <div class="row g-2 align-items-center">
                <div class="col">
                    <h2 class="page-title">
                        Dashboard
                    </h2>
                </div>
            </div>
        </div>
    </div>

    <div class="page-body">
        <div class="container-fluid">
            <div class="row row-deck row-cards ">
                {{-- <div class="col-12">
                    <div class="row row-cards">
                        <div class="col-12 col-md-6 col-lg-3">
                            <a href="{{ route('couriers.index') }}" class="card card-sm card-link">
                                <div class="card-body">
                                    <div class="row align-items-center">
                                        <div class="col-auto">
                                            <span class="bg-savor-color text-white avatar">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                    viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                                    stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                                    class="icon icon-tabler icons-tabler-outline icon-tabler-packages">
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                                    <path d="M7 16.5l-5 -3l5 -3l5 3v5.5l-5 3z"></path>
                                                    <path d="M2 13.5v5.5l5 3"></path>
                                                    <path d="M7 16.545l5 -3.03"></path>
                                                    <path d="M17 16.5l-5 -3l5 -3l5 3v5.5l-5 3z"></path>
                                                    <path d="M12 19l5 3"></path>
                                                    <path d="M17 16.5l5 -3"></path>
                                                    <path d="M12 13.5v-5.5l-5 -3l5 -3l5 3v5.5"></path>
                                                    <path d="M7 5.03v5.455"></path>
                                                    <path d="M12 8l5 -3"></path>
                                                </svg>
                                            </span>
                                        </div>
                                        <div class="col">
                                            <div class="fw-semibold">
                                                {{ \App\Helpers\DateHelper::formatIndianAmount(@$couriers_count) }}
                                            </div>
                                            <div class="text-secondary">
                                                Total Active Couriers
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="col-12 col-md-6 col-lg-3">
                            <a href="{{ route('couriers_setups.index') }}" class="card card-sm card-link">
                                <div class="card-body">
                                    <div class="row align-items-center">
                                        <div class="col-auto">
                                            <span class="bg-savor-color text-white avatar">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                    viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                                    stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                                    class="icon icon-tabler icons-tabler-outline icon-tabler-package-import">
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                                    <path d="M12 21l-8 -4.5v-9l8 -4.5l8 4.5v4.5" />
                                                    <path d="M12 12l8 -4.5" />
                                                    <path d="M12 12v9" />
                                                    <path d="M12 12l-8 -4.5" />
                                                    <path d="M22 18h-7" />
                                                    <path d="M18 15l-3 3l3 3" />
                                                </svg>
                                            </span>
                                        </div>
                                        <div class="col">
                                            <div class="fw-semibold">
                                                {{ \App\Helpers\DateHelper::formatIndianAmount(@$courier_setups_count) }}
                                            </div>
                                            <div class="text-secondary">
                                                Total Active Courier Setups
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="col-12 col-md-6 col-lg-3">
                            <a href="{{ route('admins.index') }}" class="card card-sm card-link">
                                <div class="card-body">
                                    <div class="row align-items-center">
                                        <div class="col-auto">
                                            <span class="bg-savor-color text-white avatar">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                    viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                                    stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                                    class="icon icon-tabler icons-tabler-outline icon-tabler-admins-group">
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                                    <path d="M10 13a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
                                                    <path d="M8 21v-1a2 2 0 0 1 2 -2h4a2 2 0 0 1 2 2v1" />
                                                    <path d="M15 5a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
                                                    <path d="M17 10h2a2 2 0 0 1 2 2v1" />
                                                    <path d="M5 5a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
                                                    <path d="M3 13v-1a2 2 0 0 1 2 -2h2" />
                                                </svg>
                                            </span>
                                        </div>
                                        <div class="col">
                                            <div class="fw-semibold">
                                                {{ \App\Helpers\DateHelper::formatIndianAmount(@$admins_count) }}
                                            </div>
                                            <div class="text-secondary">
                                                Total Active Admins
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="col-12 col-md-6 col-lg-3">
                            <a href="{{ route('franchises.index') }}" class="card card-sm card-link">
                                <div class="card-body">
                                    <div class="row align-items-center">
                                        <div class="col-auto">
                                            <span class="bg-savor-color text-white avatar">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                    viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                                    stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                                    class="icon icon-tabler icons-tabler-outline icon-tabler-git-branch">
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                                    <path d="M7 18m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
                                                    <path d="M7 6m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
                                                    <path d="M17 6m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
                                                    <path d="M7 8l0 8" />
                                                    <path d="M9 18h6a2 2 0 0 0 2 -2v-5" />
                                                    <path d="M14 14l3 -3l3 3" />
                                                </svg>
                                            </span>
                                        </div>
                                        <div class="col">
                                            <div class="fw-semibold">
                                                {{ \App\Helpers\DateHelper::formatIndianAmount(@$franchises_count) }}
                                            </div>
                                            <div class="text-secondary">
                                                Total Active Franchises
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div> --}}

                <div class="col-12">
                    <div class="row row-deck row-cards">
                        {{-- Today's Booking --}}
                        <div class="col-6 col-md-3 col-xl-3">
                            <a href="{{ route('bookings.index', ['date' => \Carbon\Carbon::now()->format('d')]) }}"
                                class="card card-sm card-link">
                                <div class="card-body">
                                    <div class="row align-items-center">
                                        <div class="col-auto">
                                            <span class="bg-primary-lt text-white avatar">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                    viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                                    stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                                    class="icon icon-tabler icons-tabler-outline icon-tabler-brand-booking">
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                                    <path
                                                        d="M4 18v-9.5a4.5 4.5 0 0 1 4.5 -4.5h7a4.5 4.5 0 0 1 4.5 4.5v7a4.5 4.5 0 0 1 -4.5 4.5h-9.5a2 2 0 0 1 -2 -2z" />
                                                    <path
                                                        d="M8 12h3.5a2 2 0 1 1 0 4h-3.5v-7a1 1 0 0 1 1 -1h1.5a2 2 0 1 1 0 4h-1.5" />
                                                    <path d="M16 16l.01 0" />
                                                </svg>
                                            </span>
                                        </div>
                                        <div class="col">
                                            <div class="fw-semibold">{{ $today_booking }}</div>
                                            <div class="text-secondary">Today's <br />Booking</div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>

                        {{-- This Month Booking --}}
                        <div class="col-6 col-md-3 col-xl-3">
                            <a href="{{ route('bookings.index', ['month' => \Carbon\Carbon::now()->format('Y-m')]) }}"
                                class="card card-sm card-link">
                                <div class="card-body">
                                    <div class="row align-items-center">
                                        <div class="col-auto">
                                            <span class="bg-primary-lt text-white avatar">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                    viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                                    stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                                    class="icon icon-tabler icons-tabler-outline icon-tabler-brand-booking">
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                                    <path
                                                        d="M4 18v-9.5a4.5 4.5 0 0 1 4.5 -4.5h7a4.5 4.5 0 0 1 4.5 4.5v7a4.5 4.5 0 0 1 -4.5 4.5h-9.5a2 2 0 0 1 -2 -2z" />
                                                    <path
                                                        d="M8 12h3.5a2 2 0 1 1 0 4h-3.5v-7a1 1 0 0 1 1 -1h1.5a2 2 0 1 1 0 4h-1.5" />
                                                    <path d="M16 16l.01 0" />
                                                </svg>
                                            </span>
                                        </div>
                                        <div class="col">
                                            <div class="fw-semibold">{{ $month_booking }}</div>
                                            <div class="text-secondary">{{ \Carbon\Carbon::now()->format("M'y") }} Month
                                                <br />Booking 
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>

                        {{-- Admin --}}
                        <div class="col-6 col-md-3 col-xl-3">
                            <a href="{{ route('admins.index') }}" class="card card-sm card-link">
                                <div class="card-body">
                                    <div class="row align-items-center">
                                        <div class="col-auto">
                                            <span class="bg-primary-lt text-white avatar">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                    viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                                    stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                                    class="icon icon-tabler icons-tabler-outline icon-tabler-admins-group">
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                                    <path d="M10 13a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
                                                    <path d="M8 21v-1a2 2 0 0 1 2 -2h4a2 2 0 0 1 2 2v1" />
                                                    <path d="M15 5a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
                                                    <path d="M17 10h2a2 2 0 0 1 2 2v1" />
                                                    <path d="M5 5a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
                                                    <path d="M3 13v-1a2 2 0 0 1 2 -2h2" />
                                                </svg>
                                            </span>
                                        </div>
                                        <div class="col">
                                            <div class="fw-semibold"><span
                                                    class="text-success">{{ $admins_active_count }}</span> / <span
                                                    class="text-danger">{{ $admins_inactive_count }}</span></div>
                                            <div class="text-secondary">Customers</div>
                                            <div class="small text-muted">Active / Inactive</div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>

                        {{-- Franchise --}}
                        {{-- <div class="col-6 col-md-4 col-xl-2">
                            <a href="{{ route('franchises.index') }}" class="card card-sm card-link">
                                <div class="card-body">
                                    <div class="row align-items-center">
                                        <div class="col-auto">
                                            <span class="bg-primary-lt text-white avatar">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                    viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                                    stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                                    class="icon icon-tabler icons-tabler-outline icon-tabler-git-branch">
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                                    <path d="M7 18m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
                                                    <path d="M7 6m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
                                                    <path d="M17 6m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
                                                    <path d="M7 8l0 8" />
                                                    <path d="M9 18h6a2 2 0 0 0 2 -2v-5" />
                                                    <path d="M14 14l3 -3l3 3" />
                                                </svg>
                                            </span>
                                        </div>
                                        <div class="col">
                                            <div class="fw-semibold"><span
                                                    class="text-success">{{ $franchises_active_count }}</span> / <span
                                                    class="text-danger">{{ $franchises_inactive_count }}</span></div>
                                            <div class="text-secondary">Franchise</div>
                                            <div class="small text-muted">Active / Inactive</div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div> --}}

                        {{-- Support Executive --}}
                        {{-- <div class="col-6 col-md-4 col-xl-2">
                            <a href="{{ route('support-executives.index') }}" class="card card-sm card-link">
                                <div class="card-body">
                                    <div class="row align-items-center">
                                        <div class="col-auto">
                                            <span class="bg-primary-lt text-white avatar">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                    viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                                    stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                                    class="icon icon-tabler icons-tabler-outline icon-tabler-users">
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                                    <path d="M9 7m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" />
                                                    <path d="M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
                                                    <path d="M16 3.13a4 4 0 0 1 0 7.75" />
                                                    <path d="M21 21v-2a4 4 0 0 0 -3 -3.85" />
                                                </svg>
                                            </span>
                                        </div>
                                        <div class="col">
                                            <div class="fw-semibold"><span
                                                    class="text-success">{{ $support_executive_active_count }}</span> /
                                                <span class="text-danger">{{ $support_executive_inactive_count }}</span>
                                            </div>
                                            <div class="text-secondary">Executives</div>
                                            <div class="small text-muted">Active / Inactive</div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div> --}}

                        {{-- Support Tickets --}}
                        <div class="col-6 col-md-3 col-xl-3">
                            <a href="{{ route('support-tickets.index') }}" class="card card-sm card-link">
                                <div class="card-body">
                                    <div class="row align-items-center">
                                        <div class="col-auto">
                                            <span class="bg-primary-lt text-white avatar">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                    viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                                    stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                                    class="icon icon-tabler icons-tabler-outline icon-tabler-headset">
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                                    <path d="M4 14v-3a8 8 0 1 1 16 0v3" />
                                                    <path d="M18 19c0 1.657 -2.686 3 -6 3" />
                                                    <path
                                                        d="M4 14a2 2 0 0 1 2 -2h1a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-1a2 2 0 0 1 -2 -2v-3z" />
                                                    <path
                                                        d="M15 14a2 2 0 0 1 2 -2h1a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-1a2 2 0 0 1 -2 -2v-3z" />
                                                </svg>
                                            </span>
                                        </div>
                                        <div class="col">
                                            <div class="fw-semibold"><span
                                                    class="text-danger">{{ $ticket_open_count }}</span> / <span
                                                    class="text-success">{{ $ticket_closed_count }}</span></div>
                                            <div class="text-secondary">Tickets</div>
                                            <div class="small text-muted">Open / Closed</div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>

                @php
                    $currentYear = now()->year;
                    $startYear = 2025; // Minimum starting year
                @endphp

                {{-- <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="d-flex">
                                <h3 class="card-title">Admin Income</h3>
                                <div class="ms-auto">
                                    <div id="admin-revenue-filter-dropdown" class="dropdown">
                                        <a class="dropdown-toggle text-secondary" id="admin-revenue-dropdown"
                                            href="javascript:void(0)" data-bs-toggle="dropdown" aria-haspopup="true"
                                            aria-expanded="false"
                                            aria-label="Select year for revenue data">{{ $currentYear }}</a>
                                        <div class="dropdown-menu dropdown-menu-end"
                                            aria-labelledby="admin-revenue-dropdown" style="">
                                            @for ($year = $currentYear; $year >= $startYear; $year--)
                                                <a class="dropdown-item {{ $year == $currentYear ? 'active' : '' }}"
                                                    data-year="{{ $year }}" href="javascript:void(0)">
                                                    {{ $year }}
                                                </a>
                                            @endfor
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="admin-chart-wrapper" style="position:relative;">
                                <div id="admin-chart-loader"
                                    style="display:none;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);">
                                    <div class="spinner-border text-primary" role="status"></div>
                                </div>
                                <div id="admin-revenue-chart"></div>
                            </div>
                        </div>
                    </div>
                </div> --}}

                {{-- <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="d-flex">
                                <h3 class="card-title">Superadmin Income</h3>
                                <div class="ms-auto">
                                    <div id="revenue-filter-dropdown" class="dropdown">
                                        <a class="dropdown-toggle text-secondary" id="superadmin-revenue-dropdown"
                                            href="javascript::void(0)" data-bs-toggle="dropdown" aria-haspopup="true"
                                            aria-expanded="false"
                                            aria-label="Select year for revenue data">{{ $currentYear }}</a>
                                        <div class="dropdown-menu dropdown-menu-end"
                                            aria-labelledby="superadmin-revenue-dropdown" style="">
                                            @for ($year = $currentYear; $year >= $startYear; $year--)
                                                <a class="dropdown-item {{ $year == $currentYear ? 'active' : '' }}"
                                                    data-year="{{ $year }}" href="javascript:void(0)">
                                                    {{ $year }}
                                                </a>
                                            @endfor
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="chart-wrapper" style="position:relative;">
                                <div id="chart-loader"
                                    style="display:none;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);">
                                    <div class="spinner-border text-primary" role="status"></div>
                                </div>
                                <div id="superadmin-revenue-chart"></div>
                            </div>
                        </div>
                    </div>
                </div> --}}

            </div>
        </div>
    </div>
@endsection

{{-- @section('scripts')
    <script>
        // Admin Revenue
        document.addEventListener("DOMContentLoaded", function() {
            let adminChart;
            const loader = document.getElementById('admin-chart-loader');
            const chartDiv = document.getElementById('admin-revenue-chart');
            const currentYear = {{ now()->year }};

            function renderChart(data) {
                if (adminChart) {
                    adminChart.updateOptions({
                        series: data.series,
                        xaxis: {
                            categories: data.categories
                        }
                    });
                    return;
                }

                adminChart = new ApexCharts(chartDiv, {
                    chart: {
                        type: "line",
                        height: 340,
                        parentHeightOffset: 0,
                        toolbar: {
                            show: false
                        },
                    },
                    dataLabels: {
                        enabled: false
                    },
                    fill: {
                        opacity: 1,
                    },
                    stroke: {
                        width: 2,
                        lineCap: "round",
                        curve: "smooth"
                    },
                    series: data.series,
                    tooltip: {
                        theme: 'dark',
                    },
                    grid: {
                        padding: {
                            top: -20,
                            right: 0,
                            left: -4,
                            bottom: -4
                        },
                        strokeDashArray: 4
                    },
                    xaxis: {
                        categories: data.categories,
                        labels: {
                            rotate: -45,
                            padding: 0,
                        }
                    },
                    yaxis: {
                        labels: {
                            padding: 4
                        }
                    },
                    // colors: ['#1f77b4', '#ff7f0e', '#2ca02c', '#d62728'],
                    legend: {
                        show: true
                    }
                });

                adminChart.render();
            }

            function fetchChartData(year) {
                loader.style.display = 'block';
                fetch(`{{ route('admin.revenue.data') }}?year=${year}`)
                    .then(response => response.json())
                    .then(data => {
                        renderChart(data);
                        loader.style.display = 'none';
                    });
            }

            // Default Load
            fetchChartData(currentYear);

            // Filter Change
            document.querySelectorAll('#admin-revenue-filter-dropdown .dropdown-item').forEach(item => {
                item.addEventListener('click', function() {
                    document.querySelectorAll('#admin-revenue-filter-dropdown .dropdown-item')
                        .forEach(el => el.classList.remove('active'));
                    this.classList.add('active');
                    document.getElementById('admin-revenue-dropdown').textContent = this
                        .textContent;
                    fetchChartData(this.dataset.year);
                });
            });
        });

        // SuperAdmin Revenue
        document.addEventListener("DOMContentLoaded", function() {
            let chart;
            const currentYear = {{ now()->year }};

            function renderChart(labels, seriesData, viewType) {
                let formattedData = labels.map((date, index) => ({
                    x: date,
                    y: seriesData[index]
                }));

                let dateFormat = (viewType === 'days') ? 'dd MMM yyyy' : 'MMM yyyy';

                if (chart) {
                    chart.updateOptions({
                        series: [{
                            name: "Income",
                            data: formattedData
                        }],
                        xaxis: {
                            type: 'datetime',
                            labels: {
                                show: true,
                                rotate: -45,
                                datetimeFormatter: {
                                    day: 'dd MMM',
                                    month: 'MMM yyyy'
                                }
                            }
                        },
                        tooltip: {
                            x: {
                                format: dateFormat
                            }
                        }
                    });
                } else {
                    chart = new ApexCharts(document.querySelector("#superadmin-revenue-chart"), {
                        chart: {
                            type: "area",
                            fontFamily: 'inherit',
                            height: 340,
                            toolbar: {
                                show: false
                            },
                            animations: {
                                enabled: true
                            }
                        },
                        dataLabels: {
                            enabled: false
                        },
                        fill: {
                            opacity: 0.16,
                            type: 'solid'
                        },
                        stroke: {
                            width: 2,
                            curve: "smooth"
                        },
                        series: [{
                            name: "Income",
                            data: formattedData
                        }],
                        tooltip: {
                            theme: 'dark',
                            x: {
                                format: dateFormat
                            }
                        },
                        grid: {
                            strokeDashArray: 4
                        },
                        xaxis: {
                            tickAmount: labels.length,
                            labels: {
                                show: true,
                                rotate: -45,
                                datetimeFormatter: {
                                    day: 'dd MMM',
                                    month: 'MMM yyyy'
                                }
                            }
                        },
                        yaxis: {
                            labels: {
                                formatter: val => val
                            }
                        },
                        colors: ['#0000cc'],
                        legend: {
                            show: false
                        }
                    });
                    chart.render();
                }
            }

            function formatLabel(val, viewType) {
                let date = new Date(val);
                if (viewType === 'days') {
                    return date.toLocaleDateString('en-GB', {
                        day: '2-digit',
                        month: 'short'
                    }); // e.g., 21 Jun
                } else {
                    return date.toLocaleDateString('en-GB', {
                        month: 'short',
                        year: 'numeric'
                    }); // e.g., Jun 2024
                }
            }

            function tooltipFormat(val, viewType) {
                let date = new Date(val);
                return (viewType === 'days') ?
                    date.toLocaleDateString('en-GB', {
                        day: '2-digit',
                        month: 'short',
                        year: 'numeric'
                    }) :
                    date.toLocaleDateString('en-GB', {
                        month: 'long',
                        year: 'numeric'
                    });
            }

            function fetchData(year) {
                // Show loader
                document.getElementById('chart-loader').style.display = 'block';

                fetch(`{{ route('superadmin.revenue.data') }}?year=${year}`)
                    .then(response => response.json())
                    .then(data => {
                        renderChart(data.labels, data.data, data.view_type);
                    })
                    .finally(() => {
                        document.getElementById('chart-loader').style.display = 'none';
                    });
            }

            // Initial load
            fetchData(currentYear);

            // Dropdown click
            document.querySelectorAll('#revenue-filter-dropdown .dropdown-item').forEach(item => {
                item.addEventListener('click', function(e) {
                    e.preventDefault();
                    document.querySelectorAll('.dropdown-item').forEach(el => el
                        .classList.remove(
                            'active'));
                    this.classList.add('active');
                    document.getElementById('superadmin-revenue-dropdown').innerText =
                        this
                        .innerText;
                    fetchData(this.getAttribute('data-year'));
                });
            });
        });
    </script>
@endsection --}}