<?php
require_once '../includes/config.php';
require_once '../includes/db.php';

session_start();
// Verificar si el usuario está logueado y es admin
if (!isset($_SESSION['usuario_id']) || empty($_SESSION['usuario_id']) || $_SESSION['rol'] !== 'admin') {
    header('Location: ../login.php');
    exit;
}

$db = new Database();
$pdo = $db->getPDO();

// Verificar si existe la columna dia_vence_pagare
$checkColumnSql = "SHOW COLUMNS FROM configuracion LIKE 'dia_vence_pagare'";
$result = $db->query($checkColumnSql)->fetchAll();

if (empty($result)) {
    try {
        // Agregar la columna si no existe
        $alterTableSql = "ALTER TABLE configuracion ADD COLUMN dia_vence_pagare INT DEFAULT 6";
        $db->query($alterTableSql);
    } catch (PDOException $e) {
        $_SESSION['alert'] = '<div class="alert alert-danger" role="alert">
            Error al crear la columna dia_vence_pagare: ' . $e->getMessage() . '
        </div>';
    }
}

// Obtener configuración
$configSql = "SELECT color_principal, color_secundario, favicon, tipo_factura FROM configuracion LIMIT 1";
$config = $db->query($configSql)->fetch(PDO::FETCH_ASSOC);

if (!empty($_POST)) {
    $alert = "";
    try {
        $id = $_POST['id'];
        $params = [
            'nombre_comercio' => $_POST['nombre_comercio'],
            'ciudad' => $_POST['ciudad'],
            'direccion' => $_POST['direccion'],
            'telefono' => $_POST['telefono'],
            'sitio_web' => $_POST['sitio_web'],
            'correo' => $_POST['correo'],
            'mensaje_factura' => $_POST['mensaje_factura'],
            'establecimiento' => $_POST['establecimiento'],
            'punto_emision' => $_POST['punto_emision'],
            'color_principal' => $_POST['color_principal'],
            'color_secundario' => $_POST['color_secundario'],
            'facebook_url' => $_POST['facebook_url'],
            'instagram_url' => $_POST['instagram_url'],
            'whatsapp' => $_POST['whatsapp'],
            'moneda' => $_POST['moneda'],
            'moneda_descripcion' => $_POST['moneda_descripcion'],
            'vender_stock_0' => isset($_POST['vender_stock_0']) ? 1 : 0,
            'con_decimales' => isset($_POST['con_decimales']) ? 1 : 0,
            'dias_primer_aviso' => $_POST['dias_primer_aviso'],
            'dias_tercer_aviso' => $_POST['dias_tercer_aviso'],
            'pagare_clausulas' => $_POST['pagare_clausulas'],
            'timezone' => $_POST['timezone'],
            'dia_vence_pagare' => $_POST['dia_vence_pagare'],
            'color_fondo' => $_POST['color_fondo'],
            'color_texto' => $_POST['color_texto'],
            'color_fondo_tarjetas' => $_POST['color_fondo_tarjetas'],
            'color_borde_tarjetas' => $_POST['color_borde_tarjetas'],
            'color_fondo_header' => $_POST['color_fondo_header'],
            'color_texto_header' => $_POST['color_texto_header'],
            'color_fondo_footer' => $_POST['color_fondo_footer'],
            'color_texto_footer' => $_POST['color_texto_footer'],
            'color_enlaces' => $_POST['color_enlaces'],
            'color_hover_enlaces' => $_POST['color_hover_enlaces'],
            'ok' => isset($_POST['ok']) ? 1 : 0,
            'id' => $id
        ];

        // Procesar logo
        if (isset($_FILES['logo']) && $_FILES['logo']['error'] == 0) {
            $params['logo'] = uploadImage('logo', '../uploads/config/');
        } else {
            $params['logo'] = $_POST['logo_actual'];
        }

        // Procesar favicon
        if (isset($_FILES['favicon']) && $_FILES['favicon']['error'] == 0) {
            $params['favicon'] = uploadImage('favicon', '../uploads/config/');
        } else {
            $params['favicon'] = $_POST['favicon_actual'];
        }

        $sql = "UPDATE configuracion SET 
                nombre_comercio = :nombre_comercio,
                ciudad = :ciudad,
                direccion = :direccion,
                telefono = :telefono,
                sitio_web = :sitio_web,
                correo = :correo,
                mensaje_factura = :mensaje_factura,
                establecimiento = :establecimiento,
                punto_emision = :punto_emision,
                logo = :logo,
                favicon = :favicon,
                color_principal = :color_principal,
                color_secundario = :color_secundario,
                facebook_url = :facebook_url,
                instagram_url = :instagram_url,
                whatsapp = :whatsapp,
                moneda = :moneda,
                moneda_descripcion = :moneda_descripcion,
                vender_stock_0 = :vender_stock_0,
                con_decimales = :con_decimales,
                dias_primer_aviso = :dias_primer_aviso,
                dias_tercer_aviso = :dias_tercer_aviso,
                pagare_clausulas = :pagare_clausulas,
                timezone = :timezone,
                dia_vence_pagare = :dia_vence_pagare,
                color_fondo = :color_fondo,
                color_texto = :color_texto,
                color_fondo_tarjetas = :color_fondo_tarjetas,
                color_borde_tarjetas = :color_borde_tarjetas,
                color_fondo_header = :color_fondo_header,
                color_texto_header = :color_texto_header,
                color_fondo_footer = :color_fondo_footer,
                color_texto_footer = :color_texto_footer,
                color_enlaces = :color_enlaces,
                color_hover_enlaces = :color_hover_enlaces,
                ok = :ok,
                factura_tipo = :factura_tipo
                WHERE id = :id";

        // Agregar factura_tipo a los parámetros
        $params['factura_tipo'] = $_POST['factura_tipo'];

        $stmt = $db->prepare($sql);
        if ($stmt->execute($params)) {
            // Actualizar tipo de factura
            $tipo_factura = $_POST['tipo_factura'];
            $stmt = $pdo->prepare("UPDATE configuracion SET tipo_factura = ? WHERE id = 1");
            $stmt->execute([$tipo_factura]);

            $_SESSION['alert'] = '<div class="alert alert-success" role="alert">
                        Configuración actualizada con éxito
                    </div>';
            header('Location: parametros.php');
            exit;
        }
    } catch (PDOException $e) {
        $_SESSION['alert'] = '<div class="alert alert-danger" role="alert">
                    Error al actualizar la configuración: ' . $e->getMessage() . '
                </div>';
        header('Location: parametros.php');
        exit;
    }
}

// Función para subir imágenes
function uploadImage($inputName, $targetDir) {
    // Asegurarse de que el directorio existe
    if (!file_exists($targetDir)) {
        mkdir($targetDir, 0777, true);
    }
    
    $fileName = basename($_FILES[$inputName]["name"]);
    $targetFilePath = $targetDir . $fileName;
    $fileType = pathinfo($targetFilePath, PATHINFO_EXTENSION);
    
    $allowTypes = array('jpg','png','jpeg');
    if (in_array($fileType, $allowTypes)) {
        if (move_uploaded_file($_FILES[$inputName]["tmp_name"], $targetFilePath)) {
            return $fileName;
        }
    }
    return '';
}

// Obtener datos de configuración
$data = $db->query("SELECT * FROM configuracion WHERE id = 1")->fetch(PDO::FETCH_ASSOC);
$page_title = "Parámetros del Sistema"; // Agregamos título para el header
require_once "../includes/header.php";
?>
<style>
:root {
    --color-principal: <?php echo $data['color_principal']; ?>;
    --color-fondo: <?php echo $data['color_fondo']; ?>;
    --color-texto: <?php echo $data['color_texto']; ?>;
    --color-fondo-tarjetas: <?php echo $data['color_fondo_tarjetas']; ?>;
    --color-borde-tarjetas: <?php echo $data['color_borde_tarjetas']; ?>;
    --color-fondo-header: <?php echo $data['color_fondo_header']; ?>;
    --color-texto-header: <?php echo $data['color_texto_header']; ?>;
    --color-fondo-footer: <?php echo $data['color_fondo_footer']; ?>;
    --color-texto-footer: <?php echo $data['color_texto_footer']; ?>;
    --color-enlaces: <?php echo $data['color_enlaces']; ?>;
    --color-hover-enlaces: <?php echo $data['color_hover_enlaces']; ?>;
}

/* Ajuste para la franja superior */
.header,
.navbar,
.navbar *,
.top-bar,
.navigation-bar {
    background-color: var(--color-fondo-header) !important;
    color: var(--color-texto-header) !important;
}

/* Mantener el icono del menú sin cambios */
.menu-icon img,
.btn-menu img,
a[href="dashboard.php"] img {
    filter: none !important;
}

/* Asegurar que los botones del header mantengan el color correcto */
.navbar .btn-link {
    color: var(--color-texto-header) !important;
}

/* Estilos para los encabezados de las tarjetas */
.card-header {
    background-color: var(--color-fondo) !important;
    color: var(--color-texto) !important;
}

/* Ajuste específico para el título principal */
.card > .card-header {
    background-color: var(--color-fondo) !important;
    color: var(--color-texto) !important;
}

/* El resto de los estilos... */
</style>

<?php
// Mostrar alerta desde sesión si existe
if (isset($_SESSION['alert'])) {
    $alert = $_SESSION['alert'];
    unset($_SESSION['alert']);
}
?>

<div class="card">
    <div class="card-header">
        <h5 class="mb-0">Parámetros del Sistema</h5>
    </div>
    <div class="card-body">
        <?php echo isset($alert) ? $alert : ''; ?>
        <form action="" method="post" enctype="multipart/form-data" class="responsive-form">
            <input type="hidden" name="id" value="<?php echo $data['id']; ?>">
            
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">Información General</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Nombre del Comercio</label>
                                <input type="text" class="form-control" name="nombre_comercio" value="<?php echo $data['nombre_comercio']; ?>" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Ciudad</label>
                                <input type="text" class="form-control" name="ciudad" value="<?php echo $data['ciudad']; ?>">
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Dirección</label>
                                <textarea class="form-control" name="direccion" rows="2"><?php echo $data['direccion']; ?></textarea>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Establecimiento</label>
                                <input type="text" class="form-control" name="establecimiento" value="<?php echo $data['establecimiento']; ?>">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Punto de Emisión</label>
                                <input type="text" class="form-control" name="punto_emision" value="<?php echo $data['punto_emision']; ?>">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">Contacto</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label>Teléfono</label>
                                <input type="text" class="form-control" name="telefono" value="<?php echo $data['telefono']; ?>">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label>Correo</label>
                                <input type="email" class="form-control" name="correo" value="<?php echo $data['correo']; ?>">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label>Sitio Web</label>
                                <input type="text" class="form-control" name="sitio_web" 
                                       value="<?php echo preg_replace('#^https?://#', '', $data['sitio_web']); ?>" 
                                       placeholder="ejemplo.com"
                                       onchange="cleanUrl(this)">
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">Identidad Visual</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Logo</label>
                                <input type="file" class="form-control" name="logo" accept="image/*">
                                <input type="hidden" name="logo_actual" value="<?php echo $data['logo']; ?>">
                                <?php if (!empty($data['logo'])): ?>
                                    <img src="../uploads/config/<?php echo $data['logo']; ?>" class="mt-2" style="max-height: 50px;">
                                <?php endif; ?>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Favicon</label>
                                <input type="file" class="form-control" name="favicon" accept="image/*">
                                <input type="hidden" name="favicon_actual" value="<?php echo $data['favicon']; ?>">
                                <?php if (!empty($data['favicon'])): ?>
                                    <img src="../uploads/config/<?php echo $data['favicon']; ?>" class="mt-2" style="max-height: 32px;">
                                <?php endif; ?>
                            </div>
                        </div>
                    </div>

                    <div class="row mb-4">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Color Principal</label>
                                <input type="color" class="form-control" name="color_principal" value="<?php echo $data['color_principal']; ?>">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Color Secundario</label>
                                <input type="color" class="form-control" name="color_secundario" value="<?php echo $data['color_secundario']; ?>">
                            </div>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-12">
                            <h6 class="border-bottom pb-2">Colores del Tema</h6>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Color de Fondo Principal</label>
                                <input type="color" class="form-control" name="color_fondo" value="<?php echo $data['color_fondo']; ?>">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Color de Texto Principal</label>
                                <input type="color" class="form-control" name="color_texto" value="<?php echo $data['color_texto']; ?>">
                            </div>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Color de Fondo de Tarjetas</label>
                                <input type="color" class="form-control" name="color_fondo_tarjetas" value="<?php echo $data['color_fondo_tarjetas']; ?>">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Color de Borde de Tarjetas</label>
                                <input type="color" class="form-control" name="color_borde_tarjetas" value="<?php echo $data['color_borde_tarjetas']; ?>">
                            </div>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Color de Fondo del Header</label>
                                <input type="color" class="form-control" name="color_fondo_header" value="<?php echo $data['color_fondo_header']; ?>">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Color de Texto del Header</label>
                                <input type="color" class="form-control" name="color_texto_header" value="<?php echo $data['color_texto_header']; ?>">
                            </div>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Color de Fondo del Footer</label>
                                <input type="color" class="form-control" name="color_fondo_footer" value="<?php echo $data['color_fondo_footer']; ?>">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Color de Texto del Footer</label>
                                <input type="color" class="form-control" name="color_texto_footer" value="<?php echo $data['color_texto_footer']; ?>">
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Color de Enlaces</label>
                                <input type="color" class="form-control" name="color_enlaces" value="<?php echo $data['color_enlaces']; ?>">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Color de Enlaces (Hover)</label>
                                <input type="color" class="form-control" name="color_hover_enlaces" value="<?php echo $data['color_hover_enlaces']; ?>">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">Redes Sociales</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label>Facebook URL</label>
                                <input type="text" class="form-control" name="facebook_url" 
                                       value="<?php echo preg_replace('#^https?://#', '', $data['facebook_url']); ?>" 
                                       placeholder="facebook.com/miempresa"
                                       onchange="cleanUrl(this)">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label>Instagram URL</label>
                                <input type="text" class="form-control" name="instagram_url" 
                                       value="<?php echo preg_replace('#^https?://#', '', $data['instagram_url']); ?>" 
                                       placeholder="instagram.com/miempresa"
                                       onchange="cleanUrl(this)">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label>WhatsApp</label>
                                <input type="text" class="form-control" name="whatsapp" value="<?php echo $data['whatsapp']; ?>">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">Configuración de Facturación</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Moneda</label>
                                <input type="text" class="form-control" name="moneda" value="<?php echo $data['moneda']; ?>">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Descripción Moneda</label>
                                <input type="text" class="form-control" name="moneda_descripcion" value="<?php echo $data['moneda_descripcion']; ?>">
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Mensaje en Factura</label>
                                <textarea class="form-control" name="mensaje_factura" rows="2"><?php echo $data['mensaje_factura']; ?></textarea>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="factura_tipo" class="form-label">Tipo de Facturación</label>
                                <select class="form-select" id="factura_tipo" name="factura_tipo" required>
                                    <option value="1" <?php echo $data['factura_tipo'] == 1 ? 'selected' : ''; ?>>Factura Electrónica</option>
                                    <option value="2" <?php echo $data['factura_tipo'] == 2 ? 'selected' : ''; ?>>Factura Pre-impresa</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-12 mt-3">
                            <div class="form-group">
                                <label for="tipo_factura" class="form-label">Formato de Factura</label>
                                <select class="form-select" id="tipo_factura" name="tipo_factura" required>
                                    <option value="A4" <?php echo $data['tipo_factura'] === 'A4' ? 'selected' : ''; ?>>A4</option>
                                    <option value="7.5" <?php echo $data['tipo_factura'] === '7.5' ? 'selected' : ''; ?> class="formato-electronico">7.5</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">Configuración del Sistema</h5>
                </div>
                <div class="card-body">
                    <div class="row mb-3">
                        <div class="col-md-12">
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input" name="ok" id="ok" <?php echo $data['ok'] ? 'checked' : ''; ?>>
                                <label class="form-check-label" for="ok">
                                    <i class="fas fa-power-off"></i> Sitio en Producción Normal 
                                    <small class="text-muted">(Desmarcar pondrá el sitio en modo mantenimiento)</small>
                                </label>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-3">
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input" name="con_decimales" id="con_decimales" <?php echo $data['con_decimales'] ? 'checked' : ''; ?>>
                                <label class="form-check-label" for="con_decimales">Usar Decimales</label>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input" name="vender_stock_0" id="vender_stock_0" <?php echo $data['vender_stock_0'] ? 'checked' : ''; ?>>
                                <label class="form-check-label" for="vender_stock_0">Permitir Venta sin Stock</label>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label>Zona Horaria</label>
                                <select class="form-control" name="timezone">
                                    <?php
                                    $zonas_horarias = DateTimeZone::listIdentifiers();
                                    foreach ($zonas_horarias as $zona) {
                                        $selected = ($zona == $data['timezone']) ? 'selected' : '';
                                        echo "<option value=\"$zona\" $selected>$zona</option>";
                                    }
                                    ?>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                <label>Días Primer Aviso</label>
                                <input type="number" class="form-control input-day" name="dias_primer_aviso" value="<?php echo $data['dias_primer_aviso']; ?>">
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                <label>Días Tercer Aviso</label>
                                <input type="number" class="form-control input-day" name="dias_tercer_aviso" value="<?php echo $data['dias_tercer_aviso']; ?>">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label>Día Vence Pagaré</label>
                                <select class="form-control select-day" name="dia_vence_pagare">
                                    <option value="1" <?php echo ($data['dia_vence_pagare'] == 1) ? 'selected' : ''; ?>>Lunes</option>
                                    <option value="2" <?php echo ($data['dia_vence_pagare'] == 2) ? 'selected' : ''; ?>>Martes</option>
                                    <option value="3" <?php echo ($data['dia_vence_pagare'] == 3) ? 'selected' : ''; ?>>Miércoles</option>
                                    <option value="4" <?php echo ($data['dia_vence_pagare'] == 4) ? 'selected' : ''; ?>>Jueves</option>
                                    <option value="5" <?php echo ($data['dia_vence_pagare'] == 5) ? 'selected' : ''; ?>>Viernes</option>
                                    <option value="6" <?php echo ($data['dia_vence_pagare'] == 6) ? 'selected' : ''; ?>>Sábado</option>
                                </select>
                                <small class="form-text text-muted">Día de vencimiento semanal</small>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Cláusulas del Pagaré</label>
                                <textarea class="form-control" name="pagare_clausulas" rows="4"><?php echo $data['pagare_clausulas']; ?></textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row mt-4">
                <div class="col-md-12">
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save"></i> Guardar Cambios
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>


<script>
document.addEventListener('DOMContentLoaded', function() {
    // Control de formato de factura según tipo de facturación
    const facturaFormato = document.getElementById('tipo_factura');
    const facturaTipo = document.getElementById('factura_tipo');

    function actualizarFormatoFactura() {
        const opcionSieteYMedio = facturaFormato.querySelector('option[value="7.5"]');
        if (facturaTipo.value === '2') { // Factura Pre-impresa
            if (facturaFormato.value === '7.5') {
                facturaFormato.value = 'A4';
            }
            opcionSieteYMedio.style.display = 'none';
        } else { // Factura Electrónica
            opcionSieteYMedio.style.display = '';
        }
    }

    facturaTipo.addEventListener('change', actualizarFormatoFactura);
    actualizarFormatoFactura(); // Ejecutar al cargar la página

    // Obtener todos los inputs de tipo color
    const colorInputs = document.querySelectorAll('input[type="color"]');
    
    // Función para actualizar las variables CSS
    function updateCSSVariable(name, value) {
        document.documentElement.style.setProperty(`--${name}`, value);
    }
    
    // Agregar evento change a cada input de color
    colorInputs.forEach(input => {
        input.addEventListener('input', function() {
            const varName = this.name.replace('color_', ''); // Ejemplo: color_fondo -> fondo
            updateCSSVariable(varName, this.value);
            
            // Actualizar elementos específicos según el color cambiado
            switch(this.name) {
                case 'color_fondo':
                    document.body.style.backgroundColor = this.value;
                    break;
                case 'color_texto':
                    document.body.style.color = this.value;
                    break;
                case 'color_fondo_tarjetas':
                    document.querySelectorAll('.card').forEach(card => {
                        card.style.backgroundColor = this.value;
                    });
                    break;
                case 'color_borde_tarjetas':
                    document.querySelectorAll('.card').forEach(card => {
                        card.style.borderColor = this.value;
                    });
                    break;
                case 'color_enlaces':
                    document.querySelectorAll('a:not(.btn)').forEach(link => {
                        link.style.color = this.value;
                    });
                    break;
            }
        });
    });
});
</script>

<style>
/* Estilo para los inputs de color */
input[type="color"] {
    width: 100%;
    height: 40px;
    padding: 2px;
    border: 1px solid var(--color-borde-tarjetas);
    border-radius: 4px;
}

input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 2px;
}

/* Mejorar visibilidad de las etiquetas */
label {
    font-weight: 500;
    margin-bottom: 0.5rem;
}

/* Ajustar espaciado de las tarjetas */
.card {
    transition: all 0.3s ease;
}

.card:hover {
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
}

/* Estilos para los encabezados de las tarjetas */
.card-header {
    background-color: var(--color-fondo) !important;
    color: var(--color-texto) !important;
}

/* Ajuste específico para el título principal */
.card > .card-header {
    background-color: var(--color-fondo) !important;
    color: var(--color-texto) !important;
}
</style>
<script>
function cleanUrl(input) {
    // Eliminar http:// o https:// si existe
    input.value = input.value.replace(/^https?:\/\//, '');
    // Eliminar www. si existe
    input.value = input.value.replace(/^www\./, '');
    
    // Si es una URL de Facebook o Instagram, asegurarse de que comience con el dominio correcto
    if (input.name === 'facebook_url' && !input.value.startsWith('facebook.com/')) {
        input.value = 'facebook.com/' + input.value.replace('facebook.com/', '');
    }
    if (input.name === 'instagram_url' && !input.value.startsWith('instagram.com/')) {
        input.value = 'instagram.com/' + input.value.replace('instagram.com/', '');
    }
}
</script>
<style>
.responsive-form .row {
    margin-left: -15px;
    margin-right: -15px;
}
.responsive-form .form-group {
    margin-bottom: 1rem;
}
.responsive-form .card {
    border-color: var(--secondary-color);
}
.responsive-form .card-header {
    background-color: var(--primary-color);
    color: white;
}
.responsive-form .btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}
.responsive-form .btn-primary:hover {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
}
.select-day {
    width: auto;
    min-width: 120px;
    max-width: 100%;
}
.select-day, .input-day {
    width: auto;
    min-width: 100px;
    max-width: 100%;
}

.input-day {
    text-align: center;
}

@media (max-width: 767.98px) {
    .responsive-form .col-md-6,
    .responsive-form .col-md-4,
    .responsive-form .col-md-3 {
        margin-bottom: 1rem;
    }
    .select-day, .input-day {
        width: 100%;
    }
}

/* Estilos para el fondo del cuerpo y secciones laterales */
body {
    background-color: var(--color-fondo);
    color: var(--color-texto);
}

#wrapper {
    background-color: var(--color-fondo);
}

.card {
    background-color: var(--color-fondo-tarjetas);
    border-color: var(--color-borde-tarjetas);
    color: var(--color-texto);
}

.blk {
    background-color: var(--color-fondo-tarjetas);
    border-color: var(--color-borde-tarjetas);
    color: var(--color-texto);
}

/* Ajustes para mejor contraste en campos de formulario */
.form-control {
    background-color: var(--color-fondo-tarjetas);
    border-color: var(--color-borde-tarjetas);
    color: var(--color-texto);
}

.form-control:focus {
    background-color: var(--color-fondo-tarjetas);
    border-color: var(--color-principal);
    color: var(--color-texto);
}

/* Ajustes para textos y etiquetas */
label, .form-check-label {
    color: var(--color-texto);
}

.text-muted {
    color: var(--color-texto) !important;
    opacity: 0.7;
}

/* Ajustes para selects */
select.form-control {
    background-color: var(--color-fondo-tarjetas);
    color: var(--color-texto);
}

select.form-control option {
    background-color: var(--color-fondo-tarjetas);
    color: var (--color-texto);
}
</style>

