<?php
// Incluye los archivos necesarios: validar.php, imagenes.php y conexion.php
include 'validar.php';
include 'conexion.php';

// Validación: Verifica si el usuario ha iniciado sesión
if (!isset($_SESSION['Nombre'])) {
    // Si el usuario no ha iniciado sesión, redirige a la página de inicio de sesión
    header("Location: iniciar.php");
    exit(); // Finaliza la ejecución del script
}

// Obtener el ID del usuario de la sesión activa
$id = $_SESSION["id"];

// Consulta a la base de datos para obtener puntos y porcentaje del usuario
$sql2 = "SELECT * FROM usuario WHERE id = $id";
$resul2 = $conectado->query($sql2);

// Recorre los resultados de la consulta
while($row2 = $resul2->fetch_assoc()) {
    // Almacena los puntos del usuario en la variable $bb
    $bb = $row2["Nombre"]; 
    // Almacena el porcentaje total del usuario en la variable $totalpor

}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
    <link rel='stylesheet' href='https://cdn-uicons.flaticon.com/uicons-regular-rounded/css/uicons-regular-rounded.css'>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" type="text/css" href="Estilos/index.css">
    <link rel="stylesheet" href="Estilos/shop.css">
    <script src="https://unpkg.com/feather-icons"></script>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" 
    integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <script src="Javas/shop.js"></script>
    <script src="Javas/menu.js"></script>

    <style>

.chat-icon {
    position: fixed;
    bottom: 20px; /* Distancia desde la parte inferior */
    right: 20px; /* Distancia desde el lado derecho */
    background-color: #3056C4;
    color: #ffffff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: transform 0.3s ease;
}

.chat-icon:hover {
    transform: scale(1.1); /* Efecto de escala al pasar el mouse */
}

    </style>
</head>
<body>
<?php include ("menu.php") ?>
    
      <section class="contenedor">
        <!-- Contenedor de elementos -->
        <div class="contenedor-items">
            <div id="tarjeta1" class="item">
                <img src="img/4080.jpg" alt="" class="img-item">
                <span class="titulo-item">RTX 4080</span>
                <span class="descripcion " >Monitor 144hrz</span>
                <span class="precio-item">$420</span>
                <i id="tarjet" onclick="agregarAlCarritoClicked(event)" class="product__icon fas fa-cart-plus"  style="color:rgb(9, 9, 116)"></i>
                <button class="boton-item">Compra</button>
            </div>
            <div id="tarjeta2" class="item">
                <img src="img/4090.jpg"  class="img-item">
                <span class="titulo-item">RTX 4090</span>
                <span class="descripcion " >Monitor 144hrz</span>
                <span class="precio-item">$500</span>
                <i id="tarjet" onclick="agregarAlCarritoClicked(event)" class="product__icon fas fa-cart-plus"  style="color:rgb(9, 9, 116)"></i>
                <button class="boton-item">Compra</button>
            </div>
            <div id="procesador1" class="item">
              
                <img src="img/ryzen7.jpg" alt="" class="img-item"> 
                 <span class="titulo-item">Ryzen 7</span>
                <span class="descripcion " >Monitor 144hrz</span>
                <span class="precio-item">$300</span>
                <i id="tarjet" onclick="agregarAlCarritoClicked(event)" class="product__icon fas fa-cart-plus"  style="color:rgb(9, 9, 116)"></i>
                <button class="boton-item">Compra</button>
            </div>
            <div id="procesador2" class="item">
               
                <img height="150" src="img/i9.png" alt="" class="img-item">
                 <span  class="titulo-item">I9 1346632k</span>
                <span class="descripcion " >Monitor 144hrz</span>
                <span class="precio-item">$600</span>
                <i id="tarjet" onclick="agregarAlCarritoClicked(event)" class="product__icon fas fa-cart-plus" style="color:rgb(9, 9, 116)"></i>
                <button class="boton-item">Compra</button>
            </div>
            <div id="laptop1" class="item">
                <img height="160" src="img/laptop.jpg"  alt="" class="img-item">
                <span class="titulo-item">Asus TUF F15</span>
                <span class="descripcion " >Monitor 144hrz</span>
                <span class="precio-item">$2.000</span>
                <i id="tarjet" onclick="agregarAlCarritoClicked(event)" class="product__icon fas fa-cart-plus" style="color:rgb(9, 9, 116)" ></i>
                <button class="boton-item">Compra</button>
            </div>
            <div id="laptop2" class="item">
                <img  src="img/acernitro.jpg" alt="" class="img-item">
                <span class="titulo-item">Acer NITRO 5</span>
                <span class="descripcion " >Monitor 144hrz</span>
                <span class="precio-item">$1.000</span>
                <i id="tarjet" onclick="agregarAlCarritoClicked(event)" class="product__icon fas fa-cart-plus" style="color:rgb(9, 9, 116)"></i>
                <button class="boton-item">Compra</button>
            </div>
            <div id="tarjeta4" class="item">
                <img src="img/3060.jpg" alt="" class="img-item">
                <span class="titulo-item">RTX 3060 TI</span>
                <span class="descripcion " >12gb de video</span>
                <span class="precio-item">$260</span>
                <i id="tarjet" onclick="agregarAlCarritoClicked(event)" class="product__icon fas fa-cart-plus" style="color:rgb(9, 9, 116)"></i>
                <button class="boton-item">Compra</button>
            </div>
            <div id="procesador3" class="item">
                
                <img src="img/ryzen9.jpg" alt="" class="img-item">
                <span class="titulo-item">RYZEN 9</span>
                <span class="descripcion " >Monitor 144hrz</span>
                <span class="precio-item">700</span>
                <i id="tarjet" onclick="agregarAlCarritoClicked(event)" class="product__icon fas fa-cart-plus" style="color:rgb(9, 9, 116)"></i>
                <button class="boton-item">Compra</button>
            </div>
            <div id="laptop3" class="item">
                <span class="titulo-item">MSI Katana 15</span>
                <img height="140" src="img/msi.jpg" alt="" class="img-item">
                <span class="descripcion " >Monitor 144hrz</span>
                <span class="precio-item">$1.200</span>
                <i id="tarjet" onclick="agregarAlCarritoClicked(event)" class="product__icon fas fa-cart-plus" style="color:rgb(9, 9, 116)"></i>
                <button class="boton-item">Compra</button>
            </div>
            <div id="procesador4" class="item">
              
              <img height="150px" src="img/i7.jpg" alt="" class="img-item">
              <span class="titulo-item">Intel i7 13700k</span>
              <span class="descripcion " >Monitor 144hrz</span>
              <span class="precio-item">$300</span>
              <i id="tarjet" onclick="agregarAlCarritoClicked(event)" class="product__icon fas fa-cart-plus" style="color:rgb(9, 9, 116)"></i>
              <button class="boton-item">Compra</button>
          </div>
          <div id="pc1" class="item">
           
            <img height="150" src="img/zotac.jpg" alt="" class="img-item">
             <span class="titulo-item">ZOTAC PC</span>
            <span class="descripcion " >Monitor 144hrz</span>
            <span class="precio-item">$800</span>
            <i id="tarjet" onclick="agregarAlCarritoClicked(event)" class="product__icon fas fa-cart-plus" style="color:rgb(9, 9, 116)"></i>
            <button class="boton-item">Compra</button>
        </div>
        <div id="laptop4" class="item">
              
              <img height="140" src="img/lenovo.jpg" alt="" class="img-item">
              <span class="titulo-item">Lenovo LEGION Y5</span>
              <span class="descripcion " >Monitor 144hrz</span>
              <span class="precio-item">$1.089</span>
              <i id="tarjet"  onclick="agregarAlCarritoClicked(event)" class="product__icon fas fa-cart-plus" style="color:rgb(9, 9, 116)"></i>
              <button class="boton-item">Crompra</button>
            </div>
            <div id="tarjeta3" class="item">
              
              <img src="img/radeon rx6700.jpg" alt="" class="img-item">
              <span class="titulo-item">Radeon RX 6700</span>
              <span class="descripcion " >Monitor 144hrz</span>
              <span class="precio-item">$280</span>
              <i id="tarjet" onclick="agregarAlCarritoClicked(event)" class="product__icon fas fa-cart-plus" style="color:rgb(9, 9, 116)"></i>
              <button class="boton-item">Compra</button>
          </div>
          <div id="pc2" class="item">
            
            <img height="150"  src="img/Skytech Shiva II.jpg" alt="" class="img-item">
            <span class="titulo-item">Skytech Shiva II </span>
            <span class="descripcion " >Monitor 144hrz</span>
            <span class="precio-item">$1.800</span>
            <i id="tarjet" onclick="agregarAlCarritoClicked(event)" class="product__icon fas fa-cart-plus" style="color:rgb(9, 9, 116)"></i>
            <button class="boton-item">Compra</button>
        </div>
        <div id="ram4" class="item">
          <img src="img/GIGABYTE.jpg" alt="" class="img-item">
          <span class="titulo-item">GIGABYTE placa madre</span>
          <span class="descripcion " >Monitor 144hrz</span>
          <span class="precio-item">$200</span>
          <i id="tarjet" onclick="agregarAlCarritoClicked(event)" class="product__icon fas fa-cart-plus" style="color:rgb(9, 9, 116)"></i>
          <button class="boton-item">Compra</button>
      </div>
      <div id="pc3" class="item">
        
        <img  height="140" src="img/Thermaltake Glacier 360.jpg" alt="" class="img-item">
        <span class="titulo-item">Thermaltake Glacier 360 </span>
        <span class="descripcion " >Monitor 144hrz</span>
        <span class="precio-item">$1.150</span>
        <i id="tarjet" onclick="agregarAlCarritoClicked(event)" class="product__icon fas fa-cart-plus" style="color:rgb(9, 9, 116)"></i>
        <button class="boton-item">Compra</button>
      </div>
      <div id="ram3" class="item">
        
        <img src="img/MSI MAG B550 TOMAHAWK.jpg" alt="" class="img-item">
        <span class="titulo-item">MSI MAG B550 TOMAHAWK</span>
        <span class="descripcion " >Monitor 144hrz</span>
        <span class="precio-item">$160</span>
        <i id="tarjet" onclick="agregarAlCarritoClicked(event)" class="product__icon fas fa-cart-plus" style="color:rgb(9, 9, 116)"></i>
        <button class="boton-item">Compra</button>
      </div>
      <div id="ram2" class="item">
        
        <img src="img/ASUS AM4 TUF Gaming X570-Plus.jpg" alt="" class="img-item">
        <span class="titulo-item">ASUS AM4 TUF Gaming X570-Plus</span>
        <span class="descripcion " >Monitor 144hrz</span>
        <span class="precio-item">$200</span>
        <i id="tarjet" onclick="agregarAlCarritoClicked(event)" class="product__icon fas fa-cart-plus" style="color:rgb(9, 9, 116)"></i>
        <button class="boton-item">Compra</button>
      </div>
      <div id="ram1" class="item">
        
        <img src="img/ASUS ROG Strix Z690-E Gaming.jpg" alt="" class="img-item">
        <span class="titulo-item">ASUS ROG Strix Z690-E Gaming </span>
        <span class="descripcion " >Monitor 144hrz</span>
        <span class="precio-item">$280</span>
        <i id="tarjet" onclick="agregarAlCarritoClicked(event)" class="product__icon fas fa-cart-plus" style="color:rgb(9, 9, 116)"></i>
        <button class="boton-item">Compra</button>
      </div>
      <div id="pc4" class="item">
        
        <img src="img/CyberpowerPC.jpg" alt="" class="img-item">
        <span class="titulo-item">CyberpowerPC </span>
        <span class="descripcion " >Monitor 144hrz</span>
        <span class="precio-item">$2.800</span>
        <i id="tarjet" onclick="agregarAlCarritoClicked(event)" class="product__icon fas fa-cart-plus" style="color:rgb(9, 9, 116)"></i>
        <button class="boton-item">Compra</button>
      </div>
          </div>
          <!-- Carrito de Compras -->
          <div class="carrito" id="carrito">
            <div class="header-carrito">
                <h2>Tu Carrito</h2>
                <span class="aquis"><i onclick="hacerInVisibleCarrito()" class="fa-solid fa-x"></i></span>
            </div>

            <div class="carrito-items">
                
                <Div class="item"></Div>
             
            </div>
            <div class="carrito-total">
                <div class="fila">
                    <strong>Tu Total</strong>
                    <span class="carrito-precio-total">
                        $0
                    </span>
                </div>
                <button class="btn-pagar">Pagar <i class="fa-solid fa-bag-shopping"></i> </button>
            </div>
        </div>
    </section>  
    <div class="chat-icon">
    <?php include("boticon.php") ?>
    </div>
      
      <footer>
      <div class="footer-container">
        <div class="copyright">
          &copy; 2023 Tu Empresa. Todos los derechos reservados.
        </div>
        <div class="contact-info">
          <div class="phone">Teléfono: +1 234 567 890</div>
          <div class="address">Dirección: Calle Principal, Ciudad, Estado</div>
          <div class="icono">
            <i class="fi fi-brands-instagram"></i>
          </div>
          <img src="img/" alt="">
          <a href="#" id="backToTop">
            <i class="fas fa-arrow-up"></i>
          </a>
        </div>
      </div>
    </footer>
   
    
      
      <script src="Javas/filtrar.js"></script>
</body>
</html>