<?php

session_start();

require_once "config/database.php";


/* ================= GET ORDER ID ================= */

$order_id = isset($_GET["id"]) ? (int)$_GET["id"] : 0;


/* ================= VALIDATE ORDER ID ================= */

if ($order_id <= 0) {
    header("Location: shop.php");
    exit;
}


/* ================= GET ORDER DETAILS ================= */

$stmt = $conn->prepare("
    SELECT
        id,
        customer_name,
        phone1,
        phone2,
        address,
        city,
        total_amount
    FROM orders
    WHERE id = ?
");

$stmt->bind_param("i", $order_id);
$stmt->execute();

$result = $stmt->get_result();

$order = $result->fetch_assoc();

$stmt->close();


/* ================= ORDER NOT FOUND ================= */

if (!$order) {
    echo "Order not found.";
    exit;
}


/* ================= GET ORDER ITEMS ================= */

$item_stmt = $conn->prepare("
    SELECT
        product_name,
        colour,
        image,
        quantity,
        price
    FROM order_items
    WHERE order_id = ?
");

$item_stmt->bind_param("i", $order_id);
$item_stmt->execute();

$items_result = $item_stmt->get_result();

?>

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">

    <title>Order Successful - Muthu Jewellers</title>


    <style>

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }


        body {
            font-family: Arial, sans-serif;
            background: #fffaf5;
            color: #111;
        }


        /* ================= HEADER ================= */

        header {
            background: #111;
            color: white;

            padding: 18px 7%;

            display: flex;
            justify-content: space-between;
            align-items: center;
        }


        .logo img {
            width: 190px;
            height: 55px;
            object-fit: contain;
            display: block;
        }


        nav {
            display: flex;
            gap: 30px;
        }


        nav a {
            color: white;
            text-decoration: none;
            font-size: 18px;
        }


        nav a:hover {
            color: #d4af37;
        }


        /* ================= CONTAINER ================= */

        .container {
            width: 90%;
            max-width: 1000px;

            margin: 45px auto;
        }


        /* ================= SUCCESS MESSAGE ================= */

        .success-box {
            background: white;

            border-radius: 15px;

            padding: 35px;

            box-shadow:
                0 5px 20px
                rgba(0,0,0,0.10);

            text-align: center;

            margin-bottom: 25px;
        }


        .success-icon {
            font-size: 55px;
            margin-bottom: 15px;
        }


        .success-box h1 {
            color: #b8860b;

            font-size: 36px;

            margin-bottom: 12px;
        }


        .success-box p {
            font-size: 18px;
            color: #555;
        }


        .order-number {
            margin-top: 15px;

            font-size: 20px;

            font-weight: bold;

            color: #111;
        }


        /* ================= DETAILS BOX ================= */

        .details-box {
            background: white;

            border-radius: 15px;

            padding: 30px;

            box-shadow:
                0 5px 20px
                rgba(0,0,0,0.10);

            margin-bottom: 25px;
        }


        .section-title {
            font-size: 25px;

            margin-bottom: 20px;

            color: #222;

            border-bottom: 2px solid #d4af37;

            padding-bottom: 10px;
        }


        /* ================= CUSTOMER DETAILS ================= */

        .customer-details {
            display: grid;

            grid-template-columns: 1fr 1fr;

            gap: 15px 30px;
        }


        .detail {
            font-size: 17px;

            color: #555;

            line-height: 1.6;
        }


        .detail strong {
            color: #111;
        }


        .address {
            grid-column: 1 / -1;
        }


        /* ================= ORDER ITEMS ================= */

        .order-item {
            display: flex;

            align-items: center;

            gap: 20px;

            padding: 20px 0;

            border-bottom: 1px solid #ddd;
        }


        .order-item:last-child {
            border-bottom: none;
        }


        .order-item img {
            width: 110px;
            height: 110px;

            object-fit: cover;

            border-radius: 10px;

            border: 1px solid #ddd;
        }


        .item-info {
            flex: 1;
        }


        .item-info h3 {
            font-size: 21px;

            margin-bottom: 8px;
        }


        .item-info p {
            color: #555;

            margin-bottom: 5px;

            font-size: 16px;
        }


        .item-price {
            color: #b8860b;

            font-weight: bold;

            font-size: 19px;
        }


        /* ================= TOTAL ================= */

        .total {
            text-align: right;

            margin-top: 20px;

            padding-top: 20px;

            border-top: 2px solid #ddd;

            font-size: 27px;

            font-weight: bold;

            color: #b8860b;
        }


        /* ================= BUTTONS ================= */

        .buttons {
            display: flex;

            justify-content: center;

            gap: 15px;

            margin-top: 30px;
        }


        .btn {
            display: inline-block;

            padding: 13px 25px;

            border-radius: 7px;

            text-decoration: none;

            font-size: 17px;

            font-weight: bold;
        }


        .shop-btn {
            background: #111;

            color: white;
        }


        .shop-btn:hover {
            background: #333;
        }


        .home-btn {
            background: #d4af37;

            color: #111;
        }


        .home-btn:hover {
            background: #b8860b;
        }


        /* ================= FOOTER ================= */

        footer {
            background: #111;

            color: white;

            text-align: center;

            padding: 22px;

            margin-top: 50px;
        }


        footer span {
            color: #d4af37;

            font-weight: bold;
        }


        /* ================= RESPONSIVE ================= */

        @media (max-width: 700px) {

            header {
                flex-direction: column;

                gap: 15px;
            }


            nav {
                gap: 15px;

                flex-wrap: wrap;

                justify-content: center;
            }


            .customer-details {
                grid-template-columns: 1fr;
            }


            .address {
                grid-column: auto;
            }


            .order-item {
                flex-direction: column;

                align-items: flex-start;
            }


            .buttons {
                flex-direction: column;
            }


            .btn {
                text-align: center;
            }

        }

    </style>

</head>


<body>


<!-- ================= HEADER ================= -->

<header>

    <div class="logo">

        <img src="Images/logo.png"
             alt="Muthu Jewellers">

    </div>


    <nav>

        <a href="index.php">
            Home
        </a>

        <a href="shop.php">
            Shop
        </a>

        <a href="cart.php">
            Cart 🛒
        </a>

        <a href="contact.php">
            Contact
        </a>

    </nav>

</header>


<!-- ================= MAIN ================= -->

<div class="container">


    <!-- SUCCESS -->

    <div class="success-box">

        <div class="success-icon">
            🎉
        </div>


        <h1>
            Order Placed Successfully!
        </h1>


        <p>
            Thank you for shopping with Muthu Jewellers.
        </p>


        <div class="order-number">

            Order ID:
            #<?= htmlspecialchars($order["id"]) ?>

        </div>

    </div>


    <!-- CUSTOMER DETAILS -->

    <div class="details-box">

        <h2 class="section-title">
            Customer Details
        </h2>


        <div class="customer-details">


            <div class="detail">

                <strong>
                    Full Name:
                </strong>

                <?= htmlspecialchars($order["customer_name"]) ?>

            </div>


            <div class="detail">

                <strong>
                    Phone Number 1:
                </strong>

                <?= htmlspecialchars($order["phone1"]) ?>

            </div>


            <div class="detail">

                <strong>
                    Phone Number 2:
                </strong>

                <?= htmlspecialchars($order["phone2"]) ?>

            </div>


            <div class="detail">

                <strong>
                    Nearest City / Town:
                </strong>

                <?= htmlspecialchars($order["city"]) ?>

            </div>


            <div class="detail address">

                <strong>
                    Delivery Address:
                </strong>

                <?= nl2br(htmlspecialchars($order["address"])) ?>

            </div>


        </div>

    </div>


    <!-- ORDER DETAILS -->

    <div class="details-box">

        <h2 class="section-title">
            Order Details
        </h2>


        <?php while ($item = $items_result->fetch_assoc()): ?>


            <?php

            $item_total =
                (float)$item["price"] *
                (int)$item["quantity"];

            ?>


            <div class="order-item">


                <?php if (!empty($item["image"])): ?>

                    <img
                        src="assets/images/<?= htmlspecialchars($item["image"]) ?>"
                        alt="<?= htmlspecialchars($item["product_name"]) ?>"
                    >

                <?php endif; ?>


                <div class="item-info">


                    <h3>
                        <?= htmlspecialchars($item["product_name"]) ?>
                    </h3>


                    <p>

                        <strong>
                            Colour:
                        </strong>

                        <?= htmlspecialchars($item["colour"]) ?>

                    </p>


                    <p>

                        <strong>
                            Quantity:
                        </strong>

                        <?= (int)$item["quantity"] ?>

                    </p>


                    <p class="item-price">

                        Rs.
                        <?= number_format($item_total, 2) ?>

                    </p>


                </div>


            </div>


        <?php endwhile; ?>


        <div class="total">

            Total:
            Rs.
            <?= number_format($order["total_amount"], 2) ?>

        </div>


        <!-- BUTTONS -->

        <div class="buttons">

            <a
                href="shop.php"
                class="btn shop-btn"
            >
                Continue Shopping 🛍️
            </a>


            <a
                href="index.php"
                class="btn home-btn"
            >
                Back to Home 🏠
            </a>

        </div>


    </div>


</div>


<!-- ================= FOOTER ================= -->

<footer>

    © 2026
    <span>
        Muthu Jewellers
    </span>
    . All Rights Reserved.

</footer>


</body>

</html>

<?php

$item_stmt->close();

?>