@extends('admin.layouts.app')

@push('css')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<style>
.nav-tabs .nav-link {
    border-radius: 0.25rem 0.25rem 0 0;
    border: 1px solid transparent;
    background: none;
    color: #6c757d;
    padding: 0.75rem 1rem;
}

.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;
    isolation: isolate;
}

.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;
    background: #f8f9fa;
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    margin-bottom: -1.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-bottom: 1.5rem;
}

.card-header {
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

.card-title {
    font-size: 1rem;
    font-weight: 600;
    color: #495057;
    margin: 0;
}

.color-preview {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    border: 1px solid #dee2e6;
    display: inline-block;
    vertical-align: middle;
}
</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">Configuración de Apariencia</h4>
            <div class="page-title-right">
                <a href="{{ route('admin.dashboard') }}" class="btn btn-primary">Volver</a>
            </div>
        </div>
    </div>
</div>
        <form action="{{ route('settings.appearance.update') }}" method="POST" enctype="multipart/form-data">                
            @csrf
            @method('PUT')

            <div class="card">
                <div class="card-body p-0">
                    
                    <!-- Navigation Tabs -->
                    <ul class="nav nav-tabs" id="appearanceTabs" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="general-tab" data-bs-toggle="tab" data-bs-target="#general" 
                                    type="button" role="tab" aria-controls="general" aria-selected="true">
                                <i class="ri-palette-line tab-icon"></i>
                                Apariencia General
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="images-tab" data-bs-toggle="tab" data-bs-target="#images" 
                                    type="button" role="tab" aria-controls="images" aria-selected="false">
                                <i class="ri-image-line tab-icon"></i>
                                Imágenes y Logotipos
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="slideshow-tab" data-bs-toggle="tab" data-bs-target="#slideshow" 
                                    type="button" role="tab" aria-controls="slideshow" aria-selected="false">
                                <i class="ri-image-2-line tab-icon"></i>
                                Slideshow
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="limits-tab" data-bs-toggle="tab" data-bs-target="#limits" 
                                    type="button" role="tab" aria-controls="limits" aria-selected="false">
                                <i class="ri-equalizer-line tab-icon"></i>
                                Límites y Paginación
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="pricing-tab" data-bs-toggle="tab" data-bs-target="#pricing" 
                                    type="button" role="tab" aria-controls="pricing" aria-selected="false">
                                <i class="ri-money-dollar-circle-line tab-icon"></i>
                                Configuración de Precios
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="fonts-tab" data-bs-toggle="tab" data-bs-target="#fonts" 
                                    type="button" role="tab" aria-controls="fonts" aria-selected="false">
                                <i class="ri-font-size-2 tab-icon"></i>
                                Tipografías
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="defaults-tab" data-bs-toggle="tab" data-bs-target="#defaults" 
                                    type="button" role="tab" aria-controls="defaults" aria-selected="false">
                                <i class="ri-gallery-line tab-icon"></i>
                                Imágenes por Defecto
                            </button>
                        </li>
                    </ul>

                    <!-- Tab Content -->
                    <div class="tab-content" id="appearanceTabContent">
                        
                        <!-- Apariencia General -->
                        <div class="tab-pane fade show active" id="general" role="tabpanel" aria-labelledby="general-tab">
                            <h5 class="form-section-title">
                                <i class="ri-brush-line text-primary"></i>
                                Configuración Visual y Funcionalidades
                            </h5>
                            
                            <div class="row">
                                <!-- Tema del Sitio -->
                                <div class="col-md-6">
                                    <div class="card mb-3">
                                        <div class="card-header">
                                            <h3 class="card-title">Tema del Sitio</h3>
                                        </div>
                                        <div class="card-body">
                                            <div class="mb-3">
                                                <label for="active_theme" class="form-label">Tema Activo</label>
                                                <select name="active_theme" id="active_theme" class="form-select @error('active_theme') is-invalid @enderror">
                                                    <option value="onlineshop" {{ ($settings->active_theme ?? 'onlineshop') == 'onlineshop' ? 'selected' : '' }}>Online Shop</option>
                                                    <option value="qualis" {{ ($settings->active_theme ?? 'onlineshop') == 'qualis' ? 'selected' : '' }}>Qualis</option>
                                                </select>
                                                <small class="help-text">
                                                    <i class="ri-information-line"></i>
                                                    Seleccione el tema visual para el sitio web.
                                                </small>
                                                @error('active_theme')
                                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- Colores -->
                                <div class="col-md-6">
                                    <div class="card mb-3">
                                        <div class="card-header">
                                            <h3 class="card-title">Colores del Sitio</h3>
                                        </div>
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="mb-3">
                                                        <label for="color_primary" class="form-label">Color Principal</label>
                                                        <div class="input-group">
                                                            <input type="color" id="color_primary" name="color_primary" 
                                                                class="form-control @error('color_primary') is-invalid @enderror" 
                                                                value="{{ old('color_primary', $settings->color_primary ?? '#001D3D') }}">
                                                            <input type="text" id="color_primary_text" class="form-control" 
                                                                value="{{ old('color_primary', $settings->color_primary ?? '#001D3D') }}">
                                                        </div>
                                                        <small class="help-text">
                                                            <i class="ri-information-line"></i>
                                                            Color actual: {{ $settings->color_primary ?? '#001D3D' }} | Por defecto: #001D3D
                                                        </small>
                                                        @error('color_primary')
                                                            <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                                        @enderror
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="mb-3">
                                                        <label for="color_secondary" class="form-label">Color Secundario</label>
                                                        <div class="input-group">
                                                            <input type="color" id="color_secondary" name="color_secondary" 
                                                                class="form-control @error('color_secondary') is-invalid @enderror" 
                                                                value="{{ old('color_secondary', $settings->color_secondary ?? '#A08310') }}">
                                                            <input type="text" id="color_secondary_text" class="form-control" 
                                                                value="{{ old('color_secondary', $settings->color_secondary ?? '#A08310') }}">
                                                        </div>
                                                        <small class="help-text">
                                                            <i class="ri-information-line"></i>
                                                            Color actual: {{ $settings->color_secondary ?? '#A08310' }} | Por defecto: #A08310
                                                        </small>
                                                        @error('color_secondary')
                                                            <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                                        @enderror
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Configuraciones Generales -->
                                <div class="col-md-6">
                                    <div class="card mb-3">
                                        <div class="card-header">
                                            <h3 class="card-title">Configuraciones Generales</h3>
                                        </div>
                                        <div class="card-body">
                                            <div class="mb-3">
                                                <div class="form-check">
                                                    <input type="checkbox" id="show_mega_menu" name="show_mega_menu" 
                                                        class="form-check-input" value="1" 
                                                        {{ old('show_mega_menu', $settings->show_mega_menu) ? 'checked' : '' }}>
                                                    <label class="form-check-label" for="show_mega_menu">Activar Mega Menú</label>
                                                </div>
                                                <small class="help-text">
                                                    <i class="ri-menu-line"></i>
                                                    Muestra un menú desplegable horizontal con las primeras 5 categorías que tengan "Mostrar en Inicio" activada
                                                </small>
                                            </div>

                                            <div class="mb-3">
                                                <div class="form-check">
                                                    <input type="checkbox" id="menu_show_subcategories" name="menu_show_subcategories" 
                                                        class="form-check-input" value="1" 
                                                        {{ old('menu_show_subcategories', $settings->menu_show_subcategories) ? 'checked' : '' }}>
                                                    <label class="form-check-label" for="menu_show_subcategories">Mostrar Subcategorías en Menú</label>
                                                </div>
                                                <small class="help-text">
                                                    <i class="ri-organization-chart"></i>
                                                    Muestra las subcategorías en el menú desplegable. Si está desactivado, solo mostrará categorías principales
                                                </small>
                                            </div>

                                            <div class="mb-3">
                                                <div class="form-check">
                                                    <input type="checkbox" id="show_stock_status" name="show_stock_status" 
                                                        class="form-check-input" value="1" 
                                                        {{ old('show_stock_status', $settings->show_stock_status) ? 'checked' : '' }}>
                                                    <label class="form-check-label" for="show_stock_status">Mostrar Estado de Stock</label>
                                                </div>
                                                <small class="help-text">
                                                    <i class="ri-box-1-line"></i>
                                                    Habilitar para mostrar "En Stock" o "Sin Stock" en los productos
                                                </small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- Modo de Funcionamiento de la Tienda -->
                                <div class="col-md-6">
                                    <div class="card mb-3">
                                        <div class="card-header">
                                            <h3 class="card-title">Modo de Funcionamiento de la Tienda</h3>
                                        </div>
                                        <div class="card-body">
                                            <div class="mb-3">
                                                <div class="form-check mb-2">
                                                    <input type="radio" id="store_mode_ecommerce" name="store_mode" 
                                                        class="form-check-input" value="ecommerce_and_quotes" 
                                                        {{ old('store_mode', $settings->store_mode ?? 'ecommerce_and_quotes') == 'ecommerce_and_quotes' ? 'checked' : '' }}>
                                                    <label class="form-check-label" for="store_mode_ecommerce">
                                                        <strong>Modo E-commerce y Cotizaciones</strong>
                                                    </label>
                                                </div>
                                                <small class="help-text mb-3" style="margin-left: 1.5rem;">
                                                    <i class="ri-shopping-cart-2-line text-success"></i>
                                                    Precios visibles + carrito + checkout + sistema de cotizaciones
                                                </small>
                                                
                                                <div class="form-check mb-2">
                                                    <input type="radio" id="store_mode_catalog" name="store_mode" 
                                                        class="form-check-input" value="catalog_only" 
                                                        {{ old('store_mode', $settings->store_mode ?? 'ecommerce_and_quotes') == 'catalog_only' ? 'checked' : '' }}>
                                                    <label class="form-check-label" for="store_mode_catalog">
                                                        <strong>Modo Catálogo/Cotizaciones</strong>
                                                    </label>
                                                </div>
                                                <small class="help-text" style="margin-left: 1.5rem;">
                                                    <i class="ri-eye-off-line text-info"></i>
                                                    Precios ocultos + solo sistema de cotizaciones
                                                </small>
                                            </div>

                                            <div class="mb-3" id="show_prices_section" style="display: none;">
                                                <div class="form-check">
                                                    <input type="checkbox" id="show_prices" name="show_prices" 
                                                        class="form-check-input" value="1" 
                                                        {{ old('show_prices', $settings->show_prices) ? 'checked' : '' }}>
                                                    <label class="form-check-label" for="show_prices">Mostrar Precios (legacy)</label>
                                                </div>
                                                <small class="help-text">
                                                    <i class="ri-price-tag-line"></i>
                                                    Campo legacy - ahora controlado por el modo de tienda
                                                </small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Imágenes y Logotipos -->
                        <div class="tab-pane fade" id="images" role="tabpanel" aria-labelledby="images-tab">
                            <h5 class="form-section-title">
                                <i class="ri-image-2-line text-info"></i>
                                Logotipos y Elementos Visuales
                            </h5>
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="card">
                                        <div class="card-header">
                                            <h3 class="card-title">Logo Principal</h3>
                                        </div>
                                        <div class="card-body">
                                            <div class="mb-3">
                                                <label for="logo" class="form-label">Seleccionar Logo</label>
                                                <input type="file" name="logo" class="form-control @error('logo') is-invalid @enderror">
                                                <div class="mt-3 text-center">
                                                    <img src="{{ $settings->logo ? asset($settings->logo) : asset('front-assets/images/no_image.jpg') }}" 
                                                         alt="Logo actual" style="max-width: 150px; border: 1px solid #dee2e6; border-radius: 4px;">
                                                    <br><small class="text-muted">Archivo actual: {{ $settings->logo ? basename($settings->logo) : 'No hay archivo subido' }}</small>
                                                </div>
                                                @error('logo')
                                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="col-md-6">
                                    <div class="card">
                                        <div class="card-header">
                                            <h3 class="card-title">Favicon</h3>
                                        </div>
                                        <div class="card-body">
                                            <div class="mb-3">
                                                <label for="favicon" class="form-label">Seleccionar Favicon</label>
                                                <input type="file" name="favicon" class="form-control @error('favicon') is-invalid @enderror">
                                                <div class="mt-3 text-center">
                                                    <img src="{{ $settings->favicon ? asset($settings->favicon) : asset('front-assets/images/no_image.jpg') }}" 
                                                         alt="Favicon actual" style="max-width: 50px; border: 1px solid #dee2e6; border-radius: 4px;">
                                                    <br><small class="text-muted">Archivo actual: {{ $settings->favicon ? basename($settings->favicon) : 'No hay archivo subido' }}</small>
                                                </div>
                                                <small class="help-text">
                                                    <i class="ri-star-line"></i>
                                                    El favicon aparece en la pestaña del navegador junto al título del sitio
                                                </small>
                                                @error('favicon')
                                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Slideshow -->
                        <div class="tab-pane fade" id="slideshow" role="tabpanel" aria-labelledby="slideshow-tab">
                            <h5 class="form-section-title">
                                <i class="ri-play-circle-line text-warning"></i>
                                Configuración del Contenido del Header
                            </h5>

                            <!-- Selector de Tipo de Contenido del Header -->
                            <div class="alert alert-info mb-4">
                                <i class="ri-information-line"></i>
                                <strong>Importante:</strong> Elegí qué contenido querés mostrar en el área del header de tu sitio web.
                            </div>

                            <div class="mb-4">
                                <label for="header_content_type" class="form-label">
                                    <strong>Tipo de Contenido del Header</strong>
                                </label>
                                <select id="header_content_type" name="header_content_type" class="form-select @error('header_content_type') is-invalid @enderror">
                                    <option value="slideshow" {{ old('header_content_type', $settings->header_content_type ?? 'slideshow') == 'slideshow' ? 'selected' : '' }}>
                                        📊 Slideshow - Mostrar slides con texto rotativo
                                    </option>
                                    <option value="virtual_assistant" {{ old('header_content_type', $settings->header_content_type ?? 'slideshow') == 'virtual_assistant' ? 'selected' : '' }}>
                                        💬 Asistente Virtual - Mostrar información del asistente virtual
                                    </option>
                                    <option value="none" {{ old('header_content_type', $settings->header_content_type ?? 'slideshow') == 'none' ? 'selected' : '' }}>
                                        ⛔ Ninguno - No mostrar nada (espacio mínimo)
                                    </option>
                                </select>
                                <small class="form-text text-muted">
                                    <i class="ri-lightbulb-line"></i>
                                    Si elegís "Asistente Virtual", se mostrará el mismo contenido configurado en Copyright → Asistente Virtual
                                </small>
                                @error('header_content_type')
                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                @enderror
                            </div>

                            <!-- Reviews System Control -->
                            <div class="mb-3">
                                <div class="form-check form-switch">
                                    <input type="checkbox" id="reviews_enabled" name="reviews_enabled"
                                        class="form-check-input" value="1"
                                        {{ old('reviews_enabled', $settings->reviews_enabled ?? true) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="reviews_enabled">
                                        <strong>⭐ Habilitar Sistema de Reseñas</strong>
                                    </label>
                                    <small class="form-text text-muted d-block mt-1">
                                        Permite a los clientes dejar reseñas y calificaciones en los productos
                                    </small>
                                </div>
                            </div>

                            <!-- Shop Filters Control -->
                            <div class="mb-3">
                                <div class="form-check form-switch">
                                    <input type="checkbox" id="show_shop_filters" name="show_shop_filters"
                                        class="form-check-input" value="1"
                                        {{ old('show_shop_filters', $settings->show_shop_filters ?? true) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="show_shop_filters">
                                        <strong>🔍 Mostrar Filtros en Shop</strong>
                                    </label>
                                    <small class="form-text text-muted d-block mt-1">
                                        Muestra filtros de precio, marca y disponibilidad en sidebar /shop
                                    </small>
                                </div>
                            </div>

                            <!-- Banner Text Overlay Control -->
                            <div class="mb-3">
                                <div class="form-check form-switch">
                                    <input type="checkbox" id="show_banner_text_overlay" name="show_banner_text_overlay"
                                        class="form-check-input" value="1"
                                        {{ old('show_banner_text_overlay', $settings->show_banner_text_overlay ?? false) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="show_banner_text_overlay">
                                        <strong>🏷️ Mostrar Texto en Banners</strong>
                                    </label>
                                    <small class="form-text text-muted d-block mt-1">
                                        Muestra título, descripción y botón sobre las imágenes de banners en Home
                                    </small>
                                </div>
                            </div>

                            <!-- Shipping Calculator Control -->
                            <div class="mb-3">
                                <div class="form-check form-switch">
                                    <input type="checkbox" id="show_shipping_calculator" name="show_shipping_calculator"
                                        class="form-check-input" value="1"
                                        {{ old('show_shipping_calculator', $settings->show_shipping_calculator ?? true) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="show_shipping_calculator">
                                        <strong>📦 Mostrar Calculadora de Envíos</strong>
                                    </label>
                                    <small class="form-text text-muted d-block mt-1">
                                        Muestra calculadora de costos de envío en la página del carrito
                                    </small>
                                </div>
                            </div>

                            <!-- Compare Feature Control -->
                            <div class="mb-3">
                                <div class="form-check form-switch">
                                    <input type="checkbox" id="show_compare_feature" name="show_compare_feature"
                                        class="form-check-input" value="1"
                                        {{ old('show_compare_feature', $settings->show_compare_feature ?? true) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="show_compare_feature">
                                        <strong>⚖️ Mostrar Funcionalidad de Comparar</strong>
                                    </label>
                                    <small class="form-text text-muted d-block mt-1">
                                        Permite comparar hasta 4 productos simultáneamente
                                    </small>
                                </div>
                            </div>

                            <hr class="my-4">

                            <h5 class="form-section-title">
                                <i class="ri-image-2-line text-primary"></i>
                                Configuración del Slideshow
                            </h5>

                            <div class="mb-3">
                                <div class="form-check form-switch">
                                    <input type="checkbox" id="show_slideshow" name="show_slideshow"
                                        class="form-check-input" value="1"
                                        {{ old('show_slideshow', $settings->show_slideshow) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="show_slideshow">
                                        <strong>Activar Slideshow</strong>
                                    </label>
                                    <small class="form-text text-muted d-block mt-1">
                                        Nota: Esta opción solo aplica si arriba seleccionaste "Slideshow"
                                    </small>
                                </div>
                            </div>

                            <div class="row">
                                <!-- Slide 1 -->
                                <div class="col-md-6">
                                    <div class="card mb-3">
                                        <div class="card-header">
                                            <h3 class="card-title">Slide 1</h3>
                                        </div>
                                        <div class="card-body">
                                            <div class="mb-3">
                                                <label for="slideshow_text1" class="form-label">Texto Principal</label>
                                                <input type="text" id="slideshow_text1" name="slideshow_text1" 
                                                    class="form-control @error('slideshow_text1') is-invalid @enderror" 
                                                    value="{{ old('slideshow_text1', $settings->slideshow_text1) }}">
                                                @error('slideshow_text1')
                                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                                @enderror
                                            </div>
                                            <div class="mb-3">
                                                <label for="slideshow_highlight1" class="form-label">Texto Destacado</label>
                                                <input type="text" id="slideshow_highlight1" name="slideshow_highlight1" 
                                                    class="form-control @error('slideshow_highlight1') is-invalid @enderror" 
                                                    value="{{ old('slideshow_highlight1', $settings->slideshow_highlight1) }}">
                                                @error('slideshow_highlight1')
                                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Slide 2 -->
                                <div class="col-md-6">
                                    <div class="card mb-3">
                                        <div class="card-header">
                                            <h3 class="card-title">Slide 2</h3>
                                        </div>
                                        <div class="card-body">
                                            <div class="mb-3">
                                                <label for="slideshow_text2" class="form-label">Texto Principal</label>
                                                <input type="text" id="slideshow_text2" name="slideshow_text2" 
                                                    class="form-control @error('slideshow_text2') is-invalid @enderror" 
                                                    value="{{ old('slideshow_text2', $settings->slideshow_text2) }}">
                                                @error('slideshow_text2')
                                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                                @enderror
                                            </div>
                                            <div class="mb-3">
                                                <label for="slideshow_highlight2" class="form-label">Texto Destacado</label>
                                                <input type="text" id="slideshow_highlight2" name="slideshow_highlight2" 
                                                    class="form-control @error('slideshow_highlight2') is-invalid @enderror" 
                                                    value="{{ old('slideshow_highlight2', $settings->slideshow_highlight2) }}">
                                                @error('slideshow_highlight2')
                                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Slide 3 -->
                                <div class="col-md-6">
                                    <div class="card mb-3">
                                        <div class="card-header">
                                            <h3 class="card-title">Slide 3</h3>
                                        </div>
                                        <div class="card-body">
                                            <div class="mb-3">
                                                <label for="slideshow_text3" class="form-label">Texto Principal</label>
                                                <input type="text" id="slideshow_text3" name="slideshow_text3" 
                                                    class="form-control @error('slideshow_text3') is-invalid @enderror" 
                                                    value="{{ old('slideshow_text3', $settings->slideshow_text3) }}">
                                                @error('slideshow_text3')
                                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                                @enderror
                                            </div>
                                            <div class="mb-3">
                                                <label for="slideshow_highlight3" class="form-label">Texto Destacado</label>
                                                <input type="text" id="slideshow_highlight3" name="slideshow_highlight3" 
                                                    class="form-control @error('slideshow_highlight3') is-invalid @enderror" 
                                                    value="{{ old('slideshow_highlight3', $settings->slideshow_highlight3) }}">
                                                @error('slideshow_highlight3')
                                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Slide 4 -->
                                <div class="col-md-6">
                                    <div class="card mb-3">
                                        <div class="card-header">
                                            <h3 class="card-title">Slide 4</h3>
                                        </div>
                                        <div class="card-body">
                                            <div class="mb-3">
                                                <label for="slideshow_text4" class="form-label">Texto Principal</label>
                                                <input type="text" id="slideshow_text4" name="slideshow_text4" 
                                                    class="form-control @error('slideshow_text4') is-invalid @enderror" 
                                                    value="{{ old('slideshow_text4', $settings->slideshow_text4) }}">
                                                @error('slideshow_text4')
                                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                                @enderror
                                            </div>
                                            <div class="mb-3">
                                                <label for="slideshow_highlight4" class="form-label">Texto Destacado</label>
                                                <input type="text" id="slideshow_highlight4" name="slideshow_highlight4" 
                                                    class="form-control @error('slideshow_highlight4') is-invalid @enderror" 
                                                    value="{{ old('slideshow_highlight4', $settings->slideshow_highlight4) }}">
                                                @error('slideshow_highlight4')
                                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Límites y Paginación -->
                        <div class="tab-pane fade" id="limits" role="tabpanel" aria-labelledby="limits-tab">
                            <h5 class="form-section-title">
                                <i class="ri-bar-chart-line text-success"></i>
                                Control de Límites de Visualización y Paginación
                            </h5>
                            
                            <div class="row">
                                <!-- Límites de Visualización -->
                                <div class="col-md-6">
                                    <div class="card mb-3">
                                        <div class="card-header">
                                            <h3 class="card-title">Límites de Visualización</h3>
                                        </div>
                                        <div class="card-body">
                                            <div class="mb-3">
                                                <label for="category_limit" class="form-label">Límite de Categorías</label>
                                                <input type="number" id="category_limit" name="category_limit" 
                                                    class="form-control @error('category_limit') is-invalid @enderror" 
                                                    value="{{ old('category_limit', $settings->category_limit ?? 10) }}">
                                                <small class="help-text">
                                                    <i class="ri-stack-line"></i>
                                                    Actual: {{ $settings->category_limit ?? 10 }} | Por defecto: 10
                                                </small>
                                                @error('category_limit')
                                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                                @enderror
                                            </div>
                                            
                                            <div class="mb-3">
                                                <label for="subcategory_limit" class="form-label">Límite de Subcategorías</label>
                                                <input type="number" id="subcategory_limit" name="subcategory_limit" 
                                                    class="form-control @error('subcategory_limit') is-invalid @enderror" 
                                                    value="{{ old('subcategory_limit', $settings->subcategory_limit ?? 5) }}">
                                                <small class="help-text">
                                                    <i class="ri-organization-chart"></i>
                                                    Actual: {{ $settings->subcategory_limit ?? 8 }} | Por defecto: 8
                                                </small>
                                                @error('subcategory_limit')
                                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                                @enderror
                                            </div>
                                            
                                            <div class="mb-3">
                                                <label for="brand_limit" class="form-label">Límite de Marcas</label>
                                                <input type="number" id="brand_limit" name="brand_limit" 
                                                    class="form-control @error('brand_limit') is-invalid @enderror" 
                                                    value="{{ old('brand_limit', $settings->brand_limit ?? 15) }}">
                                                <small class="help-text">
                                                    <i class="ri-file-copy-lineright"></i>
                                                    Actual: {{ $settings->brand_limit ?? 15 }} | Por defecto: 15
                                                </small>
                                                @error('brand_limit')
                                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Límites de Paginación -->
                                <div class="col-md-6">
                                    <div class="card mb-3">
                                        <div class="card-header">
                                            <h3 class="card-title">Límites de Paginación</h3>
                                        </div>
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="mb-3">
                                                        <label for="category_pagination_limit" class="form-label">Categorías</label>
                                                        <input type="number" id="category_pagination_limit" name="category_pagination_limit" 
                                                            class="form-control @error('category_pagination_limit') is-invalid @enderror" 
                                                            value="{{ old('category_pagination_limit', $settings->category_pagination_limit ?? 12) }}">
                                                        <small class="help-text">Actual: {{ $settings->category_pagination_limit ?? 12 }}</small>
                                                        @error('category_pagination_limit')
                                                            <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                                        @enderror
                                                    </div>
                                                </div>
                                                
                                                <div class="col-md-6">
                                                    <div class="mb-3">
                                                        <label for="subcategory_pagination_limit" class="form-label">Subcategorías</label>
                                                        <input type="number" id="subcategory_pagination_limit" name="subcategory_pagination_limit" 
                                                            class="form-control @error('subcategory_pagination_limit') is-invalid @enderror" 
                                                            value="{{ old('subcategory_pagination_limit', $settings->subcategory_pagination_limit ?? 12) }}">
                                                        <small class="help-text">Actual: {{ $settings->subcategory_pagination_limit ?? 12 }}</small>
                                                        @error('subcategory_pagination_limit')
                                                            <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                                        @enderror
                                                    </div>
                                                </div>
                                                
                                                <div class="col-md-6">
                                                    <div class="mb-3">
                                                        <label for="brand_pagination_limit" class="form-label">Marcas</label>
                                                        <input type="number" id="brand_pagination_limit" name="brand_pagination_limit" 
                                                            class="form-control @error('brand_pagination_limit') is-invalid @enderror" 
                                                            value="{{ old('brand_pagination_limit', $settings->brand_pagination_limit ?? 12) }}">
                                                        <small class="help-text">Actual: {{ $settings->brand_pagination_limit ?? 12 }}</small>
                                                        @error('brand_pagination_limit')
                                                            <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                                        @enderror
                                                    </div>
                                                </div>
                                                
                                                <div class="col-md-6">
                                                    <div class="mb-3">
                                                        <label for="product_pagination_limit" class="form-label">Productos</label>
                                                        <input type="number" id="product_pagination_limit" name="product_pagination_limit" 
                                                            class="form-control @error('product_pagination_limit') is-invalid @enderror" 
                                                            value="{{ old('product_pagination_limit', $settings->product_pagination_limit ?? 12) }}">
                                                        <small class="help-text">Actual: {{ $settings->product_pagination_limit ?? 12 }}</small>
                                                        @error('product_pagination_limit')
                                                            <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                                        @enderror
                                                    </div>
                                                </div>
                                                
                                                <div class="col-md-6">
                                                    <div class="mb-3">
                                                        <label for="user_pagination_limit" class="form-label">Usuarios</label>
                                                        <input type="number" id="user_pagination_limit" name="user_pagination_limit" 
                                                            class="form-control @error('user_pagination_limit') is-invalid @enderror" 
                                                            value="{{ old('user_pagination_limit', $settings->user_pagination_limit ?? 10) }}">
                                                        <small class="help-text">Actual: {{ $settings->user_pagination_limit ?? 10 }}</small>
                                                        @error('user_pagination_limit')
                                                            <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                                        @enderror
                                                    </div>
                                                </div>
                                                
                                                <div class="col-md-6">
                                                    <div class="mb-3">
                                                        <label for="order_pagination_limit" class="form-label">Pedidos</label>
                                                        <input type="number" id="order_pagination_limit" name="order_pagination_limit" 
                                                            class="form-control @error('order_pagination_limit') is-invalid @enderror" 
                                                            value="{{ old('order_pagination_limit', $settings->order_pagination_limit ?? 10) }}">
                                                        <small class="help-text">Actual: {{ $settings->order_pagination_limit ?? 10 }}</small>
                                                        @error('order_pagination_limit')
                                                            <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                                        @enderror
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Configuración de Precios -->
                        <div class="tab-pane fade" id="pricing" role="tabpanel" aria-labelledby="pricing-tab">
                            <h5 class="form-section-title">
                                <i class="ri-money-dollar-circle-line text-warning"></i>
                                Configuración del Slider de Precios
                            </h5>
                            
                            <div class="alert alert-info">
                                <i class="ri-information-line"></i>
                                <strong>Información:</strong> Configura los valores para el slider de precios que aparece en los filtros de la tienda.
                            </div>
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="card">
                                        <div class="card-header">
                                            <h3 class="card-title">Rango del Slider</h3>
                                        </div>
                                        <div class="card-body">
                                            <div class="mb-3">
                                                <label for="min_slider_price" class="form-label">Valor Mínimo del Rango</label>
                                                <input type="number" id="min_slider_price" name="min_slider_price" 
                                                    class="form-control @error('min_slider_price') is-invalid @enderror" 
                                                    value="{{ old('min_slider_price', $settings->min_slider_price ?? 0) }}">
                                                <small class="help-text">
                                                    <i class="ri-arrow-down-line"></i>
                                                    Actual: {{ $settings->min_slider_price ?? 0 }} | Por defecto: 0
                                                </small>
                                                @error('min_slider_price')
                                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                                @enderror
                                            </div>
                                            
                                            <div class="mb-3">
                                                <label for="max_slider_price" class="form-label">Valor Máximo del Rango</label>
                                                <input type="number" id="max_slider_price" name="max_slider_price" 
                                                    class="form-control @error('max_slider_price') is-invalid @enderror" 
                                                    value="{{ old('max_slider_price', $settings->max_slider_price ?? 10000) }}">
                                                <small class="help-text">
                                                    <i class="ri-arrow-up-line"></i>
                                                    Actual: {{ $settings->max_slider_price ?? 10000 }} | Por defecto: 10,000
                                                </small>
                                                @error('max_slider_price')
                                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="col-md-6">
                                    <div class="card">
                                        <div class="card-header">
                                            <h3 class="card-title">Valores Predeterminados</h3>
                                        </div>
                                        <div class="card-body">
                                            <div class="mb-3">
                                                <label for="price_min" class="form-label">Valor Inicial Seleccionado</label>
                                                <input type="number" id="price_min" name="price_min" 
                                                    class="form-control @error('price_min') is-invalid @enderror" 
                                                    value="{{ old('price_min', $settings->price_min ?? 50) }}">
                                                <small class="help-text">
                                                    <i class="ri-play-line"></i>
                                                    Actual: {{ $settings->price_min ?? 0 }} | Por defecto: 0
                                                </small>
                                                @error('price_min')
                                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                                @enderror
                                            </div>
                                            
                                            <div class="mb-3">
                                                <label for="price_max" class="form-label">Valor Final Seleccionado</label>
                                                <input type="number" id="price_max" name="price_max" 
                                                    class="form-control @error('price_max') is-invalid @enderror" 
                                                    value="{{ old('price_max', $settings->price_max ?? 5000) }}">
                                                <small class="help-text">
                                                    <i class="ri-stop-line"></i>
                                                    Actual: {{ $settings->price_max ?? 5000 }} | Por defecto: 5,000
                                                </small>
                                                @error('price_max')
                                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                                @enderror
                                            </div>
                                            
                                            <div class="mb-3">
                                                <label for="price_step" class="form-label">Paso entre Valores</label>
                                                <input type="number" id="price_step" name="price_step" 
                                                    class="form-control @error('price_step') is-invalid @enderror" 
                                                    value="{{ old('price_step', $settings->price_step ?? 100) }}">
                                                <small class="help-text">
                                                    <i class="ri-skip-forward-line"></i>
                                                    Actual: {{ $settings->price_step ?? 100 }} | Por defecto: 100
                                                </small>
                                                @error('price_step')
                                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Tipografías -->
                        <div class="tab-pane fade" id="fonts" role="tabpanel" aria-labelledby="fonts-tab">
                            <h5 class="form-section-title">
                                <i class="ri-font-size-2 text-info"></i>
                                Configuración de Tipografías
                            </h5>
                            
                            <div class="alert alert-info">
                                <i class="ri-information-line"></i>
                                <strong>Información:</strong> Las fuentes seleccionadas se cargarán desde Google Fonts. Asegúrate de elegir fuentes que complementen tu marca.
                            </div>
                            
                            <div class="row">
                                <!-- Fuentes Principales -->
                                <div class="col-md-6">
                                    <div class="card mb-3">
                                        <div class="card-header">
                                            <h3 class="card-title">Fuentes Principales</h3>
                                        </div>
                                        <div class="card-body">
                                            <div class="mb-3">
                                                <label for="font_primary" class="form-label">Fuente Principal (Títulos)</label>
                                                <select id="font_primary" name="font_primary" class="form-select @error('font_primary') is-invalid @enderror">
                                                    @php
                                                        $currentPrimary = old('font_primary', \App\Models\FrontSetting::get('general.fonts.primary', 'Poppins'));
                                                    @endphp
                                                    <option value="Poppins" {{ $currentPrimary == 'Poppins' ? 'selected' : '' }}>Poppins</option>
                                                    <option value="Roboto" {{ $currentPrimary == 'Roboto' ? 'selected' : '' }}>Roboto</option>
                                                    <option value="Open Sans" {{ $currentPrimary == 'Open Sans' ? 'selected' : '' }}>Open Sans</option>
                                                    <option value="Lato" {{ $currentPrimary == 'Lato' ? 'selected' : '' }}>Lato</option>
                                                    <option value="Montserrat" {{ $currentPrimary == 'Montserrat' ? 'selected' : '' }}>Montserrat</option>
                                                    <option value="Raleway" {{ $currentPrimary == 'Raleway' ? 'selected' : '' }}>Raleway</option>
                                                    <option value="Inter" {{ $currentPrimary == 'Inter' ? 'selected' : '' }}>Inter</option>
                                                    <option value="Playfair Display" {{ $currentPrimary == 'Playfair Display' ? 'selected' : '' }}>Playfair Display</option>
                                                </select>
                                                <small class="help-text">
                                                    <i class="ri-heading"></i>
                                                    Se usa para títulos y encabezados principales
                                                </small>
                                                @error('font_primary')
                                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                                @enderror
                                            </div>
                                            
                                            <div class="mb-3">
                                                <label for="font_secondary" class="form-label">Fuente Secundaria (Cuerpo)</label>
                                                <select id="font_secondary" name="font_secondary" class="form-select @error('font_secondary') is-invalid @enderror">
                                                    @php
                                                        $currentSecondary = old('font_secondary', \App\Models\FrontSetting::get('general.fonts.secondary', 'Roboto'));
                                                    @endphp
                                                    <option value="Roboto" {{ $currentSecondary == 'Roboto' ? 'selected' : '' }}>Roboto</option>
                                                    <option value="Open Sans" {{ $currentSecondary == 'Open Sans' ? 'selected' : '' }}>Open Sans</option>
                                                    <option value="Lato" {{ $currentSecondary == 'Lato' ? 'selected' : '' }}>Lato</option>
                                                    <option value="Source Sans Pro" {{ $currentSecondary == 'Source Sans Pro' ? 'selected' : '' }}>Source Sans Pro</option>
                                                    <option value="Nunito" {{ $currentSecondary == 'Nunito' ? 'selected' : '' }}>Nunito</option>
                                                    <option value="Ubuntu" {{ $currentSecondary == 'Ubuntu' ? 'selected' : '' }}>Ubuntu</option>
                                                    <option value="Work Sans" {{ $currentSecondary == 'Work Sans' ? 'selected' : '' }}>Work Sans</option>
                                                    <option value="Rubik" {{ $currentSecondary == 'Rubik' ? 'selected' : '' }}>Rubik</option>
                                                </select>
                                                <small class="help-text">
                                                    <i class="ri-paragraph"></i>
                                                    Se usa para el texto del cuerpo y contenido general
                                                </small>
                                                @error('font_secondary')
                                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- Tamaños de Fuente -->
                                <div class="col-md-6">
                                    <div class="card mb-3">
                                        <div class="card-header">
                                            <h3 class="card-title">Tamaños de Fuente</h3>
                                        </div>
                                        <div class="card-body">
                                            <div class="mb-3">
                                                <label for="font_size_base" class="form-label">Tamaño Base (px)</label>
                                                <input type="number" id="font_size_base" name="font_size_base" 
                                                    class="form-control @error('font_size_base') is-invalid @enderror" 
                                                    value="{{ old('font_size_base', \App\Models\FrontSetting::get('general.fonts.size_base', 16)) }}"
                                                    min="12" max="20">
                                                <small class="help-text">
                                                    <i class="ri-text"></i>
                                                    Tamaño base para el texto del cuerpo (por defecto: 16px)
                                                </small>
                                                @error('font_size_base')
                                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                                @enderror
                                            </div>
                                            
                                            <div class="mb-3">
                                                <label for="font_weight_primary" class="form-label">Peso de Fuente Principal</label>
                                                <select id="font_weight_primary" name="font_weight_primary" class="form-select @error('font_weight_primary') is-invalid @enderror">
                                                    @php
                                                        $currentWeightPrimary = old('font_weight_primary', \App\Models\FrontSetting::get('general.fonts.weight_primary', '500'));
                                                    @endphp
                                                    <option value="300" {{ $currentWeightPrimary == '300' ? 'selected' : '' }}>Light (300)</option>
                                                    <option value="400" {{ $currentWeightPrimary == '400' ? 'selected' : '' }}>Regular (400)</option>
                                                    <option value="500" {{ $currentWeightPrimary == '500' ? 'selected' : '' }}>Medium (500)</option>
                                                    <option value="600" {{ $currentWeightPrimary == '600' ? 'selected' : '' }}>Semi Bold (600)</option>
                                                    <option value="700" {{ $currentWeightPrimary == '700' ? 'selected' : '' }}>Bold (700)</option>
                                                </select>
                                                <small class="help-text">
                                                    <i class="ri-bold"></i>
                                                    Grosor para títulos y encabezados
                                                </small>
                                                @error('font_weight_primary')
                                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                                @enderror
                                            </div>
                                            
                                            <div class="mb-3">
                                                <label for="font_weight_secondary" class="form-label">Peso de Fuente Secundaria</label>
                                                <select id="font_weight_secondary" name="font_weight_secondary" class="form-select @error('font_weight_secondary') is-invalid @enderror">
                                                    @php
                                                        $currentWeightSecondary = old('font_weight_secondary', \App\Models\FrontSetting::get('general.fonts.weight_secondary', '400'));
                                                    @endphp
                                                    <option value="300" {{ $currentWeightSecondary == '300' ? 'selected' : '' }}>Light (300)</option>
                                                    <option value="400" {{ $currentWeightSecondary == '400' ? 'selected' : '' }}>Regular (400)</option>
                                                    <option value="500" {{ $currentWeightSecondary == '500' ? 'selected' : '' }}>Medium (500)</option>
                                                    <option value="600" {{ $currentWeightSecondary == '600' ? 'selected' : '' }}>Semi Bold (600)</option>
                                                </select>
                                                <small class="help-text">
                                                    <i class="ri-character-recognition-line"></i>
                                                    Grosor para el texto del cuerpo
                                                </small>
                                                @error('font_weight_secondary')
                                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Vista Previa -->
                            <div class="row">
                                <div class="col-12">
                                    <div class="card">
                                        <div class="card-header">
                                            <h3 class="card-title">Vista Previa de Tipografías</h3>
                                        </div>
                                        <div class="card-body">
                                            <div class="font-preview mb-3">
                                                <h2 id="preview-title" style="margin-bottom: 10px;">Título de Ejemplo con Fuente Principal</h2>
                                                <p id="preview-body" style="margin-bottom: 10px;">Este es un párrafo de ejemplo que muestra cómo se ve la fuente secundaria en el texto del cuerpo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                                                <small id="preview-small" class="text-muted">Texto pequeño de ejemplo</small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Imágenes por Defecto -->
                        <div class="tab-pane fade" id="defaults" role="tabpanel" aria-labelledby="defaults-tab">
                            <h5 class="form-section-title">
                                <i class="ri-gallery-line text-purple"></i>
                                Configuración de Imágenes por Defecto
                            </h5>
                            
                            <div class="alert alert-warning">
                                <i class="ri-error-warning-line"></i>
                                <strong>Importante:</strong> Asegúrate de subir imágenes del tamaño adecuado para garantizar que se vean bien en tu sitio web.
                            </div>
                            
                            <div class="row">
                                <!-- Productos y Sliders -->
                                <div class="col-md-4">
                                    <div class="card mb-3">
                                        <div class="card-header">
                                            <h3 class="card-title">Imagen para Productos</h3>
                                        </div>
                                        <div class="card-body">
                                            <div class="mb-3">
                                                <label for="default_product_image" class="form-label">Imagen por defecto (768x768px)</label>
                                                <input type="file" name="default_product_image" class="form-control @error('default_product_image') is-invalid @enderror">
                                                <div class="mt-3 text-center">
                                                    <img src="{{ ($settings->default_product_image && file_exists(public_path($settings->default_product_image))) ? asset($settings->default_product_image) : asset('front-assets/images/no_image.jpg') }}"
                                                         alt="Imagen por defecto para productos" style="max-width: 120px; border: 1px solid #dee2e6; border-radius: 4px;" onerror="this.onerror=null;this.src='{{ asset('front-assets/images/no_image.jpg') }}'">
                                                    <br><small class="text-muted">{{ ($settings->default_product_image && file_exists(public_path($settings->default_product_image))) ? basename($settings->default_product_image) : 'No hay archivo subido' }}</small>
                                                </div>
                                                @error('default_product_image')
                                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="col-md-4">
                                    <div class="card mb-3">
                                        <div class="card-header">
                                            <h3 class="card-title">Slider Principal</h3>
                                        </div>
                                        <div class="card-body">
                                            <div class="mb-3">
                                                <label for="default_slider_image" class="form-label">Imagen completa (1920x600px)</label>
                                                <input type="file" name="default_slider_image" class="form-control @error('default_slider_image') is-invalid @enderror">
                                                <div class="mt-3 text-center">
                                                    <img src="{{ ($settings->default_slider_image && file_exists(public_path($settings->default_slider_image))) ? asset($settings->default_slider_image) : asset('front-assets/images/no_image.jpg') }}"
                                                         alt="Imagen por defecto para sliders" style="max-width: 200px; height: auto; border: 1px solid #dee2e6; border-radius: 4px;" onerror="this.onerror=null;this.src='{{ asset('front-assets/images/no_image.jpg') }}'">
                                                    <br><small class="text-muted">{{ ($settings->default_slider_image && file_exists(public_path($settings->default_slider_image))) ? basename($settings->default_slider_image) : 'No hay archivo subido' }}</small>
                                                </div>
                                                @error('default_slider_image')
                                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="col-md-4">
                                    <div class="card mb-3">
                                        <div class="card-header">
                                            <h3 class="card-title">Slider Móvil</h3>
                                        </div>
                                        <div class="card-body">
                                            <div class="mb-3">
                                                <label for="default_slider_image_mobile" class="form-label">Versión móvil (768x768px)</label>
                                                <input type="file" name="default_slider_image_mobile" class="form-control @error('default_slider_image_mobile') is-invalid @enderror">
                                                <div class="mt-3 text-center">
                                                    <img src="{{ ($settings->default_slider_image_mobile && file_exists(public_path($settings->default_slider_image_mobile))) ? asset($settings->default_slider_image_mobile) : asset('front-assets/images/no_image.jpg') }}"
                                                         alt="Imagen por defecto para sliders móvil" style="max-width: 120px; border: 1px solid #dee2e6; border-radius: 4px;" onerror="this.onerror=null;this.src='{{ asset('front-assets/images/no_image.jpg') }}'">
                                                    <br><small class="text-muted">{{ ($settings->default_slider_image_mobile && file_exists(public_path($settings->default_slider_image_mobile))) ? basename($settings->default_slider_image_mobile) : 'No hay archivo subido' }}</small>
                                                </div>
                                                @error('default_slider_image_mobile')
                                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="row">
                                <!-- Categorías, Subcategorías y Marcas -->
                                <div class="col-md-4">
                                    <div class="card mb-3">
                                        <div class="card-header">
                                            <h3 class="card-title">Categorías</h3>
                                        </div>
                                        <div class="card-body">
                                            <div class="mb-3">
                                                <label for="default_category_image" class="form-label">Imagen por defecto (512x512px)</label>
                                                <input type="file" name="default_category_image" class="form-control @error('default_category_image') is-invalid @enderror">
                                                <div class="mt-3 text-center">
                                                    <img src="{{ ($settings->default_category_image && file_exists(public_path($settings->default_category_image))) ? asset($settings->default_category_image) : asset('front-assets/images/no_image.jpg') }}"
                                                         alt="Imagen por defecto para categorías" style="max-width: 120px; border: 1px solid #dee2e6; border-radius: 4px;" onerror="this.onerror=null;this.src='{{ asset('front-assets/images/no_image.jpg') }}'">
                                                    <br><small class="text-muted">{{ ($settings->default_category_image && file_exists(public_path($settings->default_category_image))) ? basename($settings->default_category_image) : 'No hay archivo subido' }}</small>
                                                </div>
                                                @error('default_category_image')
                                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="col-md-4">
                                    <div class="card mb-3">
                                        <div class="card-header">
                                            <h3 class="card-title">Subcategorías</h3>
                                        </div>
                                        <div class="card-body">
                                            <div class="mb-3">
                                                <label for="default_subcategory_image" class="form-label">Imagen por defecto (512x512px)</label>
                                                <input type="file" name="default_subcategory_image" class="form-control @error('default_subcategory_image') is-invalid @enderror">
                                                <div class="mt-3 text-center">
                                                    <img src="{{ ($settings->default_subcategory_image && file_exists(public_path($settings->default_subcategory_image))) ? asset($settings->default_subcategory_image) : asset('front-assets/images/no_image.jpg') }}"
                                                         alt="Imagen por defecto para subcategorías" style="max-width: 120px; border: 1px solid #dee2e6; border-radius: 4px;" onerror="this.onerror=null;this.src='{{ asset('front-assets/images/no_image.jpg') }}'">
                                                    <br><small class="text-muted">{{ ($settings->default_subcategory_image && file_exists(public_path($settings->default_subcategory_image))) ? basename($settings->default_subcategory_image) : 'No hay archivo subido' }}</small>
                                                </div>
                                                @error('default_subcategory_image')
                                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="col-md-4">
                                    <div class="card mb-3">
                                        <div class="card-header">
                                            <h3 class="card-title">Marcas</h3>
                                        </div>
                                        <div class="card-body">
                                            <div class="mb-3">
                                                <label for="default_brand_image" class="form-label">Imagen por defecto (512x512px)</label>
                                                <input type="file" name="default_brand_image" class="form-control @error('default_brand_image') is-invalid @enderror">
                                                <div class="mt-3 text-center">
                                                    <img src="{{ ($settings->default_brand_image && file_exists(public_path($settings->default_brand_image))) ? asset($settings->default_brand_image) : asset('front-assets/images/no_image.jpg') }}"
                                                         alt="Imagen por defecto para marcas" style="max-width: 120px; border: 1px solid #dee2e6; border-radius: 4px;" onerror="this.onerror=null;this.src='{{ asset('front-assets/images/no_image.jpg') }}'">
                                                    <br><small class="text-muted">{{ ($settings->default_brand_image && file_exists(public_path($settings->default_brand_image))) ? basename($settings->default_brand_image) : 'No hay archivo subido' }}</small>
                                                </div>
                                                @error('default_brand_image')
                                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
                                    </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> Actualizar Configuración
                                </button>
                                <a href="{{ route('admin.dashboard') }}" 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>
        // Color picker synchronization
        document.getElementById('color_primary').addEventListener('input', function() {
            document.getElementById('color_primary_text').value = this.value;
        });

        document.getElementById('color_primary_text').addEventListener('input', function() {
            document.getElementById('color_primary').value = this.value;
        });

        document.getElementById('color_secondary').addEventListener('input', function() {
            document.getElementById('color_secondary_text').value = this.value;
        });

        document.getElementById('color_secondary_text').addEventListener('input', function() {
            document.getElementById('color_secondary').value = this.value;
        });

        // Font preview functionality
        function updateFontPreview() {
            const primaryFont = document.getElementById('font_primary').value;
            const secondaryFont = document.getElementById('font_secondary').value;
            const fontSize = document.getElementById('font_size_base').value;
            const primaryWeight = document.getElementById('font_weight_primary').value;
            const secondaryWeight = document.getElementById('font_weight_secondary').value;
            
            // Update preview styles
            document.getElementById('preview-title').style.fontFamily = `'${primaryFont}', sans-serif`;
            document.getElementById('preview-title').style.fontWeight = primaryWeight;
            
            document.getElementById('preview-body').style.fontFamily = `'${secondaryFont}', sans-serif`;
            document.getElementById('preview-body').style.fontWeight = secondaryWeight;
            document.getElementById('preview-body').style.fontSize = fontSize + 'px';
            
            document.getElementById('preview-small').style.fontFamily = `'${secondaryFont}', sans-serif`;
            document.getElementById('preview-small').style.fontSize = (fontSize - 2) + 'px';
            
            // Load Google Fonts dynamically
            const fontLink = document.getElementById('dynamic-font-link') || document.createElement('link');
            fontLink.id = 'dynamic-font-link';
            fontLink.rel = 'stylesheet';
            
            const weights = [primaryWeight, secondaryWeight].join(',');
            const fonts = [];
            
            if (primaryFont !== secondaryFont) {
                fonts.push(`${primaryFont.replace(' ', '+')}:wght@${primaryWeight}`);
                fonts.push(`${secondaryFont.replace(' ', '+')}:wght@${secondaryWeight}`);
            } else {
                fonts.push(`${primaryFont.replace(' ', '+')}:wght@${weights}`);
            }
            
            fontLink.href = `https://fonts.googleapis.com/css2?family=${fonts.join('&family=')}&display=swap`;
            
            if (!document.getElementById('dynamic-font-link')) {
                document.head.appendChild(fontLink);
            }
        }
        
        // Add event listeners for font controls
        document.getElementById('font_primary')?.addEventListener('change', updateFontPreview);
        document.getElementById('font_secondary')?.addEventListener('change', updateFontPreview);
        document.getElementById('font_size_base')?.addEventListener('input', updateFontPreview);
        document.getElementById('font_weight_primary')?.addEventListener('change', updateFontPreview);
        document.getElementById('font_weight_secondary')?.addEventListener('change', updateFontPreview);
        
        // Initialize font preview on page load
        if (document.getElementById('font_primary')) {
            updateFontPreview();
        }
    </script>
@endsection