{% extends 'admin_base_layout.html' %}
{% load static %}
{% block content %}
{%csrf_token%}
<!-- html code -->
<title>Seer | Fortune Teller Listing</title>
	    <div class="main-content pt-0">
	    	<div class="content-wrapper">
	    		<div class="row">
	    			<div class="col-12">
	    				<h2 class="topHead">Fortune Teller Listing</h2>
	    			</div>
	    			<form action="fortuneteller-list" method="get">
            <div class="d-flex align-items-center">
                <div class="search home position-relative">
                      <input type="text" name="search" id="search" value="{% if search_post %}{{search_post}}{% endif %}" placeholder="Type in to search ..">
                      <div class="search-icons">
                          <button type="button" class="search-icn-btn">
                              <i class='bx bx-search'></i>
                          </button>
                      </div>
                  </div>
                  <div class="from-to d-flex px-lg-4 px-2">
                      <div class="from mx-2">
                          <input type="date" id="start_from" name="start_from" value="{{start_from}}" placeholder="From">
                      </div>
                      <div class="to mx-2">
                          <input type="date" id="start_to" name="start_to" value="{{start_to}}" placeholder="To">
                      </div>
                  </div>
                  <div class="search-btn">
                    <button type="submit" class="search-btn">Search</button>
                    <button type="button" class="search-btn" onclick="location.href='/fortuneteller-list'" >Reset</button>
                  </div>
            </div>
            </form>
	    		</div>
	    		<div class="row new-user-table bookings mt-3">
	    			<div class="col-12 col-md-12">
	    				<div class="card dashboard-card">
	    					<!-- <div class="top-card">
	    						<p class="f-18">New Users</p>	    						
	    					</div> -->
	    					<div class="table-users">
	    						<div class="table-responsive w-100">
								{% if fortune_data %}          
					              <table class="table w-100">
					                <thead>
					                  <tr>
					                    <th>Fortune Teller Name</th>
					                    <th>Email</th>
					                    <th>Date</th>
					                    <th>Phone Number</th>
					                    <th>Status</th>
					                    <th>Action</th>
					                  </tr>
					                </thead>
					                <tbody>
										{%for fortune in fortune_data%}
										<tr>
											<td>
												<div class="table-users">
													<img src="{% if fortune.image %}{{base_url}}{{fortune.image}}{% else %}{% static 'admin/images/user-default.png' %}{% endif %}">
													<h6 class="f-14">{% if fortune.first_name %}{{fortune.first_name}} {{ fortune.last_name}}{% else %} N/A {% endif %}</h6>
												</div>
											</td>
											<td>{% if fortune.email %}{{fortune.email}} {% else %} N/A {% endif %}</td>
											<td>{{fortune.created_at|date:"d M  Y"}}
											 </td>
											<td>{% if fortune.phone_number %}{{fortune.phone_number}} {% else %} N/A {% endif %}</td>
											<td>
												<span class="active">
												   <div class="form-check form-switch">
													<input type="checkbox" name="status" {% if fortune.status == True %} checked {% else %} {% endif %} onchange="changeFortuneTellerStatus(this,'{{fortune.id}}')">
												  </div>
												  </span>
											</td>
											<td>
											  <div class="action-btns">
												<a href="view-fortuneteller-detail/{{fortune.id}}" class="block-icon" data-toggle="tooltip" data-placement="top" title="View"><img src="{% static 'admin/images/eye.png' %}"></a>
												<a href="edit-fortuneteller/{{fortune.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>No data found</p>
								  {% endif %}
					            </div>
	    					</div>
	    				</div>
	    			</div>
	    		</div>
				<div class="row ">
					{% if fortune_data %}
					<div class="demo-inline-spacing pagi">
					  <div class="pagination justify-content-center">
					  <nav aria-label="Page navigation">
						<ul class="pagination">
						{% if fortune_data.has_previous %}
						<li><a href="?page={{ fortune_data.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 fortune_data.number > 3 %}
						<li><a href="?page=1">1</a></li>
						<li class="disabled"><span>...</span></li>
						{% endif %}

						{% for i in fortune_data.paginator.page_range %}
						{% if i >= fortune_data.number|add:-2 and i <= fortune_data.number|add:10 %}
						{% if fortune_data.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 fortune_data.paginator.num_pages > fortune_data.number|add:2 %}
						<li class="disabled"><span>...</span></li>
						<li><a href="?page={{ fortune_data.paginator.num_pages }}">{{ fortune_data.paginator.num_pages }}</a></li>
						{% endif %}

						{% if fortune_data.has_next %}
						<li><a class="page-link" href="?page={{ fortune_data.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%}
				  </div>
	    	</div>
	    </div>

<!-- end of html code -->
{%endblock%}

{%block js%}
<!-- js code -->
<script>

  function changeFortuneTellerStatus(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-fortuneteller-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 %}