@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">
        {{ __('Editar Item de Menu: ') }} {{ $menuItem->label }} (#{{ $menuItem->id }})
    </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 Edição --}}
                <form method="POST" action="{{ route('admin.menu-items.update', $menuItem) }}">
                    @csrf {{-- Token CSRF --}}
                    @method('PUT') {{-- Método HTTP para atualização --}}

                    {{-- 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>
                        <input type="text" name="location" id="location"
                            value="{{ old('location', $menuItem->location) }}" placeholder="Ex: main, footer"
                            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
                    </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', $menuItem->label) }}"
                            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', $menuItem->link) }}' }">
                        {{-- Inicializa Alpine com valor old ou atual --}}
                        <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"
                            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 : linkValue)"
                            {{-- Atualiza SÓ se uma página for selecionada --}}
                            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)
                            <option value="{{ $slug }}">{{ $title ?? $slug }}</option>
                            @endforeach
                        </select>
                        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Selecionar uma página aqui preencherá o
                            campo Link acima.</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 (já devem excluir o item atual) --}}
                            @foreach($potentialParents as $item)
                            {{-- Verifica se o item atual é o mesmo que o item sendo editado para evitar selecioná-lo --}}
                            {{-- O controller já deve ter filtrado, mas uma checagem extra não faz mal --}}
                            @if($item->id !== $menuItem->id)
                            <option value="{{ $item->id }}"
                                {{ old('parent_id', $menuItem->parent_id) == $item->id ? 'selected' : '' }}>
                                {{ str_repeat('-- ', $item->depth ?? 0) }} {{ $item->label }} (ID: {{ $item->id }})
                            </option>
                            @endif
                            @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/manter
                            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', $menuItem->order) }}"
                            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
                    </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', $menuItem->target) === '_self' ? 'selected' : '' }}>
                                Mesma Janela (_self)</option>
                            <option value="_blank"
                                {{ old('target', $menuItem->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 (Volta para a lista) --}}
                        <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 Alterações --}}
                        <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 Alterações
                        </button>
                    </div>

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