{% extends 'base.html' %}
{% load static %}

  {% block title %}
    <title>All Customer Jobs</title>
  {% endblock %}

  {% block css %}


	<link rel="stylesheet" href="{% static 'assets/vendors/mdi/css/materialdesignicons.min.css' %}">
    <link rel="stylesheet" href="{% static 'assets/vendors/css/vendor.bundle.base.css' %}">
    
    <link rel="stylesheet" href="{% static 'assets/css/style.css' %}">
    <!-- End layout styles -->
    <link rel="shortcut icon" href="{% static 'assets/images/favicon.png' %}" />
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
	<!-- <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css"> -->
	
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
	<script  src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
	<script  src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map1 {
        height: 10%;
      }





      /* Optional: Makes the sample page fill the window. */
      /*html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }*/
    </style>
  {% endblock %}


{% block content %}
    <div class="container-scroller">
      <!-- partial:partials/_navbar.html -->
      {% include 'admin_header.html' %}
      <!-- partial -->
      <div class="container-fluid page-body-wrapper">
        <!-- partial:partials/_sidebar.html -->
        {% include 'admin_sidebar.html' %}
        <!-- partial -->
        <div class="main-panel">
          <div class="content-wrapper">
          	<div class="row  two-divs">
          		<div class="col-md-7">
          	<div class="page-header">
              <h3 class="page-title">
                <span class="page-title-icon bg-gradient-primary text-white mr-2">
                  <i class="mdi mdi-account-switch"></i>
                </span> {{header_title}} </h3>
            </div>
        </div>
         	<div class="col-md-5 text-right">

         		<div class="dps-btn dps-2">
         		{% ifequal header_title 'Outstanding Jobs' %}
         		{% if allVehicals %}
         		<div class="dropdown">
				  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
				    Vehicle Type 
				  </button>
				  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
         		
	        	   {% for v in allVehicals %}
	        	   <!-- <a class="dropdown-item" href="18.130.221.132:9090/admin/customerjobs/filter/3/">Bike</a> -->
				    <!-- <a class="dropdown-item" href="18.130.221.132:9090/admin/customerjobs/filter/3/">car</a> -->
				    <!-- <a class="dropdown-item" href="18.130.221.132:9090/admin/customerjobs/filter/3/">Tampoo</a> -->
	        	    <a class="dropdown-item" href="/admin/customerjobs/filter/{{v.id}}">{{v.name}}</a>
	        	   {% endfor %}
	        	 </div>
				</div>
	        	{% endif %}
	        	{% endifequal %}

	        	{% ifequal header_title 'Completed Jobs' %}
         		{% if allVehicals %}
         		<div class="dropdown">
				  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
				    Vehicle Type 
				  </button>
				  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
	        	   {% for v in allVehicals %}
	        	    <a class="dropdown-item" href="/admin/customerjobs/completed/filter/{{v.id}}">{{v.name}}</a>
	        	   {% endfor %}
	        	 </div>
				</div>
	        	{% endif %}
	        	{% endifequal %}


	        	{% ifequal header_title 'Completed Jobs' %}
	               	<div class="dropdown">
					  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
					    Filter 
					  </button>
					   <div class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
		               	  <a class="dropdown-item" href="/admin/customerjobs/completed/Day">Current Day</a>
						  <a class="dropdown-item" href="/admin/customerjobs/completed/Weekly">Current Week</a>
						  <a class="dropdown-item" href="/admin/customerjobs/completed/Month">Current Month</a>
						  <a class="dropdown-item" href="/admin/customerjobs/completed/Year">Current Year</a>
					   </div>
					</div>
               	{% endifequal %}
               	{% ifequal header_title 'Outstanding Jobs' %}
               	<div class="dropdown">
				  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
				    Filter
				  </button>
			   <div class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
				  <a class="dropdown-item" href="/admin/customerjobs/day/">Current Day</a>
				  <a class="dropdown-item" href="/admin/customerjobs/weekly/">Current Week</a>
				  <a class="dropdown-item" href="/admin/customerjobs/month/">Current Month</a>
				  <a class="dropdown-item" href="/admin/customerjobs/year/">Current Year</a>
				   </div>
				</div>
				{% endifequal %}


         		{% ifequal header_title 'Outstanding Jobs' %}


					 <!-- <div class="dropdown">
					  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
					    Vehicle Type 
					  </button>
					  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
					    <a class="dropdown-item" href="18.130.221.132:9090/admin/customerjobs/filter/3/">Bike</a>
					    <a class="dropdown-item" href="18.130.221.132:9090/admin/customerjobs/filter/3/">car</a>
					    <a class="dropdown-item" href="18.130.221.132:9090/admin/customerjobs/filter/3/">Tampoo</a>
					  </div>
					</div> -->
               		<button id="generate-outstanding-jobs-csv" class="btn-c"><i class="mdi mdi-plus menu-icon"></i> Generate CSV</button>
               		<!-- <a href="/admin/addcustomerjob/"><button  class="btn-c"><i class="mdi mdi-plus menu-icon"></i> Add Customer Job</button></a> -->
               	{% endifequal %}
               	{% ifequal header_title 'Completed Jobs' %}
               		<button id="generate-completed-jobs-csv" class="btn-c"><i class="mdi mdi-plus menu-icon"></i> Generate CSV</button>
               	{% endifequal %}

               	
         		
        </div>
         </div>
    </div>
          
            <div class="row mt-50  table-row">
            	   <div class=" col-12 grid-margin">
            	<div class="">              
                 <div class="">

            		<div class="table-responsive">

				{% csrf_token %}
				<table id="customerjobs-table" class="table table-hover border-table">
					<thead>
						<th>Serial No.</th>
						<th>Parcel Image</th>
                      <th>Sender Name</th>
                      <th>Pickup Address</th>
                      <th>Recipient Name</th>
                      <th>Drop Address</th>
                      <th>Parcel Type</th>
                      <th>Created At</th>
						<!-- <th>Sender Name</th>
						<th>Sender Phone Number</th>
						<th>Vehicle Type</th>
						<th>Delivery Duration</th> -->
						<th>Action</th>
					</thead>
					<tbody>
						{% if all_customerjobs %}
							{% for customerjob in all_customerjobs %}
								<tr>
									<td>{{customerjob.serialno}}</td>
									<td><img src="{% if driverjob.image %}{{customerjob.image}}{% else %}{% static 'images/open-parcel-1.png' %}{% endif %}"></td>
								 {% if customerjob.showId == True %}
                                  <td><a href="/admin/customerjob/{{customerjob.id}}" target="_blank">{{customerjob.sendername}}</a></td>
                                 {% else %}
                                   <td><a href="/admin/customerjob/ForOldData/{{customerjob.extraId}}" target="_blank">{{customerjob.sendername}}</a></td>
                                 {% endif %}
                                  <td>{{customerjob.senderpickupaddress}}</td>
                                  <td>{{customerjob.recipientname}}</td>
                                  <td>{{customerjob.recipientdropoffaddress}}</td>
                                  <td>{{customerjob.ordertype}}</td>
                                  <td>{{customerjob.createdDate}}</td>

									<!-- <td>{{customerjob.sendername}}</td>
									<td>{{customerjob.senderphone}}</td>
									<td>{{customerjob.vehicletype}}</td>
									<td>{{customerjob.deliveryduration}}</td> -->
									<td class="icon-h">
										<!-- <i data-toggle="tooltip" title="View" class="mdi mdi-eye view_customerjob"></i>
										<i data-toggle="tooltip" title="Edit" class="mdi mdi-pencil edit_customerjob"></i> -->
										{% ifequal header_title 'Failed Jobs' %}
										<i data-toggle="tooltip" title="Delete" class="mdi mdi-delete delete_customerjob"></i>
										<span class="shiftdriver"><i data-toggle="tooltip" title="Assign New Driver"class="mdi mdi-account-plus"></i></span>
										<span class="idForShiftDriver" hidden>{{customerjob.driverID}}</span>
										{% else %}
										<i data-toggle="tooltip" title="Delete" class="mdi mdi-delete delete_customerjob"></i>
										{% ifequal header_title 'Completed Jobs' %}{% else %}{% if customerjob.driverexist  %}<span class="unassigndriver"><i  class="mdi mdi-check-circle" style="color:green;"></i></span>
										<span class="shiftdriver"><i data-toggle="tooltip" title="Shift Driver" class="mdi mdi-arrow-expand"></i></span>
										
										<span class="idForShiftDriver" hidden>{{customerjob.driverID}}</span>
										{% else %}

										<span class="assigndriver"><i data-toggle="tooltip" title="Assign Driver" class="mdi mdi-checkbox-blank-circle-outline"></i></span>

										<!-- <i title="Shift Driver" class="mdi mdi-checkbox-blank-circle-outline" data-toggle="modal" data-target="#driverNotExist"></i> -->


										<i title="Shift Driver" class="mdi mdi-arrow-expand" data-toggle="modal" data-target="#driverNotExist"></i>




										<!-- <img src="https://cdn.iconscout.com/icon/premium/png-256-thumb/shift-change-2-606091.png"> -->  



										{% endif %}{% endifequal %}
										{% endifequal %}
										<span class="Extracustomerjob_id" hidden>{{customerjob.extraId}}</span><!-- Creted By Manpreet Singh on 9/11/2020 -->
										<span class="customerjob_id" hidden>{{customerjob.id}}</span>
										<span class="customerjob_senderlatitude" hidden>{{customerjob.senderlatitude}}</span>
										<span class="customerjob_senderlongitude" hidden>{{customerjob.senderlongitude}}</span>
										<span class="customerjob_recipientlatitude" hidden>{{customerjob.recipientlatitude}}</span>
										<span class="customerjob_recipientlongitude" hidden>{{customerjob.recipientlongitude}}</span>
									</td>
								</tr>
							{% endfor %}
						{% endif %}
					</tbody>
				</table>

				</div>
				{% if all_customerjobs.has_other_pages %}
				  <ul class="pagination">
				    {% if all_customerjobs.has_previous %}
				      <li><a href="?page={{ all_customerjobs.previous_page_number }}">&laquo;</a></li>
				    {% else %}
				      <li class="disabled"><span>&laquo;</span></li>
				    {% endif %}
				    {% for i in all_customerjobs.paginator.page_range %}
				      {% if all_customerjobs.number == i %}
				        <li class="active"><span>{{ i }} <span class="sr-only">(current)</span></span></li>
				      {% else %}
				        <li><a href="?page={{ i }}">{{ i }}</a></li>
				      {% endif %}
				    {% endfor %}
				    {% if all_customerjobs.has_next %}
				      <li><a href="?page={{ all_customerjobs.next_page_number }}">&raquo;</a></li>
				    {% else %}
				      <li class="disabled"><span>&raquo;</span></li>
				    {% endif %}
				  </ul>
				{% endif %}
			
			</div>

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



		  </div>
          <!-- content-wrapper ends -->
          <!-- partial:partials/_footer.html -->
          {% include 'admin_footer.html' %}
          <!-- partial -->
        </div>
        <!-- main-panel ends -->
      </div>
      <!-- page-body-wrapper ends -->
    </div>
	


<!-- <div class="swal-modal" role="dialog" aria-modal="true">
   <div class="swal-content">
      <input class="swal-content__input" placeholder="Type your password" type="password">
   </div>
   <div class="swal-footer">
      <div class="swal-button-container">
         <button class="swal-button swal-button--confirm btn btn-primary">OK</button>
         <div class="swal-button__loader">
            <div></div>
            <div></div>
            <div></div>
         </div>
      </div>
   </div>
</div> -->


<div id="AddCustomerModal" class="modal fade" role="dialog">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header border-0">
				<h3 class="modal-title">Add Customer</h3>
				<button type="button" class="close" data-dismiss="modal">&times;</button>
			</div>
			<div class="modal-body">
				<div class="container">
					<div class="row">
						<div class="col-md-12">
							{% csrf_token %}
							<div class="row">
								<div class="form-group profile-pic">
				                  <input type="file" name='add_im' id='add_im' onchange="previewFile()" accept="image/*" >
				                  <label for="add_im">
				                    Image :
				                    <!-- <img id="add_show_image"  src="{% static 'images/camera.png'%}"  alt="your image" />    -->
				                    <img  src="{% static 'images/camera.png'%}" height="200" id="show-im" alt="Image preview...">
				                  </label>
				                  <!-- <input type='file' name='add_im' id='add_im'   />  -->
				                      <!-- <input type='image' name='im' id="im" {% if data.image %} src={{data.image}}  {% else %} src="{% static 'images/camera.png'%}"{% endif %} alt="your image"  /> 
				                      -->
				                </div>
								<div class="form-group col-md-6">
									<label>First Name</label>
									<input type="text" id="add_customer_firstname" class="form-control input_user" value="" onkeydown="return (event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123) || (event.charCode = 32)" onkeypress="if(this.value.length==20) return false;">
									<p class="text-danger" id="add_customer_firstname_txt"></p>
								</div>
								<div class="form-group col-md-6">
									<label>Last Name</label>
									<input type="text" id="add_customer_lastname" class="form-control input_user" value="" onkeydown="return (event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123) || (event.charCode = 32)" onkeypress="if(this.value.length==20) return false;">
									<p class="text-danger" id="add_customer_lastname_txt"></p>
								</div>
								<div class="form-group col-md-6">
									<label>Email</label>
									<input type="text" id="add_customer_email" class="form-control input_user" value="" onkeydown="return (event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123) || (event.charCode = 32)" onkeypress="if(this.value.length==20) return false;">
									<p class="text-danger" id="add_customer_email_txt"></p>
								</div>
								<div class="form-group col-md-6">
									<label>Password</label>
									<input type="password" id="add_customer_password" class="form-control input_user" value="" onkeydown="return (event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123) || (event.charCode = 32)" onkeypress="if(this.value.length==20) return false;">
									<p class="text-danger" id="add_customer_password_txt"></p>
								</div>
								<div class="form-group col-md-6">
									<label>Country Code</label>
									<input type="text" id="add_customer_countrycode" class="form-control input_user" value="" onkeydown="return (event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123) || (event.charCode = 32)" onkeypress="if(this.value.length==20) return false;">
									<p class="text-danger" id="add_customer_countrycode_txt"></p>
								</div>
								<div class="form-group col-md-6">
									<label>Phone Number</label>
									<input type="text" id="add_customer_phone" class="form-control input_user" value="" onkeydown="return (event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123) || (event.charCode = 32)" onkeypress="if(this.value.length==20) return false;">
									<p class="text-danger" id="add_customer_phone_txt"></p>
								</div>
								<div class="form-group col-md-6">
									<label>Address</label>
									<input type="text" id="add_customer_address" class="form-control input_user" value="" onkeydown="return (event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123) || (event.charCode = 32)" onkeypress="if(this.value.length==20) return false;">
									<p class="text-danger" id="add_customer_address_txt"></p>
								</div>
								<div class="w-100 d-flex justify-content-end px-3">
									<input type="hidden" id="add-image-srcdata" />
									<button id="add-customer-btn">Add</button>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<div id="EditCustomerModal" class="modal fade" role="dialog">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header border-0">
				<h3 class="modal-title">Edit Customer</h3>
				<button type="button" class="close" data-dismiss="modal">&times;</button>
			</div>
			<div class="modal-body">
				<div class="container">
					<div class="row">
						<div class="col-md-12">
							<!-- <form action="/superadmin/addcity" method="POST"> -->
                			{% csrf_token %}
								<div class="row">
									<div class="form-group col-md-6 profile-pic ">
					                     <input type='file' name='edit_im' id='edit_im'  onchange="editpreviewFile()" accept="image/*" /> 
					                     <label for="edit_im">Image :
					                     <img id="edit-show-image"  alt="your image" />
					                     </label>
					                     <!-- <input type='image' name='im' id="im" {% if data.image %} src={{data.image}}  {% else %} src="{% static 'images/camera.png'%}"{% endif %} alt="your image"  /> 
					                        -->
					                  </div>
									<div class="form-group col-md-6">
										<label>First Name</label>
										<input type="text" id="edit_customer_firstname" class="form-control input_user" value="" onkeydown="return (event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123) || (event.charCode = 32)" onkeypress="if(this.value.length==20) return false;">
										<p class="text-danger" id="edit_customer_firstname_txt"></p>
									</div>
									<div class="form-group col-md-6">
										<label>Last Name</label>
										<input type="text" id="edit_customer_lastname" class="form-control input_user" value="" onkeydown="return (event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123) || (event.charCode = 32)" onkeypress="if(this.value.length==20) return false;">
										<p class="text-danger" id="edit_customer_lastname_txt"></p>
									</div>
									<div class="form-group col-md-6">
										<label>Email</label>
										<input type="text" id="edit_customer_email" class="form-control input_user" value="" onkeydown="return (event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123) || (event.charCode = 32)" onkeypress="if(this.value.length==20) return false;">
										<p class="text-danger" id="edit_customer_email_txt"></p>
									</div>
									<div class="form-group col-md-6">
										<label>Country Code</label>
										<input type="text" id="edit_customer_countrycode" class="form-control input_user" value="" onkeydown="return (event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123) || (event.charCode = 32)" onkeypress="if(this.value.length==20) return false;">
										<p class="text-danger" id="edit_customer_countrycode_txt"></p>
									</div>
									<div class="form-group col-md-6">
										<label>Phone Number</label>
										<input type="text" id="edit_customer_phone" class="form-control input_user" value="" onkeydown="return (event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123) || (event.charCode = 32)" onkeypress="if(this.value.length==20) return false;">
										<p class="text-danger" id="edit_customer_phone_txt"></p>
									</div>
									<div class="form-group col-md-6">
										<label>Address</label>
										<input type="text" id="edit_customer_address" class="form-control input_user" value="" onkeydown="return (event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123) || (event.charCode = 32)" onkeypress="if(this.value.length==20) return false;">
										<p class="text-danger" id="edit_customer_address_txt"></p>
									</div>
									<div class="w-100 d-flex justify-content-end px-3">
										<input type="hidden" id="edit_customer_id">
										<input type="hidden" id="edit-image-srcdata" />
										<button id="update-customer-btn">Update</button>
									</div>
								</div>
							<!-- </form> -->
						</div>
					</div>
				</div>
			</div>
			<!--   <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div> --></div>
	</div>
</div>

<div id="ViewCustomerModal" class="modal fade" role="dialog">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header border-0">
				<h3 class="modal-title">View Customer</h3>
				<button type="button" class="close" data-dismiss="modal">&times;</button>
			</div>
			<div class="modal-body">
				<div class="container">
					<div class="row">
						<div class="col-md-12">
							<!-- <form action="/superadmin/addcity" method="POST"> -->
                			{% csrf_token %}
								<div class="row">
									<div class="form-group col-md-6 profile-pic ">
					                    <img id="view-show-image"  alt="your image" />
					                    </label>
					                </div>
									<div class="form-group col-md-6">
										<label>First Name</label>
										<input type="text" id="view_customer_firstname" class="form-control input_user" value="" onkeydown="return (event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123) || (event.charCode = 32)" onkeypress="if(this.value.length==20) return false;">
										<p class="text-danger" id="view_customer_firstname_txt"></p>
									</div>
									<div class="form-group col-md-6">
										<label>Last Name</label>
										<input type="text" id="view_customer_lastname" class="form-control input_user" value="" onkeydown="return (event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123) || (event.charCode = 32)" onkeypress="if(this.value.length==20) return false;">
										<p class="text-danger" id="view_customer_lastname_txt"></p>
									</div>
									<div class="form-group col-md-6">
										<label>Email</label>
										<input type="text" id="view_customer_email" class="form-control input_user" value="" onkeydown="return (event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123) || (event.charCode = 32)" onkeypress="if(this.value.length==20) return false;">
										<p class="text-danger" id="view_customer_email_txt"></p>
									</div>
									<div class="form-group col-md-6">
										<label>Country Code</label>
										<input type="text" id="view_customer_countrycode" class="form-control input_user" value="" onkeydown="return (event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123) || (event.charCode = 32)" onkeypress="if(this.value.length==20) return false;">
									</div>
									<div class="form-group col-md-6">
										<label>Phone Number</label>
										<input type="text" id="view_customer_phone" class="form-control input_user" value="" onkeydown="return (event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123) || (event.charCode = 32)" onkeypress="if(this.value.length==20) return false;">
									</div>
									<div class="form-group col-md-6">
										<label>Address</label>
										<input type="text" id="view_customer_address" class="form-control input_user" value="" onkeydown="return (event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123) || (event.charCode = 32)" onkeypress="if(this.value.length==20) return false;">
									</div>
									<div class="w-100 d-flex justify-content-end px-3">
										<button id="close-customer-view-btn">Ok</button>
									</div>
								</div>
							<!-- </form> -->
						</div>
					</div>
				</div>
			</div>
			<!--   <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div> --></div>
	</div>
</div>

<div class="modal fade popup-all" id="success_modal_add" role="dialog" >
 <div class="modal-dialog">
   <div class="modal-content">
     <!-- <div class="modal-header border-0"> -->
       <!-- <button type="button" class="close" data-dismiss="modal">&times;</button> -->
   <!--   </div> -->
     <div class="modal-body">
       <span class="green-thumb"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i></span>
       <h3 class="response-msg">Record added successfully.</h3>
     </div>          
   </div>
 </div>
</div>

<div class="modal fade popup-all" id="success_modal_updated" role="dialog" >
 <div class="modal-dialog">
   <div class="modal-content">
     <!-- <div class="modal-header border-0"> -->
       <!-- <button type="button" class="close" data-dismiss="modal">&times;</button> -->
   <!--   </div> -->
     <div class="modal-body">
      <span class="green-thumb">  <i class="fa fa-thumbs-o-up" aria-hidden="true"></i></span>
       <h3 class="response-msg">Record updated successfully.</h3>
     </div>          
   </div>
 </div>
</div>

<div class="modal fade popup-all" id="driver_assigned_modal" role="dialog" >
 <div class="modal-dialog">
   <div class="modal-content">
     <!-- <div class="modal-header border-0"> -->
       <!-- <button type="button" class="close" data-dismiss="modal">&times;</button> -->
   <!--   </div> -->
     <div class="modal-body">
      <span class="green-thumb">  <i class="fa fa-thumbs-o-up" aria-hidden="true"></i></span>
       <h3 class="response-msg">Driver assigned successfully.</h3>
     </div>          
   </div>
 </div>
</div>

<div class="modal fade popup-all" id="driverSlotsUnavailable" role="dialog" >
 <div class="modal-dialog">
   <div class="modal-content">
     <!-- <div class="modal-header border-0"> -->
       <!-- <button type="button" class="close" data-dismiss="modal">&times;</button> -->
   <!--   </div> -->
     <div class="modal-body">
      <span class="green-thumb">  <i class="fa fa-thumbs-o-up" aria-hidden="true"></i></span>
       <h3 class="response-msg">Slot Unavailable</h3>
     </div>          
   </div>
 </div>
</div>


<div class="modal fade popup-all" id="driverSlotsUnavailable2" role="dialog" >
 <div class="modal-dialog">
   <div class="modal-content">
     <!-- <div class="modal-header border-0"> -->
       <!-- <button type="button" class="close" data-dismiss="modal">&times;</button> -->
   <!--   </div> -->
     <div class="modal-body">
      <span class="green-thumb">  <i class="fa fa-thumbs-o-up" aria-hidden="true"></i></span>
       <h3 class="response-msg">Driver document has not been approved.</h3>
     </div>          
   </div>
 </div>
</div>

<div id="DeleteUserModal" class="modal fade modal-small popup-all confirm-popup" role="dialog" >
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header border-0">
       
			   <h3 class="modal-title">Delete Record</h3>
			   <button type="button" class="close" data-dismiss="modal">&times;</button>
		
        <!-- <h4 class="modal-title">Modal Header</h4> -->
      </div>
      <div class="modal-body">
        <h5 class="text-center text-3">Do you want to delete this record?</h5>
        <input id="delete-record-data" type="hidden" / >
        <!-- <input type="button" class="fa-trash1" value="Yes" /> -->
        <div class="text-center">
          <button type="button" class="btn btn-default delete-record-yes-btn py-2  btn-c1 confirm-btn" >Confirm</button>
          <button type="button" class="btn btn-default py-2  btn-c1 cancel-btn" class="close" data-dismiss="modal">Cancel</button>
        </div>
      </div>

    </div>

  </div>
</div>


<div id="unassigndriverModaL" class="modal fade modal-small popup-all confirm-popup" role="dialog" >
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header border-0">
       
			   <h3 class="modal-title">Unassigned Driver</h3>
			   <button type="button" class="close" data-dismiss="modal">&times;</button>
		
        <!-- <h4 class="modal-title">Modal Header</h4> -->
      </div>
      <div class="modal-body">
        <h5 class="text-center text-3">Are you sure you want to unassigned driver for this job?</h5>
        <input id="idofunassigned" type="hidden" / >
        <!-- <input type="button" class="fa-trash1" value="Yes" /> -->
        <div class="text-center">
          <button type="button" class="btn btn-default  py-2  btn-c1 confirm-btn" id="unassignedDriverPermanent">Confirm</button>
          <button type="button" class="btn btn-default py-2  btn-c1 cancel-btn" class="close" data-dismiss="modal">Cancel</button>
        </div>
      </div>

    </div>

  </div>
</div>


<div id="ApproveModal" class="modal fade modal-small popup-all" role="dialog" >
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header border-0">
      	<h5 class="text-center text-3">Do you want to Approve this account?</h5>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <!-- <h4 class="modal-title">Modal Header</h4> -->
      </div>
      <div class="modal-body">
        <h5 class="text-center text-3">Do you want to Approve this account?</h5>
        <input id="tobeapproved_id" type="hidden" / >
        <div class="text-center">
          <button type="button" class="btn btn-default approve-account-btn py-2  btn-c1" >Yes</button>
          <button type="button" class="btn btn-default py-2 btn-c1" class="close" data-dismiss="modal">No</button>
        </div>
      </div>

    </div>

  </div>
</div>

<div class="modal fade" id="success_modal_deleted" role="dialog" >
 <div class="modal-dialog">
   <div class="modal-content">
     <!-- <div class="modal-header border-0"> -->
       <!-- <button type="button" class="close" data-dismiss="modal">&times;</button> -->
<!--      </div> -->
     <div class="modal-body">
       <span class="green-thumb"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i></span>
       <h3 class="response-msg">Record deleted successfully.</h3>
     </div>          
   </div>
 </div>
</div>



<div class="modal fade popup-all maps-popup  " id="AssignDriver" role="dialog" >
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header border-0">
			   <h3 class="modal-title">Drivers List</h3>
			   <button type="button" class="close" data-dismiss="modal">&times;</button>
			</div>
			<div class="modal-body">
			   <div class="table-fix">
			      <div class="table-responsive">
			         <table class="table" id="assign-firstmile-delivery-table">
			            <thead id="myHeader" class="header">
			               <th>Select</th>
			               <th>Image</th>
			               <th>Name</th>
			               <th>Phone Number</th>
			               <th>No. of Parcels</th>
			               <th>Pickup Distance</th>
			               <th>Location</th>
			               <th hidden="">Assign</th>
			            </thead>
			            <form>
			            {% csrf_token %}
			            <tbody>
			            	{% if all_drivers %}
					            	{% for driver in all_drivers %}
					            	<!-- {{driver.noofparcels}} -->
					            	
					            	<tr style="height: 100px;">
					            		<td><input type="checkbox" class="chk" style="width: 20px;height: 20px;" name="check"></td>
					            		<td><img src="{% if driver.image %}{{driver.image}}{% else %}http://13.126.26.12/static/images/camera.png{% endif %}"></td>
					            		<td>{{driver.name}}</td>
					            		<td>{{driver.phone}}</td>
					            		<td>{{driver.noofparcels}}</td>
					            		<td><span class="pickup-distance{{driver.id}}"></span> Km</td>
					            		<td class="maps-row"><div class="maps-sec" id="map{{driver.id}}"></div></td>
					            		<td hidden=""><span class="driver_id">{{driver.id}}</span></td>
					            	</tr>
					            	<!-- {% if driver.noofparcels == 0 %} -->
									<!-- {% else %}
				            		<tr style="height: 100px;">
					            		<td><input type="checkbox" class="chk" style="width: 20px;height: 20px;" name="check" disabled></td>
					            		<td><img src="{% if driver.image %}{{driver.image}}{% else %}http://13.126.26.12/static/images/camera.png{% endif %}"></td>
					            		<td>{{driver.name}}</td>
					            		<td>{{driver.phone}}</td>
					            		<td>{{driver.noofparcels}}</td>
					            		<td><span class="pickup-distance{{driver.id}}"></span> Km</td>
					            		<td class="maps-row"><div class="maps-sec" id="map{{driver.id}}"></div></td>
					            		<td hidden=""><span class="driver_id">{{driver.id}}</span></td>
					            	</tr>
					            	{% endif %} -->
				            	{% endfor %}
			            	{% endif %}
			            </tbody>
			         </table>
			      </div>
			   </div>
			   <div class="modal-footer align-items-center flex-wrap justify-content-between user-list-footer">
          			<div>
		            	<p id="assign-driver-error" class="m-md-0 mb-2" style="color:red;"></p>
		          	</div>
		          	<div>
		          		<p id="ExtraCustomer_job_id" hidden></p>
						<p id="customer_job_id" hidden></p>
						<span id="senderlatitude" hidden></span>
						<span id="senderlongitude" hidden></span>
						<span id="recipientlatitude" hidden></span>
						<span id="recipientlongitude" hidden></span>
						<button type="button" class="btn btn-default csv-btn btn-c1" id="assigndriver-btn">Assign</button>
			        </div>
        		</div>
      		</div>
    	</div>
  </div>

</div>


<div class="modal fade popup-all maps-popup  driv-list" id="ShiftDriver" role="dialog" >
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header border-0">
			   <h3 class="modal-title">Drivers List</h3>
			   <button type="button" class="close" data-dismiss="modal">&times;</button>
			</div>
			<div class="modal-body">
			   <div class="table-fix">
			      <div class="table-responsive">
			         <table class="table" id="assign-firstmile-delivery-table">
			            <thead id="myHeader" class="header">
			               <th>Driver Status</th>
			               <th>Image</th>
			               <th>Name</th>
			               <th>Phone Number</th>
			               <th>No. of Parcels</th>
			               <th>Pickup Distance</th>
			               <th>Location</th>
			               <th hidden="">Assign</th>
			            </thead>
			            <form>
			            {% csrf_token %}
			            <tbody>
			            	<tr style="height: 100px;">
			            		<td>Current Driver</td>
			            		<td ><img src=""id="currentDriverimg"></td>
			            		<td id="currentDrivername">{{driver.name}}</td>
			            		<td id="currentDriverphone">{{driver.phone}}</td>
			            		<td id="currentDrivernoofparcel">{{driver.noofparcels}}</td>
			            		<td ><span class="pickup-distanceCurrentDriver"></span> Km</td>
			            		<td class="maps-row"><div class="maps-sec" id="mapCurrentDriver"></div></td>
			            		<td ><span id="currentSameParcelID" hidden></span></td>
					        </tr>
					        <tr style="height: 100px;">
					        	<td>Replace with</td>
					        	<td ><img src=""id="currentDriverimg2"></td>
			            		<td id="addNewDroList"></td>
			            		<td id="currentDriverphone2">nothing</td>
			            		<td id="currentDrivernoofparcel2">0</td>
			            		<td ><span class="pickup-distanceCurrentDriver2"></span> Km</td>
			            		<td class="maps-row"><div class="maps-sec" id="mapCurrentDriver2"></div></td>
			            		<td ><span id="shifAvalDriverId" hidden></span></td>
			            		<!-- <td><input type="checkbox" class="chk" style="width: 20px;height: 20px;" name="check"></td> -->
			            	<!-- 	<td><img src="{% if driver.image %}{{driver.image}}{% else %}http://13.126.26.12/static/images/camera.png{% endif %}"></td>
			            		<td>{{driver.name}}</td>
			            		<td>{{driver.phone}}</td>
			            		<td>{{driver.noofparcels}}</td>
			            		<td><span class="pickup-distanceCurrentDriver"></span> Km</td>
			            		<td class="maps-row"><div class="maps-sec" id="mapCurrentDriver"></div></td>
			            		<td hidden=""><span class="driver_id">{{driver.id}}</span></td> -->
					        </tr>
			            	<!-- <tr>
			            		<td id="addNewDroList"></td>

			            	</tr> -->
			            	<!-- {% if customerjob.driverexist  %}

							{% endif %} -->
			            </tbody>
			         </table>
			      </div>
			   </div>
			   <div class="modal-footer align-items-center flex-wrap justify-content-between user-list-footer">
          			<div>
		            	<p id="assign-driver-error2" class="m-md-0 mb-2" style="color:red;"></p>
		          	</div>
		          	<div>
		          		<p id="ExtraCustomer_job_id2" hidden></p>
						<p id="customer_job_id2" hidden></p>
						<span id="senderlatitude2" hidden></span>
						<span id="senderlongitude2" hidden></span>
						<span id="recipientlatitude2" hidden></span>
						<span id="recipientlongitude2" hidden></span>
						{% ifequal header_title 'Failed Jobs' %}
						<button type="button" class="btn btn-default csv-btn btn-c1" id="addnewdrivertofailedjob">Add new Driver</button>
						{% else %}
						<button type="button" class="btn btn-default csv-btn btn-c1" id="shiftDriver-btn">Shift Driver</button>
						{% endifequal %}
			        </div>
        		</div>
      		</div>
    	</div>
  </div>

</div>


<div id="driverNotExist" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <!-- <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div> -->
      <div class="modal-body">
       <span class="green-thumb"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i></span>
       <h3 class="response-msg">No Driver Exist.</h3>
     </div>
     <!--  <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div> -->
    </div>

  </div>
</div>


<div id="driverNotExist2" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <!-- <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div> -->
      <div class="modal-body">
       <span class="green-thumb"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i></span>
       <h3 class="response-msg">This Driver not yet completed his last job</h3>
     </div>
     <!--  <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div> -->
    </div>

  </div>
</div>

{% endblock %}


{% block js %}

    <script src="{% static 'assets/vendors/js/vendor.bundle.base.js' %}"></script>
    <script src="{% static 'assets/vendors/chart.js/Chart.min.js' %}"></script>
    <script src="{% static 'assets/js/off-canvas.js' %}"></script>
    <script src="{% static 'assets/js/hoverable-collapse.js' %}"></script>
    <script src="{% static 'assets/js/misc.js' %}"></script>
    <script src="{% static 'assets/js/dashboard.js' %}"></script>
    <script src="{% static 'assets/js/todolist.js' %}"></script>
   <!--  // <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> -->

<!-- 	// <script  src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
	// <script  src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script> -->



	<script src="{% static 'js/admin_showallcustomerjobs.js' %}" ></script>
	<script src="https://unpkg.com/@popperjs/core@2" ></script>
	<script>
		function previewFile() {
		  // alert('in-add-preview-file')
		  var preview = document.querySelector('#show-im');
		  var file    = document.querySelector('input[type=file]').files[0];
		  var reader  = new FileReader();

		  reader.addEventListener("load", function () {
		    // alert(reader.result);
		    $('#add-image-srcdata').val(reader.result)
		    preview.src = reader.result;
		  }, false);

		  if (file) {
		    reader.readAsDataURL(file);
		  }
		}
	function editpreviewFile() 
	{
	  var preview = document.querySelector('#edit-show-image');
	  var file    = document.querySelector('#edit_im').files[0];
	  var reader  = new FileReader();
	  reader.addEventListener("load", function () {
	    // alert(reader.result);
	    $('#edit-image-srcdata').val(reader.result)
	    preview.src = reader.result;
	console.log(reader.result);
	return false;
	  }, false);

	  if (file) {
	    reader.readAsDataURL(file);
	  }
	}
	</script>
	<script>
	$(document).ready(function(){
	  $('[data-toggle="tooltip"]').tooltip(); 
	});
	</script>
	<script>
			function distance(lat1, lon1, lat2, lon2, unit) {
        var radlat1 = Math.PI * lat1/180
        var radlat2 = Math.PI * lat2/180
        var radlon1 = Math.PI * lon1/180
        var radlon2 = Math.PI * lon2/180
        var theta = lon1-lon2
        var radtheta = Math.PI * theta/180
        var dist = Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta);
        dist = Math.acos(dist)
        dist = dist * 180/Math.PI
        dist = dist * 60 * 1.1515
        if (unit=="K") { dist = dist * 1.609344 }
        if (unit=="N") { dist = dist * 0.8684 }
        return dist.toFixed(2);
}
      





      function initMap() {
      	{% for driver in all_drivers %}
      	
      	
        var markerArray = [];
        var directionsService = new google.maps.DirectionsService;
        var map = new google.maps.Map(document.getElementById('map{{driver.id}}'), {
          zoom: 13,
          center: {lat: 29.1234, lng: 76.1234}
        });
        {% if driver.latitude %}

        $('.pickup-distance{{driver.id}}').text(distance($('#senderlatitude').text(), $('#senderlongitude').text(), {{driver.latitude}}, {{driver.longitude}}, 'K'))
        	var uluru = {lat: {{driver.latitude}}, lng: {{driver.longitude}}};
        	var marker = new google.maps.Marker({position: uluru, label: {
      text: 'Driver',
      // color: "#eb3a44",
      color: "#000000",
      fontSize: "16px",
      fontWeight: "bold"
    }, map: map});
        {% else %}
        		$('.pickup-distance{{driver.id}}').text('0')
        {% endif %}

        var directionsRenderer = new google.maps.DirectionsRenderer({map: map});
        var stepDisplay = new google.maps.InfoWindow;
        calculateAndDisplayRoute(
            directionsRenderer, directionsService, markerArray, stepDisplay, map);
        
      {%endfor%}
      }

      
      function calculateAndDisplayRoute(directionsRenderer, directionsService,
          markerArray, stepDisplay, map) {
        for (var i = 0; i < markerArray.length; i++) {
          markerArray[i].setMap(null);
        }

        	senderlatitude = $('#senderlatitude').text()
  			senderlongitude = $('#senderlongitude').text()
  			recipientlatitude = $('#recipientlatitude').text()
  			recipientlongitude = $('#recipientlongitude').text()

  			var sender = new google.maps.LatLng(senderlatitude, senderlongitude)
    		var recipient = new google.maps.LatLng(recipientlatitude, recipientlongitude)
    		// alert(sender)
    		// alert(recipient)
        directionsService.route({
          origin: sender,
          destination: recipient,
          travelMode: google.maps.DirectionsTravelMode.DRIVING 
        }, function(response, status) {
          if (status === 'OK') {
            
            directionsRenderer.setDirections(response);
            // showSteps(response, markerArray, stepDisplay, map);
          } else {
            // window.alert('Directions request failed due to ' + status);
            var a;
          }
        });
      }


      
      
    </script>
    <script>
		$(document).on('click','#generate-completed-jobs-csv',function(){
			// alert('clicked')
			var token = $('input[name="csrfmiddlewaretoken"]').val()
			  $.ajax({
			      type: 'POST',
			      url: '/admin/customerjobs/completed/csv/',
			      data: {  'csrfmiddlewaretoken' : token},
			      success: function(response){
			        console.log(response);
			        if(response.status_code == 200)
			        {	
			        	// location.href = response['link'];
			        	// debugger;
			        	// var encodedUri = 'data:application/csv;charset=utf-8,' + encodeURIComponent(response['link']);
						var link = document.createElement("a");
						link.setAttribute("href", response['link']);
						link.setAttribute("download", "");
						// link.innerHTML= "Download do Relatório";
						document.body.appendChild(link);
						link.click();
			  		}
			  	  }
			  	});

		})



		$(document).on('click','#generate-outstanding-jobs-csv',function(){
			alert('This is currently under development mode')
			var token = $('input[name="csrfmiddlewaretoken"]').val()
			  $.ajax({
			      type: 'POST',
			      url: '/admin/customerjobs/outstanding/csv/',
			      data: {  'csrfmiddlewaretoken' : token},
			      success: function(response){
			        console.log(response);
			   //      if(response.status_code == 200)
			   //      {	
			        	
						// var link = document.createElement("a");
						// link.setAttribute("href", response['link']);
						// link.setAttribute("download", "");
						// document.body.appendChild(link);
						// link.click();
			  	// 	}
			  	  }
			  	});

		})
	</script>
	
    <!-- <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCZt3wR3ItaSSmIhWnRy4hy6FnqmEM81oY&sensor=false"> -->
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCZt3wR3ItaSSmIhWnRy4hy6FnqmEM81oY">
    </script>
{% endblock %}