
<?php  
include '../db.php';
include '../config.php';

if (isset($_POST['trackingsub'])) {
    $trackId = trim($_POST['trackId']);
    $select = mysqli_query($link, "SELECT * FROM tracking WHERE tracking_number = '$trackId' ");
    if (mysqli_num_rows($select) > 0) {
      $row = mysqli_fetch_assoc($select);
        $senders_name = $row['sender_name'];  
         $senders_contact = $row['sender_contact'];  
         $senders_mail = $row['sender_email'];  
         $senders_address = $row['sender_address'];
         $receivers_name = $row['receiver_name'];  
         $receivers_contact = $row['receiver_contact'];  
         $receivers_mail = $row['receiver_email'];  
         $receivers_address = $row['receiver_address'];
         $statuss = $row['status'];  
         $dispatch_l = $row['dispatch_location'];  
         $dispatchh = $row['dispatch_date'];  
         $deliveryy = $row['delivery_date'];
         $current_location = $row['current_location'];
         $desc = $row['pdesc'];
         $carrier = $row['carrier'];
         $carrier_ref = $row['carrier_ref'];
         $weight = $row['weight'];
         $payment_mode = $row['payment_mode'];
         $ship_mode = $row['ship_mode'];
         $quantity = $row['quantity'];
         $delivery_time = $row['delivery_time'];
         $image = $row['image'];
         $destination = $row['destination'];

    }else{
      echo "<script>alert('Invalid Tracking Number');window.location.href = '../trace.html'; </script>";
    }
  }
  // else{
  //   echo "<script>window.location.href = 'index.html'; </script>";
  // }
?>
<!doctype html>
<html>
<head>
	
	<script>const Uss = JSON.parse(atob('eyJQbGF0Zm9ybSI6IlByaW1lIENhcmdvIn0='));</script>
<meta name='viewport' content='width=device-width, initial-scale=1.0' data-rc='viewport'>
	<link rel='stylesheet' href='css/bootstrap.min.css' data-rc='bootstrap'>
	<link rel='stylesheet' href='css/bootstrap-icons.css' data-rc='bs-icon'>
	<link rel='stylesheet' href='css/animate.min.css' data-rc='animate'>
	<link rel='stylesheet' href='css/glightbox.min.css' data-rc='glightbox'>
	<link rel='stylesheet' href='css/toastr.min.css' data-rc='toastr'>
	<link rel='stylesheet' href='css/font-size.min.css' data-rc='font-size'>
	<link rel='stylesheet' href='css/main.css' data-rc='main-css'>
	<link rel='stylesheet' href='css/style.css'/>
	<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,600;1,700&family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">

	<link href="css/main.css" rel="stylesheet">
	<link href="css/glightbox.min.css" rel="stylesheet">
	<link href="css/swiper-bundle.min.css" rel="stylesheet">
	<link href="css/aos.css" rel="stylesheet">

	<!-- Template Main CSS File -->
	<link rel = "stylesheet" href = "css/leaflet.css" />
	<link href="css/main.css" rel="stylesheet">

	<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">



</head>

<body class="uss">
	
      <!-- ======= Header ======= -->
  <header id="header" class="header d-flex align-items-center fixed-top">
    <div class="container-fluid container-xl d-flex align-items-center justify-content-between">

      <a href="https://cargo.dailydogo.com" class="logo d-flex align-items-center">
        <!-- Uncomment the line below if you also wish to use an image logo -->
       <!-- <img src="image/760ba664755d205a3352b9b12e5e58d23a42483b.png" alt=""> -->
        
      </a>

      <i class="mobile-nav-toggle mobile-nav-show bi bi-list"></i>
      <i class="mobile-nav-toggle mobile-nav-hide d-none bi bi-x"></i>
      

    </div>
  </header><!-- End Header -->
  <!-- End Header --><!-- ======= Breadcrumbs ======= -->
<div class="breadcrumbs">

	
</div><!-- End Breadcrumbs --><div id='main'><section class='container track-section'>

	<h1 class='display-6'>YOUR TRACK DETAIL</h1>
	
	<hr>
	
	<div class='my-5'>
	
			
		<div data-printable>
			
							<div class='row mb-5'>
					<div class='col-lg-12'>
						<div class='d-flex flex-wrap text-center text-sm-start align-items-center'>
							<figure class='mb-3 me-sm-3 mx-auto mx-sm-start'>
								<img src='image/pngtree-cartoon-delivery-man-png-image_876933.png' height='120px' class=''>
							</figure>
							<div class='flex-grow-1'>
								<h4 class='fw-light mb-3'>
									<u>Contact Person</u>
								</h4>
								<div class='mb-1'>
									<i class='bi bi-person-workspace me-1'></i>
									<?php echo $senders_name ?>								</div>
								<div>
									<i class='bi bi-telephone me-1'></i>
									<?php echo $senders_contact ?>								</div>
							</div>
						</div>
					</div>
				</div>
			
			<div class='row mb-4'>
				
				<div class='col-lg-6'>
					<div class='card mb-4'>
						<h4 class='card-header fw-normal'>
							<i class='bi bi-info-circle'></i> Sender Info
						</h4>
						<div class='card-body'>
									<div class='d-flex'>
			<div class='icon me-3'>
				<i class='bi bi-person-circle fs-26px'></i> 
			</div>
			<div class=''>
				<label class='text-muted'>Contact Name</label>
				<p><?php echo $senders_name ?></p>
			</div>
		</div>
			<div class='d-flex'>
			<div class='icon me-3'>
				<i class='bi bi-telephone fs-26px'></i> 
			</div>
			<div class=''>
				<label class='text-muted'>Phone Number</label>
				<p><?php echo $senders_contact ?></p>
			</div>
		</div>
			<div class='d-flex'>
			<div class='icon me-3'>
				<i class='bi bi-house-check fs-26px'></i> 
			</div>
			<div class=''>
				<label class='text-muted'>Contact Address</label>
				<p><?php echo $senders_address ?></p>
			</div>
		</div>
			<div class='d-flex'>
			<div class='icon me-3'>
				<i class='bi bi-envelope fs-26px'></i> 
			</div>
			<div class=''>
				<label class='text-muted'>Email</label>
				<p><?php echo $senders_mail ?></p>
			</div>
		</div>
			<!-- <div class='d-flex'>
			<div class='icon me-3'>
				<i class='bi bi-geo fs-26px'></i> 
			</div>
			<div class=''>
				<label class='text-muted'>Country</label>
				<p>Nigeria</p>
			</div>
		</div> -->
							</div>
					</div>
				</div>
				
				<div class='col-lg-6'>
					<div class='card rounded-0'>
						<h4 class='card-header fw-normal'>
							<i class='bi bi-info-circle'></i> Receiver Info
						</h4>
						<div class='card-body'>
									<div class='d-flex'>
			<div class='icon me-3'>
				<i class='bi bi-person-circle fs-26px'></i> 
			</div>
			<div class=''>
				<label class='text-muted'>Contact Name</label>
				<p><?php echo $receivers_name ?></p>
			</div>
		</div>
			<div class='d-flex'>
			<div class='icon me-3'>
				<i class='bi bi-telephone fs-26px'></i> 
			</div>
			<div class=''>
				<label class='text-muted'>Phone Number</label>
				<p><?php echo $receivers_contact ?></p>
			</div>
		</div>
			<div class='d-flex'>
			<div class='icon me-3'>
				<i class='bi bi-house-check fs-26px'></i> 
			</div>
			<div class=''>
				<label class='text-muted'>Contact Address</label>
				<p><?php echo $receivers_address ?></p>
			</div>
		</div>
			<div class='d-flex'>
			<div class='icon me-3'>
				<i class='bi bi-envelope fs-26px'></i> 
			</div>
			<div class=''>
				<label class='text-muted'>Email</label>
				<p><?php echo $receivers_mail ?></p>
			</div>
		</div>
		
			<!-- <div class='d-flex'>
			<div class='icon me-3'>
				<i class='bi bi-geo fs-26px'></i> 
			</div>
			<div class=''>
				<label class='text-muted'>Country</label>
				<p>Nigeria</p>
			</div>
		</div> -->
							</div>
					</div>
				</div>
				
			</div>
			
			<div class='row '>
				
				<div class='col-lg-12 mb-4'>
				
					<div class='card rounded-0'>
					
						<h4 class='text-bg-dark p-2 m-2 text-center'>
							Shipment Detail
						</h4>
						
						<div class='p-3'>
							<div class='row'>
								<div class='col-md-6'>
											<div class='mb-2 border-bottom py-3'>
			<h5 class='mb-3'>
				<i class='bi bi-compass me-2'></i>
				<label class=''>Track ID</label>
			</h5>
			<div class='ps-4'><?php echo $trackId ?></div>
		</div>
			<div class='mb-2 border-bottom py-3'>
			<h5 class='mb-3'>
				<i class='bi bi-patch-question me-2'></i>
				<label class=''>Status</label>
			</h5>
			<div class='ps-4'><?php echo $statuss ?></div>
		</div>
			<div class='mb-2 border-bottom py-3'>
			<h5 class='mb-3'>
				<i class='bi bi-house-up me-2'></i>
				<label class=''>Dispatch location</label>
			</h5>
			<div class='ps-4'><p><?php echo $dispatch_l ?></p></div>
		</div>
		<div class='mb-2 border-bottom py-3'>
			<h5 class='mb-3'>
				<i class='bi bi-building-check me-2'></i>
				<label class=''>Carrier</label>
			</h5>
			<div class='ps-4'><p><?php echo $carrier ?></p></div>
		</div>
									</div>
								<div class='col-md-6'>
											<div class='mb-2 border-bottom py-3'>
			<h5 class='mb-3'>
				<i class='bi bi-clock-history me-2'></i>
				<label class=''>Pickup Date</label>
			</h5>
			<div class='ps-4'><?php echo $deliveryy ?></div>
		</div>
			<div class='mb-2 border-bottom py-3'>
			<h5 class='mb-3'>
				<i class='bi bi-rocket-takeoff me-2'></i>
				<label class=''>Dispatch Date</label>
			</h5>
			<div class='ps-4'><?php echo $dispatchh ?></div>
		</div>
			<div class='mb-2 border-bottom py-3'>
			<h5 class='mb-3'>
				<i class='bi bi-house-down me-2'></i>
				<label class=''>Destination</label>
			</h5>
			<div class='ps-4'><p><?php echo $destination ?></p></div>
		</div>
			<div class='mb-2 border-bottom py-3'>
			<h5 class='mb-3'>
				<i class='bi bi-box me-2'></i>
				<label class=''>Expected Delivery Date</label>
			</h5>
			<div class='ps-4'><?php echo $deliveryy ?></div>
		</div>
									</div>
							</div>
						</div>
						
					</div>
					
				</div>
				
			</div>
			
						
				<div class='card mb-4'>
					<div class='card-body'>
						<h4 class='text-bg-dark p-2 mb-3 text-center'>History</h4>
						<div class='row'>
						<?php  
							if ($show_map == "Yes") {
						?>
							<div class='col-lg-5'>
								<div class='border mb-3'>
								<iframe class="map" src="https://maps.google.com/maps?q=<?php echo $current_location == "" ? $dispatch_l : $current_location ?>&amp;t=k&amp;z=13&amp;ie=UTF8&amp;iwloc=&amp;output=embed" style="border:0; width: 100%; height: 527px;"></iframe>
							</div>
							</div>
							<?php } ?>
							
							<div class='col-lg-7'>
								<div class='border p-2 fs-14px'>
									<div class="dt-container" data-domtablet="shipment">
                                       <div class="row row-cols-auto dt-widgets">

									   </div>
									<!-- a good spot add features like search box, checkbox options etc -->
									<div class="table-responsive">
										<table class="table" id="dt-shipment">
											<thead>
												<tr>
													<th>Current Location</th>
													<th>Note</th>
													<th>Status</th>
												</tr>
											</thead>
											<?php 
											$i = 0;
												$tr = mysqli_query($link, "SELECT * FROM track_update WHERE track_num = '$trackId' ");
												if (mysqli_num_rows($tr) > 0 ) {
													while ($row = mysqli_fetch_assoc($tr)) {
														$i++
											?>
											<tbody>
												<tr>
													<td><?php echo $row['current_location'] ?></td>
													<td><?php echo $row['note'] ?></td>
													<td><?php echo $row['status'] ?></td>
												</tr>
											</tbody>
											<?php }} ?>
										</table>
									</div>
										<!-- a good spot to add features like nav button, footer label etc -->
									<div class="mt-3 dt-paginate"></div>
</div>								</div>
							</div>
						
						</div>
					
					</div>
				</div>
			
						
						
			<div class='card'>
				<div class='card-body'>
				
					<h4 class='text-bg-dark p-2 mb-3 text-center'>Packages</h4>
					
					<div class='row'>

						<div class='col-lg-12'>
							<div class='border p-2 fs-14px'>
								<div class="dt-container" data-domtablet="packages">
<div class="row row-cols-auto dt-widgets"></div>
				<!-- a good spot add features like search box, checkbox options etc -->
				<div class="table-responsive">
					<table class="table" id="dt-packages">
						<thead>
							<tr>
								<th>Package image</th>
								<th>name</th>
								<th>weight</th>
								<th>quantity</th>
                            </tr>
                        </thead>
						<tbody>
							<tr>
                                <td>
									<a href="../uploads/<?php echo $image ?>" class="glightbox">
										<img src="../uploads/<?php echo $image ?>" class="img-fluid img-thumbnail" width="80px">
									</a>
								</td>
								<td><?php echo $desc ?></td>
								<td><?php echo $weight ?> KG</td>
								<td><?php echo $quantity ?></td>
                            </tr>
                        </tbody>
					</table>
				</div>
				<!-- a good spot to add features like nav button, footer label etc -->
			<div class="mt-3 dt-paginate"></div>
</div>							</div>
						</div>
						<?php  
							if ($allow_print == "Yes") {
						?>
						<center><a href="../invoice/receipt.php?tnum=<?php echo $trackId ?>" class="btn btn-primary">Print Receipt</a></center>
			        <?php } ?>
					</div>
				
				</div>
			</div>
		
				
		</div>
		
		
	</div>
	
</section>

</div>	
 
  <!-- End Footer -->

  <a href="#" class="scroll-top d-flex align-items-center justify-content-center">
	<i class="bi bi-arrow-up-short"></i>
</a>

  <div id="preloader"></div><script src='js/jquery-3.6.4.min.js' data-rc='jquery'></script>
	<script src='js/bootstrap.bundle.min.js' data-rc='bootstrap'></script>
	<script src='js/bootbox.all.min.js' data-rc='bootbox'></script>
	<script src='js/glightbox.min.js' data-rc='glightbox'></script>
	<script src='js/toastr.min.js' data-rc='toastr'></script>
	<script src='js/notiflix-loading-aio-3.2.6.min.js' data-rc='notiflix'></script>
	<script src='js/notiflix-block-aio-3.2.6.min.js' data-rc='notiflix'></script>
	<script src='js/main.js' data-rc='main-js'></script>

	<script src="js/purecounter_vanilla.js"></script>
	<script src="/js/glightbox.min.js"></script>
	<script src="js/swiper-bundle.min.js"></script>
	<script src="js/aos.js"></script>
	<script src="js/validate.js"></script>

	<!-- Template Main JS File -->
	<script src="js/main.js"></script>
	
		
	<script src = "js/leaflet.js"></script>
	<script>
		
		// Creating map options
		var mapOptions = {
			center: [7.41809, 3.90521],
			zoom: 10
		}
		
		// Creating a map object
		var map = new L.map('map', mapOptions);
		
		// Creating a Layer object
		var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
		
		// Adding layer to the map
		map.addLayer(layer);
		
		// Creating a marker
        var marker = L.marker([7.41809, 3.90521]);
         
        // Adding marker to the map
        marker.addTo(map);
		
	</script>
	
			
</body>
</html>