@extends('layouts.app')

@section('title', 'Novo 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">Novo Item de Menu</h2>
                <h5 class="text-body-tertiary fw-semibold">Adicionar novo item ao menu do sistema</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.store') }}" method="POST">
                        @csrf

                        <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') }}" 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') }}" 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') }}" 
                                       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', 1) }}" 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') == $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') }}"
                                       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') }}"
                                       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', '_self') == '_self' ? 'selected' : '' }}>Mesma janela</option>
                                <option value="_blank" {{ old('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') }}</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 }}"
                                                   {{ 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', true) ? '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') ? '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>Salvar Item
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts-custom')
<script>
$(document).ready(function() {
    // Auto-gerar slug baseado no nome
    $('#name').on('input', function() {
        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