188 lines
8.7 KiB
PHP
188 lines
8.7 KiB
PHP
<?php
|
|
session_start();
|
|
|
|
require_once 'db/config.php';
|
|
|
|
// Base price per meal.
|
|
$base_price_per_meal = 9.99;
|
|
|
|
// Fetch products from the database
|
|
try {
|
|
$stmt = db()->query("SELECT * FROM products ORDER BY name ASC");
|
|
$products = $stmt->fetchAll(PDO::FETCH_ASSOC);
|
|
} catch (PDOException $e) {
|
|
// Handle error if products can't be fetched
|
|
$products = [];
|
|
error_log("Could not fetch products: " . $e->getMessage());
|
|
}
|
|
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Build Your Plan - AI Recipe Generator</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap">
|
|
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Navbar -->
|
|
<nav class="navbar navbar-expand-lg navbar-light bg-white fixed-top">
|
|
<div class="container">
|
|
<a class="navbar-brand" href="index.php">AI Recipe Generator</a>
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse" id="navbarNav">
|
|
<ul class="navbar-nav ms-auto">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="index.php">Home</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link active" href="pricing.php">Pricing</a>
|
|
</li>
|
|
<?php if (isset($_SESSION['user_id'])): ?>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="profile.php">Profile</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="logout.php">Logout</a>
|
|
</li>
|
|
<?php else: ?>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="login.php">Login</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="btn btn-primary" href="register.php">Register</a>
|
|
</li>
|
|
<?php endif; ?>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Main Content -->
|
|
<main>
|
|
<div class="container py-5">
|
|
<div class="pricing-header">
|
|
<h1>Build Your Perfect Meal Plan</h1>
|
|
<p class="lead">Customize your weekly delivery by choosing the number of people and meals.</p>
|
|
</div>
|
|
|
|
<div class="row justify-content-center">
|
|
<div class="col-lg-8">
|
|
<div class="pricing-card interactive-card">
|
|
<form action="subscribe.php" method="post" id="plan-form">
|
|
<div class="row g-4 align-items-center">
|
|
<!-- People Selector -->
|
|
<div class="col-md-6">
|
|
<label for="people" class="form-label">Number of People</label>
|
|
<select class="form-select" id="people" name="people">
|
|
<option value="1">1 person</option>
|
|
<option value="2" selected>2 people</option>
|
|
<option value="3">3 people</option>
|
|
<option value="4">4 people</option>
|
|
<option value="5">5 people</option>
|
|
<option value="6">6 people</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Meals Selector -->
|
|
<div class="col-md-6">
|
|
<label for="meals" class="form-label">Meals per Week</label>
|
|
<select class="form-select" id="meals" name="meals">
|
|
<option value="2">2 meals</option>
|
|
<option value="3" selected>3 meals</option>
|
|
<option value="4">4 meals</option>
|
|
<option value="5">5 meals</option>
|
|
<option value="6">6 meals</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="my-4">
|
|
|
|
<!-- Add-on Products -->
|
|
<?php if (!empty($products)): ?>
|
|
<div class="mb-4">
|
|
<h5>Add-on Products</h5>
|
|
<p class="text-muted">Select any additional products to include in your weekly delivery.</p>
|
|
<div class="row">
|
|
<?php foreach ($products as $product): ?>
|
|
<div class="col-md-6">
|
|
<div class="form-check product-checkbox">
|
|
<input class="form-check-input" type="checkbox" name="products[]" value="<?= $product['id'] ?>" id="product_<?= $product['id'] ?>" data-price="<?= $product['price'] ?>">
|
|
<label class="form-check-label" for="product_<?= $product['id'] ?>">
|
|
<?= htmlspecialchars($product['name']) ?>
|
|
<span class="text-muted">(+$<?= htmlspecialchars(number_format($product['price'], 2)) ?>)</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
</div>
|
|
<hr class="my-4">
|
|
<?php endif; ?>
|
|
|
|
|
|
<div class="text-center">
|
|
<p class="text-muted">Your custom plan price:</p>
|
|
<div class="price mb-3">
|
|
$<span id="total-price">0.00</span><span class="period">/week</span>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary btn-lg">Subscribe Now</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Footer -->
|
|
<footer class="footer">
|
|
<div class="container text-center">
|
|
<p>© <?php echo date("Y"); ?> AI Recipe Generator. All Rights Reserved.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const peopleSelect = document.getElementById('people');
|
|
const mealsSelect = document.getElementById('meals');
|
|
const productCheckboxes = document.querySelectorAll('.product-checkbox input[type="checkbox"]');
|
|
const totalPriceEl = document.getElementById('total-price');
|
|
const basePrice = <?php echo $base_price_per_meal; ?>;
|
|
|
|
function updatePrice() {
|
|
// Calculate meal cost
|
|
const people = parseInt(peopleSelect.value, 10);
|
|
const meals = parseInt(mealsSelect.value, 10);
|
|
let total = people * meals * basePrice;
|
|
|
|
// Add cost of selected products
|
|
productCheckboxes.forEach(function(checkbox) {
|
|
if (checkbox.checked) {
|
|
total += parseFloat(checkbox.dataset.price);
|
|
}
|
|
});
|
|
|
|
totalPriceEl.textContent = total.toFixed(2);
|
|
}
|
|
|
|
peopleSelect.addEventListener('change', updatePrice);
|
|
mealsSelect.addEventListener('change', updatePrice);
|
|
productCheckboxes.forEach(function(checkbox) {
|
|
checkbox.addEventListener('change', updatePrice);
|
|
});
|
|
|
|
// Initial price calculation
|
|
updatePrice();
|
|
});
|
|
</script>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
|
</body>
|
|
</html>
|