@extends('layouts.admin') {{-- Usa o layout admin --}}

{{-- Define o cabeçalho da página --}}
<x-slot name="header">
    <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
        {{ __('Criar Novo Item de Menu') }}
    </h2>
</x-slot>

@section('content')
<div class="py-1">
    <div class="max-w-4xl mx-auto sm:px-6 lg:px-8"> {{-- Max width menor para forms --}}
        <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
            <div class="p-6 text-gray-900 dark:text-gray-100">
                {{-- Formulário de Criação --}}
                <form method="POST" action="{{ route('admin.menu-items.store') }}">
                    @csrf {{-- Token CSRF --}}

                    {{-- Campo Localização --}}
                    <div class="mb-4">
                        <label for="location"
                            class="block text-sm font-medium text-gray-700 dark:text-gray-300">Localização do Menu <span
                                class="text-red-500">*</span></label>
                        {{-- Poderia ser um select se as localizações forem fixas --}}
                        <input type="text" name="location" id="location" value="{{ old('location', 'main') }}"
                            {{-- Default 'main' --}} placeholder="Ex: main, footer, sidebar"
                            class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 @error('location') border-red-500 @enderror"
                            required>
                        @error('location')
                        <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                        @enderror
                        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Onde este item de menu aparecerá (ex:
                            'main' para principal, 'footer' para rodapé).</p>
                    </div>

                    {{-- Campo Label (Texto do Link) --}}
                    <div class="mb-4">
                        <label for="label" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Texto do
                            Link (Label) <span class="text-red-500">*</span></label>
                        <input type="text" name="label" id="label" value="{{ old('label') }}"
                            placeholder="Ex: Home, Sobre Nós, Contato"
                            class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 @error('label') border-red-500 @enderror"
                            required>
                        @error('label')
                        <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                        @enderror
                    </div>

                    {{-- Campo Link (Destino) - com helper Alpine.js --}}
                    <div class="mb-4" x-data="{ linkValue: '{{ old('link', '') }}' }"> {{-- Inicializa Alpine.js --}}
                        <label for="link" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Link
                            (Destino) <span class="text-red-500">*</span></label>
                        <input type="text" name="link" id="link" x-model="linkValue" {{-- Vincula ao Alpine.js --}}
                            placeholder="Ex: /, /themes, /pagina/sobre-nos, https://google.com"
                            class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 @error('link') border-red-500 @enderror"
                            required>
                        @error('link')
                        <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                        @enderror

                        {{-- Helper para Páginas Dinâmicas --}}
                        <label for="page_linker"
                            class="mt-2 block text-xs font-medium text-gray-500 dark:text-gray-400">Ou linkar para
                            página:</label>
                        <select id="page_linker"
                            x-on:change="linkValue = ($event.target.value ? '/pagina/' + $event.target.value : '')"
                            {{-- Atualiza o input 'link' --}}
                            class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 text-sm">
                            <option value="">-- Selecione uma página --</option>
                            @foreach($pageSlugs as $slug => $title)
                            {{-- Assume que $pageSlugs foi passado como ['slug' => 'titulo'] --}}
                            {{-- Se $pageSlugs for só ['slug', 'slug'], use $slug para label e value --}}
                            <option value="{{ $slug }}">{{ $title ?? $slug }}</option>
                            @endforeach
                        </select>
                        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Digite o link manualmente ou selecione
                            uma página para preencher automaticamente (formato: /pagina/slug).</p>
                    </div>

                    {{-- Campo Item Pai (Hierarquia) --}}
                    <div class="mb-4">
                        <label for="parent_id" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Item
                            Pai (Submenu de)</label>
                        <select name="parent_id" id="parent_id"
                            class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 @error('parent_id') border-red-500 @enderror">
                            <option value="">-- Nenhum (Item Principal) --</option>
                            {{-- Loop nos itens potenciais passados pelo controller --}}
                            @foreach($potentialParents as $item)
                            <option value="{{ $item->id }}" {{ old('parent_id') == $item->id ? 'selected' : '' }}>
                                {{-- Adiciona traços para indicar nível (simples) --}}
                                {{ str_repeat('-- ', $item->depth ?? 0) }} {{ $item->label }} (ID: {{ $item->id }})
                            </option>
                            @endforeach
                        </select>
                        @error('parent_id')
                        <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                        @enderror
                        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Selecione um item pai para criar um
                            submenu.</p>
                    </div>

                    {{-- Campo Ordem --}}
                    <div class="mb-4">
                        <label for="order" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Ordem de
                            Exibição <span class="text-red-500">*</span></label>
                        <input type="number" name="order" id="order" min="0" value="{{ old('order', 0) }}"
                            {{-- Default 0 --}}
                            class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 @error('order') border-red-500 @enderror"
                            required>
                        @error('order')
                        <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                        @enderror
                        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Menor número aparece primeiro (dentro
                            do mesmo nível/localização).</p>
                    </div>

                    {{-- Campo Target (Alvo do Link) --}}
                    <div class="mb-4">
                        <label for="target" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Abrir
                            Link Em</label>
                        <select name="target" id="target"
                            class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 @error('target') border-red-500 @enderror">
                            <option value="_self" {{ old('target', '_self') === '_self' ? 'selected' : '' }}>Mesma
                                Janela (_self)</option>
                            <option value="_blank" {{ old('target') === '_blank' ? 'selected' : '' }}>Nova Janela
                                (_blank)</option>
                        </select>
                        @error('target')
                        <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                        @enderror
                    </div>


                    {{-- Botões de Ação --}}
                    <div class="flex items-center justify-end mt-6 border-t border-gray-200 dark:border-gray-700 pt-4">
                        {{-- Botão Cancelar --}}
                        <a href="{{ route('admin.menu-items.index') }}"
                            class="inline-flex items-center px-4 py-2 bg-gray-400 dark:bg-gray-600 border border-transparent rounded-md font-semibold text-xs text-white dark:text-gray-200 uppercase tracking-widest hover:bg-gray-500 dark:hover:bg-gray-500 active:bg-gray-600 focus:outline-none focus:border-gray-900 focus:ring ring-gray-300 disabled:opacity-25 transition ease-in-out duration-150 mr-4">
                            Cancelar
                        </a>
                        {{-- Botão Salvar --}}
                        <button type="submit"
                            class="inline-flex items-center px-4 py-2 bg-blue-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-blue-700 active:bg-blue-800 focus:outline-none focus:border-blue-900 focus:ring ring-blue-300 disabled:opacity-25 transition ease-in-out duration-150">
                            Salvar Item de Menu
                        </button>
                    </div>

                </form>
            </div>
        </div>
    </div>
</div>
@endsection