<?php require_once('header.php');?>
<?php if($allPermissions['tracking']['readPod']=="1"){ ?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
    $(document).ready(function(){
    $('#get_img').click(function(){
     var awb_no = $('#awb_no').val();
     var awb_type = $('#awb_type').val();
        if(awb_no){
            $.ajax({
                type:'POST',
                url:'get_pod_track.php',
                dataType: 'json',
                data:{awb:awb_no,awb_type:awb_type},
                success:function(response){
                //   console.log(response);
                  if(response[0]['count']>0)
                  {
                   var c =response[0]['count'];
                  for(var n=0;n<c;n++){          
                  if(response[0]['pod_type'][n]=='1')
                  {
                      $("#show_pk_img").css("display", "block");
                      setPkValues(response[0]['url_1'][n],1);
                      setPkValues(response[0]['url_2'][n],2);
                      setPkValues(response[0]['url_3'][n],3);
                      setPkValues(response[0]['url_4'][n],4);
                      setPkValues(response[0]['url_5'][n],5);
                  }
                   if(response[0]['pod_type'][n]=='2')
                  {
                      $("#show_dy_img").css("display", "block");
                      setDyValues(response[0]['url_1'][n],1);
                      setDyValues(response[0]['url_2'][n],2);
                      setDyValues(response[0]['url_3'][n],3);
                      setDyValues(response[0]['url_4'][n],4);
                      setDyValues(response[0]['url_5'][n],5);
                  }
            }
                  
                  }else
                  {
                       $("#show_pk_img").css("display", "none");
                       $("#show_dy_img").css("display", "none");
                      alert("No POD Available");
                  }
                }
            }); 
        }
        });
        function setPkValues(url,count)
        {
         var src_pk_image=url;
         if(src_pk_image!=''){
         $("#pickup_image"+count).attr("src","img/POD/"+src_pk_image);
         $("#a_pk"+count).attr("href","img/POD/"+src_pk_image);
         $("#a_pk"+count).attr("download",src_pk_image);
         }else
         {
           $("#a_pk"+count).hide();   
         }
        }
        function setDyValues(url1,count1)
        {
         var src_dy_image=url1;
         if(src_dy_image!=''){
         $("#dy_image"+count1).attr("src","img/POD/"+src_dy_image);
         $("#a_dy"+count1).attr("href","img/POD/"+src_dy_image);
         $("#a_dy"+count1).attr("download",src_dy_image);
         }else
         {
           $("#a_dy"+count1).hide();   
         }
        }
    });
</script>
<section class="content-header">
	<div class="content-header-left">
		<h1>Proof Of Delivery Tracking</h1>
	</div>
</section>

<section class="content">
	<div class="row">
		<div class="col-md-12">

			<?php if($error_message): ?>
			<div class="callout callout-danger">
				<p>
					<?php echo $error_message; ?>
				</p>
			</div>
			<?php endif; ?>

			<?php if($success_message): ?>
			<div class="callout callout-success">
				<p><?php echo $success_message; ?></p>
			</div>
			<?php endif; ?>
				<div class="box box-info">
					<div class="box-body">
					    <div class="form-group">
							<label for="" class="col-sm-2 control-label">AWB No <span>*</span></label>
							<div class="col-sm-4">
								<select class="form-control" name="awb_type" id="awb_type">
							        <option value="cscs_awb">CSCS AWB</option>
							        <option value="ref_no">REF NO</option>
							        <option value="3pl_awb">3PL AWB</option>
							    </select>
							</div>
							<div class="col-sm-4">
								<input type="text" autocomplete="off" placeholder="Enter AWB No" class="form-control" name="awb_no" id="awb_no">
							</div>
							<div class="col-sm-2">
								<button id="get_img" class="btn btn-success pull-left" name="get_img">Search</button>
							</div>
						</div>
					</div>
				</div>
				<div class="row" id="show_pk_img"style="display:none;">
				    <center><h3>PICKUP POD</h3></center>
				    <div class="col-md-12">
				        <div class="col-md-1"></div>
				        <div class="col-md-2">
				            <a download="" id="a_pk1" href="" title="ImageName">
                            <img alt="Not Available" id='pickup_image1' style="width:140px;height:140px;border: 2px solid red;" class="img-thumbnail" src=""></a>
				        </div>
				        <div class="col-md-2">
				            <a download="" id="a_pk2" href="" title="ImageName">
                            <img alt="Not Available" id='pickup_image2' style="width:140px;height:140px;border: 2px solid red;" class="img-thumbnail" src=""></a>
				            
				        </div>
				        <div class="col-md-2">
				            <a download="" id="a_pk3" href="" title="ImageName">
                            <img alt="Not Available" id='pickup_image3' style="width:140px;height:140px;border: 2px solid red;" class="img-thumbnail" src=""></a>
				        </div>
				        <div class="col-md-2">
				            <a download="" id="a_pk4" href="" title="ImageName">
                            <img alt="Not Available" id='pickup_image4' style="width:140px;height:140px;border: 2px solid red;" class="img-thumbnail" src=""></a>
				        </div>
				        <div class="col-md-2">
				            <a download="" id="a_pk5" href="" title="ImageName">
                            <img alt="Not Available" id='pickup_image5' style="width:140px;height:140px;border: 2px solid red;" class="img-thumbnail" src=""></a>
				        </div>
				    </div>
				</div>
					<div class="row" id="show_dy_img"style="display:none;">
				    <center><h3>DELIEVRY POD</h3></center>
				     <div class="col-md-12">
				        <div class="col-md-1"></div>
				        <div class="col-md-2">
				            <a download="" id="a_dy1" href="" title="ImageName">
                            <img alt="Not Available" id='dy_image1' style="width:140px;height:140px;border: 2px solid red;" class="img-thumbnail" src=""></a>
				      </div>
				        <div class="col-md-2">
				            <a download="" id="a_dy2" href="" title="ImageName">
                            <img alt="Not Available" id='dy_image2' style="width:140px;height:140px;border: 2px solid red;" class="img-thumbnail" src=""></a>
				            
				        </div>
				        <div class="col-md-2">
				            <a download="" id="a_dy3" href="" title="ImageName">
                            <img alt="Not Available" id='dy_image3' style="width:140px;height:140px;border: 2px solid red;" class="img-thumbnail" src=""></a>
				        </div>
				        <div class="col-md-2">
				            <a download="" id="a_dy4" href="" title="ImageName">
                            <img alt="Not Available" id='dy_image4' style="width:140px;height:140px;border: 2px solid red;" class="img-thumbnail" src=""></a>
				        </div>
				        <div class="col-md-2">
				            <a download="" id="a_dy5" href="" title="ImageName">
                            <img alt="Not Available" id='dy_image5' style="width:140px;height:140px;border: 2px solid red;" class="img-thumbnail" src=""></a>
				        </div>
				    </div>
				</div>
		</div>
	</div>

</section>


	<?php }else{ ?>
<center><h4 style="color:red;">You don't have permission to view this page </h4></center>
<?php } ?>


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