@extends('admin.layouts.app')

@push('css')
<style>
.nav-tabs .nav-link {
    border-radius: 0.25rem 0.25rem 0 0;
    border: 1px solid transparent;
    background: none;
    color: #6c757d;
}

.nav-tabs .nav-link.active {
    background-color: #fff;
    border-color: #dee2e6 #dee2e6 #fff;
    color: #495057;
    font-weight: 600;
}

.nav-tabs .nav-link:hover {
    border-color: #e9ecef #e9ecef #dee2e6;
}

.tab-content {
    border: 1px solid #dee2e6;
    border-top: 0;
    border-radius: 0 0 0.25rem 0.25rem;
    padding: 1.5rem;
    background: #fff;
}

.tab-icon {
    margin-right: 0.5rem;
}

.form-section-title {
    color: #495057;
    font-weight: 600;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e9ecef;
}

.help-text {
    font-size: 0.875rem;
    color: #6c757d;
    margin-top: 0.25rem;
}

.form-actions {
    border-top: 1px solid #dee2e6;
    padding-top: 1.5rem;
    margin-top: 2rem;
}

.icon-preview {
    font-size: 1.5rem;
    padding: 0.5rem;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    display: inline-block;
    min-width: 50px;
    text-align: center;
}

.badge-preview {
    font-size: 1rem;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    display: inline-block;
}
</style>
@endpush

@section('content')
<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <h4 class="mb-sm-0">Crear Elemento del Menú</h4>
            <div class="page-title-right">
                <a href="{{ route('admin.menu-items.index') }}" class="btn btn-primary">
                <i class="ri-arrow-left-line"></i> Volver
                </a>
            </div>
        </div>
    </div>
</div>
        <form action="{{ route('admin.menu-items.store') }}" method="POST" id="menuItemForm">
            @csrf
            
            <div class="card">
                <div class="card-body">
                    
                    <!-- Tabs Navigation -->
                    <ul class="nav nav-tabs" id="menuTabs" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" id="general-tab" data-bs-toggle="tab" href="#general" role="tab">
                                <i class="ri-information-line tab-icon"></i>Información General
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="appearance-tab" data-bs-toggle="tab" href="#appearance" role="tab">
                                <i class="ri-palette-line tab-icon"></i>Apariencia
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="advanced-tab" data-bs-toggle="tab" href="#advanced" role="tab">
                                <i class="ri-settings-3-line tab-icon"></i>Avanzado
                            </a>
                        </li>
                    </ul>

                    <!-- Tabs Content -->
                    <div class="tab-content" id="menuTabsContent">
                        
                        <!-- Tab 1: Información General -->
                        <div class="tab-pane fade show active" id="general" role="tabpanel">
                            <h5 class="form-section-title">Datos Básicos</h5>
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="name" class="form-label">Nombre del Elemento *</label>
                                        <input type="text" name="name" id="name" 
                                               class="form-control @error('name') is-invalid @enderror" 
                                               value="{{ old('name') }}" required>
                                        @error('name')
                                            <p class="invalid-feedback">{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>
                                
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="menu_location" class="form-label">Ubicación del Menú *</label>
                                        <select name="menu_location" id="menu_location" 
                                                class="form-control @error('menu_location') is-invalid @enderror" required>
                                            <option value="main" {{ old('menu_location') == 'main' ? 'selected' : '' }}>
                                                Menú Principal
                                            </option>
                                            <option value="footer" {{ old('menu_location') == 'footer' ? 'selected' : '' }}>
                                                Menú Footer
                                            </option>
                                            <option value="mobile" {{ old('menu_location') == 'mobile' ? 'selected' : '' }}>
                                                Menú Móvil
                                            </option>
                                            <option value="sidebar" {{ old('menu_location') == 'sidebar' ? 'selected' : '' }}>
                                                Barra Lateral
                                            </option>
                                        </select>
                                        @error('menu_location')
                                            <p class="invalid-feedback">{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="type" class="form-label">Tipo de Elemento *</label>
                                        <select name="type" id="type" 
                                                class="form-control @error('type') is-invalid @enderror" required>
                                            <option value="">-- Seleccionar --</option>
                                            <option value="link" {{ old('type') == 'link' ? 'selected' : '' }}>
                                                Enlace Simple
                                            </option>
                                            <option value="page" {{ old('type') == 'page' ? 'selected' : '' }}>
                                                Página del CMS
                                            </option>
                                            <option value="category" {{ old('type') == 'category' ? 'selected' : '' }}>
                                                Categoría de Productos
                                            </option>
                                            <option value="external" {{ old('type') == 'external' ? 'selected' : '' }}>
                                                Enlace Externo
                                            </option>
                                            <option value="dropdown" {{ old('type') == 'dropdown' ? 'selected' : '' }}>
                                                Menú Desplegable
                                            </option>
                                        </select>
                                        @error('type')
                                            <p class="invalid-feedback">{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>
                                
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="parent_id" class="form-label">Elemento Padre</label>
                                        <select name="parent_id" id="parent_id" class="form-select">
                                            <option value="">-- Ninguno (Nivel principal) --</option>
                                            @foreach($parentItems as $parent)
                                                <option value="{{ $parent->id }}" {{ old('parent_id') == $parent->id ? 'selected' : '' }}>
                                                    [{{ ucfirst($parent->menu_location) }}] {{ $parent->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        <small class="help-text">Selecciona si este elemento debe aparecer dentro de otro</small>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Opciones según el tipo -->
                            <div id="type-options">
                                <!-- URL para link y external -->
                                <div class="row type-option" id="url-option" style="display:none;">
                                    <div class="col-md-12">
                                        <div class="mb-3">
                                            <label for="url" class="form-label">URL</label>
                                            <input type="text" name="url" id="url" class="form-control" 
                                                   value="{{ old('url') }}" 
                                                   placeholder="https://ejemplo.com o /pagina">
                                            <small class="help-text">Para enlaces internos usa rutas relativas (/productos)</small>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- Selector de página -->
                                <div class="row type-option" id="page-option" style="display:none;">
                                    <div class="col-md-12">
                                        <div class="mb-3">
                                            <label for="page_id" class="form-label">Seleccionar Página</label>
                                            <select name="page_id" id="page_id" class="form-select">
                                                <option value="">-- Seleccionar página --</option>
                                                @foreach($pages as $page)
                                                    <option value="{{ $page->id }}" {{ old('page_id') == $page->id ? 'selected' : '' }}>
                                                        {{ $page->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- Selector de categoría -->
                                <div class="row type-option" id="category-option" style="display:none;">
                                    <div class="col-md-12">
                                        <div class="mb-3">
                                            <label for="category_id" class="form-label">Seleccionar Categoría</label>
                                            <select name="category_id" id="category_id" class="form-select">
                                                <option value="">-- Seleccionar categoría --</option>
                                                @foreach($categories as $category)
                                                    <option value="{{ $category->CO_CATEGOR }}" 
                                                            {{ old('category_id') == $category->CO_CATEGOR ? 'selected' : '' }}>
                                                        {{ $category->DE_CATEGOR }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="target" class="form-label">Abrir en</label>
                                        <select name="target" id="target" class="form-select">
                                            <option value="_self" {{ old('target') == '_self' ? 'selected' : '' }}>
                                                Misma ventana
                                            </option>
                                            <option value="_blank" {{ old('target') == '_blank' ? 'selected' : '' }}>
                                                Nueva ventana
                                            </option>
                                        </select>
                                    </div>
                                </div>
                                
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="order" class="form-label">Orden</label>
                                        <input type="number" name="order" id="order" class="form-control" 
                                               value="{{ old('order', 0) }}" min="0">
                                        <small class="help-text">Orden de aparición en el menú</small>
                                    </div>
                                </div>
                                
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label class="form-label">Estado</label>
                                        <div class="custom-control custom-switch mt-2">
                                            <input type="checkbox" class="custom-control-input" 
                                                   id="is_active" name="is_active" value="1" 
                                                   {{ old('is_active', true) ? 'checked' : '' }}>
                                            <label class="custom-control-label" for="is_active">
                                                Elemento Activo
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Tab 2: Apariencia -->
                        <div class="tab-pane fade" id="appearance" role="tabpanel">
                            <h5 class="form-section-title">Personalización Visual</h5>
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="icon" class="form-label">
                                            <i class="ri-remixicon-line"></i> Icono (Font Awesome)
                                            <span class="badge bg-info ms-2">Opcional</span>
                                        </label>
                                        <div class="input-group">
                                            <input type="text" name="icon" id="icon" class="form-control" 
                                                   value="{{ old('icon') }}" 
                                                   placeholder="Ej: ri-home-line, ri-shopping-cart-line (dejar vacío si no desea icono)">
                                            <div class="input-group-append">
                                                <span class="input-group-text icon-preview" id="icon-preview">
                                                    <i class="ri-eye-off-line text-muted"></i>
                                                </span>
                                            </div>
                                        </div>
                                        <small class="help-text d-block mt-2">
                                            <i class="ri-information-line text-info"></i>
                                            Si deja este campo vacío, el menú se mostrará sin icono.
                                            <a href="https://remixicon.com/" target="_blank" class="ms-2">
                                                <i class="ri-external-link-line"></i> Ver iconos disponibles
                                            </a>
                                        </small>

                                        <!-- Iconos sugeridos -->
                                        <div class="mt-2">
                                            <small class="text-muted">Iconos comunes:</small>
                                            <div class="btn-group btn-group-sm mt-1" role="group">
                                                <button type="button" class="btn btn-outline-secondary icon-suggestion" data-icon="ri-home-line">
                                                    <i class="ri-home-line"></i> Home
                                                </button>
                                                <button type="button" class="btn btn-outline-secondary icon-suggestion" data-icon="ri-shopping-cart-line">
                                                    <i class="ri-shopping-cart-line"></i> Productos
                                                </button>
                                                <button type="button" class="btn btn-outline-secondary icon-suggestion" data-icon="ri-settings-3-line">
                                                    <i class="ri-settings-3-line"></i> Servicios
                                                </button>
                                                <button type="button" class="btn btn-outline-secondary icon-suggestion" data-icon="ri-mail-line">
                                                    <i class="ri-mail-line"></i> Contacto
                                                </button>
                                                <button type="button" class="btn btn-outline-secondary icon-suggestion" data-icon="ri-map-pin-line">
                                                    <i class="ri-map-pin-line"></i> Sucursales
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="css_class" class="form-label">
                                            <i class="ri-code-line"></i> Clases CSS
                                        </label>
                                        <input type="text" name="css_class" id="css_class" class="form-control" 
                                               value="{{ old('css_class') }}" 
                                               placeholder="custom-class another-class">
                                        <small class="help-text">Clases CSS personalizadas para estilizar el elemento</small>
                                    </div>
                                </div>
                            </div>
                            
                            <h5 class="form-section-title mt-4">Badge / Etiqueta</h5>
                            
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="badge_text" class="form-label">Texto del Badge</label>
                                        <input type="text" name="badge_text" id="badge_text" class="form-control" 
                                               value="{{ old('badge_text') }}" 
                                               placeholder="Nuevo, Hot, -50%, etc." maxlength="20">
                                    </div>
                                </div>
                                
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="badge_color" class="form-label">Color del Badge</label>
                                        <input type="color" name="badge_color" id="badge_color" class="form-control" 
                                               value="{{ old('badge_color', '#dc3545') }}" style="height: 38px;">
                                    </div>
                                </div>
                                
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label class="form-label">Vista Previa</label>
                                        <div class="badge-preview" id="badge-preview" 
                                             style="background-color: #dc3545; color: #fff; display: none;">
                                            Badge
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Tab 3: Avanzado -->
                        <div class="tab-pane fade" id="advanced" role="tabpanel">
                            <h5 class="form-section-title">Configuración Avanzada</h5>
                            
                            <div class="alert alert-info">
                                <i class="ri-information-line"></i>
                                Estas opciones están reservadas para futuras implementaciones.
                            </div>
                            
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="mb-3">
                                        <label class="form-label">Permisos</label>
                                        <p class="text-muted">
                                            En el futuro podrás configurar qué roles pueden ver este elemento del menú.
                                        </p>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="mb-3">
                                        <label class="form-label">Metadata</label>
                                        <p class="text-muted">
                                            Espacio reservado para datos adicionales y configuraciones especiales.
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                    </div>
                    
                    <!-- Actions -->
                    <div class="form-actions">
                        <div class="row">
                            <div class="col-md-12">
                                <button type="submit" class="btn btn-primary btn-lg">
                                    <i class="ri-save-line"></i> Crear Elemento
                                </button>
                                <a href="{{ route('admin.menu-items.index') }}" 
                                   class="btn btn-outline-secondary btn-lg ms-3">
                                    <i class="ri-close-line"></i> Cancelar
                                </a>
                            </div>
                        </div>
                    </div>
                    
                </div>
            </div>
            
        </form>

@endsection

@section('customJs')
<script>
// Mostrar/ocultar opciones según el tipo
$('#type').change(function() {
    $('.type-option').hide();
    var type = $(this).val();
    
    if (type === 'link' || type === 'external') {
        $('#url-option').show();
    } else if (type === 'page') {
        $('#page-option').show();
    } else if (type === 'category') {
        $('#category-option').show();
    }
});

// Trigger cambio inicial
$('#type').trigger('change');

// Preview del icono
$('#icon').on('input', function() {
    var iconClass = $(this).val().trim();
    if (iconClass) {
        if (iconClass.startsWith('ri-')) {
            $('#icon-preview i').attr('class', iconClass);
        } else {
            if (!iconClass.startsWith('fa-') && !iconClass.startsWith('fa ')) {
                iconClass = 'fa-' + iconClass;
            }
            $('#icon-preview i').attr('class', 'fa ' + iconClass);
        }
    } else {
        $('#icon-preview i').attr('class', 'ri-eye-off-line text-muted');
    }
});

// Sugerencias de iconos
$('.icon-suggestion').on('click', function(e) {
    e.preventDefault();
    var icon = $(this).data('icon');
    $('#icon').val(icon).trigger('input');
    
    // Visual feedback
    $('.icon-suggestion').removeClass('btn-primary').addClass('btn-outline-secondary');
    $(this).removeClass('btn-outline-secondary').addClass('btn-primary');
    
    // Remover el resaltado después de 2 segundos
    setTimeout(() => {
        $(this).removeClass('btn-primary').addClass('btn-outline-secondary');
    }, 2000);
});

// Preview del badge
function updateBadgePreview() {
    var text = $('#badge_text').val();
    var color = $('#badge_color').val();
    
    if (text) {
        $('#badge-preview').text(text).css('background-color', color).show();
    } else {
        $('#badge-preview').hide();
    }
}

$('#badge_text, #badge_color').on('input', updateBadgePreview);

// Validación del formulario
$("#menuItemForm").submit(function(event) {
    var type = $('#type').val();
    
    // Validar según el tipo
    if (type === 'link' || type === 'external') {
        if (!$('#url').val()) {
            event.preventDefault();
            Swal.fire('Error', 'Por favor ingresa una URL', 'error');
            return false;
        }
    } else if (type === 'page') {
        // La página es opcional para compatibilidad con items existentes
        // Si quieres hacerla obligatoria, descomenta las siguientes líneas:
        // if (!$('#page_id').val()) {
        //     event.preventDefault();
        //     Swal.fire('Error', 'Por favor selecciona una página', 'error');
        //     return false;
        // }
    } else if (type === 'category') {
        if (!$('#category_id').val()) {
            event.preventDefault();
            Swal.fire('Error', 'Por favor selecciona una categoría', 'error');
            return false;
        }
    }
});
</script>
@endsection