<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>{{ __('Edit') }} Zonă: {{ $dnsZone->domain }}
                </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('dns-zones.index') }}" class="text-blue-600 dark:text-blue-400 hover:underline">Zone DNS</a>
                    <span class="mx-2">/</span>
                    <a href="{{ route('dns-zones.show', $dnsZone) }}" class="text-blue-600 dark:text-blue-400 hover:underline">{{ $dnsZone->domain }}</a>
                    <span class="mx-2">/</span>
                    <span>Editare</span>
                </p>
            </div>
            <a href="{{ route('dns-zones.show', $dnsZone) }}" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200">
                <i class="fas fa-arrow-left mr-2"></i>Înapoi
            </a>
        </div>
    </x-slot>

    <div class="py-12">
        <div class="max-w-3xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6">
                    <form method="POST" action="{{ route('dns-zones.update', $dnsZone) }}">
                        @csrf
                        @method('PATCH')

                        <!-- Domain (read-only) -->
                        <div class="mb-6">
                            <label for="domain" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                {{ __('Domain') }}
                            </label>
                            <input type="text"
                                   name="domain"
                                   id="domain"
                                   value="{{ $dnsZone->domain }}"
                                   class="w-full rounded-lg border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 bg-gray-100 dark:bg-gray-800"
                                   readonly>
                            <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
                                Domeniul nu poate fi modificat după creare
                            </p>
                        </div>

                        <!-- Type -->
                        <div class="mb-6">
                            <label for="type" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                {{ __('Type') }} <span class="text-red-500">*</span>
                            </label>
                            <select name="type"
                                    id="type"
                                    class="w-full rounded-lg border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600"
                                    required>
                                <option value="MASTER" {{ $dnsZone->type == 'MASTER' ? 'selected' : '' }}>MASTER</option>
                                <option value="NATIVE" {{ $dnsZone->type == 'NATIVE' ? 'selected' : '' }}>NATIVE</option>
                                <option value="SLAVE" {{ $dnsZone->type == 'SLAVE' ? 'selected' : '' }}>SLAVE</option>
                            </select>
                            @error('type')
                                <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Nameservers (doar pentru admin) -->
                        @if(Auth::user()->isAdmin() && $allNameservers)
                        <div class="mb-6">
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
                                <i class="fas fa-server text-cyan-600 mr-2"></i>
                                Name Servers Alocate Zonei
                                <span class="text-xs text-gray-500 dark:text-gray-400 font-normal ml-2">(din planul utilizatorului)</span>
                            </label>
                            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 max-h-64 overflow-y-auto p-4 bg-gray-50 dark:bg-gray-900/50 rounded-lg border border-gray-200 dark:border-gray-700">
                                @forelse($allNameservers as $ns)
                                    @php
                                        $isAllocated = in_array($ns->id, $zoneNameservers);
                                    @endphp
                                    <div class="flex items-start p-3 border {{ $isAllocated ? 'border-cyan-400 dark:border-cyan-500 bg-cyan-50 dark:bg-cyan-900/20' : 'border-gray-200 dark:border-gray-700' }} rounded-lg">
                                        <span class="ml-2 flex-1">
                                            <span class="flex items-center justify-between">
                                                <span class="flex items-center">
                                                    <i class="fas fa-server {{ $isAllocated ? 'text-cyan-600 dark:text-cyan-400' : 'text-gray-400 dark:text-gray-600' }} text-xs mr-1"></i>
                                                    <span class="font-semibold {{ $isAllocated ? 'text-gray-900 dark:text-gray-100' : 'text-gray-500 dark:text-gray-500' }} text-sm">{{ $ns->name }}</span>
                                                </span>
                                                @if($isAllocated)
                                                    <span class="inline-flex items-center px-2 py-0.5 text-xs font-medium rounded-full bg-cyan-100 text-cyan-800 dark:bg-cyan-900/40 dark:text-cyan-300">
                                                        <i class="fas fa-check mr-1"></i>
                                                        Alocat
                                                    </span>
                                                @else
                                                    <span class="inline-flex items-center px-2 py-0.5 text-xs font-medium rounded-full bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400">
                                                        <i class="fas fa-times mr-1"></i>
                                                        Nealocat
                                                    </span>
                                                @endif
                                            </span>
                                            <span class="block text-xs {{ $isAllocated ? 'text-gray-600 dark:text-gray-400' : 'text-gray-400 dark:text-gray-600' }} leading-tight mt-1">{{ $ns->hostname }}</span>
                                            <span class="inline-block mt-1 px-2 py-0.5 text-xs rounded-full {{ $ns->status === 'online' ? 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400' : 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400' }}">
                                                {{ ucfirst($ns->status) }}
                                            </span>
                                        </span>
                                    </div>
                                @empty
                                    <div class="col-span-full text-center py-8 text-gray-500 dark:text-gray-400">
                                        <i class="fas fa-server text-4xl mb-2 opacity-50"></i>
                                        <p>Nu există name servers active în sistem.</p>
                                    </div>
                                @endforelse
                            </div>
                            <p class="mt-3 text-xs text-gray-500 dark:text-gray-400 bg-cyan-50 dark:bg-cyan-900/20 p-3 rounded-lg border border-cyan-200 dark:border-cyan-800">
                                <i class="fas fa-info-circle mr-1 text-cyan-600"></i>
                                <strong>Notă:</strong> Nameserverele alocate sunt definite în planul utilizatorului <strong>{{ $dnsZone->user->plan->name ?? 'N/A' }}</strong>. Pentru a modifica nameserverele, editează planul utilizatorului.
                            </p>
                        </div>
                        @endif

                        <!-- Status -->
                        <div class="mb-6">
                            <label class="flex items-center">
                                <input type="checkbox"
                                       name="is_active"
                                       value="1"
                                       {{ $dnsZone->is_active ? 'checked' : '' }}
                                       class="rounded border-gray-300 dark:border-gray-700 text-indigo-600 shadow-sm focus:ring-indigo-500 dark:focus:ring-indigo-600 dark:bg-gray-900">
                                <span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Zonă DNS activă</span>
                            </label>
                            <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
                                Zonele inactive nu vor fi procesate de serverele DNS
                            </p>
                        </div>

                        <!-- Buttons -->
                        <div class="flex items-center justify-end space-x-4">
                            <a href="{{ route('dns-zones.show', $dnsZone) }}" class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition">
                                {{ __('Cancel') }}
                            </a>
                            <button type="submit" class="px-6 py-2 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold rounded-lg transition">
                                <i class="fas fa-save mr-2"></i>
                                {{ __('Save') }}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>
