<?php
/**
 * Página: Invitación Digital
 * 
 * Gestión de templates de invitación digital
 */

$eventoId = getEventoId();
$evento = obtenerEvento($eventoId);

$error = '';
$success = '';

// Procesar AJAX para guardar personalizaciones
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['ajax_action'])) {
    header('Content-Type: application/json');
    
    if ($_POST['ajax_action'] === 'guardar_personalizaciones') {
        $personalizaciones = json_decode($_POST['personalizaciones'] ?? '[]', true);
        
        if (empty($personalizaciones)) {
            echo json_encode(['success' => false, 'message' => 'No hay personalizaciones para guardar']);
            exit;
        }
        
        if (guardarPersonalizacionesTemplate($eventoId, $personalizaciones)) {
            echo json_encode(['success' => true, 'message' => 'Personalizaciones guardadas correctamente']);
        } else {
            echo json_encode(['success' => false, 'message' => 'Error al guardar las personalizaciones']);
        }
        exit;
    }
    
    if ($_POST['ajax_action'] === 'restaurar_personalizaciones') {
        if (restaurarPersonalizacionesTemplate($eventoId)) {
            echo json_encode(['success' => true, 'message' => 'Personalizaciones restauradas a valores por defecto']);
        } else {
            echo json_encode(['success' => false, 'message' => 'Error al restaurar las personalizaciones']);
        }
        exit;
    }
    
    if ($_POST['ajax_action'] === 'obtener_personalizaciones') {
        $personalizaciones = obtenerPersonalizacionesTemplate($eventoId);
        echo json_encode(['success' => true, 'data' => $personalizaciones]);
        exit;
    }
    
    // Endpoint para obtener elementos editables de un template específico
    if ($_POST['ajax_action'] === 'obtener_elementos_editables') {
        $templateId = sanitize($_POST['template_id'] ?? 'template-1');
        $templateTipo = sanitize($_POST['template_tipo'] ?? 'default');
        
        $elementos = obtenerElementosEditablesTemplate($templateId, $templateTipo);
        $templateInfo = obtenerTemplateJson($templateId, $templateTipo);
        
        echo json_encode([
            'success' => true, 
            'elementos' => $elementos,
            'template_info' => $templateInfo
        ]);
        exit;
    }
    
    exit;
}

// Obtener templates disponibles (solo template-2 institucional)
$templatesDefaultRaw = obtenerTemplatesDisponibles('default');
$templatesDefault = array_filter($templatesDefaultRaw, function($t) { return ($t['id'] ?? $t['directorio'] ?? '') === 'template-2'; });
$templatesDefault = array_values($templatesDefault);
$templatesCustom = obtenerTemplatesDisponibles('custom');
$todosTemplates = array_merge($templatesDefault, $templatesCustom);

// Obtener configuración actual del template
$templateConfigActual = obtenerConfiguracionTemplate($eventoId);
$templateActualId = $templateConfigActual ? $templateConfigActual['template_id'] : 'template-1';
$templateActualTipo = $templateConfigActual ? $templateConfigActual['template_tipo'] : 'default';

// Obtener personalizaciones actuales y galería para el modal
$personalizacionesActuales = obtenerPersonalizacionesTemplate($eventoId);
$galeriaEventos = obtenerGaleria($eventoId);
$videosEvento = obtenerVideos($eventoId);

// Obtener elementos editables del template actual (dinámico según template)
$elementosEditables = obtenerElementosEditablesTemplate($templateActualId, $templateActualTipo);
$templateJsonInfo = obtenerTemplateJson($templateActualId, $templateActualTipo);

// Procesar eliminación de template personalizado
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['eliminar_template'])) {
    $templateIdEliminar = sanitize($_POST['template_id_eliminar'] ?? '');
    $templateTipoEliminar = sanitize($_POST['template_tipo_eliminar'] ?? '');
    
    if ($templateTipoEliminar === 'custom' && !empty($templateIdEliminar)) {
        $resultado = eliminarTemplatePersonalizado($templateIdEliminar);
        if ($resultado['success']) {
            $success = $resultado['message'];
            // Recargar templates
            $templatesCustom = obtenerTemplatesDisponibles('custom');
            $todosTemplates = array_merge($templatesDefault, $templatesCustom);
        } else {
            $error = $resultado['message'];
        }
    } else {
        $error = 'No se puede eliminar este template.';
    }
}

// Procesar guardado de template seleccionado
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['guardar_template'])) {
    $templateId = sanitize($_POST['template_id'] ?? '');
    $templateTipo = sanitize($_POST['template_tipo'] ?? 'default');
    
    if (empty($templateId)) {
        $error = 'Debe seleccionar un template';
    } else {
        // Validar que el template existe
        $templateExiste = false;
        foreach ($todosTemplates as $template) {
            if ($template['id'] === $templateId && $template['tipo'] === $templateTipo) {
                $templateExiste = true;
                break;
            }
        }
        
        if (!$templateExiste) {
            $error = 'El template seleccionado no existe';
        } else {
            // Guardar solo la selección del template (sin configuración personalizada)
            if (guardarConfiguracionTemplate($eventoId, $templateId, $templateTipo, [])) {
                $success = 'Template seleccionado y guardado correctamente';
                $templateActualId = $templateId;
                $templateActualTipo = $templateTipo;
                // Recargar configuración
                $templateConfigActual = obtenerConfiguracionTemplate($eventoId);
            } else {
                $error = 'Error al guardar el template';
            }
        }
    }
}
?>

<style>
.templates-container {
    margin-top: 30px;
}

.templates-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--color-border);
}

.templates-header h3 {
    margin: 0;
    font-size: 24px;
    color: var(--color-text-primary);
}

.templates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
    margin-bottom: 40px;
}

.template-card {
    background: var(--color-bg-secondary);
    border: 2px solid var(--color-border);
    border-radius: var(--border-radius);
    overflow: hidden;
    transition: all 0.3s;
    cursor: pointer;
    position: relative;
}

.template-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary);
}

.template-card.selected {
    border-color: var(--color-primary);
    border-width: 3px;
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb, 102, 126, 234), 0.2);
}

.template-card.selected::after {
    content: '✓';
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--color-primary);
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: bold;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.template-preview {
    width: 100%;
    height: 200px;
    background: var(--color-bg-primary);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-secondary);
    font-size: 48px;
    position: relative;
    overflow: hidden;
}

.template-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.template-preview-placeholder {
    font-size: 60px;
    opacity: 0.7;
}

.template-info {
    padding: 20px;
}

.template-info h4 {
    margin: 0 0 8px 0;
    font-size: 18px;
    color: var(--color-text-primary);
    font-weight: 600;
}

.template-info p {
    margin: 0 0 12px 0;
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.template-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.template-badge {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    background: var(--color-bg-primary);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
}

.template-badge.default {
    background: #e3f2fd;
    color: #1976d2;
    border-color: #90caf9;
}

.template-badge.custom {
    background: #f3e5f5;
    color: #7b1fa2;
    border-color: #ce93d8;
}

.template-actions {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.btn-template {
    flex: 1;
    padding: 10px 16px;
    border: none;
    border-radius: var(--border-radius);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.btn-template-primary {
    background: var(--color-primary);
    color: white;
}

.btn-template-primary:hover {
    background: var(--color-primary-hover);
}

.btn-template-secondary {
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
}

.btn-template-secondary:hover {
    background: var(--color-border);
}

.template-section {
    margin-bottom: 50px;
}

.template-section-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-border);
}

.form-actions-template {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 2px solid var(--color-border);
    display: flex;
    justify-content: flex-end;
    gap: 15px;
}

.btn-guardar-template {
    padding: 12px 30px;
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: var(--border-radius);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-guardar-template:hover {
    background: var(--color-primary-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-guardar-template.cambios-pendientes {
    background: #f59e0b;
    animation: pulse-cambios 2s infinite;
}

.btn-guardar-template.cambios-pendientes:hover {
    background: #d97706;
}

@keyframes pulse-cambios {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4); }
    50% { box-shadow: 0 0 0 10px rgba(245, 158, 11, 0); }
}

.btn-preview-template {
    padding: 12px 30px;
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    display: inline-block;
}

.btn-preview-template:hover {
    background: var(--color-border);
}

/* Modal de preview */
.preview-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.8);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.preview-modal-overlay.show {
    display: flex;
}

.preview-modal {
    background: white;
    border-radius: var(--border-radius);
    max-width: 1200px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.preview-modal-header {
    padding: 20px 30px;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.preview-modal-header h3 {
    margin: 0;
    font-size: 20px;
    color: var(--color-text-primary);
}

.preview-modal-close {
    background: none;
    border: none;
    font-size: 28px;
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
}

.preview-modal-close:hover {
    background: var(--color-border);
    color: var(--color-text-primary);
}

.preview-modal-body {
    flex: 1;
    overflow: auto;
    padding: 0;
}

.preview-iframe {
    width: 100%;
    height: 80vh;
    border: none;
    display: block;
}

.template-actual-info {
    background: var(--color-bg-primary);
    padding: 20px;
    border-radius: var(--border-radius);
    margin-bottom: 30px;
    border-left: 4px solid var(--color-primary);
}

.template-actual-info h4 {
    margin: 0 0 10px 0;
    font-size: 16px;
    color: var(--color-text-primary);
    font-weight: 600;
}

.template-actual-info p {
    margin: 5px 0;
    font-size: 14px;
    color: var(--color-text-secondary);
}

.empty-templates {
    text-align: center;
    padding: 60px 20px;
    color: var(--color-text-secondary);
}

.empty-templates-icon {
    font-size: 64px;
    margin-bottom: 20px;
    opacity: 0.5;
}

.empty-templates h3 {
    margin: 0 0 10px 0;
    color: var(--color-text-primary);
}

.empty-templates p {
    margin: 0;
}

/* Botón Editar Campos */
.btn-editar-campos {
    padding: 10px 20px;
    background: var(--color-text-primary);
    color: var(--color-bg-primary);
    border: 1px solid var(--color-text-primary);
    border-radius: var(--border-radius);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-editar-campos:hover {
    background: transparent;
    color: var(--color-text-primary);
}

/* Modal de Personalización */
.personalizacion-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.85);
    z-index: 10001;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.personalizacion-modal-overlay.show {
    display: flex;
}

.personalizacion-modal {
    background: var(--color-bg-secondary);
    border-radius: 12px;
    max-width: 1400px;
    width: 100%;
    max-height: 95vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 80px rgba(0,0,0,0.5);
}

.personalizacion-modal-header {
    padding: 20px 30px;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--color-bg-primary);
    border-radius: 12px 12px 0 0;
}

.personalizacion-modal-header h3 {
    margin: 0;
    font-size: 22px;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
}

.personalizacion-modal-close {
    background: none;
    border: none;
    font-size: 28px;
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
}

.personalizacion-modal-close:hover {
    background: var(--color-border);
    color: var(--color-text-primary);
}

.personalizacion-modal-body {
    flex: 1;
    overflow: auto;
    display: flex;
    min-height: 0;
}

.personalizacion-panel-izquierdo {
    width: 400px;
    min-width: 400px;
    border-right: 1px solid var(--color-border);
    overflow-y: auto;
    background: var(--color-bg-primary);
}

.personalizacion-panel-derecho {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #1a1a2e;
}

.personalizacion-preview-header {
    padding: 15px 20px;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--color-bg-secondary);
}

.personalizacion-preview-header h4 {
    margin: 0;
    font-size: 16px;
    color: var(--color-text-primary);
}

.personalizacion-preview-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow: auto;
}

.personalizacion-preview-frame {
    width: 375px;
    height: 667px;
    border: 8px solid #333;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    background: white;
}

.personalizacion-preview-frame iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* Secciones de personalización */
.personalizacion-seccion {
    border-bottom: 1px solid var(--color-border);
}

.personalizacion-seccion-header {
    padding: 15px 20px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.2s;
}

.personalizacion-seccion-header:hover {
    background: var(--color-bg-secondary);
}

.personalizacion-seccion-header h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.personalizacion-seccion-toggle {
    font-size: 18px;
    transition: transform 0.3s;
}

.personalizacion-seccion.abierta .personalizacion-seccion-toggle {
    transform: rotate(180deg);
}

.personalizacion-seccion-contenido {
    display: none;
    padding: 0 20px 20px;
}

.personalizacion-seccion.abierta .personalizacion-seccion-contenido {
    display: block;
}

/* Campos de personalización */
.personalizacion-campo {
    margin-bottom: 20px;
}

.personalizacion-campo label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 6px;
}

.personalizacion-campo .descripcion {
    font-size: 12px;
    color: var(--color-text-secondary);
    margin-bottom: 8px;
}

.personalizacion-campo input[type="text"],
.personalizacion-campo textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    font-size: 14px;
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
    transition: border-color 0.2s;
}

.personalizacion-campo input[type="text"]:focus,
.personalizacion-campo textarea:focus {
    outline: none;
    border-color: var(--color-primary);
}

.personalizacion-campo textarea {
    min-height: 80px;
    resize: vertical;
}

/* Selector de imagen */
.selector-imagen {
    border: 2px dashed var(--color-border);
    border-radius: var(--border-radius);
    padding: 15px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}

.selector-imagen:hover {
    border-color: var(--color-primary);
    background: rgba(102, 126, 234, 0.05);
}

.selector-imagen.tiene-imagen {
    border-style: solid;
    padding: 10px;
}

.selector-imagen img {
    max-width: 100%;
    max-height: 150px;
    border-radius: 6px;
    margin-bottom: 10px;
}

.selector-imagen .placeholder {
    color: var(--color-text-secondary);
    font-size: 13px;
}

.selector-imagen .placeholder-icon {
    font-size: 32px;
    margin-bottom: 8px;
}

/* Galería de selección */
.galeria-seleccion-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.9);
    z-index: 10002;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.galeria-seleccion-modal.show {
    display: flex;
}

.galeria-seleccion-contenido {
    background: var(--color-bg-secondary);
    border-radius: 12px;
    max-width: 900px;
    width: 100%;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

.galeria-seleccion-header {
    padding: 20px;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.galeria-seleccion-header h4 {
    margin: 0;
    font-size: 18px;
}

.galeria-seleccion-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.galeria-seleccion-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
}

.galeria-seleccion-item {
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 3px solid transparent;
    transition: all 0.2s;
}

.galeria-seleccion-item:hover {
    border-color: var(--color-primary);
    transform: scale(1.02);
}

.galeria-seleccion-item.seleccionado {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.3);
}

.galeria-seleccion-item img,
.galeria-seleccion-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Footer del modal */
.personalizacion-modal-footer {
    padding: 20px 30px;
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--color-bg-primary);
    border-radius: 0 0 12px 12px;
}

.personalizacion-modal-footer .btn-group {
    display: flex;
    gap: 10px;
}

.btn-restaurar {
    padding: 10px 20px;
    background: transparent;
    color: var(--color-danger);
    border: 1px solid var(--color-danger);
    border-radius: var(--border-radius);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-restaurar:hover {
    background: var(--color-danger);
    color: white;
}

.btn-guardar-personalizacion {
    padding: 12px 30px;
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: var(--border-radius);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-guardar-personalizacion:hover {
    background: var(--color-primary-hover);
}

/* Tabs para imágenes/videos */
.selector-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.selector-tab {
    padding: 8px 16px;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.selector-tab.activo {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}
</style>

<div class="card">
    <h2 class="card-title">Invitación Digital</h2>
    
    <?php if ($error): ?>
        <div style="margin-top: 20px; padding: 15px; background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; border-radius: var(--border-radius);">
            <?php echo htmlspecialchars($error); ?>
        </div>
    <?php endif; ?>
    
    <?php if ($success): ?>
        <div style="margin-top: 20px; padding: 15px; background: #d4edda; color: #155724; border: 1px solid #c3e6cb; border-radius: var(--border-radius);">
            <?php echo htmlspecialchars($success); ?>
        </div>
    <?php endif; ?>
    
    <!-- Información del template actual -->
    <?php if ($templateConfigActual): ?>
        <?php 
        $templateActual = null;
        foreach ($todosTemplates as $t) {
            if ($t['id'] === $templateActualId && $t['tipo'] === $templateActualTipo) {
                $templateActual = $t;
                break;
            }
        }
        ?>
        <div class="template-actual-info" style="display: flex; justify-content: space-between; align-items: flex-start;">
            <div>
                <h4>Template Actual</h4>
                <p><strong>Nombre:</strong> <?php echo htmlspecialchars($templateActual ? $templateActual['nombre'] : $templateActualId); ?></p>
                <p><strong>Tipo:</strong> <?php echo $templateActualTipo === 'default' ? 'Predefinido' : 'Personalizado'; ?></p>
                <?php if ($templateActual && isset($templateActual['descripcion'])): ?>
                    <p><strong>Descripción:</strong> <?php echo htmlspecialchars($templateActual['descripcion']); ?></p>
                <?php endif; ?>
            </div>
            <button type="button" class="btn-editar-campos" onclick="abrirModalPersonalizacion()">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
                    <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
                </svg>
                Editar Campos
            </button>
        </div>
    <?php else: ?>
        <div class="template-actual-info" style="display: flex; justify-content: space-between; align-items: flex-start;">
            <div>
                <h4>Template Actual</h4>
                <p><strong>Template por defecto:</strong> Elegante (template-1)</p>
                <p style="color: var(--color-text-secondary); font-size: 13px;">Selecciona un template de los disponibles para usar en tus invitaciones digitales.</p>
            </div>
            <button type="button" class="btn-editar-campos" onclick="abrirModalPersonalizacion()">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
                    <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
                </svg>
                Editar Campos
            </button>
        </div>
    <?php endif; ?>
    
    <form method="POST" action="" id="formTemplate">
        <input type="hidden" name="guardar_template" value="1">
        <input type="hidden" name="template_id" id="template_id_selected" value="<?php echo htmlspecialchars($templateActualId); ?>">
        <input type="hidden" name="template_tipo" id="template_tipo_selected" value="<?php echo htmlspecialchars($templateActualTipo); ?>">
        
        <div class="templates-container">
            <!-- Templates Predefinidos -->
            <?php if (!empty($templatesDefault)): ?>
                <div class="template-section">
                    <h3 class="template-section-title">Templates Predefinidos</h3>
                    <div class="templates-grid">
                        <?php foreach ($templatesDefault as $template): ?>
                            <div class="template-card <?php echo ($template['id'] === $templateActualId && $template['tipo'] === $templateActualTipo) ? 'selected' : ''; ?>" 
                                 data-template-id="<?php echo htmlspecialchars($template['id']); ?>"
                                 data-template-tipo="<?php echo htmlspecialchars($template['tipo']); ?>">
                                <div class="template-preview">
                                    <?php if (isset($template['preview']) && file_exists(__DIR__ . '/../../' . $template['preview'])): ?>
                                        <img src="<?php echo rtrim(BASE_URL, '/'); ?>/<?php echo htmlspecialchars($template['preview']); ?>" alt="<?php echo htmlspecialchars($template['nombre']); ?>">
                                    <?php else: ?>
                                        <div class="template-preview-placeholder">
                                            <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                                                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/>
                                            </svg>
                                        </div>
                                    <?php endif; ?>
                                </div>
                                <div class="template-info">
                                    <h4><?php echo htmlspecialchars($template['nombre']); ?></h4>
                                    <?php if (isset($template['descripcion'])): ?>
                                        <p><?php echo htmlspecialchars($template['descripcion']); ?></p>
                                    <?php endif; ?>
                                    <div class="template-badges">
                                        <span class="template-badge default">Predefinido</span>
                                        <?php if (isset($template['categoria'])): ?>
                                            <span class="template-badge"><?php echo htmlspecialchars($template['categoria']); ?></span>
                                        <?php endif; ?>
                                    </div>
                                    <div class="template-actions">
                                        <button type="button" class="btn-template btn-template-secondary" onclick="previewTemplate('<?php echo htmlspecialchars($template['id']); ?>', '<?php echo htmlspecialchars($template['tipo']); ?>')">
                                            Vista Previa
                                        </button>
                                        <button type="button" class="btn-template btn-template-primary" onclick="seleccionarTemplate('<?php echo htmlspecialchars($template['id']); ?>', '<?php echo htmlspecialchars($template['tipo']); ?>')">
                                            Seleccionar
                                        </button>
                                    </div>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    </div>
                </div>
            <?php endif; ?>
            
            <!-- Templates Personalizados -->
            <?php if (!empty($templatesCustom)): ?>
                <div class="template-section">
                    <h3 class="template-section-title">Templates Personalizados</h3>
                    <div class="templates-grid">
                        <?php foreach ($templatesCustom as $template): ?>
                            <div class="template-card <?php echo ($template['id'] === $templateActualId && $template['tipo'] === $templateActualTipo) ? 'selected' : ''; ?>" 
                                 data-template-id="<?php echo htmlspecialchars($template['id']); ?>"
                                 data-template-tipo="<?php echo htmlspecialchars($template['tipo']); ?>">
                                <div class="template-preview">
                                    <?php if (isset($template['preview']) && file_exists(__DIR__ . '/../../' . $template['preview'])): ?>
                                        <img src="<?php echo rtrim(BASE_URL, '/'); ?>/<?php echo htmlspecialchars($template['preview']); ?>" alt="<?php echo htmlspecialchars($template['nombre']); ?>">
                                    <?php else: ?>
                                        <div class="template-preview-placeholder">
                                            <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                                                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/>
                                            </svg>
                                        </div>
                                    <?php endif; ?>
                                </div>
                                <div class="template-info">
                                    <h4><?php echo htmlspecialchars($template['nombre']); ?></h4>
                                    <?php if (isset($template['descripcion'])): ?>
                                        <p><?php echo htmlspecialchars($template['descripcion']); ?></p>
                                    <?php endif; ?>
                                    <div class="template-badges">
                                        <span class="template-badge custom">Personalizado</span>
                                        <?php if (isset($template['autor']) && $template['autor'] !== 'Sistema Bodas'): ?>
                                            <span class="template-badge">Por: <?php echo htmlspecialchars($template['autor']); ?></span>
                                        <?php endif; ?>
                                    </div>
                                    <div class="template-actions">
                                        <button type="button" class="btn-template btn-template-secondary" onclick="previewTemplate('<?php echo htmlspecialchars($template['id']); ?>', '<?php echo htmlspecialchars($template['tipo']); ?>')">
                                            Vista Previa
                                        </button>
                                        <button type="button" class="btn-template btn-template-primary" onclick="seleccionarTemplate('<?php echo htmlspecialchars($template['id']); ?>', '<?php echo htmlspecialchars($template['tipo']); ?>')">
                                            Seleccionar
                                        </button>
                                        <?php if ($template['tipo'] === 'custom'): ?>
                                            <button type="button" class="btn-template btn-template-danger" onclick="eliminarTemplate('<?php echo htmlspecialchars($template['id']); ?>', '<?php echo htmlspecialchars($template['tipo']); ?>')" style="background: var(--color-danger); color: white; border-color: var(--color-danger); padding: 10px 12px;" title="Eliminar template">
                                                🗑️
                                            </button>
                                        <?php endif; ?>
                                    </div>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    </div>
                </div>
            <?php endif; ?>
            
            <?php if (empty($todosTemplates)): ?>
                <div class="empty-templates">
                    <div class="empty-templates-icon">📋</div>
                    <h3>No hay templates disponibles</h3>
                    <p>Los templates aparecerán aquí una vez que estén configurados.</p>
                </div>
            <?php endif; ?>
        </div>
        
        <div class="form-actions-template">
            <a href="<?php echo rtrim(BASE_URL, '/'); ?>/public/invitacion/index.php?preview=1" target="_blank" class="btn-preview-template">
                👁️ Vista Previa Completa
            </a>
            <button type="submit" class="btn-guardar-template">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="vertical-align: middle; margin-right: 6px;">
                    <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
                    <polyline points="17 21 17 13 7 13 7 21"/>
                    <polyline points="7 3 7 8 15 8"/>
                </svg>
                Guardar Template Seleccionado
            </button>
        </div>
    </form>
</div>

<!-- Modal de Preview -->
<div id="preview-modal" class="preview-modal-overlay" onclick="if(event.target === this) cerrarPreviewModal()">
    <div class="preview-modal">
        <div class="preview-modal-header">
            <h3>Vista Previa del Template</h3>
            <button class="preview-modal-close" onclick="cerrarPreviewModal()">&times;</button>
        </div>
        <div class="preview-modal-body">
            <iframe id="preview-iframe" class="preview-iframe" src=""></iframe>
        </div>
    </div>
</div>

<!-- Modal de Personalización de Template -->
<div id="personalizacion-modal" class="personalizacion-modal-overlay" onclick="if(event.target === this) cerrarModalPersonalizacion()">
    <div class="personalizacion-modal">
        <div class="personalizacion-modal-header">
            <h3>
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
                    <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
                </svg>
                Personalizar Template
            </h3>
            <button class="personalizacion-modal-close" onclick="cerrarModalPersonalizacion()">&times;</button>
        </div>
        
        <div class="personalizacion-modal-body">
            <!-- Panel izquierdo - Opciones de personalización -->
            <div class="personalizacion-panel-izquierdo">
                <?php foreach ($elementosEditables as $seccionId => $seccionData): ?>
                    <div class="personalizacion-seccion" data-seccion="<?php echo $seccionId; ?>">
                        <div class="personalizacion-seccion-header" onclick="toggleSeccion(this)">
                            <h4><?php echo htmlspecialchars($seccionData['titulo']); ?></h4>
                            <span class="personalizacion-seccion-toggle">▼</span>
                        </div>
                        <div class="personalizacion-seccion-contenido">
                            <?php foreach ($seccionData['elementos'] as $elementoId => $elementoData): ?>
                                <?php 
                                $valorActual = $personalizacionesActuales[$seccionId][$elementoId]['valor'] ?? '';
                                $valorActual = $valorActual !== '' ? decodeEntidadesTexto($valorActual) : '';
                                ?>
                                <div class="personalizacion-campo" data-seccion="<?php echo $seccionId; ?>" data-elemento="<?php echo $elementoId; ?>" data-tipo="<?php echo $elementoData['tipo']; ?>">
                                    <label><?php echo htmlspecialchars($elementoData['label']); ?></label>
                                    <p class="descripcion"><?php echo htmlspecialchars($elementoData['descripcion']); ?></p>
                                    
                                    <?php if ($elementoData['tipo'] === 'texto'): ?>
                                        <textarea 
                                            class="campo-personalizacion"
                                            data-seccion="<?php echo $seccionId; ?>"
                                            data-elemento="<?php echo $elementoId; ?>"
                                            data-tipo="texto"
                                            placeholder="Dejar vacío para usar valor por defecto"
                                        ><?php echo htmlspecialchars($valorActual); ?></textarea>
                                    <?php elseif ($elementoData['tipo'] === 'imagen'): ?>
                                        <div class="selector-imagen <?php echo !empty($valorActual) ? 'tiene-imagen' : ''; ?>" 
                                             onclick="abrirSelectorImagen('<?php echo $seccionId; ?>', '<?php echo $elementoId; ?>')"
                                             data-seccion="<?php echo $seccionId; ?>"
                                             data-elemento="<?php echo $elementoId; ?>">
                                            <?php if (!empty($valorActual)): ?>
                                                <img src="<?php echo rtrim(BASE_URL, '/'); ?>/<?php echo htmlspecialchars($valorActual); ?>" alt="Imagen seleccionada">
                                                <div style="font-size: 12px; color: var(--color-text-secondary);">Clic para cambiar</div>
                                            <?php else: ?>
                                                <div class="placeholder">
                                                    <div class="placeholder-icon">
                                                        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                                                            <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
                                                            <circle cx="8.5" cy="8.5" r="1.5"/>
                                                            <polyline points="21 15 16 10 5 21"/>
                                                        </svg>
                                                    </div>
                                                    <div>Clic para seleccionar imagen</div>
                                                </div>
                                            <?php endif; ?>
                                        </div>
                                        <input type="hidden" 
                                               class="campo-personalizacion"
                                               data-seccion="<?php echo $seccionId; ?>"
                                               data-elemento="<?php echo $elementoId; ?>"
                                               data-tipo="imagen"
                                               value="<?php echo htmlspecialchars($valorActual); ?>">
                                    <?php endif; ?>
                                </div>
                            <?php endforeach; ?>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
            
            <!-- Panel derecho - Vista previa -->
            <div class="personalizacion-panel-derecho">
                <div class="personalizacion-preview-header">
                    <h4>Vista Previa en Tiempo Real</h4>
                    <button type="button" onclick="actualizarPreviewPersonalizacion()" style="padding: 8px 16px; background: var(--color-primary); color: white; border: none; border-radius: var(--border-radius); cursor: pointer; font-size: 13px;">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="vertical-align: middle; margin-right: 4px;">
                            <polyline points="23 4 23 10 17 10"/>
                            <polyline points="1 20 1 14 7 14"/>
                            <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/>
                        </svg>
                        Actualizar Preview
                    </button>
                </div>
                <div class="personalizacion-preview-container">
                    <div class="personalizacion-preview-frame">
                        <iframe id="personalizacion-preview-iframe" src=""></iframe>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="personalizacion-modal-footer">
            <button type="button" class="btn-restaurar" onclick="restaurarPersonalizaciones()">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="vertical-align: middle; margin-right: 4px;">
                    <polyline points="1 4 1 10 7 10"/>
                    <path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/>
                </svg>
                Restaurar valores por defecto
            </button>
            <div class="btn-group">
                <button type="button" onclick="cerrarModalPersonalizacion()" style="padding: 10px 20px; background: var(--color-bg-secondary); color: var(--color-text-primary); border: 1px solid var(--color-border); border-radius: var(--border-radius); cursor: pointer;">
                    Cancelar
                </button>
                <button type="button" class="btn-guardar-personalizacion" onclick="guardarPersonalizaciones()">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="vertical-align: middle; margin-right: 4px;">
                        <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
                        <polyline points="17 21 17 13 7 13 7 21"/>
                        <polyline points="7 3 7 8 15 8"/>
                    </svg>
                    Guardar Cambios
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Modal de Selección de Imagen -->
<div id="galeria-seleccion-modal" class="galeria-seleccion-modal" onclick="if(event.target === this) cerrarSelectorImagen()">
    <div class="galeria-seleccion-contenido">
        <div class="galeria-seleccion-header">
            <h4>Seleccionar Imagen de la Galería</h4>
            <button class="personalizacion-modal-close" onclick="cerrarSelectorImagen()">&times;</button>
        </div>
        <div class="galeria-seleccion-body">
            <div class="selector-tabs">
                <button type="button" class="selector-tab activo" onclick="cambiarTabGaleria('imagenes', this)">📷 Imágenes</button>
                <button type="button" class="selector-tab" onclick="cambiarTabGaleria('videos', this)">🎬 Videos</button>
            </div>
            
            <div id="galeria-imagenes" class="galeria-seleccion-grid">
                <?php if (!empty($galeriaEventos)): ?>
                    <?php foreach ($galeriaEventos as $imagen): ?>
                        <div class="galeria-seleccion-item" onclick="seleccionarImagenGaleria('<?php echo htmlspecialchars($imagen['archivo']); ?>', this)">
                            <img src="<?php echo rtrim(BASE_URL, '/'); ?>/<?php echo htmlspecialchars($imagen['archivo']); ?>" alt="Imagen galería">
                        </div>
                    <?php endforeach; ?>
                <?php else: ?>
                    <p style="grid-column: 1/-1; text-align: center; color: var(--color-text-secondary); padding: 40px;">
                        No hay imágenes en la galería. Sube imágenes desde la sección de Configuración.
                    </p>
                <?php endif; ?>
            </div>
            
            <div id="galeria-videos" class="galeria-seleccion-grid" style="display: none;">
                <?php if (!empty($videosEvento)): ?>
                    <?php foreach ($videosEvento as $video): ?>
                        <div class="galeria-seleccion-item" onclick="seleccionarImagenGaleria('<?php echo htmlspecialchars($video['archivo']); ?>', this)">
                            <video muted>
                                <source src="<?php echo rtrim(BASE_URL, '/'); ?>/<?php echo htmlspecialchars($video['archivo']); ?>" type="<?php echo htmlspecialchars($video['tipo_mime'] ?? 'video/mp4'); ?>">
                            </video>
                        </div>
                    <?php endforeach; ?>
                <?php else: ?>
                    <p style="grid-column: 1/-1; text-align: center; color: var(--color-text-secondary); padding: 40px;">
                        No hay videos disponibles. Sube videos desde la sección de Configuración.
                    </p>
                <?php endif; ?>
            </div>
        </div>
    </div>
</div>

<script>
const BASE_URL_JS = '<?php echo addslashes(rtrim(BASE_URL, '/')); ?>';
let templateSeleccionado = {
    id: '<?php echo htmlspecialchars($templateActualId); ?>',
    tipo: '<?php echo htmlspecialchars($templateActualTipo); ?>'
};

function seleccionarTemplate(templateId, templateTipo) {
    // Actualizar selección visual
    document.querySelectorAll('.template-card').forEach(card => {
        card.classList.remove('selected');
    });
    
    const card = document.querySelector(`[data-template-id="${templateId}"][data-template-tipo="${templateTipo}"]`);
    if (card) {
        card.classList.add('selected');
    }
    
    // Actualizar campos hidden
    document.getElementById('template_id_selected').value = templateId;
    document.getElementById('template_tipo_selected').value = templateTipo;
    
    const templateAnterior = { ...templateSeleccionado };
    templateSeleccionado = { id: templateId, tipo: templateTipo };
    
    // Mostrar indicador de cambio pendiente si cambió el template
    const btnGuardar = document.querySelector('.btn-guardar-template');
    if (templateAnterior.id !== templateId || templateAnterior.tipo !== templateTipo) {
        btnGuardar.classList.add('cambios-pendientes');
        btnGuardar.innerHTML = `
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="vertical-align: middle; margin-right: 6px;">
                <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
                <polyline points="17 21 17 13 7 13 7 21"/>
                <polyline points="7 3 7 8 15 8"/>
            </svg>
            Guardar Template (Cambios pendientes)
        `;
        
        // Desactivar botón de editar campos hasta que se guarde el nuevo template
        const btnEditarCampos = document.querySelector('.btn-editar-campos');
        if (btnEditarCampos) {
            btnEditarCampos.style.opacity = '0.5';
            btnEditarCampos.style.pointerEvents = 'none';
            btnEditarCampos.title = 'Guarda el template primero para poder editar sus campos';
        }
    }
    
    // Scroll suave al formulario
    document.querySelector('.form-actions-template').scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}

function previewTemplate(templateId, templateTipo) {
    const previewUrl = BASE_URL_JS + '/public/invitacion/index.php?preview=1&template=' + templateId + '&tipo=' + templateTipo;
    window.open(previewUrl, '_blank');
}

function cerrarPreviewModal() {
    document.getElementById('preview-modal').classList.remove('show');
    document.getElementById('preview-iframe').src = '';
}

// Inicializar selección visual al cargar
document.addEventListener('DOMContentLoaded', function() {
    const card = document.querySelector(`[data-template-id="${templateSeleccionado.id}"][data-template-tipo="${templateSeleccionado.tipo}"]`);
    if (card) {
        card.classList.add('selected');
    }
});

// Confirmar antes de cambiar si ya hay un template seleccionado
document.getElementById('formTemplate').addEventListener('submit', function(e) {
    const nuevoId = document.getElementById('template_id_selected').value;
    const nuevoTipo = document.getElementById('template_tipo_selected').value;
    
    if (nuevoId !== '<?php echo htmlspecialchars($templateActualId); ?>' || nuevoTipo !== '<?php echo htmlspecialchars($templateActualTipo); ?>') {
        if (!confirm('¿Está seguro de cambiar el template? Esto actualizará el diseño de todas las invitaciones.')) {
            e.preventDefault();
            return false;
        }
    }
});

// Función para eliminar template personalizado
function eliminarTemplate(templateId, templateTipo) {
    if (templateTipo !== 'custom') {
        alert('Solo se pueden eliminar templates personalizados.');
        return;
    }
    
    if (!confirm('¿Está seguro de eliminar este template personalizado? Esta acción no se puede deshacer.')) {
        return;
    }
    
    // Crear formulario para eliminar
    const form = document.createElement('form');
    form.method = 'POST';
    form.action = '';
    
    const input1 = document.createElement('input');
    input1.type = 'hidden';
    input1.name = 'eliminar_template';
    input1.value = '1';
    form.appendChild(input1);
    
    const input2 = document.createElement('input');
    input2.type = 'hidden';
    input2.name = 'template_id_eliminar';
    input2.value = templateId;
    form.appendChild(input2);
    
    const input3 = document.createElement('input');
    input3.type = 'hidden';
    input3.name = 'template_tipo_eliminar';
    input3.value = templateTipo;
    form.appendChild(input3);
    
    document.body.appendChild(form);
    form.submit();
}

// ============================================
// FUNCIONES DE PERSONALIZACIÓN DE TEMPLATE
// ============================================

let selectorImagenActual = { seccion: null, elemento: null };

function abrirModalPersonalizacion() {
    document.getElementById('personalizacion-modal').classList.add('show');
    document.body.style.overflow = 'hidden';
    
    // Cargar preview
    actualizarPreviewPersonalizacion();
    
    // Abrir primera sección
    const primeraSeccion = document.querySelector('.personalizacion-seccion');
    if (primeraSeccion && !primeraSeccion.classList.contains('abierta')) {
        primeraSeccion.classList.add('abierta');
    }
}

function cerrarModalPersonalizacion() {
    document.getElementById('personalizacion-modal').classList.remove('show');
    document.body.style.overflow = '';
}

function toggleSeccion(header) {
    const seccion = header.closest('.personalizacion-seccion');
    seccion.classList.toggle('abierta');
}

function actualizarPreviewPersonalizacion() {
    const iframe = document.getElementById('personalizacion-preview-iframe');
    iframe.src = BASE_URL_JS + '/public/invitacion/index.php?preview=1&t=' + Date.now();
}

function abrirSelectorImagen(seccion, elemento) {
    selectorImagenActual = { seccion, elemento };
    document.getElementById('galeria-seleccion-modal').classList.add('show');
    
    // Resetear selección visual
    document.querySelectorAll('.galeria-seleccion-item').forEach(item => {
        item.classList.remove('seleccionado');
    });
}

function cerrarSelectorImagen() {
    document.getElementById('galeria-seleccion-modal').classList.remove('show');
    selectorImagenActual = { seccion: null, elemento: null };
}

function cambiarTabGaleria(tipo, boton) {
    // Actualizar tabs
    document.querySelectorAll('.selector-tab').forEach(tab => tab.classList.remove('activo'));
    boton.classList.add('activo');
    
    // Mostrar/ocultar grids
    document.getElementById('galeria-imagenes').style.display = tipo === 'imagenes' ? 'grid' : 'none';
    document.getElementById('galeria-videos').style.display = tipo === 'videos' ? 'grid' : 'none';
}

function seleccionarImagenGaleria(rutaImagen, elemento) {
    if (!selectorImagenActual.seccion || !selectorImagenActual.elemento) return;
    
    // Actualizar selección visual en galería
    document.querySelectorAll('.galeria-seleccion-item').forEach(item => {
        item.classList.remove('seleccionado');
    });
    elemento.classList.add('seleccionado');
    
    // Actualizar el campo hidden y el preview de imagen
    const selectorDiv = document.querySelector(`.selector-imagen[data-seccion="${selectorImagenActual.seccion}"][data-elemento="${selectorImagenActual.elemento}"]`);
    const inputHidden = document.querySelector(`input.campo-personalizacion[data-seccion="${selectorImagenActual.seccion}"][data-elemento="${selectorImagenActual.elemento}"]`);
    
    if (selectorDiv && inputHidden) {
        inputHidden.value = rutaImagen;
        selectorDiv.classList.add('tiene-imagen');
        selectorDiv.innerHTML = `
            <img src="${BASE_URL_JS}/${rutaImagen}" alt="Imagen seleccionada">
            <div style="font-size: 12px; color: var(--color-text-secondary);">Clic para cambiar</div>
        `;
    }
    
    // Cerrar modal de selección
    setTimeout(() => {
        cerrarSelectorImagen();
    }, 300);
}

function recopilarPersonalizaciones() {
    const personalizaciones = [];
    
    document.querySelectorAll('.campo-personalizacion').forEach(campo => {
        const seccion = campo.dataset.seccion;
        const elemento = campo.dataset.elemento;
        const tipo = campo.dataset.tipo;
        const valor = campo.value.trim();
        
        // Solo agregar si hay valor
        if (valor) {
            personalizaciones.push({
                seccion: seccion,
                elemento: elemento,
                tipo: tipo,
                valor: valor
            });
        }
    });
    
    return personalizaciones;
}

function guardarPersonalizaciones() {
    const personalizaciones = recopilarPersonalizaciones();
    
    const formData = new FormData();
    formData.append('ajax_action', 'guardar_personalizaciones');
    formData.append('personalizaciones', JSON.stringify(personalizaciones));
    
    // Mostrar loading
    const btnGuardar = document.querySelector('.btn-guardar-personalizacion');
    const textoOriginal = btnGuardar.innerHTML;
    btnGuardar.innerHTML = '⏳ Guardando...';
    btnGuardar.disabled = true;
    
    fetch('', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('✅ ' + data.message);
            actualizarPreviewPersonalizacion();
        } else {
            alert('❌ ' + data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('❌ Error al guardar las personalizaciones');
    })
    .finally(() => {
        btnGuardar.innerHTML = textoOriginal;
        btnGuardar.disabled = false;
    });
}

function restaurarPersonalizaciones() {
    if (!confirm('¿Está seguro de restaurar todos los campos a sus valores por defecto? Esta acción eliminará todas las personalizaciones.')) {
        return;
    }
    
    const formData = new FormData();
    formData.append('ajax_action', 'restaurar_personalizaciones');
    
    fetch('', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('✅ ' + data.message);
            // Limpiar todos los campos
            document.querySelectorAll('.campo-personalizacion').forEach(campo => {
                if (campo.tagName === 'TEXTAREA') {
                    campo.value = '';
                } else if (campo.type === 'hidden') {
                    campo.value = '';
                    // Resetear preview de imagen
                    const selectorDiv = document.querySelector(`.selector-imagen[data-seccion="${campo.dataset.seccion}"][data-elemento="${campo.dataset.elemento}"]`);
                    if (selectorDiv) {
                        selectorDiv.classList.remove('tiene-imagen');
                        selectorDiv.innerHTML = `
                            <div class="placeholder">
                                <div class="placeholder-icon">
                                                        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                                                            <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
                                                            <circle cx="8.5" cy="8.5" r="1.5"/>
                                                            <polyline points="21 15 16 10 5 21"/>
                                                        </svg>
                                                    </div>
                                <div>Clic para seleccionar imagen</div>
                            </div>
                        `;
                    }
                }
            });
            actualizarPreviewPersonalizacion();
        } else {
            alert('❌ ' + data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('❌ Error al restaurar las personalizaciones');
    });
}

// Cerrar modales con Escape
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
        if (document.getElementById('galeria-seleccion-modal').classList.contains('show')) {
            cerrarSelectorImagen();
        } else if (document.getElementById('personalizacion-modal').classList.contains('show')) {
            cerrarModalPersonalizacion();
        }
    }
});

</script>
