במ12[cxvbcxvbxcvbcxvcxvbcvxcvbsdfsdfsdfsdfsdfsdfxcvbxcvxbbxqwqewqewv;'

]]jkjjgdjffksdkdxdsghfghdfghfgdfsdsdfsdfsfdsbcxvxcbccwewqeqwewqskfgj במ12[cxvbcxvbxcvbcxvcxvbcvxcvbsdfsdfsdfsdfsdfsdfxcvbxcvxbbxqwqewqewv;'

<?php
   include_once("header.php");
   if (isset($_REQUEST['m']) && isset($_REQUEST['o'])) {
    //print_r($_REQUEST); die();
     $track_condition="`order_id`='".$_REQUEST['o']."' AND `p_no`='".$_REQUEST['m']."'";
     $track_query=$sel_obj->display_rcd_desc('orders',$track_condition);
      if(is_array($track_query) || !empty($track_query))
      {
        foreach ($track_query as $track_data )
       {
                          
       }
      }
      //print_r($track_data); die();
      $order_id = $track_data['order_id'];
      if (!empty($track_data)) {
        $message = '<div class="alert alert-success alert-dismissible"><strong>Order ID : '.$order_id.' </strong></div>';
      }else{
        $message = '<div class="alert alert-danger alert-dismissible"><strong>Invailid Order ID : '.$order_id.' </strong></div>';
      }
   }
?>
<style type="text/css">
   #progressbar {
   margin-bottom: 3vh;
   overflow: hidden;
   color: #000;
   padding-left: 0px;
   margin-top: 3vh
   }
   #progressbar li {
   list-style-type: none;
   font-size: 0.8rem;
   width: 25%;
   text-align: left!important;
   float: left;
   position: relative;
   font-weight: 400;
   color: #000;
   }
   #progressbar #step1:before {
   content: "";
   color: #009688;
   width: 60px;
   height: 60px;
   margin-left: 0px !important;
   }
   #progressbar #step2:before {
   content: "";
   color: #009688;
   width: 60px;
   height: 60px;
   margin-left: 0;
   }
   #progressbar #step3:before {
   content: "";
   color: #009688;
   width: 60px;
   height: 60px;
   margin-left: 0; 
   }
   #progressbar #step4:before {
   content: "";
   color: rgb(151, 149, 149, 0.651);
   width: 60px;
   height: 60px;
   margin-left: 0px !important;
   }
   #progressbar #step5:before {
      content: "";
      color: red;
      width: 20px;
      height: 20px;
      margin-right: 0px !important;
      background: red;
    }
    #progressbar #step5:after {
        content: '';
        height: 3px;
        background: red;
        position: absolute;
        left: 0%;
        right: 0%;
        margin-bottom: 2vh;
        top: 8px;
        z-index: 1;
    }
   #progressbar li:before {
   line-height: 29px;
   display: block;
   font-size: 12px;
   background: rgb(151, 149, 149);
   border-radius: 50%;
   margin: auto;
   z-index: -1;
   margin-bottom: 1vh;
   }
   #progressbar li:after {
   content: '';
   height: 3px;
   background: rgb(151, 149, 149, 0.651);
   position: absolute;
   left: 0%;
   right: 0%;
   margin-bottom: 2vh;
   top: 30px;
   z-index: 1;
   }
   #progressbar li:nth-child(2):after {
   margin-right: auto;
   }
   #progressbar li:nth-child(1):after {
   margin: auto;
   }
   #progressbar li:nth-child(3):after {
   float: left;
   width: 68%;
   }
   #progressbar li:nth-child(4):after {
   margin-left: auto;
   width: 132%;
   }
   #progressbar li.active:before,
   #progressbar li.active:after {
   background: #009688;
   }

.d-flex  {
    display: flex;
   }
   #progressbar .___lastChild {
    width: 7%!important;
   }
   .____refund {
         border: 1px solid #c3c3c3;
         }
         .firsrStrip {
         background: #232f3e;
         padding: 0.6rem;
         }
         .firsrStrip p {
         margin-bottom: 0;
         color: #fff;
         }
         .CancelFirst h1{
         font-size: 2rem;
         padding: 2rem;
         }
</style>
<section class="breadcrumb-area">
   <div class="container">
      <div class="row">
         <div class="col-md-12">
            <div class="breadcrumb-content">
               
               <ul class="breadcrumb-links">
                  <li><a href="index.php">Home</a></li>
                  <li>Track Order</li>
               </ul>
            </div>
         </div>
      </div>
   </div>
</section>
<section class="mb-5">
  <div class="container text-center mt-5 mb-2">
    <div class="card-body text-center" style="max-width: 600px; margin: auto;">
      <h2 class="mb-4">Order ID : <?php echo $order_id; ?></h2>
    </div>
      <div class="card-body text-center" style="max-width: 1000px; margin: auto;">
       <?php if($track_data['order_status']!=""){ ?>
       <div class="p-3">
          <ul id="progressbar" class="d-flex">
             <?php if($track_data['order_status']=="Pending"){ ?>
             <li class="step0 active " id="step1">Order Confirmed</li>
             <li class="step0 text-center" id="step2">Processed</li>
             <li class="step0  text-right" id="step3">Shipped</li>
             <li class="step0  text-right" id="step3">Out For Delivery</li>
             <li class="step0 text-right ___lastChild ___lastChild" id="step4">Delivered</li>
             <?php } ?>
             <?php if($track_data['order_status']=="Processed"){ ?>
             <li class="step0 active " id="step1">Order Confirmed</li>
             <li class="step0 active text-center" id="step2">Processed</li>
             <li class="step0  text-right" id="step3">Shipped</li>
             <li class="step0  text-right" id="step3">Out For Delivery</li>
             <li class="step0 text-right ___lastChild" id="step4">Delivered</li>
             <?php } ?>
             <?php if($track_data['order_status']=="Shipped"){ ?>
             <li class="step0 active " id="step1">Order Confirmed</li>
             <li class="step0 active text-center" id="step2">Processed</li>
             <li class="step0 active text-right" id="step3">Shipped <br> <small><?php echo $track_data['shipped_date']; ?></small></li>
             <li class="step0  text-right" id="step3">Out For Delivery</li>
             <li class="step0 text-right ___lastChild" id="step4">Delivered</li>
             <?php } ?>
             <?php if($track_data['order_status']=="Out For Delivery"){ ?>
             <li class="step0 active " id="step1">Order Confirmed</li>
             <li class="step0 active text-center" id="step2">Processed</li>
             <li class="step0 active text-right" id="step3">Shipped <br> <small><?php echo $track_data['shipped_date']; ?></small></li>
             <li class="step0 active text-right" id="step3">Out For Delivery <br> <small><?php echo $track_data['out_for_delivery_date']; ?></small></li>
             <li class="step0 text-right ___lastChild" id="step4">Delivered</li>
             <?php } ?>
             <?php if($track_data['order_status']=="Delivered"){ ?>
             <li class="step0 active " id="step1">Order Confirmed</li>
             <li class="step0 active text-center" id="step2">Processed</li>
             <li class="step0 active text-right" id="step3">Shipped <br> <small><?php echo $track_data['shipped_date']; ?></small></li>
               <li class="step0 active text-right" id="step3">Out For Delivery <br> <small><?php echo $track_data['out_for_delivery_date']; ?></small></li>

<li class="step0 active text-right ___lastChild" id="step4">Delivered <br> <small><?php echo $track_data['delivered_date']; ?></small></li>
             <?php } ?>
             
             
          </ul>
          <?php if($track_data['order_status']=="Canceled"){ ?>
          <section>
               <div class="container">
                  <div class="row">
                     <div class="col-md-12 m-auto">
                        <div class="row">
                           <div class="col-md-6 m-auto">
                              <div class="____refund">
                                 <div class="firsrStrip">
                                    <p>Order Id : <?php echo $order_id; ?></p>
                                 </div>
                                 <div class="CancelFirst text-center">
                                    <h1>Cancelled</h1>
                                    <b><?php echo $track_data['cancel_date']; ?></b>
                                 </div>
                                 <div class="policy p-2">
                                    <p>Your order has been cancelled. </p>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </section>
          <?php } ?>
          <?php if($track_data['order_status']=="Refunded"){ ?>
            <section>
               <div class="container mt-5">
                  <div class="row">
                     <div class="col-md-12 m-auto">
                        <div class="row">
                           <div class="col-md-6 m-auto">
                              <div class="____refund">
                                 <div class="firsrStrip">
                                    <p>Order Id : <?php echo $order_id; ?></p>
                                 </div>
                                 <div class="CancelFirst text-center">
                                    <h1>Refunded</h1>
                                    <b><?php echo $track_data['refunded_date']; ?></b>
                                 </div>
                                 <div class="policy p-2">
                                  <?php
                                    $refuncd_date = date('M d, Y', strtotime($track_data['refunded_date']. ' + 7 days'));
                                  ?>
                                    <p>Your refund will be credited to your account by <strong><?php echo $refuncd_date; ?></strong>, check with your bank to see if it has been received. </p>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </section>
          <?php } ?>
       </div>
      <?php } ?>
      <div class="text-right font-weight-bold pr-2">
        <a href="track_order.php?p_no=<?php echo $_REQUEST['m']; ?>">&#60;&#60;Back</a>
      </div>
    </div>
  </div>
</section>
<script type="text/javascript">
  const searchFocus = document.getElementById('search-focus');
const keys = [
  { keyCode: 'AltLeft', isTriggered: false },
  { keyCode: 'ControlLeft', isTriggered: false },
];

window.addEventListener('keydown', (e) => {
  keys.forEach((obj) => {
    if (obj.keyCode === e.code) {
      obj.isTriggered = true;
    }
  });

const shortcutTriggered = keys.filter((obj) => obj.isTriggered).length === keys.length;

if (shortcutTriggered) {
    searchFocus.focus();
  }
});