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

{% block title %}
	<title>All Time Slots</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 Time Slots </h3>
            </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="admins-table" class="table table-hover border-table  all-admins-c">
					<thead>
						<th>Serial No.</th>
						<th>Opening Time</th>
						<th>Closing Time</th>
						<th>Status</th>
						<th>Action</th>
					</thead>
					<tbody>
						{% if alltimeslots %}
							{% for slot in alltimeslots %}
								<tr>
									<td>{{slot.serialno}}</td>
									<td>{{slot.openinghour}}</td>
									<td>{{slot.closinghour}}</td>
									<td>
										<span class="current-status">{% if slot.status %}Enabled{% else %}Disabled{% endif %}</span>
									</td>

                                     <td class="action-btns">
                                     	{% if slot.status %}
                                     		<button type="button" class="btn btn-default delete-record-yes-btn py-2 btn-c1 disable-btn">Disable</button>
                                     	{% else %}
                                     		<button type="button" class="btn btn-default delete-record-yes-btn py-2 btn-c1 enable-btn">Enable</button>
                                     	{% endif %}
                                     	<span class="slot_id" hidden>{{slot.id}}</span>
                                     </td>

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



{% 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://unpkg.com/@popperjs/core@2" ></script> -->
	<script>
		$(document).on('click','.disable-btn',function(event){
			// this = $(this)
			var slot_id = $(this).closest('td').find('.slot_id').text()
			console.log(slot_id)
			console.log($(this).html())
			// return false;
  			var new_status = 'disable'
			var token = $('input[name="csrfmiddlewaretoken"]').val()
			var current_btn = $(this);
			  $.ajax({
			      type: 'POST',
			      url: '/admin/changetimeslotstatus/',
			      data: { 'slot_id' : slot_id, 'new_status' : new_status, 'csrfmiddlewaretoken' : token},
			      success: function(response){
			        console.log(response);
			        if(response.status_code == 200)
			        {	
			        	// debugger;
			        	current_btn.text('Enable');
				        current_btn.addClass('enable-btn');
				        current_btn.removeClass('disable-btn');
				        current_btn.closest('td').prev().text('Disabled')
			  		}
			  	 }
			  	});

		});
		$(document).on('click','.enable-btn',function(event){
			var slot_id = $(this).closest('td').find('.slot_id').text()
  			var new_status = 'enable'
			var token = $('input[name="csrfmiddlewaretoken"]').val()
			var current_btn = $(this);
			  $.ajax({
			      type: 'POST',
			      url: '/admin/changetimeslotstatus/',
			      data: { 'slot_id' : slot_id, 'new_status' : new_status, 'csrfmiddlewaretoken' : token},
			      success: function(response){
			        console.log(response);
			        if(response.status_code == 200)
			        {	
			        	// debugger;
			        	current_btn.text('Disable');
			        	current_btn.addClass('disable-btn');
				        current_btn.removeClass('enable-btn');
				        current_btn.closest('td').prev().text('Enabled')
			  		}
			  		}
			  	});

		});
	</script>
	<script>
		// $(document).ready(function(){
		//   $('[data-toggle="tooltip"]').tooltip(); 
		// });
	</script>
{% endblock %}