Merge branch 'main' of https://github.com/Alvin-Zilverstand/Schoolkantine

website/betalen.html

@@ -11,8 +11,13 @@
 
 <script>
     window.onload = function() {
-        var number = Math.floor((Math.random() * 999) + 1);
+        const urlParams = new URLSearchParams(window.location.search);
-        document.getElementById("random-number").innerHTML = "Uw Bestellings nummer = #" + number;
+        const orderNumber = urlParams.get('order_number');
+        if (orderNumber) {
+            document.getElementById("order-number").innerText = `Uw Bestellings nummer = ${orderNumber}`;
+        } else {
+            document.getElementById("order-number").innerText = "Uw Bestellings nummer kon niet worden opgehaald.";
+        }
     }
 </script>
 
@@ -20,9 +25,7 @@
     <h1>Bedankt voor uw bestelling!</h1>
     <p>Uw bestelling is succesvol geplaatst. U kunt dit tabblad nu sluiten.</p>
     <button onclick="window.close()">Sluit dit tabblad</button>
-    <h1 id="random-number"></h1>
+    <h1 id="order-number">Uw Bestellings nummer = </h1>
 </body>
 
-<script src="script.js"></script>
 </html>
- 

website/complete_order.php

@@ -0,0 +1,35 @@
+<?php
+include 'config.php';
+
+// Set header to JSON
+header('Content-Type: application/json');
+
+// Get the POST data
+$data = json_decode(file_get_contents('php://input'), true);
+$order_number = $data['order_number'] ?? '';
+
+if (empty($order_number)) {
+    echo json_encode(['success' => false, 'message' => 'Order number is required']);
+    exit;
+}
+
+// Delete the order from the database
+$sql = "DELETE FROM orders WHERE order_number = ?";
+$stmt = $conn->prepare($sql);
+if ($stmt === false) {
+    error_log("Failed to prepare statement: " . $conn->error);
+    echo json_encode(['success' => false, 'message' => 'Failed to prepare statement']);
+    exit;
+}
+
+$stmt->bind_param("s", $order_number);
+if ($stmt->execute()) {
+    echo json_encode(['success' => true]);
+} else {
+    error_log("Failed to execute statement: " . $stmt->error);
+    echo json_encode(['success' => false, 'message' => 'Failed to execute statement']);
+}
+
+$stmt->close();
+$conn->close();
+?>

website/config.php

@@ -0,0 +1,15 @@
+<?php
+$servername = "localhost:3306";
+$username = "database";
+$password = "13cAv?i52";
+$dbname = "schoolkantine";
+$port = 3306; // Specify the port
+
+// Create connection
+$conn = new mysqli($servername, $username, $password, $dbname, $port);
+
+// Check connection
+if ($conn->connect_error) {
+    die("Connection failed: " . $conn->connect_error);
+}
+?>

website/database.inc.php

@@ -0,0 +1,114 @@
+<?php
+/*************************************************************
+    Created 2019 by E.steens
+    Edited 2020/2021/2022 by E. Steens and J. Wilmes
+*************************************************************/
+
+// database implemented abstract because only one implementation required
+abstract class Database {
+    private static $result         = array();
+    private static $numrows        = -1;
+    private static $currentrow     = -1;
+
+    public static function dbConnect() {
+        $dbhost      = "localhost:3306";
+        $dbname      = "schoolkantine";
+        $dbuser      = "database";
+        $dbpass      = '13cAv?i52';
+        $conn         = "";             // connection string
+        $pdo          = "";             // handler
+        $charset      = 'utf8mb4';
+
+        $conn = "mysql:host=" . $dbhost . "; dbname=" . $dbname . ";charset=" . $charset;
+
+        $options = [ // define options for PDO connection
+            PDO::ATTR_ERRMODE            => PDO::ERRMODE_EXCEPTION,    // give error in case of issue
+            PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,          // get row indexed by column name
+            PDO::ATTR_EMULATE_PREPARES   => false,
+        ];
+        try {
+            $pdo = new PDO($conn, $dbuser, $dbpass, $options); // create connection
+            return $pdo;
+        } catch (\PDOException $e) {
+            throw new \PDOException($e->getMessage(), (int)$e->getCode());
+        }
+    }
+
+    // Function to execute a query that does not return data
+    public static function executeQuery($p_sSql, $p_aData = "") {
+        // execute query on Mysql server (INSERT, UPDATE, DELETE, etc.)
+        // $p_sSQL contains MySQL query string with parameters '?'
+        // $p_aData contains array with query parameters
+        $pdo = Database::dbConnect();
+        $stmt = $pdo->prepare($p_sSql); // prepare the query
+        if (is_array($p_aData)) {       // add the data
+            return $stmt->execute($p_aData);  // execute the query
+        } else {
+            return $stmt->execute();  // execute when no parameters
+        }
+    }
+
+    // Get Data: Modified to handle fetching posts with user details
+    public static function getData($p_sSql, $p_aData = "", $print = false) {
+        // execute query on Mysql server
+        // $p_sSQL contains MySql query string with parameter ?'s
+        // $p_aData contains array with query parameters
+        $pdo = Database::dbConnect();
+        $stmt = $pdo->prepare($p_sSql); // prepare the query
+
+        if (is_array($p_aData)) {       // add the data
+            $stmt->execute($p_aData);   // execute the query
+        } else {
+            $stmt->execute();           // execute when no parameters
+        }
+
+        // Fetch the results
+        database::$numrows = $stmt->rowCount();
+        $result = $stmt->fetchAll();    // get result
+        database::$result = $result;    // set class var
+        database::$currentrow = 0;      // set current row
+        if ($print === true) { print_r($result); }
+        return $result; // database query result
+    }
+
+    public static function getNumrows() {
+        return database::$numrows;
+    }
+
+    public static function nextRow() {
+        if (database::$currentrow < database::getNumRows() - 1) {
+            database::$currentrow++;
+        }
+        echo "n:" . database::$currentrow;
+        $row = array();
+        array_push($row, database::$result[database::$currentrow]);
+        return $row;
+    }
+
+    public static function previousRow() {
+        if (database::$currentrow > 0) {
+            database::$currentrow--;
+        }
+        echo "p:" . database::$currentrow;
+        $row = array();
+        array_push($row, database::$result[database::$currentrow]);
+        return $row;
+    }
+
+    public static function currentRow() {
+        $rownr = database::$currentrow;
+        $row = array();
+        array_push($row, database::$result[database::$currentrow]);
+        return $row;
+    }
+
+    public static function jsonParse($p_aValue) {
+        if (is_array($p_aValue)) {
+            return json_encode($p_aValue);
+        }
+        if (is_string($p_aValue)) {
+            return json_decode($p_aValue);
+        }
+    }
+}
+?>

website/get_items.php

@@ -0,0 +1,54 @@
+<?php
+// Disable error output to avoid unwanted characters in the JSON response
+ini_set('display_errors', 0);
+error_reporting(0);
+
+ob_start();  // Start output buffering
+
+include "config.php";
+include "database.inc.php";
+
+// Set header to JSON
+header('Content-Type: application/json');
+
+$category = $_GET['category'] ?? '';
+if (empty($category)) {
+    error_log("Category is required");
+    echo json_encode(['error' => 'Category is required']);
+    exit;
+}
+
+$sql = "SELECT * FROM items WHERE category = ?";
+$stmt = $conn->prepare($sql);
+if ($stmt === false) {
+    error_log("Failed to prepare statement: " . $conn->error);
+    echo json_encode(['error' => 'Failed to prepare statement']);
+    exit;
+}
+
+$stmt->bind_param("s", $category);
+$stmt->execute();
+$result = $stmt->get_result();
+
+$items = [];
+while ($row = $result->fetch_assoc()) {
+    $items[] = [
+        'title' => $row['title'],
+        'imageSrc' => $row['imageSrc'],
+        'price' => (float)$row['price'], // Ensure price is a number
+        'description' => $row['description'] // Include description
+    ];
+}
+
+if (empty($items)) {
+    error_log("No items found for category: " . $category);
+}
+
+// Clean any buffered output (whitespace, etc.)
+ob_clean();
+echo json_encode($items);
+
+$stmt->close();
+$conn->close();
+ob_end_flush();
+?>

website/get_orders.php

@@ -0,0 +1,27 @@
+<?php
+include 'config.php';
+
+// Set header to JSON
+header('Content-Type: application/json');
+
+// Fetch orders from the database
+$sql = "SELECT order_number, items, total_price, order_time FROM orders ORDER BY order_time DESC";
+$result = $conn->query($sql);
+
+if ($result === false) {
+    error_log("Failed to fetch orders: " . $conn->error);
+    echo json_encode(['error' => 'Failed to fetch orders']);
+    exit;
+}
+
+$orders = [];
+while ($row = $result->fetch_assoc()) {
+    $row['items'] = json_decode($row['items'], true); // Decode the JSON items
+    $row['total_price'] = (float)$row['total_price']; // Ensure total_price is a number
+    $orders[] = $row;
+}
+
+echo json_encode($orders);
+
+$conn->close();
+?>

website/index.html

@@ -13,7 +13,7 @@
 
 <body>
 
-    <!-- Logo or photo -->
+    <!-- Logo -->
     <img src="media/logo.png" alt="Logo" class="logo">
 
     <!-- Top bar menu -->
@@ -32,12 +32,12 @@
         <div class="menu-item" onclick="showCategory('Overige')" data-translate="Overige">Overige</div>
     </div>
 
-    <!-- Productweergave -->
+    <!-- Product display area -->
     <div id="product-display" class="product-display">
-        <!-- Producten worden hier dynamisch toegevoegd -->
+        <!-- Products will be inserted dynamically -->
     </div>
 
-    <!-- Modaal venster voor grotere afbeelding en beschrijving -->
+    <!-- Modal for item details -->
     <div id="modal" class="modal">
         <div class="modal-content">
             <span class="close" onclick="closeModal()">&times;</span>
@@ -49,11 +49,11 @@
         </div>
     </div>
 
-    <!-- Winkelmandje sectie -->
+    <!-- Cart section -->
     <div id="cart" class="cart">
         <h2 data-translate="Winkelmandje">Winkelmandje</h2>
         <ul id="cart-items">
-            <!-- Winkelmandje items worden hier dynamisch toegevoegd -->
+            <!-- Cart items will be added here -->
         </ul>
         <p><span data-translate="Totaal">Totaal</span>: €<span id="total-price">0.00</span></p>
 
@@ -62,7 +62,7 @@
         </a>
     </div>
 
-    <!-- Winkelwagen icoon -->
+    <!-- Cart icon -->
     <div class="cart-icon">
         <i class="fas fa-shopping-cart"></i>
         <span id="cart-count" class="cart-count">0</span> <!-- Aantal producten -->

website/orders.css

@@ -0,0 +1,45 @@
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f9f9f9;
+    padding: 20px;
+    text-align: center;
+}
+
+h1 {
+    color: #F56E28;
+}
+
+.orders-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 20px;
+}
+
+.order {
+    background-color: white;
+    border: 2px solid #F56E28;
+    border-radius: 10px;
+    padding: 20px;
+    width: 300px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    text-align: left;
+}
+
+.order h2 {
+    margin-top: 0;
+    color: #F56E28;
+}
+
+.order p {
+    margin: 5px 0;
+}
+
+.order ul {
+    list-style-type: none;
+    padding: 0;
+}
+
+.order li {
+    margin: 5px 0;
+}

website/orders.html

@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="nl">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Bestellingen Overzicht</title>
+    <link rel="stylesheet" href="orders.css">
+</head>
+
+<body>
+    <h1>Bestellingen Overzicht</h1>
+    <div id="orders-container" class="orders-container">
+        <!-- Orders will be dynamically inserted here -->
+    </div>
+
+    <script>
+        function fetchOrders() {
+            fetch('get_orders.php')
+                .then(response => response.json())
+                .then(orders => {
+                    const ordersContainer = document.getElementById('orders-container');
+                    ordersContainer.innerHTML = ''; // Clear existing orders
+
+                    orders.forEach(order => {
+                        const orderElement = document.createElement('div');
+                        orderElement.classList.add('order');
+
+                        const orderNumber = document.createElement('h2');
+                        orderNumber.innerText = `Order ${order.order_number}`;
+                        orderElement.appendChild(orderNumber);
+
+                        const orderTime = document.createElement('p');
+                        orderTime.innerText = `Tijd: ${order.order_time}`;
+                        orderElement.appendChild(orderTime);
+
+                        const itemsList = document.createElement('ul');
+                        order.items.forEach(item => {
+                            const itemElement = document.createElement('li');
+                            itemElement.innerText = `${item.title} - €${item.price.toFixed(2)}`;
+                            itemsList.appendChild(itemElement);
+                        });
+                        orderElement.appendChild(itemsList);
+
+                        const totalPrice = document.createElement('p');
+                        totalPrice.innerText = `Totaal: €${Number(order.total_price).toFixed(2)}`;
+                        orderElement.appendChild(totalPrice);
+
+                        const completeCheckbox = document.createElement('input');
+                        completeCheckbox.type = 'checkbox';
+                        completeCheckbox.id = `complete-${order.order_number}`;
+                        completeCheckbox.addEventListener('change', () => completeOrder(order.order_number));
+                        const completeLabel = document.createElement('label');
+                        completeLabel.htmlFor = `complete-${order.order_number}`;
+                        completeLabel.innerText = 'Complete';
+                        orderElement.appendChild(completeCheckbox);
+                        orderElement.appendChild(completeLabel);
+
+                        ordersContainer.appendChild(orderElement);
+                    });
+                })
+                .catch(error => console.error('Error fetching orders:', error));
+        }
+
+        function completeOrder(orderNumber) {
+            fetch('complete_order.php', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({ order_number: orderNumber })
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.success) {
+                    fetchOrders(); // Refresh the orders list
+                } else {
+                    alert('Failed to complete order');
+                }
+            })
+            .catch(error => console.error('Error completing order:', error));
+        }
+
+        // Fetch orders every 5 seconds
+        setInterval(fetchOrders, 5000);
+        fetchOrders(); // Initial fetch
+    </script>
+</body>
+
+</html>

website/place_order.php

@@ -0,0 +1,48 @@
+<?php
+include 'config.php';
+
+// Set header to JSON
+header('Content-Type: application/json');
+
+// Get the POST data
+$data = json_decode(file_get_contents('php://input'), true);
+
+$items = json_encode($data['items'] ?? []);
+$total_price = $data['total_price'] ?? 0;
+
+if (empty($items) || empty($total_price)) {
+    echo json_encode(['success' => false, 'message' => 'Invalid order data']);
+    exit;
+}
+
+// Fetch the last order number
+$sql = "SELECT order_number FROM orders ORDER BY id DESC LIMIT 1";
+$result = $conn->query($sql);
+if ($result === false) {
+    error_log("Failed to fetch last order number: " . $conn->error);
+    echo json_encode(['success' => false, 'message' => 'Failed to fetch last order number']);
+    exit;
+}
+
+$last_order_number = $result->fetch_assoc()['order_number'] ?? '#000';
+$new_order_number = '#' . str_pad((int)substr($last_order_number, 1) + 1, 3, '0', STR_PAD_LEFT);
+
+$sql = "INSERT INTO orders (order_number, items, total_price) VALUES (?, ?, ?)";
+$stmt = $conn->prepare($sql);
+if ($stmt === false) {
+    error_log("Failed to prepare statement: " . $conn->error);
+    echo json_encode(['success' => false, 'message' => 'Failed to prepare statement']);
+    exit;
+}
+
+$stmt->bind_param("ssd", $new_order_number, $items, $total_price);
+if ($stmt->execute()) {
+    echo json_encode(['success' => true, 'order_number' => $new_order_number]);
+} else {
+    error_log("Failed to execute statement: " . $stmt->error);
+    echo json_encode(['success' => false, 'message' => 'Failed to execute statement']);
+}
+
+$stmt->close();
+$conn->close();
+?>

website/script.js

@@ -1,168 +1,53 @@
-// Functie om de productcategorie te tonen
+// Function to show products for a selected category
 function showCategory(category) {
+    console.log(`Fetching items for category: ${category}`); // Debugging: log category
     const productDisplay = document.getElementById('product-display');
-    productDisplay.innerHTML = ''; // Maak het display leeg voordat we nieuwe items toevoegen
+    productDisplay.innerHTML = ''; // Clear display before adding new items
 
-    let items = [];
+    fetch(`get_items.php?category=${category}`)
-
+        .then(response => {
-    // Afhankelijk van de gekozen categorie, voeg je de juiste producten toe
+            if (!response.ok) { 
-    if (category === 'Broodjes') {
+                console.error('Network response was not ok', response.statusText);
-        items = [
+                throw new Error('Network response was not ok'); 
-            { title: "Broodje Gezond", imageSrc: "media/broodje-gezond.jpg", price: 3.80 },
-            { title: "Bagel", imageSrc: "media/bagel.jpeg", price: 4.20 },
-            { title: "Broodje Gehakt met Joppiesaus", imageSrc: "media/GehaktJoppie.png", price: 3.80 },
-            { title: "Frikandelbroodje", imageSrc: "media/Frikandelbroodje.png", price: 1.20 },
-            { title: "Saucijzenbroodje", imageSrc: "media/Saucijz.png", price: 1.20 },
-            { title: "Croissant", imageSrc: "https://th.bing.com/th/id/OIP._NRJfKZ0twQKDaljLKfvLAHaEt?rs=1&pid=ImgDetMain", price: 1.20 },
-            { title: "Chocolade broodje", imageSrc: "https://www.bakkerijtommie.nl/wp-content/uploads/2020/02/chocoladebroodje-600x599.png", price: 1.20 },
-            { title: "Broodje kip", imageSrc: "https://th.bing.com/th/id/OIP.sVGmYdUWj25TkUaJR2FCUwHaHa?rs=1&pid=ImgDetMain", price: 3.20 },
-            { title: "Panini broodje", imageSrc: "https://th.bing.com/th/id/OIP.aTQpC7sGUdi1HntM7OP6nwAAAA?w=350&h=517&rs=1&pid=ImgDetMain", price: 1.20 },
-        ];
-    } else if (category === 'Koude-Dranken') {
-        items = [
-            { title: "Spa Water", imageSrc: "media/spa.webp", price: 2.00 },
-            { title: "Spa Rood", imageSrc: "media/spa-rood.jpg", price: 2.00 },
-            { title: "Cola zero", imageSrc: "media/cola-zero.jpg", price: 1.80 },
-            { title: "Cola vanille", imageSrc: "media/cola-vanilla.jpg", price: 1.80 },
-            { title: "Cola cherry", imageSrc: "media/cola-cherry.jpg", price: 1.80 },
-            { title: "Cola", imageSrc: "media/cola.jpg", price: 1.80 },
-            { title: "Sprite", imageSrc: "media/sprite.jpg", price: 1.80 },
-            { title: "Dr pepper", imageSrc: "media/drpepper.png", price: 1.80 },
-            { title: "Fanta orange original", imageSrc: "media/fanta.jpg", price: 1.80 },
-            { title: "Fanta orange zero", imageSrc: "media/fanta-zero.jpg", price: 1.80 },
-            { title: "Fanta exotic zero", imageSrc: "media/fanta-exotic-zero.jpg", price: 1.80 },
-            { title: "Fanta lemon zero", imageSrc: "media/fanta-lemon-zero.jpg", price: 1.80 },
-            { title: "Ice tea", imageSrc: "https://www.manutan.nl/img/S/GRP/ST/AIG12165970.jpg", price: 1.80},
-            { title: "Fanta cassis", imageSrc: "media/fanta-cassis.jpg", price: 1.80 },
-            { title: "Milkshake", imageSrc: "https://s3.amazonaws.com/static.realcaliforniamilk.com/media/recipes_2/sunset-sprinkle-shakes.jpg", price: 3.00 }, 
-            { title: "Redbull", imageSrc: "media/redbull.png", price: 2.10 },
-            { title: "Lente Redbull", imageSrc: "media/spring.png", price: 2.10 },
-        ]
-        } else if (category === 'Warme-Dranken') {
-        items = [
-            { title: "Warme Chocomel", imageSrc: "media/choco-gs.jpg", price: 2.30 },
-            { title: "Warme Chocomel met slagroom", imageSrc: "media/chocomel.jpg", price: 3.00 },
-            { title: "Koffie", imageSrc: "media/koffie.jpg", price: 2.20 },
-            { title: "Thee", imageSrc: "media/thee.jpg", price: 2.00 },
-        ];
             }
-    else if (category === 'Snacks') {
+            return response.json();
-        items = [
+        })
-            { title: "Frikandel", imageSrc: "media/frikandel.jpg", price: 1.60 },
+        .then(items => {
-            { title: "Bitterballen", imageSrc: "media/bitterbal.jpg", price: 2.50 },
+            if (items.error) {
-            { title: "Mexicano", imageSrc: "media/mexicano.png", price: 1.60 },
+                console.error('Error fetching items:', items.error);
-            { title: "Kipcorn", imageSrc: "media/kipcorn.png", price: 1.60 },
+                return;
-            { title: "Friet", imageSrc: "media/friet.png", price: 4.00 },
-            { title: "Kipnuggets", imageSrc: "media/kipnuggets.png", price: 2.50 },
-            { title: "Kroket", imageSrc: "media/kroket.png", price: 1.80 } ,
-            { title: "Kaassoufle", imageSrc: "media/kaassoufle.png", price: 1.80 },
-        ];
-    } else if (category === 'Desserts') {
-        items = [
-            { title: "Ijsjes", imageSrc: "media/Ijs.png", price: 2.30 },
-            { title: "Sorbet", imageSrc: "media/sorbet.webp", price: 3.20 },
-            { title: "Softijs", imageSrc: "media/softijs.jpg", price: 1.50 },
-            { title: "Sundea ijs", imageSrc: "media/sundea.jpg", price: 2.30 },
-            { title: "Appelflap", imageSrc: "https://www.royalsmilde.com/uploads/og_image/c172e39c-5f71-59c3-b904-52a773b60239/3168309207/Appelflap%20met%20rozijnen.jpg", price: 2.30 },
-            { title: "Koekjes", imageSrc: "https://rutgerbakt.nl/wp-content/uploads/2020/02/chocolat_chip_cookies_recept-scaled.jpg", price: 2.50 }
-        ];
-    } else if (category === 'Deals') {
-        items = [
-            { title: "Lunch Deal", imageSrc: "media/deals.jpg", price: 7.00 },
-            { title: "Gezonde Deal", imageSrc: "media/deals.jpg", price: 7.00 },
-        ];
-    } else if (category === 'Soepen') {
-        items = [
-            { title: "Tomatensoep", imageSrc: "media/soep.jpg", price: 3.80 },
-            { title: "Kippensoep", imageSrc: "media/kippensoep.jpg", price: 3.80 },
-            { title: "Erwtensoep", imageSrc: "media/erwtensoep.webp", price: 3.80 },
-            { title: "Groentesoep (met gehaktballetjes)", imageSrc: "media/groentesoep.jpg", price: 4.80 },
-        ];
-    } else if (category === 'Salades') {
-        items = [
-            { title: "Caesar Salade", imageSrc: "media/salade.jpg", price: 5.10 },
-            { title: "Griekse Salade", imageSrc: "media/griekse.jpg", price: 5.10 },
-            { title: "Krokante Kip Salade", imageSrc: "media/krokante-kip.jpg", price: 6.00 },
-            { title: "Aardappel Salade", imageSrc: "media/aardappel.jpg", price: 5.10 },
-        ];
-    } else if (category === 'Sausjes') {
-    items = [
-        { title: "Ketchup", imageSrc: "https://www.ahealthylife.nl/wp-content/uploads/2021/06/Ketchup_voedingswaarde.jpg", price: 0.75 },
-        { title: "Mayonaise", imageSrc: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTC4FVmHO_hK3mw43z0fuHv1OFUr-hhsfGe1A&s", price: 0.75 },
-        { title: "Mosterd", imageSrc: "https://cdn.voedingswaardetabel.nl/img/prod/big/mosterd.jpg", price: 0.75 },
-        { title: "Sweet Chili", imageSrc: "https://www.dechinesemuuregmond.nl/wp-content/uploads/2022/04/19.-Zoetzure-saus.jpg", price: 0.75 },
-        {title: "Curry saus", imageSrc: "https://bestellen.hotelhetanker.nl/wp-content/uploads/2021/03/currysaus-1.png", price: 0.75},
-        {title: "Barbecue saus", imageSrc: "Media/barbecue.png", price: 0.75}
-    	];
-
-
-    } else if (category === 'Yoghurt') {
-        items = [
-            { title: "Aardbij yoghurt", imageSrc: "media/aardbij-yoghurt.png", price: 5.10 },
-            { title: "Optimel klein 250ml", imageSrc: "https://m.media-amazon.com/images/I/81mIA7bHX2L.jpg", price: 1.50 },
-            { title: "Optimel groot", imageSrc: "https://jumbo.com/dam-images/fit-in/360x360/Products/04092024_1725446061266_1725446064707_8713300459318_1.png", price: 2.45 },
-            { title: "Melk", imageSrc: "https://static.ah.nl/dam/product/AHI_4354523130313438333436?revLabel=1&rendition=400x400_JPG_Q85&fileType=binary", price: 2.00 },
-            { title: "Fristi", imageSrc: "https://www.fristi.nl/sites/rfc/files/styles/content_image_md/public/media/images/cf500c0a-589a-4677-9737-b5bc0ba6596d.png?itok=j-R-hcKp", price: 2.90 },
-            { title: "Chocomel", imageSrc: "https://m.media-amazon.com/images/I/617FCPZS5sS.jpg", price: 2.90 },
-            { title: "Breaker", imageSrc: "https://cdn.hoogvliet.com/Images/Product/XL/022589000.jpg", price: 2.75 },
-            { title: "Yoghurt beker", imageSrc: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSc67eaAUkb3-7eTk7WR7F16FwDDnluLv2InQ&s", price: 2.05 },
-            { title: "Kwark 150 gram", imageSrc: "https://jumbo.com/dam-images/fit-in/720x720/Products/31082023_1693453250716_1693453252578_577765_CUP_08712800000136_C1N1.png", price: 2.05 },
-        ];
-    } else if (category === 'Snoep') {
-        items = [
-            { title: "Haribo starmix", imageSrc: "media/Starmix.png", price: 2.50 },
-            { title: "Haribo Kikkers", imageSrc: "media/kikkertjes.png", price: 2.50 },
-            { title: "Haribo Bananen", imageSrc: "media/bananas.png", price: 2.50 },
-            { title: "Haribo Goudberen", imageSrc: "media/Goudberen.png", price: 2.50 },
-            { title: "Haribo Perzikken", imageSrc: "media/Perzikken.png", price: 2.50 },
-            { title: "Haribo Tropifrutti", imageSrc: "media/tropifrutti.png", price: 2.50 },
-            { title: "Haribo Tangfastics", imageSrc: "media/tangfastics.png", price: 2.50 },
-            { title: "Haribo Kersen", imageSrc: "media/Kersen.png", price: 2.50 },
-            { title: "Popcorn zoet", imageSrc: "https://th.bing.com/th/id/OIP.6We0JA1TcUt_QOqMcMZsPwAAAA?rs=1&pid=ImgDetMain", price: 2.20 },
-            { title: "Popcorn zout", imageSrc: "https://www.sligro.nl/image-service/_jcr_content.product.08713276292032.image/1/large.jpeg", price: 2.20 },
-           { title: "Haribo Rolletje", imageSrc: "media/rolletje.png", price: 1.00 },
-        ];
-    } else if (category === 'Overige') {
-        items = [
-            { title: "Bestek", imageSrc: "https://www.kerst-feestwinkel.nl/img/large/zwart-plastic-verjaardag-bbq-bestek-24-delig/10038/913-1.jpg", price: 0.40},
-            { title: "Hervul baar bekers", imageSrc:"https://th.bing.com/th/id/OIP.7V3t9HqIG_ss_IfEn6vgIwHaFl?w=238&h=180&c=7&pcl=1b1a19&r=0&o=5&pid=1.7", price: 1.00},
-            { title: "Rietjes",  imageSrc: "https://th.bing.com/th/id/OIP.hiraJOON9-g_L44k0RRJ2QHaHa?w=186&h=190&c=7&pcl=1b1a19&r=0&o=5&pid=1.7", price: 0.15}, 
-        ];
             }
-    // Voeg de items toe aan de weergave
+            if (items.length === 0) {
+                console.warn(`No items found for category: ${category}`); // Debugging: log no items found
+            }
+            console.log('Fetched items:', items); // Debugging: log fetched items
             items.forEach(item => {
                 const productBox = document.createElement('div');
                 productBox.classList.add('product-box');
                 productBox.onclick = () => showItemDetails(item);
-
                 productBox.innerHTML = `
                     <img src="${item.imageSrc}" alt="${item.title}">
                     <h3>${item.title}</h3>
                     <p>€${item.price.toFixed(2)}</p>
                 `;
-
                 productDisplay.appendChild(productBox);
             });
-
+            document.querySelector('.menu-bar').classList.add('top'); // Bring menu to top
-    // Transition the menu bar to the top
-    document.querySelector('.menu-bar').classList.add('top');
-
-    // Show the shopping cart and cart icon
             document.getElementById('cart').classList.add('visible');
             document.querySelector('.cart-icon').classList.add('visible');
 
-    // Remove the logo from the DOM
+            // Remove logo if present
             const logo = document.querySelector('.logo');
-    if (logo) {
+            if (logo) { logo.remove(); }
-        logo.remove();
+        })
-    }
+        .catch(error => console.error('Error fetching items:', error));
 }
 
 // Functie om de details van een item weer te geven in het modaal
 function showItemDetails(item) {
     const title = item.title;
     const imageSrc = item.imageSrc;
-    const description = getDescription(item.title); // Haal de beschrijving dynamisch op
+    const description = item.description; // Use description from item data
     const price = item.price;
 
     // Update de inhoud van het modaal venster
@@ -284,15 +169,15 @@ function getDescription(title) {
 
     // Sauzen beschrijving
     }   if (title === "Ketchup") {
-        return "";
+        return "Ketchup";
     }   if (title === "Mayonaise") {
-        return "";
+        return "Mayonaise";
     }   if (title === "Mosterd") {
-        return "";
+        return "Mosterd";
     }   if (title === "Sweet Chili") {
-        return "";
+        return "Sweet Chili";
     }   if (title === "Curry saus") {
-        return "";
+        return "Curry saus";
     }
     // Yoghurt beschrijving 
         if (title === "Aardbij yoghurt") {
@@ -335,10 +220,15 @@ function getDescription(title) {
         return "Een zakje met 75g kersjes.";
     }    if (title === "Haribo Rolletje") {
         return "Een rolletje met snoepjes.";
+    }    if (title === "Haribo Pinballs") {
+        return "Een zakje met 75g balletjes.";
+    }    if (title === "Haribo Happy Cola") {
+        return "Een zakje met 75g cola snoepjes.";
+}
 }
 {
     // overige beschrijing
-    }    if (title === "Bestek") {
+   if (title === "Bestek") {
     return "Plastice vorken, messen en lepels ";
 }    if (title === "Hervul baar bekers") {
     return "Bekers die je kunt hervullen en daarna weg kan gooien";
@@ -409,6 +299,42 @@ window.onclick = function(event) {
 // Initial call to updateCart to ensure the button is hidden on page load
 updateCart();
 
+// Functie om een bestelling te plaatsen
+function placeOrder() {
+    const cart = JSON.parse(localStorage.getItem('cart')) || [];
+    if (cart.length === 0) {
+        alert('Uw winkelmandje is leeg.');
+        return;
+    }
+
+    const totalPrice = cart.reduce((total, item) => total + item.price, 0).toFixed(2);
+
+    fetch('place_order.php', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+            items: cart,
+            total_price: totalPrice
+        })
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.success) {
+            localStorage.removeItem('cart'); // Clear the cart
+            updateCart(); // Update the cart display
+            window.open(`betalen.html?order_number=${encodeURIComponent(data.order_number)}`, '_blank'); // Open the payment page in a new tab with order number
+        } else {
+            alert('Er is een fout opgetreden bij het plaatsen van uw bestelling. Probeer het opnieuw.');
+        }
+    })
+    .catch(error => console.error('Error placing order:', error));
+}
+
+// Bind the placeOrder function to the order button
+document.getElementById('order-button').addEventListener('click', placeOrder);
+
 // Vertalingen voor beide talen (nl en en)
 const translations = {
     en: {