Autosave: 20260223-072710

admin/includes/header.php

@@ -230,7 +230,7 @@ function getGroupToggleClass($pages) {
             </li>
         </ul>
 
-        <?php $posGroup = ['orders.php', 'ads.php']; ?>
+        <?php $posGroup = ['orders.php', 'ads.php', 'ad_edit.php']; ?>
         <div class="nav-group">
             <a class="sidebar-heading d-flex justify-content-between align-items-center text-decoration-none <?= getGroupToggleClass($posGroup) ?>" 
                data-bs-toggle="collapse" href="#collapsePos" role="button" aria-expanded="<?= isGroupExpanded($posGroup) ?>" aria-controls="collapsePos">
@@ -254,6 +254,11 @@ function getGroupToggleClass($pages) {
                             <i class="bi bi-fire me-2"></i> Kitchen View
                         </a>
                     </li>
+                    <li class="nav-item">
+                        <a class="nav-link <?= isActive('ads.php') || isActive('ad_edit.php') ? 'active' : '' ?>" href="ads.php">
+                            <i class="bi bi-megaphone me-2"></i> Ads Management
+                        </a>
+                    </li>
                 </ul>
             </div>
         </div>

ads.php

@@ -9,6 +9,7 @@ $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;
+$debug = isset($_GET['debug']) ? true : false;
 
 // Fetch company settings for branding
 $stmt = $pdo->query("SELECT * FROM company_settings LIMIT 1");
@@ -38,13 +39,19 @@ $companyName = $company['company_name'] ?? 'Foody';
             background-color: var(--bg-dark); 
             color: white;
             overflow: hidden;
-            height: 100vh;
+            height: 100vh !important;
+            width: 100vw !important;
             margin: 0;
+            padding: 0;
         }
         .main-container {
             display: flex;
-            height: 100vh;
-            width: 100vw;
+            height: 100vh !important;
+            width: 100vw !important;
+            transition: all 0.5s ease;
+            position: relative;
+            border: <?= $debug ? '10px solid orange' : 'none' ?>;
+            box-sizing: border-box;
         }
         .serving-board {
             flex: 0 0 35%;
@@ -53,250 +60,277 @@ $companyName = $company['company_name'] ?? 'Foody';
             display: flex;
             flex-direction: column;
             padding: 2rem;
+            transition: all 0.5s ease;
+            z-index: 20;
+            overflow: hidden;
         }
         .ads-slider {
             flex: 1;
             position: relative;
-            background-color: black;
-        }
-        .board-header {
-            text-align: center;
-            margin-bottom: 2rem;
-            border-bottom: 1px solid #333;
-            padding-bottom: 1rem;
-        }
-        .board-title {
-            font-size: 2.5rem;
-            font-weight: 800;
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin: 0;
-        }
-        .section-title {
-            font-size: 1.5rem;
-            font-weight: 700;
-            text-transform: uppercase;
-            margin-bottom: 1rem;
-            display: flex;
-            align-items: center;
-            gap: 10px;
-        }
-        .order-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
-            gap: 15px;
-            margin-bottom: 3rem;
-        }
-        .order-number {
-            font-size: 2.5rem;
-            font-weight: 800;
-            padding: 1rem 0.5rem;
-            border-radius: 10px;
-            text-align: center;
-            line-height: 1;
-        }
-        .order-ready {
-            background-color: var(--ready-color);
-            color: white;
-            animation: pulse 2s infinite;
-        }
-        .order-preparing {
-            background-color: #333;
-            color: #aaa;
-            border: 1px solid #444;
-        }
-        @keyframes pulse {
-            0% { transform: scale(1); }
-            50% { transform: scale(1.05); }
-            100% { transform: scale(1); }
-        }
-        .carousel-item img {
-            width: 100%;
-            height: 100vh;
-            object-fit: cover;
-        }
-        .carousel-caption {
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 20px;
-            padding: 1.5rem 2rem;
-            bottom: 5%;
-            left: 50%;
-            transform: translateX(-50%);
-            width: fit-content;
-            max-width: 80%;
-        }
-        .caption-title {
-            font-size: 2.5rem;
-            font-weight: 800;
-            margin: 0;
+            background-color: <?= $debug ? '#222' : '#000' ?>;
+            overflow: hidden;
+            height: 100vh !important;
+            z-index: 10;
+            border: <?= $debug ? '10px solid lime' : 'none' ?>;
+            box-sizing: border-box;
         }
         
-        /* Toggle View Button */
-        #toggle-view {
-            position: fixed;
-            bottom: 20px;
-            right: 20px;
-            z-index: 1000;
-            opacity: 0.3;
-            transition: opacity 0.3s;
+        #adCarousel, .carousel-inner {
+            height: 100% !important;
+            width: 100% !important;
+            position: relative;
+            margin: 0 !important;
+            padding: 0 !important;
+        }
+        
+        .carousel-item {
+            height: 100% !important;
+            width: 100% !important;
+            background-color: <?= $debug ? '#440044' : '#000' ?>;
+        }
+
+        .carousel-item.active {
+            display: block !important; /* Ensure active item is visible */
+        }
+        
+        .carousel-item img {
+            display: block !important;
+            width: 100% !important;
+            height: 100% !important;
+            max-width: none !important;
+            max-height: none !important;
+            object-fit: contain !important;
+            opacity: 1 !important;
+            visibility: visible !important;
+            border: <?= $debug ? '8px solid cyan' : 'none' ?>;
+            box-sizing: border-box;
+            background-color: <?= $debug ? 'deeppink' : 'transparent' ?>;
+            position: relative;
+            z-index: 50;
         }
-        #toggle-view:hover { opacity: 1; }
         
         /* Fullscreen Ads Class */
-        .fullscreen-ads .serving-board { display: none; }
-        .fullscreen-ads .ads-slider { flex: 0 0 100%; }
+        .fullscreen-ads .serving-board { 
+            flex: 0 0 0% !important;
+            width: 0 !important;
+            padding: 0 !important;
+            margin: 0 !important;
+            border: none !important;
+            overflow: hidden !important;
+            opacity: 0 !important;
+        }
+        .fullscreen-ads .ads-slider { flex: 0 0 100% !important; width: 100% !important; }
 
-        .empty-msg {
-            font-size: 1.2rem;
-            color: #555;
-            font-style: italic;
+        /* Debug styling */
+        .debug-panel {
+            position: absolute;
+            top: 20px;
+            left: 20px;
+            background: rgba(255,0,0,0.95);
+            color: white;
+            padding: 15px;
+            font-family: monospace;
+            font-size: 14px;
+            z-index: 999999;
+            border-radius: 8px;
+            max-width: 500px;
+            box-shadow: 0 0 20px rgba(0,0,0,0.5);
+        }
+        #on-screen-console {
+            position: absolute;
+            bottom: 20px;
+            left: 20px;
+            width: 550px;
+            max-height: 400px;
+            background: rgba(0,0,0,0.95);
+            color: #0f0;
+            font-size: 13px;
+            padding: 15px;
+            overflow-y: auto;
+            z-index: 999999;
+            border: 3px solid #0f0;
+            display: <?= $debug ? 'block' : 'none' ?>;
+        }
+        .debug-marker {
+            position: absolute;
+            top: 40px;
+            right: 40px;
+            font-size: 4rem;
+            font-weight: 900;
+            color: #fff;
+            z-index: 1000;
+            background: rgba(0,0,0,0.7);
+            padding: 20px;
+            pointer-events: none;
+            border: 4px solid white;
         }
     </style>
 </head>
 <body class="split-view">
 
+<?php if ($debug): ?>
+<div class="debug-panel">
+    <strong>STRICT DEBUG PANEL</strong><br>
+    Ads Found: <?= count($ads) ?><br>
+    Viewport: <span id="vp-info">?</span><br>
+    <hr>
+    <div class="d-flex flex-wrap gap-1">
+        <button onclick="checkAllImages()" class="btn btn-warning btn-sm">FORCE DIMENSION CHECK</button>
+        <button onclick="location.href='?'" class="btn btn-light btn-sm">Exit Debug</button>
+        <button onclick="location.reload()" class="btn btn-info btn-sm">Reload</button>
+    </div>
+</div>
+<div id="on-screen-console"></div>
+<?php endif; ?>
+
 <div class="main-container" id="main-view">
-    <!-- Left: Serving Board -->
     <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>
+            <p class="text-muted"><?= htmlspecialchars($companyName) ?> #<?= $outlet_id ?></p>
         </div>
-
         <div class="mb-5">
-            <h2 class="section-title text-success">
-                <i class="bi bi-bell-fill"></i> Now Serving
-            </h2>
-            <div id="ready-orders" class="order-grid">
-                <!-- Ready orders injected here -->
-                <div class="empty-msg">No orders ready</div>
-            </div>
+            <h2 class="section-title text-success"><i class="bi bi-bell-fill"></i> Ready</h2>
+            <div id="ready-orders" class="order-grid"><div class="empty-msg">...</div></div>
         </div>
-
         <div>
-            <h2 class="section-title text-info">
-                <i class="bi bi-hourglass-split"></i> Preparing
-            </h2>
-            <div id="preparing-orders" class="order-grid">
-                <!-- Preparing orders injected here -->
-                <div class="empty-msg">No orders preparing</div>
-            </div>
-        </div>
-        
-        <div class="mt-auto pt-4 border-top border-dark text-center text-muted">
-            <small id="clock"></small>
+            <h2 class="section-title text-info"><i class="bi bi-hourglass-split"></i> Preparing</h2>
+            <div id="preparing-orders" class="order-grid"><div class="empty-msg">...</div></div>
         </div>
+        <div class="mt-auto pt-4 border-top border-dark text-center text-muted"><small id="clock"></small></div>
     </div>
 
-    <!-- Right: Ads Slider -->
     <div class="ads-slider">
         <?php if (!empty($ads)): ?>
-            <div id="adCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel" data-bs-interval="10000">
+            <div id="adCarousel" class="carousel slide" data-bs-ride="carousel">
                 <div class="carousel-inner">
                     <?php foreach ($ads as $index => $ad): ?>
-                        <div class="carousel-item <?= $index === 0 ? 'active' : '' ?>">
-                            <img src="<?= htmlspecialchars($ad['image_path']) ?>" alt="<?= htmlspecialchars($ad['title'] ?? '') ?>">
-                            <?php if (!empty($ad['title'])): ?>
-                                <div class="carousel-caption d-none d-md-block">
-                                    <h5 class="caption-title"><?= htmlspecialchars($ad['title']) ?></h5>
-                                </div>
+                        <div class="carousel-item <?= $index === 0 ? 'active' : '' ?>" data-index="<?= $index ?>">
+                            <?php if ($debug): ?>
+                                <div class="debug-marker">SLIDE <?= $index ?></div>
                             <?php endif; ?>
+                            <img src="<?= htmlspecialchars($ad['image_path']) ?>?v=<?= time() ?>" 
+                                 class="ad-image"
+                                 onload="imgLog(<?= $index ?>, this, 'OK')"
+                                 onerror="imgLog(<?= $index ?>, this, 'FAIL')">
                         </div>
                     <?php endforeach; ?>
                 </div>
             </div>
         <?php else: ?>
-            <div class="h-100 d-flex flex-column align-items-center justify-content-center text-muted">
-                <i class="bi bi-images fs-1 mb-3"></i>
-                <p>No advertisements uploaded yet.</p>
-                <small>Go to Admin > Ads Management to upload pictures.</small>
-            </div>
+            <div class="h-100 d-flex align-items-center justify-content-center">No Ads Found</div>
         <?php endif; ?>
     </div>
 </div>
 
-<button id="toggle-view" class="btn btn-dark btn-sm rounded-circle shadow">
+<button id="toggle-view" class="btn btn-dark btn-sm rounded-circle shadow" style="position:fixed; bottom:20px; right:20px; z-index:10000; opacity:0.5;">
     <i class="bi bi-fullscreen"></i>
 </button>
 
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
 <script>
-const OUTLET_ID = <?= $outlet_id ?>;
-let isFullscreen = false;
-
-// Fetch Orders for the Board
-async function fetchBoardOrders() {
-    try {
-        const response = await fetch('api/kitchen.php?outlet_id=' + OUTLET_ID);
-        if (!response.ok) throw new Error('Network response was not ok');
-        const orders = await response.json();
-        updateBoard(orders);
-    } catch (error) {
-        console.error('Error fetching orders:', error);
+function imgLog(idx, el, status) {
+    if (status === 'OK') {
+        // Log immediately
+        console.log(`IMG ${idx}: LOADED (${el.naturalWidth}x${el.naturalHeight})`);
+        
+        // Log again after a delay to catch rendered dimensions
+        setTimeout(() => {
+            console.log(`IMG ${idx} RENDERED SIZE: ${el.clientWidth}x${el.clientHeight}`);
+            if (el.clientWidth === 0 || el.clientHeight === 0) {
+                console.error(`CRITICAL: IMG ${idx} has ZERO rendered dimensions!`);
+            }
+        }, 1000);
+    } else {
+        console.error(`IMG ${idx}: FAILED TO LOAD - check path: ${el.src}`);
+        el.src = 'https://via.placeholder.com/1920x1080/cc0000/FFFFFF?text=ERROR+LOADING+IMAGE+'+idx;
     }
 }
 
-function updateBoard(orders) {
-    const readyContainer = document.getElementById('ready-orders');
-    const preparingContainer = document.getElementById('preparing-orders');
-    
-    const readyOrders = orders.filter(o => o.status === 'ready');
-    const preparingOrders = orders.filter(o => o.status === 'preparing');
-    
-    // Render Ready
-    if (readyOrders.length > 0) {
-        readyContainer.innerHTML = readyOrders.map(o => `
-            <div class="order-number order-ready">${o.id}</div>
-        `).join('');
-    } else {
-        readyContainer.innerHTML = '<div class="empty-msg">Waiting for orders...</div>';
-    }
-    
-    // Render Preparing
-    if (preparingOrders.length > 0) {
-        preparingContainer.innerHTML = preparingOrders.map(o => `
-            <div class="order-number order-preparing">${o.id}</div>
-        `).join('');
-    } else {
-        preparingContainer.innerHTML = '<div class="empty-msg">No active prep</div>';
-    }
+function checkAllImages() {
+    console.log('--- MANUAL DIMENSION CHECK ---');
+    document.querySelectorAll('.ad-image').forEach((img, idx) => {
+        const parent = img.closest('.carousel-item');
+        const isActive = parent.classList.contains('active');
+        console.log(`[${idx}] Active: ${isActive} | Natural: ${img.naturalWidth}x${img.naturalHeight} | Rendered: ${img.clientWidth}x${img.clientHeight}`);
+    });
 }
 
-// Toggle View Logic (Alternate between Split and Fullscreen Ads)
-const toggleBtn = document.getElementById('toggle-view');
-toggleBtn.addEventListener('click', () => {
-    isFullscreen = !isFullscreen;
-    const body = document.body;
-    const icon = toggleBtn.querySelector('i');
+function toggleTest() {
+    document.body.classList.toggle('fullscreen-ads');
+    console.log('View Toggled');
+}
+
+// Debugging logic
+<?php if ($debug): ?>
+(function() {
+    const consoleDiv = document.getElementById('on-screen-console');
+    const originalLog = console.log;
+    const originalError = console.error;
     
-    if (isFullscreen) {
-        body.classList.add('fullscreen-ads');
-        icon.classList.replace('bi-fullscreen', 'bi-fullscreen-exit');
-    } else {
-        body.classList.remove('fullscreen-ads');
-        icon.classList.replace('bi-fullscreen-exit', 'bi-fullscreen');
+    function logToScreen(msg, color = '#0f0') {
+        const div = document.createElement('div');
+        div.style.marginBottom = '4px';
+        div.style.color = color;
+        div.textContent = '[' + new Date().toLocaleTimeString() + '] ' + msg;
+        consoleDiv.appendChild(div);
+        consoleDiv.scrollTop = consoleDiv.scrollHeight;
+    }
+    
+    console.log = function() {
+        originalLog.apply(console, arguments);
+        logToScreen(Array.from(arguments).join(' '), '#0f0');
+    };
+    console.error = function() {
+        originalError.apply(console, arguments);
+        logToScreen(Array.from(arguments).join(' '), '#f55');
+    };
+
+    window.addEventListener('load', () => {
+        document.getElementById('vp-info').textContent = window.innerWidth + 'x' + window.innerHeight;
+        console.log('Window Load Complete');
+        const slider = document.querySelector('.ads-slider');
+        console.log('Slider Container Viewport Size: ' + slider.clientWidth + 'x' + slider.clientHeight);
+        
+        // Auto check after 2 seconds
+        setTimeout(checkAllImages, 2000);
+    });
+})();
+<?php endif; ?>
+
+document.addEventListener('DOMContentLoaded', function() {
+    const el = document.querySelector('#adCarousel');
+    if (el) {
+        new bootstrap.Carousel(el, { interval: 5000, ride: 'carousel', pause: false });
+        console.log('Bootstrap Carousel Initialized');
     }
 });
 
-// Auto-alternate every 30 seconds (Optional, but user mentioned "alternatively")
-setInterval(() => {
-    // If you want it to auto-switch, uncomment below:
-    toggleBtn.click();
-}, 15000);
+document.getElementById('toggle-view').addEventListener('click', toggleTest);
+
+// Orders polling
+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 r = document.getElementById('ready-orders');
+        const p = document.getElementById('preparing-orders');
+        const ready = orders.filter(o => o.status === 'ready');
+        const prep = orders.filter(o => o.status === 'preparing');
+        r.innerHTML = ready.length ? ready.map(o => `<div class="order-number order-ready" style="background:#198754; color:white; padding:10px; margin:5px; border-radius:5px; display:inline-block; font-size:2rem; font-weight:bold;">${o.id}</div>`).join('') : '<div class="text-muted">No orders ready</div>';
+        p.innerHTML = prep.length ? prep.map(o => `<div class="order-number order-preparing" style="background:#0dcaf0; color:black; padding:10px; margin:5px; border-radius:5px; display:inline-block; font-size:2rem; font-weight:bold;">${o.id}</div>`).join('') : '<div class="text-muted">No orders preparing</div>';
+    } catch(e) {
+        if (typeof console.error === 'function') console.error('Fetch Orders Failed: ' + e.message);
+    }
+}
+setInterval(fetchOrders, 5000);
+fetchOrders();
 
-// Clock
 setInterval(() => {
     const clock = document.getElementById('clock');
-    if (clock) {
-        const now = new Date();
-        clock.textContent = now.toLocaleDateString() + ' ' + now.toLocaleTimeString();
-    }
+    if (clock) clock.textContent = new Date().toLocaleTimeString();
 }, 1000);
-
-// Initial Fetch & Poll
-fetchBoardOrders();
-setInterval(fetchBoardOrders, 5000); // Poll every 5s for the board
 </script>
 </body>
 </html>

api/kitchen.php

@@ -57,8 +57,29 @@ if ($_SERVER['REQUEST_METHOD'] === 'GET') {
 }
 
 if ($_SERVER['REQUEST_METHOD'] === 'POST') {
-    // Update order status
+    // Update order status or bulk action
     $data = json_decode(file_get_contents('php://input'), true);
+    $action = $data['action'] ?? null;
+    $outletId = $data['outlet_id'] ?? null;
+
+    if ($action === 'serve_all') {
+        if (!$outletId) {
+            http_response_code(400);
+            echo json_encode(['error' => 'Missing outlet_id for serve_all']);
+            exit;
+        }
+
+        try {
+            $stmt = $pdo->prepare("UPDATE orders SET status = 'completed' WHERE outlet_id = ? AND status IN ('pending', 'preparing', 'ready')");
+            $stmt->execute([$outletId]);
+            echo json_encode(['success' => true]);
+        } catch (Exception $e) {
+            http_response_code(500);
+            echo json_encode(['error' => $e->getMessage()]);
+        }
+        exit;
+    }
+
     $orderId = $data['order_id'] ?? null;
     $newStatus = $data['status'] ?? null;
 

kitchen.php

@@ -101,6 +101,10 @@ if (!has_permission('all')) {
             </select>
             <span id="clock" class="text-muted d-none d-md-inline"></span>
             
+            <button class="btn btn-danger btn-sm" onclick="serveAll()">
+                <i class="bi bi-check2-all"></i> Serve All
+            </button>
+
             <div class="dropdown">
                 <button class="btn btn-sm btn-outline-dark dropdown-toggle" type="button" data-bs-toggle="dropdown">
                     <i class="bi bi-person-circle"></i> <?= htmlspecialchars($currentUser['username']) ?>
@@ -246,6 +250,38 @@ async function performUpdate(orderId, newStatus) {
     }
 }
 
+async function serveAll() {
+    const result = await Swal.fire({
+        title: 'Serve All Orders?',
+        text: "This will mark all active orders as completed and clear the screen.",
+        icon: 'warning',
+        showCancelButton: true,
+        confirmButtonColor: '#d33',
+        cancelButtonColor: '#3085d6',
+        confirmButtonText: 'Yes, Serve All!'
+    });
+
+    if (result.isConfirmed) {
+        try {
+            const response = await fetch('api/kitchen.php', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ action: 'serve_all', outlet_id: OUTLET_ID })
+            });
+            const data = await response.json();
+            if (data.success) {
+                fetchOrders();
+                Swal.fire('Cleared!', 'All orders have been served.', 'success');
+            } else {
+                Swal.fire('Error', data.error || 'Failed to clear orders', 'error');
+            }
+        } catch (error) {
+            console.error('Error:', error);
+            Swal.fire('Error', 'Server connection failed', 'error');
+        }
+    }
+}
+
 // Outlet Selector Logic
 const outletSelector = document.getElementById('outlet-selector');
 if (outletSelector) {