<?php
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])) : '';
}

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

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

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

    $facebook        = limpiar_post($conn, 'facebook');
    $twitter         = limpiar_post($conn, 'twitter');
    $twitter_btn     = limpiar_post($conn, 'twitter_btn');
    $whatsapp        = limpiar_post($conn, 'whatsapp');
    $social_aim      = limpiar_post($conn, 'social_aim');
    $social_ask      = limpiar_post($conn, 'social_ask');
    $social_blogger  = limpiar_post($conn, 'social_blogger');
    $social_flickr   = limpiar_post($conn, 'social_flickr');
    $social_google   = limpiar_post($conn, 'social_google');
    $social_myspace  = limpiar_post($conn, 'social_myspace');
    $social_tumblr   = limpiar_post($conn, 'social_tumblr');
    $social_vimeo    = limpiar_post($conn, 'social_vimeo');
    $social_yahoo    = limpiar_post($conn, 'social_yahoo');
    $social_youtube  = limpiar_post($conn, 'social_youtube');

    $ok = true;

    $updates = array(
        "twitter"        => $twitter,
        "twitter_btn"    => $twitter_btn,
        "social_aim"     => $social_aim,
        "social_ask"     => $social_ask,
        "social_blogger" => $social_blogger,
        "social_flickr"  => $social_flickr,
        "social_google"  => $social_google,
        "social_myspace" => $social_myspace,
        "social_tumblr"  => $social_tumblr,
        "social_vimeo"   => $social_vimeo,
        "social_yahoo"   => $social_yahoo,
        "social_youtube" => $social_youtube,
        "facebook"       => $facebook,
        "whatsapp"       => $whatsapp
    );

    foreach ($updates as $campo => $valor) {
        $campo_sql = $conn->real_escape_string($campo);
        $valor_sql = $conn->real_escape_string($valor);
        if (!$conn->query("UPDATE `$basedatos`.`configuracion` SET `$campo_sql` = '$valor_sql' LIMIT 1")) {
            $ok = false;
        }
    }

    if ($ok) {
        $status = 'Las redes sociales y los enlaces de contacto se guardaron correctamente.';
        $status_tipo = 'success';
    } else {
        $status = 'Ocurrió un problema al guardar algunos datos. Revisá la conexión o la tabla configuracion.';
        $status_tipo = 'danger';
    }
}
?>
<!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 5</title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script defer src="https://use.fontawesome.com/releases/v5.8.1/js/all.js" crossorigin="anonymous"></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: 1150px;
            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;
        }

        .subtitulo{
            font-size: 18px;
            font-weight: bold;
            margin: 28px 0 16px 0;
            color: #1d2b39;
        }

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

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

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

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

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

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

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

        .icono-red{
            font-size: 26px;
            color: #0066FF;
            margin-bottom: 12px;
        }

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

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

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

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

        .valor-actual{
            margin-top: 12px;
            background: #f7f9fc;
            border: 1px solid #e4ebf2;
            padding: 10px 12px;
            font-size: 14px;
            color: #334455;
            word-break: break-word;
        }

        .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-final{
            margin-top: 25px;
            background: #f5f9ff;
            border-left: 4px solid #0066FF;
            padding: 16px;
            line-height: 1.7;
        }

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

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

        @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 las redes sociales y los enlaces de contacto.
                Podés completar solo las que uses. Las demás pueden quedar vacías.
            </p>
        </div>

        <div class="wizard-progress">
            <strong>Paso 5 de 8:</strong> Redes sociales y WhatsApp
        </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">
                Este paso sirve para conectar el portal con tus canales externos. Lo más importante suele ser
                Facebook, X/Twitter, Instagram, YouTube y WhatsApp. Las demás redes son opcionales.
            </div>

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

                <div class="seccion-titulo">Redes principales</div>

                <div class="grid-redes">

                    <div class="item-red">
                        <div class="card-red">
                            <div class="card-red-header">
                                <h4>Facebook</h4>
                                <p>Página o perfil principal del sitio.</p>
                            </div>
                            <div class="card-red-body">
                                <div class="icono-red"><i class="fab fa-facebook"></i></div>
                                <div class="form-group mb-0">
                                    <label for="facebook">Enlace de Facebook</label>
                                    <input class="form-control" type="text" name="facebook" id="facebook" value="<?php echo h($facebook); ?>">
                                    <span class="ayuda">Ejemplo: https://www.facebook.com/tupagina</span>
                                    <div class="valor-actual">Actual: <?php echo $facebook != '' ? h($facebook) : 'No definido todavía'; ?></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="item-red">
                        <div class="card-red">
                            <div class="card-red-header">
                                <h4>X / Twitter</h4>
                                <p>Usuario, enlace o código embebido que ya uses en tu sistema.</p>
                            </div>
                            <div class="card-red-body">
                                <div class="icono-red"><i class="fab fa-twitter"></i></div>

                                <div class="form-group">
                                    <label for="twitter">Twitter / X principal</label>
                                    <textarea class="form-control" name="twitter" id="twitter"><?php echo h($twitter); ?></textarea>
                                    <span class="ayuda">Podés poner el usuario, la URL o el contenido que ya manejabas en este campo.</span>
                                </div>

                                <div class="form-group mb-0">
                                    <label for="twitter_btn">Texto o enlace extra del botón</label>
                                    <input class="form-control" type="text" name="twitter_btn" id="twitter_btn" value="<?php echo h($twitter_btn); ?>">
                                    <div class="valor-actual">Actual principal: <?php echo $twitter != '' ? h($twitter) : 'No definido'; ?></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="item-red">
                        <div class="card-red">
                            <div class="card-red-header">
                                <h4>Instagram</h4>
                                <p>En tu sistema actual se guarda en el campo <strong>social_aim</strong>.</p>
                            </div>
                            <div class="card-red-body">
                                <div class="icono-red"><i class="fab fa-instagram"></i></div>
                                <div class="form-group mb-0">
                                    <label for="social_aim">Enlace de Instagram</label>
                                    <input class="form-control" type="text" name="social_aim" id="social_aim" value="<?php echo h($social_aim); ?>">
                                    <span class="ayuda">Ejemplo: https://www.instagram.com/tuusuario</span>
                                    <div class="valor-actual">Actual: <?php echo $social_aim != '' ? h($social_aim) : 'No definido todavía'; ?></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="item-red">
                        <div class="card-red">
                            <div class="card-red-header">
                                <h4>YouTube</h4>
                                <p>Canal o enlace principal de videos.</p>
                            </div>
                            <div class="card-red-body">
                                <div class="icono-red"><i class="fab fa-youtube"></i></div>
                                <div class="form-group mb-0">
                                    <label for="social_youtube">Enlace de YouTube</label>
                                    <input class="form-control" type="text" name="social_youtube" id="social_youtube" value="<?php echo h($social_youtube); ?>">
                                    <span class="ayuda">Ejemplo: https://www.youtube.com/@tucanal</span>
                                    <div class="valor-actual">Actual: <?php echo $social_youtube != '' ? h($social_youtube) : 'No definido todavía'; ?></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="item-red">
                        <div class="card-red">
                            <div class="card-red-header">
                                <h4>WhatsApp</h4>
                                <p>Contacto directo con la audiencia o los lectores.</p>
                            </div>
                            <div class="card-red-body">
                                <div class="icono-red"><i class="fab fa-whatsapp"></i></div>
                                <div class="form-group mb-0">
                                    <label for="whatsapp">Número o enlace de WhatsApp</label>
                                    <input class="form-control" type="text" name="whatsapp" id="whatsapp" value="<?php echo h($whatsapp); ?>">
                                    <span class="ayuda">Podés poner el número, por ejemplo 5493471640000, o un enlace tipo wa.me.</span>
                                    <div class="valor-actual">Actual: <?php echo $whatsapp != '' ? h($whatsapp) : 'No definido todavía'; ?></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="item-red">
                        <div class="card-red">
                            <div class="card-red-header">
                                <h4>Vimeo</h4>
                                <p>Video alternativo si lo usás.</p>
                            </div>
                            <div class="card-red-body">
                                <div class="icono-red"><i class="fab fa-vimeo"></i></div>
                                <div class="form-group mb-0">
                                    <label for="social_vimeo">Enlace de Vimeo</label>
                                    <input class="form-control" type="text" name="social_vimeo" id="social_vimeo" value="<?php echo h($social_vimeo); ?>">
                                    <div class="valor-actual">Actual: <?php echo $social_vimeo != '' ? h($social_vimeo) : 'No definido todavía'; ?></div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

                <div class="subtitulo">Redes y servicios opcionales</div>

                <div class="grid-redes">

                    <div class="item-red">
                        <div class="card-red">
                            <div class="card-red-header">
                                <h4>Blogger</h4>
                                <p>Blog externo si lo usás.</p>
                            </div>
                            <div class="card-red-body">
                                <div class="form-group mb-0">
                                    <label for="social_blogger">Enlace de Blogger</label>
                                    <input class="form-control" type="text" name="social_blogger" id="social_blogger" value="<?php echo h($social_blogger); ?>">
                                    <div class="valor-actual">Actual: <?php echo $social_blogger != '' ? h($social_blogger) : 'No definido todavía'; ?></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="item-red">
                        <div class="card-red">
                            <div class="card-red-header">
                                <h4>Flickr</h4>
                                <p>Galería de fotos externa.</p>
                            </div>
                            <div class="card-red-body">
                                <div class="form-group mb-0">
                                    <label for="social_flickr">Enlace de Flickr</label>
                                    <input class="form-control" type="text" name="social_flickr" id="social_flickr" value="<?php echo h($social_flickr); ?>">
                                    <div class="valor-actual">Actual: <?php echo $social_flickr != '' ? h($social_flickr) : 'No definido todavía'; ?></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="item-red">
                        <div class="card-red">
                            <div class="card-red-header">
                                <h4>Google Plus / Google</h4>
                                <p>Campo legado de tu sistema.</p>
                            </div>
                            <div class="card-red-body">
                                <div class="form-group mb-0">
                                    <label for="social_google">Enlace</label>
                                    <input class="form-control" type="text" name="social_google" id="social_google" value="<?php echo h($social_google); ?>">
                                    <div class="valor-actual">Actual: <?php echo $social_google != '' ? h($social_google) : 'No definido todavía'; ?></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="item-red">
                        <div class="card-red">
                            <div class="card-red-header">
                                <h4>MySpace</h4>
                                <p>Campo opcional legado.</p>
                            </div>
                            <div class="card-red-body">
                                <div class="form-group mb-0">
                                    <label for="social_myspace">Enlace</label>
                                    <input class="form-control" type="text" name="social_myspace" id="social_myspace" value="<?php echo h($social_myspace); ?>">
                                    <div class="valor-actual">Actual: <?php echo $social_myspace != '' ? h($social_myspace) : 'No definido todavía'; ?></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="item-red">
                        <div class="card-red">
                            <div class="card-red-header">
                                <h4>Tumblr</h4>
                                <p>Campo opcional legado.</p>
                            </div>
                            <div class="card-red-body">
                                <div class="form-group mb-0">
                                    <label for="social_tumblr">Enlace</label>
                                    <input class="form-control" type="text" name="social_tumblr" id="social_tumblr" value="<?php echo h($social_tumblr); ?>">
                                    <div class="valor-actual">Actual: <?php echo $social_tumblr != '' ? h($social_tumblr) : 'No definido todavía'; ?></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="item-red">
                        <div class="card-red">
                            <div class="card-red-header">
                                <h4>Yahoo</h4>
                                <p>Campo opcional legado.</p>
                            </div>
                            <div class="card-red-body">
                                <div class="form-group mb-0">
                                    <label for="social_yahoo">Enlace</label>
                                    <input class="form-control" type="text" name="social_yahoo" id="social_yahoo" value="<?php echo h($social_yahoo); ?>">
                                    <div class="valor-actual">Actual: <?php echo $social_yahoo != '' ? h($social_yahoo) : 'No definido todavía'; ?></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="item-red">
                        <div class="card-red">
                            <div class="card-red-header">
                                <h4>Ask</h4>
                                <p>Campo opcional legado del sistema.</p>
                            </div>
                            <div class="card-red-body">
                                <div class="form-group mb-0">
                                    <label for="social_ask">Enlace</label>
                                    <input class="form-control" type="text" name="social_ask" id="social_ask" value="<?php echo h($social_ask); ?>">
                                    <div class="valor-actual">Actual: <?php echo $social_ask != '' ? h($social_ask) : 'No definido todavía'; ?></div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

                <div class="nota-final">
                    Completá solo lo que realmente uses. Más adelante siempre vas a poder volver a esta sección
                    y ajustar o cambiar cualquiera de estos enlaces.
                </div>

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

        </div>

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

                <div>
                    <a href="wizard.6.php" class="btn btn-wizard ml-2">Ir al paso 6</a>
                </div>
            </div>
        </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>