@extends('admin.layouts.app')

@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 del Theme: {{ $theme->name }}</h4>
            <div class="page-title-right">
                <a href="{{ route('admin.themes.index') }}" class="btn btn-primary">Volver</a>
            </div>
        </div>
    </div>
</div>
        @if ($message = Session::get('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ $message }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        @endif

        <form action="{{ route('admin.themes.update', $theme->id) }}" method="post">
            @csrf
            @method('PUT')
            
            <div class="card">
                <div class="card-header">
                    <ul class="nav nav-tabs card-header-tabs" id="themeTabs" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" id="info-tab" data-bs-toggle="tab" href="#info" role="tab">
                                <i class="ri-information-line"></i> Información General
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="colors-primary-tab" data-bs-toggle="tab" href="#colors-primary" role="tab">
                                <i class="ri-palette-line"></i> Colores Principales
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="colors-ui-tab" data-bs-toggle="tab" href="#colors-ui" role="tab">
                                <i class="ri-brush-line"></i> Colores UI
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="colors-alerts-tab" data-bs-toggle="tab" href="#colors-alerts" role="tab">
                                <i class="ri-error-warning-line"></i> Colores de Alertas
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="layout-tab" data-bs-toggle="tab" href="#layout" role="tab">
                                <i class="ri-stack-line"></i> Layout
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="features-tab" data-bs-toggle="tab" href="#features" role="tab">
                                <i class="ri-settings-3-line"></i> Características
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="home-components-tab" data-bs-toggle="tab" href="#home-components" role="tab">
                                <i class="ri-puzzle-line"></i> Componentes del Inicio
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="home-banners-tab" data-bs-toggle="tab" href="#home-banners" role="tab">
                                <i class="ri-image-2-line"></i> Banners del Inicio
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="footer-tab" data-bs-toggle="tab" href="#footer" role="tab">
                                <i class="ri-footprint-line"></i> Footer
                            </a>
                        </li>
                    </ul>
                </div>
                
                <div class="card-body">
                    <div class="tab-content" id="themeTabsContent">
                        
                        {{-- TAB: Información General --}}
                        <div class="tab-pane fade show active" id="info" role="tabpanel">
                            <div class="row">
                                <div class="col-md-8">
                                    <h4>{{ $theme->name }}</h4>
                                    <p class="text-muted">{{ $theme->description }}</p>
                                    
                                    <table class="table table-sm">
                                        <tr>
                                            <th width="200">Código:</th>
                                            <td><code>{{ $theme->code }}</code></td>
                                        </tr>
                                        <tr>
                                            <th>Autor:</th>
                                            <td>{{ $theme->author }}</td>
                                        </tr>
                                        <tr>
                                            <th>Versión:</th>
                                            <td>{{ $theme->version }}</td>
                                        </tr>
                                        <tr>
                                            <th>Ruta de vistas:</th>
                                            <td><code>{{ $theme->views_path }}</code></td>
                                        </tr>
                                        <tr>
                                            <th>Ruta de assets:</th>
                                            <td><code>{{ $theme->assets_path }}</code></td>
                                        </tr>
                                        <tr>
                                            <th>Estado:</th>
                                            <td>
                                                @if($theme->is_active)
                                                    <span class="badge bg-success">Activo</span>
                                                @else
                                                    <span class="badge bg-secondary">Inactivo</span>
                                                @endif
                                                
                                                @if($theme->is_default)
                                                    <span class="badge bg-primary">Por Defecto</span>
                                                @endif
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                                <div class="col-md-4">
                                    @if($theme->screenshot)
                                        <img src="{{ asset($theme->screenshot) }}" class="img-fluid" alt="Theme Preview">
                                    @else
                                        <div class="bg-light p-5 text-center">
                                            <i class="ri-image-line ri-3x text-muted"></i>
                                            <p class="mt-2">Sin preview disponible</p>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                        
                        {{-- TAB: Colores Principales --}}
                        <div class="tab-pane fade" id="colors-primary" role="tabpanel">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label>Color Primario</label>
                                        <div class="input-group">
                                            <input type="color" 
                                                   class="form-control" 
                                                   style="max-width: 100px;"
                                                   name="color_primary" 
                                                   value="{{ $customization->color_primary ?? $theme->color_primary }}">
                                            <input type="text" 
                                                   class="form-control" 
                                                   value="{{ $customization->color_primary ?? $theme->color_primary }}"
                                                   readonly>
                                            <div class="input-group-append">
                                                <span class="input-group-text">
                                                    Por defecto: {{ $theme->color_primary }}
                                                </span>
                                            </div>
                                        </div>
                                        <small class="form-text text-muted">
                                            Color principal del tema (menús, botones, enlaces)
                                        </small>
                                    </div>
                                </div>
                                
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label>Color Secundario</label>
                                        <div class="input-group">
                                            <input type="color" 
                                                   class="form-control" 
                                                   style="max-width: 100px;"
                                                   name="color_secondary" 
                                                   value="{{ $customization->color_secondary ?? $theme->color_secondary }}">
                                            <input type="text" 
                                                   class="form-control" 
                                                   value="{{ $customization->color_secondary ?? $theme->color_secondary }}"
                                                   readonly>
                                            <div class="input-group-append">
                                                <span class="input-group-text">
                                                    Por defecto: {{ $theme->color_secondary }}
                                                </span>
                                            </div>
                                        </div>
                                        <small class="form-text text-muted">
                                            Color de acento (precios especiales, badges)
                                        </small>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        {{-- TAB: Colores UI --}}
                        <div class="tab-pane fade" id="colors-ui" role="tabpanel">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label>Color Oscuro</label>
                                        <div class="input-group">
                                            <input type="color" 
                                                   class="form-control" 
                                                   style="max-width: 100px;"
                                                   name="color_dark" 
                                                   value="{{ $customization->color_dark ?? $theme->color_dark }}">
                                            <input type="text" 
                                                   class="form-control" 
                                                   value="{{ $customization->color_dark ?? $theme->color_dark }}"
                                                   readonly>
                                            <div class="input-group-append">
                                                <span class="input-group-text">
                                                    Por defecto: {{ $theme->color_dark }}
                                                </span>
                                            </div>
                                        </div>
                                        <small class="form-text text-muted">Headers, footers, fondos oscuros</small>
                                    </div>
                                    
                                    <div class="mb-3">
                                        <label>Color Claro</label>
                                        <div class="input-group">
                                            <input type="color" 
                                                   class="form-control" 
                                                   style="max-width: 100px;"
                                                   name="color_light" 
                                                   value="{{ $customization->color_light ?? $theme->color_light }}">
                                            <input type="text" 
                                                   class="form-control" 
                                                   value="{{ $customization->color_light ?? $theme->color_light }}"
                                                   readonly>
                                            <div class="input-group-append">
                                                <span class="input-group-text">
                                                    Por defecto: {{ $theme->color_light }}
                                                </span>
                                            </div>
                                        </div>
                                        <small class="form-text text-muted">Fondos claros, áreas de contenido</small>
                                    </div>
                                </div>
                                
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label>Color de Texto</label>
                                        <div class="input-group">
                                            <input type="color" 
                                                   class="form-control" 
                                                   style="max-width: 100px;"
                                                   name="color_text" 
                                                   value="{{ $customization->color_text ?? $theme->color_text }}">
                                            <input type="text" 
                                                   class="form-control" 
                                                   value="{{ $customization->color_text ?? $theme->color_text }}"
                                                   readonly>
                                            <div class="input-group-append">
                                                <span class="input-group-text">
                                                    Por defecto: {{ $theme->color_text }}
                                                </span>
                                            </div>
                                        </div>
                                        <small class="form-text text-muted">Texto principal del contenido</small>
                                    </div>
                                    
                                    <div class="mb-3">
                                        <label>Color de Bordes</label>
                                        <div class="input-group">
                                            <input type="color" 
                                                   class="form-control" 
                                                   style="max-width: 100px;"
                                                   name="color_border" 
                                                   value="{{ $customization->color_border ?? $theme->color_border }}">
                                            <input type="text" 
                                                   class="form-control" 
                                                   value="{{ $customization->color_border ?? $theme->color_border }}"
                                                   readonly>
                                            <div class="input-group-append">
                                                <span class="input-group-text">
                                                    Por defecto: {{ $theme->color_border }}
                                                </span>
                                            </div>
                                        </div>
                                        <small class="form-text text-muted">Bordes y divisores</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        {{-- TAB: Colores de Alertas --}}
                        <div class="tab-pane fade" id="colors-alerts" role="tabpanel">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label>Color Success</label>
                                        <div class="input-group">
                                            <input type="color" 
                                                   class="form-control" 
                                                   style="max-width: 100px;"
                                                   name="color_success" 
                                                   value="{{ $customization->color_success ?? $theme->color_success }}">
                                            <input type="text" 
                                                   class="form-control" 
                                                   value="{{ $customization->color_success ?? $theme->color_success }}"
                                                   readonly>
                                            <div class="input-group-append">
                                                <span class="input-group-text">
                                                    Por defecto: {{ $theme->color_success }}
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="mb-3">
                                        <label>Color Warning</label>
                                        <div class="input-group">
                                            <input type="color" 
                                                   class="form-control" 
                                                   style="max-width: 100px;"
                                                   name="color_warning" 
                                                   value="{{ $customization->color_warning ?? $theme->color_warning }}">
                                            <input type="text" 
                                                   class="form-control" 
                                                   value="{{ $customization->color_warning ?? $theme->color_warning }}"
                                                   readonly>
                                            <div class="input-group-append">
                                                <span class="input-group-text">
                                                    Por defecto: {{ $theme->color_warning }}
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label>Color Danger</label>
                                        <div class="input-group">
                                            <input type="color" 
                                                   class="form-control" 
                                                   style="max-width: 100px;"
                                                   name="color_danger" 
                                                   value="{{ $customization->color_danger ?? $theme->color_danger }}">
                                            <input type="text" 
                                                   class="form-control" 
                                                   value="{{ $customization->color_danger ?? $theme->color_danger }}"
                                                   readonly>
                                            <div class="input-group-append">
                                                <span class="input-group-text">
                                                    Por defecto: {{ $theme->color_danger }}
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="mb-3">
                                        <label>Color Info</label>
                                        <div class="input-group">
                                            <input type="color" 
                                                   class="form-control" 
                                                   style="max-width: 100px;"
                                                   name="color_info" 
                                                   value="{{ $customization->color_info ?? $theme->color_info }}">
                                            <input type="text" 
                                                   class="form-control" 
                                                   value="{{ $customization->color_info ?? $theme->color_info }}"
                                                   readonly>
                                            <div class="input-group-append">
                                                <span class="input-group-text">
                                                    Por defecto: {{ $theme->color_info }}
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        {{-- TAB: Layout --}}
                        <div class="tab-pane fade" id="layout" role="tabpanel">
                            @if($theme->layout_config)
                                <div class="row">
                                    @foreach($theme->layout_config as $key => $value)
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label>{{ ucwords(str_replace('_', ' ', $key)) }}</label>
                                            <input type="text" class="form-control" value="{{ $value }}" readonly>
                                        </div>
                                    </div>
                                    @endforeach
                                </div>
                            @else
                                <p class="text-muted">No hay configuraciones de layout para este theme</p>
                            @endif
                        </div>
                        
                        {{-- TAB: Características --}}
                        <div class="tab-pane fade" id="features" role="tabpanel">
                            @if($theme->features)
                                <div class="row">
                                    @foreach($theme->features as $feature => $enabled)
                                    <div class="col-md-4">
                                        <div class="custom-control custom-switch mb-3">
                                            <input type="checkbox"
                                                   class="custom-control-input"
                                                   id="feature_{{ $feature }}"
                                                   {{ $enabled ? 'checked' : '' }}
                                                   disabled>
                                            <label class="custom-control-label" for="feature_{{ $feature }}">
                                                {{ ucwords(str_replace('_', ' ', $feature)) }}
                                            </label>
                                        </div>
                                    </div>
                                    @endforeach
                                </div>
                                <small class="text-muted">
                                    <i class="ri-information-line"></i>
                                    Las características están definidas por el theme y no pueden ser modificadas aquí.
                                </small>
                            @else
                                <p class="text-muted">No hay características configurables para este theme</p>
                            @endif
                        </div>

                        {{-- TAB: Home Components --}}
                        <div class="tab-pane fade" id="home-components" role="tabpanel">
                            @php
                                $homeComponents = \App\Models\ThemeHomeComponent::where('theme_id', $theme->id)
                                    ->orderBy('sort_order')
                                    ->get();
                            @endphp

                            @if($homeComponents->isNotEmpty())
                                <div class="alert alert-info">
                                    <i class="ri-information-line"></i>
                                    <strong>Configurar componentes de la Página de Inicio</strong><br>
                                    Active o desactive los componentes que desea mostrar en la página principal.
                                    Esto le permite personalizar completamente qué secciones se muestran para cada cliente.
                                </div>

                                <div class="row" id="home-components-list">
                                    @foreach($homeComponents as $component)
                                    <div class="col-md-6 mb-3">
                                        <div class="card {{ $component->is_active ? 'border-success' : 'border-secondary' }}">
                                            <div class="card-body">
                                                <div class="custom-control custom-switch">
                                                    <input type="checkbox"
                                                           class="custom-control-input component-checkbox"
                                                           id="component_{{ $component->id }}"
                                                           data-component-id="{{ $component->id }}"
                                                           {{ $component->is_active ? 'checked' : '' }}>
                                                    <label class="custom-control-label fw-bold" for="component_{{ $component->id }}">
                                                        {{ $component->component_name }}
                                                    </label>
                                                </div>
                                                <small class="text-muted d-block mt-2">
                                                    <i class="ri-information-line"></i> {{ $component->description }}
                                                </small>
                                                <small class="text-muted d-block">
                                                    <strong>Key:</strong> <code>{{ $component->component_key }}</code>
                                                </small>
                                            </div>
                                        </div>
                                    </div>
                                    @endforeach
                                </div>
                            @else
                                <div class="alert alert-warning">
                                    <i class="ri-error-warning-line"></i>
                                    No hay componentes configurados para este theme.
                                    <a href="#" onclick="event.preventDefault(); if(confirm('¿Desea crear los componentes por defecto?')) { document.getElementById('init-components-form').submit(); }" class="alert-link">
                                        Haga clic aquí para inicializarlos
                                    </a>
                                </div>

                                <form id="init-components-form" action="{{ route('admin.themes.init-components', $theme->id) }}" method="POST">
                                    @csrf
                                </form>
                            @endif
                        </div>

                        {{-- TAB: Banners Home --}}
                        <div class="tab-pane fade" id="home-banners" role="tabpanel">
                            @php
                                $homeBanners = \App\Models\Banner::orderBy('order')->get();
                            @endphp

                            <div class="alert alert-info">
                                <i class="ri-information-line"></i>
                                <strong>Configurar Banners de la Página de Inicio</strong><br>
                                Los banners aparecen en el div <code>id="top"</code> después del category slider.
                                El inicio mostrará los banners que tengan <strong>"Mostrar en Inicio" activado</strong>, limitado a 2 banners.
                                Para gestión completa de banners (crear, editar, subir imágenes), use el
                                <a href="{{ route('banners.index') }}" target="_blank" class="alert-link">
                                    <i class="ri-external-link-line"></i> Módulo de Banners
                                </a>
                            </div>

                            @if($homeBanners->isNotEmpty())
                                <div class="mb-3">
                                    <a href="{{ route('banners.create') }}" class="btn btn-success" target="_blank">
                                        <i class="ri-add-line"></i> Crear Nuevo Banner
                                    </a>
                                    <a href="{{ route('banners.index') }}" class="btn btn-primary" target="_blank">
                                        <i class="ri-image-2-line"></i> Ver Todos los Banners
                                    </a>
                                </div>

                                <div class="row">
                                    @foreach($homeBanners as $banner)
                                    <div class="col-md-6 mb-3">
                                        <div class="card {{ $banner->showHome ? 'border-success' : 'border-secondary' }}">
                                            <div class="card-body">
                                                <div class="d-flex align-items-start">
                                                    @if($banner->image)
                                                        <img src="{{ asset('uploads/banner/thumb/' . $banner->image) }}"
                                                             alt="{{ $banner->display_name }}"
                                                             class="img-thumbnail me-3"
                                                             style="width: 100px; height: auto;">
                                                    @else
                                                        <div class="bg-light text-center me-3" style="width: 100px; height: 80px; display: flex; align-items: center; justify-content: center;">
                                                            <i class="ri-image-line ri-2x text-muted"></i>
                                                        </div>
                                                    @endif

                                                    <div class="flex-grow-1">
                                                        <h5 class="mb-2">{{ $banner->display_name }}</h5>

                                                        <div class="mb-2">
                                                            <span class="badge badge-{{ $banner->status ? 'success' : 'secondary' }}">
                                                                {{ $banner->status ? 'Activo' : 'Inactivo' }}
                                                            </span>
                                                            <span class="badge bg-secondary">Orden: {{ $banner->order }}</span>
                                                        </div>

                                                        <div class="custom-control custom-switch mb-2">
                                                            <input type="checkbox"
                                                                   class="custom-control-input banner-show-home-checkbox"
                                                                   id="banner_show_home_{{ $banner->id }}"
                                                                   data-banner-id="{{ $banner->id }}"
                                                                   {{ $banner->showHome ? 'checked' : '' }}>
                                                            <label class="custom-control-label fw-bold" for="banner_show_home_{{ $banner->id }}">
                                                                Mostrar en Home
                                                            </label>
                                                        </div>

                                                        @if($banner->button_link)
                                                            <small class="text-muted d-block">
                                                                <i class="ri-links-line"></i> {{ $banner->button_link }}
                                                            </small>
                                                        @endif

                                                        <div class="mt-2">
                                                            <a href="{{ route('banners.edit', $banner->id) }}"
                                                               class="btn btn-sm btn-primary"
                                                               target="_blank">
                                                                <i class="ri-pencil-line"></i> Editar
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    @endforeach
                                </div>

                                <div class="alert alert-warning mt-3">
                                    <i class="ri-error-warning-line"></i>
                                    <strong>Nota:</strong> El inicio mostrará máximo <strong>2 banners</strong> con "Mostrar en Inicio" activado,
                                    ordenados según el campo "Orden". Si activa más de 2, solo se mostrarán los 2 primeros.
                                </div>
                            @else
                                <div class="alert alert-warning">
                                    <i class="ri-error-warning-line"></i>
                                    No hay banners creados.
                                    <a href="{{ route('banners.create') }}" target="_blank" class="alert-link">
                                        Haga clic aquí para crear el primer banner
                                    </a>
                                </div>
                            @endif
                        </div>

                        {{-- TAB: Footer --}}
                        <div class="tab-pane fade" id="footer" role="tabpanel">
                            @php
                                $footerSections = \App\Models\FooterSection::where('theme_id', $theme->id)
                                    ->with('allFooterLinks')
                                    ->orderBy('order')
                                    ->get();

                                $footerOptions = \App\Models\ThemeFooterOption::where('theme_id', $theme->id)
                                    ->orderBy('sort_order')
                                    ->get();
                            @endphp

                            {{-- SECCIÓN: Opciones de Visibilidad --}}
                            <div class="card mb-4">
                                <div class="card-header bg-secondary text-white">
                                    <i class="ri-eye-line"></i> <strong>Opciones de Visibilidad</strong>
                                    <small class="d-block">Active o desactive las secciones que desea mostrar en el footer</small>
                                </div>
                                <div class="card-body">
                                    @if($footerOptions->isNotEmpty())
                                        <div class="row" id="footer-options-list">
                                            @foreach($footerOptions as $option)
                                            <div class="col-md-4 col-sm-6 mb-2">
                                                <div class="custom-control custom-switch">
                                                    <input type="checkbox"
                                                           class="custom-control-input footer-option-checkbox"
                                                           id="footer_option_{{ $option->id }}"
                                                           data-option-id="{{ $option->id }}"
                                                           {{ $option->is_active ? 'checked' : '' }}>
                                                    <label class="custom-control-label" for="footer_option_{{ $option->id }}">
                                                        {{ $option->option_name }}
                                                    </label>
                                                </div>
                                            </div>
                                            @endforeach
                                        </div>
                                        <hr>
                                        <button type="button" class="btn btn-primary btn-sm" id="save-footer-options-btn">
                                            <i class="ri-save-line"></i> Guardar Opciones de Visibilidad
                                        </button>
                                    @else
                                        <div class="text-center py-3">
                                            <p class="text-muted mb-2">No hay opciones de visibilidad configuradas.</p>
                                            <form action="{{ route('admin.themes.init-footer-options', $theme->id) }}" method="POST" style="display: inline;">
                                                @csrf
                                                <button type="submit" class="btn btn-outline-primary btn-sm">
                                                    <i class="ri-settings-3-line"></i> Inicializar Opciones
                                                </button>
                                            </form>
                                        </div>
                                    @endif
                                </div>
                            </div>

                            {{-- SECCIÓN: Columnas del Footer --}}
                            <div class="card">
                                <div class="card-header bg-light">
                                    <i class="ri-layout-column-line"></i> <strong>Columnas del Footer</strong>
                                    <small class="d-block text-muted">Administre las columnas y contenido del footer. Puede crear hasta 4 columnas con enlaces o contenido personalizado.</small>
                                </div>
                                <div class="card-body">

                            {{-- Botón para agregar nueva sección --}}
                            <div class="mb-3">
                                <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#addSectionModal">
                                    <i class="ri-add-line"></i> Agregar Nueva Columna
                                </button>
                            </div>

                            {{-- Lista de secciones existentes --}}
                            @if($footerSections->isNotEmpty())
                                <div class="row">
                                    @foreach($footerSections as $section)
                                    <div class="col-md-6 mb-4">
                                        <div class="card {{ $section->active ? 'border-success' : 'border-secondary' }}">
                                            <div class="card-header bg-light d-flex justify-content-between align-items-center">
                                                <div>
                                                    <strong>{{ $section->title }}</strong>
                                                    <span class="badge badge-{{ $section->column_type == 'links' ? 'primary' : 'info' }}">
                                                        {{ $section->column_type == 'links' ? 'Enlaces' : 'Contenido Custom' }}
                                                    </span>
                                                    <span class="badge bg-secondary">Orden: {{ $section->order }}</span>
                                                    @if($section->active)
                                                        <span class="badge bg-success">Activo</span>
                                                    @else
                                                        <span class="badge bg-secondary">Inactivo</span>
                                                    @endif
                                                </div>
                                                <div>
                                                    <button type="button"
                                                            class="btn btn-sm btn-primary"
                                                            onclick="editSection({{ $section->id }}, '{{ $section->title }}', '{{ $section->column_type }}', {{ $section->order }}, {{ $section->active ? 'true' : 'false' }}, {{ json_encode($section->custom_content) }})">
                                                        <i class="ri-pencil-line"></i>
                                                    </button>
                                                    <form action="{{ route('admin.themes.footer.sections.destroy', [$theme->id, $section->id]) }}"
                                                          method="POST"
                                                          style="display: inline-block;"
                                                          onsubmit="return confirm('¿Está seguro de eliminar esta sección? Se eliminarán también todos sus enlaces.')">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="submit" class="btn btn-sm btn-danger">
                                                            <i class="ri-delete-bin-line"></i>
                                                        </button>
                                                    </form>
                                                </div>
                                            </div>
                                            <div class="card-body">
                                                @if($section->column_type == 'links')
                                                    {{-- Mostrar links --}}
                                                    @if($section->allFooterLinks->isNotEmpty())
                                                        <ul class="list-group list-group-flush">
                                                            @foreach($section->allFooterLinks as $link)
                                                            <li class="list-group-item d-flex justify-content-between align-items-center {{ !$link->active ? 'bg-light text-muted' : '' }}">
                                                                <div>
                                                                    <strong class="{{ !$link->active ? 'text-muted' : '' }}">
                                                                        @if(!$link->active)<s>@endif
                                                                        {{ $link->title }}
                                                                        @if(!$link->active)</s>@endif
                                                                    </strong>
                                                                    @if($link->active)
                                                                        <span class="badge bg-success">Activo</span>
                                                                    @else
                                                                        <span class="badge bg-danger">Inactivo</span>
                                                                    @endif
                                                                    <br>
                                                                    <small class="text-muted">
                                                                        <i class="ri-links-line"></i> {{ $link->url }}
                                                                        @if($link->is_external)
                                                                            <span class="badge bg-info">Externo</span>
                                                                        @endif
                                                                        <span class="badge bg-secondary">Orden: {{ $link->order }}</span>
                                                                    </small>
                                                                </div>
                                                                <div>
                                                                    <button type="button"
                                                                            class="btn btn-sm btn-primary"
                                                                            onclick="editLink({{ $section->id }}, {{ $link->id }}, {{ json_encode($link->title) }}, {{ json_encode($link->url) }}, {{ $link->is_external ? 'true' : 'false' }}, {{ $link->order }}, {{ $link->active ? 'true' : 'false' }})">
                                                                        <i class="ri-pencil-line"></i>
                                                                    </button>
                                                                    <form action="{{ route('admin.themes.footer.links.destroy', [$theme->id, $section->id, $link->id]) }}"
                                                                          method="POST"
                                                                          style="display: inline-block;"
                                                                          onsubmit="return confirm('¿Está seguro de eliminar este enlace?')">
                                                                        @csrf
                                                                        @method('DELETE')
                                                                        <button type="submit" class="btn btn-sm btn-danger">
                                                                            <i class="ri-delete-bin-line"></i>
                                                                        </button>
                                                                    </form>
                                                                </div>
                                                            </li>
                                                            @endforeach
                                                        </ul>
                                                    @else
                                                        <p class="text-muted text-center mb-0">No hay enlaces en esta sección</p>
                                                    @endif

                                                    {{-- Botón para agregar link --}}
                                                    <button type="button"
                                                            class="btn btn-sm btn-success mt-3 w-100"
                                                            onclick="showAddLinkModal({{ $section->id }})">
                                                        <i class="ri-add-line"></i> Agregar Enlace
                                                    </button>
                                                @else
                                                    {{-- Mostrar contenido custom --}}
                                                    <div class="bg-light p-3 rounded">
                                                        {!! $section->custom_content !!}
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    @endforeach
                                </div>
                            @else
                                <div class="alert alert-warning">
                                    <i class="ri-error-warning-line"></i>
                                    No hay secciones de footer configuradas para este theme. Haga clic en "Agregar Nueva Columna" para comenzar.
                                </div>
                            @endif

                                </div>{{-- card-body de Columnas --}}
                            </div>{{-- card de Columnas --}}
                        </div>{{-- tab footer --}}

                    </div>
                </div>

                <div class="card-footer">
                    {{-- Botones para tabs de colores --}}
                    <div id="color-buttons">
                        <button type="submit" class="btn btn-primary">
                            <i class="ri-save-line"></i> Guardar Cambios
                        </button>
                        <a href="{{ route('admin.themes.reset-colors', $theme->id) }}"
                           class="btn btn-warning"
                           onclick="return confirm('¿Restaurar todos los colores a sus valores por defecto?')">
                            <i class="ri-arrow-go-back-line"></i> Restaurar Colores
                        </a>
                        <a href="{{ route('admin.themes.index') }}" class="btn btn-secondary">
                            <i class="ri-close-line"></i> Cancelar
                        </a>
                    </div>

                    {{-- Botones para tab Home Components --}}
                    <div id="components-buttons" style="display: none;">
                        <button type="button" class="btn btn-primary" id="save-components-btn">
                            <i class="ri-save-line"></i> Guardar Configuración
                        </button>
                        <a href="{{ route('admin.themes.index') }}" class="btn btn-secondary">
                            <i class="ri-close-line"></i> Cancelar
                        </a>
                    </div>

                </div>
            </div>
        </form>

        {{-- MODALES PARA FOOTER --}}

        {{-- Modal: Agregar Sección --}}
        <div class="modal fade" id="addSectionModal" tabindex="-1" role="dialog">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <form action="{{ route('admin.themes.footer.sections.store', $theme->id) }}" method="POST">
                        @csrf
                        <div class="modal-header">
                            <h5 class="modal-title">Agregar Nueva Columna al Footer</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal">
                                <span>&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <div class="mb-3">
                                <label>Título de la Columna <span class="text-danger">*</span></label>
                                <input type="text" name="title" class="form-control" required placeholder="Ej: Guía de Compras">
                            </div>

                            <div class="mb-3">
                                <label>Tipo de Contenido <span class="text-danger">*</span></label>
                                <select name="column_type" id="add_column_type" class="form-select" required>
                                    <option value="links">Enlaces (lista de links)</option>
                                    <option value="custom_content">Contenido Personalizado (HTML)</option>
                                </select>
                            </div>

                            <div class="mb-3" id="add_custom_content_group" style="display: none;">
                                <label>Contenido Personalizado</label>
                                <textarea name="custom_content" class="form-control" rows="5" placeholder="Ingrese HTML personalizado (dirección, teléfono, etc.)"></textarea>
                                <small class="text-muted">Puede usar HTML para dar formato al contenido</small>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label>Orden (1-4) <span class="text-danger">*</span></label>
                                        <input type="number" name="order" class="form-control" min="1" max="4" value="1" required>
                                        <small class="text-muted">La columna se mostrará en esta posición</small>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label>&nbsp;</label>
                                        <div class="custom-control custom-switch">
                                            <input type="checkbox" class="custom-control-input" id="add_active" name="active" checked>
                                            <label class="custom-control-label" for="add_active">Columna Activa</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                            <button type="submit" class="btn btn-primary">
                                <i class="ri-save-line"></i> Guardar Columna
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        {{-- Modal: Editar Sección --}}
        <div class="modal fade" id="editSectionModal" tabindex="-1" role="dialog">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <form id="editSectionForm" method="POST">
                        @csrf
                        @method('PUT')
                        <div class="modal-header">
                            <h5 class="modal-title">Editar Columna del Footer</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal">
                                <span>&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <div class="mb-3">
                                <label>Título de la Columna <span class="text-danger">*</span></label>
                                <input type="text" name="title" id="edit_title" class="form-control" required>
                            </div>

                            <div class="mb-3">
                                <label>Tipo de Contenido <span class="text-danger">*</span></label>
                                <select name="column_type" id="edit_column_type" class="form-select" required>
                                    <option value="links">Enlaces (lista de links)</option>
                                    <option value="custom_content">Contenido Personalizado (HTML)</option>
                                </select>
                            </div>

                            <div class="mb-3" id="edit_custom_content_group">
                                <label>Contenido Personalizado</label>
                                <textarea name="custom_content" id="edit_custom_content" class="form-control" rows="5"></textarea>
                                <small class="text-muted">Puede usar HTML para dar formato al contenido</small>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label>Orden (1-4) <span class="text-danger">*</span></label>
                                        <input type="number" name="order" id="edit_order" class="form-control" min="1" max="4" required>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label>&nbsp;</label>
                                        <div class="custom-control custom-switch">
                                            <input type="checkbox" class="custom-control-input" id="edit_active" name="active">
                                            <label class="custom-control-label" for="edit_active">Columna Activa</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                            <button type="submit" class="btn btn-primary">
                                <i class="ri-save-line"></i> Actualizar Columna
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        {{-- Modal: Agregar Link --}}
        <div class="modal fade" id="addLinkModal" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <form id="addLinkForm" method="POST">
                        @csrf
                        <div class="modal-header">
                            <h5 class="modal-title">Agregar Enlace</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal">
                                <span>&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <div class="mb-3">
                                <label>Texto del Enlace <span class="text-danger">*</span></label>
                                <input type="text" name="title" class="form-control" required placeholder="Ej: Blog">
                            </div>

                            <div class="mb-3">
                                <label>URL <span class="text-danger">*</span></label>
                                <input type="text" name="url" class="form-control" required placeholder="Ej: /blog o https://ejemplo.com">
                                <small class="text-muted">URLs internas: /blog, /contacto | URLs externas: https://...</small>
                            </div>

                            <div class="mb-3">
                                <div class="custom-control custom-switch">
                                    <input type="checkbox" class="custom-control-input" id="add_link_is_external" name="is_external">
                                    <label class="custom-control-label" for="add_link_is_external">
                                        Enlace Externo (abrir en nueva pestaña)
                                    </label>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label>Orden <span class="text-danger">*</span></label>
                                        <input type="number" name="order" class="form-control" min="1" value="1" required>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label>&nbsp;</label>
                                        <div class="custom-control custom-switch">
                                            <input type="checkbox" class="custom-control-input" id="add_link_active" name="active" checked>
                                            <label class="custom-control-label" for="add_link_active">Enlace Activo</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                            <button type="submit" class="btn btn-primary">
                                <i class="ri-save-line"></i> Guardar Enlace
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        {{-- Modal: Editar Link --}}
        <div class="modal fade" id="editLinkModal" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <form id="editLinkForm" method="POST">
                        @csrf
                        @method('PUT')
                        <div class="modal-header">
                            <h5 class="modal-title">Editar Enlace</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal">
                                <span>&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <div class="mb-3">
                                <label>Texto del Enlace <span class="text-danger">*</span></label>
                                <input type="text" name="title" id="edit_link_title" class="form-control" required>
                            </div>

                            <div class="mb-3">
                                <label>URL <span class="text-danger">*</span></label>
                                <input type="text" name="url" id="edit_link_url" class="form-control" required>
                                <small class="text-muted">URLs internas: /blog, /contacto | URLs externas: https://...</small>
                            </div>

                            <div class="mb-3">
                                <div class="custom-control custom-switch">
                                    <input type="checkbox" class="custom-control-input" id="edit_link_is_external" name="is_external">
                                    <label class="custom-control-label" for="edit_link_is_external">
                                        Enlace Externo (abrir en nueva pestaña)
                                    </label>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label>Orden <span class="text-danger">*</span></label>
                                        <input type="number" name="order" id="edit_link_order" class="form-control" min="1" required>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label>&nbsp;</label>
                                        <div class="custom-control custom-switch">
                                            <input type="checkbox" class="custom-control-input" id="edit_link_active" name="active">
                                            <label class="custom-control-label" for="edit_link_active">Enlace Activo</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                            <button type="submit" class="btn btn-primary">
                                <i class="ri-save-line"></i> Actualizar Enlace
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>


@push('js')
<script>
    console.log('🚀 Script de themes/edit cargado');
    console.log('🔍 Verificando elementos DOM...');
    console.log('color-buttons existe?', document.getElementById('color-buttons') !== null);
    console.log('components-buttons existe?', document.getElementById('components-buttons') !== null);
    console.log('save-components-btn existe?', document.getElementById('save-components-btn') !== null);

    // Función para activar tab según URL query param o hash
    function activateTabFromHash() {
        // Leer parámetro ?tab=footer de la URL
        const urlParams = new URLSearchParams(window.location.search);
        const tabParam = urlParams.get('tab');
        const hash = window.location.hash;

        console.log('🔍 URL params tab:', tabParam);
        console.log('🔍 Hash actual en URL:', hash);

        let tabId = null;

        // Prioridad 1: Parámetro de query string ?tab=footer
        if (tabParam) {
            tabId = tabParam;
            console.log('✅ Tab desde query param:', tabId);
        }
        // Prioridad 2: Hash en URL
        else if (hash) {
            tabId = hash.substring(1);
            console.log('✅ Tab desde hash:', tabId);
        }

        if (tabId) {
            const tabLink = document.querySelector(`#${tabId}-tab`);

            if (tabLink) {
                console.log('🔗 Activando tab:', tabId);

                // Usar el método de Bootstrap para activar el tab
                $(tabLink).tab('show');

                console.log('✅ Tab activado con Bootstrap:', tabId);

                // Forzar actualización de botones
                setTimeout(updateButtonsVisibility, 100);
            } else {
                console.warn('⚠️ No se encontró el tab:', tabId);
            }
        }
    }

    // Activar tab al cargar la página
    setTimeout(activateTabFromHash, 150);

    // Sincronizar color picker con input de texto
    document.querySelectorAll('input[type="color"]').forEach(function(colorInput) {
        colorInput.addEventListener('change', function() {
            this.nextElementSibling.value = this.value;
        });
    });

    // Mostrar/Ocultar botones según tab activo
    function updateButtonsVisibility() {
        const activeTab = document.querySelector('#themeTabs .nav-link.active');
        const colorButtons = document.getElementById('color-buttons');
        const componentsButtons = document.getElementById('components-buttons');

        console.log('🔍 Detectando tab activo...');
        console.log('Tab activo:', activeTab ? activeTab.id : 'NINGUNO');
        console.log('Href del tab:', activeTab ? activeTab.getAttribute('href') : 'N/A');

        if (!colorButtons || !componentsButtons) {
            console.error('❌ No se encontraron los contenedores de botones');
            return;
        }

        // Verificar por el href del tab activo (más confiable)
        const activeHref = activeTab ? activeTab.getAttribute('href') : '';

        if (activeHref === '#home-components' || (activeTab && activeTab.id === 'home-components-tab')) {
            // Estamos en Home Components
            console.log('✅ Mostrando botones de componentes');
            colorButtons.style.display = 'none';
            componentsButtons.style.display = 'block';
        } else if (activeHref === '#footer' || (activeTab && activeTab.id === 'footer-tab')) {
            // Estamos en Footer (no necesita botones porque usa modales y AJAX)
            console.log('✅ Tab Footer - Ocultando todos los botones');
            colorButtons.style.display = 'none';
            componentsButtons.style.display = 'none';
        } else {
            // Estamos en cualquier otro tab
            console.log('✅ Mostrando botones de colores');
            colorButtons.style.display = 'block';
            componentsButtons.style.display = 'none';
        }
    }

    // Ejecutar al cargar la página (con delay para asegurar que DOM está listo)
    setTimeout(updateButtonsVisibility, 100);

    // Ejecutar al cambiar de tab - probando múltiples eventos
    const tabLinks = document.querySelectorAll('#themeTabs a[data-bs-toggle="tab"]');
    console.log('📋 Tabs encontrados:', tabLinks.length);

    tabLinks.forEach(function(tab) {
        console.log('🔗 Registrando eventos para tab:', tab.id, tab.getAttribute('href'));

        // Evento de Bootstrap
        tab.addEventListener('shown.bs.tab', function(e) {
            console.log('🔄 [shown.bs.tab] Cambio de tab detectado:', e.target.id, '→', e.target.getAttribute('href'));
            updateButtonsVisibility();
        });

        // Evento click adicional como fallback
        tab.addEventListener('click', function(e) {
            console.log('🖱️ [click] Click en tab:', this.id, '→', this.getAttribute('href'));
            // Esperar a que Bootstrap cambie el tab
            setTimeout(updateButtonsVisibility, 50);
        });
    });

    // Manejar el guardado de componentes
    const saveComponentsBtn = document.getElementById('save-components-btn');

    if (saveComponentsBtn) {
        console.log('✅ Botón de guardar componentes encontrado');

        saveComponentsBtn.addEventListener('click', function() {
            console.log('🔵 Click en Guardar Configuración detectado');

            const components = {};

            // Recolectar estado de todos los checkboxes
            document.querySelectorAll('.component-checkbox').forEach(function(checkbox) {
                const componentId = checkbox.getAttribute('data-component-id');
                components[componentId] = checkbox.checked ? 1 : 0;
                console.log(`Component ${componentId}: ${checkbox.checked ? 'ACTIVO' : 'INACTIVO'}`);
            });

            console.log('📦 Datos a enviar:', components);

            // Mostrar loading
            const btn = this;
            const originalText = btn.innerHTML;
            btn.disabled = true;
            btn.innerHTML = '<i class="ri-loader-line fa-spin"></i> Guardando...';

            // Enviar datos con AJAX
            const url = '{{ route('admin.themes.update-components', $theme->id) }}';
            console.log('🌐 URL:', url);

            fetch(url, {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json'
                },
                body: JSON.stringify({ components: components })
            })
            .then(response => {
                console.log('📡 Respuesta recibida:', response.status);
                return response.json();
            })
            .then(data => {
                console.log('✅ Datos recibidos:', data);
                btn.disabled = false;
                btn.innerHTML = originalText;

                if (data.success) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Éxito',
                        text: data.message || 'Configuración de componentes actualizada exitosamente',
                        timer: 2000,
                        showConfirmButton: false
                    });

                    // Actualizar bordes de las tarjetas
                    document.querySelectorAll('.component-checkbox').forEach(function(checkbox) {
                        const card = checkbox.closest('.card');
                        if (checkbox.checked) {
                            card.classList.remove('border-secondary');
                            card.classList.add('border-success');
                        } else {
                            card.classList.remove('border-success');
                            card.classList.add('border-secondary');
                        }
                    });
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: data.message || 'Error al guardar la configuración'
                    });
                }
            })
            .catch(error => {
                console.error('❌ Error completo:', error);
                btn.disabled = false;
                btn.innerHTML = originalText;
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Error de conexión. Por favor, intente nuevamente.'
                });
            });
        });
    } else {
        console.error('❌ ERROR: No se encontró el botón save-components-btn');
    }

    // Actualizar borde de tarjeta al cambiar checkbox
    document.querySelectorAll('.component-checkbox').forEach(function(checkbox) {
        checkbox.addEventListener('change', function() {
            const card = this.closest('.card');
            if (this.checked) {
                card.classList.remove('border-secondary');
                card.classList.add('border-success');
            } else {
                card.classList.remove('border-success');
                card.classList.add('border-secondary');
            }
        });
    });

    // ========================================
    // FOOTER OPTIONS (Visibilidad) JAVASCRIPT
    // ========================================

    // Manejar el guardado de opciones de visibilidad del footer
    const saveFooterOptionsBtn = document.getElementById('save-footer-options-btn');

    if (saveFooterOptionsBtn) {
        saveFooterOptionsBtn.addEventListener('click', function() {
            const options = {};

            // Recolectar estado de todos los checkboxes
            document.querySelectorAll('.footer-option-checkbox').forEach(function(checkbox) {
                const optionId = checkbox.getAttribute('data-option-id');
                options[optionId] = checkbox.checked ? 1 : 0;
            });

            // Mostrar loading
            const btn = this;
            const originalText = btn.innerHTML;
            btn.disabled = true;
            btn.innerHTML = '<i class="ri-loader-line fa-spin"></i> Guardando...';

            // Enviar datos con AJAX
            fetch('{{ route('admin.themes.update-footer-options', $theme->id) }}', {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json'
                },
                body: JSON.stringify({ options: options })
            })
            .then(response => response.json())
            .then(data => {
                btn.disabled = false;
                btn.innerHTML = originalText;

                if (data.success) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Éxito',
                        text: data.message || 'Opciones de visibilidad actualizadas',
                        timer: 2000,
                        showConfirmButton: false
                    });
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: data.message || 'Error al guardar'
                    });
                }
            })
            .catch(error => {
                btn.disabled = false;
                btn.innerHTML = originalText;
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Error de conexión'
                });
            });
        });
    }

    // ========================================
    // FOOTER MANAGEMENT JAVASCRIPT
    // ========================================

    // Mostrar/Ocultar campo de contenido personalizado en modal de agregar
    const addColumnTypeSelect = document.getElementById('add_column_type');
    const addCustomContentGroup = document.getElementById('add_custom_content_group');

    if (addColumnTypeSelect && addCustomContentGroup) {
        addColumnTypeSelect.addEventListener('change', function() {
            if (this.value === 'custom_content') {
                addCustomContentGroup.style.display = 'block';
            } else {
                addCustomContentGroup.style.display = 'none';
            }
        });
    }

    // Mostrar/Ocultar campo de contenido personalizado en modal de editar
    const editColumnTypeSelect = document.getElementById('edit_column_type');
    const editCustomContentGroup = document.getElementById('edit_custom_content_group');

    if (editColumnTypeSelect && editCustomContentGroup) {
        editColumnTypeSelect.addEventListener('change', function() {
            if (this.value === 'custom_content') {
                editCustomContentGroup.style.display = 'block';
            } else {
                editCustomContentGroup.style.display = 'none';
            }
        });
    }

    // Función para editar sección
    window.editSection = function(sectionId, title, columnType, order, active, customContent) {
        console.log('Editando sección:', sectionId, title, columnType, order, active);

        const form = document.getElementById('editSectionForm');
        const themeId = {{ $theme->id }};

        // Configurar action del formulario
        form.action = '/admin/themes/' + themeId + '/footer/sections/' + sectionId;

        // Llenar campos
        document.getElementById('edit_title').value = title;
        document.getElementById('edit_column_type').value = columnType;
        document.getElementById('edit_order').value = order;
        document.getElementById('edit_active').checked = active;
        document.getElementById('edit_custom_content').value = customContent || '';

        // Mostrar/ocultar custom content group
        if (columnType === 'custom_content') {
            editCustomContentGroup.style.display = 'block';
        } else {
            editCustomContentGroup.style.display = 'none';
        }

        // Mostrar modal
        $('#editSectionModal').modal('show');
    };

    // Función para mostrar modal de agregar link
    window.showAddLinkModal = function(sectionId) {
        console.log('Agregando link a sección:', sectionId);

        const form = document.getElementById('addLinkForm');
        const themeId = {{ $theme->id }};

        // Configurar action del formulario
        form.action = '/admin/themes/' + themeId + '/footer/sections/' + sectionId + '/links';

        // Limpiar campos
        form.reset();
        document.getElementById('add_link_active').checked = true;

        // Mostrar modal
        $('#addLinkModal').modal('show');
    };

    // Función para editar link
    window.editLink = function(sectionId, linkId, title, url, isExternal, order, active) {
        console.log('Editando link:', linkId, title, url, isExternal, order, active);

        const form = document.getElementById('editLinkForm');
        const themeId = {{ $theme->id }};

        // Configurar action del formulario
        form.action = '/admin/themes/' + themeId + '/footer/sections/' + sectionId + '/links/' + linkId;

        // Llenar campos
        document.getElementById('edit_link_title').value = title;
        document.getElementById('edit_link_url').value = url;
        document.getElementById('edit_link_is_external').checked = isExternal;
        document.getElementById('edit_link_order').value = order;
        document.getElementById('edit_link_active').checked = active;

        // Mostrar modal
        $('#editLinkModal').modal('show');
    };

    // ========================================
    // BANNERS HOME MANAGEMENT JAVASCRIPT
    // ========================================

    // Manejar el toggle de "Show Home" para banners
    document.querySelectorAll('.banner-show-home-checkbox').forEach(function(checkbox) {
        checkbox.addEventListener('change', function() {
            const bannerId = this.getAttribute('data-banner-id');
            const showHome = this.checked ? 1 : 0;
            const card = this.closest('.card');

            console.log('Actualizando showHome para banner:', bannerId, 'Nuevo valor:', showHome);

            // Enviar solicitud AJAX
            fetch('/admin/banners/' + bannerId + '/toggle-show-home', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json'
                },
                body: JSON.stringify({ showHome: showHome })
            })
            .then(response => response.json())
            .then(data => {
                if (data.status) {
                    // Actualizar el borde de la tarjeta
                    if (showHome) {
                        card.classList.remove('border-secondary');
                        card.classList.add('border-success');
                    } else {
                        card.classList.remove('border-success');
                        card.classList.add('border-secondary');
                    }

                    // Mostrar notificación de éxito
                    Swal.fire({
                        icon: 'success',
                        title: 'Actualizado',
                        text: data.message,
                        timer: 2000,
                        showConfirmButton: false,
                        toast: true,
                        position: 'top-end'
                    });
                } else {
                    // Revertir el checkbox si hay error
                    checkbox.checked = !checkbox.checked;

                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: data.message || 'Error al actualizar el banner'
                    });
                }
            })
            .catch(error => {
                console.error('Error:', error);

                // Revertir el checkbox si hay error
                checkbox.checked = !checkbox.checked;

                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Error de conexión. Por favor, intente nuevamente.'
                });
            });
        });
    });
</script>
@endpush

@endsection