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

{% block title %}
	<title>All admins</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">
      {% include 'admin_header.html' %}
      <div class="container-fluid page-body-wrapper">
        {% include 'admin_sidebar.html' %}



        <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-account-multiple menu-icon"></i>
                </span> All admins </h3>
            </div>
        </div>
        <div class="col-md-3 text-right">
               <button id="open-add-admin-modal" class="btn-c"><i class="mdi mdi-plus menu-icon"></i> Add Admin</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>Email Address</th>
						<th>Phone Number</th>
						<th>Created At</th>
						<th>Account Approved</th>
						<th>Action</th>
					</thead>
					<tbody>
						{% if all_admins %}
							{% for admin in all_admins %}
								<tr>
									<td>{{admin.serialno}}</td>
									<td>{{admin.name}}</td>
									<td>{{admin.email}}</td>
									<td>{{admin.countrycode}} {{admin.phone}}</td>
									<td>{{admin.created_at}}</td>
									<td class="acc-approved">

										{% ifequal admin.accountapproved 'Yes' %}
												<i class="mdi mdi-check-circle" data-toggle="tooltip" title="Approve" style="color:green;"></i>
											{% else %}
												<span class="approve_admin"><i class="mdi mdi-checkbox-blank-circle-outline"></i></span>
											{% endifequal %}



									</td>
									<td>
										<i data-toggle="tooltip" title="View" class="mdi mdi-eye view_admin"></i>
										{% ifequal request.session.userrole 'superadmin' %}
											<i data-toggle="tooltip" title="Edit" class="mdi mdi-pencil edit_admin"></i>
											<i data-toggle="tooltip" title="Delete"  class="mdi mdi-delete delete_admin"></i>
											<i data-toggle="tooltip" title="Assign Task" class="mdi mdi-checkbox-blank-circle-outline assign_task"></i>
										{% endifequal %}
										<span class="admin_id" hidden>{{admin.id}}</span>
										<span class="admin_email" hidden>{{admin.email}}</span>
									</td>
								</tr>
							{% endfor %}
						{% endif %}
					</tbody>
				</table>
				{% if all_admins.has_other_pages %}
				  <ul class="pagination">
				    {% if all_admins.has_previous %}
				      <li><a href="?page={{ all_admins.previous_page_number }}">&laquo;</a></li>
				    {% else %}
				      <li class="disabled"><span>&laquo;</span></li>
				    {% endif %}
				    {% for i in all_admins.paginator.page_range %}
				      {% if all_admins.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_admins.has_next %}
				      <li><a href="?page={{ all_admins.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="AddAdminModal" 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 Admin</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 profile-pic">
					                  <input type="file" name='add_im' id='add_im' onchange="previewFile()" accept="image/*" hidden>
					                 <!--  <label for="add_im">
					                    <span style="width:100px;"> Image : </span> -->
					                    <!-- <img id="add_show_image"  src="{% static 'images/camera.png'%}"  alt="your image" />    -->
					                   <!--  <img  src="{% static 'images/camera.png'%}" style="height: 75px;width: 75px;" 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>Name</label>
										<input type="text" id="add_admin_name" class="form-control input_user" value="" >
										<p class="text-danger" id="add_admin_name_txt"></p>
									</div>
									<div class="form-group col-md-6">
										<label>Email</label>
										<input type="text" id="add_admin_email" class="form-control input_user" value="" >
										<p class="text-danger" id="add_admin_email_txt"></p>
									</div>
									<div class="form-group col-md-6">
										<label>Password</label>
										<input type="password" id="add_admin_password" class="form-control input_user" value="" >
										<p class="text-danger" id="add_admin_password_txt"></p>
									</div>
									<div class="form-group col-md-6">
										<label>Phone Number</label>
										<input type="text" id="add_admin_phone" class="form-control input_user" value="" >
										<p class="text-danger" id="add_admin_phone_txt"></p>
									</div>
									<div class="w-100 d-flex justify-content-center px-3">
										<input type="hidden" id="add-image-srcdata" />
										<button id="add-admin-btn" class="btn-c1">Add</button>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div id="EditAdminModal" 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 Admin</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/*" hidden />  -->
						                     <!-- <label for="edit_im">Image : -->
						                    <!--  <img id="edit-show-image"  alt="your image" style="height: 75px;width: 75px;"/>
						                     </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-12">
											<label>Name</label>
											<input type="text" id="edit_admin_name" class="form-control input_user" value="" >
											<p class="text-danger" id="edit_admin_name_txt"></p>
										</div>
										<div class="form-group col-md-6">
											<label>Email</label>
											<input type="text" id="edit_admin_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==50) return false;" readonly>
											<p class="text-danger" id="edit_admin_email_txt"></p>
										</div>
										<div class="form-group col-md-6">
											<label>Phone Number</label>
											<input type="text" id="edit_admin_phone" class="form-control input_user" value=""  >
											<p class="text-danger" id="edit_admin_phone_txt"></p>
										</div>
										<div class="w-100 d-flex justify-content-center px-3">
											<input type="hidden" id="edit_admin_id">
											<input type="hidden" id="edit-image-srcdata" />
											<button id="update-admin-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="ViewAdminModal" 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 Admin</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" style="height: 75px;width: 75px;" alt="your image" />
						                    </label>
						                </div>

						                <div class="form-group col-md-6 profile-tick profile-tick-sec-2">

						                	<span class="account-approved-text" style="">Account Approved</span>
						                   
											<span> <i class="mdi mdi-check-circle" data-toggle="tooltip" title="Approve" style=""></i></span>




										</div>
										<div class="form-group col-md-12">
											<label>Name</label>
											<input type="text" id="view_admin_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;" readonly>
											<p class="text-danger" id="view_admin_name_txt"></p>
										</div>
										<div class="form-group col-md-6">
											<label>Email</label>
											<input type="text" id="view_admin_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==50) return false;" readonly>
											<p class="text-danger" id="view_admin_email_txt"></p>
										</div>
										<div class="form-group col-md-6">
											<label>Phone Number</label>
											<input type="text" id="view_admin_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;" readonly>
										</div>
										<div class="w-100 d-flex justify-content-center px-3">
											<button id="close-admin-view-btn" class="btn-c1" data-dismiss="modal">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" 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 id="ApproveModal" class="modal fade modal-small" role="dialog" >
	  <div class="modal-dialog">
	    <!-- Modal content-->
	    <div class="modal-content">
	      <div class="modal-header border-0">
	        <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 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" >Yes</button>
	          <button type="button" class="btn btn-default py-2" 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 id="AssignTask" class="modal fade popup-all assign-t" role="dialog">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header border-0">
					<h3 class="modal-title">Assign Task</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>Email</label>
										<input type="text" id="assigntask_email" class="form-control input_user" readonly >
										<p class="text-danger" id="assigntask_email_txt"></p>
									</div>
									<div class="form-group col-md-12">
										<label>Task Decription</label>
										<textarea id="assigntask_description" class="form-control input_user"></textarea>
										<p class="text-danger" id="assigntask_description_txt"></p>
									</div>
									<div class="w-100 d-flex justify-content-center px-3">
										<input type="hidden" id="assigntask_adminid" />
										<button id="assign-task-btn" class="btn-c1">Add</button>
									</div>
								</div>
							</div>
						</div>
					</div>
				</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="{% static 'js/admin_showalladmins.js' %}" ></script>
	<!-- <script src="https://unpkg.com/@popperjs/core@2" ></script> -->
	<script>
		function previewFile() {
		  var preview = document.querySelector('#show-im');
		  var file    = document.querySelector('input[type=file]').files[0];
		  var reader  = new FileReader();
		  reader.addEventListener("load", function () {
		    $('#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 () {
		  $('#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>
{% endblock %}