<x-app-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-tachometer-alt mr-2"></i>Detalii Client: {{ $client->name }}
                </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('reseller.dashboard') }}" class="text-blue-600 dark:text-blue-400 hover:underline">Reseller</a>
                    <span class="mx-2">/</span>
                    <a href="{{ route('reseller.clients.index') }}" class="text-blue-600 dark:text-blue-400 hover:underline">Clienți</a>
                    <span class="mx-2">/</span>
                    <span>{{ $client->name }}</span>
                </p>
            </div>
            <div class="flex gap-2">
                <a href="{{ route('reseller.clients.edit', $client) }}" class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition text-sm font-medium" title="Editează Client">
                    <i class="fas fa-edit mr-2"></i>Editează
                </a>
                <a href="{{ route('reseller.clients.index') }}" class="inline-flex items-center px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white rounded-lg transition text-sm font-medium" title="Înapoi la Clienți">
                    <i class="fas fa-arrow-left mr-2"></i>Înapoi
                </a>
            </div>
        </div>
    </x-slot>    <div class="py-12">
        <div class="px-6 lg:px-8">
            <div class="max-w-7xl mx-auto">
                <!-- Statistici Rapide -->
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
                    <!-- Total Zone DNS -->
                    <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg p-6">
                        <div class="flex items-center">
                            <div class="flex-shrink-0">
                                <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
                                    <i class="fas fa-globe text-xl"></i>
                                </div>
                            </div>
                            <div class="ml-4">
                                <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Zone DNS</p>
                                <p class="text-2xl font-semibold text-gray-900 dark:text-gray-100">
                                    {{ $stats['total_dns_zones'] }} / {{ $client->plan->dns_zones_limit ?? 0 }}
                                </p>
                            </div>
                        </div>
                    </div>

                    <!-- Zone Active -->
                    <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg p-6">
                        <div class="flex items-center">
                            <div class="flex-shrink-0">
                                <div class="flex items-center justify-center h-12 w-12 rounded-md bg-green-500 text-white">
                                    <i class="fas fa-check-circle text-xl"></i>
                                </div>
                            </div>
                            <div class="ml-4">
                                <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Zone Active</p>
                                <p class="text-2xl font-semibold text-gray-900 dark:text-gray-100">
                                    {{ $stats['active_dns_zones'] }}
                                </p>
                            </div>
                        </div>
                    </div>

                    <!-- Status Cont -->
                    <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg p-6">
                        <div class="flex items-center">
                            <div class="flex-shrink-0">
                                <div class="flex items-center justify-center h-12 w-12 rounded-md {{ $client->is_active ? 'bg-green-500' : 'bg-red-500' }} text-white">
                                    <i class="fas {{ $client->is_active ? 'fa-user-check' : 'fa-user-slash' }} text-xl"></i>
                                </div>
                            </div>
                            <div class="ml-4">
                                <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Status</p>
                                <p class="text-2xl font-semibold text-gray-900 dark:text-gray-100">
                                    {{ $client->is_active ? 'Activ' : 'Inactiv' }}
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                    <!-- Informații Personale -->
                    <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-user text-blue-600 mr-2"></i>
                                Informații Personale
                            </h3>

                            <div class="space-y-4">
                                <div>
                                    <label class="block text-sm font-medium text-gray-600 dark:text-gray-400">Nume</label>
                                    <p class="mt-1 text-gray-900 dark:text-gray-100">{{ $client->name }}</p>
                                </div>

                                <div>
                                    <label class="block text-sm font-medium text-gray-600 dark:text-gray-400">Email</label>
                                    <p class="mt-1 text-gray-900 dark:text-gray-100">{{ $client->email }}</p>
                                </div>

                                <div>
                                    <label class="block text-sm font-medium text-gray-600 dark:text-gray-400">Rol</label>
                                    <p class="mt-1 text-gray-900 dark:text-gray-100">
                                        <span class="inline-flex items-center px-2.5 py-1 rounded-lg text-xs font-semibold bg-gray-50 dark:bg-gray-900/50 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-gray-700">
                                            <i class="fas fa-user mr-1"></i> {{ ucfirst($client->role) }}
                                        </span>
                                    </p>
                                </div>

                                <div>
                                    <label class="block text-sm font-medium text-gray-600 dark:text-gray-400">Status</label>
                                    <p class="mt-1 text-gray-900 dark:text-gray-100">
                                        <span class="inline-flex items-center px-2.5 py-1 rounded-lg text-xs font-semibold {{ $client->is_active ? 'bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-300 border border-green-200 dark:border-green-800' : 'bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-300 border border-red-200 dark:border-red-800' }}">
                                            <i class="fas {{ $client->is_active ? 'fa-check-circle' : 'fa-times-circle' }} mr-1"></i> {{ $client->is_active ? 'Activ' : 'Inactiv' }}
                                        </span>
                                    </p>
                                </div>

                                <div>
                                    <label class="block text-sm font-medium text-gray-600 dark:text-gray-400">Data Înregistrării</label>
                                    <p class="mt-1 text-gray-900 dark:text-gray-100">{{ $client->created_at->format('d.m.Y H:i') }}</p>
                                </div>

                                <div>
                                    <label class="block text-sm font-medium text-gray-600 dark:text-gray-400">Ultima Actualizare</label>
                                    <p class="mt-1 text-gray-900 dark:text-gray-100">{{ $client->updated_at->format('d.m.Y H:i') }}</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Plan Abonament -->
                    <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-box text-indigo-600 mr-2"></i>
                                Plan Abonament
                            </h3>

                            @if($client->plan)
                                <div class="space-y-4">
                                    <div>
                                        <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Nume Plan</p>
                                        <p class="text-lg font-semibold text-gray-900 dark:text-gray-100">{{ $client->plan->name }}</p>
                                    </div>

                                    <div>
                                        <p class="text-sm font-medium text-gray-600 dark:text-gray-400 mb-2">Limite</p>
                                        <div class="space-y-2 text-sm text-gray-900 dark:text-gray-100">
                                            <div class="flex items-center">
                                                <i class="fas fa-globe text-blue-600 mr-2 w-4"></i>
                                                <span>{{ $client->plan->dns_zones_limit }} zone DNS</span>
                                            </div>
                                            <div class="flex items-center">
                                                <i class="fas fa-list text-purple-600 mr-2 w-4"></i>
                                                <span>{{ $client->plan->subdomains_limit }} înregistrări</span>
                                            </div>
                                            <div class="flex items-center">
                                                <i class="fas fa-server text-green-600 mr-2 w-4"></i>
                                                <span>{{ $client->plan->nameservers_limit }} nameservere</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @else
                                <p class="text-sm text-gray-600 dark:text-gray-400">Nu are plan alocat.</p>
                            @endif
                        </div>
                    </div>

                    <!-- Zone DNS -->
                    <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-globe text-purple-600 mr-2"></i>
                                Zone DNS ({{ $client->dnsZones->count() }})
                            </h3>

                            @if($client->dnsZones->count() > 0)
                                <div class="space-y-2">
                                    @foreach($client->dnsZones as $zone)
                                        <div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-900/50 rounded-lg">
                                            <div class="flex-1">
                                                <p class="text-sm font-medium text-gray-900 dark:text-gray-100">{{ $zone->domain }}</p>
                                                <p class="text-xs text-gray-500 dark:text-gray-400">
                                                    {{ $zone->records()->count() }} înregistrări • {{ $zone->created_at->format('d.m.Y') }}
                                                </p>
                                            </div>
                                            <span class="inline-flex items-center px-2.5 py-1 rounded-lg text-xs font-semibold {{ $zone->is_active ? 'bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-300 border border-green-200 dark:border-green-800' : 'bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-300 border border-red-200 dark:border-red-800' }}">
                                                {{ $zone->is_active ? 'Activ' : 'Inactiv' }}
                                            </span>
                                        </div>
                                    @endforeach
                                </div>
                            @else
                                <div class="text-center py-8">
                                    <i class="fas fa-globe text-4xl text-gray-300 dark:text-gray-600 mb-3"></i>
                                    <p class="text-sm text-gray-600 dark:text-gray-400">Nicio zonă DNS</p>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>
