<x-admin-layout>
    <x-slot name="header">
        <div class="flex justify-between items-center">
            <div>
                <h2 class="font-semibold text-lg text-gray-800 dark:text-gray-200 leading-tight">
                    <i class="fas fa-box mr-2"></i>Gestionare Pachete
                </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>
                    <a href="{{ route('admin.dashboard') }}" class="text-blue-600 dark:text-blue-400 hover:underline">Admin</a>
                    <span class="mx-2">/</span>
                    <span>Planuri</span>
                </p>
            </div>
            <a href="{{ route('admin.plans.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>Adaugă Pachet
            </a>
        </div>
    </x-slot>

    <div class="py-6">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            {{-- Carduri Statistici - 5 carduri separate pe un singur rând --}}
            <div class="grid grid-cols-5 gap-4 mb-4">
                <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-3">
                    <div class="flex items-center gap-3">
                        <div class="w-9 h-9 rounded-full bg-indigo-100 dark:bg-indigo-900/50 flex items-center justify-center">
                            <i class="fas fa-box text-indigo-600 dark:text-indigo-400 text-sm"></i>
                        </div>
                        <div>
                            <p class="text-xs text-gray-500 dark:text-gray-400">Total</p>
                            <p class="text-lg font-bold text-gray-900 dark:text-white">{{ $stats['total'] }}</p>
                        </div>
                    </div>
                </div>
                <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-3">
                    <div class="flex items-center gap-3">
                        <div class="w-9 h-9 rounded-full bg-green-100 dark:bg-green-900/50 flex items-center justify-center">
                            <i class="fas fa-check-circle text-green-600 dark:text-green-400 text-sm"></i>
                        </div>
                        <div>
                            <p class="text-xs text-gray-500 dark:text-gray-400">Active</p>
                            <p class="text-lg font-bold text-green-600 dark:text-green-400">{{ $stats['active'] }}</p>
                        </div>
                    </div>
                </div>
                <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-3">
                    <div class="flex items-center gap-3">
                        <div class="w-9 h-9 rounded-full bg-red-100 dark:bg-red-900/50 flex items-center justify-center">
                            <i class="fas fa-times-circle text-red-600 dark:text-red-400 text-sm"></i>
                        </div>
                        <div>
                            <p class="text-xs text-gray-500 dark:text-gray-400">Inactive</p>
                            <p class="text-lg font-bold text-red-600 dark:text-red-400">{{ $stats['inactive'] }}</p>
                        </div>
                    </div>
                </div>
                <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-3">
                    <div class="flex items-center gap-3">
                        <div class="w-9 h-9 rounded-full bg-blue-100 dark:bg-blue-900/50 flex items-center justify-center">
                            <i class="fas fa-users text-blue-600 dark:text-blue-400 text-sm"></i>
                        </div>
                        <div>
                            <p class="text-xs text-gray-500 dark:text-gray-400">Utilizatori</p>
                            <p class="text-lg font-bold text-blue-600 dark:text-blue-400">{{ $stats['total_users'] }}</p>
                        </div>
                    </div>
                </div>
                <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-3">
                    <div class="flex items-center gap-3">
                        <div class="w-9 h-9 rounded-full bg-emerald-100 dark:bg-emerald-900/50 flex items-center justify-center">
                            <i class="fas fa-coins text-emerald-600 dark:text-emerald-400 text-sm"></i>
                        </div>
                        <div>
                            <p class="text-xs text-gray-500 dark:text-gray-400">Venit/Lună</p>
                            <p class="text-lg font-bold text-emerald-600 dark:text-emerald-400">{{ number_format($stats['monthly_revenue'], 0) }} <span class="text-xs font-normal">RON</span></p>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Filtre rapide --}}
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-3 mb-6">
                <div class="flex flex-wrap items-center gap-2">
                    <span class="text-sm text-gray-500 dark:text-gray-400 mr-2">Filtrează:</span>
                    <a href="{{ route('admin.plans.index') }}" class="px-3 py-1.5 rounded-lg text-sm font-medium transition {{ !request('filter') ? 'bg-indigo-600 text-white' : 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600' }}">
                        Toate
                    </a>
                    <a href="{{ route('admin.plans.index', ['filter' => 'active']) }}" class="px-3 py-1.5 rounded-lg text-sm font-medium transition {{ request('filter') == 'active' ? 'bg-green-600 text-white' : 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600' }}">
                        <i class="fas fa-check-circle mr-1"></i>Active
                    </a>
                    <a href="{{ route('admin.plans.index', ['filter' => 'inactive']) }}" class="px-3 py-1.5 rounded-lg text-sm font-medium transition {{ request('filter') == 'inactive' ? 'bg-red-600 text-white' : 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600' }}">
                        <i class="fas fa-times-circle mr-1"></i>Inactive
                    </a>
                    <a href="{{ route('admin.plans.index', ['filter' => 'free']) }}" class="px-3 py-1.5 rounded-lg text-sm font-medium transition {{ request('filter') == 'free' ? 'bg-blue-600 text-white' : 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600' }}">
                        <i class="fas fa-gift mr-1"></i>Gratuite
                    </a>
                    <a href="{{ route('admin.plans.index', ['filter' => 'paid']) }}" class="px-3 py-1.5 rounded-lg text-sm font-medium transition {{ request('filter') == 'paid' ? 'bg-emerald-600 text-white' : 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600' }}">
                        <i class="fas fa-credit-card mr-1"></i>Plătite
                    </a>
                </div>
            </div>

            {{-- Grid Planuri - cu mai mult spațiu între ele --}}
            @if($plans->count() > 0)
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    @foreach($plans as $plan)
                        @php
                            // Culori diferite pentru fiecare plan bazate pe preț
                            $colors = [
                                'free' => ['border' => 'border-gray-300 dark:border-gray-600', 'bg' => 'bg-gray-50 dark:bg-gray-800', 'price' => 'text-gray-700 dark:text-gray-300'],
                                'basic' => ['border' => 'border-blue-300 dark:border-blue-700', 'bg' => 'bg-blue-50 dark:bg-blue-900/20', 'price' => 'text-blue-600 dark:text-blue-400'],
                                'pro' => ['border' => 'border-purple-300 dark:border-purple-700', 'bg' => 'bg-purple-50 dark:bg-purple-900/20', 'price' => 'text-purple-600 dark:text-purple-400'],
                                'business' => ['border' => 'border-emerald-300 dark:border-emerald-700', 'bg' => 'bg-emerald-50 dark:bg-emerald-900/20', 'price' => 'text-emerald-600 dark:text-emerald-400'],
                            ];

                            if ($plan->price == 0) $colorScheme = $colors['free'];
                            elseif ($plan->price < 50) $colorScheme = $colors['basic'];
                            elseif ($plan->price < 100) $colorScheme = $colors['pro'];
                            else $colorScheme = $colors['business'];

                            $monthlyRevenue = $plan->price * $plan->users_count;
                        @endphp

                        <div class="relative rounded-xl border-2 {{ $colorScheme['border'] }} {{ $plan->is_active ? $colorScheme['bg'] : 'bg-gray-100 dark:bg-gray-800 opacity-75' }} p-5 transition hover:shadow-lg {{ $plan->is_recommended ? 'ring-2 ring-yellow-400 ring-offset-2 dark:ring-offset-gray-900' : '' }}">
                            {{-- Badge-uri --}}
                            <div class="absolute -top-3 left-4 flex items-center gap-2">
                                @if($plan->is_recommended)
                                    <span class="px-2 py-0.5 bg-yellow-400 text-yellow-900 rounded-full text-xs font-bold shadow">
                                        <i class="fas fa-star mr-1"></i>RECOMANDAT
                                    </span>
                                @endif
                                @if(!$plan->is_active)
                                    <span class="px-2 py-0.5 bg-gray-500 text-white rounded-full text-xs font-semibold">
                                        INACTIV
                                    </span>
                                @endif
                            </div>

                            {{-- Header --}}
                            <div class="flex items-start justify-between mb-3 mt-1">
                                <div>
                                    <h3 class="text-lg font-bold text-gray-900 dark:text-white">{{ $plan->name }}</h3>
                                    <p class="text-xs text-gray-500 dark:text-gray-400">{{ $plan->slug }}</p>
                                </div>
                                {{-- Toggle Status --}}
                                <button onclick="togglePlanStatus({{ $plan->id }}, this)"
                                    class="relative inline-flex h-5 w-9 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none {{ $plan->is_active ? 'bg-green-500' : 'bg-gray-300 dark:bg-gray-600' }}"
                                    title="{{ $plan->is_active ? 'Dezactivează planul' : 'Activează planul' }}">
                                    <span class="pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out {{ $plan->is_active ? 'translate-x-4' : 'translate-x-0' }}"></span>
                                </button>
                            </div>

                            {{-- Preț --}}
                            <div class="mb-4">
                                <div class="text-2xl font-bold {{ $colorScheme['price'] }}">
                                    @if($plan->price > 0)
                                        {{ number_format($plan->price, 2) }} <span class="text-sm font-normal">RON/lună</span>
                                    @else
                                        GRATUIT
                                    @endif
                                </div>
                                @if($plan->price > 0)
                                    <p class="text-xs text-gray-500 dark:text-gray-400">
                                        {{ number_format($plan->price * 10, 2) }} RON/an (2 luni gratis)
                                    </p>
                                @endif
                            </div>

                            {{-- Features compacte --}}
                            <div class="space-y-1.5 mb-4 text-sm">
                                <div class="flex items-center justify-between">
                                    <span class="text-gray-600 dark:text-gray-400"><i class="fas fa-globe w-4 text-blue-500"></i> Zone DNS</span>
                                    <span class="font-semibold text-gray-900 dark:text-white">{{ $plan->dns_zones_limit }}</span>
                                </div>
                                <div class="flex items-center justify-between">
                                    <span class="text-gray-600 dark:text-gray-400"><i class="fas fa-network-wired w-4 text-green-500"></i> Subdomenii</span>
                                    <span class="font-semibold text-gray-900 dark:text-white">{{ number_format($plan->subdomains_limit) }}</span>
                                </div>
                                <div class="flex items-center justify-between">
                                    <span class="text-gray-600 dark:text-gray-400"><i class="fas fa-server w-4 text-purple-500"></i> Nameservere</span>
                                    <span class="font-semibold text-gray-900 dark:text-white">{{ $plan->nameservers_limit }}</span>
                                </div>
                                <div class="flex items-center justify-between">
                                    <span class="text-gray-600 dark:text-gray-400"><i class="fas fa-chart-line w-4 text-orange-500"></i> Query-uri</span>
                                    <span class="font-semibold text-gray-900 dark:text-white">
                                        @if($plan->dns_queries_limit)
                                            {{ number_format($plan->dns_queries_limit) }}
                                        @else
                                            ∞
                                        @endif
                                    </span>
                                </div>
                            </div>

                            {{-- Features icons --}}
                            <div class="flex items-center gap-2 mb-4 text-xs">
                                <span class="{{ $plan->allow_zone_export ? 'text-green-600' : 'text-gray-400' }}" title="Export Zone">
                                    <i class="fas fa-download"></i>
                                </span>
                                <span class="{{ $plan->allow_zone_import ? 'text-green-600' : 'text-gray-400' }}" title="Import Zone">
                                    <i class="fas fa-upload"></i>
                                </span>
                                <span class="{{ $plan->api_enabled ? 'text-green-600' : 'text-gray-400' }}" title="API">
                                    <i class="fas fa-code"></i>
                                </span>
                                <span class="{{ $plan->dyndns_enabled ? 'text-green-600' : 'text-gray-400' }}" title="DynDNS">
                                    <i class="fas fa-sync"></i>
                                </span>
                                <span class="{{ $plan->cloudflare_enabled ? 'text-green-600' : 'text-gray-400' }}" title="Cloudflare">
                                    <i class="fas fa-cloud"></i>
                                </span>
                            </div>

                            {{-- Statistici utilizatori și venit --}}
                            <div class="flex items-center justify-between py-2 px-3 bg-gray-100 dark:bg-gray-700/50 rounded-lg mb-4 text-xs">
                                <div class="flex items-center gap-1">
                                    <i class="fas fa-users text-gray-500"></i>
                                    <span class="font-semibold text-gray-700 dark:text-gray-300">{{ $plan->users_count }}</span>
                                    <span class="text-gray-500">utilizatori</span>
                                </div>
                                @if($monthlyRevenue > 0)
                                    <div class="flex items-center gap-1 text-emerald-600 dark:text-emerald-400">
                                        <i class="fas fa-coins"></i>
                                        <span class="font-semibold">{{ number_format($monthlyRevenue, 0) }} RON/lună</span>
                                    </div>
                                @endif
                            </div>

                            {{-- Acțiuni --}}
                            <div class="flex items-center gap-1.5">
                                <a href="{{ route('admin.plans.show', $plan) }}" class="flex-1 inline-flex items-center justify-center px-2 py-1.5 rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 transition text-xs font-medium" title="Detalii">
                                    <i class="fas fa-eye"></i>
                                </a>
                                <a href="{{ route('admin.plans.edit', $plan) }}" class="flex-1 inline-flex items-center justify-center px-2 py-1.5 rounded-lg bg-indigo-100 dark:bg-indigo-900/30 text-indigo-600 dark:text-indigo-400 hover:bg-indigo-200 dark:hover:bg-indigo-900/50 transition text-xs font-medium" title="Editează">
                                    <i class="fas fa-edit"></i>
                                </a>
                                <form action="{{ route('admin.plans.duplicate', $plan) }}" method="POST" class="flex-1">
                                    @csrf
                                    <button type="submit" class="w-full inline-flex items-center justify-center px-2 py-1.5 rounded-lg bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 hover:bg-blue-200 dark:hover:bg-blue-900/50 transition text-xs font-medium" title="Duplică">
                                        <i class="fas fa-copy"></i>
                                    </button>
                                </form>
                                <button onclick="toggleRecommended({{ $plan->id }}, this)" class="flex-1 inline-flex items-center justify-center px-2 py-1.5 rounded-lg {{ $plan->is_recommended ? 'bg-yellow-400 text-yellow-900' : 'bg-yellow-100 dark:bg-yellow-900/30 text-yellow-600 dark:text-yellow-400 hover:bg-yellow-200' }} transition text-xs font-medium" title="{{ $plan->is_recommended ? 'Elimină recomandare' : 'Marchează ca recomandat' }}">
                                    <i class="fas fa-star"></i>
                                </button>
                                @if($plan->users_count == 0)
                                    <form action="{{ route('admin.plans.destroy', $plan) }}" method="POST" class="flex-1" onsubmit="return confirm('Sigur vrei să ștergi planul {{ $plan->name }}?')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="w-full inline-flex items-center justify-center px-2 py-1.5 rounded-lg bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-400 hover:bg-red-200 dark:hover:bg-red-900/50 transition text-xs font-medium" title="Șterge">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </form>
                                @else
                                    <button disabled class="flex-1 inline-flex items-center justify-center px-2 py-1.5 rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-400 cursor-not-allowed text-xs font-medium" title="Nu poți șterge - are utilizatori">
                                        <i class="fas fa-lock"></i>
                                    </button>
                                @endif
                            </div>
                        </div>
                    @endforeach
                </div>
            @else
                <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-12 text-center">
                    <i class="fas fa-box text-gray-400 dark:text-gray-600 text-6xl mb-4"></i>
                    <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">Niciun pachet găsit</h3>
                    <p class="text-gray-600 dark:text-gray-400 mb-6">Creează primul pachet de abonament</p>
                    <a href="{{ route('admin.plans.create') }}" class="inline-flex items-center px-6 py-3 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold rounded-lg transition">
                        <i class="fas fa-plus mr-2"></i>
                        Adaugă Pachet
                    </a>
                </div>
            @endif
        </div>
    </div>

    @push('scripts')
    <script>
        // Toggle status plan
        function togglePlanStatus(planId, btn) {
            fetch(`/paneldns/public/admin/plans/${planId}/toggle-status`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    location.reload();
                } else {
                    alert(data.error || 'Eroare la schimbarea statusului.');
                }
            });
        }

        // Toggle recomandat
        function toggleRecommended(planId, btn) {
            fetch(`/paneldns/public/admin/plans/${planId}/toggle-recommended`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    location.reload();
                } else {
                    alert(data.error || 'Eroare la schimbarea recomandării.');
                }
            });
        }
    </script>
    @endpush
</x-admin-layout>
