<x-app-layout>
    <x-slot name="header">
        <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
            <div>
                <p class="text-sm font-semibold uppercase tracking-wide text-blue-600 dark:text-blue-400">Admin Control</p>
                <h2 class="mt-1 text-2xl font-bold text-slate-950 dark:text-white">Admin Dashboard</h2>
            </div>

            <a href="{{ route('admin.users.index') }}" class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold text-white transition hover:bg-blue-700">
                Manage Users
            </a>
        </div>
    </x-slot>

    <div class="space-y-8">
        @if (session('success'))
            <div class="rounded-lg border border-blue-100 bg-blue-50 px-4 py-3 text-sm font-semibold text-blue-700 dark:border-blue-900/50 dark:bg-blue-950/40 dark:text-blue-300">
                {{ session('success') }}
            </div>
        @endif

        <section class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
            <div class="rounded-lg border border-blue-100 bg-white p-5 shadow-sm vt-card-motion dark:border-blue-900/50 dark:bg-slate-900">
                <p class="text-sm font-medium text-slate-500 dark:text-slate-400">Total Users</p>
                <p class="mt-3 text-3xl font-bold text-slate-950 dark:text-white">{{ $totalUsers }}</p>
            </div>

            <div class="rounded-lg border border-blue-100 bg-white p-5 shadow-sm vt-card-motion dark:border-blue-900/50 dark:bg-slate-900">
                <p class="text-sm font-medium text-slate-500 dark:text-slate-400">Active Users</p>
                <p class="mt-3 text-3xl font-bold text-blue-600 dark:text-blue-400">{{ $activeUsers }}</p>
            </div>

            <div class="rounded-lg border border-blue-100 bg-white p-5 shadow-sm vt-card-motion dark:border-blue-900/50 dark:bg-slate-900">
                <p class="text-sm font-medium text-slate-500 dark:text-slate-400">Blocked Users</p>
                <p class="mt-3 text-3xl font-bold text-red-500 dark:text-red-400">{{ $blockedUsers }}</p>
            </div>

            <div class="rounded-lg border border-blue-100 bg-white p-5 shadow-sm vt-card-motion dark:border-blue-900/50 dark:bg-slate-900">
                <p class="text-sm font-medium text-slate-500 dark:text-slate-400">Support Team</p>
                <p class="mt-3 text-3xl font-bold text-slate-950 dark:text-white">{{ $supportTeamUsers }}</p>
            </div>
        </section>

        <section class="space-y-6 rounded-lg border border-blue-100 bg-white p-6 shadow-sm vt-card-motion dark:border-blue-900/50 dark:bg-slate-900">
            <div class="flex flex-col gap-4 xl:flex-row xl:items-end xl:justify-between">
                <div>
                    <p class="text-sm font-semibold uppercase tracking-wide text-blue-600 dark:text-blue-300">Revenue Analytics</p>
                    <h3 class="mt-2 text-xl font-bold text-slate-950 dark:text-white">{{ $revenueAnalytics['range']['label'] }}</h3>
                    <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">
                        Revenue counts only verified successful payments. Failed and pending payments are ignored.
                    </p>
                </div>

                <form method="GET" action="{{ route('admin.dashboard') }}" class="grid gap-3 sm:grid-cols-2 xl:grid-cols-[10rem_10rem_10rem_auto]">
                    <select name="filter" class="rounded-lg border-slate-300 bg-white text-slate-900 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-100">
                        <option value="today" @selected(request('filter') === 'today')>Today</option>
                        <option value="month" @selected(request('filter', 'month') === 'month')>This Month</option>
                        <option value="year" @selected(request('filter') === 'year')>This Year</option>
                        <option value="custom" @selected(request('filter') === 'custom')>Custom</option>
                    </select>
                    <input type="date" name="start_date" value="{{ request('start_date', $revenueAnalytics['range']['start']->toDateString()) }}" class="rounded-lg border-slate-300 bg-white text-slate-900 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-100">
                    <input type="date" name="end_date" value="{{ request('end_date', $revenueAnalytics['range']['end']->toDateString()) }}" class="rounded-lg border-slate-300 bg-white text-slate-900 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-100">
                    <button type="submit" class="rounded-lg bg-blue-600 px-5 py-2 text-sm font-bold text-white transition hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400">Apply</button>
                </form>
            </div>

            <div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-5">
                @foreach ([
                    ['label' => 'Filtered Revenue', 'value' => $revenueAnalytics['revenue']['filtered']],
                    ['label' => 'Total Revenue', 'value' => $revenueAnalytics['revenue']['total']],
                    ['label' => 'Today Revenue', 'value' => $revenueAnalytics['revenue']['today']],
                    ['label' => 'Monthly Revenue', 'value' => $revenueAnalytics['revenue']['month']],
                    ['label' => 'Yearly Revenue', 'value' => $revenueAnalytics['revenue']['year']],
                ] as $item)
                    <div class="rounded-lg border border-blue-100 bg-blue-50/60 p-4 dark:border-blue-900/50 dark:bg-blue-950/20">
                        <p class="text-xs font-bold uppercase tracking-wide text-blue-700 dark:text-blue-300">{{ $item['label'] }}</p>
                        <p class="mt-2 text-2xl font-black text-slate-950 dark:text-white">{{ number_format((float) $item['value'], 2) }}</p>
                    </div>
                @endforeach
            </div>

            <div class="grid gap-4 lg:grid-cols-3">
                <div class="rounded-lg border border-blue-100 p-4 dark:border-blue-900/50">
                    <p class="text-sm font-bold text-slate-950 dark:text-white">Subscriptions</p>
                    <div class="mt-4 grid grid-cols-2 gap-3 text-sm">
                        <p class="text-slate-500 dark:text-slate-400">Active</p><p class="text-right font-bold text-emerald-600 dark:text-emerald-300">{{ $revenueAnalytics['subscriptions']['active'] }}</p>
                        <p class="text-slate-500 dark:text-slate-400">Expired</p><p class="text-right font-bold text-amber-600 dark:text-amber-300">{{ $revenueAnalytics['subscriptions']['expired'] }}</p>
                        <p class="text-slate-500 dark:text-slate-400">Trial</p><p class="text-right font-bold text-blue-600 dark:text-blue-300">{{ $revenueAnalytics['subscriptions']['trial'] }}</p>
                        <p class="text-slate-500 dark:text-slate-400">Cancelled</p><p class="text-right font-bold text-red-600 dark:text-red-400">{{ $revenueAnalytics['subscriptions']['cancelled'] }}</p>
                    </div>
                </div>

                <div class="rounded-lg border border-blue-100 p-4 dark:border-blue-900/50">
                    <p class="text-sm font-bold text-slate-950 dark:text-white">Payments</p>
                    <div class="mt-4 grid grid-cols-2 gap-3 text-sm">
                        <p class="text-slate-500 dark:text-slate-400">Successful</p><p class="text-right font-bold text-emerald-600 dark:text-emerald-300">{{ $revenueAnalytics['payments']['successful'] }}</p>
                        <p class="text-slate-500 dark:text-slate-400">Failed</p><p class="text-right font-bold text-red-600 dark:text-red-400">{{ $revenueAnalytics['payments']['failed'] }}</p>
                        <p class="text-slate-500 dark:text-slate-400">Pending</p><p class="text-right font-bold text-blue-600 dark:text-blue-300">{{ $revenueAnalytics['payments']['pending'] }}</p>
                    </div>
                </div>

                <div class="rounded-lg border border-blue-100 p-4 dark:border-blue-900/50">
                    <p class="text-sm font-bold text-slate-950 dark:text-white">Most Popular Plan</p>
                    @if ($revenueAnalytics['mostPopularPlan'])
                        <p class="mt-4 text-2xl font-black text-slate-950 dark:text-white">{{ $revenueAnalytics['mostPopularPlan']->name }}</p>
                        <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">{{ $revenueAnalytics['mostPopularPlan']->subscriptions_count }} subscriptions</p>
                    @else
                        <p class="mt-4 text-sm text-slate-500 dark:text-slate-400">No subscription data yet.</p>
                    @endif
                </div>
            </div>

            <div class="grid gap-6 xl:grid-cols-2">
                @foreach ([
                    ['id' => 'monthlyRevenueChart', 'title' => 'Monthly Revenue'],
                    ['id' => 'subscriberGrowthChart', 'title' => 'Subscriber Growth'],
                    ['id' => 'gatewayRevenueChart', 'title' => 'Payment Gateway Revenue'],
                    ['id' => 'planPopularityChart', 'title' => 'Subscription Plan Popularity'],
                ] as $chart)
                    <div class="rounded-lg border border-blue-100 p-5 dark:border-blue-900/50">
                        <h4 class="text-sm font-bold text-slate-950 dark:text-white">{{ $chart['title'] }}</h4>
                        <div class="mt-4 h-64">
                            <canvas id="{{ $chart['id'] }}"></canvas>
                        </div>
                    </div>
                @endforeach
            </div>

            <div class="grid gap-6 xl:grid-cols-2">
                <div class="rounded-lg border border-blue-100 p-5 dark:border-blue-900/50">
                    <h4 class="text-sm font-bold text-slate-950 dark:text-white">Latest Subscribers</h4>
                    <div class="mt-4 space-y-3">
                        @forelse ($revenueAnalytics['latestSubscribers'] as $subscription)
                            <div class="flex items-center justify-between gap-3 rounded-lg bg-blue-50/60 p-3 text-sm dark:bg-blue-950/20">
                                <span class="font-semibold text-slate-950 dark:text-white">{{ $subscription->user?->name ?? 'Deleted user' }}</span>
                                <span class="text-slate-500 dark:text-slate-400">{{ $subscription->plan?->name ?? 'Plan removed' }}</span>
                            </div>
                        @empty
                            <p class="text-sm text-slate-500 dark:text-slate-400">No subscribers yet.</p>
                        @endforelse
                    </div>
                </div>

                <div class="rounded-lg border border-blue-100 p-5 dark:border-blue-900/50">
                    <h4 class="text-sm font-bold text-slate-950 dark:text-white">Latest Payments</h4>
                    <div class="mt-4 space-y-3">
                        @forelse ($revenueAnalytics['latestPayments'] as $payment)
                            <div class="flex items-center justify-between gap-3 rounded-lg bg-blue-50/60 p-3 text-sm dark:bg-blue-950/20">
                                <span class="font-semibold text-slate-950 dark:text-white">{{ $payment->user?->name ?? 'Deleted user' }}</span>
                                <span class="font-bold {{ $payment->isSuccessful() ? 'text-emerald-600 dark:text-emerald-300' : 'text-slate-500 dark:text-slate-400' }}">{{ $payment->currency }} {{ number_format((float) $payment->amount, 2) }}</span>
                            </div>
                        @empty
                            <p class="text-sm text-slate-500 dark:text-slate-400">No payments yet.</p>
                        @endforelse
                    </div>
                </div>
            </div>
        </section>

        <section class="rounded-lg border border-blue-100 bg-white p-6 shadow-sm vt-card-motion dark:border-blue-900/50 dark:bg-slate-900">
            <div class="grid gap-6 lg:grid-cols-[1fr_18rem] lg:items-center">
                <div>
                    <div class="flex flex-wrap items-center gap-3">
                        <p class="text-sm font-semibold uppercase tracking-wide text-blue-600 dark:text-blue-300">Maintenance Mode</p>
                        <span class="rounded-full px-3 py-1 text-xs font-black uppercase tracking-wide {{ $maintenanceSettings['mode'] === 'on' ? 'bg-red-100 text-red-700 dark:bg-red-950 dark:text-red-200' : 'bg-emerald-100 text-emerald-700 dark:bg-emerald-950 dark:text-emerald-200' }}">
                            {{ $maintenanceSettings['mode'] === 'on' ? 'ON' : 'OFF' }}
                        </span>
                    </div>
                    <h3 class="mt-2 text-xl font-bold text-slate-950 dark:text-white">
                        {{ $maintenanceSettings['mode'] === 'on' ? 'Normal access is paused.' : 'Website access is open.' }}
                    </h3>
                    <p class="mt-3 text-sm leading-6 text-slate-600 dark:text-slate-300">
                        Use this control when you need to pause the public website while keeping admin access available.
                    </p>
                </div>

                <div class="grid gap-3">
                    <a href="{{ route('admin.maintenance.index') }}" class="rounded-lg border border-blue-100 px-4 py-2 text-center text-sm font-bold text-blue-700 transition hover:-translate-y-0.5 hover:bg-blue-50 dark:border-blue-900 dark:text-blue-300 dark:hover:bg-blue-950/60">
                        Open Settings
                    </a>

                    @if ($maintenanceSettings['mode'] === 'on')
                        <form method="POST" action="{{ route('admin.maintenance.disable') }}">
                            @csrf
                            @method('PATCH')
                            <button type="submit" class="w-full rounded-lg bg-emerald-600 px-4 py-2 text-sm font-bold text-white transition hover:-translate-y-0.5 hover:bg-emerald-700 dark:bg-emerald-500 dark:hover:bg-emerald-400">
                                Turn OFF
                            </button>
                        </form>
                    @else
                        <form method="POST" action="{{ route('admin.maintenance.enable') }}">
                            @csrf
                            @method('PATCH')
                            <input type="hidden" name="maintenance_title" value="{{ $maintenanceSettings['title'] }}">
                            <input type="hidden" name="maintenance_message" value="{{ $maintenanceSettings['message'] }}">
                            <button type="submit" class="w-full rounded-lg bg-red-600 px-4 py-2 text-sm font-bold text-white transition hover:-translate-y-0.5 hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-400">
                                Turn ON
                            </button>
                        </form>
                    @endif
                </div>
            </div>
        </section>

        <section class="rounded-lg border border-blue-100 bg-white p-6 shadow-sm vt-card-motion dark:border-blue-900/50 dark:bg-slate-900">
            <div class="grid gap-6 xl:grid-cols-[1fr_24rem]">
                <div>
                    <div class="flex flex-wrap items-center gap-3">
                        <p class="text-sm font-semibold uppercase tracking-wide text-blue-600 dark:text-blue-300">Payment Mode</p>
                        <span class="rounded-full px-3 py-1 text-xs font-black uppercase tracking-wide {{ $paymentSettings['payment_mode_enabled'] === 'on' ? 'bg-red-100 text-red-700 dark:bg-red-950 dark:text-red-200' : 'bg-emerald-100 text-emerald-700 dark:bg-emerald-950 dark:text-emerald-200' }}">
                            {{ $paymentSettings['payment_mode_enabled'] === 'on' ? 'ON' : 'OFF' }}
                        </span>
                    </div>
                    <h3 class="mt-2 text-xl font-bold text-slate-950 dark:text-white">
                        {{ $paymentSettings['payment_mode_enabled'] === 'on' ? 'Subscriptions are required for premium routes.' : 'All registered users can access the app.' }}
                    </h3>
                    <p class="mt-3 text-sm leading-6 text-slate-600 dark:text-slate-300">
                        Control subscription enforcement without connecting a real payment provider yet. Admin pages are never blocked by payment mode.
                    </p>

                    <form method="POST" action="{{ route('admin.payment-mode.update') }}" class="mt-6 grid gap-4 md:grid-cols-3">
                        @csrf
                        @method('PATCH')

                        <input type="hidden" name="payment_mode_enabled" value="{{ $paymentSettings['payment_mode_enabled'] }}">

                        <div>
                            <label for="free_trial_days" class="text-sm font-semibold text-slate-700 dark:text-slate-200">Free Trial Days</label>
                            <input id="free_trial_days" type="number" min="0" max="365" name="free_trial_days" value="{{ old('free_trial_days', $paymentSettings['free_trial_days']) }}" class="mt-1 block w-full rounded-lg border-blue-100 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-blue-900 dark:bg-slate-950 dark:text-slate-100">
                        </div>

                        <div>
                            <label for="subscription_grace_days" class="text-sm font-semibold text-slate-700 dark:text-slate-200">Grace Period Days</label>
                            <input id="subscription_grace_days" type="number" min="0" max="365" name="subscription_grace_days" value="{{ old('subscription_grace_days', $paymentSettings['subscription_grace_days']) }}" class="mt-1 block w-full rounded-lg border-blue-100 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-blue-900 dark:bg-slate-950 dark:text-slate-100">
                        </div>

                        <div class="flex items-end">
                            <label class="inline-flex items-center gap-2 rounded-lg border border-blue-100 px-4 py-2.5 text-sm font-semibold text-slate-700 dark:border-blue-900 dark:text-slate-200">
                                <input type="checkbox" name="allow_free_access" value="1" @checked($paymentSettings['allow_free_access'] === 'on') class="rounded border-blue-200 text-blue-600 focus:ring-blue-500">
                                Allow free users
                            </label>
                        </div>

                        <div class="md:col-span-3">
                            <button type="submit" class="rounded-lg border border-blue-100 px-4 py-2 text-sm font-bold text-blue-700 transition hover:-translate-y-0.5 hover:bg-blue-50 dark:border-blue-900 dark:text-blue-300 dark:hover:bg-blue-950/60">
                                Save Payment Settings
                            </button>
                        </div>
                    </form>
                </div>

                <div class="grid gap-3 content-start">
                    @if ($paymentSettings['payment_mode_enabled'] === 'on')
                        <form method="POST" action="{{ route('admin.payment-mode.disable') }}">
                            @csrf
                            @method('PATCH')
                            <button type="submit" class="w-full rounded-lg bg-emerald-600 px-4 py-2 text-sm font-bold text-white transition hover:-translate-y-0.5 hover:bg-emerald-700 dark:bg-emerald-500 dark:hover:bg-emerald-400">
                                Turn Payment OFF
                            </button>
                        </form>
                    @else
                        <form method="POST" action="{{ route('admin.payment-mode.enable') }}">
                            @csrf
                            @method('PATCH')
                            <button type="submit" class="w-full rounded-lg bg-red-600 px-4 py-2 text-sm font-bold text-white transition hover:-translate-y-0.5 hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-400">
                                Turn Payment ON
                            </button>
                        </form>
                    @endif

                    <a href="{{ route('admin.subscription-plans.index') }}" class="rounded-lg border border-blue-100 px-4 py-2 text-center text-sm font-bold text-blue-700 transition hover:-translate-y-0.5 hover:bg-blue-50 dark:border-blue-900 dark:text-blue-300 dark:hover:bg-blue-950/60">
                        Manage Plans
                    </a>

                    <a href="{{ route('pricing') }}" class="rounded-lg border border-blue-100 px-4 py-2 text-center text-sm font-bold text-blue-700 transition hover:-translate-y-0.5 hover:bg-blue-50 dark:border-blue-900 dark:text-blue-300 dark:hover:bg-blue-950/60">
                        View Pricing
                    </a>
                </div>
            </div>
        </section>

        <section class="rounded-lg border border-blue-100 bg-white shadow-sm vt-card-motion dark:border-blue-900/50 dark:bg-slate-900">
            <div class="border-b border-blue-100 p-6 dark:border-blue-900/50">
                <h3 class="text-lg font-bold text-slate-950 dark:text-white">Latest Registered Users</h3>
                <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">The newest accounts created on ViZuTrade.</p>
            </div>

            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-blue-100 dark:divide-blue-900/50">
                    <thead class="bg-blue-50 dark:bg-blue-950/40">
                        <tr>
                            <th class="px-4 py-3 text-left text-xs font-bold uppercase tracking-wide text-blue-700 dark:text-blue-300">Name</th>
                            <th class="px-4 py-3 text-left text-xs font-bold uppercase tracking-wide text-blue-700 dark:text-blue-300">Email</th>
                            <th class="px-4 py-3 text-left text-xs font-bold uppercase tracking-wide text-blue-700 dark:text-blue-300">Role</th>
                            <th class="px-4 py-3 text-left text-xs font-bold uppercase tracking-wide text-blue-700 dark:text-blue-300">Status</th>
                            <th class="px-4 py-3 text-right text-xs font-bold uppercase tracking-wide text-blue-700 dark:text-blue-300">Action</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-blue-50 bg-white dark:divide-blue-900/40 dark:bg-slate-900">
                        @foreach ($latestUsers as $user)
                            <tr>
                                <td class="px-4 py-4 text-sm font-semibold text-slate-900 dark:text-slate-100">{{ $user->name }}</td>
                                <td class="px-4 py-4 text-sm text-slate-600 dark:text-slate-300">{{ $user->email }}</td>
                                <td class="px-4 py-4 text-sm capitalize text-slate-600 dark:text-slate-300">{{ $user->role }}</td>
                                <td class="px-4 py-4 text-sm capitalize {{ $user->status === 'active' ? 'text-blue-600 dark:text-blue-400' : 'text-red-500 dark:text-red-400' }}">{{ $user->status }}</td>
                                <td class="px-4 py-4 text-right text-sm">
                                    <a href="{{ route('admin.users.show', $user) }}" class="font-semibold text-blue-700 hover:text-blue-900 dark:text-blue-300 dark:hover:text-blue-200">View</a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </section>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const charts = @json($revenueAnalytics['charts']);
            const chartInstances = [];

            function hasData(data) {
                return Array.isArray(data) && data.some((value) => Number(value) > 0);
            }

            function makeChart(id, config) {
                const canvas = document.getElementById(id);

                if (!canvas || !hasData(config.data.datasets[0].data)) {
                    if (canvas) {
                        canvas.parentElement.innerHTML = '<div class="flex h-full items-center justify-center rounded-lg border border-dashed border-blue-200 text-sm font-semibold text-slate-500 dark:border-blue-900 dark:text-slate-400">No data yet</div>';
                    }

                    return;
                }

                chartInstances.push(new window.Chart(canvas, config));
            }

            function renderRevenueCharts() {
                chartInstances.splice(0).forEach((chart) => chart.destroy());

                const isDark = document.documentElement.classList.contains('dark');
                const textColor = isDark ? '#cbd5e1' : '#475569';
                const gridColor = isDark ? '#1e3a8a' : '#dbeafe';

                const baseOptions = {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { labels: { color: textColor } },
                    },
                    scales: {
                        x: { ticks: { color: textColor }, grid: { color: gridColor } },
                        y: { ticks: { color: textColor }, grid: { color: gridColor }, beginAtZero: true },
                    },
                };

                makeChart('monthlyRevenueChart', {
                    type: 'bar',
                    data: { labels: charts.monthlyRevenue.labels, datasets: [{ label: 'Revenue', data: charts.monthlyRevenue.data, backgroundColor: '#2563eb' }] },
                    options: baseOptions,
                });

                makeChart('subscriberGrowthChart', {
                    type: 'line',
                    data: { labels: charts.subscriberGrowth.labels, datasets: [{ label: 'Subscribers', data: charts.subscriberGrowth.data, borderColor: '#0ea5e9', backgroundColor: 'rgba(14,165,233,0.15)', tension: 0.35, fill: true }] },
                    options: baseOptions,
                });

                makeChart('gatewayRevenueChart', {
                    type: 'doughnut',
                    data: { labels: charts.gatewayRevenue.labels, datasets: [{ label: 'Revenue', data: charts.gatewayRevenue.data, backgroundColor: ['#2563eb', '#0ea5e9', '#22c55e', '#f59e0b'] }] },
                    options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { labels: { color: textColor } } } },
                });

                makeChart('planPopularityChart', {
                    type: 'bar',
                    data: { labels: charts.planPopularity.labels, datasets: [{ label: 'Subscriptions', data: charts.planPopularity.data, backgroundColor: '#1d4ed8' }] },
                    options: baseOptions,
                });
            }

            renderRevenueCharts();
            window.addEventListener('theme-changed', renderRevenueCharts);
        });
    </script>
</x-app-layout>
