<x-admin-layout>
    <x-slot name="header">
        <div>
            <h2 class="font-semibold text-lg text-gray-800 dark:text-gray-200 leading-tight">
                <i class="fas fa-crown mr-2 text-yellow-500"></i>Panou Administrare
            </h2>
            <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                <a href="{{ route('dashboard') }}" class="text-blue-600 dark:text-blue-400 hover:underline">Dashboard</a>
                <span class="mx-2">/</span>
                <span>Admin</span>
            </p>
        </div>
    </x-slot>

    <div class="py-6">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="space-y-6">
                <!-- Quick Stats -->
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                <!-- Total Users -->
                <div class="bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg shadow-lg p-6 text-white relative overflow-hidden">
                    @if($comparison['users_change'] != 0)
                    <div class="absolute top-2 right-2 px-2 py-1 rounded-full text-xs font-semibold {{ $comparison['users_change'] > 0 ? 'bg-green-400/30 text-green-100' : 'bg-red-400/30 text-red-100' }}">
                        <i class="fas fa-{{ $comparison['users_change'] > 0 ? 'arrow-up' : 'arrow-down' }} mr-1"></i>
                        {{ abs($comparison['users_change']) }}%
                    </div>
                    @endif
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-blue-100 text-sm font-medium">Utilizatori Totali</p>
                            <p class="text-3xl font-bold mt-2">{{ $stats['total_users'] }}</p>
                            <p class="text-blue-100 text-xs mt-1">
                                <i class="fas fa-user-plus mr-1"></i>
                                {{ $stats['new_users_this_month'] }} noi luna aceasta
                            </p>
                        </div>
                        <div class="bg-white/20 p-4 rounded-full">
                            <i class="fas fa-users text-3xl"></i>
                        </div>
                    </div>
                </div>

                <!-- Total Plans -->
                <div class="bg-gradient-to-br from-purple-500 to-purple-600 rounded-lg shadow-lg p-6 text-white">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-purple-100 text-sm font-medium">Pachete Active</p>
                            <p class="text-3xl font-bold mt-2">{{ $stats['total_plans'] }}</p>
                            <p class="text-purple-100 text-xs mt-1">
                                <i class="fas fa-check-circle mr-1"></i>
                                Planuri abonament
                            </p>
                        </div>
                        <div class="bg-white/20 p-4 rounded-full">
                            <i class="fas fa-box text-3xl"></i>
                        </div>
                    </div>
                </div>

                <!-- DNS Zones -->
                <div class="bg-gradient-to-br from-green-500 to-green-600 rounded-lg shadow-lg p-6 text-white relative overflow-hidden">
                    @if($comparison['zones_change'] != 0)
                    <div class="absolute top-2 right-2 px-2 py-1 rounded-full text-xs font-semibold {{ $comparison['zones_change'] > 0 ? 'bg-green-400/30 text-green-100' : 'bg-red-400/30 text-red-100' }}">
                        <i class="fas fa-{{ $comparison['zones_change'] > 0 ? 'arrow-up' : 'arrow-down' }} mr-1"></i>
                        {{ abs($comparison['zones_change']) }}%
                    </div>
                    @endif
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-green-100 text-sm font-medium">Zone DNS</p>
                            <p class="text-3xl font-bold mt-2">{{ $stats['total_dns_zones'] }}</p>
                            <p class="text-green-100 text-xs mt-1">
                                <i class="fas fa-globe mr-1"></i>
                                Domenii gestionate
                            </p>
                        </div>
                        <div class="bg-white/20 p-4 rounded-full">
                            <i class="fas fa-globe text-3xl"></i>
                        </div>
                    </div>
                </div>

                <!-- DNS Records -->
                <div class="bg-gradient-to-br from-orange-500 to-orange-600 rounded-lg shadow-lg p-6 text-white relative overflow-hidden">
                    @if($comparison['records_change'] != 0)
                    <div class="absolute top-2 right-2 px-2 py-1 rounded-full text-xs font-semibold {{ $comparison['records_change'] > 0 ? 'bg-green-400/30 text-green-100' : 'bg-red-400/30 text-red-100' }}">
                        <i class="fas fa-{{ $comparison['records_change'] > 0 ? 'arrow-up' : 'arrow-down' }} mr-1"></i>
                        {{ abs($comparison['records_change']) }}%
                    </div>
                    @endif
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-orange-100 text-sm font-medium">Înregistrări DNS</p>
                            <p class="text-3xl font-bold mt-2">{{ $stats['total_dns_records'] }}</p>
                            <p class="text-orange-100 text-xs mt-1">
                                <i class="fas fa-network-wired mr-1"></i>
                                Records totale
                            </p>
                        </div>
                        <div class="bg-white/20 p-4 rounded-full">
                            <i class="fas fa-network-wired text-3xl"></i>
                        </div>
                    </div>
                </div>
            </div>

            <!-- DNS Alerts & Suspensions -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <!-- Suspended Zones -->
                <div class="bg-red-500 rounded-lg shadow-lg p-6 text-white">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-red-100 text-sm font-medium">Zone Suspendate</p>
                            <p class="text-3xl font-bold mt-2">{{ $stats['suspended_zones'] }}</p>
                            <p class="text-red-100 text-xs mt-1">
                                <i class="fas fa-ban mr-1"></i>
                                Inactivate automat
                            </p>
                        </div>
                        <div class="bg-white/20 p-4 rounded-full">
                            <i class="fas fa-exclamation-triangle text-3xl"></i>
                        </div>
                    </div>
                </div>

                <!-- Active Alerts -->
                <div class="bg-yellow-500 rounded-lg shadow-lg p-6 text-white">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-yellow-100 text-sm font-medium">Alerte Active</p>
                            <p class="text-3xl font-bold mt-2">{{ $stats['zones_with_alerts'] }}</p>
                            <p class="text-yellow-100 text-xs mt-1">
                                <i class="fas fa-bell mr-1"></i>
                                Zone cu probleme NS
                            </p>
                        </div>
                        <div class="bg-white/20 p-4 rounded-full">
                            <i class="fas fa-bell text-3xl"></i>
                        </div>
                    </div>
                </div>

                <!-- Ready for Reactivation -->
                <div class="bg-cyan-500 rounded-lg shadow-lg p-6 text-white">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-cyan-100 text-sm font-medium">Gata Reactivare</p>
                            <p class="text-3xl font-bold mt-2">{{ $stats['zones_ready_reactivation'] }}</p>
                            <p class="text-cyan-100 text-xs mt-1">
                                <i class="fas fa-check-circle mr-1"></i>
                                NS configurate corect
                            </p>
                        </div>
                        <div class="bg-white/20 p-4 rounded-full">
                            <i class="fas fa-sync-alt text-3xl"></i>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Cloudflare & DynDNS Stats -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Cloudflare Stats Widget -->
                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
                    <div class="bg-gradient-to-r from-orange-400 to-orange-500 px-6 py-4">
                        <div class="flex items-center justify-between">
                            <h3 class="text-lg font-semibold text-white flex items-center">
                                <i class="fab fa-cloudflare text-2xl mr-3"></i>
                                Cloudflare
                            </h3>
                            <a href="{{ route('cloudflare.index') }}" class="text-white/80 hover:text-white text-sm">
                                <i class="fas fa-external-link-alt"></i>
                            </a>
                        </div>
                    </div>
                    <div class="p-4">
                        <!-- Toate statisticile pe un singur rând -->
                        <div class="grid grid-cols-4 gap-3">
                            <div class="text-center p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                                <p class="text-2xl font-bold text-orange-500">{{ $cloudflareStats['total_zones'] }}</p>
                                <p class="text-xs text-gray-600 dark:text-gray-400">Zone CF</p>
                            </div>
                            <div class="text-center p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                                <p class="text-2xl font-bold text-orange-500">{{ $cloudflareStats['total_proxied_records'] }}</p>
                                <p class="text-xs text-gray-600 dark:text-gray-400">Records Proxied</p>
                            </div>
                            <div class="text-center p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                                <p class="text-2xl font-bold text-orange-500">{{ $cloudflareStats['credentials_count'] }}</p>
                                <p class="text-xs text-gray-600 dark:text-gray-400">Credentials</p>
                            </div>
                            <div class="text-center p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                                <p class="text-2xl font-bold {{ $cloudflareStats['sync_errors'] > 0 ? 'text-red-500' : 'text-green-500' }}">
                                    {{ $cloudflareStats['sync_errors'] }}
                                </p>
                                <p class="text-xs text-gray-600 dark:text-gray-400">Erori Azi</p>
                            </div>
                        </div>
                        @if($cloudflareStats['last_sync'])
                        <div class="mt-3 pt-3 border-t border-gray-200 dark:border-gray-700 text-sm text-gray-600 dark:text-gray-400">
                            <i class="fas fa-sync mr-2"></i>
                            Ultima sincronizare: {{ $cloudflareStats['last_sync']->diffForHumans() }}
                        </div>
                        @endif
                    </div>
                </div>

                <!-- DynDNS Stats Widget -->
                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
                    <div class="bg-gradient-to-r from-teal-500 to-teal-600 px-6 py-4">
                        <div class="flex items-center justify-between">
                            <h3 class="text-lg font-semibold text-white flex items-center">
                                <i class="fas fa-network-wired text-2xl mr-3"></i>
                                DynDNS
                            </h3>
                            <a href="{{ route('dyndns.index') }}" class="text-white/80 hover:text-white text-sm">
                                <i class="fas fa-external-link-alt"></i>
                            </a>
                        </div>
                    </div>
                    <div class="p-4">
                        <!-- Toate statisticile pe un singur rând -->
                        <div class="grid grid-cols-4 gap-3">
                            <div class="text-center p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                                <p class="text-2xl font-bold text-teal-500">{{ $dyndnsStats['active_clients'] }}</p>
                                <p class="text-xs text-gray-600 dark:text-gray-400">Clienți Activi</p>
                            </div>
                            <div class="text-center p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                                <p class="text-2xl font-bold text-teal-500">{{ $dyndnsStats['total_updates_today'] }}</p>
                                <p class="text-xs text-gray-600 dark:text-gray-400">Update-uri Azi</p>
                            </div>
                            <div class="text-center p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                                <p class="text-2xl font-bold text-teal-500">{{ $dyndnsStats['total_clients'] ?? 0 }}</p>
                                <p class="text-xs text-gray-600 dark:text-gray-400">Total Clienți</p>
                            </div>
                            <div class="text-center p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                                <p class="text-2xl font-bold text-teal-500">+{{ $dyndnsStats['clients_last_month'] }}</p>
                                <p class="text-xs text-gray-600 dark:text-gray-400">Luna Trecută</p>
                            </div>
                        </div>
                        @if($dyndnsStats['last_update'])
                        <div class="mt-3 pt-3 border-t border-gray-200 dark:border-gray-700 text-sm text-gray-600 dark:text-gray-400">
                            <i class="fas fa-clock mr-2"></i>
                            Ultimul update: {{ $dyndnsStats['last_update']->diffForHumans() }}
                        </div>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Quick Actions -->
            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">
                        <i class="fas fa-bolt mr-2 text-yellow-500"></i>
                        Acțiuni Rapide
                    </h3>
                    <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                        <a href="{{ route('admin.users.create') }}" class="flex items-center p-4 bg-blue-50 dark:bg-blue-900/30 hover:bg-blue-100 dark:hover:bg-blue-900/50 rounded-lg transition group">
                            <div class="bg-blue-600 p-3 rounded-lg group-hover:scale-110 transition">
                                <i class="fas fa-user-plus text-white text-xl"></i>
                            </div>
                            <div class="ml-4">
                                <h4 class="font-semibold text-gray-900 dark:text-gray-100">Adaugă Utilizator</h4>
                                <p class="text-sm text-gray-600 dark:text-gray-400">Creează cont nou</p>
                            </div>
                        </a>

                        <a href="{{ route('admin.plans.create') }}" class="flex items-center p-4 bg-purple-50 dark:bg-purple-900/30 hover:bg-purple-100 dark:hover:bg-purple-900/50 rounded-lg transition group">
                            <div class="bg-purple-600 p-3 rounded-lg group-hover:scale-110 transition">
                                <i class="fas fa-box text-white text-xl"></i>
                            </div>
                            <div class="ml-4">
                                <h4 class="font-semibold text-gray-900 dark:text-gray-100">Adaugă Pachet</h4>
                                <p class="text-sm text-gray-600 dark:text-gray-400">Nou plan abonament</p>
                            </div>
                        </a>

                        <a href="{{ route('admin.reseller-plans.create') }}" class="flex items-center p-4 bg-indigo-50 dark:bg-indigo-900/30 hover:bg-indigo-100 dark:hover:bg-indigo-900/50 rounded-lg transition group">
                            <div class="bg-indigo-600 p-3 rounded-lg group-hover:scale-110 transition">
                                <i class="fas fa-store text-white text-xl"></i>
                            </div>
                            <div class="ml-4">
                                <h4 class="font-semibold text-gray-900 dark:text-gray-100">Pachet Reseller</h4>
                                <p class="text-sm text-gray-600 dark:text-gray-400">Nou plan reseller</p>
                            </div>
                        </a>

                        <a href="{{ route('admin.users.index') }}" class="flex items-center p-4 bg-green-50 dark:bg-green-900/30 hover:bg-green-100 dark:hover:bg-green-900/50 rounded-lg transition group">
                            <div class="bg-green-600 p-3 rounded-lg group-hover:scale-110 transition">
                                <i class="fas fa-users text-white text-xl"></i>
                            </div>
                            <div class="ml-4">
                                <h4 class="font-semibold text-gray-900 dark:text-gray-100">Gestionează Utilizatori</h4>
                                <p class="text-sm text-gray-600 dark:text-gray-400">Listă completă</p>
                            </div>
                        </a>

                        <a href="{{ route('admin.nameservers.index') }}" class="flex items-center p-4 bg-cyan-50 dark:bg-cyan-900/30 hover:bg-cyan-100 dark:hover:bg-cyan-900/50 rounded-lg transition group">
                            <div class="bg-cyan-600 p-3 rounded-lg group-hover:scale-110 transition">
                                <i class="fas fa-server text-white text-xl"></i>
                            </div>
                            <div class="ml-4">
                                <h4 class="font-semibold text-gray-900 dark:text-gray-100">Servere NS</h4>
                                <p class="text-sm text-gray-600 dark:text-gray-400">Name Servers</p>
                            </div>
                        </a>

                        <a href="{{ route('admin.powerdns-templates.index') }}" class="flex items-center p-4 bg-pink-50 dark:bg-pink-900/30 hover:bg-pink-100 dark:hover:bg-pink-900/50 rounded-lg transition group">
                            <div class="bg-pink-600 p-3 rounded-lg group-hover:scale-110 transition">
                                <i class="fas fa-file-code text-white text-xl"></i>
                            </div>
                            <div class="ml-4">
                                <h4 class="font-semibold text-gray-900 dark:text-gray-100">Template-uri DNS</h4>
                                <p class="text-sm text-gray-600 dark:text-gray-400">Șabloane zone</p>
                            </div>
                        </a>

                        <a href="{{ route('admin.backups.index') }}" class="flex items-center p-4 bg-orange-50 dark:bg-orange-900/30 hover:bg-orange-100 dark:hover:bg-orange-900/50 rounded-lg transition group">
                            <div class="bg-orange-600 p-3 rounded-lg group-hover:scale-110 transition">
                                <i class="fas fa-database text-white text-xl"></i>
                            </div>
                            <div class="ml-4">
                                <h4 class="font-semibold text-gray-900 dark:text-gray-100">Backup & Restore</h4>
                                <p class="text-sm text-gray-600 dark:text-gray-400">Gestionare backup-uri</p>
                            </div>
                        </a>

                        <a href="{{ route('admin.settings.index') }}" class="flex items-center p-4 bg-gray-50 dark:bg-gray-700/30 hover:bg-gray-100 dark:hover:bg-gray-700/50 rounded-lg transition group">
                            <div class="bg-gray-600 p-3 rounded-lg group-hover:scale-110 transition">
                                <i class="fas fa-cog text-white text-xl"></i>
                            </div>
                            <div class="ml-4">
                                <h4 class="font-semibold text-gray-900 dark:text-gray-100">Setări Sistem</h4>
                                <p class="text-sm text-gray-600 dark:text-gray-400">Configurare</p>
                            </div>
                        </a>
                    </div>
                </div>
            </div>

            <!-- Name Servers Widget -->
            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">
                            <i class="fas fa-server mr-2 text-cyan-500"></i>
                            Servere Name Server
                        </h3>
                        <a href="{{ route('admin.nameservers.index') }}" class="text-sm text-cyan-600 hover:text-cyan-800 dark:text-cyan-400 dark:hover:text-cyan-300">
                            Vezi toate <i class="fas fa-arrow-right ml-1"></i>
                        </a>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                        <div class="bg-gradient-to-br from-cyan-50 to-cyan-100 dark:from-cyan-900/30 dark:to-cyan-800/30 rounded-lg p-4">
                            <div class="flex items-center justify-between">
                                <div>
                                    <p class="text-sm text-cyan-700 dark:text-cyan-300 font-medium">Total Servere</p>
                                    <p class="text-3xl font-bold text-cyan-900 dark:text-cyan-100 mt-1">{{ $nameServerStats['total'] }}</p>
                                </div>
                                <i class="fas fa-server text-3xl text-cyan-600 dark:text-cyan-400"></i>
                            </div>
                        </div>
                        <div class="bg-gradient-to-br from-green-50 to-green-100 dark:from-green-900/30 dark:to-green-800/30 rounded-lg p-4">
                            <div class="flex items-center justify-between">
                                <div>
                                    <p class="text-sm text-green-700 dark:text-green-300 font-medium">Online</p>
                                    <p class="text-3xl font-bold text-green-900 dark:text-green-100 mt-1">{{ $nameServerStats['online'] }}</p>
                                </div>
                                <i class="fas fa-check-circle text-3xl text-green-600 dark:text-green-400"></i>
                            </div>
                        </div>
                        <div class="bg-gradient-to-br from-red-50 to-red-100 dark:from-red-900/30 dark:to-red-800/30 rounded-lg p-4">
                            <div class="flex items-center justify-between">
                                <div>
                                    <p class="text-sm text-red-700 dark:text-red-300 font-medium">Offline</p>
                                    <p class="text-3xl font-bold text-red-900 dark:text-red-100 mt-1">{{ $nameServerStats['offline'] }}</p>
                                </div>
                                <i class="fas fa-times-circle text-3xl text-red-600 dark:text-red-400"></i>
                            </div>
                        </div>
                        <div class="bg-gradient-to-br from-purple-50 to-purple-100 dark:from-purple-900/30 dark:to-purple-800/30 rounded-lg p-4">
                            <div class="flex items-center justify-between">
                                <div>
                                    <p class="text-sm text-purple-700 dark:text-purple-300 font-medium">Total Zone</p>
                                    <p class="text-3xl font-bold text-purple-900 dark:text-purple-100 mt-1">{{ number_format($nameServerStats['total_zones']) }}</p>
                                </div>
                                <i class="fas fa-database text-3xl text-purple-600 dark:text-purple-400"></i>
                            </div>
                        </div>
                    </div>
                    @if($nameServerStats['avg_response'] > 0)
                        <div class="mt-4 p-3 bg-blue-50 dark:bg-blue-900/30 rounded-lg">
                            <div class="flex items-center justify-between">
                                <span class="text-sm text-blue-700 dark:text-blue-300">
                                    <i class="fas fa-tachometer-alt mr-2"></i>
                                    Avg Response Time
                                </span>
                                <span class="text-lg font-bold text-blue-900 dark:text-blue-100">{{ round($nameServerStats['avg_response']) }}ms</span>
                            </div>
                        </div>
                    @endif
                </div>
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <!-- Plan Statistics -->
                <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
                    <div class="p-6">
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">
                            <i class="fas fa-chart-pie mr-2 text-purple-500"></i>
                            Distribuție Pachete
                        </h3>
                        <div class="space-y-4">
                            @foreach($planStats as $plan)
                                <div>
                                    <div class="flex items-center justify-between mb-2">
                                        <div class="flex items-center">
                                            <span class="font-semibold text-gray-900 dark:text-gray-100">{{ $plan->name }}</span>
                                            @if($plan->price > 0)
                                                <span class="ml-2 text-xs text-gray-500 dark:text-gray-400">({{ number_format($plan->price, 2) }} RON)</span>
                                            @else
                                                <span class="ml-2 text-xs text-green-600 dark:text-green-400">(GRATUIT)</span>
                                            @endif
                                        </div>
                                        <span class="text-sm font-semibold text-gray-700 dark:text-gray-300">{{ $plan->users_count }} utilizatori</span>
                                    </div>
                                    <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
                                        @php
                                            $percentage = $stats['total_users'] > 0 ? ($plan->users_count / $stats['total_users']) * 100 : 0;
                                        @endphp
                                        <div class="bg-gradient-to-r from-purple-500 to-purple-600 h-2 rounded-full transition-all duration-500" style="width: {{ $percentage }}%"></div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>

                <!-- Recent Activities -->
                <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
                    <div class="p-6">
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">
                            <i class="fas fa-history mr-2 text-blue-500"></i>
                            Activități Recente
                        </h3>
                        <div class="space-y-3 max-h-96 overflow-y-auto">
                            @forelse($recentActivities as $activity)
                                <div class="flex items-start p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                                    <div class="flex-shrink-0">
                                        @if($activity->action == 'create')
                                            <div class="bg-green-100 dark:bg-green-900 p-2 rounded-full">
                                                <i class="fas fa-plus text-green-600 dark:text-green-400 text-sm"></i>
                                            </div>
                                        @elseif($activity->action == 'update')
                                            <div class="bg-blue-100 dark:bg-blue-900 p-2 rounded-full">
                                                <i class="fas fa-edit text-blue-600 dark:text-blue-400 text-sm"></i>
                                            </div>
                                        @elseif($activity->action == 'delete')
                                            <div class="bg-red-100 dark:bg-red-900 p-2 rounded-full">
                                                <i class="fas fa-trash text-red-600 dark:text-red-400 text-sm"></i>
                                            </div>
                                        @else
                                            <div class="bg-gray-100 dark:bg-gray-600 p-2 rounded-full">
                                                <i class="fas fa-info text-gray-600 dark:text-gray-400 text-sm"></i>
                                            </div>
                                        @endif
                                    </div>
                                    <div class="ml-3 flex-1">
                                        <p class="text-sm text-gray-900 dark:text-gray-100">{{ $activity->description }}</p>
                                        <div class="flex items-center mt-1 text-xs text-gray-500 dark:text-gray-400">
                                            <i class="fas fa-user mr-1"></i>
                                            <span>{{ $activity->user->name }}</span>
                                            <span class="mx-2">•</span>
                                            <i class="fas fa-clock mr-1"></i>
                                            <span>{{ $activity->created_at->diffForHumans() }}</span>
                                        </div>
                                    </div>
                                </div>
                            @empty
                                <p class="text-gray-500 dark:text-gray-400 text-center py-4">Nicio activitate recentă</p>
                            @endforelse
                        </div>
                    </div>
                </div>
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <!-- Recent Users -->
                <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
                    <div class="p-6">
                        <div class="flex items-center justify-between mb-4">
                            <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">
                                <i class="fas fa-user-clock mr-2 text-indigo-500"></i>
                                Utilizatori Recenți
                            </h3>
                            <a href="{{ route('admin.users.index') }}" class="text-sm text-indigo-600 dark:text-indigo-400 hover:underline">
                                Vezi toți
                            </a>
                        </div>
                        <div class="space-y-3">
                            @foreach($recentUsers as $user)
                                <div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition">
                                    <div class="flex items-center">
                                        <div class="bg-indigo-100 dark:bg-indigo-900 p-2 rounded-full">
                                            <i class="fas fa-user text-indigo-600 dark:text-indigo-400"></i>
                                        </div>
                                        <div class="ml-3">
                                            <p class="font-semibold text-gray-900 dark:text-gray-100">{{ $user->name }}</p>
                                            <p class="text-xs text-gray-600 dark:text-gray-400">{{ $user->email }}</p>
                                        </div>
                                    </div>
                                    <div class="text-right">
                                        @if($user->role === 'admin')
                                            <span class="px-2 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 rounded-full text-xs font-semibold">
                                                <i class="fas fa-crown mr-1"></i> Admin
                                            </span>
                                        @elseif($user->role === 'reseller')
                                            <span class="px-2 py-1 bg-indigo-100 dark:bg-indigo-900 text-indigo-800 dark:text-indigo-200 rounded-full text-xs font-semibold">
                                                <i class="fas fa-store mr-1"></i> {{ $user->resellerPlan?->name ?? 'Reseller' }}
                                            </span>
                                        @else
                                            <span class="px-2 py-1 bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200 rounded-full text-xs font-semibold">
                                                {{ $user->plan?->name ?? 'Fără plan' }}
                                            </span>
                                        @endif
                                        <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">{{ $user->created_at->diffForHumans() }}</p>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>

                <!-- Recent DNS Zones -->
                <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
                    <div class="p-6">
                        <div class="flex items-center justify-between mb-4">
                            <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">
                                <i class="fas fa-globe mr-2 text-green-500"></i>
                                Zone DNS Recente
                            </h3>
                            <a href="{{ route('dns-zones.index') }}" class="text-sm text-green-600 dark:text-green-400 hover:underline">
                                Vezi toate
                            </a>
                        </div>
                        <div class="space-y-3">
                            @foreach($recentZones as $zone)
                                <div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition">
                                    <div class="flex items-center">
                                        <div class="bg-green-100 dark:bg-green-900 p-2 rounded-full">
                                            <i class="fas fa-globe text-green-600 dark:text-green-400"></i>
                                        </div>
                                        <div class="ml-3">
                                            <a href="{{ route('dns-zones.show', $zone) }}" class="font-semibold text-gray-900 dark:text-gray-100 hover:text-green-600 dark:hover:text-green-400 transition">
                                                {{ $zone->domain }}
                                            </a>
                                            <p class="text-xs text-gray-600 dark:text-gray-400">{{ $zone->user->name }}</p>
                                        </div>
                                    </div>
                                    <div class="text-right">
                                        <span class="px-2 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded-full text-xs font-semibold">
                                            {{ $zone->type }}
                                        </span>
                                        <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">{{ $zone->created_at->diffForHumans() }}</p>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </div>
</x-admin-layout>

