<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-bars mr-2"></i>Meniu Landing Page
                </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>Meniu Landing</span>
                </p>
            </div>
            <div class="flex items-center gap-3">
                <a href="{{ route('home') }}" target="_blank" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg transition">
                    <i class="fas fa-external-link-alt mr-2"></i>Vezi Landing
                </a>
                <a href="{{ route('admin.landing-menus.create') }}" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded-lg transition">
                    <i class="fas fa-plus mr-2"></i>Adaugă Meniu
                </a>
            </div>
        </div>
    </x-slot>

    <div class="py-6">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            {{-- Mesaje --}}
            @if(session('success'))
                <div class="mb-4 p-4 bg-green-100 dark:bg-green-900/50 border border-green-400 dark:border-green-600 text-green-700 dark:text-green-300 rounded-lg">
                    <i class="fas fa-check-circle mr-2"></i>{{ session('success') }}
                </div>
            @endif

            @if(session('error'))
                <div class="mb-4 p-4 bg-red-100 dark:bg-red-900/50 border border-red-400 dark:border-red-600 text-red-700 dark:text-red-300 rounded-lg">
                    <i class="fas fa-exclamation-circle mr-2"></i>{{ session('error') }}
                </div>
            @endif

            {{-- Info --}}
            <div class="mb-6 p-4 bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-700 rounded-lg">
                <div class="flex items-start">
                    <i class="fas fa-info-circle text-blue-500 mt-0.5 mr-3"></i>
                    <div class="text-sm text-blue-700 dark:text-blue-300">
                        <p class="font-medium mb-1">Cum funcționează:</p>
                        <ul class="list-disc list-inside space-y-1 text-blue-600 dark:text-blue-400">
                            <li><strong>Dropdown</strong> - Meniu cu submeniuri (ex: DNS, Servicii)</li>
                            <li><strong>Link pagină</strong> - Link către o pagină internă din "Pagini Landing"</li>
                            <li><strong>Link extern</strong> - Link către un site extern</li>
                            <li><strong>Anchor</strong> - Scroll pe pagină (ex: #features)</li>
                        </ul>
                    </div>
                </div>
            </div>

            {{-- Meniuri --}}
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
                <div class="p-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
                    <h3 class="font-medium text-gray-900 dark:text-white">
                        <i class="fas fa-sitemap mr-2 text-indigo-500"></i>Structura Meniului
                    </h3>
                    <span class="text-sm text-gray-500 dark:text-gray-400">
                        Folosește săgețile pentru a reordona
                    </span>
                </div>

                <div class="divide-y divide-gray-200 dark:divide-gray-700">
                    @forelse($menus as $menu)
                        {{-- Meniu Principal --}}
                        <div class="menu-item">
                            <div class="flex items-center justify-between p-4 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition">
                                <div class="flex items-center gap-4">
                                    <div class="flex flex-col gap-1">
                                        <form action="{{ route('admin.landing-menus.move-up', $menu) }}" method="POST" class="inline">
                                            @csrf
                                            <button type="submit" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 text-xs">
                                                <i class="fas fa-chevron-up"></i>
                                            </button>
                                        </form>
                                        <form action="{{ route('admin.landing-menus.move-down', $menu) }}" method="POST" class="inline">
                                            @csrf
                                            <button type="submit" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 text-xs">
                                                <i class="fas fa-chevron-down"></i>
                                            </button>
                                        </form>
                                    </div>

                                    <div class="w-10 h-10 rounded-lg {{ $menu->is_active ? 'bg-indigo-100 dark:bg-indigo-900/50' : 'bg-gray-100 dark:bg-gray-700' }} flex items-center justify-center">
                                        @if($menu->icon)
                                            <i class="{{ $menu->icon }} {{ $menu->icon_color ?? 'text-indigo-600 dark:text-indigo-400' }}"></i>
                                        @else
                                            <i class="fas fa-link text-indigo-600 dark:text-indigo-400"></i>
                                        @endif
                                    </div>

                                    <div>
                                        <div class="flex items-center gap-2">
                                            <span class="font-medium text-gray-900 dark:text-white">{{ $menu->title }}</span>
                                            @if($menu->badge)
                                                <span class="px-1.5 py-0.5 text-xs font-medium rounded-full bg-{{ $menu->badge_color }}-500 text-white">
                                                    {{ $menu->badge }}
                                                </span>
                                            @endif
                                            @if(!$menu->is_active)
                                                <span class="px-2 py-0.5 text-xs font-medium rounded-full bg-gray-200 dark:bg-gray-600 text-gray-600 dark:text-gray-300">
                                                    Inactiv
                                                </span>
                                            @endif
                                        </div>
                                        <div class="text-sm text-gray-500 dark:text-gray-400 flex items-center gap-2">
                                            <span class="px-1.5 py-0.5 text-xs bg-gray-100 dark:bg-gray-700 rounded">
                                                {{ $menu->menu_type }}
                                            </span>
                                            @if($menu->menu_type == 'page' && $menu->page)
                                                <span class="text-indigo-600 dark:text-indigo-400">→ {{ $menu->page->title }}</span>
                                            @elseif($menu->menu_type == 'external')
                                                <span class="text-blue-600 dark:text-blue-400">→ {{ Str::limit($menu->external_url, 30) }}</span>
                                            @elseif($menu->menu_type == 'anchor')
                                                <span class="text-green-600 dark:text-green-400">→ {{ $menu->anchor }}</span>
                                            @elseif($menu->menu_type == 'dropdown')
                                                <span class="text-purple-600 dark:text-purple-400">{{ $menu->allChildren->count() }} submeniuri</span>
                                            @endif
                                        </div>
                                    </div>
                                </div>

                                <div class="flex items-center gap-2">
                                    {{-- Toggle Active --}}
                                    <form action="{{ route('admin.landing-menus.toggle-active', $menu) }}" method="POST" class="inline">
                                        @csrf
                                        <button type="submit" class="p-2 text-gray-500 hover:text-{{ $menu->is_active ? 'yellow' : 'green' }}-600 transition"
                                                title="{{ $menu->is_active ? 'Dezactivează' : 'Activează' }}">
                                            <i class="fas fa-{{ $menu->is_active ? 'eye-slash' : 'eye' }}"></i>
                                        </button>
                                    </form>

                                    {{-- Edit --}}
                                    <a href="{{ route('admin.landing-menus.edit', $menu) }}" class="p-2 text-gray-500 hover:text-indigo-600 dark:hover:text-indigo-400 transition" title="Editează">
                                        <i class="fas fa-edit"></i>
                                    </a>

                                    {{-- Delete --}}
                                    <form action="{{ route('admin.landing-menus.destroy', $menu) }}" method="POST" class="inline"
                                          onsubmit="return confirm('Sigur vrei să ștergi meniul {{ $menu->title }}? {{ $menu->allChildren->count() > 0 ? 'Toate submeniurile vor fi șterse!' : '' }}')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="p-2 text-gray-500 hover:text-red-600 dark:hover:text-red-400 transition" title="Șterge">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </form>
                                </div>
                            </div>

                            {{-- Submeniuri --}}
                            @if($menu->allChildren->count() > 0)
                                <div class="bg-gray-50 dark:bg-gray-900/50 border-t border-gray-200 dark:border-gray-700">
                                    @foreach($menu->allChildren as $child)
                                        <div class="flex items-center justify-between px-4 py-3 pl-16 hover:bg-gray-100 dark:hover:bg-gray-700/50 transition border-b border-gray-200 dark:border-gray-700 last:border-b-0">
                                            <div class="flex items-center gap-4">
                                                <div class="flex flex-col gap-1">
                                                    <form action="{{ route('admin.landing-menus.move-up', $child) }}" method="POST" class="inline">
                                                        @csrf
                                                        <button type="submit" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 text-xs">
                                                            <i class="fas fa-chevron-up"></i>
                                                        </button>
                                                    </form>
                                                    <form action="{{ route('admin.landing-menus.move-down', $child) }}" method="POST" class="inline">
                                                        @csrf
                                                        <button type="submit" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 text-xs">
                                                            <i class="fas fa-chevron-down"></i>
                                                        </button>
                                                    </form>
                                                </div>

                                                <div class="w-8 h-8 rounded-lg {{ $child->is_active ? 'bg-white dark:bg-gray-800' : 'bg-gray-200 dark:bg-gray-600' }} flex items-center justify-center border border-gray-200 dark:border-gray-600">
                                                    @if($child->icon)
                                                        <i class="{{ $child->icon }} {{ $child->icon_color ?? 'text-gray-600 dark:text-gray-400' }} text-sm"></i>
                                                    @else
                                                        <i class="fas fa-file text-gray-400 text-sm"></i>
                                                    @endif
                                                </div>

                                                <div>
                                                    <div class="flex items-center gap-2">
                                                        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ $child->title }}</span>
                                                        @if($child->badge)
                                                            <span class="px-1.5 py-0.5 text-xs font-medium rounded-full bg-{{ $child->badge_color }}-500 text-white">
                                                                {{ $child->badge }}
                                                            </span>
                                                        @endif
                                                        @if(!$child->is_active)
                                                            <span class="px-1.5 py-0.5 text-xs font-medium rounded-full bg-gray-200 dark:bg-gray-600 text-gray-500">
                                                                Inactiv
                                                            </span>
                                                        @endif
                                                    </div>
                                                    <div class="text-xs text-gray-500 dark:text-gray-400">
                                                        @if($child->menu_type == 'page' && $child->page)
                                                            <span class="text-indigo-600 dark:text-indigo-400">/pagina/{{ $child->page->slug }}</span>
                                                        @elseif($child->menu_type == 'external')
                                                            <span class="text-blue-600 dark:text-blue-400">{{ Str::limit($child->external_url, 40) }}</span>
                                                        @elseif($child->menu_type == 'anchor')
                                                            <span class="text-green-600 dark:text-green-400">{{ $child->anchor }}</span>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="flex items-center gap-2">
                                                <form action="{{ route('admin.landing-menus.toggle-active', $child) }}" method="POST" class="inline">
                                                    @csrf
                                                    <button type="submit" class="p-1.5 text-gray-400 hover:text-{{ $child->is_active ? 'yellow' : 'green' }}-600 transition">
                                                        <i class="fas fa-{{ $child->is_active ? 'eye-slash' : 'eye' }} text-sm"></i>
                                                    </button>
                                                </form>
                                                <a href="{{ route('admin.landing-menus.edit', $child) }}" class="p-1.5 text-gray-400 hover:text-indigo-600 transition">
                                                    <i class="fas fa-edit text-sm"></i>
                                                </a>
                                                <form action="{{ route('admin.landing-menus.destroy', $child) }}" method="POST" class="inline"
                                                      onsubmit="return confirm('Sigur vrei să ștergi {{ $child->title }}?')">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="p-1.5 text-gray-400 hover:text-red-600 transition">
                                                        <i class="fas fa-trash text-sm"></i>
                                                    </button>
                                                </form>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            @endif
                        </div>
                    @empty
                        <div class="p-12 text-center">
                            <div class="text-gray-500 dark:text-gray-400">
                                <i class="fas fa-bars text-4xl mb-4 opacity-50"></i>
                                <p class="text-lg font-medium">Nu există meniuri</p>
                                <p class="text-sm mb-4">Creează primul meniu pentru landing page.</p>
                                <a href="{{ route('admin.landing-menus.create') }}" class="inline-block bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded-lg transition">
                                    <i class="fas fa-plus mr-2"></i>Adaugă Meniu
                                </a>
                            </div>
                        </div>
                    @endforelse
                </div>
            </div>
        </div>
    </div>
</x-admin-layout>
