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

  {% block title %}
    <title>Vehicle Types</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://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">
	  <!-- 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-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-bus-double-decker"></i>
                </span> All Vehicle Types </h3>
            </div>
        </div>
        <div class="col-md-3 text-right">
               <button id="open-add-vehicletype-modal" class="btn-c"><i class="mdi mdi-plus menu-icon"></i>Add Vehicle Type</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="vehicletypes-table" class="table table-hover border-table">
					<thead>
						<th>Serial No.</th>
						<th>Name</th>
						<th>Carrying Limit(Kg)</th>
						<th>Fixed Distance</th>
						<th>Base Rate</th>
						<th>Additional Rate Per Unit</th>
						<th>Price Per Drop</th>
						<th>Price Per Hour</th>
						<th>Currency</th>
						<th>Distance Unit</th>
						<!-- <th>Created At</th> -->
						<th>Action</th>
					</thead>
					<tbody>
						{% if all_vehicletypes %}
							{% for vehicletype in all_vehicletypes %}
								<tr>
									<td>{{vehicletype.serialno}}</td>
									<td>{{vehicletype.name}}</td>
									<td>{{vehicletype.carryinglimitinkg}}</td>
									<td>{{vehicletype.fixeddistance}}</td>
									<td>{{vehicletype.baserate}}</td>
									<td>{{vehicletype.addittionalrateperunit}}</td>
									<td>{{vehicletype.priceperdrop}} {{vehicletype.currency}}</td>
									<td>{{vehicletype.priceperhour}} {{vehicletype.currency}}</td>
									<td>{{vehicletype.currency}}</td>
									<td>{{vehicletype.distanceunit}}</td>
									<!-- <td>{{vehicletype.created_at}}</td> -->
									<td>

                                     
                                   <!-- <i data-toggle="tooltip" title="View" class="mdi mdi-eye  view_vehicletype"></i> -->
				            <i data-toggle="tooltip" title="Edit" class="mdi mdi-pencil edit_vehicletype"></i>
                            <i data-toggle="tooltip" title="Delete" class="mdi mdi-delete delete_vehicletype"></i>
                           <span class="vehicletype_id" hidden>{{vehicletype.id}}</span>


									    <!-- <span class="mdi mdi-pencil  view_vehicletype">View</span>
										<span class="mdi mdi-tooltip-edit edit_vehicletype">Edit</span>
										<span class="mdi mdi-delete delete_vehicletype">Delete</span>
										<span class="vehicletype_id" hidden>{{vehicletype.id}}</span> -->
									</td>
								</tr>
							{% endfor %}
						{% endif %}
					</tbody>
				</table>
				{% if all_vehicletypes.has_other_pages %}
				  <ul class="pagination">
				    {% if all_vehicletypes.has_previous %}
				      <li><a href="?page={{ all_vehicletypes.previous_page_number }}">&laquo;</a></li>
				    {% else %}
				      <li class="disabled"><span>&laquo;</span></li>
				    {% endif %}
				    {% for i in all_vehicletypes.paginator.page_range %}
				      {% if all_vehicletypes.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_vehicletypes.has_next %}
				      <li><a href="?page={{ all_vehicletypes.next_page_number }}">&raquo;</a></li>
				    {% else %}
				      <li class="disabled"><span>&raquo;</span></li>
				    {% endif %}
				  </ul>
				{% endif %}
				</div>		
			</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>

	{% csrf_token %}
		
		

	<div id="AddVehicleTypeModal" class="modal fade popup-all" role="dialog">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header border-0">
					<h3 class="modal-title">Add Vehicle Type</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-12">
										<label>Name</label>
										<input type="text" id="add_vehicletype_name" class="form-control input_user" value="" >
										<p class="text-danger" id="add_vehicletype_name_txt"></p>
									</div>

									<div class="form-group 	 col-md-12">
										<label>Carrying Limit(Kg)</label>
										<input  id="add_vehicletype_carryinglimitinkg" class="form-control input_user" value="" >
										<p class="text-danger" id="add_vehicletype_carryinglimitinkg_txt"></p>
									</div>

									<div class="form-group 	 col-md-12">
											<label>Fixed Distance</label>
											<input type="number" id="add_vehicletype_fixeddistance" class="form-control input_user" value="" >
											<p class="text-danger" id="add_vehicletype_fixeddistance_txt"></p>
										</div>
										

									



										<div class="form-group 	 col-md-12">
											<label>Base Rate</label>
											<input type="number" id="add_vehicletype_baserate" class="form-control input_user" value="" >
											<p class="text-danger" id="add_vehicletype_baserate_txt"></p>
										</div>
										<div class="form-group 	 col-md-12 ">
											<label>Addittional Rate Per Unit</label>
											<input type="text" id="add_vehicletype_addittionalrateperunit" class="form-control input_user" value="" >
											<p class="text-danger" id="add_vehicletype_addittionalrateperunit_txt"></p>
										</div>


										<div class="form-group 	 col-md-12 ">
											<label>Distance Unit</label>
											<select id="add_vehicletype_distanceunit" class="form-control">
												<option value="mile">Mile</option>
											</select>
											<p class="text-danger" id="add_vehicletype_distanceunit_txt"></p>
										</div>

										<div class="form-group 	 col-md-12 ">
											<label>Price Per Drop</label>
											<input type="text" id="add_vehicletype_priceperdrop" class="form-control input_user" value="" >
											<p class="text-danger" id="add_vehicletype_priceperdrop_txt"></p>
										</div>


										<div class="form-group 	 col-md-12 ">
											<label>Price Per Hour</label>
											<input type="text" id="add_vehicletype_priceperhour" class="form-control input_user" value="" >
											<p class="text-danger" id="add_vehicletype_priceperhour_txt"></p>
										</div>
                                    	
                                    	<!-- <div class="form-group 	 col-md-12 all-width " >
											<label>Currency</label>
											<select id="add_vehicletype_currency" class="form-control">
												<option value="£">£</option>
											</select>
											<p class="text-danger" id="add_vehicletype_currency_txt"></p>
										</div> -->

										<div class="form-group 	 col-md-12  " >
											<label>Currency</label>
											<select id="add_vehicletype_currency" class="form-control">
												<option value="£">£</option>
											</select>
											<p class="text-danger" id="add_vehicletype_currency_txt"></p>
										</div>

										<div class="form-group 	 col-md-12 ">
											<label>Height</label>
											<input type="text" id="add_vehicletype_height" class="form-control input_user" value="" >
											<p class="text-danger" id="add_vehicletype_height_txt"></p>
										</div>

										<div class="form-group 	 col-md-12 ">
											<label>Width</label>
											<input type="text" id="add_vehicletype_width" class="form-control input_user" value="" >
											<p class="text-danger" id="add_vehicletype_width_txt"></p>
										</div>

										<div class="form-group 	 col-md-12 ">
											<label>Length</label>
											<input type="text" id="add_vehicletype_length" class="form-control input_user" value="" >
											<p class="text-danger" id="add_vehicletype_length_txt"></p>
										</div>




									<div class="w-100 d-flex justify-content-center px-3">
										<button id="add-vehicletype-btn" class="btn-c1">Add</button>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div id="EditVehicleTypeModal" class="modal fade popup-all " role="dialog">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header border-0">
					<h3 class="modal-title">Edit Vehicle Type</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-12">
											<label>Name</label>
											<input type="text" id="edit_vehicletype_name" class="form-control input_user" value="" >
											<p class="text-danger" id="edit_vehicletype_name_txt"></p>
										</div>
										<div class="form-group col-md-12">
											<label>Carrying Limit(Kg)</label>
											<input  id="edit_vehicletype_carryinglimitinkg" class="form-control input_user" value="" >
											<p class="text-danger" id="edit_vehicletype_carryinglimitinkg_txt"></p>
										</div>

										
										<div class="form-group col-md-12">
											<label>Fixed Distance</label>
											<input type="number" id="edit_vehicletype_fixeddistance" class="form-control input_user" value="" >
											<p class="text-danger" id="edit_vehicletype_fixeddistance_txt"></p>
										</div>
										<div class="form-group col-md-12">
											<label>Base Rate</label>
											<input type="number" id="edit_vehicletype_baserate" class="form-control input_user" value="" >
											<p class="text-danger" id="edit_vehicletype_baserate_txt"></p>
										</div>
										<div class="form-group col-md-12">
											<label>Addittional Rate Per Unit</label>
											<input type="number" id="edit_vehicletype_addittionalrateperunit" class="form-control input_user" value="" >
											<p class="text-danger" id="edit_vehicletype_addittionalrateperunit_txt"></p>
										</div>
										<div class="form-group col-md-12">
											<label>Distance Unit</label>
											<select id="edit_vehicletype_distanceunit" class="form-control">
												<option value="mile">Mile</option>
											</select>
											<p class="text-danger" id="edit_vehicletype_distanceunit_txt"></p>
										</div>
										<div class="form-group 	 col-md-12 ">
											<label>Price Per Drop</label>
											<input type="text" id="edit_vehicletype_priceperdrop" class="form-control input_user" value="" >
											<p class="text-danger" id="edit_vehicletype_priceperdrop_txt"></p>
										</div>


										<div class="form-group 	 col-md-12 ">
											<label>Price Per Hour</label>
											<input type="text" id="edit_vehicletype_priceperhour" class="form-control input_user" value="" >
											<p class="text-danger" id="edit_vehicletype_priceperhour_txt"></p>
										</div>
                                    	
										<!-- <div class="form-group col-md-12 all-width">
											<label>Currency</label>
											<select id="edit_vehicletype_currency" class="form-control">
												<option value="£">£</option>
											</select>
											<p class="text-danger" id="edit_vehicletype_currency_txt"></p>
										</div> -->

										<div class="form-group col-md-12">
											<label>Currency</label>
											<select id="edit_vehicletype_currency" class="form-control">
												<option value="£">£</option>
											</select>
											<p class="text-danger" id="edit_vehicletype_currency_txt"></p>
										</div>

										<div class="form-group 	 col-md-12 ">
											<label>Height</label>
											<input type="text" id="edit_vehicletype_height" class="form-control input_user" value="" >
											<p class="text-danger" id="edit_vehicletype_height_txt"></p>
										</div>

										<div class="form-group 	 col-md-12 ">
											<label>Width</label>
											<input type="text" id="edit_vehicletype_width" class="form-control input_user" value="" >
											<p class="text-danger" id="edit_vehicletype_width_txt"></p>
										</div>

										<div class="form-group 	 col-md-12 ">
											<label>Length</label>
											<input type="text" id="edit_vehicletype_length" class="form-control input_user" value="" >
											<p class="text-danger" id="edit_vehicletype_length_txt"></p>
										</div>


										<div class="w-100 d-flex justify-content-center px-3">
											<input type="hidden" id="edit_vehicletype_id">
											<button id="update-vehicletype-btn" class="btn-c1">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="ViewVehicleTypeModal" class="modal fade popup-all" role="dialog">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header border-0">
					<h3 class="modal-title">View Vehicle Type</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-12">
											<label>Name</label>
											<input type="text" id="view_vehicletype_name" 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_vehicletype_name_txt"></p>
										</div>
										<div class="w-100 d-flex justify-content-center px-3">
											<button id="close-vehicletype-view-btn" class="btn-c1" >Ok</button>
										</div>
									</div>
								<!-- </form> -->
							</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="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">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 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  src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
	<script src="{% static 'js/admin/admin_showallvehicletypes.js' %}" ></script>
{% endblock %}