<?php
require('connection.inc.php');
require('security.php');

error_reporting(E_ALL);
ini_set('display_errors', 1);

$order_id = $_GET['order_id'] ?? '';

if ($order_id) {
    $stmt = $conn->prepare("SELECT * FROM orders WHERE order_id = ? AND payment_status = 'Paid'");
    $stmt->bind_param("s", $order_id);
    $stmt->execute();
    $result = $stmt->get_result();

    if ($result->num_rows === 0) {
        header("Location: index.php");
        exit;
    }

    $order = $result->fetch_assoc();
    $stmt->close();

    
    $stmt2 = $conn->prepare("
    SELECT op.*, pu.unit_name AS unit, p.product_name, pi.product_img
    FROM order_items op
    JOIN product_units pu ON op.unit_id = pu.unit_id
    JOIN products p ON op.product_id = p.product_id
    LEFT JOIN (
        SELECT product_id, MIN(img_id) as min_img_id
        FROM product_imgs
        GROUP BY product_id
    ) first_img ON p.product_id = first_img.product_id
    LEFT JOIN product_imgs pi ON pi.product_id = first_img.product_id AND pi.img_id = first_img.min_img_id
    WHERE op.order_id = ?
");

    $stmt2->bind_param("s", $order_id);
    $stmt2->execute();
    $products = $stmt2->get_result();
} else {
    header("Location: index.php");
    exit;
}
?>



<!doctype html>
<html class="no-js" lang="zxx">
<head>
      <meta charset="utf-8">
      <meta http-equiv="x-ua-compatible" content="ie=edge">
      <title>LoveBeri</title>
      <meta name="description" content="">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="shortcut icon" type="image/x-icon" href="assets/img/allnew/logo.png">

      <!-- CSS here -->
      <link rel="stylesheet" href="assets/css/bootstrap.min.css">
      <link rel="stylesheet" href="assets/css/animate.css">
      <link rel="stylesheet" href="assets/css/swiper-bundle.css">
      <link rel="stylesheet" href="assets/css/slick.css">
      <link rel="stylesheet" href="assets/css/magnific-popup.css">
      <link rel="stylesheet" href="assets/css/spacing.css">
      <link rel="stylesheet" href="assets/css/meanmenu.css">
      <link rel="stylesheet" href="assets/css/nice-select.css">
      <link rel="stylesheet" href="assets/css/fontawesome.min.css">
      <link rel="stylesheet" href="assets/css/icon-dukamarket.css">
      <link rel="stylesheet" href="assets/css/jquery-ui.css">
      <link rel="stylesheet" href="assets/css/main.css">
   </head>
   <body>


      <!-- Scroll-top -->
      <button class="scroll-top scroll-to-target" data-target="html">
         <i class="icon-chevrons-up"></i>
      </button>
      <!-- Scroll-top-end-->


      <!-- header-area-start -->
     <?php 
     include 'header.php'
     ?>
      <!-- header-area-end -->

      <main>

         <!-- breadcrumb-area-start -->
         <div class="breadcrumb__area pt-5 pb-5">
            <div class="container">
               <div class="row">
                  <div class="col-lg-12">
                     <div class="tp-breadcrumb__content">
                        <div class="tp-breadcrumb__list">
                           <span class="tp-breadcrumb__active"><a href="index.php">Home</a></span>
                           <span class="dvdr">/</span>
                           <span>Order Details</span>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
         
         <style>
    .order-wrapper {
      max-width: 1100px;
      margin: 50px auto;
      padding: 20px;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    .order-wrapper h1 {
      text-align: center;
      font-size: 32px;
      font-weight: bold;
      margin-bottom: 30px;
      letter-spacing: 1px;
    }

    .order-box {
      background-color: #fff;
      padding: 20px;
      border-radius: 12px;
      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    }

    .order-table {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 20px;
    }

    .order-table th {
      background-color: #e9f1ff;
      padding: 10px;
      text-align: left;
      font-weight: 600;
      border: 1px solid #ddd;
    }

    .order-table td {
      padding: 10px;
      border: 1px solid #ddd;
    }

    .order-address {
      font-size: 15px;
      margin: 10px 0;
    }

    .order-address strong {
      color: #000;
    }

    hr {
      margin: 20px 0;
      border: none;
      border-top: 1px solid #ccc;
    }

    .product-title {
      font-weight: 600;
      font-size: 18px;
      margin-bottom: 10px;
    }

    .product-box {
      display: flex;
      align-items: center;
      gap: 20px;
    }

    .product-box img {
      width: 80px;
      height: auto;
      border-radius: 8px;
      border: 1px solid #eee;
    }

    .product-details a {
      font-weight: 600;
      text-decoration: underline;
      color: #007bff;
    }

    .product-details p {
      margin: 5px 0;
      font-size: 15px;
    }

  </style>
        <div class="order-wrapper container py-4">
        <h1>ORDER DETAILS</h1>

       <div class="order-box p-4 border rounded shadow-sm">
    <table class="table table-bordered">
        <thead class="table-light">
            <tr>
                <th>Order ID</th>
                <th>Name</th>
                <th>Phone No.</th>
                <th>Email</th>
                <th>Amount</th>
                <th>Order Date</th>
                <th>Status</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><?= htmlspecialchars($order['order_id']) ?></td>
                <td><?= htmlspecialchars($order['first_name'] . ' ' . $order['last_name']) ?></td>
                <td><?= htmlspecialchars($order['phone']) ?></td>
                <td><?= htmlspecialchars($order['email']) ?></td>
                <td><strong>₹<?= htmlspecialchars($order['subtotal']) ?></strong></td>
                <td><?= date("d-m-Y", strtotime($order['created_at'])) ?></td>
               <td>
<?php
$status = strtolower($order['status']);

if ($status == 'delivered') {
    $deliveredOn = !empty($order['delivered_on']) ? date('d M Y, h:i A', strtotime($order['delivered_on'])) : '';
    echo '<span class="badge bg-success">Delivered</span>';
    if ($deliveredOn) {
        echo "<div class='text-muted small'>On: $deliveredOn</div>";
    }
} elseif ($status == 'shipped') {
    $shippedOn = !empty($order['shipped_on']) ? date('d M Y, h:i A', strtotime($order['shipped_on'])) : '';
    echo '<span class="badge bg-warning text-dark">Shipped</span>';
    if ($shippedOn) {
        echo "<div class='text-muted small'>On: $shippedOn</div>";
    }
} else {
    echo '<span class="badge bg-secondary">Not Shipped Yet</span>';
}
?>
</td>


            </tr>
        </tbody>
    </table>

    <p><strong>Address:</strong> <?= nl2br(htmlspecialchars($order['address'])) ?></p>

    <hr>

    <div class="product-title h4 mt-4">Product Details</div>
    <?php while ($row = $products->fetch_assoc()): ?>
        <div class="product-box d-flex align-items-start gap-3 border-bottom py-3">
            <img src="admin/<?= htmlspecialchars($row['product_img'] ?? 'assets/img/no-image.png') ?>" 
                 alt="<?= htmlspecialchars($row['product_name']) ?>" 
                 style="width: 150px; height: 150px; padding: 10px; object-fit: cover;" >
            <div>
                <div class="fw-bold"><?= htmlspecialchars($row['product_name']) ?></div>
                <p><strong>Quantity:</strong> <?= htmlspecialchars($row['quantity']) ?></p>
                <p><strong>Unit:</strong> <?= htmlspecialchars($row['unit']) ?></p>
                <p><strong>Unit Price:</strong> ₹<?= htmlspecialchars($row['unit_price']) ?></p>
            </div>
        </div>
    <?php endwhile; ?>
</div>

    </div>
      </main>

     <?php 
     include "footer.php"
     ?>
      <!-- footer-area-end -->
      <!-- JS here -->
      <script src="assets/js/jquery.js"></script>
      <script src="assets/js/waypoints.js"></script>
      <script src="assets/js/bootstrap.bundle.min.js"></script>
      <script src="assets/js/swiper-bundle.js"></script>
      <script src="assets/js/nice-select.js"></script>
      <script src="assets/js/slick.js"></script>
      <script src="assets/js/magnific-popup.js"></script>
      <script src="assets/js/counterup.js"></script>
      <script src="assets/js/wow.js"></script>
      <script src="assets/js/isotope-pkgd.js"></script>
      <script src="assets/js/imagesloaded-pkgd.js"></script>
      <script src="assets/js/countdown.js"></script>
      <script src="assets/js/ajax-form.js"></script>
      <script src="assets/js/jquery-ui.js"></script>
      <script src="assets/js/meanmenu.js"></script>
      <script src="assets/js/main.js"></script>
   </body>
</html>
