@extends('frontend.layouts.app')

@section('content')
<style type="text/css">
	.order-tracking .page-header{background: #eee; padding: 15px}
	.order-tracking .track {display: flex; flex-direction: row; padding: 25px 20px; justify-content: space-between;}
	.order-tracking .track .form-control{width: 88%; height: 50px; border: solid 1px #ccc;}
	.order-tracking .track .btn {height: 48px; border: 0; padding: 10px 20px; font-weight: 600}
	.order-details {background: #fcfcfc; border: solid 1px #ddd; padding: 15px 25px 15px; border-radius: 10px}
	.order-details h6{font-weight: 600; margin-top: 5px}
	.order-details p{margin: 0}
	.order-details p.bold {font-weight: 700}
	.tracking-details {overflow-y: auto; height: 400px; background: #f9f9f9; padding: 15px; border-radius: 10px}
	.tracking-details ul{ list-style:none; margin-left:-35px; }
	.tracking-details ul li {position: relative; font-size: 15px; font-weight: 600; padding-left: 30px; padding-bottom: 20px;}
	.tracking-details ul li:before{content: ""; position:absolute; width:16px; height:16px; background:green; display:block; left:0; border-radius:20px; top:5px }
	.tracking-details ul li:after {content: ""; position:absolute; width:3px; height:100%; background:green; display:block; left:6px;   top:10px }
	.tracking-details ul li span{font-size: 12px; display: block;}
	.tracking-details ul li:last-child:after {display: none;}
	.order-det{ height: 400px;   padding: 25px; border-radius: 10px; background:#fff; box-shadow:1px 1px 6px #ccc }
	.order-det p {font-size: 15px; width: 75%; color: #333}
	.order-det   span{ font-weight: 700; color: #333}
	.order-det table th {font-size: 18px!important;}
	@media (max-width:640px){
		.order-tracking .page-header h3 {font-size: 22px; font-weight: 600}
		.order-tracking .track {padding: 0 0 15px}
		.order-tracking .track .btn {padding: 10px;}
		.order-tracking .track .form-control {width: 65%}
			.order-det{ height: 100%; margin-top:20px }
	}

</style>
  <div class="order-tracking">
  	<div class="page-header">
  		<div class="container">
	  		<div class="row">
	  			<div class="col-md-12">
	  				 <h3>Order Tracking Details</h3>
	  			</div>
	  		</div>
	  	</div>
  	</div>
  	
  	<div class="main-content">
  		<div class="container">
  			<div class="row">
  				<div class="col-md-12">
  					<div class="track">
			  			<input class="form-control" placeholder="Enter tracking ID" type="text" name="">
			  			<button class="btn btn-primary">Track Order</button>
			  		</div>
  				</div>
  			</div>
  			
  		</div>

  		<div class="details bg-white pt-4 p-md-4 pb-5">
			 	<div class="container">
			        <div class="row">
				      <div class="col-md-12">	
				      	  <div class="order-details">
				      	  	 <div class="row">
				      	  	 	<div class="col-md-6">
				      	  	 		<h4 class="bold mb-0"><img class="mr-2" src="https://d10srchmli830n.cloudfront.net/1653566838817_22ede491-b980-4146-a07c-5220683f59dd_Vector-(3).svg"> Order in Transit</h4>
				      	  	 		<p class="pl-5" >Last updated on December 30th 2022, 8:17 am</p>
				      	  	 	</div>
				      	  	 	<div class="col-md-6">
				      	  	 		<h5 class="mb-0">Expected Delivery</h5>
				      	  	 		<h6 class="text-success">Arriving on January 3rd 2023</h6>
				      	  	 	</div>
				      	  	 </div>
				      	  	 <hr class="mt-2">
				      	  	  <div class="row mt-3 stats">
				      	  	  	  <div class="col-md-3">
				      	  	  	  	   <p>Order Date</p>	
				      	  	  	  	   <p class="bold">December 26th 2022</p>
				      	  	  	  </div>
				      	  	  	  <div class="col-md-3">
				      	  	  	  	   <p>Order ID</p>	
				      	  	  	  	   <p class="bold">ORD3293534014165</p>
				      	  	  	  </div>
				      	  	  	  <div class="col-md-3">
				      	  	  	  	   <p>Tracking  Date</p>	
				      	  	  	  	   <p class="bold">December 26th 2022</p>
				      	  	  	  </div>
				      	  	  	  <div class="col-md-3">
				      	  	  	  	   <p>Courier</p>	
				      	  	  	  	   <p class="bold"s>Ekart</p>
				      	  	  	  </div>
				      	  	  </div>
				      	  </div>

				      	  <div class=" pt-5">
				      	  		<div class="row">
				      	  		   <div class="col-md-6 ">
				      	  		   	 <div class="tracking-details ">
				      	  		   	   	<ul>
				      	  		   	   		<li>
				      	  		   	   			Order Received
				      	  		   	   			<span>Order Placed <br>
												Last updated on December 26th 2022-01:40 pm</span>
				      	  		   	   		</li>
				      	  		   	   		<li>
				      	  		   	   			Order Manifested
				      	  		   	   			<span>pickup_scheduled <br>
												Last updated on December 26th 2022-01:40 pm Dwarka</span>
				      	  		   	   		</li>
				      	  		   	   		<li>
				      	  		   	   			Order Received
				      	  		   	   			<span>Order Placed <br>
												Last updated on December 26th 2022-01:40 pm</span>
				      	  		   	   		</li>
				      	  		   	   		<li>
				      	  		   	   			Order Manifested
				      	  		   	   			<span>pickup_scheduled <br>
												Last updated on December 26th 2022-01:40 pm Dwarka</span>
				      	  		   	   		</li>
				      	  		   	   		<li>
				      	  		   	   			Order Received
				      	  		   	   			<span>Order Placed <br>
												Last updated on December 26th 2022-01:40 pm</span>
				      	  		   	   		</li>
				      	  		   	   		<li>
				      	  		   	   			Order Manifested
				      	  		   	   			<span>pickup_scheduled <br>
												Last updated on December 26th 2022-01:40 pm Dwarka</span>
				      	  		   	   		</li>
				      	  		   	   	</ul>
				      	  		     </div>
				      	  		   </div>
				      	  		   <div class="col-md-6">
				      	  		   	   <div class="order-det">
				      	  		   	   		<h4>KVIO VENTURES PRIVATE LIMITED</h4>
				      	  		   	   		<hr>
				      	  		   	   		<p class="mt-3">Mode of payment : <span class="float-right">Prepaid</span></p>

				      	  		   	   		<table class="table">
				      	  		   	   			<tr>
				      	  		   	   				<th>Product details
				      	  		   	   					<span class="float-right">Qty</span>
				      	  		   	   				 </th>
				      	  		   	   				 
				      	  		   	   			</tr>
				      	  		   	   			<tr>
				      	  		   	   				<td colspan="2" style=" height: 150px; vertical-align:top">
				      	  		   	   					<span class="float-right">1</span>
				      	  		   	   					<p>1.KHADI POLY VASTRA JACKETS FOR MEN - BLACK -10127 
	  	  		   	   					         </p>
	  	  		   	   					         </td>
				      	  		   	   			</tr>

				      	  		   	   			<tr>
				      	  		   	   				<td colspan="2"   >
				      	  		   	   					<hr class="mb-3">
				      	  		   	   					<span class="float-right">₹ 0</span>
				      	  		   	   					<p>Amount to be paid</p> 
	  	  		   	   					        
				      	  		   	   			</tr>
				      	  		   	   		</table>
				      	  		   	   </div>
				      	  		   </div>

				      	  		</div>

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



 

  </div>
@endsection