@if (is_admin())
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6"
     x-data
     :class="(() => { const c = $el.closest('.dashboard-container'); return c && (!c.className.includes('lg:col-span-') || c.classList.contains('lg:col-span-12')) ? 'lg:grid-cols-4' : 'sm:grid-cols-2'; })()">
    <!-- Active Subscriptions -->
    <x-dashboard.stats-card title="{{ t('total_subscriptions') }}" :value="$activeSubscriptions"
        subtitle="Since Last Month: {{ $activeSubscriptionsChange >= 0 ? '+' : '' }}{{ $activeSubscriptionsChange }}"
        color="indigo" :bg="true">
        <x-slot:icon>
            <x-heroicon-o-shield-check class="h-6 w-6 text-primary-600 dark:text-primary-400" />
        </x-slot:icon>
    </x-dashboard.stats-card>

    <!-- Total Earnings -->
    <x-dashboard.stats-card title="{{ t('total_earnings') }}" :value="get_base_currency()->format($totalEarnings)"
        subtitle="Since Last Month: {{ $totalEarningsChange >= 0 ? '+' : '' }}{{ get_base_currency()->format($totalEarningsChange) }}"
        color="emerald" :bg="true">
        <x-slot:icon>
            <x-heroicon-o-currency-dollar class="h-6 w-6 text-emerald-600 dark:text-emerald-400" />
        </x-slot:icon>
    </x-dashboard.stats-card>

    <!-- Total Clients -->
    <x-dashboard.stats-card title="{{ t('total_clients') }}" :value="$totalClients"
        subtitle="Since Last Month: {{ $totalClientsChange >= 0 ? '+' : '' }}{{ $totalClientsChange }}"
        color="blue" :bg="true">
        <x-slot:icon>
            <x-heroicon-o-user-group class="h-6 w-6 text-info-600 dark:text-info-400" />
        </x-slot:icon>
    </x-dashboard.stats-card>

    <!-- Total Campaigns -->
    <x-dashboard.stats-card title="{{ t('total_campaigns') }}" :value="$totalCampaigns"
        subtitle="Since Last Month: {{ $totalCampaignsChange >= 0 ? '+' : '' }}{{ $totalCampaignsChange }}"
        color="purple" :bg="true">
        <x-slot:icon>
            <x-heroicon-o-megaphone class="h-6 w-6 text-purple-600 dark:text-purple-400" />
        </x-slot:icon>
    </x-dashboard.stats-card>
</div>
@else
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6"
     x-data
     :class="(() => { const c = $el.closest('.dashboard-container'); return c && (!c.className.includes('lg:col-span-') || c.classList.contains('lg:col-span-12')) ? 'lg:grid-cols-3' : 'sm:grid-cols-2'; })()">
    <!-- Active Subscriptions -->
    <x-dashboard.stats-card title="{{ t('total_subscriptions') }}" :value="$activeSubscriptions"
        subtitle="Since Last Month: {{ $activeSubscriptionsChange >= 0 ? '+' : '' }}{{ $activeSubscriptionsChange }}"
        color="indigo" :bg="true">
        <x-slot:icon>
            <x-heroicon-o-shield-check class="h-6 w-6 text-primary-600 dark:text-primary-400" />
        </x-slot:icon>
    </x-dashboard.stats-card>

    <!-- Total Clients -->
    <x-dashboard.stats-card title="{{ t('total_clients') }}" :value="$totalClients"
        subtitle="Since Last Month: {{ $totalClientsChange >= 0 ? '+' : '' }}{{ $totalClientsChange }}"
        color="blue" :bg="true">
        <x-slot:icon>
            <x-heroicon-o-user-group class="h-6 w-6 text-info-600 dark:text-info-400" />
        </x-slot:icon>
    </x-dashboard.stats-card>

    <!-- Total Campaigns -->
    <x-dashboard.stats-card title="{{ t('total_campaigns') }}" :value="$totalCampaigns"
        subtitle="Since Last Month: {{ $totalCampaignsChange >= 0 ? '+' : '' }}{{ $totalCampaignsChange }}"
        color="purple" :bg="true">
        <x-slot:icon>
            <x-heroicon-o-megaphone class="h-6 w-6 text-purple-600 dark:text-purple-400" />
        </x-slot:icon>
    </x-dashboard.stats-card>
</div>
@endif