<?php
include 'sesion.php';
include 'concha.php';
include '../concha_extra.php';

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

if (!isset($conn) || !($conn instanceof mysqli)) {
    die('Error: la conexión $conn no está disponible en concha.php');
}

$conn->set_charset('utf8');

function e($valor){
    $valor = (string)$valor;
    $valor = html_entity_decode($valor, ENT_QUOTES | ENT_HTML5, 'UTF-8');
    return htmlspecialchars($valor, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8');
}

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

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

$modulos_disponibles = array(
    'notas' => 'Notas destacadas',
    'clima' => 'Clima',
    'radio' => 'Radio / reproductor',
    'movil' => 'Versión móvil',
    'mensajes' => 'Mensajes',
    'cotizaciones' => 'Cotizaciones',
    'fecha' => 'Fecha',
    'encuesta' => 'Encuesta',
    'twitter' => 'Twitter / X',
    'facebook' => 'Facebook',
    'instagram' => 'Instagram',
    'noticias' => 'Noticias',
    'fotos' => 'Fotos',
    'agenda' => 'Agenda',
    'modulo' => 'Módulo personalizado',
    'publicidad_gif' => 'Publicidad GIF',
    'reloj' => 'Reloj',
    'relojdigital' => 'Reloj digital',
    'masleidasano' => 'Más leídas del año',
    'masleidasmes' => 'Más leídas del mes',
    'masleidasiempre' => 'Más leídas históricas',
    'diario' => 'Diario',
    'buscador_telefono' => 'Buscador telefónico',
    'horoscopo' => 'Horóscopo',
    'chat_noticias' => 'Chat en noticias'
);

$modulos_label = array(
    'reloj' => 'Reloj',
    'chat_noticias' => 'Chat noticias',
    'buscador_telefono' => 'Buscador teléfono',
    'relojdigital' => 'Reloj digital',
    'clima' => 'Clima',
    'fecha' => 'Fecha',
    'publicidad_gif' => 'Publicidad GIF',
    'movil' => 'Versión móvil',
    'radio' => 'Radio',
    'mensajes' => 'Mensajes',
    'twitter' => 'Twitter / X',
    'facebook' => 'Facebook',
    'instagram' => 'Instagram',
    'cotizaciones' => 'Cotizaciones',
    'noticias' => 'Noticias',
    'fotos' => 'Fotos',
    'agenda' => 'Agenda',
    'publicidad_jpg' => 'Publicidad JPG',
    'publicidad_flash' => 'Publicidad Flash',
    'encuesta' => 'Encuesta',
    'modulo' => 'Módulo',
    'masleidasano' => 'Más leídas del año',
    'masleidasmes' => 'Más leídas del mes',
    'masleidasiempre' => 'Más leídas históricas',
    'adsense248x496' => 'Adsense 248x496',
    'adsense248x248' => 'Adsense 248x248',
    'adsense248x124' => 'Adsense 248x124',
    'diario' => 'Diario',
    'publicidad_slide' => 'Publicidad slide',
    'horoscopo' => 'Horóscopo',
    'loteria' => 'Lotería',
    'tabla_futbol' => 'Tabla fútbol',
    'notas' => 'Notas destacadas'
);

if ($_SERVER['REQUEST_METHOD'] === 'POST') {

    if (isset($_POST['accion']) && $_POST['accion'] === 'guardar_modulo') {
        $lugar = isset($_POST['lugar']) ? trim((string)$_POST['lugar']) : '';
        $bloque = isset($_POST['bloque']) ? trim((string)$_POST['bloque']) : '';

        if ($lugar === '') {
            $status = 'No se indicó el lugar de la columna.';
            $status_tipo = 'danger';
        } elseif ($bloque === '' || !isset($modulos_disponibles[$bloque])) {
            $status = 'Debes elegir un módulo válido.';
            $status_tipo = 'danger';
        } else {
            $lugar_sql = $conn->real_escape_string($lugar);
            $bloque_sql = $conn->real_escape_string($bloque);

            $res_check = $conn->query("SELECT ID FROM columna WHERE lugar = '$lugar_sql' LIMIT 1");

            if ($res_check instanceof mysqli_result && $res_check->num_rows > 0) {
                $row_check = $res_check->fetch_assoc();
                $id_col = $row_check['ID'];
                $id_sql = $conn->real_escape_string($id_col);

                $ok = $conn->query("UPDATE columna SET bloque = '$bloque_sql' WHERE ID = '$id_sql' LIMIT 1");
            } else {
                $ok = $conn->query("INSERT INTO columna (lugar, bloque) VALUES ('$lugar_sql', '$bloque_sql')");
            }

            if ($res_check instanceof mysqli_result) {
                $res_check->free();
            }

            if ($ok) {
                $status = 'El módulo de la columna se guardó correctamente.';
                $status_tipo = 'success';
            } else {
                $status = 'No se pudo guardar el módulo en la columna.';
                $status_tipo = 'danger';
            }
        }
    }

    if (isset($_POST['accion']) && $_POST['accion'] === 'quitar_modulo') {
        $lugar = isset($_POST['lugar']) ? trim((string)$_POST['lugar']) : '';

        if ($lugar === '') {
            $status = 'No se indicó el lugar del módulo a quitar.';
            $status_tipo = 'danger';
        } else {
            $lugar_sql = $conn->real_escape_string($lugar);
            $res_check = $conn->query("SELECT ID FROM columna WHERE lugar = '$lugar_sql' LIMIT 1");

            if ($res_check instanceof mysqli_result && $res_check->num_rows > 0) {
                $row_check = $res_check->fetch_assoc();
                $id_col = $conn->real_escape_string($row_check['ID']);
                $ok = $conn->query("UPDATE columna SET bloque = NULL WHERE ID = '$id_col' LIMIT 1");
            } else {
                $ok = false;
            }

            if ($res_check instanceof mysqli_result) {
                $res_check->free();
            }

            if ($ok) {
                $status = 'El módulo se quitó correctamente.';
                $status_tipo = 'success';
            } else {
                $status = 'No se pudo quitar el módulo.';
                $status_tipo = 'danger';
            }
        }
    }
}

$columnas = array();
$res_col = $conn->query("SELECT * FROM columna ORDER BY CAST(lugar AS UNSIGNED), lugar");

if ($res_col instanceof mysqli_result) {
    while ($row_col = $res_col->fetch_assoc()) {
        $columnas[] = $row_col;
    }
    $res_col->free();
}
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <meta name="description" content="Wizard inicial del portal">
    <meta name="author" content="<?php echo e($nombresitio); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title><?php echo e($nombresitio); ?> - Wizard Paso 7</title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

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

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

        .card-bloque{
            border: 1px solid #e1e8ef;
            background: #fff;
            margin-bottom: 25px;
        }

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

        .card-bloque-header h3{
            margin: 0;
            font-size: 22px;
            font-weight: bold;
            color: #1d2b39;
        }

        .card-bloque-body{
            padding: 20px;
        }

        .modulo-item{
            border: 1px solid #e5ebf2;
            background: #fff;
            margin-bottom: 18px;
        }

        .modulo-head{
            padding: 16px;
            background: #fbfdff;
            border-bottom: 1px solid #edf2f7;
        }

        .modulo-head strong{
            font-size: 18px;
            color: #1d2b39;
        }

        .modulo-meta{
            font-size: 14px;
            color: #5f7080;
            margin-top: 6px;
        }

        .modulo-body{
            padding: 16px;
        }

        .estado-vacio{
            padding: 12px;
            background: #fffdf5;
            border: 1px solid #efe2a5;
            color: #6b5d19;
            margin-bottom: 14px;
        }

        .estado-ok{
            padding: 12px;
            background: #f5fbff;
            border: 1px solid #d9ebf8;
            color: #2d4b63;
            margin-bottom: 14px;
        }

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

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

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

        .preview-columna{
            border: 1px dashed #cfd8e2;
            background: #f9fbfd;
            padding: 15px;
            min-height: 100%;
        }

        .preview-slot{
            background: #fff;
            border: 1px solid #e4ebf2;
            padding: 10px 12px;
            margin-bottom: 10px;
            font-size: 14px;
        }

        .preview-slot strong{
            color: #1d2b39;
        }

        .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;
            }
        }
    </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 configurás la columna derecha del sitio. Podés elegir qué bloques querés mostrar
                en cada lugar de la columna y quitar los que no necesites.
            </p>
        </div>

        <div class="wizard-progress">
            <strong>Paso 7 de 8:</strong> Bloques de la columna derecha
        </div>

        <div class="wizard-body">

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

            <div class="bloque-info">
                Este paso define la estructura lateral del portal. Cada lugar de la tabla <strong>columna</strong>
                representa una posición dentro de la barra derecha. Podés elegir un módulo distinto para cada una.
            </div>

            <div class="row">
                <div class="col-12 col-lg-8">

                    <div class="card-bloque">
                        <div class="card-bloque-header">
                            <h3>Configuración actual de la columna</h3>
                        </div>
                        <div class="card-bloque-body">

                            <?php if (count($columnas) > 0) { ?>
                                <?php foreach ($columnas as $item) { ?>
                                    <?php
                                    $id_col = isset($item['ID']) ? $item['ID'] : '';
                                    $lugar = isset($item['lugar']) ? $item['lugar'] : '';
                                    $bloque = isset($item['bloque']) ? $item['bloque'] : '';
                                    $nombre_bloque = $bloque !== '' && isset($modulos_label[$bloque]) ? $modulos_label[$bloque] : $bloque;
                                    ?>
                                    <div class="modulo-item">
                                        <div class="modulo-head">
                                            <strong>Lugar <?php echo e($lugar); ?></strong>
                                            <div class="modulo-meta">
                                                ID: <?php echo e($id_col); ?>
                                                <?php if ($bloque !== '' && $bloque !== null) { ?>
                                                    | Bloque actual: <?php echo e($nombre_bloque); ?> (<?php echo e($bloque); ?>)
                                                <?php } else { ?>
                                                    | Sin módulo asignado
                                                <?php } ?>
                                            </div>
                                        </div>

                                        <div class="modulo-body">

                                            <?php if ($bloque === '' || $bloque === null) { ?>
                                                <div class="estado-vacio">
                                                    Este lugar todavía no tiene ningún módulo asignado.
                                                </div>
                                            <?php } else { ?>
                                                <div class="estado-ok">
                                                    Actualmente este lugar muestra el módulo <strong><?php echo e($nombre_bloque); ?></strong>.
                                                </div>
                                            <?php } ?>

                                            <form method="post" action="wizard.7.php?tour=1" class="mb-3">
                                                <input type="hidden" name="accion" value="guardar_modulo">
                                                <input type="hidden" name="lugar" value="<?php echo e($lugar); ?>">

                                                <div class="form-group">
                                                    <label for="bloque_<?php echo e($lugar); ?>">Elegir módulo para este lugar</label>
                                                    <select name="bloque" id="bloque_<?php echo e($lugar); ?>" class="form-control">
                                                        <option value="">Seleccionar módulo</option>
                                                        <?php foreach ($modulos_disponibles as $valor_mod => $label_mod) { ?>
                                                            <option value="<?php echo e($valor_mod); ?>" <?php echo ($bloque === $valor_mod ? 'selected' : ''); ?>>
                                                                <?php echo e($label_mod); ?>
                                                            </option>
                                                        <?php } ?>
                                                    </select>
                                                    <span class="ayuda">
                                                        Podés cambiar el módulo tantas veces como quieras. El contenido especial de algunos bloques
                                                        se ajusta luego desde sus pantallas específicas del sistema.
                                                    </span>
                                                </div>

                                                <button type="submit" class="btn btn-outline-primary">Guardar en este lugar</button>
                                            </form>

                                            <?php if ($bloque !== '' && $bloque !== null) { ?>
                                                <form method="post" action="wizard.7.php?tour=1" style="display:inline-block;">
                                                    <input type="hidden" name="accion" value="quitar_modulo">
                                                    <input type="hidden" name="lugar" value="<?php echo e($lugar); ?>">
                                                    <button type="submit" class="btn btn-outline-danger">Quitar módulo</button>
                                                </form>
                                            <?php } ?>

                                        </div>
                                    </div>
                                <?php } ?>
                            <?php } else { ?>
                                <div class="alert alert-secondary mb-0">
                                    No hay registros en la tabla <strong>columna</strong>. Primero necesitás que existan los lugares
                                    base de la columna para poder asignar módulos desde acá.
                                </div>
                            <?php } ?>

                        </div>
                    </div>

                </div>

                <div class="col-12 col-lg-4">
                    <div class="card-bloque">
                        <div class="card-bloque-header">
                            <h3>Vista rápida de la columna</h3>
                        </div>
                        <div class="card-bloque-body">
                            <div class="preview-columna">
                                <?php if (count($columnas) > 0) { ?>
                                    <?php foreach ($columnas as $item) { ?>
                                        <?php
                                        $lugar = isset($item['lugar']) ? $item['lugar'] : '';
                                        $bloque = isset($item['bloque']) ? $item['bloque'] : '';
                                        $nombre_bloque = $bloque !== '' && isset($modulos_label[$bloque]) ? $modulos_label[$bloque] : 'Vacío';
                                        ?>
                                        <div class="preview-slot">
                                            <strong>Lugar <?php echo e($lugar); ?></strong><br>
                                            <?php echo e($nombre_bloque); ?>
                                        </div>
                                    <?php } ?>
                                <?php } else { ?>
                                    <div class="preview-slot">
                                        No hay lugares configurados todavía.
                                    </div>
                                <?php } ?>
                            </div>

                            <div class="mt-3">
                                <div class="ayuda">
                                    Esta vista es solo orientativa. Sirve para entender rápidamente qué módulo quedó
                                    asignado en cada posición de la columna.
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card-bloque">
                        <div class="card-bloque-header">
                            <h3>Notas importantes</h3>
                        </div>
                        <div class="card-bloque-body">
                            <div class="ayuda" style="font-size:14px;">
                                Algunos bloques, como encuestas, publicidades o módulos personalizados, pueden necesitar
                                configuración extra después de asignarlos.
                                <br><br>
                                Este wizard deja resuelta la estructura base de la columna para que el sitio salga funcionando.
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

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

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

    </div>
</div>

</body>
</html>