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

  {% block title %}
    <title>Parcel 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-file-outline menu-icon"></i>
                </span> All Parcel Types </h3>
            </div>
        </div>
        <div class="col-md-3 text-right">
               <button id="open-add-parceltype-modal" class="btn-c"><i class="mdi mdi-plus menu-icon"></i>Add Parcel 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="parceltypes-table" class="table table-hover border-table">
					<thead>
						<th>Serial No.</th>
						<th>Name</th>
						<th>Created At</th>
						<th>Action</th>
					</thead>
					<tbody>
						{% if all_parceltypes %}
							{% for parceltype in all_parceltypes %}
								<tr>
									<td>{{parceltype.serialno}}</td>
									<td>{{parceltype.parceltype}}</td>
									<td>{{parceltype.created_at}}</td>
									<td>

				            <i data-toggle="tooltip" title="View" class="mdi mdi-eye view_parceltype"></i>
				            <i data-toggle="tooltip" title="Edit" class="mdi mdi-pencil edit_parceltype"></i>
                            <i data-toggle="tooltip" title="Delete" class="mdi mdi-delete delete_parceltype"></i>
                            <span class="parceltype_id" hidden>{{parceltype.id}}</span>

                         


										<!-- <span class="fas fa-edit view_parceltype">View</span>
										<span class="fas fa-edit edit_parceltype">Edit</span>
										<span class="fas fa-trash-alt delete_parceltype">Delete</span>
										<span class="parceltype_id" hidden>{{parceltype.id}}</span> -->



									</td>
								</tr>
							{% endfor %}
						{% endif %}
					</tbody>
				</table>
				{% if all_parceltypes.has_other_pages %}
				  <ul class="pagination">
				    {% if all_parceltypes.has_previous %}
				      <li><a href="?page={{ all_parceltypes.previous_page_number }}">&laquo;</a></li>
				    {% else %}
				      <li class="disabled"><span>&laquo;</span></li>
				    {% endif %}
				    {% for i in all_parceltypes.paginator.page_range %}
				      {% if all_parceltypes.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_parceltypes.has_next %}
				      <li><a href="?page={{ all_parceltypes.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="AddParcelTypeModal" 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 Parcel 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>Parcel Type</label>
										<input type="text" id="add_parceltype" 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_parceltype_txt"></p>
									</div>
									<div class="w-100 d-flex justify-content-center px-3">
										<button id="add-parceltype-btn" class="btn-c1">Add</button>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div id="EditParcelTypeModal" 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 parcel 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>Parcel Type</label>
											<input type="text" id="edit_parceltype" 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_parceltype_txt"></p>
										</div>
										<div class="w-100 d-flex justify-content-center px-3">
											<input type="hidden" id="edit_parceltype_id">
											<button id="update-parceltype-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="ViewParcelTypeModal" 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 parcel 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>Parcel Type</label>
											<input type="text" id="view_parceltype" class="form-control input_user" readonly>
											<p class="text-danger" id="view_parceltype_name_txt"></p>
										</div>
										<div class="w-100 d-flex justify-content-center px-3">
											<button id="close-parceltype-view-btn" data-dismiss="modal" 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 text-center">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_showallparceltypes.js' %}" ></script>
{% endblock %}