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

{% block title %}
	<title>Operational Areas</title>
{% endblock %}

{% block css %}
	<style>

.pac-container{z-index: 99999 !important;
}

#AddAreaModal .text-danger{line-height: 19px !important;}


</style>
	<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://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<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>
	
{% endblock %}


{% block content %}
    <div class="container-scroller">
      {% include 'admin_header.html' %}
      <div class="container-fluid page-body-wrapper">
        {% include 'admin_sidebar.html' %}



        <div class="main-panel  backnd-control  ">
          <div class="content-wrapper">
          	<div class="row  two-divs">
          		<div class="col-md-9">
          	<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-multiple menu-icon"></i>
                </span> Operational Areas </h3>
            </div>
          </div>

          	<div class="col-md-3 text-right">
               <button id="open-add-area-modal" class="btn-c"><i class="mdi mdi-plus menu-icon"></i>Add Area</button>
        	</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="admins-table" class="table table-hover border-table  all-admins-c">
					<thead>
						<th>Serial No.</th>
						<th>Name</th>
						<th>Working Radius</th>
						<th>Action</th>
					</thead>
					<tbody>
						{% if operationalareas_data %}
							{% for obj in operationalareas_data %}
								<tr>
									<td>{{obj.serialno}}</td>
									<td>{{obj.name}}</td>
									<td>{{obj.distance_from_centre_point}} {{obj.distanceunit}}</td>
                                     <td class="action-btns">
                                     	<button id="change-popup-status-btn" class="btn btn-c">Change Status</button>
                                     </td>

								</tr>
							{% endfor %}
						{% endif %}
					</tbody>
				</table>
				{% if operationalareas_data.has_other_pages %}
				  <ul class="pagination">
				    {% if operationalareas_data.has_previous %}
				      <li><a href="?page={{ operationalareas_data.previous_page_number }}">&laquo;</a></li>
				    {% else %}
				      <li class="disabled"><span>&laquo;</span></li>
				    {% endif %}
				    {% for i in operationalareas_data.paginator.page_range %}
				      {% if operationalareas_data.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 operationalareas_data.has_next %}
				      <li><a href="?page={{ operationalareas_data.next_page_number }}">&raquo;</a></li>
				    {% else %}
				      <li class="disabled"><span>&raquo;</span></li>
				    {% endif %}
				  </ul>
				{% endif %}
			</div>
			</div>
</div>
			</div>
			</div>
		





		  </div>
          {% include 'admin_footer.html' %}
        </div>
      </div>
    </div>
	

    <div id="AddAreaModal" class="modal fade  popup-all operational-area" role="dialog">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header border-0">
				<h3 class="modal-title">Add Area</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 col-md-6">
									<label>Name</label>
									<input type="text" id="add_area_name" class="form-control">
									<p class="text-danger" id="add_area_name_txt"></p>
								</div>
								<div class="form-group col-md-6">
									<label>Working Radius</label>
									<input type="text" id="add_area_workingradius" class="form-control " >
									<p class="text-danger" id="add_area_workingradius_txt"></p>
								</div>
								<div class="form-group col-md-6">
									<label>Distance Unit</label>
									<select id="add_area_distanceunit" class="form-control">
										<option value="">Select Unit</option>
										<option value="mile">mile</option>
									</select>
									<p class="text-danger" id="add_area_distanceunit_txt"></p>
								</div>
								<div class="w-100 d-flex justify-content-center px-3">
									<input type="hidden" id="latitude" />
									<input type="hidden" id="longitude" />
									<button id="add-area-btn" class="btn-c1">Add</button>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>



	<div class="modal fade" 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" 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 id="ChangeStatusModal" 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"><span id="title"></span></h3>
	        <button type="button" class="close" data-dismiss="modal">&times;</button>
	      </div>
	      <div class="modal-body">
	        <h5 class="text-center">Do you want to <span id="message-word"></span> this record?</h5>
	        <input type="hidden" id="new-status" />
	        <div class="text-center">
	          <button type="button" class="btn btn-default py-2  btn-c1 confirm-btn" id="change-popup-status-btn2" >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 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>



	
{% 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://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 type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCZt3wR3ItaSSmIhWnRy4hy6FnqmEM81oY&libraries=places"></script>
	<script src="{% static 'js/admin/admin_operationalarea.js' %}" ></script>
	<!-- <script src="https://unpkg.com/@popperjs/core@2" ></script> -->
	
	<script>
        var input = document.getElementById('add_area_name');
       
        var autocomplete = new google.maps.places.Autocomplete(input);
        google.maps.event.addListener(autocomplete, 'place_changed', function() {
      var place = autocomplete.getPlace();
      
      $('#latitude').val(place.geometry.location.lat())
      $('#longitude').val(place.geometry.location.lng())
      });
</script>
{% endblock %}