<?php

session_start();

require_once "config/database.php";

$order = null;
$items_result = null;
$error = "";


/* ================= SEARCH ORDER ================= */

if ($_SERVER["REQUEST_METHOD"] === "POST") {

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

    $phone1 = isset($_POST["phone1"])
        ? trim($_POST["phone1"])
        : "";


    /* ================= VALIDATE ================= */

    if ($order_id <= 0 || empty($phone1)) {

        $error = "Please enter your Order ID and Phone Number.";

    } else {

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

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

        $stmt->bind_param("is", $order_id, $phone1);

        $stmt->execute();

        $result = $stmt->get_result();

        $order = $result->fetch_assoc();

        $stmt->close();


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

        if (!$order) {

            $error = "Order not found. Please check your Order ID and Phone Number.";

        } else {

            /* ================= 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>Track My Order - 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;

            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;
        }


        /* ================= SEARCH BOX ================= */

        .search-box {

            background: white;

            padding: 35px;

            border-radius: 15px;

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

            margin-bottom: 30px;
        }


        .search-box h1 {

            text-align: center;

            font-size: 32px;

            margin-bottom: 10px;

            color: #b8860b;
        }


        .search-box p {

            text-align: center;

            color: #555;

            font-size: 17px;

            margin-bottom: 25px;
        }


        .form-group {

            margin-bottom: 18px;
        }


        .form-group label {

            display: block;

            font-weight: bold;

            margin-bottom: 8px;

            font-size: 16px;
        }


        .form-group input {

            width: 100%;

            padding: 13px;

            border: 1px solid #ccc;

            border-radius: 7px;

            font-size: 16px;
        }


        .form-group input:focus {

            outline: none;

            border-color: #d4af37;
        }


        .search-btn {

            width: 100%;

            padding: 14px;

            background: #d4af37;

            color: #111;

            border: none;

            border-radius: 7px;

            font-size: 18px;

            font-weight: bold;

            cursor: pointer;
        }


        .search-btn:hover {

            background: #111;

            color: #d4af37;
        }


        /* ================= ERROR ================= */

        .error {

            background: #ffe5e5;

            color: #b00000;

            padding: 15px;

            border-radius: 7px;

            margin-bottom: 20px;

            text-align: center;

            font-weight: bold;
        }


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

        .details-box {

            background: white;

            border-radius: 15px;

            padding: 30px;

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

            margin-bottom: 25px;
        }


        .success-title {

            text-align: center;

            color: #b8860b;

            font-size: 30px;

            margin-bottom: 10px;
        }


        .order-id {

            text-align: center;

            font-size: 20px;

            font-weight: bold;

            margin-bottom: 25px;
        }


        .section-title {

            font-size: 25px;

            margin-bottom: 20px;

            color: #222;

            border-bottom: 2px solid #d4af37;

            padding-bottom: 10px;
        }


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

        .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 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;
        }


        /* ================= 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;
            }

           .tracking-box {
    margin-top: 20px;
    padding: 15px;
    background: #fff8df;
    border: 1px solid #d4af37;
    border-radius: 8px;
    font-size: 16px;
}

.tracking-box strong {
    color: #b8860b;
}

.fardar-btn {
    display: inline-block;
    padding: 12px 22px;
    background: #d4af37;
    color: #111;
    text-decoration: none;
    border-radius: 7px;
    font-weight: bold;
}

.fardar-btn:hover {
    background: #111;
    color: #d4af37;
}

        }

    </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">


    <!-- ================= SEARCH ================= -->

    <div class="search-box">

        <h1>
            🔍 Track My Order
        </h1>

        <p>
            Enter your Order ID and Phone Number to view your order.
        </p>


        <?php if (!empty($error)): ?>

            <div class="error">
                <?= htmlspecialchars($error) ?>
            </div>

        <?php endif; ?>


        <form method="POST">


            <div class="form-group">

                <label>
                    Order ID *
                </label>

                <input
                    type="number"
                    name="order_id"
                    placeholder="Enter your Order ID"
                    required
                >

            </div>


            <div class="form-group">

                <label>
                    Phone Number *
                </label>

                <input
                    type="text"
                    name="phone1"
                    placeholder="Enter your phone number"
                    required
                >

            </div>


            <button
                type="submit"
                class="search-btn"
            >
                View My Order 🔎
            </button>


        </form>

    </div>


<?php if ($order): ?>


    <!-- ================= ORDER FOUND ================= -->

    <div class="details-box">

        <h2 class="success-title">
            Order Found! 🎉
        </h2>

        <div class="order-id">

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

        </div>


        <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>

            <?php if (!empty($order["tracking_number"])): ?>
    <div class="tracking-box">
        <strong>Fardar Tracking Number:</strong>
        <?= htmlspecialchars($order["tracking_number"]) ?>

        <br><br>

        <a href="https://www.fdedomestic.com/" target="_blank" class="fardar-btn">
            Track Parcel 🚚
        </a>
    </div>
<?php else: ?>
    <div class="tracking-box">
        <strong>Fardar Tracking Number:</strong>
        Not available yet
    </div>
<?php endif; ?>

        </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">

    <p>
        <strong>Items Total:</strong>
        Rs. <?= number_format(
            $order["total_amount"] - $order["delivery_charge"],
            2
        ) ?>
    </p>

    <p>
        <strong>Delivery Charge:</strong>
        Rs. <?= number_format(
            $order["delivery_charge"],
            2
        ) ?>
    </p>

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

</div>


    </div>


<?php endif; ?>


</div>


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

<footer>

    © 2026

    <span>
        Muthu Jewellers
    </span>

    . All Rights Reserved.

</footer>


</body>

</html>


<?php

if (isset($item_stmt)) {
    $item_stmt->close();
}

?>