<?php 
session_start();
ob_start();
include('header.php');
include('connect.php');

$id=$_SESSION['id'];

$query=$con->query("SELECT * FROM orders WHERE user_id=$id");
$orders=mysqli_fetch_array($query);

$quer="SELECT order_items.*,orders.delivery_charge FROM order_items LEFT JOIN orders ON orders.id=order_items.order_id Where order_items.user_id='$id' and order_id!='' ORDER BY `id` DESC";

$res=mysqli_query($con,$quer);
$num=mysqli_num_rows($res);

?>
<!-- END nav -->
<style type="text/css">
	.tracking-order{

    }

    .timeline {
        position: relative;
        margin: 0 0 30px 0;
        padding: 0;
        list-style: none;
        background-color: #ecf0f5;
        padding: 30px;
    }
    .timeline:before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        width: 4px;
        background: #ddd;
        left: 60px;
        margin: 60px 0;
        border-radius: 2px
    }
    .timeline>li {
        position: relative;
        margin-right: 10px;
        margin-bottom: 30px
    }
    .timeline>li:before,
    .timeline>li:after {
        content: " ";
        display: table
    }
    .timeline>li:after {
        clear: both
    }
    .timeline>li>.timeline-item {
        -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
        border-radius: 3px;
        margin-top: 0;
        background: #fff;
        color: #444;
        margin-left: 60px;
        margin-right: 15px;
        padding: 0;
        position: relative
    }
    .timeline>li>.timeline-item>.time {
        color: #999;
        float: right;
        padding: 10px;
        font-size: 12px
    }
    .timeline>li>.timeline-item>.timeline-header {
        margin: 0;
        color: #555;
        border-bottom: 1px solid #f4f4f4;
        padding: 20px;
        font-size: 16px;
        line-height: 1.1
    }
    .timeline>li>.timeline-item>.timeline-header>a {
        font-weight: 600
    }
    .timeline>li>.timeline-item>.timeline-body,
    .timeline>li>.timeline-item>.timeline-footer {
        padding: 10px
    }
    .timeline>li>.fa,
    .timeline>li>.glyphicon,
    .timeline>li>.ion {
        width: 30px;
        height: 30px;
        font-size: 15px;
        line-height: 30px;
        position: absolute;
        color: #666;
        background: #d2d6de;
        border-radius: 50%;
        text-align: center;
        left: 18px;
        top: 15px;
    }
    .timeline>.time-label>span {
        font-weight: 600;
        padding: 5px;
        display: inline-block;
        background-color: #fff;
        border-radius: 4px
    }
    .timeline-inverse>li>.timeline-item {
        background: #f0f0f0;
        border: 1px solid #ddd;
        -webkit-box-shadow: none;
        box-shadow: none
    }
    .timeline-inverse>li>.timeline-item>.timeline-header {
        border-bottom-color: #ddd
    }
    .timeline .bg-blue {
        background-color: #0073b7 !important;
        color: #fff!important;
        text-transform: capitalize;
    }
</style>
<div class="hero-wrap hero-bread" style="background-image: url('images/my-oder.jpg');">
  <div class="container">
    <div class="row no-gutters slider-text align-items-center justify-content-center">
      <div class="col-md-9 ftco-animate text-center">
         <p class="breadcrumbs"><span class="mr-2"><a href="index.php" class="text-white">Home</a></span> <span>My Order</span></p>
         <h1 class="mb-0 bread">My Order</h1>
     </div>
 </div>
</div>
</div>



<section class="tracking-order py-5">
    <div class="container">
        <div class="row">
            <?php 
            $query=$con->query("SELECT * FROM orders WHERE user_id=$id");
            while($order=mysqli_fetch_array($query)){
               $status = json_decode($order['status']);
               ?>
               <div class="col-lg-6">
                <ul class="timeline">
                    <li class="time-label">
                        <span class="bg-blue">Received</span> <a class="btn btn-theme btn-sm px-3 float-right py-2" data-toggle="tooltip" title="View Details" href="view-details.php?id=<?=$order['id'];?>">View Details</a>
                    </li>
                    <li>
                        <i class="fa fa-circle bg-blue"></i>
                        <div class="timeline-item">
                            <h3 class="timeline-header"><?=date('d-m-Y h:i A',strtotime($order['date_added']))?></h3>
                        </div>
                    </li>
                    <?php foreach ($status as $s) { ?>
                        <li class="time-label">
                            <span class="bg-blue"><?=$s[0]?></span>
                        </li>
                        <li>
                            <i class="fa fa-circle bg-blue"></i>
                            <div class="timeline-item">
                                <h3 class="timeline-header"><?=$s[1]?></h3>
                            </div>
                        </li>
                    <?php } ?>
                </ul>
            </div>
        <?php } ?>
    </div>
</div>
</section>




<!-- <section class="ftco-section">
 <div class="container-fluid">
    <div class="row">
     <div class="col-md-12 ftco-animate">
        <table class="table table-striped table-bordered text-center">
          <thead class="thead-primary text-white">
            <tr>
              <th>S.no</th>
              <th>Total Items</th>
              <th>Delivery Charge</th>
              <th>Total</th>
              <th>Status</th>
              <th>Action</th>
          </tr>
      </thead>
      <?php 
      $query=$con->query("SELECT * FROM orders WHERE user_id=$id");
      $sno=1;
      while($order=mysqli_fetch_array($query)){
        if ($order['payment_method']=='cash on delivery' && $order['active_status']=='cancelled') {
            $delivery_charge='<span class="text-danger"> -'.$order['delivery_charge'].'<span>';
        }else{
            $delivery_charge=$order['delivery_charge'];
        }
        ?>
        <tr>
          <td><?=$sno++;?></td>
          <td><?=$num?></td>
          <td><?=$delivery_charge;?></td>
          <td><?=$order['total'];?></td>
          <td><?=$order['active_status'];?></td>
          <td><a class="btn btn-theme btn-sm px-3" data-toggle="tooltip" title="View Details" href="view-details.php?id=<?=$order['id'];?>">View Details</a>

            <?php if($order['active_status']=='' or $order['active_status']=='received'){?>
               <button class="btn btn-theme btn-sm px-3" onclick="cncl(<?php echo $order['id']; ?>)">cancel item</button>
           <?php } ?>

       </td>
   </tr>
<?php } ?>
</table>
</div>
</div>
</div>
</section> -->


<?php include('footer.php'); ?>



<!-- loader -->
<div id="ftco-loader" class="show fullscreen"><svg class="circular" width="48px" height="48px"><circle class="path-bg" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke="#eeeeee"/><circle class="path" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke-miterlimit="10" stroke="#F96D00"/></svg></div>


<script src="js/jquery.min.js"></script>
<script src="js/jquery-migrate-3.0.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.waypoints.min.js"></script>
<script src="js/jquery.stellar.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/aos.js"></script>
<script src="js/jquery.animateNumber.min.js"></script>
<script src="js/bootstrap-datepicker.js"></script>
<script src="js/scrollax.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBVWaKrjvy3MaE7SQ74_uJiULgl1JY0H2s&sensor=false"></script>
<script src="js/google-map.js"></script>
<script src="js/main.js"></script>

<script>

    function cncl(id){
      var verify = confirm("Do you really want to cancle this order!!!");
      if (verify) {
       $.ajax({
          url:'add_to_cart.php',
          method:'post',
          data:{cncl:'cncl',id:id},
          success:function(data){
             window.location.href = "my_order.php";
         }
     });
   }
}
</script>

</body>
</html>