One Hat Cyber Team

View File Name : order.php

<?php
session_name('vaishnavi_awaha');
session_start();
include 'admin/connection.inc.php';
if (!$conn) {
    die("Database connection failed");
}
$order_items = [];
if (isset($_SESSION['user_id'])) {
    $user_id = $_SESSION['user_id'];

    $stmt = $conn->prepare("
        SELECT 
            o.order_id, o.user_id, o.total_amount, o.billing_name, 
            o.billing_address, o.billing_city, o.billing_state, 
            o.billing_zip, o.billing_phone, o.company_name, 
            o.payment_method, o.razorpay_payment_id, o.payment_done_on, 
            o.order_status, o.shipped_date, o.delivered_date, o.created_at, 
            j.product_id, 
            COALESCE(p.product_name, op.product_name) AS product_name,
            COALESCE(p.product_discount_price, op.product_discount_price) AS product_discount_price,
            COALESCE(p.product_img, op.product_img, 'default-placeholder.png') AS product_img
        FROM orders o
        LEFT JOIN JSON_TABLE(
            o.products, 
            '$[*]' 
            COLUMNS (product_id INT PATH '$.product_id')
        ) AS j ON j.product_id IS NOT NULL
        LEFT JOIN products p ON j.product_id = p.id
        LEFT JOIN other_products op ON j.product_id = op.id
        WHERE o.user_id = ?
        ORDER BY o.created_at DESC;
    ");

    // Bind user_id parameter
    $stmt->bind_param('i', $user_id);
    $stmt->execute();
    $result = $stmt->get_result();

    // Process orders
    while ($row = $result->fetch_assoc()) {
        $order_id = $row['order_id'];

        // Store order details once
        if (!isset($order_items[$order_id])) {
            $order_items[$order_id]['order_details'] = [
                'order_id' => $row['order_id'],
                'order_status' => $row['order_status'],
                'shipped_date' => $row['shipped_date'],
                'delivered_date' => $row['delivered_date'],
                'total_amount' => $row['total_amount'],
                'created_at' => $row['created_at']
            ];
        }

        if (!empty($row['product_id'])) {
            $order_items[$order_id]['products'][] = [
                'product_id' => $row['product_id'],
                'product_name' => $row['product_name'],
                'product_discount_price' => $row['product_discount_price'],
                'product_img' => $row['product_img']
            ];
        }
    }
    $stmt->close();
}
?>
<!DOCTYPE html>
<html lang="zxx">
<head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <meta name="description" content="eCommerce,shop,fashion">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <!--====== Title ======-->
         <title>Awaha</title>
        <!--====== Favicon Icon ======-->
        <link rel="shortcut icon" href="assets/images/logo/awaha.png" type="image/png">
        <!--====== Google Fonts ======-->
        <link href="https://fonts.googleapis.com/css2?family=Aoboshi+One&amp;family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&amp;display=swap" rel="stylesheet">
        <!--====== Flaticon css ======-->
        <link rel="stylesheet" href="assets/fonts/flaticon/flaticon_pesco.css">
        <!--====== FontAwesome css ======-->
        <link rel="stylesheet" href="assets/fonts/fontawesome/css/all.min.css">
        <!--====== Bootstrap css ======-->
        <link rel="stylesheet" href="assets/vendor/bootstrap/css/bootstrap.min.css">
        <!--====== Slick-popup css ======-->
        <link rel="stylesheet" href="assets/vendor/slick/slick.css">
        <!--====== Nice Select css ======-->
        <link rel="stylesheet" href="assets/vendor/nice-select/css/nice-select.css">
        <!--====== Magnific-popup css ======-->
        <link rel="stylesheet" href="assets/vendor/magnific-popup/dist/magnific-popup.css">
        <!--====== Jquery UI css ======-->
        <link rel="stylesheet" href="assets/vendor/jquery-ui/jquery-ui.min.css">
        <!--====== Animate css ======-->
        <link rel="stylesheet" href="assets/vendor/aos/aos.css">
        <!--====== Default css ======-->
        <link rel="stylesheet" href="assets/css/default.css">
        <!--====== Style css ======-->
        <link rel="stylesheet" href="assets/css/style.css">
       <style>
          /* Order Container */
.order-container {
    max-width: 1100px;
    margin: 30px auto;
    padding: 20px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    font-family: Arial, sans-serif;
}

/* Header Section */
.order-header {
    display: flex;
    justify-content: space-between;
    background: #f1f1f1;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px;
}

.order-info p {
    margin: 0;
    font-size: 14px;
    color: #333;
}

.order-info a {
    color: #0073e6;
    text-decoration: none;
}

.order-id p {
    margin: 0;
    font-size: 14px;
    color: #333;
}

.order-id a {
    font-size: 14px;
    color: #0073e6;
    text-decoration: none;
}

/* Delivery Details */
.order-delivery {
    padding: 10px 0;
    border-bottom: 1px solid #ddd;
}

.order-delivery h4 {
    margin: 0;
    font-size: 16px;
    color: #333;
}

.order-delivery p {
    font-size: 14px;
    color: #666;
}

/* Order Item */
.order-item {
    padding: 15px 0;
}

.item-details h5 {
    font-size: 16px;
    margin: 5px 0;
}

.item-details a {
    color: #0073e6;
    text-decoration: none;
}

.item-details p {
    font-size: 14px;
    color: #666;
}

.buy-again {
    background: #0044cc;
    color: white;
    border: none;
    padding: 7px 15px;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
}

/* Order Actions */
.order-actions {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.btn {
    padding: 10px;
    font-size: 14px;
    cursor: pointer;
    border-radius: 5px;
}

.btn.primary {
    background: #0044cc;
    color: white;
    border: none;
}

.btn.secondary {
    background: #f1f1f1;
    color: #333;
    border: 1px solid #ddd;
}

       </style>
    </head>
    <body>
        <div class="offcanvas__overlay"></div>
        <!--====== Start Sidemenu-wrapper-cart Area ======-->
         <div class="sidemenu-wrapper-cart">
    <div class="sidemenu-content">
        <div class="widget widget-shopping-cart">
            <h4>My cart</h4>
            <div class="sidemenu-cart-close"><i class="far fa-times"></i></div>
            <div class="widget-shopping-cart-content">
                <ul class="pesco-mini-cart-list" id="cart-items-list">
                    <!-- Cart items will be dynamically loaded here -->
                </ul>
                <div class="cart-mini-total">
                    <div class="cart-total">
                        <span><strong>Subtotal:</strong></span> 
                        <span class="amount" id="cart-subtotal">0.00</span>
                    </div>
                </div>
                <div class="cart-button-box">
                    <a href="checkout.php" class="theme-btn style-one">Proceed to checkout</a>
                </div>
            </div>
        </div>
    </div>
</div><!--====== End Sidemenu-wrapper-cart Area ======-->
        <!--====== Start Header Section ======-->
       <?php include 'header.php' ?>
       <!--====== End Header Section ======-->
        <!--====== Main Bg  ======-->
        <main class="main-bg">
            <!--====== Start Page Banner Section ======-->
            <section class="page-banner">
                <div class="page-banner-wrapper p-r z-1">
                    <svg class="lineanm" viewBox="0 0 1920 347" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path class="line" d="M-39 345.187C70 308.353 397.628 293.477 436 145.186C490 -63.5 572 -57.8156 688 255.186C757.071 441.559 989.5 -121.315 1389 98.6856C1708.6 274.686 1940.33 156.519 1964.5 98.6856" stroke="white" stroke-width="3" stroke-dasharray="2 2"/>
                    </svg>
                    <div class="page-image"><img src="assets/images/soap/bgrsoap.png" alt="image"></div>
                    <svg class="page-svg" xmlns="http://www.w3.org/2000/svg">
                        <path d="M21.1742 33.0065C14.029 35.2507 7.5486 39.0636 0 40.7339V86H1937V64.9942C1933.1 60.1623 1912.65 65.1777 1904.51 62.6581C1894.22 59.4678 1884.93 55.0079 1873.77 52.7742C1861.2 50.2585 1823.41 36.3854 1811.99 39.9252C1805.05 42.0727 1796.94 37.6189 1789.36 36.6007C1769.18 33.8879 1747.19 31.1848 1726.71 29.7718C1703.81 28.1919 1678.28 27.0012 1657.53 34.4442C1636.45 42.005 1606.07 60.856 1579.5 55.9191C1561.6 52.5906 1543.41 47.0959 1528.45 56.9075C1510.85 68.4592 1485.74 74.2518 1460.44 76.136C1432.32 78.2297 1408.53 70.6879 1384.73 62.2987C1339.52 46.361 1298.19 27.1677 1255.08 9.28534C1242.58 4.10111 1214.68 15.4762 1200.55 16.6533C1189.77 17.5509 1181.74 15.4508 1172.12 12.8795C1152.74 7.70033 1133.23 2.88525 1111.79 2.63621C1088.85 2.36971 1073.94 7.88289 1056.53 15.8446C1040.01 23.3996 1027.48 26.1777 1007.8 26.1777C993.757 26.1777 975.854 25.6887 962.844 28.9632C941.935 34.2258 932.059 38.7874 914.839 28.6037C901.654 20.8061 866.261 -2.56499 844.356 7.12886C831.264 12.9222 820.932 21.5146 807.663 27.5255C798.74 31.5679 779.299 42.0561 766.33 39.1166C758.156 37.2637 751.815 31.6349 745.591 28.2443C730.967 20.2774 715.218 13.2948 695.846 10.723C676.168 8.11038 658.554 23.1787 641.606 27.4357C617.564 33.4742 602.283 27.7951 579.244 27.7951C568.142 27.7951 548.414 30.4002 541.681 23.6618C535.297 17.2722 530.162 9.74921 523.263 3.71444C517.855 -1.01577 505.798 -0.852017 498.318 2.09709C479.032 9.7007 453.07 10.0516 431.025 9.64475C407.556 9.21163 368.679 1.61612 346.618 10.3636C319.648 21.0575 291.717 53.8338 254.67 45.2266C236.134 40.9201 225.134 37.5813 204.78 40.7339C186.008 43.6415 171.665 50.7785 156.051 57.3567C146.567 61.3523 152.335 52.6281 151.12 47.9222C149.535 41.7853 139.994 34.5585 132.991 30.4008C120.206 22.8098 90.2848 24.3246 74.2546 24.6502C55.5552 25.0301 37.9201 27.747 21.1742 33.0065Z" fill="#FFFAF3"/>
                    </svg>
                    <div class="shape shape-one"><span></span></div>
                    <div class="shape shape-two"><span></span></div>
                    <div class="shape shape-three"><span><img src="assets/images/shape/curved-arrow.png" alt=""></span></div>
                      
                    <div class="container">
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="page-banner-content">
                                    <h1> Order </h1>
                                    <ul class="breadcrumb-link">
                                        <li><a href="index.php">Home</a></li>
                                        <li><i class="far fa-long-arrow-right"></i></li>
                                        <li class="active">Order product</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section><!--====== End Page Banner Section ======-->
           <!--====== Start About Us Section ======-->
            <section class="about-us-section pt-20">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-xl-12">
                            <!--====== Section Image Box ======-->
                          <div class="container wishlist-container">
    <h2 class="text-center">Your Orders</h2>
<!-- Display Orders -->
<?php if (!empty($order_items)): ?>
        <?php foreach ($order_items as $order_id => $order_data): ?>
            <?php $order_details = $order_data['order_details']; ?>
            

<div class="order-container">
    <div class="order-header">
        <div class="order-info">
            <p><strong>ORDER PLACED</strong><br><?php echo date("d-m-Y", strtotime($order_details['created_at'])); ?></p>

            <p><strong>TOTAL</strong><br>₹<?php echo number_format($order_details['total_amount'], 2); ?></p>
        </div>
        <div class="order-id">
            <p><strong>ORDER #</strong> <?php echo htmlspecialchars($order_details['order_id']); ?></p>
        </div>
    </div>

    <div class="order-delivery">
        <h4>Shipped Date:</strong> <?php echo !empty($order_details['shipped_date']) ? htmlspecialchars($order_details['shipped_date']) : 'Pending'; ?></h4>
          <h4>Delivered Date:</strong> <?php echo !empty($order_details['delivered_date']) ? htmlspecialchars($order_details['delivered_date']) : 'Pending'; ?></h4>
    </div>


<?php if (!empty($order_data['products'])): ?>
                        <?php foreach ($order_data['products'] as $item): ?>
    <div class="order-item">
        <div class="item-details">
            
            <h5><a href="#"><?php echo htmlspecialchars($item['product_name']); ?></a></h5>
            <p><strong>₹<?php echo number_format($item['product_discount_price'], 2); ?></strong></p>
          
        </div>
    </div>
    
    <?php endforeach; ?>
                    <?php else: ?>
                        <p>No products found for this order.</p>
                    <?php endif; ?>

    <!--<div class="order-actions">-->
    <!--    <button class="btn primary">Return or replace items</button>-->
    <!--    <button class="btn secondary">Share gift receipt</button>-->
    <!--    <button class="btn secondary">Leave seller feedback</button>-->
    <!--</div>-->
</div>
 <?php endforeach; ?>
    <?php else: ?>
        <p class="text-center">You have not placed any orders yet.</p>
    <?php endif; ?>
</div>
                        </div>
                       
                    </div>
                </div>
            </section><!--====== End About Us Section ======-->
            <!--====== Start Features Section ======-->
           
        </main>
        <!--====== Start Footer Main  ======-->
       <?php include 'footer.php' ?>
       <script>
    function removeFromWishlist(productId) {
    fetch('remove-wishlist.php', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        body: 'product_id=' + productId
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload(); // Refresh the page after removal
        } else {
            alert(data.message);
        }
    });
}

</script>
       
       <script>     
           document.addEventListener('DOMContentLoaded', () => {
    const cartContainer = document.querySelector('#cart-items-list');
    const cartSubtotal = document.querySelector('#cart-subtotal');

    // Fetch cart items from server or localStorage
    fetch('fetch-cart-items.php')
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                let itemsHTML = '';
                let subtotal = 0;

                data.cart_items.forEach(item => {
                    const { product_id, product_name, product_discount_price, product_img, quantity } = item;

                    // Create a cart item list entry
                    itemsHTML += `
                        <li class="sidebar-cart-item" data-product-id="₹{product_id}">
                            <a href="#" class="remove-cart" data-product-id="${product_id}">
                                <i class="far fa-trash-alt"></i>
                            </a>
                            <a href="#">
                                <img src="awaha/${product_img}" alt="${product_name}">
                                ${product_name}
                            </a>
                            <span class="quantity">${quantity} × <span><span class="currency">₹</span>${product_discount_price}</span></span>
                        </li>
                    `;
                    // Calculate the subtotal
                    subtotal += product_discount_price * quantity;   
                });

                // Update cart UI with new cart items
                cartContainer.innerHTML = itemsHTML;
                cartSubtotal.innerHTML = `<span class="currency">₹</span>${subtotal.toFixed(2)}`;
            } else {
                cartContainer.innerHTML = '<li>No items in the cart</li>';
            }
        })
        .catch(error => {
            console.error('Error fetching cart items:', error);
            cartContainer.innerHTML = '<li>Error loading cart items</li>';
        });

    // Event delegation for removing items
    cartContainer.addEventListener('click', (event) => {
        if (event.target.closest('.remove-cart')) {
            event.preventDefault();
            const cartItem = event.target.closest('.sidebar-cart-item');
            const productId = cartItem.getAttribute('data-product-id');

            // Call an endpoint to remove the item from the cart
            fetch('remove-cart-item.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ product_id: productId }),
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        cartItem.remove(); // Remove item from the UI
                        updateSubtotal();
                    } else {
                        console.error(data.message);
                    }
                })
                .catch(error => console.error('Error removing item:', error));
        }
    });

    // Function to update subtotal
    function updateSubtotal() {
        let total = 0;
        const cartItems = document.querySelectorAll('.sidebar-cart-item');
        cartItems.forEach(item => {
            const quantity = parseInt(item.querySelector('.quantity').textContent.split(' × ')[0]);
            const price = parseFloat(item.querySelector('.quantity span span.currency').nextElementSibling.textContent);
            total += quantity * price;
        });
        cartSubtotal.innerHTML = `<span class="currency">$</span>${total.toFixed(2)}`;
    }
});
       </script>
       <!--====== End Footer Main  ======-->
        <!--====== Back To Top  ======-->
        <div class="back-to-top" ><i class="far fa-angle-up"></i></div>
        <!--====== Jquery js ======-->
        <script src="assets/vendor/jquery-3.7.1.min.js"></script>
        <!--====== Bootstrap js ======-->
        <script src="assets/vendor/popper/popper.min.js"></script>
        <!--====== Bootstrap js ======-->
        <script src="assets/vendor/bootstrap/js/bootstrap.min.js"></script>
        <!--====== Slick js ======-->
        <script src="assets/vendor/slick/slick.min.js"></script>
        <!--====== Magnific js ======-->
        <script src="assets/vendor/magnific-popup/dist/jquery.magnific-popup.min.js"></script>
        <!--====== Nice-select js ======-->
        <script src="assets/vendor/nice-select/js/jquery.nice-select.min.js"></script>
        <!--====== Jquery Ui js ======-->
        <script src="assets/vendor/jquery-ui/jquery-ui.min.js"></script>
        <!--====== SimplyCountdown js ======-->
        <script src="assets/vendor/simplyCountdown.min.js"></script>
        <!--====== Aos js ======-->
        <script src="assets/vendor/aos/aos.js"></script>
        <!--====== Main js ======-->
        <script src="assets/js/theme.js"></script>
    </body>
</html>