{% extends 'admin_base_layout.html' %}
{% load static %}
{% block content %}
{%csrf_token%}
<!-- html code -->
<title>Seer | Hobbies List</title>
	    <div class="main-content pt-0">
	    	<div class="content-wrapper">
	    		<div class="row">
	    			<div class="col-12">
	    				<h2 class="topHead">Hobbies List</h2>
	    				<p>Welcome to Lorem Ipsum Admin Dashboard</p>
	    			</div>
	    			<div class="col-12">
						<form action="hobbies-list" method="get">

	    				<div class="d-flex align-items-center justify-content-between">
	    					<div class="d-flex align-items-center">
	    						<div class="search home position-relative">
			      					<input type="text" placeholder="Type in to search .." name="search" 
										value="{% if search_post %}{{search_post}}{% endif %}">
					      			<div class="search-icons">
					      				<button type="submit" class="search-icn-btn">
					      					<i class='bx bx-search'></i>
						      			</button>
						      		</div>
				      			</div>
						      	<div class="search-btn px-4">
									<button type="submit" class="search-btn">Search</button>
									<button type="button" class="search-btn" onclick="location.href='/hobbies-list'" >Reset</button>
						      	</div>
	    					</div>
	    					<div>
	    						<a href="add-hobbies" class="add-btn">Add Hobby</a>
	    					</div>
	    				</div>
					</form>
	    			</div>
	    		</div>
	    		<div class="row new-user-table bookings mt-3">
	    			<div class="col-12 col-md-12">
	    				<div class="card dashboard-card px-0">
	    					<div class="top-card">
	    						<p class="f-18">Hobbies</p>	    						
	    					</div>
	    					<div class="table-users">
	    						<div class="table-responsive w-100">   
								{% if hobbies_obj %}
					              <table class="table w-100">
					                <thead>
					                  <tr>
					                    <th>Sr.No</th>
					                    <th>Hobby Name</th>
					                    <th>Status</th>
					                    <th>Action</th>
					                  </tr>
					                </thead>
					                <tbody>
									{% for hobby in hobbies_obj %}
					                <tr>
					                    <td>
					                    	<div class="table-users">					                    		
					                    		<p class="f-14">{{forloop.counter}}</p>
					                    	</div>
					                    </td>
					                    <td>{{hobby.hobby}}</td>					                    
					                    <td>
					                    	<span class="active">
						                       <div class="form-check form-switch">
						                        <input type="checkbox" name="status" {% if hobby.status == True %} checked {% else %} {% endif %} onchange="changeHoobiesStatus(this,'{{hobby.id}}')">
						                      </div>
					                      	</span>
					                    </td>
					                    <td>
					                      <div class="action-btns">					                        
					                        <a href="edit-hobbies/{{hobby.id}}" class="block-icon" data-toggle="tooltip" data-placement="top" title="Edit"><img src="/static/admin/images/edit.png"></a>
					                      </div>
					                    </td>
					                </tr>
									{% endfor %}					                  
					                </tbody>
					              </table> 
								  {% else %}
								<p class="no-record-msg px-4" style="color: red;">No record found</p>
								{% endif %}       
					            </div>
	    					</div>
	    				</div>
	    			</div>
	    		</div>
	    	</div>
	    </div>	
		{% if hobbies_obj %}
		<div class="demo-inline-spacing pagi">
		  <div class="pagination justify-content-center">
			<nav aria-label="Page navigation">
			  <ul class="pagination">
				{% if hobbies_obj.has_previous %}
				<li><a href="?page={{ hobbies_obj.previous_page_number }}">&laquo;</a></li>
				{% else %}
				<li class="disabled"><a class="page-link" href="#"><i class="bx bx-chevron-left"></i></a></li>
				{% endif %}


				{% if hobbies_obj.number > 3 %}
				<li><a href="?page=1">1</a></li>
				<li class="disabled"><span>...</span></li>
				{% endif %}

				{% for i in hobbies_obj.paginator.page_range %}
				{% if i >= hobbies_obj.number|add:-2 and i <= hobbies_obj.number|add:10 %}
				{% if hobbies_obj.number == i %}
				<li><span><a href="#" class="page-link active">{{ i }} </a></span></li>
				{% else %}
				<li><a class="page-link" href="?page={{ i }}">{{ i }}</a></li>
				{% endif %}
				{% endif %}
				{% endfor %}

				{% if hobbies_obj.paginator.num_pages > hobbies_obj.number|add:2 %}
				<li class="disabled"><span>...</span></li>
				<li><a href="?page={{ hobbies_obj.paginator.num_pages }}">{{ hobbies_obj.paginator.num_pages }}</a></li>
				{% endif %}

				{% if hobbies_obj.has_next %}
				<li><a class="page-link" href="?page={{ hobbies_obj.next_page_number }}">&raquo;</a></li>
				{% else %}
				<li class="disabled"><a href="#" class="page-link"><i class="bx bx-chevron-right"></i></a></li>
				{% endif %}
			  </ul>
			</nav>
		  </div>
		</div>
		{%endif%}
<!-- end of html code -->
{%endblock%}

{%block js%}
<!-- js code -->
<script>
  function changeHoobiesStatus(elem, main_id) {
    var csrf_token = $('input[name="csrfmiddlewaretoken"]').val()
    var status;
    if (elem.checked) {
      $(elem).prop("checked");
    }
    $('[name="status"]').val(elem.checked);

    if (elem.value == "true") {
      status = 1;
    } else if (elem.value == "false") {
      status = 0;
    }
    $.ajax({
      url: "/change-hobbies-status",
      type: "POST",
      data: {
        status: status,
        csrfmiddlewaretoken: csrf_token,
        main_id: main_id
      },
      success: function (res) {
        window.location.href = res;
      }
    });
  }
</script>

<!-- end of js -->
{% endblock %}