<x-app-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-home mr-2"></i>{{ __('Dashboard') }}
            </h2>
            <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                <span>{{ __('Dashboard') }}</span>
            </p>
        </div>
    </x-slot>

    <div class="py-12">
        <div class="px-6 lg:px-8">
            <!-- DNS Query Limit Alert -->
            @if(Auth::user()->hasReachedQueryLimit())
                <div class="bg-gradient-to-r from-red-100 to-pink-100 dark:from-red-900/20 dark:to-pink-900/20 border border-red-300 dark:border-red-700 rounded-xl p-4 mb-6 shadow-md">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center gap-3">
                            <div class="flex-shrink-0 w-10 h-10 bg-red-200 dark:bg-red-800/50 rounded-full flex items-center justify-center">
                                <i class="fas fa-exclamation-triangle text-red-700 dark:text-red-300 text-lg"></i>
                            </div>
                            <div>
                                <h3 class="text-sm font-semibold text-red-900 dark:text-red-100">
                                    @trans_db('query_limit_reached', 'dashboard', 'Limită Query-uri DNS Atinsă!')
                                </h3>
                                <p class="text-xs text-red-800 dark:text-red-200 mt-0.5">
                                    @trans_db('query_limit_message', 'dashboard', 'Ai atins limita de query-uri DNS pentru luna aceasta. Toate operațiunile DNS sunt temporar dezactivate.')
                                </p>
                            </div>
                        </div>
                        <div class="flex items-center gap-2">
                            <a href="{{ route('plans.public') }}" class="inline-flex items-center px-3 py-1.5 bg-red-600 hover:bg-red-700 text-white text-xs font-medium rounded-lg transition shadow-sm">
                                <i class="fas fa-rocket text-xs mr-2"></i>
                                @trans_db('upgrade_plan', 'dashboard', 'Upgrade Plan')
                            </a>
                            <span class="inline-flex items-center px-3 py-1.5 bg-white dark:bg-gray-800 border border-red-300 dark:border-red-700 text-red-800 dark:text-red-200 text-xs rounded-lg shadow-sm">
                                <i class="fas fa-calendar-alt text-xs mr-2"></i>
                                @trans_db('reset_date', 'dashboard', 'Resetare'): {{ now()->addMonth()->startOfMonth()->format('d M Y') }}
                            </span>
                        </div>
                    </div>
                </div>
            @elseif(Auth::user()->getQueryUsagePercentage() >= 80)
                <div class="bg-gradient-to-r from-amber-100 to-yellow-100 dark:from-amber-900/20 dark:to-yellow-900/20 border border-amber-300 dark:border-amber-700 rounded-xl p-4 mb-6 shadow-md">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center gap-3">
                            <div class="flex-shrink-0 w-10 h-10 bg-amber-200 dark:bg-amber-800/50 rounded-full flex items-center justify-center">
                                <i class="fas fa-exclamation-circle text-amber-700 dark:text-amber-300 text-lg"></i>
                            </div>
                            <div>
                                <h3 class="text-sm font-semibold text-amber-900 dark:text-amber-100">
                                    @trans_db('warning_near_limit', 'dashboard', 'Atenție: Aproape de Limită')
                                </h3>
                                <p class="text-xs text-amber-800 dark:text-amber-200 mt-0.5">
                                    @trans_db('near_limit_message', 'dashboard', 'Ai consumat din limita ta de query-uri DNS. Consideră un upgrade pentru a evita întreruperi.')
                                </p>
                            </div>
                        </div>
                        <a href="{{ route('plans.public') }}" class="inline-flex items-center px-3 py-1.5 bg-amber-600 hover:bg-amber-700 text-white text-xs font-medium rounded-lg transition shadow-sm">
                            <i class="fas fa-eye text-xs mr-2"></i>
                            @trans_db('view_plans', 'dashboard', 'Vezi Planuri')
                        </a>
                    </div>
                </div>
            @endif

            <!-- Plan Info Card -->
            @if(Auth::user()->role === 'reseller')
                <div class="bg-gradient-to-r from-indigo-500 to-purple-600 rounded-lg shadow-lg p-6 mb-6 text-white">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <i class="fas fa-store text-4xl mr-4"></i>
                            <div>
                                <h3 class="text-2xl font-bold mb-1">{{ Auth::user()->resellerPlan?->name ?? 'Reseller' }}</h3>
                                <p class="text-indigo-100 text-sm">{{ Auth::user()->resellerPlan?->description ?? 'Pachet Reseller' }}</p>
                            </div>
                        </div>
                        <div class="text-right">
                            @if(Auth::user()->resellerPlan && Auth::user()->resellerPlan->price > 0)
                                <p class="text-3xl font-bold">{{ number_format(Auth::user()->resellerPlan->price, 2) }} RON</p>
                                <p class="text-indigo-100 text-sm">/ lună</p>
                            @else
                                <p class="text-3xl font-bold">{{ __('Free Plan') }}</p>
                            @endif
                        </div>
                    </div>
                </div>
            @else
                <div class="bg-gradient-to-r from-indigo-500 to-purple-600 rounded-lg shadow-lg p-6 mb-6 text-white">
                    <div class="flex items-center justify-between">
                        <div>
                            <h3 class="text-lg font-semibold mb-2">{{ Auth::user()->plan?->name ?? 'Fără plan' }}</h3>
                            <p class="text-indigo-100 text-sm">{{ Auth::user()->plan?->description ?? '' }}</p>
                        </div>
                        <div class="text-right">
                            @if(Auth::user()->plan && Auth::user()->plan->price > 0)
                                <p class="text-3xl font-bold">{{ number_format(Auth::user()->plan->price, 2) }} RON</p>
                                <p class="text-indigo-100 text-sm">/ lună</p>
                            @else
                                <p class="text-3xl font-bold">{{ __('Free Plan') }}</p>
                            @endif
                        </div>
                    </div>
                </div>
            @endif

            <!-- Statistics Grid -->
            <!-- Stats Cards -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
                <!-- 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">
                            <div class="flex items-center">
                                <div class="flex items-center justify-center w-12 h-12 rounded-full bg-gradient-to-br from-blue-400 to-blue-600 shadow-lg">
                                    <i class="fas fa-globe text-white text-xl"></i>
                                </div>
                                <div class="ml-4">
                                    <h4 class="text-sm font-medium text-gray-600 dark:text-gray-400">@trans_db('dns_zones', 'dashboard', 'DNS Zones')</h4>
                                    <p class="text-2xl font-bold text-gray-900 dark:text-gray-100">
                                        @php
                                            // Numără zonele locale
                                            $localZonesCollection = Auth::user()->dnsZones()->get();
                                            $localZones = $localZonesCollection->count();

                                            // Numără zonele PowerDNS atribuite care NU există deja local
                                            $assignments = \App\Models\DnsZoneAssignment::where('user_id', Auth::id())->get();
                                            $uniquePowerDnsZones = 0;

                                            foreach ($assignments as $assignment) {
                                                $existsLocally = $localZonesCollection->where('domain', rtrim($assignment->zone_name, '.'))->first();
                                                if (!$existsLocally) {
                                                    $uniquePowerDnsZones++;
                                                }
                                            }

                                            $totalZones = $localZones + $uniquePowerDnsZones;
                                        @endphp
                                        @if(Auth::user()->role === 'admin')
                                            {{ $totalZones }} / ∞
                                        @elseif(Auth::user()->role === 'reseller')
                                            {{ $totalZones }} / {{ Auth::user()->resellerPlan?->dns_zones_per_client ?? 'N/A' }}
                                        @else
                                            {{ $totalZones }} / {{ Auth::user()->plan?->dns_zones_limit ?? 0 }}
                                        @endif
                                    </p>
                                </div>
                            </div>
                        </div>
                        @if(Auth::user()->role !== 'admin')
                            <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
                                @php
                                    // Folosește $totalZones calculat mai sus (care exclude duplicatele)
                                    $zonesCount = $totalZones;

                                    if(Auth::user()->role === 'reseller') {
                                        $zonesLimit = Auth::user()->resellerPlan?->dns_zones_per_client ?? 1;
                                    } else {
                                        $zonesLimit = Auth::user()->plan?->dns_zones_limit ?? 1;
                                    }
                                    $zonesPercent = $zonesLimit > 0 ? min(($zonesCount / $zonesLimit) * 100, 100) : 0;
                                @endphp
                                <div class="bg-blue-600 dark:bg-blue-400 h-2 rounded-full" style="width: {{ $zonesPercent }}%"></div>
                            </div>
                        @else
                            <p class="text-sm text-green-600 dark:text-green-400 font-semibold">Unlimited</p>
                        @endif
                    </div>
                </div>

                <!-- DNS Records -->
                <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">
                            <div class="flex items-center">
                                <div class="flex items-center justify-center w-12 h-12 rounded-full bg-gradient-to-br from-green-400 to-green-600 shadow-lg">
                                    <i class="fas fa-network-wired text-white text-xl"></i>
                                </div>
                                <div class="ml-4">
                                    <h4 class="text-sm font-medium text-gray-600 dark:text-gray-400">@trans_db('dns_records', 'dashboard', 'DNS Records')</h4>
                                    <p class="text-2xl font-bold text-gray-900 dark:text-gray-100">
                                        @php
                                            $recordsCount = Auth::user()->getTotalRecordsCount();
                                        @endphp
                                        @if(Auth::user()->role === 'admin')
                                            {{ $recordsCount }} / ∞
                                        @elseif(Auth::user()->role === 'reseller')
                                            {{ $recordsCount }} / {{ Auth::user()->resellerPlan?->subdomains_per_client ?? 'N/A' }}
                                        @else
                                            {{ $recordsCount }} / {{ Auth::user()->plan?->subdomains_limit ?? 0 }}
                                        @endif
                                    </p>
                                </div>
                            </div>
                        </div>
                        @if(Auth::user()->role !== 'admin')
                            <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
                                @php
                                    if(Auth::user()->role === 'reseller') {
                                        $recordsLimit = Auth::user()->resellerPlan?->subdomains_per_client ?? 1;
                                    } else {
                                        $recordsLimit = Auth::user()->plan?->subdomains_limit ?? 1;
                                    }
                                    $recordsPercent = $recordsLimit > 0 ? min(($recordsCount / $recordsLimit) * 100, 100) : 0;
                                @endphp
                                <div class="bg-green-600 dark:bg-green-400 h-2 rounded-full" style="width: {{ $recordsPercent }}%"></div>
                            </div>
                        @else
                            <p class="text-sm text-green-600 dark:text-green-400 font-semibold">Unlimited</p>
                        @endif
                    </div>
                </div>

                <!-- Nameservers -->
                <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg {{ Auth::user()->isAdmin() ? 'animate-pulse-slow ring-2 ring-red-500 dark:ring-red-400' : '' }}">
                    <div class="p-6">
                        @php
                            $user = Auth::user();
                            $nameserversList = [];

                            if ($user->isAdmin()) {
                                // Admin vede toate nameserverele active
                                $nameserversList = \App\Models\Nameserver::active()->pluck('hostname')->toArray();
                            } elseif ($user->role === 'reseller' && $user->resellerPlan) {
                                // Reseller vede nameserverele din planul său reseller
                                $allowedIds = $user->resellerPlan->getAllowedNameServers();
                                $nameserversList = \App\Models\Nameserver::whereIn('id', $allowedIds)
                                    ->where('is_active', true)
                                    ->pluck('hostname')
                                    ->toArray();
                            } elseif ($user->reseller_id && $user->reseller && $user->reseller->resellerPlan) {
                                // Client al unui reseller - vede nameserverele din planul resellerului
                                $allowedIds = $user->reseller->resellerPlan->getAllowedNameServers();
                                $nameserversList = \App\Models\Nameserver::whereIn('id', $allowedIds)
                                    ->where('is_active', true)
                                    ->pluck('hostname')
                                    ->toArray();
                            } elseif ($user->plan) {
                                // Client normal cu plan propriu
                                $allowedIds = $user->plan->getAllowedNameServers();
                                $nameserversList = \App\Models\Nameserver::whereIn('id', $allowedIds)
                                    ->where('is_active', true)
                                    ->pluck('hostname')
                                    ->toArray();
                            }
                            $totalNS = count($nameserversList);
                        @endphp

                        <!-- Header -->
                        <div class="flex items-center justify-between mb-2">
                            <div class="flex items-center">
                                <div class="flex items-center justify-center w-12 h-12 rounded-full bg-gradient-to-br from-purple-400 to-purple-600 shadow-lg {{ Auth::user()->isAdmin() ? 'ring-2 ring-red-500 dark:ring-red-400' : '' }}">
                                    <i class="fas fa-server text-white text-xl"></i>
                                </div>
                                <div class="ml-4">
                                    <h4 class="text-sm font-medium text-gray-600 dark:text-gray-400">@trans_db('ns_allocated', 'dashboard', 'NSuri Alocate')</h4>
                                </div>
                            </div>

                            <!-- Navigation Arrows (doar dacă sunt mai mult de 2 NS) -->
                            @if($totalNS > 2)
                                <div class="flex items-center gap-2">
                                    <button onclick="prevNS()" class="text-gray-400 dark:text-gray-500 hover:text-purple-600 dark:hover:text-purple-400 transition text-xs" title="Anterior">
                                        <i class="fas fa-chevron-left"></i>
                                    </button>
                                    <div id="nsIndicators" class="flex gap-1">
                                        @foreach(array_chunk($nameserversList, 2) as $index => $chunk)
                                            <div class="ns-indicator w-1 h-1 rounded-full bg-gray-300 dark:bg-gray-600 transition {{ $index === 0 ? 'bg-purple-600 dark:bg-purple-400' : '' }}"></div>
                                        @endforeach
                                    </div>
                                    <button onclick="nextNS()" class="text-gray-400 dark:text-gray-500 hover:text-purple-600 dark:hover:text-purple-400 transition text-xs" title="Următor">
                                        <i class="fas fa-chevron-right"></i>
                                    </button>
                                </div>
                            @endif
                        </div>

                        <!-- Carousel Container -->
                        @if($totalNS > 0)
                            <div class="ml-16 overflow-hidden">
                                <div id="nsCarousel" class="flex transition-transform duration-300 ease-in-out">
                                    @foreach(array_chunk($nameserversList, 2) as $chunkIndex => $chunk)
                                        <div class="w-full flex-shrink-0 space-y-0.5">
                                            @foreach($chunk as $hostname)
                                                <p class="text-xs font-mono text-gray-700 dark:text-gray-300">{{ $hostname }}</p>
                                            @endforeach
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        @else
                            <p class="ml-16 text-xs text-gray-500 dark:text-gray-400">@trans_db('no_nameservers', 'dashboard', 'Nu există nameservere alocate')</p>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Quick Actions -->
            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg mb-6">
                <div class="p-6">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">@trans_db('quick_actions', 'dashboard', 'Quick Actions')</h3>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        @if(Auth::user()->canPerformDnsOperations())
                            <a href="{{ route('dns-zones.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-plus text-white text-xl"></i>
                                </div>
                                <div class="ml-4">
                                    <h4 class="font-semibold text-gray-900 dark:text-gray-100">@trans_db('add_dns_zone', 'dashboard', 'Add DNS Zone')</h4>
                                    <p class="text-sm text-gray-600 dark:text-gray-400">@trans_db('create_new_zone', 'dashboard', 'Creează zonă DNS nouă')</p>
                                </div>
                            </a>
                        @else
                            <div class="flex items-center p-4 bg-gray-100 dark:bg-gray-700/50 rounded-lg opacity-50 cursor-not-allowed">
                                <div class="bg-gray-400 p-3 rounded-lg">
                                    <i class="fas fa-plus text-white text-xl"></i>
                                </div>
                                <div class="ml-4">
                                    <h4 class="font-semibold text-gray-500 dark:text-gray-400">{{ __('Add DNS Zone') }}</h4>
                                    <p class="text-sm text-gray-400 dark:text-gray-500">Limită atinsă</p>
                                </div>
                            </div>
                        @endif

                        <a href="{{ route('dns-zones.index') }}" 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-list text-white text-xl"></i>
                            </div>
                            <div class="ml-4">
                                <h4 class="font-semibold text-gray-900 dark:text-gray-100">{{ __('DNS Local') }}</h4>
                                <p class="text-sm text-gray-600 dark:text-gray-400">Zonele DNS locale</p>
                            </div>
                        </a>


                    </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">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">{{ __('DNS Zones') }} Recente</h3>
                    @php
                        // Obține zonele locale
                        $localZones = Auth::user()->dnsZones()->latest()->take(5)->get();
                        $allZones = collect($localZones);

                        // Adaugă zonele PowerDNS atribuite
                        if (!Auth::user()->isAdmin()) {
                            $assignments = App\Models\DnsZoneAssignment::where('user_id', Auth::id())->get();
                            $powerDNS = new App\Services\PowerDNSService();

                            foreach ($assignments as $assignment) {
                                // Verifică dacă zona nu există deja local
                                $existsLocally = $localZones->where('domain', rtrim($assignment->zone_name, '.'))->first();

                                if (!$existsLocally) {
                                    $cacheKey = "powerdns_zone_{$assignment->zone_name}";
                                    $zoneDetails = cache()->remember($cacheKey, 300, function() use ($powerDNS, $assignment) {
                                        return $powerDNS->getZone($assignment->zone_name);
                                    });

                                    if ($zoneDetails['success']) {
                                        $zone = new \stdClass();
                                        $zone->id = 'powerdns_' . $assignment->id;
                                        $zone->domain = rtrim($zoneDetails['data']['name'], '.');
                                        $zone->type = 'PowerDNS';
                                        $zone->is_active = true;
                                        $zone->is_powerdns_only = true;
                                        $zone->powerdns_assignment = $assignment;
                                        $zone->powerdns_data = $zoneDetails['data'];

                                        // Numără înregistrările individuale, nu RRsets
                                        $recordsCount = 0;
                                        foreach ($zoneDetails['data']['rrsets'] ?? [] as $rrset) {
                                            $recordsCount += count($rrset['records'] ?? []);
                                        }
                                        $zone->records_count = $recordsCount;

                                        $zone->created_at = $assignment->assigned_at;

                                        $allZones->push($zone);
                                    }
                                }
                            }
                        }

                        $recentZones = $allZones->sortByDesc('created_at')->take(5);
                    @endphp

                    @if($recentZones->count() > 0)
                        <div class="space-y-3">
                            @foreach($recentZones as $zone)
                                @if(isset($zone->is_powerdns_only) && $zone->is_powerdns_only)
                                    {{-- PowerDNS Zone --}}
                                    <a href="{{ route('dns-zones.show', $zone->domain) }}" class="flex items-center justify-between p-4 bg-green-50 dark:bg-green-900/20 hover:bg-green-100 dark:hover:bg-green-900/30 rounded-lg transition">
                                        <div class="flex items-center">
                                            <div class="bg-green-100 dark:bg-green-900 p-2 rounded">
                                                <i class="fas fa-server text-green-600 dark:text-green-400"></i>
                                            </div>
                                            <div class="ml-3">
                                                <h4 class="font-semibold text-gray-900 dark:text-gray-100">
                                                    {{ $zone->domain }}
                                                    <span class="ml-2 px-2 py-1 text-xs bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 rounded">PowerDNS</span>
                                                </h4>
                                                <p class="text-sm text-gray-600 dark:text-gray-400">{{ $zone->type }} • {{ $zone->records_count }} înregistrări</p>
                                            </div>
                                        </div>
                                        <div>
                                            <span class="px-3 py-1 bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 rounded-full text-xs font-semibold">{{ __('Active') }}</span>
                                        </div>
                                    </a>
                                @else
                                    {{-- Local Zone --}}
                                    <a href="{{ route('dns-zones.show', $zone->domain) }}" class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-700/50 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition">
                                        <div class="flex items-center">
                                            <div class="bg-indigo-100 dark:bg-indigo-900 p-2 rounded">
                                                <i class="fas fa-globe text-indigo-600 dark:text-indigo-400"></i>
                                            </div>
                                            <div class="ml-3">
                                                <h4 class="font-semibold text-gray-900 dark:text-gray-100">{{ $zone->domain }}</h4>
                                                <p class="text-sm text-gray-600 dark:text-gray-400">
                                                    {{ $zone->type }} • {{ $zone->records()->count() }} înregistrări
                                                </p>
                                            </div>
                                        </div>
                                        <div>
                                            @if($zone->is_active)
                                                <span class="px-3 py-1 bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 rounded-full text-xs font-semibold">{{ __('Active') }}</span>
                                            @else
                                                <span class="px-3 py-1 bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-gray-200 rounded-full text-xs font-semibold">{{ __('Inactive') }}</span>
                                            @endif
                                        </div>
                                    </a>
                                @endif
                            @endforeach
                        </div>
                    @else
                        <div class="text-center py-8">
                            <i class="fas fa-globe text-gray-400 dark:text-gray-600 text-5xl mb-4"></i>
                            <p class="text-gray-600 dark:text-gray-400 mb-4">{{ __('No records found') }}</p>
                            @if(Auth::user()->canPerformDnsOperations())
                                <a href="{{ route('dns-zones.create') }}" class="inline-flex items-center px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold rounded-lg transition">
                                    <i class="fas fa-plus mr-2"></i>
                                    {{ __('Add DNS Zone') }}
                                </a>
                            @else
                                <button disabled class="inline-flex items-center px-4 py-2 bg-gray-400 text-gray-200 font-semibold rounded-lg cursor-not-allowed opacity-60">
                                    <i class="fas fa-ban mr-2"></i>
                                    Limită Atinsă
                                </button>
                            @endif
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    @push('scripts')
    <script>
        // Nameservers Carousel
        let currentNSSlide = 0;
        const nsCarousel = document.getElementById('nsCarousel');
        const nsIndicators = document.querySelectorAll('.ns-indicator');
        const totalNSSlides = nsIndicators.length;

        function updateNSCarousel() {
            if (!nsCarousel) return;

            nsCarousel.style.transform = `translateX(-${currentNSSlide * 100}%)`;

            // Update indicators
            nsIndicators.forEach((indicator, index) => {
                if (index === currentNSSlide) {
                    indicator.classList.add('bg-purple-600', 'dark:bg-purple-400');
                    indicator.classList.remove('bg-gray-300', 'dark:bg-gray-600');
                } else {
                    indicator.classList.remove('bg-purple-600', 'dark:bg-purple-400');
                    indicator.classList.add('bg-gray-300', 'dark:bg-gray-600');
                }
            });
        }

        function nextNS() {
            currentNSSlide = (currentNSSlide + 1) % totalNSSlides;
            updateNSCarousel();
        }

        function prevNS() {
            currentNSSlide = (currentNSSlide - 1 + totalNSSlides) % totalNSSlides;
            updateNSCarousel();
        }

        // Auto-slide (opțional, comentat)
        // setInterval(nextNS, 5000);
    </script>
    @endpush

    @if(Auth::user()->isAdmin())
    <style>
        @keyframes pulse-slow {
            0%, 100% {
                opacity: 1;
            }
            50% {
                opacity: 0.7;
            }
        }

        .animate-pulse-slow {
            animation: pulse-slow 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }
    </style>
    @endif
</x-app-layout>
