Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
16f68f469d | ||
|
|
25bda934e0 | ||
|
|
b04e28b787 | ||
|
|
7a69e52c1e |
36
admin.php
Normal file
36
admin.php
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
<?php
|
||||||
|
declare(strict_types=1);
|
||||||
|
session_start();
|
||||||
|
require_once __DIR__ . '/includes/store.php';
|
||||||
|
$message = '';
|
||||||
|
if ($_SERVER['REQUEST_METHOD'] === 'POST' && ($_POST['action'] ?? '') === 'approve') {
|
||||||
|
approve_order((int)($_POST['order_id'] ?? 0));
|
||||||
|
$message = 'Pago aprobado correctamente.';
|
||||||
|
}
|
||||||
|
$orders = list_orders();
|
||||||
|
layout_header('Panel admin', 'Panel admin para revisar comprobantes y aprobar pagos de LA BORGUITA.');
|
||||||
|
?>
|
||||||
|
<section class="py-5">
|
||||||
|
<div class="container">
|
||||||
|
<?php if ($message): ?><div class="alert alert-success alert-dismissible fade show" role="alert"><?= h($message) ?><button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Cerrar"></button></div><?php endif; ?>
|
||||||
|
<div class="section-heading"><span class="eyebrow">Admin</span><h1>Pagos y pedidos</h1><p>Primera versión del panel: revisión de comprobantes, estado del pago y total vendido.</p></div>
|
||||||
|
<?php if (!$orders): ?>
|
||||||
|
<div class="empty-state"><h2>Sin pedidos todavía</h2><p>Cuando un cliente suba comprobante aparecerá aquí para aprobarlo.</p><a class="btn btn-dark" href="index.php#catalogo">Crear pedido de prueba</a></div>
|
||||||
|
<?php else: ?>
|
||||||
|
<div class="accordion orders" id="orders">
|
||||||
|
<?php foreach ($orders as $order): $items = json_decode((string)$order['items_json'], true) ?: []; ?>
|
||||||
|
<div class="accordion-item">
|
||||||
|
<h2 class="accordion-header"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#order<?= (int)$order['id'] ?>">#<?= (int)$order['id'] ?> · <?= h($order['customer_name']) ?> · <?= h(money((float)$order['total'])) ?> <span class="status <?= h($order['status']) ?> ms-2"><?= h($order['status']) ?></span></button></h2>
|
||||||
|
<div id="order<?= (int)$order['id'] ?>" class="accordion-collapse collapse" data-bs-parent="#orders"><div class="accordion-body">
|
||||||
|
<div class="row g-3"><div class="col-md-6"><strong>Cliente</strong><p><?= h($order['customer_email']) ?><br><?= h($order['customer_phone']) ?></p></div><div class="col-md-6"><strong>Método</strong><p><?= h($order['payment_method']) ?> · <?= h($order['created_at']) ?></p></div></div>
|
||||||
|
<div class="table-responsive"><table class="table table-sm"><thead><tr><th>Producto</th><th>Cant.</th><th>Subtotal</th></tr></thead><tbody><?php foreach ($items as $item): ?><tr><td><?= h($item['name'] ?? '') ?></td><td><?= (int)($item['qty'] ?? 0) ?></td><td><?= h(money((float)($item['line_total'] ?? 0))) ?></td></tr><?php endforeach; ?></tbody></table></div>
|
||||||
|
<?php if (!empty($order['proof_path'])): ?><a class="btn btn-outline-dark btn-sm" href="<?= h($order['proof_path']) ?>" target="_blank" rel="noopener">Ver comprobante</a><?php endif; ?>
|
||||||
|
<?php if ($order['status'] !== 'approved'): ?><form method="post" class="d-inline"><input type="hidden" name="action" value="approve"><input type="hidden" name="order_id" value="<?= (int)$order['id'] ?>"><button class="btn btn-dark btn-sm" type="submit">Aprobar pago</button></form><?php endif; ?>
|
||||||
|
</div></div>
|
||||||
|
</div>
|
||||||
|
<?php endforeach; ?>
|
||||||
|
</div>
|
||||||
|
<?php endif; ?>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<?php layout_footer(); ?>
|
||||||
@ -1,403 +1,316 @@
|
|||||||
|
:root {
|
||||||
|
--bg: #fff8ec;
|
||||||
|
--surface: #ffffff;
|
||||||
|
--surface-2: #fff1c7;
|
||||||
|
--text: #12311f;
|
||||||
|
--muted: #607064;
|
||||||
|
--border: #f0d29a;
|
||||||
|
--primary: #12843b;
|
||||||
|
--primary-dark: #0c642c;
|
||||||
|
--accent: #f0442e;
|
||||||
|
--accent-2: #ffb703;
|
||||||
|
--accent-3: #00a7e1;
|
||||||
|
--orange: #ff7a00;
|
||||||
|
--danger: #dc2626;
|
||||||
|
--radius: 14px;
|
||||||
|
--shadow: 0 16px 38px rgba(112, 74, 18, .12);
|
||||||
|
}
|
||||||
|
|
||||||
|
* { box-sizing: border-box; }
|
||||||
|
html { scroll-behavior: smooth; }
|
||||||
body {
|
body {
|
||||||
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
|
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||||
background-size: 400% 400%;
|
background: var(--bg);
|
||||||
animation: gradient 15s ease infinite;
|
color: var(--text);
|
||||||
color: #212529;
|
font-size: 15px;
|
||||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
||||||
font-size: 14px;
|
|
||||||
margin: 0;
|
|
||||||
min-height: 100vh;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-wrapper {
|
.site-header {
|
||||||
display: flex;
|
background: rgba(255, 250, 239, .96);
|
||||||
align-items: center;
|
border-top: 5px solid var(--accent-2);
|
||||||
justify-content: center;
|
border-bottom: 1px solid var(--border);
|
||||||
min-height: 100vh;
|
backdrop-filter: blur(10px);
|
||||||
width: 100%;
|
box-shadow: 0 8px 24px rgba(18, 49, 31, .06);
|
||||||
padding: 20px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes gradient {
|
.brand { font-weight: 900; letter-spacing: -.03em; display: flex; align-items: center; gap: .6rem; }
|
||||||
0% {
|
.brand-logo {
|
||||||
background-position: 0% 50%;
|
display: inline-grid;
|
||||||
}
|
place-items: center;
|
||||||
50% {
|
width: 38px;
|
||||||
background-position: 100% 50%;
|
height: 38px;
|
||||||
}
|
border-radius: 12px;
|
||||||
100% {
|
background: #fff;
|
||||||
background-position: 0% 50%;
|
border: 2px solid var(--primary);
|
||||||
}
|
padding: 3px;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 8px 18px rgba(18, 132, 59, .16);
|
||||||
}
|
}
|
||||||
|
.brand-logo img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 8px; }
|
||||||
|
.brand-logo.lg { width: 64px; height: 64px; border-color: var(--accent); box-shadow: 0 12px 24px rgba(240, 68, 46, .18); }
|
||||||
|
.nav-link { font-weight: 700; color: var(--text); }
|
||||||
|
.nav-link:hover { color: var(--primary); }
|
||||||
|
|
||||||
.chat-container {
|
.hero { background: #fff8ec; border-bottom: 1px solid #f7dfae; }
|
||||||
width: 100%;
|
.eyebrow {
|
||||||
max-width: 600px;
|
display: inline-flex;
|
||||||
background: rgba(255, 255, 255, 0.85);
|
align-items: center;
|
||||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
gap: 6px;
|
||||||
border-radius: 20px;
|
text-transform: uppercase;
|
||||||
display: flex;
|
letter-spacing: .12em;
|
||||||
flex-direction: column;
|
font-size: .74rem;
|
||||||
height: 85vh;
|
font-weight: 900;
|
||||||
box-shadow: 0 20px 40px rgba(0,0,0,0.2);
|
color: var(--primary-dark);
|
||||||
backdrop-filter: blur(15px);
|
background: #ffe7a3;
|
||||||
-webkit-backdrop-filter: blur(15px);
|
border: 1px solid #ffd166;
|
||||||
overflow: hidden;
|
border-radius: 999px;
|
||||||
|
padding: 6px 10px;
|
||||||
}
|
}
|
||||||
|
.eyebrow::before { content: "•"; color: var(--accent); font-size: 1.2rem; line-height: 0; }
|
||||||
|
h1, h2, h3 { letter-spacing: -.04em; }
|
||||||
|
.lead { max-width: 680px; }
|
||||||
|
|
||||||
.chat-header {
|
.market-card,
|
||||||
padding: 1.5rem;
|
.surface,
|
||||||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
.product-card,
|
||||||
background: rgba(255, 255, 255, 0.5);
|
.feature,
|
||||||
font-weight: 700;
|
.empty-state,
|
||||||
font-size: 1.1rem;
|
.confirmation {
|
||||||
display: flex;
|
background: var(--surface);
|
||||||
justify-content: space-between;
|
border: 1px solid var(--border);
|
||||||
align-items: center;
|
border-radius: var(--radius);
|
||||||
|
box-shadow: var(--shadow);
|
||||||
}
|
}
|
||||||
|
.market-card { padding: 20px; border-color: #ffc247; }
|
||||||
.chat-messages {
|
.market-top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
|
||||||
flex: 1;
|
.market-top small { display: block; color: var(--muted); }
|
||||||
overflow-y: auto;
|
.scan-box {
|
||||||
padding: 1.5rem;
|
border: 2px dashed var(--primary);
|
||||||
display: flex;
|
border-radius: 12px;
|
||||||
flex-direction: column;
|
min-height: 190px;
|
||||||
gap: 1.25rem;
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
text-align: center;
|
||||||
|
background: #fff4c8;
|
||||||
|
color: var(--text);
|
||||||
|
padding: 18px;
|
||||||
}
|
}
|
||||||
|
.scan-box span { display: block; font-weight: 900; color: var(--accent); }
|
||||||
/* Custom Scrollbar */
|
.scan-box small { display: block; color: var(--muted); max-width: 260px; }
|
||||||
::-webkit-scrollbar {
|
.scan-box.compact { min-height: 140px; margin-bottom: 20px; }
|
||||||
width: 6px;
|
.status-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 12px;
|
||||||
|
border-top: 1px solid var(--border);
|
||||||
|
padding-top: 14px;
|
||||||
|
margin-top: 14px;
|
||||||
|
color: var(--muted);
|
||||||
}
|
}
|
||||||
|
.status-row strong { color: var(--primary-dark); }
|
||||||
|
|
||||||
::-webkit-scrollbar-track {
|
.payment-icons {
|
||||||
background: transparent;
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 8px;
|
||||||
}
|
}
|
||||||
|
.payment-icons.compact { margin-top: 8px; }
|
||||||
::-webkit-scrollbar-thumb {
|
.payment-card-icon {
|
||||||
background: rgba(255, 255, 255, 0.3);
|
min-width: 74px;
|
||||||
border-radius: 10px;
|
height: 34px;
|
||||||
|
border-radius: 9px;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 0 10px;
|
||||||
|
font-size: .78rem;
|
||||||
|
font-weight: 900;
|
||||||
|
letter-spacing: .03em;
|
||||||
|
border: 1px solid rgba(18, 49, 31, .14);
|
||||||
|
box-shadow: 0 8px 16px rgba(18, 49, 31, .08);
|
||||||
}
|
}
|
||||||
|
.payment-card-icon.visa {
|
||||||
::-webkit-scrollbar-thumb:hover {
|
background: linear-gradient(135deg, #1434cb 0%, #1a4cff 100%);
|
||||||
background: rgba(255, 255, 255, 0.5);
|
color: #fff;
|
||||||
|
font-style: italic;
|
||||||
|
letter-spacing: .1em;
|
||||||
}
|
}
|
||||||
|
.payment-card-icon.mastercard {
|
||||||
.message {
|
position: relative;
|
||||||
max-width: 85%;
|
justify-content: flex-end;
|
||||||
padding: 0.85rem 1.1rem;
|
min-width: 112px;
|
||||||
border-radius: 16px;
|
padding-left: 42px;
|
||||||
line-height: 1.5;
|
background: #fff;
|
||||||
font-size: 0.95rem;
|
color: #231f20;
|
||||||
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
|
|
||||||
animation: fadeIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
||||||
}
|
}
|
||||||
|
.payment-card-icon.mastercard::before,
|
||||||
@keyframes fadeIn {
|
.payment-card-icon.mastercard::after {
|
||||||
from { opacity: 0; transform: translateY(20px) scale(0.95); }
|
content: "";
|
||||||
to { opacity: 1; transform: translateY(0) scale(1); }
|
position: absolute;
|
||||||
|
top: 8px;
|
||||||
|
width: 19px;
|
||||||
|
height: 19px;
|
||||||
|
border-radius: 999px;
|
||||||
}
|
}
|
||||||
|
.payment-card-icon.mastercard::before { left: 12px; background: rgba(235, 0, 27, .9); }
|
||||||
|
.payment-card-icon.mastercard::after { left: 25px; background: rgba(247, 158, 27, .9); mix-blend-mode: multiply; }
|
||||||
|
|
||||||
.message.visitor {
|
.section-heading { margin-bottom: 22px; max-width: 760px; }
|
||||||
align-self: flex-end;
|
.section-heading p { color: var(--muted); margin: 0; }
|
||||||
background: linear-gradient(135deg, #212529 0%, #343a40 100%);
|
.product-card { overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; }
|
||||||
color: #fff;
|
.product-card:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(112, 74, 18, .18); }
|
||||||
border-bottom-right-radius: 4px;
|
.product-visual {
|
||||||
|
height: 152px;
|
||||||
|
background: var(--primary);
|
||||||
|
color: #fff;
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
border-bottom: 6px solid var(--accent-2);
|
||||||
}
|
}
|
||||||
|
.product-visual span { font-size: 2.4rem; font-weight: 900; letter-spacing: -.08em; text-shadow: 0 3px rgba(0,0,0,.12); }
|
||||||
|
.product-visual.detail { height: 420px; border-radius: var(--radius); box-shadow: var(--shadow); }
|
||||||
|
.row.g-3 > [class*="col-"]:nth-child(3n+1) .product-visual { background: var(--primary); }
|
||||||
|
.row.g-3 > [class*="col-"]:nth-child(3n+2) .product-visual { background: var(--orange); }
|
||||||
|
.row.g-3 > [class*="col-"]:nth-child(3n+3) .product-visual { background: var(--accent-3); }
|
||||||
|
.product-body { padding: 18px; }
|
||||||
|
.product-body h3 { font-size: 1.16rem; margin: 14px 0 8px; }
|
||||||
|
.product-body p { color: var(--muted); min-height: 68px; }
|
||||||
|
.badge.subtle { background: #fff0b8; color: #7a4b00; border: 1px solid #ffd166; }
|
||||||
|
.stock { font-size: .86rem; color: var(--primary-dark); font-weight: 800; }
|
||||||
|
.price { font-weight: 900; font-size: 1.25rem; color: var(--accent); }
|
||||||
|
.price.big { font-size: 2rem; }
|
||||||
|
.qty { max-width: 84px; }
|
||||||
|
|
||||||
.message.bot {
|
.feature {
|
||||||
align-self: flex-start;
|
padding: 18px;
|
||||||
background: #ffffff;
|
display: flex;
|
||||||
color: #212529;
|
flex-direction: column;
|
||||||
border-bottom-left-radius: 4px;
|
gap: 4px;
|
||||||
|
min-height: 112px;
|
||||||
|
border-top: 6px solid var(--primary);
|
||||||
}
|
}
|
||||||
|
.row.g-3 > [class*="col-"]:nth-child(2) .feature { border-top-color: var(--accent); }
|
||||||
|
.row.g-3 > [class*="col-"]:nth-child(3) .feature { border-top-color: var(--accent-2); }
|
||||||
|
.feature strong { color: var(--text); }
|
||||||
|
.feature span { color: var(--muted); }
|
||||||
|
.footer { border-top: 1px solid var(--border); padding: 24px 0; color: var(--muted); font-size: .9rem; background: #fff3cf; }
|
||||||
|
|
||||||
.chat-input-area {
|
.whatsapp-float {
|
||||||
padding: 1.25rem;
|
position: fixed;
|
||||||
background: rgba(255, 255, 255, 0.5);
|
right: 18px;
|
||||||
border-top: 1px solid rgba(0, 0, 0, 0.05);
|
bottom: 18px;
|
||||||
|
z-index: 20;
|
||||||
|
width: 56px;
|
||||||
|
height: 56px;
|
||||||
|
border-radius: 16px;
|
||||||
|
background: #19a354;
|
||||||
|
color: #fff;
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: 900;
|
||||||
|
box-shadow: 0 14px 28px rgba(25, 163, 84, .28);
|
||||||
}
|
}
|
||||||
|
.whatsapp-float:hover { background: #0f8a43; color: #fff; transform: translateY(-2px); }
|
||||||
|
|
||||||
.chat-input-area form {
|
.cart-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
|
||||||
display: flex;
|
|
||||||
gap: 0.75rem;
|
.checkout-panel {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 18px;
|
||||||
|
padding: 20px;
|
||||||
|
border-color: #ffc247;
|
||||||
}
|
}
|
||||||
|
.checkout-panel h2 {
|
||||||
.chat-input-area input {
|
margin: 10px 0 6px;
|
||||||
flex: 1;
|
font-size: 1.35rem;
|
||||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
||||||
border-radius: 12px;
|
|
||||||
padding: 0.75rem 1rem;
|
|
||||||
outline: none;
|
|
||||||
background: rgba(255, 255, 255, 0.9);
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
}
|
||||||
|
.checkout-panel p {
|
||||||
.chat-input-area input:focus {
|
margin: 0;
|
||||||
border-color: #23a6d5;
|
color: var(--muted);
|
||||||
box-shadow: 0 0 0 3px rgba(35, 166, 213, 0.2);
|
|
||||||
}
|
}
|
||||||
|
.checkout-panel-actions {
|
||||||
.chat-input-area button {
|
display: flex;
|
||||||
background: #212529;
|
align-items: center;
|
||||||
color: #fff;
|
justify-content: flex-end;
|
||||||
border: none;
|
gap: 12px;
|
||||||
padding: 0.75rem 1.5rem;
|
flex-wrap: wrap;
|
||||||
border-radius: 12px;
|
min-width: min(100%, 360px);
|
||||||
cursor: pointer;
|
|
||||||
font-weight: 600;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
}
|
||||||
|
.accepted-cards {
|
||||||
.chat-input-area button:hover {
|
border: 1px solid var(--border);
|
||||||
background: #000;
|
border-radius: 12px;
|
||||||
transform: translateY(-2px);
|
padding: 12px;
|
||||||
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
|
margin-bottom: 18px;
|
||||||
|
background: #fffaf0;
|
||||||
}
|
}
|
||||||
|
.accepted-cards > span {
|
||||||
/* Background Animations */
|
display: block;
|
||||||
.bg-animations {
|
color: var(--muted);
|
||||||
position: fixed;
|
font-size: .86rem;
|
||||||
top: 0;
|
font-weight: 800;
|
||||||
left: 0;
|
margin-bottom: 8px;
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
z-index: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
}
|
||||||
|
.total, .summary-total { font-size: 1.1rem; font-weight: 900; }
|
||||||
|
.form-panel, .summary { padding: 20px; }
|
||||||
|
.summary h2 { font-size: 1.25rem; }
|
||||||
|
.summary-line, .summary-total { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--border); padding: 12px 0; }
|
||||||
|
.summary-total { border-bottom: 1px solid var(--border); color: var(--accent); }
|
||||||
|
.empty-state, .confirmation { padding: 30px; text-align: center; }
|
||||||
|
.confirmation { max-width: 760px; margin: auto; }
|
||||||
|
.back-link { color: var(--primary-dark); font-weight: 800; text-decoration: none; }
|
||||||
|
.checkout-strip { max-width: 420px; }
|
||||||
|
.status { font-size: .72rem; border-radius: 999px; padding: 3px 8px; background: #fff0b8; color: #7a4b00; border: 1px solid #ffd166; }
|
||||||
|
.status.approved { background: #dcfce7; color: #166534; border-color: #86efac; }
|
||||||
|
|
||||||
.blob {
|
.tech-loader { position: fixed; inset: 0; background: #fff8ec; z-index: 9999; display: grid; place-items: center; transition: opacity .28s ease, visibility .28s ease; }
|
||||||
position: absolute;
|
.tech-loader.is-hidden { opacity: 0; visibility: hidden; }
|
||||||
width: 500px;
|
.loader-card { width: min(300px, 90vw); background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 22px; text-align: center; box-shadow: var(--shadow); }
|
||||||
height: 500px;
|
.loader-mark { width: 58px; height: 58px; border-radius: 16px; background: #fff; border: 2px solid var(--accent); display: grid; place-items: center; margin: 0 auto 14px; padding: 4px; box-shadow: 0 10px 20px rgba(240, 68, 46, .14); overflow: hidden; }
|
||||||
background: rgba(255, 255, 255, 0.2);
|
.loader-mark img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 10px; }
|
||||||
border-radius: 50%;
|
.loader-line { height: 4px; background: #ffe4a8; overflow: hidden; border-radius: 99px; }
|
||||||
filter: blur(80px);
|
.loader-line:before { content: ""; display: block; width: 40%; height: 100%; background: var(--primary); animation: loadline 1s ease-in-out infinite; }
|
||||||
animation: move 20s infinite alternate cubic-bezier(0.45, 0, 0.55, 1);
|
.loader-card p { margin: 12px 0 0; color: var(--muted); font-size: .9rem; }
|
||||||
|
@keyframes loadline { 0% { transform: translateX(-110%); } 100% { transform: translateX(260%); } }
|
||||||
|
|
||||||
|
.btn { border-radius: 10px; font-weight: 800; }
|
||||||
|
.btn-dark {
|
||||||
|
--bs-btn-bg: var(--primary);
|
||||||
|
--bs-btn-border-color: var(--primary);
|
||||||
|
--bs-btn-hover-bg: var(--primary-dark);
|
||||||
|
--bs-btn-hover-border-color: var(--primary-dark);
|
||||||
|
--bs-btn-active-bg: var(--primary-dark);
|
||||||
|
--bs-btn-active-border-color: var(--primary-dark);
|
||||||
}
|
}
|
||||||
|
.btn-outline-dark {
|
||||||
.blob-1 {
|
--bs-btn-color: var(--primary-dark);
|
||||||
top: -10%;
|
--bs-btn-border-color: var(--primary);
|
||||||
left: -10%;
|
--bs-btn-hover-bg: var(--primary);
|
||||||
background: rgba(238, 119, 82, 0.4);
|
--bs-btn-hover-border-color: var(--primary);
|
||||||
|
--bs-btn-hover-color: #fff;
|
||||||
}
|
}
|
||||||
|
.btn-outline-secondary {
|
||||||
.blob-2 {
|
--bs-btn-color: #7a4b00;
|
||||||
bottom: -10%;
|
--bs-btn-border-color: #ffb703;
|
||||||
right: -10%;
|
--bs-btn-hover-bg: #ffb703;
|
||||||
background: rgba(35, 166, 213, 0.4);
|
--bs-btn-hover-border-color: #ffb703;
|
||||||
animation-delay: -7s;
|
--bs-btn-hover-color: #12311f;
|
||||||
width: 600px;
|
|
||||||
height: 600px;
|
|
||||||
}
|
}
|
||||||
|
.alert-success { background: #dcfce7; border-color: #86efac; color: #14532d; }
|
||||||
|
.text-secondary { color: var(--muted) !important; }
|
||||||
|
.form-control, .form-select { border-radius: 10px; border-color: var(--border); }
|
||||||
|
.form-control:focus, .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 .2rem rgba(18, 132, 59, .14); }
|
||||||
|
|
||||||
.blob-3 {
|
@media (max-width: 767px) {
|
||||||
top: 40%;
|
.display-5 { font-size: 2.1rem; }
|
||||||
left: 30%;
|
.product-visual.detail { height: 260px; }
|
||||||
background: rgba(231, 60, 126, 0.3);
|
.cart-actions { align-items: stretch; }
|
||||||
animation-delay: -14s;
|
.cart-actions .btn { width: 100%; }
|
||||||
width: 450px;
|
.checkout-panel { align-items: stretch; flex-direction: column; }
|
||||||
height: 450px;
|
.checkout-panel-actions { justify-content: stretch; min-width: 100%; }
|
||||||
}
|
.checkout-panel-actions .btn { width: 100%; }
|
||||||
|
.total { width: 100%; }
|
||||||
@keyframes move {
|
|
||||||
0% { transform: translate(0, 0) rotate(0deg) scale(1); }
|
|
||||||
33% { transform: translate(150px, 100px) rotate(120deg) scale(1.1); }
|
|
||||||
66% { transform: translate(-50px, 200px) rotate(240deg) scale(0.9); }
|
|
||||||
100% { transform: translate(0, 0) rotate(360deg) scale(1); }
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-link {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #fff;
|
|
||||||
text-decoration: none;
|
|
||||||
background: rgba(0, 0, 0, 0.2);
|
|
||||||
padding: 0.5rem 1rem;
|
|
||||||
border-radius: 8px;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-link:hover {
|
|
||||||
background: rgba(0, 0, 0, 0.4);
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Admin Styles */
|
|
||||||
.admin-container {
|
|
||||||
max-width: 900px;
|
|
||||||
margin: 3rem auto;
|
|
||||||
padding: 2.5rem;
|
|
||||||
background: rgba(255, 255, 255, 0.85);
|
|
||||||
backdrop-filter: blur(20px);
|
|
||||||
-webkit-backdrop-filter: blur(20px);
|
|
||||||
border-radius: 24px;
|
|
||||||
box-shadow: 0 20px 50px rgba(0,0,0,0.15);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.4);
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.admin-container h1 {
|
|
||||||
margin-top: 0;
|
|
||||||
color: #212529;
|
|
||||||
font-weight: 800;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table {
|
|
||||||
width: 100%;
|
|
||||||
border-collapse: separate;
|
|
||||||
border-spacing: 0 8px;
|
|
||||||
margin-top: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table th {
|
|
||||||
background: transparent;
|
|
||||||
border: none;
|
|
||||||
padding: 1rem;
|
|
||||||
color: #6c757d;
|
|
||||||
font-weight: 600;
|
|
||||||
text-transform: uppercase;
|
|
||||||
font-size: 0.75rem;
|
|
||||||
letter-spacing: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table td {
|
|
||||||
background: #fff;
|
|
||||||
padding: 1rem;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table tr td:first-child { border-radius: 12px 0 0 12px; }
|
|
||||||
.table tr td:last-child { border-radius: 0 12px 12px 0; }
|
|
||||||
|
|
||||||
.form-group {
|
|
||||||
margin-bottom: 1.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group label {
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-control {
|
|
||||||
width: 100%;
|
|
||||||
padding: 0.75rem 1rem;
|
|
||||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
||||||
border-radius: 12px;
|
|
||||||
background: #fff;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-control:focus {
|
|
||||||
outline: none;
|
|
||||||
border-color: #23a6d5;
|
|
||||||
box-shadow: 0 0 0 3px rgba(35, 166, 213, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-container {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-links {
|
|
||||||
display: flex;
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.admin-card {
|
|
||||||
background: rgba(255, 255, 255, 0.6);
|
|
||||||
padding: 2rem;
|
|
||||||
border-radius: 20px;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.5);
|
|
||||||
margin-bottom: 2.5rem;
|
|
||||||
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.admin-card h3 {
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-delete {
|
|
||||||
background: #dc3545;
|
|
||||||
color: white;
|
|
||||||
border: none;
|
|
||||||
padding: 0.25rem 0.5rem;
|
|
||||||
border-radius: 4px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-add {
|
|
||||||
background: #212529;
|
|
||||||
color: white;
|
|
||||||
border: none;
|
|
||||||
padding: 0.5rem 1rem;
|
|
||||||
border-radius: 4px;
|
|
||||||
cursor: pointer;
|
|
||||||
margin-top: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-save {
|
|
||||||
background: #0088cc;
|
|
||||||
color: white;
|
|
||||||
border: none;
|
|
||||||
padding: 0.8rem 1.5rem;
|
|
||||||
border-radius: 12px;
|
|
||||||
cursor: pointer;
|
|
||||||
font-weight: 600;
|
|
||||||
width: 100%;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.webhook-url {
|
|
||||||
font-size: 0.85em;
|
|
||||||
color: #555;
|
|
||||||
margin-top: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.history-table-container {
|
|
||||||
overflow-x: auto;
|
|
||||||
background: rgba(255, 255, 255, 0.4);
|
|
||||||
padding: 1rem;
|
|
||||||
border-radius: 12px;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.history-table {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.history-table-time {
|
|
||||||
width: 15%;
|
|
||||||
white-space: nowrap;
|
|
||||||
font-size: 0.85em;
|
|
||||||
color: #555;
|
|
||||||
}
|
|
||||||
|
|
||||||
.history-table-user {
|
|
||||||
width: 35%;
|
|
||||||
background: rgba(255, 255, 255, 0.3);
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.history-table-ai {
|
|
||||||
width: 50%;
|
|
||||||
background: rgba(255, 255, 255, 0.5);
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.no-messages {
|
|
||||||
text-align: center;
|
|
||||||
color: #777;
|
|
||||||
}
|
}
|
||||||
@ -1,39 +1 @@
|
|||||||
document.addEventListener('DOMContentLoaded', () => {
|
window.addEventListener('load',()=>{setTimeout(()=>{document.getElementById('loader')?.classList.add('is-hidden')},350)});document.querySelectorAll('input[type="number"]').forEach(input=>{input.addEventListener('change',()=>{const min=Number(input.min||0);const max=Number(input.max||999);let value=Number(input.value||min);if(value<min)value=min;if(value>max)value=max;input.value=String(value)})});
|
||||||
const chatForm = document.getElementById('chat-form');
|
|
||||||
const chatInput = document.getElementById('chat-input');
|
|
||||||
const chatMessages = document.getElementById('chat-messages');
|
|
||||||
|
|
||||||
const appendMessage = (text, sender) => {
|
|
||||||
const msgDiv = document.createElement('div');
|
|
||||||
msgDiv.classList.add('message', sender);
|
|
||||||
msgDiv.textContent = text;
|
|
||||||
chatMessages.appendChild(msgDiv);
|
|
||||||
chatMessages.scrollTop = chatMessages.scrollHeight;
|
|
||||||
};
|
|
||||||
|
|
||||||
chatForm.addEventListener('submit', async (e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
const message = chatInput.value.trim();
|
|
||||||
if (!message) return;
|
|
||||||
|
|
||||||
appendMessage(message, 'visitor');
|
|
||||||
chatInput.value = '';
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response = await fetch('api/chat.php', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: { 'Content-Type': 'application/json' },
|
|
||||||
body: JSON.stringify({ message })
|
|
||||||
});
|
|
||||||
const data = await response.json();
|
|
||||||
|
|
||||||
// Artificial delay for realism
|
|
||||||
setTimeout(() => {
|
|
||||||
appendMessage(data.reply, 'bot');
|
|
||||||
}, 500);
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error:', error);
|
|
||||||
appendMessage("Sorry, something went wrong. Please try again.", 'bot');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|||||||
BIN
assets/pasted-20260630-162052-2e0489d8.png
Normal file
BIN
assets/pasted-20260630-162052-2e0489d8.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
51
cart.php
Normal file
51
cart.php
Normal file
@ -0,0 +1,51 @@
|
|||||||
|
<?php
|
||||||
|
declare(strict_types=1);
|
||||||
|
session_start();
|
||||||
|
require_once __DIR__ . '/includes/store.php';
|
||||||
|
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
|
||||||
|
if (($_POST['action'] ?? '') === 'clear') { $_SESSION['cart'] = []; }
|
||||||
|
if (($_POST['action'] ?? '') === 'update') {
|
||||||
|
foreach (($_POST['qty'] ?? []) as $id => $qty) {
|
||||||
|
$product = get_product((string)$id);
|
||||||
|
if ($product) {
|
||||||
|
$qty = max(0, min((int)$product['stock'], (int)$qty));
|
||||||
|
if ($qty === 0) { unset($_SESSION['cart'][$id]); } else { $_SESSION['cart'][$id] = $qty; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
header('Location: cart.php'); exit;
|
||||||
|
}
|
||||||
|
$items = cart_items();
|
||||||
|
$addedProduct = isset($_GET['added']) ? get_product((string)$_GET['added']) : null;
|
||||||
|
layout_header('Carrito', 'Carrito de compra LA BORGUITA con precios en dólares.');
|
||||||
|
?>
|
||||||
|
<section class="py-5">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-heading"><span class="eyebrow">Carrito</span><h1>Revisa tu compra</h1><p>Ajusta cantidades antes de subir el comprobante de pago.</p></div>
|
||||||
|
<?php if ($addedProduct): ?><div class="alert alert-success alert-dismissible fade show" role="alert"><strong><?= h($addedProduct['name']) ?></strong> se agregó al carrito. Ya puedes continuar al pago o seguir comprando.<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Cerrar"></button></div><?php endif; ?>
|
||||||
|
<?php if (!$items): ?>
|
||||||
|
<div class="empty-state"><h2>Tu carrito está vacío</h2><p>Agrega productos del catálogo para iniciar un pedido.</p><a class="btn btn-dark" href="index.php#catalogo">Ir al catálogo</a></div>
|
||||||
|
<?php else: ?>
|
||||||
|
<form method="post">
|
||||||
|
<input type="hidden" name="action" value="update">
|
||||||
|
<div class="table-responsive surface"><table class="table align-middle mb-0"><thead><tr><th>Producto</th><th>Precio</th><th>Cantidad</th><th>Total</th></tr></thead><tbody>
|
||||||
|
<?php foreach ($items as $item): ?><tr><td><strong><?= h($item['name']) ?></strong><br><small class="text-secondary">Stock <?= (int)$item['stock'] ?></small></td><td><?= h(money((float)$item['price'])) ?></td><td><input class="form-control qty" type="number" name="qty[<?= h($item['id']) ?>]" value="<?= (int)$item['qty'] ?>" min="0" max="<?= (int)$item['stock'] ?>"></td><td><?= h(money((float)$item['line_total'])) ?></td></tr><?php endforeach; ?>
|
||||||
|
</tbody></table></div>
|
||||||
|
<div class="cart-actions"><button class="btn btn-outline-dark" type="submit">Actualizar cantidades</button><button class="btn btn-outline-secondary" type="submit" name="action" value="clear">Vaciar carrito</button><a class="btn btn-outline-dark" href="index.php#catalogo">Seguir comprando</a></div>
|
||||||
|
</form>
|
||||||
|
<div class="checkout-panel surface mt-3">
|
||||||
|
<div>
|
||||||
|
<span class="eyebrow">Carrito activo</span>
|
||||||
|
<h2>Listo para elegir forma de pago</h2>
|
||||||
|
<p>Tu carrito ya tiene productos. Continúa para seleccionar QR, Visa, Mastercard o transferencia.</p>
|
||||||
|
<?= payment_icons_html('mt-2') ?>
|
||||||
|
</div>
|
||||||
|
<div class="checkout-panel-actions">
|
||||||
|
<div class="total">Total: <?= h(money(cart_total())) ?></div>
|
||||||
|
<a class="btn btn-dark btn-lg" href="checkout.php">Continuar al pago</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<?php endif; ?>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<?php layout_footer(); ?>
|
||||||
100
checkout.php
Normal file
100
checkout.php
Normal file
@ -0,0 +1,100 @@
|
|||||||
|
<?php
|
||||||
|
declare(strict_types=1);
|
||||||
|
session_start();
|
||||||
|
require_once __DIR__ . '/includes/store.php';
|
||||||
|
$items = cart_items();
|
||||||
|
$errors = [];
|
||||||
|
$orderId = null;
|
||||||
|
|
||||||
|
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
|
||||||
|
if (!$items) { $errors[] = 'Tu carrito está vacío.'; }
|
||||||
|
$name = trim((string)($_POST['customer_name'] ?? ''));
|
||||||
|
$email = trim((string)($_POST['customer_email'] ?? ''));
|
||||||
|
$phone = trim((string)($_POST['customer_phone'] ?? ''));
|
||||||
|
$notes = trim((string)($_POST['delivery_notes'] ?? ''));
|
||||||
|
$method = (string)($_POST['payment_method'] ?? 'qr');
|
||||||
|
if ($name === '' || mb_strlen($name) < 2) { $errors[] = 'Escribe tu nombre.'; }
|
||||||
|
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) { $errors[] = 'Escribe un email válido.'; }
|
||||||
|
if ($phone === '' || mb_strlen($phone) < 6) { $errors[] = 'Escribe un teléfono válido.'; }
|
||||||
|
if (!in_array($method, ['qr', 'card', 'transfer'], true)) { $errors[] = 'Selecciona un método de pago.'; }
|
||||||
|
|
||||||
|
$proofPath = null;
|
||||||
|
if (isset($_FILES['proof']) && is_uploaded_file($_FILES['proof']['tmp_name'])) {
|
||||||
|
$max = 8 * 1024 * 1024;
|
||||||
|
$allowed = ['image/jpeg' => 'jpg', 'image/png' => 'png', 'application/pdf' => 'pdf'];
|
||||||
|
$mime = mime_content_type($_FILES['proof']['tmp_name']) ?: '';
|
||||||
|
if ($_FILES['proof']['size'] > $max) { $errors[] = 'El comprobante no puede superar 8 MB.'; }
|
||||||
|
if (!isset($allowed[$mime])) { $errors[] = 'El comprobante debe ser JPG, PNG o PDF.'; }
|
||||||
|
if (!$errors) {
|
||||||
|
$dir = __DIR__ . '/assets/uploads';
|
||||||
|
if (!is_dir($dir)) { mkdir($dir, 0775, true); }
|
||||||
|
$filename = 'proof-' . date('YmdHis') . '-' . bin2hex(random_bytes(4)) . '.' . $allowed[$mime];
|
||||||
|
if (move_uploaded_file($_FILES['proof']['tmp_name'], $dir . '/' . $filename)) {
|
||||||
|
$proofPath = 'assets/uploads/' . $filename;
|
||||||
|
} else { $errors[] = 'No se pudo guardar el comprobante.'; }
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
$errors[] = 'Sube el comprobante para revisión manual.';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!$errors) {
|
||||||
|
$orderId = create_order([
|
||||||
|
'customer_name' => $name,
|
||||||
|
'customer_email' => $email,
|
||||||
|
'customer_phone' => $phone,
|
||||||
|
'delivery_notes' => $notes,
|
||||||
|
'payment_method' => $method,
|
||||||
|
'proof_path' => $proofPath,
|
||||||
|
'items' => $items,
|
||||||
|
'total' => cart_total(),
|
||||||
|
]);
|
||||||
|
$_SESSION['cart'] = [];
|
||||||
|
header('Location: checkout.php?success=' . $orderId);
|
||||||
|
exit;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$successId = isset($_GET['success']) ? (int)$_GET['success'] : 0;
|
||||||
|
$order = $successId ? get_order($successId) : null;
|
||||||
|
$selectedMethod = (string)($_POST['payment_method'] ?? 'qr');
|
||||||
|
layout_header('Checkout', 'Checkout con QR, tarjeta, transferencia y comprobante manual para LA BORGUITA.');
|
||||||
|
?>
|
||||||
|
<section class="py-5">
|
||||||
|
<div class="container">
|
||||||
|
<?php if ($order): ?>
|
||||||
|
<div class="confirmation"><span class="eyebrow">Pedido recibido</span><h1>Pago pendiente de aprobación</h1><p>Tu pedido #<?= (int)$order['id'] ?> fue registrado por <?= h($order['customer_name']) ?>. El admin revisará el comprobante y cambiará el estado a aprobado.</p><a class="btn btn-dark" href="index.php#catalogo">Seguir comprando</a><a class="btn btn-outline-dark" href="admin.php">Ver panel admin</a></div>
|
||||||
|
<?php elseif (!$items): ?>
|
||||||
|
<div class="empty-state"><h1>No hay productos para pagar</h1><p>Agrega productos al carrito para continuar.</p><a class="btn btn-dark" href="index.php#catalogo">Ir al catálogo</a></div>
|
||||||
|
<?php else: ?>
|
||||||
|
<div class="section-heading"><span class="eyebrow">Pago manual</span><h1>Confirma tu pedido</h1><p>Elige QR, tarjeta Visa/Mastercard o transferencia. Por ahora la confirmación es manual con comprobante.</p></div>
|
||||||
|
<?php if ($errors): ?><div class="alert alert-danger"><strong>Revisa:</strong><ul class="mb-0"><?php foreach ($errors as $error): ?><li><?= h($error) ?></li><?php endforeach; ?></ul></div><?php endif; ?>
|
||||||
|
<div class="row g-4">
|
||||||
|
<div class="col-lg-7">
|
||||||
|
<form class="surface form-panel" method="post" enctype="multipart/form-data" novalidate>
|
||||||
|
<div class="row g-3">
|
||||||
|
<div class="col-md-6"><label class="form-label">Nombre</label><input class="form-control" name="customer_name" required value="<?= h((string)($_POST['customer_name'] ?? '')) ?>"></div>
|
||||||
|
<div class="col-md-6"><label class="form-label">Email</label><input class="form-control" type="email" name="customer_email" required value="<?= h((string)($_POST['customer_email'] ?? '')) ?>"></div>
|
||||||
|
<div class="col-md-6"><label class="form-label">WhatsApp / teléfono</label><input class="form-control" name="customer_phone" required value="<?= h((string)($_POST['customer_phone'] ?? '')) ?>"></div>
|
||||||
|
<div class="col-md-6">
|
||||||
|
<label class="form-label">Método</label>
|
||||||
|
<select class="form-select" name="payment_method">
|
||||||
|
<option value="qr" <?= $selectedMethod === 'qr' ? 'selected' : '' ?>>QR de pago</option>
|
||||||
|
<option value="card" <?= $selectedMethod === 'card' ? 'selected' : '' ?>>Visa/Mastercard MX/US</option>
|
||||||
|
<option value="transfer" <?= $selectedMethod === 'transfer' ? 'selected' : '' ?>>Transferencia</option>
|
||||||
|
</select>
|
||||||
|
<?= payment_icons_html('mt-2') ?>
|
||||||
|
</div>
|
||||||
|
<div class="col-12"><label class="form-label">Notas de entrega</label><textarea class="form-control" name="delivery_notes" rows="3"><?= h((string)($_POST['delivery_notes'] ?? '')) ?></textarea></div>
|
||||||
|
<div class="col-12"><label class="form-label">Comprobante de pago</label><input class="form-control" type="file" name="proof" accept="image/png,image/jpeg,application/pdf" required><div class="form-text">JPG, PNG o PDF hasta 8 MB. El admin aprobará manualmente.</div></div>
|
||||||
|
</div>
|
||||||
|
<button class="btn btn-dark btn-lg mt-4" type="submit">Enviar comprobante</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-5">
|
||||||
|
<aside class="surface summary"><div class="scan-box compact"><span>QR de pago</span><small>Coloca el QR real aquí más adelante.</small></div><div class="accepted-cards"><span>Aceptamos tarjetas</span><?= payment_icons_html('compact') ?></div><h2>Resumen</h2><?php foreach ($items as $item): ?><div class="summary-line"><span><?= h($item['name']) ?> × <?= (int)$item['qty'] ?></span><strong><?= h(money((float)$item['line_total'])) ?></strong></div><?php endforeach; ?><div class="summary-total"><span>Total</span><strong><?= h(money(cart_total())) ?></strong></div></aside>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<?php endif; ?>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<?php layout_footer(); ?>
|
||||||
162
includes/store.php
Normal file
162
includes/store.php
Normal file
@ -0,0 +1,162 @@
|
|||||||
|
<?php
|
||||||
|
declare(strict_types=1);
|
||||||
|
|
||||||
|
require_once __DIR__ . '/../db/config.php';
|
||||||
|
|
||||||
|
function h(string $value): string {
|
||||||
|
return htmlspecialchars($value, ENT_QUOTES, 'UTF-8');
|
||||||
|
}
|
||||||
|
|
||||||
|
function store_logo_path(): string {
|
||||||
|
return 'assets/pasted-20260630-162052-2e0489d8.png';
|
||||||
|
}
|
||||||
|
|
||||||
|
function store_products(): array {
|
||||||
|
return [
|
||||||
|
'combo-24' => [
|
||||||
|
'id' => 'combo-24',
|
||||||
|
'name' => 'Combo Mercado 24',
|
||||||
|
'price' => 24.99,
|
||||||
|
'stock' => 18,
|
||||||
|
'category' => 'Supermarket',
|
||||||
|
'description' => 'Selección esencial para compras rápidas: snacks, bebidas y básicos del día.',
|
||||||
|
],
|
||||||
|
'tech-charge' => [
|
||||||
|
'id' => 'tech-charge',
|
||||||
|
'name' => 'Carga Tecnológica',
|
||||||
|
'price' => 39.00,
|
||||||
|
'stock' => 12,
|
||||||
|
'category' => 'Tecnología',
|
||||||
|
'description' => 'Kit tecnológico con cable premium, cargador rápido y soporte compacto.',
|
||||||
|
],
|
||||||
|
'fresh-box' => [
|
||||||
|
'id' => 'fresh-box',
|
||||||
|
'name' => 'Fresh Box Familiar',
|
||||||
|
'price' => 54.50,
|
||||||
|
'stock' => 9,
|
||||||
|
'category' => 'Despensa',
|
||||||
|
'description' => 'Caja familiar con productos de alta rotación para abastecer la semana.',
|
||||||
|
],
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
function get_product(string $id): ?array {
|
||||||
|
$products = store_products();
|
||||||
|
return $products[$id] ?? null;
|
||||||
|
}
|
||||||
|
|
||||||
|
function cart_items(): array {
|
||||||
|
if (session_status() !== PHP_SESSION_ACTIVE) {
|
||||||
|
session_start();
|
||||||
|
}
|
||||||
|
$cart = $_SESSION['cart'] ?? [];
|
||||||
|
$items = [];
|
||||||
|
foreach ($cart as $id => $qty) {
|
||||||
|
$product = get_product((string)$id);
|
||||||
|
$qty = max(1, (int)$qty);
|
||||||
|
if ($product) {
|
||||||
|
$product['qty'] = min($qty, (int)$product['stock']);
|
||||||
|
$product['line_total'] = $product['qty'] * (float)$product['price'];
|
||||||
|
$items[] = $product;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return $items;
|
||||||
|
}
|
||||||
|
|
||||||
|
function cart_total(): float {
|
||||||
|
return array_reduce(cart_items(), fn($sum, $item) => $sum + (float)$item['line_total'], 0.0);
|
||||||
|
}
|
||||||
|
|
||||||
|
function cart_count(): int {
|
||||||
|
return array_reduce(cart_items(), fn($sum, $item) => $sum + (int)$item['qty'], 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
function money(float $amount): string {
|
||||||
|
return '$' . number_format($amount, 2) . ' USD';
|
||||||
|
}
|
||||||
|
|
||||||
|
function payment_icons_html(string $extraClass = ''): string {
|
||||||
|
$class = trim('payment-icons ' . $extraClass);
|
||||||
|
return '<div class="' . h($class) . '" aria-label="Tarjetas aceptadas"><span class="payment-card-icon visa" aria-label="Visa">VISA</span><span class="payment-card-icon mastercard" aria-label="Mastercard">Mastercard</span></div>';
|
||||||
|
}
|
||||||
|
|
||||||
|
function ensure_orders_table(): void {
|
||||||
|
db()->exec("CREATE TABLE IF NOT EXISTS lb_orders (
|
||||||
|
id INT UNSIGNED AUTO_INCREMENT PRIMARY KEY,
|
||||||
|
customer_name VARCHAR(120) NOT NULL,
|
||||||
|
customer_email VARCHAR(180) NOT NULL,
|
||||||
|
customer_phone VARCHAR(40) NOT NULL,
|
||||||
|
delivery_notes TEXT NULL,
|
||||||
|
payment_method VARCHAR(40) NOT NULL,
|
||||||
|
proof_path VARCHAR(255) NULL,
|
||||||
|
items_json JSON NOT NULL,
|
||||||
|
total DECIMAL(10,2) NOT NULL DEFAULT 0,
|
||||||
|
status VARCHAR(30) NOT NULL DEFAULT 'pending_review',
|
||||||
|
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
|
||||||
|
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci");
|
||||||
|
}
|
||||||
|
|
||||||
|
function create_order(array $data): int {
|
||||||
|
ensure_orders_table();
|
||||||
|
$stmt = db()->prepare('INSERT INTO lb_orders (customer_name, customer_email, customer_phone, delivery_notes, payment_method, proof_path, items_json, total, status) VALUES (:name, :email, :phone, :notes, :method, :proof, :items, :total, :status)');
|
||||||
|
$stmt->execute([
|
||||||
|
':name' => $data['customer_name'],
|
||||||
|
':email' => $data['customer_email'],
|
||||||
|
':phone' => $data['customer_phone'],
|
||||||
|
':notes' => $data['delivery_notes'],
|
||||||
|
':method' => $data['payment_method'],
|
||||||
|
':proof' => $data['proof_path'],
|
||||||
|
':items' => json_encode($data['items'], JSON_UNESCAPED_UNICODE),
|
||||||
|
':total' => $data['total'],
|
||||||
|
':status' => 'pending_review',
|
||||||
|
]);
|
||||||
|
return (int)db()->lastInsertId();
|
||||||
|
}
|
||||||
|
|
||||||
|
function list_orders(): array {
|
||||||
|
ensure_orders_table();
|
||||||
|
return db()->query('SELECT * FROM lb_orders ORDER BY created_at DESC, id DESC LIMIT 50')->fetchAll();
|
||||||
|
}
|
||||||
|
|
||||||
|
function get_order(int $id): ?array {
|
||||||
|
ensure_orders_table();
|
||||||
|
$stmt = db()->prepare('SELECT * FROM lb_orders WHERE id = :id LIMIT 1');
|
||||||
|
$stmt->execute([':id' => $id]);
|
||||||
|
$row = $stmt->fetch();
|
||||||
|
return $row ?: null;
|
||||||
|
}
|
||||||
|
|
||||||
|
function approve_order(int $id): void {
|
||||||
|
ensure_orders_table();
|
||||||
|
$stmt = db()->prepare("UPDATE lb_orders SET status = 'approved', updated_at = CURRENT_TIMESTAMP WHERE id = :id");
|
||||||
|
$stmt->execute([':id' => $id]);
|
||||||
|
}
|
||||||
|
|
||||||
|
function layout_header(string $title, string $description = ''): void {
|
||||||
|
$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? $description;
|
||||||
|
$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
|
||||||
|
$cartCount = cart_count();
|
||||||
|
$logoPath = store_logo_path();
|
||||||
|
echo '<!doctype html><html lang="es"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">';
|
||||||
|
echo '<title>' . h($title) . ' | LA BORGUITA</title>';
|
||||||
|
if ($projectDescription) {
|
||||||
|
echo '<meta name="description" content="' . h($projectDescription) . '">';
|
||||||
|
echo '<meta property="og:description" content="' . h($projectDescription) . '">';
|
||||||
|
echo '<meta property="twitter:description" content="' . h($projectDescription) . '">';
|
||||||
|
}
|
||||||
|
if ($projectImageUrl) {
|
||||||
|
echo '<meta property="og:image" content="' . h($projectImageUrl) . '">';
|
||||||
|
echo '<meta property="twitter:image" content="' . h($projectImageUrl) . '">';
|
||||||
|
}
|
||||||
|
echo '<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>';
|
||||||
|
echo '<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">';
|
||||||
|
echo '<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">';
|
||||||
|
echo '<link rel="stylesheet" href="assets/css/custom.css?v=' . time() . '">';
|
||||||
|
echo '</head><body><div id="loader" class="tech-loader"><div class="loader-card"><div class="loader-mark"><img src="' . h($logoPath) . '" alt="Logo LA BORGUITA" width="46" height="46"></div><div class="loader-line"></div><p>Cargando tienda segura…</p></div></div>';
|
||||||
|
echo '<header class="site-header sticky-top"><nav class="navbar navbar-expand-lg"><div class="container"><a class="navbar-brand brand" href="index.php"><span class="brand-logo"><img src="' . h($logoPath) . '" alt="" width="34" height="34"></span><span>LA BORGUITA</span></a><button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav" aria-controls="nav" aria-expanded="false" aria-label="Abrir navegación"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="nav"><ul class="navbar-nav ms-auto align-items-lg-center gap-lg-2"><li class="nav-item"><a class="nav-link" href="index.php#catalogo">Catálogo</a></li><li class="nav-item"><a class="nav-link" href="cart.php">Carrito <span class="badge text-bg-dark">' . $cartCount . '</span></a></li><li class="nav-item"><a class="nav-link" href="admin.php">Admin</a></li><li class="nav-item"><a class="btn btn-sm btn-dark" href="https://wa.me/5351746028" target="_blank" rel="noopener">WhatsApp</a></li></ul></div></div></nav></header><main>';
|
||||||
|
}
|
||||||
|
|
||||||
|
function layout_footer(): void {
|
||||||
|
echo '</main><a class="whatsapp-float" href="https://wa.me/5351746028" target="_blank" rel="noopener" aria-label="Contactar por WhatsApp">WA</a><footer class="footer"><div class="container d-flex flex-column flex-md-row justify-content-between gap-2"><span>© ' . date('Y') . ' LA BORGUITA. Precios en dólares.</span><span>Pago manual con revisión admin · Visa/Mastercard listo para integración MX/US.</span></div></footer><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script><script src="assets/js/main.js?v=' . time() . '"></script></body></html>';
|
||||||
|
}
|
||||||
234
index.php
234
index.php
@ -1,150 +1,96 @@
|
|||||||
<?php
|
<?php
|
||||||
declare(strict_types=1);
|
declare(strict_types=1);
|
||||||
@ini_set('display_errors', '1');
|
session_start();
|
||||||
@error_reporting(E_ALL);
|
require_once __DIR__ . '/includes/store.php';
|
||||||
@date_default_timezone_set('UTC');
|
|
||||||
|
|
||||||
$phpVersion = PHP_VERSION;
|
$notice = '';
|
||||||
$now = date('Y-m-d H:i:s');
|
if ($_SERVER['REQUEST_METHOD'] === 'POST' && ($_POST['action'] ?? '') === 'add') {
|
||||||
|
$id = (string)($_POST['product_id'] ?? '');
|
||||||
|
$qty = max(1, min(20, (int)($_POST['qty'] ?? 1)));
|
||||||
|
$product = get_product($id);
|
||||||
|
if ($product) {
|
||||||
|
$_SESSION['cart'][$id] = min((int)$product['stock'], (int)($_SESSION['cart'][$id] ?? 0) + $qty);
|
||||||
|
$next = (string)($_POST['next'] ?? 'cart');
|
||||||
|
if ($next === 'checkout') {
|
||||||
|
header('Location: checkout.php');
|
||||||
|
exit;
|
||||||
|
}
|
||||||
|
header('Location: cart.php?added=' . rawurlencode($id));
|
||||||
|
exit;
|
||||||
|
}
|
||||||
|
$notice = 'No pudimos agregar el producto. Inténtalo de nuevo.';
|
||||||
|
}
|
||||||
|
|
||||||
|
layout_header('Tienda virtual', 'LA BORGUITA: tienda virtual con catálogo, carrito, QR de pago y confirmación manual.');
|
||||||
|
$products = store_products();
|
||||||
|
$logoPath = store_logo_path();
|
||||||
?>
|
?>
|
||||||
<!doctype html>
|
<section class="hero py-5">
|
||||||
<html lang="en">
|
<div class="container">
|
||||||
<head>
|
<?php if ($notice): ?><div class="alert alert-success alert-dismissible fade show" role="alert"><?= h($notice) ?><button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Cerrar"></button></div><?php endif; ?>
|
||||||
<meta charset="utf-8" />
|
<div class="row align-items-center g-4">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<div class="col-lg-7">
|
||||||
<title>New Style</title>
|
<span class="eyebrow">Super market 24 · USD · Pago manual</span>
|
||||||
<?php
|
<h1 class="display-5 fw-bold mt-3 mb-3">LA BORGUITA vende rápido, confirma pagos y atiende por WhatsApp.</h1>
|
||||||
// Read project preview data from environment
|
<p class="lead text-secondary mb-4">Un MVP de tienda virtual con productos activos, stock visible, carrito, QR de pago reservado y comprobantes para aprobación del admin.</p>
|
||||||
$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? '';
|
<div class="d-flex flex-wrap gap-2">
|
||||||
$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
|
<a class="btn btn-dark btn-lg" href="#catalogo">Comprar ahora</a>
|
||||||
?>
|
<a class="btn btn-outline-dark btn-lg" href="cart.php">Ver carrito</a>
|
||||||
<?php if ($projectDescription): ?>
|
</div>
|
||||||
<!-- Meta description -->
|
</div>
|
||||||
<meta name="description" content='<?= htmlspecialchars($projectDescription) ?>' />
|
<div class="col-lg-5">
|
||||||
<!-- Open Graph meta tags -->
|
<div class="market-card">
|
||||||
<meta property="og:description" content="<?= htmlspecialchars($projectDescription) ?>" />
|
<div class="market-top"><span class="brand-logo lg"><img src="<?= h($logoPath) ?>" alt="" width="64" height="64"></span><div><strong>LA BORGUITA</strong><small>Pagos Visa · Mastercard · Transferencia</small><?= payment_icons_html('compact') ?></div></div>
|
||||||
<!-- Twitter meta tags -->
|
<div class="scan-box"><span>Espacio para QR de pago</span><small>Sube aquí tu QR definitivo desde el editor cuando lo tengas listo.</small></div>
|
||||||
<meta property="twitter:description" content="<?= htmlspecialchars($projectDescription) ?>" />
|
<div class="status-row"><span>Pedidos pendientes</span><strong>Revisión manual</strong></div>
|
||||||
<?php endif; ?>
|
</div>
|
||||||
<?php if ($projectImageUrl): ?>
|
|
||||||
<!-- Open Graph image -->
|
|
||||||
<meta property="og:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
|
|
||||||
<!-- Twitter image -->
|
|
||||||
<meta property="twitter:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
|
|
||||||
<?php endif; ?>
|
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
|
|
||||||
<style>
|
|
||||||
:root {
|
|
||||||
--bg-color-start: #6a11cb;
|
|
||||||
--bg-color-end: #2575fc;
|
|
||||||
--text-color: #ffffff;
|
|
||||||
--card-bg-color: rgba(255, 255, 255, 0.01);
|
|
||||||
--card-border-color: rgba(255, 255, 255, 0.1);
|
|
||||||
}
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
font-family: 'Inter', sans-serif;
|
|
||||||
background: linear-gradient(45deg, var(--bg-color-start), var(--bg-color-end));
|
|
||||||
color: var(--text-color);
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
min-height: 100vh;
|
|
||||||
text-align: center;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
body::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M-10 10L110 10M10 -10L10 110" stroke-width="1" stroke="rgba(255,255,255,0.05)"/></svg>');
|
|
||||||
animation: bg-pan 20s linear infinite;
|
|
||||||
z-index: -1;
|
|
||||||
}
|
|
||||||
@keyframes bg-pan {
|
|
||||||
0% { background-position: 0% 0%; }
|
|
||||||
100% { background-position: 100% 100%; }
|
|
||||||
}
|
|
||||||
main {
|
|
||||||
padding: 2rem;
|
|
||||||
}
|
|
||||||
.card {
|
|
||||||
background: var(--card-bg-color);
|
|
||||||
border: 1px solid var(--card-border-color);
|
|
||||||
border-radius: 16px;
|
|
||||||
padding: 2rem;
|
|
||||||
backdrop-filter: blur(20px);
|
|
||||||
-webkit-backdrop-filter: blur(20px);
|
|
||||||
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
.loader {
|
|
||||||
margin: 1.25rem auto 1.25rem;
|
|
||||||
width: 48px;
|
|
||||||
height: 48px;
|
|
||||||
border: 3px solid rgba(255, 255, 255, 0.25);
|
|
||||||
border-top-color: #fff;
|
|
||||||
border-radius: 50%;
|
|
||||||
animation: spin 1s linear infinite;
|
|
||||||
}
|
|
||||||
@keyframes spin {
|
|
||||||
from { transform: rotate(0deg); }
|
|
||||||
to { transform: rotate(360deg); }
|
|
||||||
}
|
|
||||||
.hint {
|
|
||||||
opacity: 0.9;
|
|
||||||
}
|
|
||||||
.sr-only {
|
|
||||||
position: absolute;
|
|
||||||
width: 1px; height: 1px;
|
|
||||||
padding: 0; margin: -1px;
|
|
||||||
overflow: hidden;
|
|
||||||
clip: rect(0, 0, 0, 0);
|
|
||||||
white-space: nowrap; border: 0;
|
|
||||||
}
|
|
||||||
h1 {
|
|
||||||
font-size: 3rem;
|
|
||||||
font-weight: 700;
|
|
||||||
margin: 0 0 1rem;
|
|
||||||
letter-spacing: -1px;
|
|
||||||
}
|
|
||||||
p {
|
|
||||||
margin: 0.5rem 0;
|
|
||||||
font-size: 1.1rem;
|
|
||||||
}
|
|
||||||
code {
|
|
||||||
background: rgba(0,0,0,0.2);
|
|
||||||
padding: 2px 6px;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
||||||
}
|
|
||||||
footer {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 1rem;
|
|
||||||
font-size: 0.8rem;
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<main>
|
|
||||||
<div class="card">
|
|
||||||
<h1>Analyzing your requirements and generating your website…</h1>
|
|
||||||
<div class="loader" role="status" aria-live="polite" aria-label="Applying initial changes">
|
|
||||||
<span class="sr-only">Loading…</span>
|
|
||||||
</div>
|
</div>
|
||||||
<p class="hint"><?= ($_SERVER['HTTP_HOST'] ?? '') === 'appwizzy.com' ? 'AppWizzy' : 'Flatlogic' ?> AI is collecting your requirements and applying the first changes.</p>
|
|
||||||
<p class="hint">This page will update automatically as the plan is implemented.</p>
|
|
||||||
<p>Runtime: PHP <code><?= htmlspecialchars($phpVersion) ?></code> — UTC <code><?= htmlspecialchars($now) ?></code></p>
|
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</div>
|
||||||
<footer>
|
</section>
|
||||||
Page updated: <?= htmlspecialchars($now) ?> (UTC)
|
|
||||||
</footer>
|
<section class="py-5 border-top" id="catalogo">
|
||||||
</body>
|
<div class="container">
|
||||||
</html>
|
<div class="section-heading">
|
||||||
|
<span class="eyebrow">Catálogo activo</span>
|
||||||
|
<h2>Productos iniciales</h2>
|
||||||
|
<p>Luego el panel admin puede ampliarse para crear nuevos productos, editar precios y controlar almacén.</p>
|
||||||
|
</div>
|
||||||
|
<div class="row g-3">
|
||||||
|
<?php foreach ($products as $product): ?>
|
||||||
|
<div class="col-md-6 col-lg-4">
|
||||||
|
<article class="product-card h-100">
|
||||||
|
<div class="product-visual" aria-hidden="true"><span><?= h(substr($product['name'], 0, 2)) ?></span></div>
|
||||||
|
<div class="product-body">
|
||||||
|
<div class="d-flex justify-content-between gap-2"><span class="badge subtle"><?= h($product['category']) ?></span><span class="stock">Stock <?= (int)$product['stock'] ?></span></div>
|
||||||
|
<h3><?= h($product['name']) ?></h3>
|
||||||
|
<p><?= h($product['description']) ?></p>
|
||||||
|
<div class="price"><?= h(money((float)$product['price'])) ?></div>
|
||||||
|
<form method="post" class="product-actions mt-3">
|
||||||
|
<input type="hidden" name="action" value="add">
|
||||||
|
<input type="hidden" name="product_id" value="<?= h($product['id']) ?>">
|
||||||
|
<div class="d-flex gap-2 align-items-center flex-wrap">
|
||||||
|
<input class="form-control qty" type="number" name="qty" value="1" min="1" max="<?= (int)$product['stock'] ?>" aria-label="Cantidad">
|
||||||
|
<button class="btn btn-dark" type="submit" name="next" value="cart">Agregar</button>
|
||||||
|
<button class="btn btn-outline-dark" type="submit" name="next" value="checkout">Pagar</button>
|
||||||
|
<a class="btn btn-outline-secondary" href="product.php?id=<?= h($product['id']) ?>">Detalle</a>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
<?php endforeach; ?>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="py-5">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row g-3">
|
||||||
|
<div class="col-md-4"><div class="feature"><strong>QR reservado</strong><span>Bloque visual listo para colocar el código real.</span></div></div>
|
||||||
|
<div class="col-md-4"><div class="feature"><strong>Visa/Mastercard</strong><span>Método visible para integrar pasarelas MX/US.</span><?= payment_icons_html('mt-2') ?></div></div>
|
||||||
|
<div class="col-md-4"><div class="feature"><strong>Admin aprueba</strong><span>Los comprobantes quedan pendientes hasta revisión.</span></div></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<?php layout_footer(); ?>
|
||||||
|
|||||||
39
product.php
Normal file
39
product.php
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
<?php
|
||||||
|
declare(strict_types=1);
|
||||||
|
session_start();
|
||||||
|
require_once __DIR__ . '/includes/store.php';
|
||||||
|
$product = get_product((string)($_GET['id'] ?? ''));
|
||||||
|
if (!$product) { http_response_code(404); layout_header('Producto no encontrado'); echo '<section class="py-5"><div class="container"><div class="alert alert-warning">Producto no encontrado.</div><a href="index.php" class="btn btn-dark">Volver</a></div></section>'; layout_footer(); exit; }
|
||||||
|
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
|
||||||
|
$qty = max(1, min((int)$product['stock'], (int)($_POST['qty'] ?? 1)));
|
||||||
|
$_SESSION['cart'][$product['id']] = min((int)$product['stock'], (int)($_SESSION['cart'][$product['id']] ?? 0) + $qty);
|
||||||
|
if (($_POST['next'] ?? 'cart') === 'checkout') {
|
||||||
|
header('Location: checkout.php');
|
||||||
|
exit;
|
||||||
|
}
|
||||||
|
header('Location: cart.php?added=' . rawurlencode((string)$product['id']));
|
||||||
|
exit;
|
||||||
|
}
|
||||||
|
layout_header($product['name'], $product['description']);
|
||||||
|
?>
|
||||||
|
<section class="py-5">
|
||||||
|
<div class="container">
|
||||||
|
<a href="index.php#catalogo" class="back-link">← Volver al catálogo</a>
|
||||||
|
<div class="row g-4 align-items-center mt-2">
|
||||||
|
<div class="col-lg-5"><div class="product-visual detail"><span><?= h(substr($product['name'], 0, 2)) ?></span></div></div>
|
||||||
|
<div class="col-lg-7">
|
||||||
|
<span class="badge subtle"><?= h($product['category']) ?></span>
|
||||||
|
<h1 class="fw-bold mt-3"><?= h($product['name']) ?></h1>
|
||||||
|
<p class="lead text-secondary"><?= h($product['description']) ?></p>
|
||||||
|
<div class="price big"><?= h(money((float)$product['price'])) ?></div>
|
||||||
|
<p class="stock mt-2">Disponible en almacén: <?= (int)$product['stock'] ?> unidades</p>
|
||||||
|
<form method="post" class="d-flex gap-2 mt-4 checkout-strip flex-wrap">
|
||||||
|
<input class="form-control" type="number" name="qty" value="1" min="1" max="<?= (int)$product['stock'] ?>" aria-label="Cantidad">
|
||||||
|
<button class="btn btn-dark btn-lg" type="submit" name="next" value="cart">Agregar al carrito</button>
|
||||||
|
<button class="btn btn-outline-dark btn-lg" type="submit" name="next" value="checkout">Pagar ahora</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<?php layout_footer(); ?>
|
||||||
Loading…
x
Reference in New Issue
Block a user