<?php

include("config/conexion.php");

$sql = "SELECT * FROM productos ORDER BY categoria,nombre";

$resultado = mysqli_query(
    $conexion,
    $sql
);

?>

<!DOCTYPE html>
<html lang="es">

<head>

<meta charset="UTF-8">

<title>Productos</title>

<link rel="stylesheet"
href="assets/css/estilos.css">

</head>

<body>

<header>

<h1>MarketPlus</h1>

<p>Catálogo de Productos</p>

</header>

<nav>

<a href="index.php">Inicio</a>

<a href="productos.php">Productos</a>

<a href="ofertas.php">Ofertas</a>

<a href="contacto.php">Contacto</a>

<a href="carrito.php">Carrito</a>

<a href="registrar_producto.php">
Registrar Producto
</a>

<a href="buscar_producto.php">
Gestionar Productos
</a>

</nav>

<div class="container">

<h2>Productos Disponibles</h2>

<div class="productos">

<?php

while(
$fila =
mysqli_fetch_assoc(
$resultado
))
{

$imagen = "assets/img/productos/" . $fila['imagen'];

switch(
$fila['categoria']
)
{
    case 'Abarrotes':
        $imagen =
        'https://images.unsplash.com/photo-1586201375761-83865001e31c';
        break;

    case 'Bebidas':
        $imagen =
        'https://images.unsplash.com/photo-1629203851122-3726ecdf080e';
        break;

    case 'Lacteos':
        $imagen =
        'https://images.unsplash.com/photo-1550583724-b2692b85b150';
        break;

    case 'Snacks':
        $imagen =
        'https://images.unsplash.com/photo-1585325701954-dc8e4b52a245';
        break;
}

?>

<div class="producto">

<img
src="assets/img/productos/<?=
$fila['imagen'];
?>"

alt="<?=
$fila['nombre'];
?>"

onerror="this.src='https://via.placeholder.com/180'">

<h4>

<?= $fila['categoria']; ?>

</h4>

<h3>

<?= $fila['nombre']; ?>

</h3>

<p>

<?= $fila['descripcion']; ?>

</p>

<p class="precio">

S/
<?= number_format(
$fila['precio'],
2
); ?>

</p>

<p>

Stock:
<?= $fila['stock']; ?>

</p>

<button
class="btn"
onclick="comprar(
'<?= $fila['nombre']; ?>',
<?= $fila['precio']; ?>
)">

Agregar al carrito

</button>

</div>

<?php

}

?>

</div>

</div>

<footer>

© 2026 MarketPlus

</footer>

<script src="assets/js/app.js"></script>

</body>

</html>