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

$status = '';
$status_tipo = '';
$tour = isset($_GET['tour']) ? (int)$_GET['tour'] : 1;

if ($rutadom == NULL) {
    $rutadom = "/home/content/90/7626090/html";
}

$a = date('Y');
$m = date('m');
$carpeta = $m . '-' . $a;
$directorio = $rutadom . '/' . $carpeta;

if (!file_exists($directorio)) {
    @mkdir($directorio, 0777);
}

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

    $upload_tipo = isset($_POST['upload_tipo']) ? (int)$_POST['upload_tipo'] : 0;

    if (!isset($_FILES['archivo']) || !is_uploaded_file($_FILES['archivo']['tmp_name'])) {
        $status = 'No se seleccionó ningún archivo.';
        $status_tipo = 'danger';
    } else {

        $tamano  = (int)$_FILES['archivo']['size'];
        $archivo = $_FILES['archivo']['name'];
        $tempm   = $_FILES['archivo']['tmp_name'];
        $prefijo = md5(uniqid(rand(), true));

        if ($tamano <= 0) {
            $status = 'El archivo no es válido.';
            $status_tipo = 'danger';
        } elseif ($tamano >= 1000000) {
            $status = 'El tamaño no puede exceder 1MB.';
            $status_tipo = 'danger';
        } else {

            $mime = @mime_content_type($tempm);

            $ext = strtolower(pathinfo($archivo, PATHINFO_EXTENSION));
            if ($ext == 'jpeg') {
                $ext = 'jpg';
            }
            if ($ext == 'jpe') {
                $ext = 'jpg';
            }

            $ext_permitidas = array('png', 'jpg', 'gif');
            $mime_permitidos = array(
                'image/png',
                'image/jpeg',
                'image/gif'
            );

            if (!in_array($ext, $ext_permitidas) || !in_array($mime, $mime_permitidos)) {
                $status = 'Formato no válido. Solo se permite PNG, JPG o GIF.';
                $status_tipo = 'danger';
            } else {

                $destino = $rutadom . '/' . $carpeta . '/' . $prefijo . '.' . $ext;
                $url_final = $dom . '/' . $carpeta . '/' . $prefijo . '.' . $ext;

                if (@move_uploaded_file($tempm, $destino) || @copy($tempm, $destino)) {

                    if ($upload_tipo === 1) {
                        $sSQL = "UPDATE configuracion SET logo_g = '" . $conn->real_escape_string($url_final) . "' LIMIT 1";
                        if ($conn->query($sSQL)) {
                            $status = 'Cabecera 1 actualizada correctamente.';
                            $status_tipo = 'success';
                            $logo_g = $url_final;
                        } else {
                            $status = 'La imagen se subió, pero no se pudo guardar Cabecera 1 en la base.';
                            $status_tipo = 'danger';
                        }
                    } elseif ($upload_tipo === 2) {
                        $sSQL = "UPDATE configuracion SET logo = '" . $conn->real_escape_string($url_final) . "' LIMIT 1";
                        if ($conn->query($sSQL)) {
                            $status = 'Cabecera 2 / logo actualizado correctamente.';
                            $status_tipo = 'success';
                            if (isset($logo_C)) {
                                $logo_C = $url_final;
                            }
                        } else {
                            $status = 'La imagen se subió, pero no se pudo guardar Cabecera 2 en la base.';
                            $status_tipo = 'danger';
                        }
                    } else {
                        $status = 'No se indicó qué imagen querías actualizar.';
                        $status_tipo = 'danger';
                    }

                    if ($domold != '') {
                        ?>
                        <iframe src="<?php echo $domold; ?>/traer.php?tipo=audio&ext_img=<?php echo urlencode($ext); ?>&carpetafoto=<?php echo urlencode($carpeta); ?>&foto=<?php echo urlencode($prefijo); ?>&dom=<?php echo urlencode($dom); ?>" style="display:none;"></iframe>
                        <?php
                    }

                } else {
                    $status = 'Error al subir el archivo.';
                    $status_tipo = 'danger';
                }
            }
        }
    }
}

$usa_estilo_especial = ($estiloweb == 9 || $estiloweb == 85 || $estiloweb == 86);

// fallback visual por si en algunos sitios se usa $logo y en otros $logo_C
$logo_cabecera_2 = '';
if (!empty($logo_C)) {
    $logo_cabecera_2 = $logo_C;
} elseif (!empty($logo)) {
    $logo_cabecera_2 = $logo;
}
?>
<!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 3</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: 1100px;
            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;
        }

        .bloque-ayuda{
            background: #fffdf6;
            border: 1px solid #f1e0a3;
            padding: 18px;
            margin-bottom: 28px;
            line-height: 1.7;
        }

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

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

        .card-logo-wrap{
            width: 100%;
            padding: 0 10px;
            margin-bottom: 20px;
        }

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

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

        .card-logo-header h4{
            margin: 0 0 8px 0;
            font-size: 22px;
            font-weight: bold;
            color: #1e2c39;
        }

        .card-logo-header p{
            margin: 0;
            color: #586879;
            line-height: 1.7;
        }

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

        .preview-box{
            min-height: 240px;
            border: 1px dashed #cad4df;
            background: linear-gradient(180deg, #fcfdff 0%, #f5f8fc 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
            text-align: center;
            overflow: hidden;
        }

        .preview-box img{
            max-width: 100%;
            max-height: 260px;
            height: auto;
            display: inline-block;
        }

        .sin-imagen{
            color: #7c8b99;
            font-size: 15px;
            line-height: 1.6;
        }

        .detalle-actual{
            margin-top: 15px;
            font-size: 14px;
            color: #5f6f7f;
            word-break: break-word;
        }

        .detalle-actual strong{
            color: #22303c;
        }

        .recomendacion{
            background: #f8fbff;
            border: 1px solid #dfeaf7;
            padding: 15px;
            margin-bottom: 18px;
            line-height: 1.7;
            color: #2e3c49;
        }

        .campo-upload{
            border-top: 1px solid #edf2f7;
            margin-top: 18px;
            padding-top: 18px;
        }

        .campo-upload label{
            font-weight: bold;
            color: #22303c;
        }

        .custom-file-label{
            border-radius: 0 !important;
        }

        .btn-wizard,
        .btn-primary{
            background: #0066FF;
            border-color: #0066FF;
            color: #fff !important;
            font-weight: bold;
        }

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

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

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

        .nota-final{
            background: #f5f9ff;
            border-left: 4px solid #0066FF;
            padding: 16px;
            margin-top: 10px;
            line-height: 1.7;
        }

        @media (min-width: 768px){
            .card-logo-wrap{
                width: 50%;
            }
        }

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

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

            .bloque-ayuda h3,
            .seccion-titulo{
                font-size: 21px;
            }
        }
    </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 vas a cargar las imágenes principales de cabecera del sitio.
                Acá definís la imagen de fondo para algunos estilos y también el logo principal del portal.
            </p>
        </div>

        <div class="wizard-progress">
            <strong>Paso 3 de 8:</strong> Cabeceras y logo principal del portal
        </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 te ayuda a cargar correctamente las imágenes más importantes del sitio.
                Cada una cumple una función distinta según el estilo visual que uses en tu portal.
            </div>

            <div class="bloque-ayuda">
                <h3>Cómo funciona cada imagen</h3>

                <p>
                    <strong>Cabecera 1</strong> es para el estilo vintage y también puede salir como
                    fondo de cabecera en los estilos magazine y minimal.
                </p>

                <p>
                    <strong>Cabecera 2</strong> es el logo principal del sitio. Recomendamos cargarlo
                    siempre, incluso si usás estilo vintage.
                </p>

                <p>
                    Lo ideal es que este logo sea un <strong>PNG sin fondo y sin bordes</strong>,
                    bien recortado, o sea que el archivo termine lo más pegado posible donde finaliza el logo.
                </p>

                <p>
                    Esta imagen puede mostrarse <strong>al medio o al costado</strong>.
                    Para que salga al medio, debés <strong>desactivar la temperatura en la cabecera</strong>
                    desde el panel principal.
                </p>
            </div>

            <div class="seccion-titulo">Imágenes actuales y carga nueva</div>

            <div class="grid-logos">

                <div class="card-logo-wrap">
                    <div class="card-logo">
                        <div class="card-logo-header">
                            <h4>Cabecera 1</h4>
                            <p>
                                Imagen usada para estilo vintage y como fondo de cabecera en algunos diseños
                                como magazine y minimal.
                            </p>
                        </div>

                        <div class="card-logo-body">
                            <div class="recomendacion">
                                Recomendación: usar una imagen horizontal prolija, liviana y bien optimizada.
                                Conviene que represente la identidad general del portal.
                            </div>

                            <div class="preview-box">
                                <?php if (!empty($logo_g)) { ?>
                                    <img src="<?php echo h($logo_g); ?>" alt="Cabecera 1 actual">
                                <?php } else { ?>
                                    <div class="sin-imagen">
                                        Aún no hay una Cabecera 1 cargada.
                                    </div>
                                <?php } ?>
                            </div>

                            <div class="detalle-actual">
                                <strong>Valor actual:</strong><br>
                                <?php echo !empty($logo_g) ? h($logo_g) : 'No definido todavía'; ?>
                            </div>

                            <div class="campo-upload">
                                <form action="wizard.3.php?tour=1" method="post" enctype="multipart/form-data">
                                    <div class="form-group">
                                        <label>Seleccionar nueva imagen para Cabecera 1</label>
                                        <input name="archivo" type="file" class="form-control-file" accept=".png,.jpg,.jpeg,.gif" required>
                                    </div>

                                    <input name="action" type="hidden" value="upload">
                                    <input name="upload_tipo" type="hidden" value="1">

                                    <button type="submit" class="btn btn-primary">Subir Cabecera 1</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card-logo-wrap">
                    <div class="card-logo">
                        <div class="card-logo-header">
                            <h4>Cabecera 2 / Logo principal</h4>
                            <p>
                                Logo principal del sitio. Recomendado en todos los estilos, incluso si usás vintage.
                            </p>
                        </div>

                        <div class="card-logo-body">
                            <div class="recomendacion">
                                Recomendación fuerte: subir un PNG sin fondo, sin bordes sobrantes
                                y con el recorte bien ajustado al logo.
                            </div>

                            <div class="preview-box">
                                <?php if (!empty($logo_cabecera_2)) { ?>
                                    <img src="<?php echo h($logo_cabecera_2); ?>" alt="Cabecera 2 actual">
                                <?php } else { ?>
                                    <div class="sin-imagen">
                                        Aún no hay una Cabecera 2 / logo principal cargado.
                                    </div>
                                <?php } ?>
                            </div>

                            <div class="detalle-actual">
                                <strong>Valor actual:</strong><br>
                                <?php echo !empty($logo_cabecera_2) ? h($logo_cabecera_2) : 'No definido todavía'; ?>
                            </div>

                            <div class="campo-upload">
                                <form action="wizard.3.php?tour=1" method="post" enctype="multipart/form-data">
                                    <div class="form-group">
                                        <label>Seleccionar nueva imagen para Cabecera 2 / logo</label>
                                        <input name="archivo" type="file" class="form-control-file" accept=".png,.jpg,.jpeg,.gif" required>
                                    </div>

                                    <input name="action" type="hidden" value="upload">
                                    <input name="upload_tipo" type="hidden" value="2">

                                    <button type="submit" class="btn btn-primary">Subir Cabecera 2</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

            <div class="nota-final">
                Podés cargar ambas imágenes ahora y luego seguir con la personalización del sitio.
                Más adelante vas a poder ajustar colores, redes sociales y estructura del portal.
            </div>

        </div>

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

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