alumnos_ti/Sistema-Web-Rotiseria
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

catalogo y carrito de compras

Browse Source
This commit is contained in:
Brisa
2026-06-30 14:57:45 -03:00
parent b960bd05d6
commit bc733c827d
5 changed files with 1965 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
carrito.php
+181
View File
@@ -0,0 +1,181 @@
<?php
include("db.php");
$total = 0;
$productos_en_carrito = [];
if (!empty($_SESSION['carrito'])) {
$ids = array_keys($_SESSION['carrito']);
$lista_ids = implode(',', $ids);
$query = "SELECT * FROM productos WHERE id IN ($lista_ids)";
$resultado = $conexion->query($query);
if ($resultado) {
while ($row = $resultado->fetch_assoc()) {
$row['cantidad'] = $_SESSION['carrito'][$row['id']];
$row['subtotal'] = $row['precio'] * $row['cantidad'];
$total += $row['subtotal'];
$productos_en_carrito[] = $row;
}
}
}
//$estado_local = 'abierto'; // PARA PRUEBAS SOLAMENTE !!!!
$estado_local = es_horario_comercial($conexion);
?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Tu carrito - La Pecosa</title>
<link rel="stylesheet" href="css/all.min.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', sans-serif; background-color: #fffef8; color: #333; }
.container { max-width: 900px; margin: 50px auto; padding: 20px; background: white; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
h1 { color: #e02828; margin-bottom: 30px; border-bottom: 2px solid #fdf0f0; padding-bottom: 10px; }
table { width: 100%; border-collapse: collapse; margin-bottom: 30px; }
th { text-align: left; padding: 15px; border-bottom: 2px solid #eee; color: #666; text-transform: uppercase; font-size: 0.8rem; }
td { padding: 15px; border-bottom: 1px solid #eee; vertical-align: middle; }
.img-thumb { width: 60px; height: 60px; object-fit: cover; border-radius: 8px; }
.cantidad-controles { display: flex; align-items: center; gap: 10px; }
.btn-accion { text-decoration: none; color: #e02828; font-size: 1.2rem; transition: 0.2s; display: inline-block; }
.btn-accion:hover { color: #333; }
.btn-accion.deshabilitado {
color: #ccc !important;
cursor: not-allowed !important;
opacity: 0.5;
pointer-events: none;
}
.total-container { text-align: right; padding: 20px; background: #fdf0f0; border-radius: 10px; }
.total-container h2 { color: #e02828; font-size: 2rem; }
.botones-final { display: flex; justify-content: space-between; align-items: center; margin-top: 30px; }
.btn { padding: 15px 30px; border-radius: 50px; text-decoration: none; font-weight: 600; transition: 0.3s; }
.btn-volver { background: #eee; color: #666; }
.btn-pagar { background: #e02828; color: white; box-shadow: 0 4px 15px rgba(224, 40, 40, 0.3); border: none; cursor: pointer; font-size: 1rem; }
.btn-pagar:hover { transform: scale(1.05); background: #c02020; }
.vacio { text-align: center; padding: 50px; color: #999; }
.alerta-horario {
background: #fee2e2;
color: #991b1b;
padding: 18px;
border-radius: 12px;
border: 1px solid #fca5a5;
margin-top: 25px;
font-size: 0.95rem;
line-height: 1.5;
}
.alerta-horario h4 {
font-size: 1.1rem;
margin-bottom: 5px;
display: flex;
align-items: center;
gap: 8px;
}
</style>
</head>
<body>
<div class="container">
<h1><i class="fa-solid fa-basket-shopping"></i> Mi carrito</h1>
<?php if (empty($productos_en_carrito)): ?>
<div class="vacio">
<p>Tu carrito está vacío.</p>
<br>
<a href="productos.php" class="btn btn-pagar">Ir a comprar algo rico</a>
</div>
<?php else: ?>
<table>
<thead>
<tr>
<th>Producto</th>
<th>Precio</th>
<th>Cantidad</th>
<th>Subtotal</th>
<th></th>
</tr>
</thead>
<tbody>
<?php foreach ($productos_en_carrito as $p):
$stock_disponible = isset($p['stock']) ? (int)$p['stock'] : 0;
$limite_alcanzado = ($p['cantidad'] >= $stock_disponible);
?>
<tr>
<td style="display: flex; align-items: center; gap: 15px;">
<img src="<?php echo $p['imagen']; ?>" class="img-thumb">
<strong><?php echo htmlspecialchars($p['nombre']); ?></strong>
</td>
<td>$<?php echo number_format($p['precio'], 0, ',', '.'); ?></td>
<td>
<div class="cantidad-controles">
<a href="gestionar_carrito.php?accion=quitar&id=<?php echo $p['id']; ?>" class="btn-accion">
<i class="fa-solid fa-circle-minus"></i>
</a>
<span><?php echo $p['cantidad']; ?></span>
<?php if ($limite_alcanzado): ?>
<span class="btn-accion deshabilitado" title="Alcanzaste el máximo de stock disponible (<?php echo $stock_disponible; ?>)">
<i class="fa-solid fa-circle-plus"></i>
</span>
<?php else: ?>
<a href="gestionar_carrito.php?accion=agregar&id=<?php echo $p['id']; ?>&origen=carrito" class="btn-accion">
<i class="fa-solid fa-circle-plus"></i>
</a>
<?php endif; ?>
</div>
</td>
<td>$<?php echo number_format($p['subtotal'], 0, ',', '.'); ?></td>
<td>
<a href="gestionar_carrito.php?accion=eliminar&id=<?php echo $p['id']; ?>" style="color: #ccc;"><i class="fa-solid fa-trash"></i></a>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
<div class="total-container">
<p>Total a pagar:</p>
<h2>$<?php echo number_format($total, 0, ',', '.'); ?></h2>
</div>
<?php if ($estado_local !== 'abierto'): ?>
<div class="alerta-horario">
<h4><i class="fa-solid fa-store-slash"></i> Local cerrado temporalmente</h4>
<?php
if ($estado_local === 'manual_cerrado') {
echo "El establecimiento se encuentra cerrado por razones de fuerza mayor o mantenimiento edilicio. Disculpe las molestias.";
} else {
echo "Actualmente nos encontramos fuera del horario de atención al público.<br>";
echo "<strong>Horarios de entrega:</strong> Lunes a Sábados de 08:30 a 13:30 y de 17:30 a 21:00 hs. · Domingos de 09:00 a 13:00 hs.";
}
?>
</div>
<?php endif; ?>
<div class="botones-final">
<a href="productos.php" class="btn btn-volver">← Seguir comprando</a>
<?php if ($estado_local === 'abierto'): ?>
<a href="formulario_entrega.php" class="btn btn-pagar">Finalizar pedido</a>
<?php else: ?>
<button class="btn" style="background: #cbd5e1; color: #94a3b8; cursor: not-allowed; border: none; font-weight: 600; padding: 15px 30px; border-radius: 50px;" disabled title="El comercio se encuentra cerrado">
Finalizar pedido
</button>
<?php endif; ?>
</div>
<?php endif; ?>
</div>
</body>
</html>
diseño.css
+735
View File
@@ -0,0 +1,735 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html { scroll-behavior: smooth; }
body {
font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
background-color: #fffef8;
color: #333;
}
/* ══════════════════════════════════════
NAVBAR
══════════════════════════════════════ */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 5%;
background-color: #e02828;
position: sticky;
top: 0;
z-index: 1000;
box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}
.info-contacto {
display: flex;
gap: 20px;
font-size: 13px;
color: #fffef8;
font-weight: 600;
}
.nav-links {
display: flex;
gap: 8px;
list-style: none;
align-items: center;
}
.nav-links > li > a {
text-decoration: none;
background-color: rgba(255,255,255,0.15);
color: #fff;
padding: 8px 18px;
border-radius: 50px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
border: 1px solid rgba(255,255,255,0.25);
transition: all 0.25s ease;
}
.nav-links > li > a:hover {
background-color: #fff;
color: #e02828;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
/* Dropdown */
.dropdown { position: relative; }
.dropdown-content {
display: none;
position: absolute;
right: 0;
top: calc(100% + 10px);
background: #fff;
min-width: 220px;
box-shadow: 0 15px 40px rgba(0,0,0,0.12);
border-radius: 12px;
z-index: 1000;
border: 1px solid rgba(224,40,40,0.08);
overflow: hidden;
}
.dropdown-content.show {
display: block;
animation: fadeInDropdown 0.18s ease-out;
}
@keyframes fadeInDropdown {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.dropdown-content a {
display: block !important;
padding: 11px 20px !important;
color: #444 !important;
text-decoration: none !important;
font-size: 13.5px !important;
border-bottom: 1px solid #f5f5f5;
transition: 0.15s;
font-weight: 500;
}
.dropdown-content a:last-child { border-bottom: none; }
.dropdown-content a:hover {
background-color: #fff5f5 !important;
color: #e02828 !important;
padding-left: 26px !important;
}
/* ══════════════════════════════════════
HERO
══════════════════════════════════════ */
.hero {
width: 100%;
min-height: 82vh;
background-color: #fffef8;
background-image: url('imagenes/la-pecosa-inicio-opcion7.png');
background-size: 700px;
background-position: center 55%;
background-repeat: no-repeat;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
padding-bottom: 56px;
position: relative;
}
.hero::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 6px;
background: linear-gradient(90deg, #e02828 0%, #ff6b6b 50%, #e02828 100%);
}
/* ══════════════════════════════════════
SLIDER
══════════════════════════════════════ */
.product-banner-slider {
width: 100%;
height: 300px;
overflow: hidden;
background: #fff;
border-top: 1px solid #f5f5f5;
border-bottom: 1px solid #f5f5f5;
position: relative;
}
.product-slider-wrapper {
display: flex;
width: max-content;
height: 100%;
animation: scroll-infinito 55s linear infinite;
}
.product-slide {
width: 380px;
height: 100%;
flex-shrink: 0;
}
.product-slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
@keyframes scroll-infinito {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.product-banner-slider:hover .product-slider-wrapper {
animation-play-state: paused;
}
/* ══════════════════════════════════════
SECCIÓN INFO (NOSOTROS / HORARIOS)
══════════════════════════════════════ */
.seccion-info {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 32px;
padding: 70px 5%;
background-color: #fffef8;
}
.clean-card {
background: #fff;
border: 1px solid rgba(224, 40, 40, 0.1);
border-radius: 20px;
width: 100%;
max-width: 400px;
padding: 48px 40px;
text-align: center;
box-shadow: 0 4px 24px rgba(0,0,0,0.04);
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
position: relative;
overflow: hidden;
}
.clean-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #e02828, #ff8585);
opacity: 0;
transition: opacity 0.3s;
}
.clean-card:hover {
transform: translateY(-6px);
box-shadow: 0 16px 40px rgba(224, 40, 40, 0.1);
border-color: rgba(224, 40, 40, 0.25);
}
.clean-card:hover::before { opacity: 1; }
.clean-card-icon {
width: 72px;
height: 72px;
background: #fff5f5;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 24px;
transition: background 0.3s;
}
.clean-card:hover .clean-card-icon { background: #fee2e2; }
.clean-card-icon i {
font-size: 2rem;
color: #e02828;
}
.clean-card h2 {
color: #1a1a1a;
font-size: 1.4rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 18px;
position: relative;
}
.clean-card h2::after {
content: '';
display: block;
width: 40px;
height: 3px;
background: #e02828;
margin: 10px auto 0;
border-radius: 2px;
transition: width 0.3s;
}
.clean-card:hover h2::after { width: 64px; }
.clean-card-body {
color: #555;
font-size: 1rem;
line-height: 1.8;
}
.clean-card-body p { margin: 10px 0; }
.highlight-red {
color: #e02828;
font-weight: 700;
}
/* ══════════════════════════════════════
MODALES
══════════════════════════════════════ */
.modal {
display: none;
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0,0,0,0.55);
backdrop-filter: blur(5px);
justify-content: center;
align-items: center;
z-index: 9999;
}
.modal-content {
background: #fff;
padding: 40px;
border-radius: 20px;
width: 90%;
max-width: 550px;
text-align: center;
box-shadow: 0 24px 60px rgba(0,0,0,0.2);
position: relative;
animation: modalIn 0.25s ease;
}
@keyframes modalIn {
from { opacity: 0; transform: scale(0.96) translateY(10px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-content button {
background: #e02828;
color: #fff;
padding: 12px 28px;
border-radius: 50px;
border: none;
font-weight: 700;
text-transform: uppercase;
cursor: pointer;
transition: 0.25s;
margin-top: 16px;
}
.modal-content button:hover {
background: #c71f1f;
transform: translateY(-1px);
}
/* ══════════════════════════════════════
BARRA INFERIOR FIJA
══════════════════════════════════════ */
.bottom-bar {
position: fixed;
bottom: 0;
width: 100%;
background: #e02828;
color: #fffef8;
padding: 12px 5%;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 1000;
box-shadow: 0 -2px 16px rgba(0,0,0,0.12);
}
.footer-text {
font-size: 0.85rem;
font-weight: 600;
opacity: 0.9;
}
.btn-red {
background: rgba(255,255,255,0.15);
color: #fff;
border: 1px solid rgba(255,255,255,0.3);
padding: 9px 20px;
border-radius: 50px;
font-size: 0.875rem;
font-weight: 700;
cursor: pointer;
display: flex;
align-items: center;
gap: 9px;
text-decoration: none;
transition: all 0.25s;
}
.btn-red:hover {
background: #fff;
color: #e02828;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
#cart-count {
background: #fff;
color: #e02828;
font-size: 0.72rem;
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-weight: 800;
transition: all 0.25s;
}
.btn-red:hover #cart-count {
background: #e02828;
color: #fff;
outline: 2px solid #fff;
}
/* ══════════════════════════════════════
CHATBOT — Botón circular
══════════════════════════════════════ */
#chat-circle {
position: fixed;
bottom: 76px;
right: 24px;
background: #e02828;
width: 56px;
height: 56px;
border-radius: 50%;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
cursor: pointer;
box-shadow: 0 6px 20px rgba(224,40,40,0.4);
z-index: 999;
transition: transform 0.2s, box-shadow 0.2s;
}
#chat-circle:hover {
transform: scale(1.08);
box-shadow: 0 8px 24px rgba(224,40,40,0.5);
}
/* ══════════════════════════════════════
CHATBOT — Ventana
══════════════════════════════════════ */
.chat-box {
display: none;
position: fixed;
bottom: 148px;
right: 24px;
width: 310px;
background: #fff;
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0,0,0,0.18);
z-index: 999;
overflow: hidden;
flex-direction: column;
animation: chatIn 0.2s ease;
}
@keyframes chatIn {
from { opacity: 0; transform: translateY(10px) scale(0.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.chat-box-header {
background: #e02828;
color: #fff;
padding: 14px 16px;
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 700;
font-size: 0.9rem;
}
.chat-box-body {
height: 230px;
padding: 12px;
overflow-y: auto;
background: #fafafa;
display: flex;
flex-direction: column;
gap: 6px;
}
/* Scrollbar del chat */
.chat-box-body::-webkit-scrollbar { width: 4px; }
.chat-box-body::-webkit-scrollbar-track { background: transparent; }
.chat-box-body::-webkit-scrollbar-thumb { background: #f0c0c0; border-radius: 4px; }
/* Mensaje del bot */
.chat-msg { width: 100%; }
.cm-msg-text {
background: #fff;
padding: 10px 12px;
border-radius: 0 10px 10px 10px;
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
font-size: 13.5px;
border-left: 3px solid #e02828;
line-height: 1.5;
display: inline-block;
max-width: 90%;
}
/* Mensaje del promo */
.chat-promo .cm-msg-text {
border-left-color: #e02828;
background: #fff5f5;
}
/* Mensaje del usuario (derecha) */
.chat-msg-user {
align-self: flex-end;
background: #e02828;
color: #fff;
padding: 9px 13px;
border-radius: 10px 10px 0 10px;
font-size: 13.5px;
max-width: 80%;
word-break: break-word;
margin-left: auto;
}
/* Opciones dentro del chat (botones de pago, etc.) */
.chat-opciones {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: 4px;
}
/* Links dentro del chat (teléfonos, redes, etc.) */
.chat-links {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: 4px;
}
.chat-link-btn {
display: block;
padding: 9px 14px;
background: #e02828;
color: #fff;
border-radius: 8px;
text-decoration: none;
font-size: 13px;
font-weight: 600;
text-align: center;
transition: background 0.2s, transform 0.15s;
}
.chat-link-btn:hover {
background: #c71f1f;
transform: translateY(-1px);
}
.chat-link-ig { background: #e1306c; }
.chat-link-ig:hover { background: #c0255a; }
.chat-link-mail { background: #4285f4; }
.chat-link-mail:hover { background: #2b6fd4; }
/* ══════════════════════════════════════
CHATBOT — Input
══════════════════════════════════════ */
.chat-input-wrapper {
display: flex;
align-items: center;
gap: 6px;
padding: 10px 10px 6px;
background: #fff;
border-top: 1px solid #f0f0f0;
}
#chat-input-text {
flex: 1;
padding: 8px 12px;
border: 1px solid #e5e7eb;
border-radius: 20px;
font-size: 13px;
outline: none;
background: #fafafa;
color: #333;
transition: border-color 0.2s;
}
#chat-input-text:focus {
border-color: #e02828;
background: #fff;
}
.chat-send-btn {
width: 34px;
height: 34px;
background: #e02828;
color: #fff;
border: none;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
flex-shrink: 0;
transition: background 0.2s, transform 0.15s;
}
.chat-send-btn:hover {
background: #c71f1f;
transform: scale(1.05);
}
/* Sugerencias debajo del input */
.chat-hints {
padding: 0 12px 8px;
font-size: 11px;
color: #aaa;
background: #fff;
text-align: center;
line-height: 1.4;
}
/* Botones de opción dentro del chat (retiro/envío) */
.opt-btn {
padding: 8px 10px;
font-size: 12px;
border: 1px solid #e5e7eb;
border-radius: 7px;
background: #fafafa;
cursor: pointer;
font-weight: 600;
color: #374151;
transition: all 0.15s;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
width: 100%;
}
.opt-btn:hover {
background: #fee2e2;
border-color: #fca5a5;
color: #e02828;
}
/* ══════════════════════════════════════
ALERTA PROMO FLOTANTE
══════════════════════════════════════ */
#alerta-flotante-promo {
position: fixed;
bottom: 80px;
left: 24px;
background: #fff;
box-shadow: 0 8px 30px rgba(0,0,0,0.15);
border-radius: 14px;
padding: 16px 20px;
max-width: 300px;
z-index: 9999;
display: none;
border-left: 4px solid #e02828;
opacity: 0;
transform: translateX(-16px);
transition: all 0.4s ease;
}
/* ══════════════════════════════════════
USUARIO EN NAV
══════════════════════════════════════ */
.user-name-nav {
display: inline-block;
background: rgba(255,255,255,0.2);
color: #fff;
padding: 8px 18px;
border-radius: 50px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
border: 1px solid rgba(255,255,255,0.3);
}
.user-badge-nav {
display: inline-block;
background: #1a1a1a;
color: #fffef8;
padding: 8px 18px;
border-radius: 50px;
font-size: 12px;
font-weight: 700;
}
/* ══════════════════════════════════════
RESPONSIVE
══════════════════════════════════════ */
@media (max-width: 768px) {
.hero {
background-size: 90%;
min-height: 52vh;
padding-bottom: 30px;
}
.navbar {
flex-direction: column;
gap: 10px;
padding: 12px 4%;
}
.nav-links {
gap: 6px;
flex-wrap: wrap;
justify-content: center;
}
.nav-links > li > a {
padding: 6px 12px;
font-size: 11px;
}
.bottom-bar {
flex-direction: column;
gap: 8px;
text-align: center;
padding: 10px;
}
.seccion-info {
padding: 44px 5%;
gap: 22px;
}
.clean-card {
padding: 36px 26px;
}
.product-banner-slider { height: 220px; }
.product-slide { width: 280px; }
.chat-box {
width: calc(100vw - 32px);
right: 16px;
bottom: 130px;
}
#alerta-flotante-promo {
max-width: calc(100vw - 48px);
left: 16px;
}
}
gestionar_carrito.php
+62
View File
@@ -0,0 +1,62 @@
<?php
include("db.php");
if (!isset($_SESSION['id_usuario'])) {
header("Location: login.php?msj=debes_iniciar_sesion");
exit();
}
$accion = $_GET['accion'] ?? '';
$id = $_GET['id'] ?? '';
$id = intval($id);
$origen = $_GET['origen'] ?? 'menu';
$cat_retorno = $_GET['cat'] ?? 'Todos';
switch ($accion) {
case 'agregar':
if ($id > 0) {
$sql_stock = "SELECT stock FROM productos WHERE id = ?";
$stmt = $conexion->prepare($sql_stock);
$stmt->bind_param("i", $id);
$stmt->execute();
$resultado = $stmt->get_result();
if ($row = $resultado->fetch_assoc()) {
$stock_disponible = (int)$row['stock'];
$cantidad_futura = isset($_SESSION['carrito'][$id]) ? $_SESSION['carrito'][$id] + 1 : 1;
if ($cantidad_futura <= $stock_disponible) {
$_SESSION['carrito'][$id] = $cantidad_futura;
}
}
}
if ($origen === 'carrito') {
header("Location: carrito.php");
} else {
header("Location: productos.php?cat=" . urlencode($cat_retorno) . "#prod-" . $id);
}
exit();
case 'quitar':
if (isset($_SESSION['carrito'][$id])) {
$_SESSION['carrito'][$id]--;
if ($_SESSION['carrito'][$id] <= 0) {
unset($_SESSION['carrito'][$id]);
}
}
header("Location: carrito.php");
exit();
case 'eliminar':
unset($_SESSION['carrito'][$id]);
header("Location: carrito.php");
exit();
default:
header("Location: productos.php");
exit();
}
productos.php
+659
View File
@@ -0,0 +1,659 @@
<?php
session_start();
include("db.php");
$categoria = isset($_GET['cat']) ? $_GET['cat'] : '';
if ($categoria == '' || $categoria == 'Todos') {
$titulo_pagina = "Nuestro Menú";
$subtitulo_pagina = "Descubrí todas las delicias caseras listas para vos";
$query = "SELECT * FROM productos WHERE activo = 1 AND id != 999";
} else {
$titulo_pagina = htmlspecialchars($categoria);
$subtitulo_pagina = "Los mejores platos de nuestra cocina a tu mesa";
$cat_segura = $conexion->real_escape_string($categoria);
$query = "SELECT * FROM productos WHERE categoria = '$cat_segura' AND activo = 1 AND id != 999";
}
$resultado = $conexion->query($query);
$query_promo = "SELECT p.mensaje
FROM promociones p
WHERE p.fecha_publicacion >= NOW() - INTERVAL 1 DAY
ORDER BY p.id DESC LIMIT 1";
$res_promo = $conexion->query($query_promo);
$promo_activa = null;
if ($res_promo && $res_promo->num_rows > 0) {
$datos_promo = $res_promo->fetch_assoc();
$query_prod_999 = "SELECT precio, imagen, stock FROM productos WHERE id = 999 AND activo = 1";
$res_999 = $conexion->query($query_prod_999);
if ($res_999 && $res_999->num_rows > 0) {
$prod_999 = $res_999->fetch_assoc();
$promo_activa = array(
'mensaje' => $datos_promo['mensaje'],
'precio' => $prod_999['precio'],
'imagen' => $prod_999['imagen'],
'stock' => $prod_999['stock']
);
}
}
// Contador del pedido (solo lectura de sesión, no modifica la lógica del carrito)
$cant_pedido = 0;
if (!empty($_SESSION['carrito']) && is_array($_SESSION['carrito'])) {
foreach ($_SESSION['carrito'] as $item) {
if (is_array($item) && isset($item['cantidad'])) {
$cant_pedido += (int) $item['cantidad'];
} else {
$cant_pedido += 1;
}
}
}
?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Productos - La Pecosa</title>
<link rel="stylesheet" href="css/all.min.css">
<style>
/* ══════════════════════════════════════
BASE
══════════════════════════════════════ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
background-color: #fffef8;
color: #333;
padding-bottom: 70px; /* espacio para barra inferior fija */
}
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
/* ══════════════════════════════════════
NAVBAR (estilo index.php)
══════════════════════════════════════ */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 5%;
background-color: #e02828;
position: sticky;
top: 0;
z-index: 1000;
box-shadow: 0 2px 12px rgba(0,0,0,0.15);
flex-wrap: wrap;
gap: 10px;
}
.nav-left {
display: flex;
align-items: center;
gap: 24px;
}
.nav-brand {
color: #fffef8;
font-size: 1.2rem;
font-weight: 800;
letter-spacing: 0.5px;
text-decoration: none;
display: flex;
align-items: center;
gap: 8px;
}
.nav-brand i { font-size: 1rem; }
.nav-links {
display: flex;
gap: 7px;
list-style: none;
align-items: center;
flex-wrap: wrap;
}
/* Botones finos del navbar */
.nav-pill {
text-decoration: none;
background-color: rgba(255,255,255,0.15);
color: #fff;
padding: 6px 14px;
border-radius: 50px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.4px;
border: 1px solid rgba(255,255,255,0.25);
transition: all 0.25s ease;
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
}
.nav-pill:hover {
background-color: #fff;
color: #e02828;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
/* Variante destacada (LOGIN) */
.nav-pill.pill-login {
background-color: #fff;
color: #e02828;
}
.nav-pill.pill-login:hover {
background-color: #1a1a1a;
color: #fff;
}
/* Etiqueta de usuario logueado */
.nav-user {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(0,0,0,0.18);
color: #fff;
padding: 6px 14px;
border-radius: 50px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.4px;
border: 1px solid rgba(255,255,255,0.25);
}
/* ══════════════════════════════════════
TÍTULO DE SECCIÓN
══════════════════════════════════════ */
.titulo-seccion-contenedor {
text-align: center;
margin: 48px 0 36px;
padding: 36px 20px;
background: #fffef8;
}
.titulo-seccion-contenedor h1 {
font-size: 2.4rem;
font-weight: 800;
color: #1a1a1a;
text-transform: uppercase;
letter-spacing: 1.5px;
}
.titulo-seccion-contenedor h1::after {
content: '';
display: block;
width: 64px;
height: 4px;
background: linear-gradient(90deg, #e02828, #ff8585);
margin: 14px auto 0;
border-radius: 2px;
}
.titulo-seccion-contenedor p {
font-size: 1.05rem;
color: #777;
font-style: italic;
margin-top: 14px;
}
/* ══════════════════════════════════════
BANNER SLIDER
══════════════════════════════════════ */
.product-banner-slider {
width: 100vw;
margin-left: calc(-50vw + 50%);
margin-right: calc(-50vw + 50%);
margin-bottom: 40px;
height: 220px;
overflow: hidden;
border-radius: 0;
position: relative;
}
.product-slider-wrapper {
display: flex;
gap: 0;
width: max-content;
height: 100%;
animation: scrollContinuo 40s linear infinite;
}
.product-slide {
width: 300px;
height: 100%;
flex-shrink: 0;
}
.product-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.product-banner-slider:hover .product-slider-wrapper {
animation-play-state: paused;
}
@keyframes scrollContinuo {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* ══════════════════════════════════════
CARD DE PROMOCIÓN EN TIEMPO REAL
══════════════════════════════════════ */
.promo-realtime-card {
background: #fff;
border: 2px dashed #e02828;
padding: 24px;
border-radius: 22px;
margin-bottom: 40px;
display: flex;
gap: 24px;
align-items: center;
box-shadow: 0 8px 28px rgba(224, 40, 40, 0.07);
animation: pulseCard 2.5s infinite;
}
@keyframes pulseCard {
0% { border-color: #e02828; }
50% { border-color: #f59e0b; }
100% { border-color: #e02828; }
}
.promo-thumb {
width: 120px;
height: 120px;
flex-shrink: 0;
border-radius: 16px;
overflow: hidden;
border: 1px solid #f0f0f0;
background-color: #fff;
}
.promo-thumb img { width: 100%; height: 100%; object-fit: cover; }
.promo-info-layout {
display: flex;
flex: 1;
justify-content: space-between;
align-items: center;
gap: 20px;
}
.promo-content h4 {
background: #e02828;
color: white;
padding: 5px 14px;
border-radius: 50px;
font-size: 0.75rem;
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 6px;
margin-bottom: 8px;
text-transform: uppercase;
}
.promo-content p {
font-size: 1.3rem;
font-weight: 700;
color: #1e293b;
line-height: 1.3;
}
.promo-price-tag {
font-size: 1.7rem;
font-weight: 800;
color: #e02828;
display: block;
margin-top: 6px;
}
.promo-action {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8px;
}
.btn-promo-carrito {
background: #10b981;
color: white;
padding: 13px 26px;
border-radius: 50px;
font-weight: 700;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
box-shadow: 0 6px 16px rgba(16, 185, 129, 0.25);
transition: 0.2s;
}
.btn-promo-carrito:hover { background: #059669; transform: scale(1.03); }
/* ══════════════════════════════════════
GRID DE PRODUCTOS
══════════════════════════════════════ */
.productos-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 28px;
}
.producto-card {
background: #fff;
border-radius: 20px;
padding: 18px;
text-align: center;
box-shadow: 0 4px 20px rgba(0,0,0,0.03);
border: 1px solid rgba(224, 40, 40, 0.08);
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
}
/* Acento superior al hacer hover */
.producto-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: linear-gradient(90deg, #e02828, #ff8585);
opacity: 0;
transition: opacity 0.3s;
}
.producto-card:hover {
transform: translateY(-8px);
box-shadow: 0 16px 36px rgba(224, 40, 40, 0.12);
border-color: rgba(224, 40, 40, 0.25);
}
.producto-card:hover::before { opacity: 1; }
.producto-card img {
width: 100%;
height: 190px;
object-fit: cover;
border-radius: 14px;
margin-bottom: 16px;
background-color: #fdfdfd;
transition: transform 0.4s ease;
}
.producto-card:hover img { transform: scale(1.05); }
.producto-card h3 {
font-size: 1.15rem;
font-weight: 700;
margin-bottom: 8px;
color: #2d2d2d;
}
.precio {
display: block;
font-size: 1.5rem;
font-weight: 800;
color: #e02828;
margin-bottom: 12px;
}
.stock-info { margin-top: auto; }
/* Botón de compra */
.btn-carrito {
background: #e02828;
color: white;
border: none;
padding: 13px 20px;
border-radius: 50px;
cursor: pointer;
font-weight: 700;
font-size: 0.95rem;
width: 100%;
transition: 0.2s ease-in-out;
box-shadow: 0 4px 12px rgba(224, 40, 40, 0.15);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.btn-carrito:hover { background: #be1e1e; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(224,40,40,0.22); }
.no-hay {
text-align: center;
grid-column: 1 / -1;
padding: 70px;
color: #999;
font-style: italic;
background: #fff;
border-radius: 20px;
border: 1px dashed #e5e5e5;
}
/* ══════════════════════════════════════
BARRA INFERIOR FIJA (estilo index.php)
══════════════════════════════════════ */
.bottom-bar {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: #e02828;
color: #fffef8;
padding: 12px 5%;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 1000;
box-shadow: 0 -2px 16px rgba(0,0,0,0.12);
}
.footer-text { font-size: 0.85rem; font-weight: 600; opacity: 0.92; }
.btn-red {
background: rgba(255,255,255,0.15);
color: #fff;
border: 1px solid rgba(255,255,255,0.3);
padding: 8px 18px;
border-radius: 50px;
font-size: 0.8rem;
font-weight: 700;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 9px;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: all 0.25s;
}
.btn-red:hover {
background: #fff;
color: #e02828;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
/* Contador del pedido (estilo index.php) */
#cart-count {
background: #fff;
color: #e02828;
font-size: 0.72rem;
min-width: 22px;
height: 22px;
padding: 0 5px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50px;
font-weight: 800;
transition: all 0.25s;
}
.btn-red:hover #cart-count {
background: #e02828;
color: #fff;
outline: 2px solid #fff;
}
/* ══════════════════════════════════════
RESPONSIVE
══════════════════════════════════════ */
@media (max-width: 768px) {
.navbar { flex-direction: column; padding: 10px 4%; }
.nav-left { justify-content: center; }
.nav-links { justify-content: center; }
.nav-pill, .nav-user { padding: 6px 12px; font-size: 10px; }
.titulo-seccion-contenedor h1 { font-size: 1.8rem; }
.promo-realtime-card { flex-direction: column; text-align: center; }
.promo-info-layout { flex-direction: column; gap: 15px; }
.promo-action { align-items: center; }
.product-banner-slider { height: 160px; }
.product-slide { width: 220px; }
.bottom-bar { padding: 10px 4%; }
.footer-text { font-size: 0.75rem; }
}
</style>
</head>
<body>
<!-- NAVBAR estilo index.php -->
<header class="navbar">
<div class="nav-left">
<a href="index.php" class="nav-brand"><i class="fa-solid fa-apple-whole"></i> La Pecosa</a>
</div>
<nav>
<ul class="nav-links">
<li><a href="index.php" class="nav-pill"><i class="fa-solid fa-house"></i> Inicio</a></li>
<li><a href="productos.php?cat=Todos" class="nav-pill"><i class="fa-solid fa-bowl-food"></i> Productos</a></li>
<li><a href="carrito.php" class="nav-pill"><i class="fa-solid fa-cart-shopping"></i> Carrito</a></li>
<?php if (isset($_SESSION['rol']) && $_SESSION['rol'] == 'admin'): ?>
<li><a href="panel_admin.php" class="nav-pill"><i class="fa-solid fa-gauge"></i> Admin</a></li>
<?php endif; ?>
<?php if(isset($_SESSION['usuario'])): ?>
<li><span class="nav-user"><i class="fa-solid fa-user"></i> <?php echo strtoupper($_SESSION['usuario']); ?></span></li>
<li><a href="logout.php" class="nav-pill"><i class="fa-solid fa-right-from-bracket"></i> Salir</a></li>
<?php else: ?>
<li><a href="login.php" class="nav-pill pill-login"><i class="fa-solid fa-right-to-bracket"></i> Login</a></li>
<?php endif; ?>
</ul>
</nav>
</header>
<div class="container">
<div class="titulo-seccion-contenedor">
<h1><?php echo $titulo_pagina; ?></h1>
<p><?php echo $subtitulo_pagina; ?></p>
</div>
<div class="product-banner-slider">
<div class="product-slider-wrapper">
<div class="product-slide"><img src="imagenes/imagen3.jpg" alt="Promo 3"></div>
<div class="product-slide"><img src="imagenes/imagen4.jpg" alt="Promo 4"></div>
<div class="product-slide"><img src="imagenes/imagen5.jpg" alt="Promo 5"></div>
<div class="product-slide"><img src="imagenes/imagen6.jpg" alt="Promo 6"></div>
<div class="product-slide"><img src="imagenes/imagen7.jpg" alt="Promo 7"></div>
<div class="product-slide"><img src="imagenes/imagen8.jpg" alt="Promo 8"></div>
<div class="product-slide"><img src="imagenes/imagen9.jpg" alt="Promo 9"></div>
<div class="product-slide"><img src="imagenes/imagen10.jpg" alt="Promo 10"></div>
<div class="product-slide"><img src="imagenes/imagen11.jpg" alt="Promo 11"></div>
<div class="product-slide"><img src="imagenes/imagen12.jpg" alt="Promo 12"></div>
<div class="product-slide"><img src="imagenes/imagen13.jpg" alt="Promo 13"></div>
<div class="product-slide"><img src="imagenes/imagen14.jpg" alt="Promo 14"></div>
<div class="product-slide"><img src="imagenes/imagen15.jpg" alt="Promo 15"></div>
<div class="product-slide"><img src="imagenes/imagen16.jpg" alt="Promo 16"></div>
<div class="product-slide"><img src="imagenes/imagen17.jpg" alt="Promo 17"></div>
<div class="product-slide"><img src="imagenes/imagen18.jpg" alt="Promo 18"></div>
<div class="product-slide"><img src="imagenes/imagen3.jpg" alt="Promo 3"></div>
<div class="product-slide"><img src="imagenes/imagen4.jpg" alt="Promo 4"></div>
<div class="product-slide"><img src="imagenes/imagen5.jpg" alt="Promo 5"></div>
<div class="product-slide"><img src="imagenes/imagen6.jpg" alt="Promo 6"></div>
<div class="product-slide"><img src="imagenes/imagen7.jpg" alt="Promo 7"></div>
<div class="product-slide"><img src="imagenes/imagen8.jpg" alt="Promo 8"></div>
<div class="product-slide"><img src="imagenes/imagen9.jpg" alt="Promo 9"></div>
<div class="product-slide"><img src="imagenes/imagen10.jpg" alt="Promo 10"></div>
<div class="product-slide"><img src="imagenes/imagen11.jpg" alt="Promo 11"></div>
<div class="product-slide"><img src="imagenes/imagen12.jpg" alt="Promo 12"></div>
<div class="product-slide"><img src="imagenes/imagen13.jpg" alt="Promo 13"></div>
<div class="product-slide"><img src="imagenes/imagen14.jpg" alt="Promo 14"></div>
<div class="product-slide"><img src="imagenes/imagen15.jpg" alt="Promo 15"></div>
<div class="product-slide"><img src="imagenes/imagen16.jpg" alt="Promo 16"></div>
<div class="product-slide"><img src="imagenes/imagen17.jpg" alt="Promo 17"></div>
<div class="product-slide"><img src="imagenes/imagen18.jpg" alt="Promo 18"></div>
</div>
</div>
<?php if ($promo_activa && ($categoria == '' || $categoria == 'Todos' || $categoria == 'Promociones')): ?>
<div class="promo-realtime-card">
<div class="promo-thumb">
<img src="<?php echo !empty($promo_activa['imagen']) ? $promo_activa['imagen'] : 'img/default_promo.jpg'; ?>" alt="Imagen de la Promo">
</div>
<div class="promo-info-layout">
<div class="promo-content">
<h4><i class="fa-solid fa-bullhorn"></i> Súper Promo de Hoy</h4>
<p><?php echo htmlspecialchars($promo_activa['mensaje']); ?></p>
<span class="promo-price-tag">$<?php echo number_format($promo_activa['precio'], 0, ',', '.'); ?></span>
</div>
<div class="promo-action">
<?php if (isset($promo_activa['stock']) && $promo_activa['stock'] > 0): ?>
<span style="font-size: 0.8rem; color: #666; font-weight: 600; margin-bottom: 2px;">
¡Quedan solo <?php echo $promo_activa['stock']; ?> unidades!
</span>
<a href="gestionar_carrito.php?accion=agregar&id=999&cat=<?php echo urlencode($categoria); ?>&origen=menu" class="btn-promo-carrito">
<i class="fa-solid fa-cart-plus"></i> Añadir Promo al Carrito
</a>
<?php else: ?>
<button class="btn-promo-carrito" disabled style="background-color: #e5e5e5; color: #999; cursor: not-allowed; box-shadow: none;">
<i class="fa-solid fa-ban"></i> Promo Agotada
</button>
<?php endif; ?>
</div>
</div>
</div>
<?php endif; ?>
<div class="productos-grid">
<?php
if ($resultado && $resultado->num_rows > 0) {
while($row = $resultado->fetch_assoc()) {
?>
<div class="producto-card" id="prod-<?php echo $row['id']; ?>">
<img src="<?php echo !empty($row['imagen']) ? $row['imagen'] : 'img/default.jpg'; ?>" alt="<?php echo htmlspecialchars($row['nombre']); ?>">
<h3><?php echo htmlspecialchars($row['nombre']); ?></h3>
<span class="precio">$<?php echo number_format($row['precio'], 0, ',', '.'); ?></span>
<?php if (isset($row['stock']) && $row['stock'] > 0): ?>
<span class="stock-info" style="display: block; font-size: 0.85rem; color: #666; margin-bottom: 12px;">
Disponibles: <strong><?php echo $row['stock']; ?></strong> un.
</span>
<a href="gestionar_carrito.php?accion=agregar&id=<?php echo $row['id']; ?>&cat=<?php echo urlencode($categoria); ?>&origen=menu#prod-<?php echo $row['id']; ?>" class="btn-carrito" style="text-decoration: none; display: flex;">
<i class="fa-solid fa-cart-plus"></i> Añadir al carrito
</a>
<?php else: ?>
<span class="stock-info" style="display: block; font-size: 0.85rem; color: #e02828; font-weight: bold; margin-bottom: 12px;">
¡Agotado por hoy!
</span>
<button class="btn-carrito" disabled style="display: flex; width: 100%; background-color: #e5e5e5; border: none; color: #999; cursor: not-allowed; box-shadow: none;">
<i class="fa-solid fa-ban"></i> Sin Stock
</button>
<?php endif; ?>
</div>
<?php
}
} else {
echo "<div class='no-hay'><i class='fa-solid fa-utensils' style='font-size: 2rem; display:block; margin-bottom:10px; color:#ccc;'></i>No hay productos disponibles por el momento en esta sección.</div>";
}
?>
</div>
</div>
<!-- BARRA INFERIOR FIJA estilo index.php -->
<footer class="bottom-bar">
<span class="footer-text">© LA PECOSA — Paraná, Entre Ríos.</span>
<a href="carrito.php" class="btn-red"><i class="fa-solid fa-utensils"></i> Pedido <span id="cart-count"><?php echo $cant_pedido; ?></span></a>
</footer>
</body>
</html>
script.js
+328
View File
@@ -0,0 +1,328 @@
document.addEventListener("DOMContentLoaded", () => {
iniciarSlider();
configurarChatInput();
});
/* ══════════════════════════════
SLIDER
══════════════════════════════ */
function iniciarSlider() {
// El slider corre por CSS animation (scroll-infinito), no necesita JS.
// Esta función existe por si se agrega lógica futura.
}
/* ══════════════════════════════
MAPA
══════════════════════════════ */
function toggleMapa() {
const modal = document.getElementById('modal-mapa');
modal.style.display = (modal.style.display === 'flex') ? 'none' : 'flex';
}
/* ══════════════════════════════
MODALES GENÉRICOS
══════════════════════════════ */
function cerrarModal(id) {
const el = document.getElementById(id);
if (el) el.style.display = 'none';
}
// Cerrar modales al hacer click fuera del contenido
document.addEventListener('click', function(e) {
if (e.target.classList.contains('modal')) {
e.target.style.display = 'none';
}
});
/* ══════════════════════════════
ALERTA ÉXITO (auto-ocultar)
══════════════════════════════ */
const alertSuccess = document.getElementById('success-alert');
if (alertSuccess) {
setTimeout(() => {
alertSuccess.style.transition = "opacity 0.5s ease";
alertSuccess.style.opacity = "0";
setTimeout(() => {
alertSuccess.remove();
const url = new URL(window.location);
url.searchParams.delete('exito');
window.history.replaceState({}, document.title, url);
}, 500);
}, 4000);
}
/* ══════════════════════════════
DROPDOWN CATEGORÍAS
══════════════════════════════ */
function toggleDropdown(event) {
event.stopPropagation();
document.getElementById("myDropdown").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn') && !event.target.matches('.dropbtn *')) {
const dropdown = document.getElementById("myDropdown");
if (dropdown && dropdown.classList.contains('show')) {
dropdown.classList.remove('show');
}
}
};
/* ══════════════════════════════
CHATBOT
══════════════════════════════ */
let intentos = 0;
let ultimaRespuestaFueDesconocida = false;
const MINUTOS_BLOQUEO = 10;
function configurarChatInput() {
const input = document.getElementById('chat-input-text');
if (!input) return;
input.addEventListener('keypress', function(e) {
if (e.key === 'Enter') enviarMensaje();
});
}
function enviarMensaje() {
const input = document.getElementById('chat-input-text');
if (!input) return;
const texto = input.value.trim();
if (!texto) return;
input.value = '';
procesarConsulta(texto.toLowerCase());
}
function toggleChat() {
const chatBox = document.getElementById('chat-box');
const logs = document.getElementById('chat-logs');
if (!chatBox) return;
const isVisible = window.getComputedStyle(chatBox).display !== 'none';
if (!isVisible) {
// Verificar bloqueo
const bloqueadoHasta = localStorage.getItem('chat_bloqueado_hasta');
if (bloqueadoHasta && Date.now() < parseInt(bloqueadoHasta)) {
const minutosRestantes = Math.ceil((parseInt(bloqueadoHasta) - Date.now()) / 60000);
chatBox.style.display = 'flex';
logs.innerHTML = `
<div class="chat-msg">
<div class="cm-msg-text">El chat estará disponible en <b>${minutosRestantes} minuto${minutosRestantes !== 1 ? 's' : ''}</b>.</div>
</div>
`;
// Deshabilitar input
const input = document.getElementById('chat-input-text');
const btn = document.querySelector('.chat-send-btn');
if (input) input.disabled = true;
if (btn) btn.disabled = true;
return;
}
// Sin bloqueo: abrir normal
chatBox.style.display = 'flex';
logs.innerHTML = `
<div class="chat-msg">
<div class="cm-msg-text">¡Hola! Soy el asistente de La Pecosa 🍎 ¿En qué puedo ayudarte?</div>
</div>
`;
const input = document.getElementById('chat-input-text');
const btn = document.querySelector('.chat-send-btn');
if (input) { input.disabled = false; input.focus(); }
if (btn) btn.disabled = false;
} else {
intentos = 0;
chatBox.style.display = 'none';
}
}
function procesarConsulta(mensaje) {
const logs = document.getElementById('chat-logs');
const divUsuario = document.createElement("div");
divUsuario.className = "chat-msg-user";
divUsuario.textContent = mensaje;
logs.appendChild(divUsuario);
logs.scrollTop = logs.scrollHeight;
fetch('consultar_bot.php', {
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
body: 'mensaje=' + encodeURIComponent(mensaje)
})
.then(r => r.json())
.then(data => {
agregarMensaje(data.respuesta);
if (data.accion === 'abrir_mapa') {
setTimeout(toggleMapa, 800);
} else if (data.accion === 'abrir_horarios') {
setTimeout(() => {
const modal = document.getElementById('modal-horarios-visual');
if (modal) modal.style.display = 'flex';
}, 600);
} else if (data.accion === 'abrir_novedades') {
setTimeout(() => {
const modal = document.getElementById('modal-novedades');
if (modal) modal.style.display = 'flex';
}, 600);
} else if (data.accion === 'mostrar_telefonos') {
mostrarTelefonos();
} else if (data.accion === 'mostrar_contacto') {
mostrarContacto();
} else if (data.accion === 'mostrar_redes') {
mostrarRedes();
} else if (data.accion === 'mostrar_pagos') {
const divBtns = document.createElement("div");
divBtns.className = "chat-opciones";
divBtns.innerHTML = `
<button class="opt-btn" onclick="procesarPago('presencial')"><i class="fa-solid fa-store"></i> Retiro presencial</button>
<button class="opt-btn" onclick="procesarPago('envio')"><i class="fa-solid fa-motorcycle"></i> Envío a domicilio</button>
`;
logs.appendChild(divBtns);
} else if (data.accion === 'forzar_cierre') {
intentos++;
if (intentos >= 3) {
agregarMensaje("No puedo seguir ayudándote por este medio. ¡Llamanos o escribinos! 😊");
// Guardar bloqueo
const hasta = Date.now() + MINUTOS_BLOQUEO * 60 * 1000;
localStorage.setItem('chat_bloqueado_hasta', hasta);
setTimeout(() => {
toggleChat();
intentos = 0;
}, 3000);
}
} else {
intentos = 0;
}
logs.scrollTop = logs.scrollHeight;
})
.catch(err => {
console.error("Error en el chatbot:", err);
agregarMensaje("No pude procesar tu consulta en este momento. ¡Llamanos por teléfono!");
});
}
function procesarPago(tipo) {
if (tipo === 'presencial') {
agregarMensaje("💵 <b>Medios de pago — Retiro presencial:</b><br>• Efectivo<br>• Tarjeta de Débito<br>• Transferencia (Alias: <b>LA.PECOSA.PARANA</b>)");
} else {
agregarMensaje("🚚 <b>Medios de pago — Envío a domicilio:</b><br>• Solo transferencia al Alias: <b>LA.PECOSA.PARANA</b>");
}
}
function mostrarTelefonos() {
//agregarMensaje("📞 Podés llamarnos a:");
const logs = document.getElementById('chat-logs');
const div = document.createElement("div");
div.className = "chat-links";
div.innerHTML = `
<a href="tel:03434231400" class="chat-link-btn"><i class="fa-solid fa-phone"></i> 0343 423-1400</a>
<a href="tel:03434312763" class="chat-link-btn"><i class="fa-solid fa-phone"></i> 0343 431-2763</a>
`;
logs.appendChild(div);
logs.scrollTop = logs.scrollHeight;
}
function mostrarContacto() {
//agregarMensaje("¡Contactanos por donde prefieras!");
const logs = document.getElementById('chat-logs');
const div = document.createElement("div");
div.className = "chat-links";
div.innerHTML = `
<a href="https://www.instagram.com/lapecosa.rotiseria" target="_blank" class="chat-link-btn chat-link-ig"><i class="fa-brands fa-instagram"></i> Instagram</a>
<a href="https://mail.google.com/mail/?view=cm&fs=1&to=lapecosaparana@gmail.com" target="_blank" class="chat-link-btn chat-link-mail"><i class="fa-solid fa-envelope"></i> Enviar correo</a>
<a href="tel:03434231400" class="chat-link-btn"><i class="fa-solid fa-phone"></i> 0343 423-1400</a>
`;
logs.appendChild(div);
logs.scrollTop = logs.scrollHeight;
}
function mostrarRedes() {
//agregarMensaje("📱 ¡Seguinos en nuestras redes!");
const logs = document.getElementById('chat-logs');
const div = document.createElement("div");
div.className = "chat-links";
div.innerHTML = `
<a href="https://www.instagram.com/lapecosa.rotiseria" target="_blank" class="chat-link-btn chat-link-ig"><i class="fa-brands fa-instagram"></i> Instagram</a>
<a href="https://mail.google.com/mail/?view=cm&fs=1&to=lapecosaparana@gmail.com" target="_blank" class="chat-link-btn chat-link-mail"><i class="fa-solid fa-envelope"></i> Enviar correo</a>
`;
logs.appendChild(div);
logs.scrollTop = logs.scrollHeight;
}
function agregarMensaje(texto) {
const logs = document.getElementById('chat-logs');
const div = document.createElement("div");
div.className = "chat-msg";
div.innerHTML = `<div class="cm-msg-text">${texto}</div>`;
logs.appendChild(div);
logs.scrollTop = logs.scrollHeight;
}
function talkToHuman() {
window.open("https://wa.me/543434231400?text=Hola! Necesito ayuda con un pedido", "_blank");
}
/* ══════════════════════════════
PROMO FLOTANTE
══════════════════════════════ */
let ultimaPromoId = 0;
let esPrimeraCarga = true;
function observarPromociones() {
fetch('verificar_promo.php')
.then(r => r.json())
.then(data => {
if (data && data.id) {
if (esPrimeraCarga) {
esPrimeraCarga = false;
ultimaPromoId = data.id;
mostrarPromoEnChatbot(data.mensaje, false);
return;
}
if (data.id > ultimaPromoId) {
ultimaPromoId = data.id;
mostrarPromoEnChatbot(data.mensaje, true);
}
}
})
.catch(err => console.error('Error al observar promos:', err));
}
function mostrarPromoEnChatbot(mensaje, forzarApertura) {
const chatLogs = document.getElementById('chat-logs');
const cartelFlotante = document.getElementById('alerta-flotante-promo');
const textoFlotante = document.getElementById('texto-alerta-flotante');
if (chatLogs) {
const div = document.createElement("div");
div.className = "chat-msg chat-promo";
div.innerHTML = `<div class="cm-msg-text">📢 <b>¡MENÚ DEL DÍA!</b><br>${mensaje}</div>`;
chatLogs.appendChild(div);
chatLogs.scrollTop = chatLogs.scrollHeight;
}
if (cartelFlotante && textoFlotante) {
textoFlotante.innerHTML = mensaje;
cartelFlotante.style.display = 'block';
setTimeout(() => {
cartelFlotante.style.opacity = '1';
cartelFlotante.style.transform = 'translateX(0)';
}, 100);
}
}
function cerrarAlertaFlotante() {
const cartel = document.getElementById('alerta-flotante-promo');
if (cartel) {
cartel.style.opacity = '0';
cartel.style.transform = 'translateX(-20px)';
setTimeout(() => { cartel.style.display = 'none'; }, 500);
}
}
observarPromociones();
setInterval(observarPromociones, 10000);