<!DOCTYPE>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
}
.track { width: 80%; margin: auto; }

.col-track {  float: left;  width:100%; background: white;  padding: 15px; margin-bottom: 10%; font-size: small;  border-bottom: 2px solid #006A4E;}
.col-a{ float: left; width: 30%; padding: 15px; text-align: center; }
.col-b{ float: left; width: 70%; padding: 15px;}

.table-orders {  overflow-x: auto; scrollbar-width: thin;  padding: 5px;  float: left; width: 100%;}

.track-image{ width: 80%; height: 250px; }
input[type="text"]{ width: 100%; background: whitesmoke; padding: 8px; outline: none; border: 1px solid gray; border-radius: 5px;}
input[type="submit"]{  padding: 8px ;  margin-top: 1%; float: right; background: #006A4E ; color: white; border: none; border-radius: 3px; } 


td {  padding:8px;border-bottom: 1px solid #ddd !important; font-size: xx-small; }

th {  padding:10px;border: 1px solid #ddd !important; background:#006A4E; color: white; opacity: .8;text-align: left;  font-size: x-small; border-spacing: 1;}

table { margin: auto; border-spacing: 1; width: 100%; float: left; margin-top: 1%;  }
.receipt {padding: auto; border: none; background: white; color: #006A4E; }

.no-results { width:100%;   margin: 6px auto;   padding: 10px;   border: 1px solid #a94442; font-size: small; 
  color: #a94442;   background: #f2dede;   border-radius: 5px;   text-align: left;  float: left;}

.btn-pending { background: orange; color: white; padding: 6px; border: none; border-radius: 3px; }

.btn-received{ background: #1cc88a; color: white; padding: 6px; border: none; border-radius: 3px; }


/* Clear floats after the col-tracks */
.row:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width:600px) {
  .track-image{ width: 70%; height: 200px; }

  .col-track {  width: 100%;   }
  .track  { margin-top:15%; width: 90%; }
  .col-a { width: 100%; }
  .col-b{ width: 100%; }




   }

</style>
</head>
<body>


<div class="row">
  <nav class="track"> 
  <div class="col-track">
 
<nav class="col-a"> <img src="images/track.jpg" class="track-image"></nav>
<nav class="col-b"> <p>To track your order, kindly provide the phone number that you used in your order request </p> 

<form method="POST">
  <input type="text" name="phone" placeholder="eg. 708448164" required="autofocus">
  <input type="submit" name="track" value="Track Order">
</form>

<nav class="table-orders">

<?php include"inc/conn.php";
// initializing variables
$phone  = "";
$errors = array(); 


  if (isset($_POST['track'])) {
  $phone = mysqli_real_escape_string($db, $_POST['phone']);

  if (empty($phone)) {
    array_push($errors, "Phone number is required");
  }
     
   else if (count($errors) == 0) {
    $query = "SELECT * FROM orders WHERE  phone='$phone'  order by time DESC LIMIT 4";
    $results = mysqli_query($db, $query);
    
if (mysqli_num_rows($results) > 0) {

echo "<table >";
echo "<thead>";
echo "<tr class='t1'>";
echo "<th>Order Id</th>";
echo "<th>Receipt No</th>";
echo "<th>Amount</th>";
echo "<th>Time</th>";
echo "<th>Order Status</th>";
echo "</tr>";
echo "</thead>";
   echo "<tbody>";
    while($row = $results->fetch_array()){
   echo "<tr>";
   echo "<td> 2022/00" . $row['id'] . "</td>";

echo
  "<td>
<form method ='post'> 
<input type='hidden' name='receipt_no' value=".$row['receipt_no']." />
<button class='receipt' type='submit' name='submit'  ><u> " . $row['receipt_no'] . " </u></button>
</form>
  </td>";

echo "<td>KES " . $row['amount'] . "</td>";
//echo "<td>" . $row['time'] . "</td>";
 echo "<td>" . date_format( new DateTime ($row['time'] ),"d M, Y \t H:m:s"). "</td>";
?>
<td>
<?php 
$s = $row['status'];  

if ($s == 0) {  echo "<button class='btn-pending'> Pending  </button>";}

 else {echo "<button class='btn-received'> Received  </button>"; }



?> 

</td>

<?php 
    echo "</tr>";
     }
    echo "</tbody>";                            
    echo "</table>";
   // Free result set
     //  $result->free();
     
    }else {
      echo "<div class='no-results' >";

      echo " <p> Sorry ! NO order (s)  with this phone number [ <b> $phone </b>  ] </p>";
      echo " </div>";
    }
  }
}
?>

</nav>
</nav>




  </div>
  </nav>
  
</div>

</body>
</html>



<script>
function opensales() {   document.getElementById("customerItems").style.display = "block"; }
function closesales() {   document.getElementById("customerItems").style.display = "none";  }

</script>

<style type="text/css">
  
  body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}

.bottom-total-a { float: left; width: 50%; padding: 15px; font-size: x-small; }
.bottom-total-b { float: left; width: 50%; padding: 15px; font-size: x-small; }

.bottom-total-b h4 {text-align: right;}
.form-popup {  display: none; margin-top: 2%;  z-index: 9; }

.c1 {float: left; width: 33.33%; padding: 10px;}
.c2 {float: left; width: 33.33%; padding: 10px;}

/* Add styles to the loan container */
.loan-cont {width:65%; margin: auto; padding: 15px;  background-color: white;  box-shadow: 2px 3px 3px 2px gray; position:absolute; top: 0; right: 10; margin-right: 3%; margin-top: 3%; margin-bottom: 2%;   }

.fa-close { float: right; color: red; margin-top:0%; font-size: large; }

.table { margin-right: 3%;  overflow-x: auto;scrollbar-width: thin; }


.form { float: left; width: 100%; padding: 1px; }
.form label { font-size: x-small; margin: 2%; }

.form input[type=text] { border-radius: 4px;  width: 100%;  background:whitesmoke; border:  1px solid  #f1f1f1; padding: 10px; font-size: x-small; margin-top: 1%; color: orange; font-weight: bold;}
.form  select { border-radius: 4px;  width: 100%;  background:whitesmoke; border:  1px solid  #f1f1f1; padding: 10px; font-size: x-small; margin-top: 1%;  }

/* Set a style for the submit/login button */
.form .btn {  background-color:#006A4E;  color: white;  padding: 16px 20px;  border: none;
  cursor: pointer;  width: 100%;  margin-bottom:10px;  opacity: 0.8; }

/* Add some hover effects to buttons */
.form .btn:hover, .open-button:hover {  opacity: 1;}

 #hidden-panel-a , #hidden-panel-b, #hidden-panel-c { display: none; }



@media screen and (max-width:600px) {
  .loan-cont { width: 95%; height: auto;  margin-right: 0%; margin-top: 20%;  }
  .bottom-total-b, .bottom-total-a { width: 100%; float: left; } 
  .c1 , .c2 {float: left; width: 100%;}
  }

 </style>

<div class="form-popup" id="customerItems">
  <nav class="loan-cont">
<h4> <i class="fa fa-user" style="margin-right: 5%; margin-left: 1%;"></i>Ordered Items  <a onclick="closesales()"><i class="fa fa-close"></i> </a> </h4>

<?php  
if (isset($_POST["submit"])) {
$receipt_no = $_POST['receipt_no' ];
$sql = "SELECT * FROM ordered_items where receipt_no = '$receipt_no'  order by Id  DESC";   
$result = mysqli_query($conn,$sql);  
echo "<script type= 'text/javascript'> opensales() </script>";

 ?>
<nav class="table">
<table >
 <tr>

  <th>Items</th>
  <th>Size</th>
  <th>Quantity</th>
  <th>Unit price</th>
  <th>Total Price</th>
  <th>Time ordered</th>
</tr>  

<?php while($row = mysqli_fetch_object($result)){ ?>  

<tr> 

<td><?php echo $row->name;?></td>
<td><?php echo $row->size;?></td>
<td><?php echo $row->quantity;?></td>
<td><?php echo $row->price;?></td>
<td><?php echo $row->total_price;?></td>
<td style="color:#848482; font-weight: bold;" ><?php echo date_format( new DateTime($row->time),"d,M, Y \t H:m:s");?></td>
 </tr>       
 <?php  }?>
 <?php  }?>
</table>
</nav>

<?php  $sql = "SELECT * FROM orders where receipt_no = '$receipt_no'  order by id  DESC";   
$result = mysqli_query($conn,$sql); $row = mysqli_fetch_object($result); ?>

<nav class="bottom-total-a">
   <p><b> Receipt No</b> - <?php echo $row->receipt_no;?>   </p>
  <h4>Total   - Ksh. <?php echo $row->amount;?> /=  </h4>
</nav>




<form action="" method="post" class="form">
  <h4> <i class="fa fa-user" style="margin-right: 5%; margin-left: 1%;"></i>Customer Billing   Details</h4>
  
  <input type="hidden" value= "<?php echo $row->receipt_no;?>" name="receipt_no" readonly>


  <nav class="c1">
    <label>Customer Name</label>
  <input type="text" placeholder="Enter Customer Name eg. Joskin Doe" value= "<?php echo $row->customer;?>" name="customer" readonly>
  </nav>


  <nav class="c2">
    <label>Phone</label>
  <input type="text" value="<?php echo $row->phone;?>" name="phone" readonly>
</nav>
  

  <nav class="c1">
    <label>Expected Pay</label>
  <input type="text"  value=" <?php echo $row->amount;?>" name="amount" readonly>
  </nav>

    <nav class="c1">
    <label>Residence</label>
  <input type="text"  value=" <?php echo $row->residence;?>" name="residence" readonly>
  </nav>

    <nav class="c1">
    <label>Delivery - point</label>
  <input type="text"  value=" <?php echo $row->delivery_point;?>" name="delivery_point" readonly>
  </nav>


 
  </form>
</div>
</nav>
</div>


