<?php
session_start();
include('modelo.php'); // Asegúrate de incluir tu archivo de conexión
require_once 'config.php';

// Verificar si el usuario está logueado
if (!isset($_SESSION['usuario_correo'])) {
    die("Debes estar logueado para valorar.");
}

// Obtener el correo del usuario logueado desde la sesión
$correo_usuario = $_SESSION['usuario_correo'];

// Obtener el ID del usuario a partir del correo
$sql = "SELECT id FROM usuarios WHERE correo = ?";
$usuario = $conexion->obtenerConsultaPreparada($sql, [$correo_usuario]);

if (count($usuario) > 0) {
    // Si encontramos al usuario, obtener su ID
    $usuario_id = $usuario[0]->id;
} else {
    die("Usuario no encontrado."); 
}

// Verificar si el usuario tiene un espacio ya creado en la base de datos
$sql = "SELECT * FROM espacios_cliente WHERE usuario_id = ?";
$registro = $conexion->obtenerConsultaPreparada($sql, [$usuario_id]);

if (count($registro) > 0) {
    // Si el usuario ya tiene un espacio creado, actualizamos
    $id_espacio = $registro[0]->id; // Obtener el ID del espacio existente

    // Recoger los datos del formulario con validación de datos
    $logo = isset($_FILES['logo']['name']) ? $_FILES['logo']['name'] : null;
    $titulo_espacio = isset($_POST['titulo_espacio']) ? $_POST['titulo_espacio'] : null;
    $titulo_1 = isset($_POST['titulo_1']) ? $_POST['titulo_1'] : null;
    $imagen_1 = isset($_FILES['imagen_1']['name']) ? $_FILES['imagen_1']['name'] : null;
    $texto_1 = isset($_POST['texto_1']) ? $_POST['texto_1'] : null;
    $link_1 = isset($_POST['link_1']) ? $_POST['link_1'] : null;

    // Datos opcionales para el estilo 2
    $titulo_2 = isset($_POST['titulo_2']) ? $_POST['titulo_2'] : null;
    $imagen_2 = isset($_FILES['imagen_2']['name']) ? $_FILES['imagen_2']['name'] : null;
    $texto_2 = isset($_POST['texto_2']) ? $_POST['texto_2'] : null;
    $link_2 = isset($_POST['link_2']) ? $_POST['link_2'] : null;
    $estilo_seleccionado = isset($_POST['estilo_seleccionado']) ? $_POST['estilo_seleccionado'] : null;

    // Validar que los campos necesarios están presentes
    if ($titulo_espacio && $titulo_1 && $texto_1 && $link_1 && $estilo_seleccionado) {
        // Procesar y mover los archivos si son válidos
        if ($logo) {
            $logo_path = 'uploads/' . basename($logo);
            move_uploaded_file($_FILES['logo']['tmp_name'], $logo_path);
        }

        if ($imagen_1) {
            $imagen_1_path = 'uploads/' . basename($imagen_1);
            move_uploaded_file($_FILES['imagen_1']['tmp_name'], $imagen_1_path);
        }

        if ($estilo_seleccionado == 2 && $imagen_2) {
            $imagen_2_path = 'uploads/' . basename($imagen_2);
            move_uploaded_file($_FILES['imagen_2']['tmp_name'], $imagen_2_path);
        }

        // Actualizar el registro en la base de datos
        $update_sql = "UPDATE espacios_cliente SET 
                        logo = ?, 
                        titulo_espacio = ?, 
                        titulo_1 = ?, 
                        imagen_1 = ?, 
                        texto_1 = ?, 
                        link_1 = ?, 
                        titulo_2 = ?, 
                        imagen_2 = ?, 
                        texto_2 = ?, 
                        link_2 = ?, 
                        estilo_seleccionado = ? 
                        WHERE id = ?";

        $conexion->ejecutarConsultaPreparada($update_sql, [
            $logo_path, $titulo_espacio, $titulo_1, $imagen_1_path, $texto_1, $link_1,
            $titulo_2, $imagen_2_path, $texto_2, $link_2, $estilo_seleccionado, $id_espacio
        ]);

        echo "Espacio actualizado correctamente.";
    } else {
        echo "Faltan algunos datos importantes.";
    }
} else {
    // Si el usuario no tiene un espacio creado, realizamos el insert
    $logo = isset($_FILES['logo']['name']) ? $_FILES['logo']['name'] : null;
    $titulo_espacio = isset($_POST['titulo_espacio']) ? $_POST['titulo_espacio'] : null;
    $titulo_1 = isset($_POST['titulo_1']) ? $_POST['titulo_1'] : null;
    $imagen_1 = isset($_FILES['imagen_1']['name']) ? $_FILES['imagen_1']['name'] : null;
    $texto_1 = isset($_POST['texto_1']) ? $_POST['texto_1'] : null;
    $link_1 = isset($_POST['link_1']) ? $_POST['link_1'] : null;

    // Datos opcionales para el estilo 2
    $titulo_2 = isset($_POST['titulo_2']) ? $_POST['titulo_2'] : null;
    $imagen_2 = isset($_FILES['imagen_2']['name']) ? $_FILES['imagen_2']['name'] : null;
    $texto_2 = isset($_POST['texto_2']) ? $_POST['texto_2'] : null;
    $link_2 = isset($_POST['link_2']) ? $_POST['link_2'] : null;
    $estilo_seleccionado = isset($_POST['estilo_seleccionado']) ? $_POST['estilo_seleccionado'] : null;

    // Validar que los campos necesarios están presentes
    if ($titulo_espacio && $titulo_1 && $texto_1 && $link_1 && $estilo_seleccionado) {
        // Procesar y mover los archivos si son válidos
        if ($logo) {
            $logo_path = 'uploads/' . basename($logo);
            move_uploaded_file($_FILES['logo']['tmp_name'], $logo_path);
        }

        if ($imagen_1) {
            $imagen_1_path = 'uploads/' . basename($imagen_1);
            move_uploaded_file($_FILES['imagen_1']['tmp_name'], $imagen_1_path);
        }

        if ($estilo_seleccionado == 2 && $imagen_2) {
            $imagen_2_path = 'uploads/' . basename($imagen_2);
            move_uploaded_file($_FILES['imagen_2']['tmp_name'], $imagen_2_path);
        }

        // Insertar los datos en la base de datos
        $insert_sql = "INSERT INTO espacios_cliente 
                        (usuario_id, logo, titulo_espacio, titulo_1, imagen_1, texto_1, link_1, titulo_2, imagen_2, texto_2, link_2, estilo_seleccionado) 
                        VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)";

        $conexion->ejecutarConsultaPreparada($insert_sql, [
            $usuario_id, $logo_path, $titulo_espacio, $titulo_1, $imagen_1_path, $texto_1, 
            $link_1, $titulo_2, $imagen_2_path, $texto_2, $link_2, $estilo_seleccionado
        ]);

        echo "Espacio creado correctamente.";
    } else {
        echo "Faltan algunos datos importantes.";
    }
}
?>

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Espacio Cliente</title>
    <link rel="stylesheet" href="./css/estilo-editar_espacios.css">
    <script>
        function mostrarFormulario() {
            const estilo = document.querySelector('input[name="estilo_seleccionado"]:checked').value;
            const formularioEstilo2 = document.getElementById('formularioEstilo2');
            formularioEstilo2.style.display = estilo == '2' ? 'block' : 'none';
        }
        function previsualizar() {
            const estilo = document.querySelector('input[name="estilo_seleccionado"]:checked').value;

            // Obtener datos del formulario
            const logo = document.querySelector('input[name="logo"]').files[0] ? URL.createObjectURL(document.querySelector('input[name="logo"]').files[0]) : '';
            const tituloEspacio = document.querySelector('input[name="titulo_espacio"]').value;
            const titulo1 = document.querySelector('input[name="titulo_1"]').value;
            const imagen1 = document.querySelector('input[name="imagen_1"]').files[0] ? URL.createObjectURL(document.querySelector('input[name="imagen_1"]').files[0]) : '';
            const texto1 = document.querySelector('textarea[name="texto_1"]').value;
            const link1 = document.querySelector('input[name="link_1"]').value;

            // Variables para el segundo estilo
            let titulo2 = '';
            let imagen2 = '';
            let texto2 = '';
            let link2 = '';

            if (estilo == '2') {
                titulo2 = document.querySelector('input[name="titulo_2"]').value;
                imagen2 = document.querySelector('input[name="imagen_2"]').files[0] ? URL.createObjectURL(document.querySelector('input[name="imagen_2"]').files[0]) : '';
                texto2 = document.querySelector('textarea[name="texto_2"]').value;
                link2 = document.querySelector('input[name="link_2"]').value;
            }

            // Mostrar previsualización
            const previsualizacion = document.getElementById('previsualizacion');
            previsualizacion.style.display = 'block';
            previsualizacion.innerHTML = `
                <div class="logo"><img src="${logo}" alt="Logo"></div>
                <div class="logo-texto">${tituloEspacio}</div>
                
                <div class="contenido">
                    <img src="${imagen1}" alt="Imagen 1">
                    <div>
                        <div class="titulo-imagen">${titulo1}</div>
                        <p>${texto1}</p>
                        <a href="${link1}" class="link-boton" target="_blank">Ver más</a>
                    </div>
                </div>

                ${estilo == '2' ? `
                    <div class="contenido">
                        <img src="${imagen2}" alt="Imagen 2">
                        <div>
                            <div class="titulo-imagen">${titulo2}</div>
                            <p>${texto2}</p>
                            <a href="${link2}" class="link-boton" target="_blank">Ver más</a>
                        </div>
                    </div>
                ` : ''}
            `;
        }
    </script>
</head>
<body>

<h1>Selecciona el Estilo del Espacio</h1>

<form method="POST" action="" enctype="multipart/form-data">
    <label>
        <input type="radio" name="estilo_seleccionado" value="1" onclick="mostrarFormulario()" checked>
        Estilo 1
    </label>
    <label>
        <input type="radio" name="estilo_seleccionado" value="2" onclick="mostrarFormulario()">
        Estilo 2
    </label>

    <h2>Formulario Estilo 1</h2>
    <label for="logo">Logo:</label>
    <input type="file" name="logo" required accept="image/*"><br>
    <label for="titulo_espacio">Título del Espacio:</label>
    <input type="text" name="titulo_espacio" required><br>
    <label for="titulo_1">Título 1:</label>
    <input type="text" name="titulo_1" required><br>
    <label for="imagen_1">Imagen 1:</label>
    <input type="file" name="imagen_1" required accept="image/*"><br>
    <label for="texto_1">Texto 1:</label>
    <textarea name="texto_1" required></textarea><br>
    <label for="link_1">Link 1:</label>
    <input type="text" name="link_1" required><br>

    <div id="formularioEstilo2" style="display:none;">
        <label for="titulo_2">Título 2:</label>
        <input type="text" name="titulo_2"><br>
        <label for="imagen_2">Imagen 2:</label>
        <input type="file" name="imagen_2" accept="image/*"><br>
        <label for="texto_2">Texto 2:</label>
        <textarea name="texto_2"></textarea><br>
        <label for="link_2">Link 2:</label>
        <input type="text" name="link_2"><br>
    </div>

    <button type="button" onclick="previsualizar()">Previsualizar</button>
    <input type="submit" value="Guardar">
</form>

<div id="previsualizacion" class="previsualizacion"></div>

</body>
</html>
