<?php
// ======================================================
// WIZARD 1 - Nombre del sitio, descripción y keywords
// Todo en un solo archivo
// ======================================================

// include 'sesion.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 limpiar_post($conn, $campo) {
    return isset($_POST[$campo]) ? $conn->real_escape_string(trim($_POST[$campo])) : '';
}

$guardado_ok = false;
$error = '';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $nombresitio2     = limpiar_post($conn, 'nombresitio2');
    $descripcion_web2 = limpiar_post($conn, 'descripcion_web2');
    $palabras_clave2  = limpiar_post($conn, 'palabras_clave2');

    if ($nombresitio2 === '') {
        $error = 'Debes completar el nombre del sitio.';
    } elseif ($descripcion_web2 === '') {
        $error = 'Debes completar la descripción del sitio.';
    } else {
        $ok1 = $conn->query("UPDATE `$basedatos`.`configuracion` SET `nombresitio` = '$nombresitio2'");
        $ok2 = $conn->query("UPDATE `$basedatos`.`configuracion` SET `descripcion_web` = '$descripcion_web2'");
        $ok3 = $conn->query("UPDATE `$basedatos`.`configuracion` SET `palabras_clave` = '$palabras_clave2'");

        if ($ok1 && $ok2 && $ok3) {
            $guardado_ok = true;

            // Refresca variables actuales
            $nombresitio     = $nombresitio2;
            $descripcion_web = $descripcion_web2;
            $palabras_clave  = $palabras_clave2;
        } else {
            $error = 'No se pudieron guardar los datos. Revisá la conexión o la tabla configuracion.';
        }
    }
}

$tour = isset($_GET['tour']) ? (int)$_GET['tour'] : 1;
?>
<!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 1</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: 980px;
            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.6;
        }

        .wizard-progress{
            background: #f7f9fc;
            border-top: 1px solid rgba(255,255,255,0.10);
            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.6;
        }

        .bloque-actual{
            background: #fbfcfe;
            border: 1px solid #e3e9f0;
            padding: 20px;
            margin-bottom: 28px;
        }

        .bloque-actual h3{
            margin: 0 0 15px 0;
            font-size: 20px;
            color: #1d2b39;
            font-weight: bold;
        }

        .actual-item{
            margin-bottom: 14px;
            padding-bottom: 14px;
            border-bottom: 1px solid #edf2f7;
        }

        .actual-item:last-child{
            margin-bottom: 0;
            padding-bottom: 0;
            border-bottom: 0;
        }

        .actual-label{
            font-size: 13px;
            color: #6b7b8b;
            text-transform: uppercase;
            font-weight: bold;
            margin-bottom: 4px;
        }

        .actual-value{
            font-size: 16px;
            color: #22303c;
            word-break: break-word;
        }

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

        .form-group label{
            font-weight: bold;
            margin-bottom: 8px;
            color: #22303c;
        }

        .form-control{
            min-height: 46px;
            border: 1px solid #cfd8e2;
            box-shadow: none !important;
        }

        textarea.form-control{
            min-height: 130px;
            resize: vertical;
        }

        .ayuda{
            display: block;
            margin-top: 6px;
            color: #6c7c8d;
            font-size: 13px;
        }

        .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;
        }

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

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

            .seccion-titulo{
                font-size: 21px;
            }

            .wizard-footer .d-flex{
                gap: 10px;
            }
        }
    </style>
</head>
<body>

<?php
if ($estiloweb == 9 || $estiloweb == 85 || $estiloweb == 86) {
    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>
                Este wizard te ayuda a darle vida al sitio y dejarlo listo para empezar a usar.
                En pocos pasos vas a definir los datos base del portal, su identidad visual,
                contacto, redes, menú y estructura inicial.
            </p>
        </div>

        <div class="wizard-progress">
            <strong>Paso 1 de 8:</strong> Nombre del sitio, descripción y palabras clave
        </div>

        <div class="wizard-body">

            <?php if ($guardado_ok) { ?>
                <div class="alert alert-success">
                    Los datos del paso 1 se guardaron correctamente.
                </div>
            <?php } ?>

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

            <div class="bloque-info">
                En este primer paso definís la base del portal. El nombre del sitio será la identidad principal
                que verá la gente. La descripción ayuda a explicar de qué trata el portal y las palabras clave
                ayudan al posicionamiento y organización general.
            </div>

            <div class="bloque-actual">
                <h3>Valores actuales del sitio</h3>

                <div class="actual-item">
                    <div class="actual-label">Título actual</div>
                    <div class="actual-value">
                        <?php echo $nombresitio != '' ? h($nombresitio) : 'No definido todavía'; ?>
                    </div>
                </div>

                <div class="actual-item">
                    <div class="actual-label">Descripción actual</div>
                    <div class="actual-value">
                        <?php echo $descripcion_web != '' ? nl2br(h($descripcion_web)) : 'No definida todavía'; ?>
                    </div>
                </div>

                <div class="actual-item">
                    <div class="actual-label">Palabras clave actuales</div>
                    <div class="actual-value">
                        <?php echo $palabras_clave != '' ? h($palabras_clave) : 'No definidas todavía'; ?>
                    </div>
                </div>
            </div>

            <div class="seccion-titulo">Editar paso 1</div>

            <form method="post" action="wizard.1.php?tour=1">

                <div class="form-group">
                    <label for="nombresitio2">Nombre del sitio</label>
                    <input
                        class="form-control"
                        name="nombresitio2"
                        type="text"
                        id="nombresitio2"
                        value="<?php echo h($nombresitio); ?>"
                        required
                    />
                    <span class="ayuda">
                        Este será el nombre visible principal del portal.
                    </span>
                </div>

                <div class="form-group">
                    <label for="descripcion_web2">Descripción del sitio</label>
                    <textarea
                        class="form-control"
                        name="descripcion_web2"
                        id="descripcion_web2"
                        required
                    ><?php echo h($descripcion_web); ?></textarea>
                    <span class="ayuda">
                        Explicá brevemente qué ofrece el sitio. Ejemplo: noticias locales, actualidad, radio, deportes y servicios.
                    </span>
                </div>

                <div class="form-group mb-0">
                    <label for="palabras_clave2">Palabras clave</label>
                    <textarea
                        class="form-control"
                        name="palabras_clave2"
                        id="palabras_clave2"
                    ><?php echo h($palabras_clave); ?></textarea>
                    <span class="ayuda">
                        Separalas con coma. Ejemplo: noticias, radio, actualidad, deportes, política, tu ciudad.
                    </span>
                </div>

                <div class="wizard-footer mt-4">
                    <div class="d-flex justify-content-between align-items-center flex-wrap">
                        <a href="index.php" class="btn-light2">Salir del wizard</a>

                        <div>
                            <button type="submit" class="btn btn-wizard">Guardar paso 1</button>
                            <a href="wizard.2.php" class="btn btn-wizard ml-2">Ir al paso 2</a>
                        </div>
                    </div>
                </div>

            </form>

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

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>