@extends('layouts.app')

@section('title', 'Editar Item de Menu')

@section('content')
<div class="pb-5">
    <div class="row g-4">
        <div class="col-12 col-xxl-8">
            <div class="mb-8">
                <h2 class="mb-2">Editar Item de Menu</h2>
                <h5 class="text-body-tertiary fw-semibold">Atualizar dados de "{{ $menuItem->name }}"</h5>
            </div>

            <!-- Botão Voltar -->
            <div class="mb-4">
                <a href="{{ route('admin.menu.index') }}" class="btn btn-phoenix-secondary">
                    <i class="fas fa-arrow-left me-2"></i>Voltar
                </a>
            </div>

            <!-- Formulário -->
            <div class="card">
                <div class="card-header">
                    <h6 class="mb-0">Dados do Item</h6>
                </div>
                <div class="card-body">
                    <form action="{{ route('admin.menu.update', $menuItem) }}" method="POST">
                        @csrf
                        @method('PUT')

                        <div class="row">
                            <!-- Nome -->
                            <div class="col-md-6 mb-3">
                                <label for="name" class="form-label">Nome <span class="text-danger">*</span></label>
                                <input type="text" class="form-control @error('name') is-invalid @enderror" 
                                       id="name" name="name" value="{{ old('name', $menuItem->name) }}" required>
                                @error('name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <!-- Slug -->
                            <div class="col-md-6 mb-3">
                                <label for="slug" class="form-label">Slug <span class="text-danger">*</span></label>
                                <input type="text" class="form-control @error('slug') is-invalid @enderror" 
                                       id="slug" name="slug" value="{{ old('slug', $menuItem->slug) }}" required>
                                <small class="form-text text-body-tertiary">Identificador único (ex: empresas-index)</small>
                                @error('slug')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="row">
                            <!-- Ícone -->
                            <div class="col-md-6 mb-3">
                                <label for="icon" class="form-label">Ícone</label>
                                <input type="text" class="form-control @error('icon') is-invalid @enderror" 
                                       id="icon" name="icon" value="{{ old('icon', $menuItem->icon) }}" 
                                       placeholder="fas fa-building ou pie-chart">
                                <small class="form-text text-body-tertiary">FontAwesome (fas fa-*) ou Feather (nome apenas)</small>
                                @error('icon')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <!-- Ordem -->
                            <div class="col-md-6 mb-3">
                                <label for="order" class="form-label">Ordem <span class="text-danger">*</span></label>
                                <input type="number" class="form-control @error('order') is-invalid @enderror" 
                                       id="order" name="order" value="{{ old('order', $menuItem->order) }}" required min="1">
                                @error('order')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <!-- Parent -->
                        <div class="mb-3">
                            <label for="parent_id" class="form-label">Menu Pai</label>
                            <select class="form-select @error('parent_id') is-invalid @enderror" id="parent_id" name="parent_id">
                                <option value="">Menu Principal (sem pai)</option>
                                @foreach($parents as $parent)
                                    <option value="{{ $parent->id }}" 
                                            {{ old('parent_id', $menuItem->parent_id) == $parent->id ? 'selected' : '' }}>
                                        {{ $parent->name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('parent_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="row">
                            <!-- Rota -->
                            <div class="col-md-6 mb-3">
                                <label for="route_name" class="form-label">Nome da Rota</label>
                                <input type="text" class="form-control @error('route_name') is-invalid @enderror" 
                                       id="route_name" name="route_name" value="{{ old('route_name', $menuItem->route_name) }}"
                                       placeholder="empresas.index">
                                <small class="form-text text-body-tertiary">Preferencial sobre URL</small>
                                @error('route_name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <!-- URL -->
                            <div class="col-md-6 mb-3">
                                <label for="url" class="form-label">URL Direta</label>
                                <input type="text" class="form-control @error('url') is-invalid @enderror" 
                                       id="url" name="url" value="{{ old('url', $menuItem->url) }}"
                                       placeholder="/empresas">
                                <small class="form-text text-body-tertiary">Usado se não tiver rota</small>
                                @error('url')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <!-- Target -->
                        <div class="mb-3">
                            <label for="target" class="form-label">Target</label>
                            <select class="form-select" id="target" name="target">
                                <option value="_self" {{ old('target', $menuItem->target) == '_self' ? 'selected' : '' }}>Mesma janela</option>
                                <option value="_blank" {{ old('target', $menuItem->target) == '_blank' ? 'selected' : '' }}>Nova janela</option>
                            </select>
                        </div>

                        <!-- Descrição -->
                        <div class="mb-3">
                            <label for="description" class="form-label">Descrição</label>
                            <textarea class="form-control" id="description" name="description" rows="2" 
                                      placeholder="Tooltip ou descrição do item">{{ old('description', $menuItem->description) }}</textarea>
                        </div>

                        <!-- Permissões -->
                        <div class="mb-4">
                            <label class="form-label">Permissões Necessárias</label>
                            <div class="row">
                                @foreach($permissions as $permission)
                                    <div class="col-md-6 mb-2">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" 
                                                   id="permission_{{ $permission->id }}" name="permissions[]" value="{{ $permission->id }}"
                                                   {{ $menuItem->permissions->contains($permission->id) || in_array($permission->id, old('permissions', [])) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="permission_{{ $permission->id }}">
                                                <strong>{{ $permission->name }}</strong>
                                                @if($permission->description)
                                                    <br><small class="text-body-tertiary">{{ $permission->description }}</small>
                                                @endif
                                            </label>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                            <small class="form-text text-body-tertiary">Se nenhuma permissão for selecionada, todos os usuários verão o item</small>
                        </div>

                        <!-- Opções -->
                        <div class="row mb-4">
                            <div class="col-md-6">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="is_active" name="is_active" 
                                           {{ old('is_active', $menuItem->is_active) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="is_active">
                                        Item ativo
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="is_dropdown" name="is_dropdown" 
                                           {{ old('is_dropdown', $menuItem->is_dropdown) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="is_dropdown">
                                        É dropdown/accordion
                                    </label>
                                </div>
                            </div>
                        </div>

                        <!-- Botões -->
                        <div class="d-flex justify-content-end gap-2">
                            <a href="{{ route('admin.menu.index') }}" class="btn btn-phoenix-secondary">Cancelar</a>
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save me-2"></i>Atualizar Item
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Preview do Item -->
            @if($menuItem->userCanSee(auth()->user()))
                <div class="card mt-4">
                    <div class="card-header">
                        <h6 class="mb-0">Preview do Item</h6>
                    </div>
                    <div class="card-body">
                        <div class="d-flex align-items-center p-3 bg-body-secondary rounded">
                            @if($menuItem->icon)
                                @if(\Str::startsWith($menuItem->icon, 'fas fa-') || \Str::startsWith($menuItem->icon, 'far fa-'))
                                    <i class="{{ $menuItem->icon }} me-2"></i>
                                @else
                                    <i class="fas fa-feather me-2" title="Feather: {{ $menuItem->icon }}"></i>
                                @endif
                            @endif
                            <span class="fw-medium">{{ $menuItem->name }}</span>
                            @if(!$menuItem->is_active)
                                <span class="badge bg-warning ms-2">Inativo</span>
                            @endif
                            @if($menuItem->is_dropdown)
                                <i class="fas fa-chevron-down ms-auto"></i>
                            @endif
                        </div>
                        
                        @if($menuItem->permissions->count() > 0)
                            <small class="text-muted mt-2 d-block">
                                <i class="fas fa-lock me-1"></i>
                                Requer: {{ $menuItem->permissions->pluck('name')->implode(', ') }}
                            </small>
                        @endif
                        
                        @if($menuItem->route_name || $menuItem->url)
                            <small class="text-muted d-block">
                                <i class="fas fa-link me-1"></i>
                                @if($menuItem->route_name)
                                    Rota: {{ $menuItem->route_name }}
                                @else
                                    URL: {{ $menuItem->url }}
                                @endif
                            </small>
                        @endif
                    </div>
                </div>
            @endif
        </div>
    </div>
</div>

@push('scripts-custom')
<script>
$(document).ready(function() {
    // Auto-gerar slug baseado no nome (apenas se slug estiver vazio)
    $('#name').on('input', function() {
        const currentSlug = $('#slug').val();
        if (!currentSlug) {
            const name = $(this).val();
            const slug = name.toLowerCase()
                .replace(/[àáâãäå]/g, 'a')
                .replace(/[èéêë]/g, 'e')
                .replace(/[ìíîï]/g, 'i')
                .replace(/[òóôõö]/g, 'o')
                .replace(/[ùúûü]/g, 'u')
                .replace(/[ç]/g, 'c')
                .replace(/[^a-z0-9]/g, '-')
                .replace(/-+/g, '-')
                .replace(/^-|-$/g, '');
            
            $('#slug').val(slug);
        }
    });
});
</script>
@endpush
@endsection