<?php
include 'sesion.php';
include '../url_amigable.php';
include 'concha.php';
include 'concha_extras.php';

if (session_status() === PHP_SESSION_NONE) {
    @session_start();
}

function h($v){
    return htmlspecialchars((string)$v, ENT_QUOTES, 'UTF-8');
}

function color_ok($v, $fallback = '#0066FF'){
    $v = trim((string)$v);
    if (preg_match('/^#[a-fA-F0-9]{6}$/', $v)) {
        return $v;
    }
    return $fallback;
}

$tour = isset($_GET['tour']) ? (int)$_GET['tour'] : 1;
$usa_estilo_especial = ($estiloweb == 9 || $estiloweb == 85 || $estiloweb == 86);
$mostrar_titulo_cat = ($estiloweb == 9 || $estiloweb == 85 || $estiloweb == 86 || $estiloweb == 87);

$status = '';
$status_tipo = '';

$campos_permitidos = array(
    'd_color_destacada',
    'd_color_fondo',
    'd_color_destacada_sobre',
    'd_color_titulo',
    'd_color_titulo_cat',
    'd_color_menu',
    'd_color_menu_sobre',
    'd_color_fondo_cabecera',
    'd_color_fondo_menu',
    'd_color_weather2'
);

if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['guardar_colores'])) {

    foreach ($campos_permitidos as $campo) {
        if (isset($_POST[$campo])) {
            $valor = color_ok($_POST[$campo]);
            $valor_sql = $conn->real_escape_string($valor);
            $campo_sql = $conn->real_escape_string($campo);
            $conn->query("UPDATE `$basedatos`.`configuracion` SET `$campo_sql` = '$valor_sql'");
            $$campo = $valor;
        }
    }

    $status = 'Los colores se guardaron correctamente.';
    $status_tipo = 'success';
}

$d_color_destacada       = color_ok(isset($d_color_destacada) ? $d_color_destacada : '#0066FF', '#0066FF');
$d_color_fondo           = color_ok(isset($d_color_fondo) ? $d_color_fondo : '#FFFFFF', '#FFFFFF');
$d_color_destacada_sobre = color_ok(isset($d_color_destacada_sobre) ? $d_color_destacada_sobre : '#FFFFFF', '#FFFFFF');
$d_color_titulo          = color_ok(isset($d_color_titulo) ? $d_color_titulo : '#111111', '#111111');
$d_color_titulo_cat      = color_ok(isset($d_color_titulo_cat) ? $d_color_titulo_cat : '#111111', '#111111');
$d_color_menu            = color_ok(isset($d_color_menu) ? $d_color_menu : '#FFFFFF', '#FFFFFF');
$d_color_menu_sobre      = color_ok(isset($d_color_menu_sobre) ? $d_color_menu_sobre : '#0066FF', '#0066FF');
$d_color_fondo_cabecera  = color_ok(isset($d_color_fondo_cabecera) ? $d_color_fondo_cabecera : '#F5F5F5', '#F5F5F5');
$d_color_fondo_menu      = color_ok(isset($d_color_fondo_menu) ? $d_color_fondo_menu : '#0066FF', '#0066FF');
$d_color_weather2        = color_ok(isset($d_color_weather2) ? $d_color_weather2 : '#EEEEEE', '#EEEEEE');
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <meta name="description" content="Wizard inicial del portal">
    <meta name="author" content="<?php echo h($nombresitio); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title><?php echo h($nombresitio); ?> - Wizard Paso 4</title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

    <style type="text/css">
        *{
            border-radius: 0 !important;
            box-sizing: border-box;
        }

        body{
            background: #eef2f7;
            font-family: Arial, Helvetica, sans-serif;
            color: #22303c;
        }

        .wizard-wrap{
            max-width: 1180px;
            margin: 30px auto;
        }

        .wizard-card{
            background: #fff;
            border: 1px solid #dce4ec;
            box-shadow: 0 12px 35px rgba(0,0,0,0.06);
        }

        .wizard-head{
            background: linear-gradient(135deg, #0066FF 0%, #0a4fc7 100%);
            color: #fff;
            padding: 32px;
        }

        .wizard-head h1{
            font-size: 32px;
            margin: 0 0 10px 0;
            font-weight: bold;
        }

        .wizard-head p{
            margin: 0;
            font-size: 16px;
            line-height: 1.7;
        }

        .wizard-progress{
            background: #f7f9fc;
            border-bottom: 1px solid #e2e8ef;
            padding: 16px 32px;
            font-size: 15px;
        }

        .wizard-progress strong{
            color: #0066FF;
        }

        .wizard-body{
            padding: 32px;
        }

        .bloque-info{
            background: #f8fbff;
            border-left: 4px solid #0066FF;
            padding: 18px;
            margin-bottom: 28px;
            line-height: 1.7;
        }

        .preview-general{
            border: 1px solid #dfe6ee;
            margin-bottom: 30px;
            background: #fff;
        }

        .preview-top{
            padding: 18px 22px;
            background: <?php echo h($d_color_fondo_cabecera); ?>;
            border-bottom: 1px solid #e6edf3;
        }

        .preview-top .logo-demo{
            font-size: 28px;
            font-weight: bold;
            color: <?php echo h($d_color_titulo); ?>;
            margin-bottom: 10px;
        }

        .preview-weather{
            display: inline-block;
            background: <?php echo h($d_color_weather2); ?>;
            padding: 8px 12px;
            font-size: 13px;
            color: #222;
            border: 1px solid rgba(0,0,0,0.08);
        }

        .preview-menu{
            background: <?php echo h($d_color_fondo_menu); ?>;
            padding: 0;
            border-bottom: 1px solid rgba(0,0,0,0.08);
        }

        .preview-menu ul{
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
        }

        .preview-menu li{
            margin: 0;
        }

        .preview-menu a{
            display: block;
            padding: 14px 18px;
            color: <?php echo h($d_color_menu); ?>;
            text-decoration: none;
            font-weight: bold;
            border-right: 1px solid rgba(255,255,255,0.10);
        }

        .preview-menu a.activo{
            background: <?php echo h($d_color_menu_sobre); ?>;
            color: #fff;
        }

        .preview-content{
            background: <?php echo h($d_color_fondo); ?>;
            padding: 22px;
        }

        .preview-destacada{
            background: <?php echo h($d_color_destacada); ?>;
            color: <?php echo h($d_color_destacada_sobre); ?>;
            padding: 20px;
            margin-bottom: 20px;
            font-size: 22px;
            font-weight: bold;
        }

        .preview-title{
            color: <?php echo h($d_color_titulo); ?>;
            font-size: 26px;
            font-weight: bold;
            margin-bottom: 15px;
        }

        .preview-cat{
            color: <?php echo h($d_color_titulo_cat); ?>;
            font-size: 15px;
            font-weight: bold;
            margin-bottom: 8px;
            text-transform: uppercase;
        }

        .preview-text{
            color: #374553;
            line-height: 1.7;
        }

        .seccion-titulo{
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 18px;
            color: #1d2b39;
        }

        .grid-colores{
            display: flex;
            flex-wrap: wrap;
            margin: 0 -10px;
        }

        .item-color{
            width: 100%;
            padding: 0 10px;
            margin-bottom: 20px;
        }

        .card-color{
            border: 1px solid #e1e8ef;
            background: #fff;
            height: 100%;
        }

        .card-color-header{
            padding: 16px 18px;
            border-bottom: 1px solid #edf2f7;
            background: #fafcff;
        }

        .card-color-header h4{
            margin: 0 0 6px 0;
            font-size: 20px;
            color: #1d2b39;
            font-weight: bold;
        }

        .card-color-header p{
            margin: 0;
            color: #617181;
            line-height: 1.6;
            font-size: 14px;
        }

        .card-color-body{
            padding: 18px;
        }

        .swatch{
            height: 56px;
            border: 1px solid #d8e0e8;
            margin-bottom: 14px;
        }

        .campo-color label{
            display: block;
            font-weight: bold;
            color: #22303c;
            margin-bottom: 8px;
        }

        .campo-color input[type="color"]{
            width: 100%;
            height: 48px;
            border: 1px solid #ccd6e0;
            background: #fff;
            padding: 4px;
        }

        .hex-box{
            margin-top: 10px;
            background: #f7f9fc;
            border: 1px solid #e4ebf2;
            padding: 9px 10px;
            color: #334455;
            font-size: 14px;
        }

        .wizard-footer{
            border-top: 1px solid #e4ebf2;
            padding: 22px 32px;
            background: #fafcff;
        }

        .btn-wizard{
            background: #0066FF;
            border: 1px solid #0066FF;
            color: #fff;
            padding: 12px 24px;
            font-weight: bold;
        }

        .btn-wizard:hover{
            background: #0055d4;
            border-color: #0055d4;
            color: #fff;
        }

        .btn-light2{
            background: #fff;
            border: 1px solid #ccd6e0;
            color: #334455;
            padding: 12px 24px;
            font-weight: bold;
            text-decoration: none;
            display: inline-block;
        }

        .btn-light2:hover{
            text-decoration: none;
            color: #22303c;
            background: #f7f9fc;
        }

        .alert{
            border-radius: 0 !important;
        }

        .nota-ayuda{
            font-size: 14px;
            color: #617181;
            margin-bottom: 25px;
            line-height: 1.7;
        }

        @media (min-width: 768px){
            .item-color{
                width: 50%;
            }
        }

        @media (min-width: 992px){
            .item-color{
                width: 33.3333%;
            }
        }

        @media (max-width: 767px){
            .wizard-head,
            .wizard-progress,
            .wizard-body,
            .wizard-footer{
                padding: 20px;
            }

            .wizard-head h1{
                font-size: 25px;
            }

            .preview-menu ul{
                display: block;
            }

            .preview-menu a{
                border-right: 0;
                border-bottom: 1px solid rgba(255,255,255,0.10);
            }
        }
    </style>
</head>
<body>

<?php
if ($usa_estilo_especial) {
    include 'menu_estilo9.php';
} else {
    if ($tour != 1) {
        echo '<div class="container" style="background-color:#F1F2ED;">';
        include 'menu.php';
        echo '</div>';
    }
}
?>

<div class="wizard-wrap">
    <div class="wizard-card">

        <div class="wizard-head">
            <h1>Asistente inicial del portal</h1>
            <p>
                En este paso definís los colores base del sitio. Vas a poder ajustar cabecera, menú,
                fondos, títulos y destacadas para darle una identidad visual clara al portal.
            </p>
        </div>

        <div class="wizard-progress">
            <strong>Paso 4 de 8:</strong> Colores de cabecera, menú y bloques
        </div>

        <div class="wizard-body">

            <?php if ($status != '') { ?>
                <div class="alert alert-<?php echo $status_tipo === 'success' ? 'success' : 'danger'; ?>">
                    <?php echo h($status); ?>
                </div>
            <?php } ?>

            <div class="bloque-info">
                Acá elegís los colores principales del diseño. La vista previa de abajo no reemplaza al sitio real,
                pero te sirve para ver rápidamente cómo combinan cabecera, menú, fondos y títulos.
            </div>

            <div class="seccion-titulo">Vista previa rápida</div>

            <div class="preview-general">
                <div class="preview-top">
                    <div class="logo-demo"><?php echo h($nombresitio != '' ? $nombresitio : 'Nombre del sitio'); ?></div>
                    <div class="preview-weather">Clima / temperatura</div>
                </div>

                <div class="preview-menu">
                    <ul>
                        <li><a href="javascript:void(0)" class="activo">Inicio</a></li>
                        <li><a href="javascript:void(0)">Noticias</a></li>
                        <li><a href="javascript:void(0)">Deportes</a></li>
                        <li><a href="javascript:void(0)">Espectáculos</a></li>
                        <li><a href="javascript:void(0)">Contacto</a></li>
                    </ul>
                </div>

                <div class="preview-content">
                    <div class="preview-destacada">Título destacada principal</div>
                    <div class="preview-cat">Categoría de ejemplo</div>
                    <div class="preview-title">Título de sección / noticia</div>
                    <div class="preview-text">
                        Esta es una vista previa simple para ayudarte a ver cómo quedan combinados
                        el fondo general, el menú, la cabecera, los títulos y los bloques destacados.
                    </div>
                </div>
            </div>

            <div class="seccion-titulo">Editar colores</div>
            <div class="nota-ayuda">
                Podés modificar todos juntos y guardar al final. Los colores se guardan directamente
                en la tabla de configuración del sitio.
            </div>

            <form method="post" action="wizard.4.php?tour=1">
                <input type="hidden" name="guardar_colores" value="1">

                <div class="grid-colores">

                    <?php if (!$usa_estilo_especial) { ?>
                    <div class="item-color">
                        <div class="card-color">
                            <div class="card-color-header">
                                <h4>Color destacada</h4>
                                <p>Color de fondo para títulos o bloques destacados.</p>
                            </div>
                            <div class="card-color-body">
                                <div class="swatch" style="background:<?php echo h($d_color_destacada); ?>;"></div>
                                <div class="campo-color">
                                    <label for="d_color_destacada">Elegir color</label>
                                    <input type="color" name="d_color_destacada" id="d_color_destacada" value="<?php echo h($d_color_destacada); ?>">
                                </div>
                                <div class="hex-box"><?php echo h($d_color_destacada); ?></div>
                            </div>
                        </div>
                    </div>
                    <?php } ?>

                    <div class="item-color">
                        <div class="card-color">
                            <div class="card-color-header">
                                <h4>Color fondo general</h4>
                                <p>Fondo principal del área de contenido.</p>
                            </div>
                            <div class="card-color-body">
                                <div class="swatch" style="background:<?php echo h($d_color_fondo); ?>;"></div>
                                <div class="campo-color">
                                    <label for="d_color_fondo">Elegir color</label>
                                    <input type="color" name="d_color_fondo" id="d_color_fondo" value="<?php echo h($d_color_fondo); ?>">
                                </div>
                                <div class="hex-box"><?php echo h($d_color_fondo); ?></div>
                            </div>
                        </div>
                    </div>

                    <?php if (!$usa_estilo_especial) { ?>
                    <div class="item-color">
                        <div class="card-color">
                            <div class="card-color-header">
                                <h4>Color texto sobre destacada</h4>
                                <p>Color del texto que aparece encima de la destacada.</p>
                            </div>
                            <div class="card-color-body">
                                <div class="swatch" style="background:<?php echo h($d_color_destacada_sobre); ?>;"></div>
                                <div class="campo-color">
                                    <label for="d_color_destacada_sobre">Elegir color</label>
                                    <input type="color" name="d_color_destacada_sobre" id="d_color_destacada_sobre" value="<?php echo h($d_color_destacada_sobre); ?>">
                                </div>
                                <div class="hex-box"><?php echo h($d_color_destacada_sobre); ?></div>
                            </div>
                        </div>
                    </div>
                    <?php } ?>

                    <div class="item-color">
                        <div class="card-color">
                            <div class="card-color-header">
                                <h4><?php echo $usa_estilo_especial ? 'Color títulos secciones' : 'Color títulos'; ?></h4>
                                <p>Color principal para títulos de secciones o noticias.</p>
                            </div>
                            <div class="card-color-body">
                                <div class="swatch" style="background:<?php echo h($d_color_titulo); ?>;"></div>
                                <div class="campo-color">
                                    <label for="d_color_titulo">Elegir color</label>
                                    <input type="color" name="d_color_titulo" id="d_color_titulo" value="<?php echo h($d_color_titulo); ?>">
                                </div>
                                <div class="hex-box"><?php echo h($d_color_titulo); ?></div>
                            </div>
                        </div>
                    </div>

                    <?php if ($mostrar_titulo_cat) { ?>
                    <div class="item-color">
                        <div class="card-color">
                            <div class="card-color-header">
                                <h4>Color títulos de categoría</h4>
                                <p>Usado para categorías o pequeños encabezados.</p>
                            </div>
                            <div class="card-color-body">
                                <div class="swatch" style="background:<?php echo h($d_color_titulo_cat); ?>;"></div>
                                <div class="campo-color">
                                    <label for="d_color_titulo_cat">Elegir color</label>
                                    <input type="color" name="d_color_titulo_cat" id="d_color_titulo_cat" value="<?php echo h($d_color_titulo_cat); ?>">
                                </div>
                                <div class="hex-box"><?php echo h($d_color_titulo_cat); ?></div>
                            </div>
                        </div>
                    </div>
                    <?php } ?>

                    <div class="item-color">
                        <div class="card-color">
                            <div class="card-color-header">
                                <h4>Color texto del menú</h4>
                                <p>Color del texto normal de los botones del menú.</p>
                            </div>
                            <div class="card-color-body">
                                <div class="swatch" style="background:<?php echo h($d_color_menu); ?>;"></div>
                                <div class="campo-color">
                                    <label for="d_color_menu">Elegir color</label>
                                    <input type="color" name="d_color_menu" id="d_color_menu" value="<?php echo h($d_color_menu); ?>">
                                </div>
                                <div class="hex-box"><?php echo h($d_color_menu); ?></div>
                            </div>
                        </div>
                    </div>

                    <div class="item-color">
                        <div class="card-color">
                            <div class="card-color-header">
                                <h4>Color botón activo del menú</h4>
                                <p>Color de fondo del item seleccionado o hover fuerte.</p>
                            </div>
                            <div class="card-color-body">
                                <div class="swatch" style="background:<?php echo h($d_color_menu_sobre); ?>;"></div>
                                <div class="campo-color">
                                    <label for="d_color_menu_sobre">Elegir color</label>
                                    <input type="color" name="d_color_menu_sobre" id="d_color_menu_sobre" value="<?php echo h($d_color_menu_sobre); ?>">
                                </div>
                                <div class="hex-box"><?php echo h($d_color_menu_sobre); ?></div>
                            </div>
                        </div>
                    </div>

                    <?php if (!$usa_estilo_especial) { ?>
                    <div class="item-color">
                        <div class="card-color">
                            <div class="card-color-header">
                                <h4>Color fondo cabecera</h4>
                                <p>Color de fondo del bloque superior del sitio.</p>
                            </div>
                            <div class="card-color-body">
                                <div class="swatch" style="background:<?php echo h($d_color_fondo_cabecera); ?>;"></div>
                                <div class="campo-color">
                                    <label for="d_color_fondo_cabecera">Elegir color</label>
                                    <input type="color" name="d_color_fondo_cabecera" id="d_color_fondo_cabecera" value="<?php echo h($d_color_fondo_cabecera); ?>">
                                </div>
                                <div class="hex-box"><?php echo h($d_color_fondo_cabecera); ?></div>
                            </div>
                        </div>
                    </div>
                    <?php } ?>

                    <div class="item-color">
                        <div class="card-color">
                            <div class="card-color-header">
                                <h4>Color fondo del menú</h4>
                                <p>Fondo general de la barra de navegación.</p>
                            </div>
                            <div class="card-color-body">
                                <div class="swatch" style="background:<?php echo h($d_color_fondo_menu); ?>;"></div>
                                <div class="campo-color">
                                    <label for="d_color_fondo_menu">Elegir color</label>
                                    <input type="color" name="d_color_fondo_menu" id="d_color_fondo_menu" value="<?php echo h($d_color_fondo_menu); ?>">
                                </div>
                                <div class="hex-box"><?php echo h($d_color_fondo_menu); ?></div>
                            </div>
                        </div>
                    </div>

                    <?php if (!$usa_estilo_especial) { ?>
                    <div class="item-color">
                        <div class="card-color">
                            <div class="card-color-header">
                                <h4>Color bloque clima</h4>
                                <p>Color de fondo del módulo de clima o temperatura.</p>
                            </div>
                            <div class="card-color-body">
                                <div class="swatch" style="background:<?php echo h($d_color_weather2); ?>;"></div>
                                <div class="campo-color">
                                    <label for="d_color_weather2">Elegir color</label>
                                    <input type="color" name="d_color_weather2" id="d_color_weather2" value="<?php echo h($d_color_weather2); ?>">
                                </div>
                                <div class="hex-box"><?php echo h($d_color_weather2); ?></div>
                            </div>
                        </div>
                    </div>
                    <?php } ?>

                </div>

                <div class="mt-3">
                    <button type="submit" class="btn btn-wizard">Guardar paso 4</button>
                </div>
            </form>

        </div>

        <div class="wizard-footer">
            <div class="d-flex justify-content-between align-items-center flex-wrap">
                <div>
                    <a href="wizard.3.php" class="btn-light2">Volver al paso 3</a>
                    <a href="index.php" class="btn-light2 ml-2">Salir del wizard</a>
                </div>

                <div>
                    <a href="wizard.5.php" class="btn btn-wizard ml-2">Ir al paso 5</a>
                </div>
            </div>
        </div>

    </div>
</div>

</body>
</html>