@extends('layouts.app')

@section('title', 'Configuración de Temas')

@section('content')
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="{{ asset('css/temas.css') }}">
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Configuración de Temas y Apariencia</h3>
                </div>
                <div class="card-body">
                    <!-- Temas disponibles -->
                    <div class="row mb-4">
                        <div class="col-md-12">
                            <h5>Temas Disponibles</h5>
                            <div class="row">
                                <div class="col-md-3 mb-3">
                                    <div class="card theme-card" data-theme="light">
                                        <div class="card-body text-center">
                                            <div class="theme-preview light-theme">
                                                <div class="preview-header bg-primary"></div>
                                                <div class="preview-content bg-white"></div>
                                                <div class="preview-sidebar bg-light"></div>
                                            </div>
                                            <h6 class="mt-3">Tema Claro</h6>
                                            <p class="text-muted">Diseño tradicional con fondo blanco</p>
                                            <button class="btn btn-outline-primary btn-sm" onclick="aplicarTema('light')">
                                                Aplicar
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3 mb-3">
                                    <div class="card theme-card" data-theme="dark">
                                        <div class="card-body text-center">
                                            <div class="theme-preview dark-theme">
                                                <div class="preview-header bg-dark"></div>
                                                <div class="preview-content bg-dark"></div>
                                                <div class="preview-sidebar bg-secondary"></div>
                                            </div>
                                            <h6 class="mt-3">Tema Oscuro</h6>
                                            <p class="text-muted">Diseño moderno con fondo oscuro</p>
                                            <button class="btn btn-outline-primary btn-sm" onclick="aplicarTema('dark')">
                                                Aplicar
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3 mb-3">
                                    <div class="card theme-card" data-theme="blue">
                                        <div class="card-body text-center">
                                            <div class="theme-preview blue-theme">
                                                <div class="preview-header bg-primary"></div>
                                                <div class="preview-content bg-light"></div>
                                                <div class="preview-sidebar bg-info"></div>
                                            </div>
                                            <h6 class="mt-3">Tema Azul</h6>
                                            <p class="text-muted">Esquema de colores azul profesional</p>
                                            <button class="btn btn-outline-primary btn-sm" onclick="aplicarTema('blue')">
                                                Aplicar
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3 mb-3">
                                    <div class="card theme-card" data-theme="green">
                                        <div class="card-body text-center">
                                            <div class="theme-preview green-theme">
                                                <div class="preview-header bg-success"></div>
                                                <div class="preview-content bg-light"></div>
                                                <div class="preview-sidebar bg-success"></div>
                                            </div>
                                            <h6 class="mt-3">Tema Verde</h6>
                                            <p class="text-muted">Esquema de colores verde natural</p>
                                            <button class="btn btn-outline-primary btn-sm" onclick="aplicarTema('green')">
                                                Aplicar
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Personalización avanzada -->
                    <div class="row">
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">
                                    <h5>Personalización de Colores</h5>
                                </div>
                                <div class="card-body">
                                    <form id="personalizacionForm">
                                        <div class="form-group">
                                            <label for="color_primario">Color Primario</label>
                                            <input type="color" id="color_primario" class="form-control" value="#007bff">
                                        </div>
                                        <div class="form-group">
                                            <label for="color_secundario">Color Secundario</label>
                                            <input type="color" id="color_secundario" class="form-control" value="#6c757d">
                                        </div>
                                        <div class="form-group">
                                            <label for="color_exito">Color de Éxito</label>
                                            <input type="color" id="color_exito" class="form-control" value="#28a745">
                                        </div>
                                        <div class="form-group">
                                            <label for="color_peligro">Color de Peligro</label>
                                            <input type="color" id="color_peligro" class="form-control" value="#dc3545">
                                        </div>
                                        <div class="form-group">
                                            <label for="color_advertencia">Color de Advertencia</label>
                                            <input type="color" id="color_advertencia" class="form-control" value="#ffc107">
                                        </div>
                                        <div class="form-group">
                                            <label for="color_info">Color de Información</label>
                                            <input type="color" id="color_info" class="form-control" value="#17a2b8">
                                        </div>
                                        <button type="submit" class="btn btn-primary">
                                            <i class="fas fa-save"></i> Guardar Colores
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">
                                    <h5>Configuración de Fuentes</h5>
                                </div>
                                <div class="card-body">
                                    <form id="fuentesForm">
                                        <div class="form-group">
                                            <label for="fuente_principal">Fuente Principal</label>
                                            <select id="fuente_principal" class="form-control">
                                                <option value="Arial, sans-serif">Arial</option>
                                                <option value="Helvetica, sans-serif">Helvetica</option>
                                                <option value="Georgia, serif">Georgia</option>
                                                <option value="Times New Roman, serif">Times New Roman</option>
                                                <option value="Courier New, monospace">Courier New</option>
                                                <option value="Verdana, sans-serif">Verdana</option>
                                                <option value="Trebuchet MS, sans-serif">Trebuchet MS</option>
                                                <option value="Impact, sans-serif">Impact</option>
                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <label for="tamaño_fuente">Tamaño de Fuente Base</label>
                                            <select id="tamaño_fuente" class="form-control">
                                                <option value="12px">Pequeño (12px)</option>
                                                <option value="14px" selected>Mediano (14px)</option>
                                                <option value="16px">Grande (16px)</option>
                                                <option value="18px">Muy Grande (18px)</option>
                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <label for="peso_fuente">Peso de Fuente</label>
                                            <select id="peso_fuente" class="form-control">
                                                <option value="300">Ligero</option>
                                                <option value="400" selected>Normal</option>
                                                <option value="500">Medio</option>
                                                <option value="600">Semi-negrita</option>
                                                <option value="700">Negrita</option>
                                            </select>
                                        </div>
                                        <button type="submit" class="btn btn-primary">
                                            <i class="fas fa-font"></i> Aplicar Fuentes
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Configuración de layout -->
                    <div class="row mt-4">
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">
                                    <h5>Configuración de Layout</h5>
                                </div>
                                <div class="card-body">
                                    <form id="layoutForm">
                                        <div class="form-group">
                                            <label for="ancho_sidebar">Ancho del Sidebar</label>
                                            <select id="ancho_sidebar" class="form-control">
                                                <option value="200px">Pequeño (200px)</option>
                                                <option value="250px" selected>Mediano (250px)</option>
                                                <option value="300px">Grande (300px)</option>
                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <label for="posicion_sidebar">Posición del Sidebar</label>
                                            <select id="posicion_sidebar" class="form-control">
                                                <option value="left" selected>Izquierda</option>
                                                <option value="right">Derecha</option>
                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <div class="form-check">
                                                <input type="checkbox" id="sidebar_colapsable" class="form-check-input" checked>
                                                <label for="sidebar_colapsable" class="form-check-label">Sidebar Colapsable</label>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="form-check">
                                                <input type="checkbox" id="breadcrumbs" class="form-check-input" checked>
                                                <label for="breadcrumbs" class="form-check-label">Mostrar Breadcrumbs</label>
                                            </div>
                                        </div>
                                        <button type="submit" class="btn btn-primary">
                                            <i class="fas fa-cog"></i> Aplicar Layout
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">
                                    <h5>Vista Previa en Tiempo Real</h5>
                                </div>
                                <div class="card-body">
                                    <div id="vistaPrevia" class="theme-preview-container">
                                        <div class="preview-layout">
                                            <div class="preview-header bg-primary">
                                                <span class="text-white">Header</span>
                                            </div>
                                            <div class="preview-body">
                                                <div class="preview-sidebar bg-light">
                                                    <span>Sidebar</span>
                                                </div>
                                                <div class="preview-content bg-white">
                                                    <div class="preview-card">
                                                        <h6>Tarjeta de Ejemplo</h6>
                                                        <p>Este es un ejemplo de cómo se verá el contenido con la configuración actual.</p>
                                                        <button class="btn btn-primary btn-sm">Botón Primario</button>
                                                        <button class="btn btn-secondary btn-sm">Botón Secundario</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Configuración avanzada -->
                    <div class="row mt-4">
                        <div class="col-md-12">
                            <div class="card">
                                <div class="card-header">
                                    <h5>Configuración Avanzada</h5>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label for="animaciones">Animaciones</label>
                                                <select id="animaciones" class="form-control">
                                                    <option value="enabled" selected>Habilitadas</option>
                                                    <option value="disabled">Deshabilitadas</option>
                                                    <option value="reduced">Reducidas</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label for="transiciones">Transiciones</label>
                                                <select id="transiciones" class="form-control">
                                                    <option value="fast">Rápidas (0.2s)</option>
                                                    <option value="normal" selected>Normales (0.3s)</option>
                                                    <option value="slow">Lentas (0.5s)</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label for="esquinas">Esquinas Redondeadas</label>
                                                <select id="esquinas" class="form-control">
                                                    <option value="none">Sin redondeo</option>
                                                    <option value="small" selected>Pequeño</option>
                                                    <option value="medium">Mediano</option>
                                                    <option value="large">Grande</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <div class="form-check">
                                                    <input type="checkbox" id="sombras" class="form-check-input" checked>
                                                    <label for="sombras" class="form-check-label">Mostrar Sombras</label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <div class="form-check">
                                                    <input type="checkbox" id="efectos_hover" class="form-check-input" checked>
                                                    <label for="efectos_hover" class="form-check-label">Efectos Hover</label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <button type="button" class="btn btn-primary" onclick="aplicarConfiguracionAvanzada()">
                                        <i class="fas fa-magic"></i> Aplicar Configuración Avanzada
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Acciones -->
                    <div class="row mt-4">
                        <div class="col-md-12">
                            <div class="card">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between">
                                        <div>
                                            <button type="button" class="btn btn-success" onclick="guardarTemaPersonalizado()">
                                                <i class="fas fa-save"></i> Guardar Tema Personalizado
                                            </button>
                                            <button type="button" class="btn btn-info" onclick="exportarTema()">
                                                <i class="fas fa-download"></i> Exportar Tema
                                            </button>
                                        </div>
                                        <div>
                                            <button type="button" class="btn btn-warning" onclick="restablecerTema()">
                                                <i class="fas fa-undo"></i> Restablecer Tema
                                            </button>
                                            <button type="button" class="btn btn-secondary" onclick="aplicarTema('light')">
                                                <i class="fas fa-sun"></i> Tema por Defecto
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Aplicar tema
function aplicarTema(tema) {
    // Aplicar tema visualmente
    document.body.className = document.body.className.replace(/theme-\w+/g, '');
    document.body.classList.add(`theme-${tema}`);
    
    // Guardar preferencia localmente
    localStorage.setItem('tema-actual', tema);
    
    // Actualizar vista previa
    actualizarVistaPrevia();
    
    // Enviar al backend
    fetch('/temas/aplicar', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify({ tema: tema })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            mostrarNotificacion(data.message, 'success');
        } else {
            mostrarNotificacion('Error al aplicar tema', 'danger');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        mostrarNotificacion('Error de conexión al aplicar tema', 'danger');
    });
}

// Aplicar colores personalizados
document.getElementById('personalizacionForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const colores = {
        primario: document.getElementById('color_primario').value,
        secundario: document.getElementById('color_secundario').value,
        exito: document.getElementById('color_exito').value,
        peligro: document.getElementById('color_peligro').value,
        advertencia: document.getElementById('color_advertencia').value,
        info: document.getElementById('color_info').value
    };
    
    // Aplicar colores visualmente
    aplicarColoresPersonalizados(colores);
    
    // Enviar al backend
    fetch('/temas/personalizar-colores', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify({ colores: colores })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            mostrarNotificacion(data.message, 'success');
        } else {
            mostrarNotificacion('Error al aplicar colores', 'danger');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        mostrarNotificacion('Error de conexión al aplicar colores', 'danger');
    });
});

// Aplicar fuentes personalizadas
document.getElementById('fuentesForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const fuentes = {
        principal: document.getElementById('fuente_principal').value,
        tamaño: document.getElementById('tamaño_fuente').value,
        peso: document.getElementById('peso_fuente').value
    };
    
    // Aplicar fuentes visualmente
    aplicarFuentesPersonalizadas(fuentes);
    
    // Enviar al backend
    fetch('/temas/personalizar-fuentes', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify({ fuentes: fuentes })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            mostrarNotificacion(data.message, 'success');
        } else {
            mostrarNotificacion('Error al aplicar fuentes', 'danger');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        mostrarNotificacion('Error de conexión al aplicar fuentes', 'danger');
    });
});

// Aplicar configuración de layout
document.getElementById('layoutForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const layout = {
        anchoSidebar: document.getElementById('ancho_sidebar').value,
        posicionSidebar: document.getElementById('posicion_sidebar').value,
        sidebarColapsable: document.getElementById('sidebar_colapsable').checked,
        breadcrumbs: document.getElementById('breadcrumbs').checked
    };
    
    // Aplicar layout visualmente
    aplicarConfiguracionLayout(layout);
    
    // Enviar al backend
    fetch('/temas/configurar-layout', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify({ layout: layout })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            mostrarNotificacion(data.message, 'success');
        } else {
            mostrarNotificacion('Error al aplicar layout', 'danger');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        mostrarNotificacion('Error de conexión al aplicar layout', 'danger');
    });
});

// Aplicar configuración avanzada
function aplicarConfiguracionAvanzada() {
    const config = {
        animaciones: document.getElementById('animaciones').value,
        transiciones: document.getElementById('transiciones').value,
        esquinas: document.getElementById('esquinas').value,
        sombras: document.getElementById('sombras').checked,
        efectosHover: document.getElementById('efectos_hover').checked
    };
    
    // Aplicar configuración visualmente
    aplicarConfiguracionAvanzadaCSS(config);
    
    // Enviar al backend
    fetch('/temas/configuracion-avanzada', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify({ configuracion: config })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            mostrarNotificacion(data.message, 'success');
        } else {
            mostrarNotificacion('Error al aplicar configuración avanzada', 'danger');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        mostrarNotificacion('Error de conexión al aplicar configuración avanzada', 'danger');
    });
}

// Aplicar colores personalizados
function aplicarColoresPersonalizados(colores) {
    const root = document.documentElement;
    root.style.setProperty('--color-primario', colores.primario);
    root.style.setProperty('--color-secundario', colores.secundario);
    root.style.setProperty('--color-exito', colores.exito);
    root.style.setProperty('--color-peligro', colores.peligro);
    root.style.setProperty('--color-advertencia', colores.advertencia);
    root.style.setProperty('--color-info', colores.info);
    
    // Actualizar vista previa
    actualizarVistaPrevia();
}

// Aplicar fuentes personalizadas
function aplicarFuentesPersonalizadas(fuentes) {
    const root = document.documentElement;
    root.style.setProperty('--fuente-principal', fuentes.principal);
    root.style.setProperty('--tamaño-fuente', fuentes.tamaño);
    root.style.setProperty('--peso-fuente', fuentes.peso);
    
    document.body.style.fontFamily = fuentes.principal;
    document.body.style.fontSize = fuentes.tamaño;
    document.body.style.fontWeight = fuentes.peso;
}

// Aplicar configuración de layout
function aplicarConfiguracionLayout(layout) {
    const root = document.documentElement;
    root.style.setProperty('--ancho-sidebar', layout.anchoSidebar);
    root.style.setProperty('--posicion-sidebar', layout.posicionSidebar);
    
    // Aplicar clases CSS
    if (layout.sidebarColapsable) {
        document.body.classList.add('sidebar-colapsable');
    } else {
        document.body.classList.remove('sidebar-colapsable');
    }
    
    if (layout.breadcrumbs) {
        document.body.classList.add('mostrar-breadcrumbs');
    } else {
        document.body.classList.remove('mostrar-breadcrumbs');
    }
}

// Aplicar configuración avanzada CSS
function aplicarConfiguracionAvanzadaCSS(config) {
    const root = document.documentElement;
    
    // Animaciones
    if (config.animaciones === 'disabled') {
        root.style.setProperty('--animacion-duracion', '0s');
    } else if (config.animaciones === 'reduced') {
        root.style.setProperty('--animacion-duracion', '0.1s');
    } else {
        root.style.setProperty('--animacion-duracion', '0.3s');
    }
    
    // Transiciones
    const duracionTransicion = {
        'fast': '0.2s',
        'normal': '0.3s',
        'slow': '0.5s'
    };
    root.style.setProperty('--transicion-duracion', duracionTransicion[config.transiciones]);
    
    // Esquinas redondeadas
    const radioEsquinas = {
        'none': '0px',
        'small': '4px',
        'medium': '8px',
        'large': '12px'
    };
    root.style.setProperty('--radio-esquinas', radioEsquinas[config.esquinas]);
    
    // Sombras
    if (config.sombras) {
        root.style.setProperty('--sombra-cards', '0 0.125rem 0.25rem rgba(0, 0, 0, 0.075)');
    } else {
        root.style.setProperty('--sombra-cards', 'none');
    }
    
    // Efectos hover
    if (config.efectosHover) {
        document.body.classList.add('efectos-hover');
    } else {
        document.body.classList.remove('efectos-hover');
    }
}

// Actualizar vista previa
function actualizarVistaPrevia() {
    const preview = document.getElementById('vistaPrevia');
    const temaActual = document.body.classList.contains('theme-dark') ? 'dark' : 
                      document.body.classList.contains('theme-blue') ? 'blue' : 
                      document.body.classList.contains('theme-green') ? 'green' : 'light';
    
    preview.className = `theme-preview-container theme-${temaActual}`;
}

// Guardar tema personalizado
function guardarTemaPersonalizado() {
    const temaPersonalizado = {
        nombre: 'Tema Personalizado',
        descripcion: 'Tema creado por el usuario',
        colores: {
            primario: document.getElementById('color_primario').value,
            secundario: document.getElementById('color_secundario').value,
            exito: document.getElementById('color_exito').value,
            peligro: document.getElementById('color_peligro').value,
            advertencia: document.getElementById('color_advertencia').value,
            info: document.getElementById('color_info').value
        },
        fuentes: {
            principal: document.getElementById('fuente_principal').value,
            tamaño: document.getElementById('tamaño_fuente').value,
            peso: document.getElementById('peso_fuente').value
        },
        layout: {
            anchoSidebar: document.getElementById('ancho_sidebar').value,
            posicionSidebar: document.getElementById('posicion_sidebar').value,
            sidebarColapsable: document.getElementById('sidebar_colapsable').checked,
            breadcrumbs: document.getElementById('breadcrumbs').checked
        },
        avanzado: {
            animaciones: document.getElementById('animaciones').value,
            transiciones: document.getElementById('transiciones').value,
            esquinas: document.getElementById('esquinas').value,
            sombras: document.getElementById('sombras').checked,
            efectosHover: document.getElementById('efectos_hover').checked
        }
    };
    
    // Guardar localmente
    localStorage.setItem('tema-personalizado', JSON.stringify(temaPersonalizado));
    
    // Enviar al backend
    fetch('/temas/guardar-personalizado', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify({ tema: temaPersonalizado })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            mostrarNotificacion(data.message, 'success');
        } else {
            mostrarNotificacion('Error al guardar tema personalizado', 'danger');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        mostrarNotificacion('Error de conexión al guardar tema personalizado', 'danger');
    });
}

// Exportar tema
function exportarTema() {
    const tema = localStorage.getItem('tema-personalizado');
    if (tema) {
        const blob = new Blob([tema], { type: 'application/json' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = 'tema-personalizado.json';
        a.click();
        URL.revokeObjectURL(url);
        mostrarNotificacion('Tema exportado exitosamente', 'success');
    } else {
        mostrarNotificacion('No hay tema personalizado para exportar', 'warning');
    }
}

// Restablecer tema
function restablecerTema() {
    if (confirm('¿Está seguro de que desea restablecer el tema a la configuración por defecto?')) {
        // Limpiar localStorage
        localStorage.removeItem('tema-personalizado');
        localStorage.removeItem('tema-actual');
        
        // Enviar al backend
        fetch('/temas/restablecer', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                mostrarNotificacion(data.message, 'success');
                // Recargar la página para aplicar cambios
                setTimeout(() => {
                    location.reload();
                }, 1000);
            } else {
                mostrarNotificacion('Error al restablecer tema', 'danger');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            mostrarNotificacion('Error de conexión al restablecer tema', 'danger');
        });
    }
}

// Mostrar notificación
function mostrarNotificacion(mensaje, tipo) {
    const alertClass = tipo === 'success' ? 'alert-success' : 
                      tipo === 'warning' ? 'alert-warning' : 'alert-info';
    
    const notification = document.createElement('div');
    notification.className = `alert ${alertClass} alert-dismissible fade show position-fixed`;
    notification.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px;';
    notification.innerHTML = `
        ${mensaje}
        <button type="button" class="close" data-dismiss="alert">
            <span>&times;</span>
        </button>
    `;
    
    document.body.appendChild(notification);
    
    setTimeout(() => {
        notification.remove();
    }, 3000);
}

// Cargar tema al iniciar
document.addEventListener('DOMContentLoaded', function() {
    const temaActual = localStorage.getItem('tema-actual');
    if (temaActual) {
        aplicarTema(temaActual);
    }
    
    const temaPersonalizado = localStorage.getItem('tema-personalizado');
    if (temaPersonalizado) {
        const tema = JSON.parse(temaPersonalizado);
        
        // Aplicar configuración guardada
        if (tema.colores) aplicarColoresPersonalizados(tema.colores);
        if (tema.fuentes) aplicarFuentesPersonalizadas(tema.fuentes);
        if (tema.layout) aplicarConfiguracionLayout(tema.layout);
        if (tema.avanzado) aplicarConfiguracionAvanzadaCSS(tema.avanzado);
    }
    
    actualizarVistaPrevia();
});
</script>

<style>
.theme-card {
    cursor: pointer;
    transition: all 0.3s ease;
}

.theme-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.theme-preview {
    width: 100%;
    height: 120px;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}

.theme-preview .preview-header {
    height: 30px;
    width: 100%;
}

.theme-preview .preview-content {
    height: 60px;
    width: 70%;
    float: right;
}

.theme-preview .preview-sidebar {
    height: 60px;
    width: 30%;
    float: left;
}

.theme-preview-container {
    border: 2px solid #dee2e6;
    border-radius: 8px;
    padding: 1rem;
    background: #f8f9fa;
}

.preview-layout {
    background: white;
    border-radius: 4px;
    overflow: hidden;
}

.preview-header {
    padding: 0.5rem;
    color: white;
}

.preview-body {
    display: flex;
    height: 150px;
}

.preview-sidebar {
    width: 30%;
    padding: 0.5rem;
    display: flex;
    align-items: center;
}

.preview-content {
    width: 70%;
    padding: 0.5rem;
}

.preview-card {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 0.5rem;
}

/* Variables CSS para temas */
:root {
    --color-primario: #007bff;
    --color-secundario: #6c757d;
    --color-exito: #28a745;
    --color-peligro: #dc3545;
    --color-advertencia: #ffc107;
    --color-info: #17a2b8;
    --fuente-principal: Arial, sans-serif;
    --tamaño-fuente: 14px;
    --peso-fuente: 400;
    --ancho-sidebar: 250px;
    --posicion-sidebar: left;
    --animacion-duracion: 0.3s;
    --transicion-duracion: 0.3s;
    --radio-esquinas: 4px;
    --sombra-cards: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

/* Temas */
.theme-dark {
    --color-primario: #0d6efd;
    --color-secundario: #6c757d;
    --color-exito: #198754;
    --color-peligro: #dc3545;
    --color-advertencia: #ffc107;
    --color-info: #0dcaf0;
}

.theme-blue {
    --color-primario: #0d6efd;
    --color-secundario: #6c757d;
    --color-exito: #198754;
    --color-peligro: #dc3545;
    --color-advertencia: #ffc107;
    --color-info: #0dcaf0;
}

.theme-green {
    --color-primario: #198754;
    --color-secundario: #6c757d;
    --color-exito: #198754;
    --color-peligro: #dc3545;
    --color-advertencia: #ffc107;
    --color-info: #0dcaf0;
}

/* Aplicar variables CSS */
.btn-primary {
    background-color: var(--color-primario);
    border-color: var(--color-primario);
}

.btn-success {
    background-color: var(--color-exito);
    border-color: var(--color-exito);
}

.btn-danger {
    background-color: var(--color-peligro);
    border-color: var(--color-peligro);
}

.btn-warning {
    background-color: var(--color-advertencia);
    border-color: var(--color-advertencia);
}

.btn-info {
    background-color: var(--color-info);
    border-color: var(--color-info);
}

.card {
    border-radius: var(--radio-esquinas);
    box-shadow: var(--sombra-cards);
    transition: all var(--transicion-duracion) ease;
}

.efectos-hover .card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
</style>
@endsection