PASTIMES/checkout.php at main · FadingPandaa/PASTIMES · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<?php
session_start();
include 'DBConn.php'; // Ensure this matches your connection file name

// If bag is empty, they shouldn't be here
if (empty($_SESSION['cart'])) {
    header("Location: cart.php");
    exit();
}

$subtotal = 0;
$shipping = 60.00;
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Checkout | Pastimes®</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        :root { --studio-blue: #0678eb; }
        body { font-family: 'Inter', sans-serif; background-color: #fcfcfc; }
        .checkout-container { max-width: 1000px; margin: 60px auto; }
        .form-control { border-radius: 0; border: 1px solid #ddd; padding: 12px; }
        .form-control:focus { border-color: #000; box-shadow: none; }
        .summary-box { background: #fff; border: 1px solid #eee; padding: 30px; position: sticky; top: 20px; }
        .btn-pay { background: #000; color: #fff; width: 100%; padding: 18px; font-weight: 800; text-transform: uppercase; border: none; letter-spacing: 2px; }
    </style>
</head>
<body>

<div class="container checkout-container">
    <div class="mb-5 text-center">
        <h1 class="fw-black text-uppercase" style="letter-spacing: -1px;">Checkout</h1>
        <a href="cart.php" class="text-muted small text-decoration-none">&larr; Return to Bag</a>
    </div>

    <div class="row g-5">
        <!-- Left: Shipping Form -->
        <div class="col-lg-7">
            <h5 class="fw-bold text-uppercase mb-4">Shipping Details</h5>
            <form action="process_order.php" method="POST">
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="small fw-bold text-muted">FIRST NAME</label>
                        <input type="text" name="fname" class="form-control" required>
                    </div>
                    <div class="col-md-6">
                        <label class="small fw-bold text-muted">LAST NAME</label>
                        <input type="text" name="lname" class="form-control" required>
                    </div>
                    <div class="col-12">
                        <label class="small fw-bold text-muted">EMAIL ADDRESS</label>
                        <input type="email" name="email" class="form-control" required>
                    </div>
                    <div class="col-12">
                        <label class="small fw-bold text-muted">STREET ADDRESS</label>
                        <input type="text" name="address" class="form-control" placeholder="House number and street name" required>
                    </div>
                    <div class="col-md-6">
                        <label class="small fw-bold text-muted">CITY</label>
                        <input type="text" name="city" class="form-control" required>
                    </div>
                    <div class="col-md-6">
                        <label class="small fw-bold text-muted">POSTAL CODE</label>
                        <input type="text" name="zip" class="form-control" required>
                    </div>
                </div>

                <h5 class="fw-bold text-uppercase mt-5 mb-4">Payment Method</h5>
                <div class="border p-3 mb-3">
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="payment" id="pay1" checked>
                        <label class="form-check-label fw-bold" for="pay1">Secure EFT / Card</label>
                    </div>
                </div>

                <button type="submit" class="btn-pay mt-4">Place Order</button>
            </form>
        </div>

        <!-- Right: Order Summary -->
        <div class="col-lg-5">
            <div class="summary-box">
                <h5 class="fw-bold text-uppercase mb-4 border-bottom pb-2">Your Order</h5>
                <?php
                foreach ($_SESSION['cart'] as $id => $qty):
                    $id = mysqli_real_escape_string($conn, $id);
                    $res = mysqli_query($conn, "SELECT * FROM products WHERE id = '$id'");
                    $item = mysqli_fetch_assoc($res);
                    if($item):
                        $total = $item['price'] * $qty;
                        $subtotal += $total;
                ?>
                    <div class="d-flex justify-content-between mb-3 small">
                        <span><?php echo htmlspecialchars($item['product_name']); ?> (x<?php echo $qty; ?>)</span>
                        <span class="fw-bold">R <?php echo number_format($total, 2); ?></span>
                    </div>
                <?php endif; endforeach; ?>

                <hr>
                <div class="d-flex justify-content-between mb-2">
                    <span class="text-muted">Subtotal</span>
                    <span>R <?php echo number_format($subtotal, 2); ?></span>
                </div>
                <div class="d-flex justify-content-between mb-4">
                    <span class="text-muted">Shipping</span>
                    <span>R <?php echo number_format($shipping, 2); ?></span>
                </div>
                <div class="d-flex justify-content-between fs-4 fw-black">
                    <span>TOTAL</span>
                    <span style="color: var(--studio-blue);">R <?php echo number_format($subtotal + $shipping, 2); ?></span>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>