{% extends 'admin_base_layout.html' %}
{% load static %}
{% block content %}
<title>Seer | User Management</title>
<div class="content-wrapper">
    <div class="row">
        <div class="col-12">
            <h2 class="topHead">User Management</h2>
        </div>
        <div class="col-12">
        <form action="user-list" method="get">
            {% csrf_token %}
            <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='/user-list'" >Reset</button>
                  </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">
                <!-- <div class="top-card d-flex justify-content-between">
                    <p class="f-18">New Users</p>
                    <p class="f-15 bold dark">View All</p>
                </div> -->
                <div class="table-users">
                    <div class="table-responsive w-100">  
                    {% if user_data %}        
                      <table class="table w-100">
                        <thead>
                          <tr>
                            <th>Users Name</th>
                            <th>Email</th>
                            <th>Date</th>
                            <th>Phone Number</th>
                            <th>Status</th>
                            <th>Action</th>
                          </tr>
                        </thead>
                        <tbody>
                        {%for user in user_data%}
                        <tr>
                            <td>
                                <div class="table-users">
                                    <img src="{% if user.primary_image %}{{base_url}}{{ user.primary_image }}{% else %}{% static 'admin/images/user-default.png' %}{% endif %}">
                                    <h6 class="f-14">{% if user.first_name %}{{user.first_name}}{% else %} N/A {% endif %}</h6>
                                </div>
                            </td>
                            <td>{% if user.email %}{{user.email}} {% else %} N/A {% endif %}</td>
                            <td>{{user.created_at|date:"d M  Y"}}
                             </td>
                            <td>{% if user.phone_number %}{{user.phone_number}} {% else %} N/A {% endif %}</td>
                            <td>
                                <span class="active">
                                   <div class="form-check form-switch">
                                    <input type="checkbox" name="status" {% if user.status == True %} checked {% else %} {% endif %} onchange="changeUserStatus(this,'{{user.id}}')">
                                  </div>
                                  </span>
                            </td>
                            <td>
                              <div class="action-btns">
                                <a href="view-user-detail/{{user.id}}" class="block-icon" data-toggle="tooltip" data-placement="top" title="View"><img src="{% static 'admin/images/eye.png' %}"></a>
                                <a href="edit-user/{{user.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 user_data %}
      <div class="demo-inline-spacing pagi">
        <div class="pagination justify-content-center">
        <nav aria-label="Page navigation">
          <ul class="pagination">
          {% if user_data.has_previous %}
          <li><a href="?page={{ user_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 user_data.number > 3 %}
          <li><a href="?page=1">1</a></li>
          <li class="disabled"><span>...</span></li>
          {% endif %}

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

          {% if user_data.has_next %}
          <li><a class="page-link" href="?page={{ user_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>
{%endblock%}


{%block js%}
<script>

  function changeUserStatus(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-user-status",
      type: "POST",
      data: {
        status: status,
        csrfmiddlewaretoken: csrf_token,
        main_id: main_id
      },
      success: function (res) {
        window.location.href = res;
      }
    });
  }
</script>

{% endblock %}