250 lines
9.2 KiB
PHP
250 lines
9.2 KiB
PHP
<?php
|
|
require_once __DIR__ . '/db/config.php';
|
|
$pdo = db();
|
|
|
|
// Fetch active advertisement images
|
|
$stmt = $pdo->prepare("SELECT * FROM ads_images WHERE is_active = 1 ORDER BY sort_order ASC");
|
|
$stmt->execute();
|
|
$ads = $stmt->fetchAll(PDO::FETCH_ASSOC);
|
|
|
|
// Get current outlet (default to 1 if not specified)
|
|
$outlet_id = isset($_GET['outlet_id']) ? (int)$_GET['outlet_id'] : 1;
|
|
|
|
// Fetch company settings for branding
|
|
$stmt = $pdo->query("SELECT * FROM company_settings LIMIT 1");
|
|
$company = $stmt->fetch(PDO::FETCH_ASSOC);
|
|
$companyName = $company['company_name'] ?? 'Foody';
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Now Serving & Promo - <?= htmlspecialchars($companyName) ?></title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
|
|
<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;800&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--primary-color: #0d6efd;
|
|
--ready-color: #198754;
|
|
--preparing-color: #0dcaf0;
|
|
--bg-dark: #121212;
|
|
--card-bg: #1a1a1a;
|
|
}
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
background-color: var(--bg-dark);
|
|
color: white;
|
|
overflow: hidden;
|
|
height: 100vh;
|
|
width: 100vw;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.main-container {
|
|
display: flex;
|
|
height: 100vh;
|
|
width: 100vw;
|
|
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
}
|
|
.serving-board {
|
|
flex: 0 0 35%;
|
|
background-color: var(--card-bg);
|
|
border-right: 2px solid #333;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 2.5rem;
|
|
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
|
z-index: 20;
|
|
overflow: hidden;
|
|
}
|
|
.promo-slider-container {
|
|
flex: 1;
|
|
position: relative;
|
|
background-color: #000;
|
|
overflow: hidden;
|
|
height: 100vh;
|
|
z-index: 10;
|
|
box-sizing: border-box;
|
|
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
#promoCarousel, .carousel-inner, .carousel-item {
|
|
height: 100% !important;
|
|
width: 100% !important;
|
|
position: relative;
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.promo-image-element {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
background-color: #000;
|
|
}
|
|
|
|
/* Fullscreen Promo View */
|
|
.fullscreen-promo .serving-board {
|
|
flex: 0 0 0% !important;
|
|
width: 0 !important;
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
border: none !important;
|
|
opacity: 0 !important;
|
|
pointer-events: none;
|
|
}
|
|
.fullscreen-promo .promo-slider-container {
|
|
flex: 0 0 100% !important;
|
|
width: 100% !important;
|
|
}
|
|
|
|
/* Order Status Styling */
|
|
.board-header { margin-bottom: 2.5rem; }
|
|
.board-title { font-weight: 800; font-size: 2.5rem; margin-bottom: 0.5rem; }
|
|
.section-title { font-weight: 700; font-size: 1.5rem; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 10px; }
|
|
.order-grid { display: flex; flex-wrap: wrap; gap: 12px; }
|
|
.order-number {
|
|
font-size: 2.5rem;
|
|
font-weight: 800;
|
|
padding: 12px 24px;
|
|
border-radius: 12px;
|
|
min-width: 100px;
|
|
text-align: center;
|
|
box-shadow: 0 4px 15px rgba(0,0,0,0.3);
|
|
animation: fadeIn 0.3s ease-out;
|
|
}
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: scale(0.9); }
|
|
to { opacity: 1; transform: scale(1); }
|
|
}
|
|
.empty-msg { font-style: italic; color: #555; }
|
|
</style>
|
|
</head>
|
|
<body class="split-view">
|
|
|
|
<div class="main-container" id="main-view">
|
|
<div class="serving-board">
|
|
<div class="board-header">
|
|
<h1 class="board-title">Order Status</h1>
|
|
<p class="text-muted"><?= htmlspecialchars($companyName) ?> • Outlet #<?= $outlet_id ?></p>
|
|
</div>
|
|
|
|
<div class="mb-5">
|
|
<h2 class="section-title text-success"><i class="bi bi-check-circle-fill"></i> Ready</h2>
|
|
<div id="ready-orders" class="order-grid"><div class="empty-msg">Waiting for orders...</div></div>
|
|
</div>
|
|
|
|
<div>
|
|
<h2 class="section-title text-info"><i class="bi bi-clock-history"></i> Preparing</h2>
|
|
<div id="preparing-orders" class="order-grid"><div class="empty-msg">No active orders</div></div>
|
|
</div>
|
|
|
|
<div class="mt-auto pt-4 border-top border-dark text-center text-muted">
|
|
<h3 id="clock" class="mb-0 fw-bold"></h3>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="promo-slider-container">
|
|
<?php if (!empty($ads)): ?>
|
|
<div id="promoCarousel" class="carousel slide" data-bs-ride="carousel" data-bs-interval="8000">
|
|
<div class="carousel-inner">
|
|
<?php foreach ($ads as $index => $ad): ?>
|
|
<div class="carousel-item <?= $index === 0 ? 'active' : '' ?>">
|
|
<img src="<?= htmlspecialchars($ad['image_path']) ?>"
|
|
class="promo-image-element"
|
|
alt="Promotion">
|
|
</div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
</div>
|
|
<?php else: ?>
|
|
<div class="h-100 d-flex align-items-center justify-content-center text-muted">
|
|
<div class="text-center">
|
|
<i class="bi bi-image-fill display-1 opacity-25"></i>
|
|
<p class="mt-3">No active promotions</p>
|
|
</div>
|
|
</div>
|
|
<?php endif; ?>
|
|
</div>
|
|
</div>
|
|
|
|
<button id="toggle-view" class="btn btn-dark btn-lg rounded-circle shadow" style="position:fixed; bottom:30px; right:30px; z-index:10000; opacity:0.6; width:60px; height:60px; display:flex; align-items:center; justify-content:center;">
|
|
<i class="bi bi-arrows-fullscreen"></i>
|
|
</button>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Initialize Carousel
|
|
const el = document.querySelector('#promoCarousel');
|
|
if (el) {
|
|
new bootstrap.Carousel(el, {
|
|
interval: 8000,
|
|
ride: 'carousel',
|
|
pause: false
|
|
});
|
|
}
|
|
|
|
// Toggle View Functionality
|
|
const toggleBtn = document.getElementById('toggle-view');
|
|
const mainView = document.getElementById('main-view');
|
|
const toggleIcon = toggleBtn.querySelector('i');
|
|
|
|
toggleBtn.addEventListener('click', () => {
|
|
document.body.classList.toggle('fullscreen-promo');
|
|
if (document.body.classList.contains('fullscreen-promo')) {
|
|
toggleIcon.className = 'bi bi-fullscreen-exit';
|
|
} else {
|
|
toggleIcon.className = 'bi bi-arrows-fullscreen';
|
|
}
|
|
});
|
|
|
|
// Fetch Orders Logic
|
|
async function fetchOrders() {
|
|
try {
|
|
const res = await fetch('api/kitchen.php?outlet_id=<?= $outlet_id ?>');
|
|
if (!res.ok) throw new Error('API Error');
|
|
const orders = await res.json();
|
|
|
|
const rContainer = document.getElementById('ready-orders');
|
|
const pContainer = document.getElementById('preparing-orders');
|
|
|
|
const ready = orders.filter(o => o.status === 'ready');
|
|
const prep = orders.filter(o => o.status === 'preparing');
|
|
|
|
rContainer.innerHTML = ready.length ? ready.map(o =>
|
|
`<div class="order-number" style="background:var(--ready-color); color:white;">${o.id}</div>`
|
|
).join('') : '<div class="empty-msg">Waiting for orders...</div>';
|
|
|
|
pContainer.innerHTML = prep.length ? prep.map(o =>
|
|
`<div class="order-number" style="background:var(--preparing-color); color:black;">${o.id}</div>`
|
|
).join('') : '<div class="empty-msg">No active orders</div>';
|
|
|
|
} catch(e) {
|
|
console.error('Fetch Orders Failed:', e);
|
|
}
|
|
}
|
|
|
|
setInterval(fetchOrders, 5000);
|
|
fetchOrders();
|
|
|
|
// Clock Logic
|
|
setInterval(() => {
|
|
const clock = document.getElementById('clock');
|
|
if (clock) {
|
|
clock.textContent = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' });
|
|
}
|
|
}, 1000);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|