{% extends 'admin_base_layout.html' %}
{% load static %}
{% block content %}

<!-- Begin Page Content -->
<title>Music | Artist List</title>
<style>
  .table-customer input#search {
    border: 1px solid #ddd;
    padding: 10px 10px 10px 40px;
  }
</style>
<div class="content-wrapper">
  <div class="inner-content">
    <!-- Page Heading -->
    <div class="top-bar mb-4">
      <h2 class="f-20 bold"> Artist List</h2>
    </div>
    <div class="manage-user-data table-customer mt-4">
      <div class="card px-0">
        <div class="card-header bg-white  d-flex justify-content-end align-items-center">
          <form action="/get-artist-listing" method="get">
            <div class="left-content d-flex align-items-center gap-2">
              <div class="search home position-relative">
                <input type="text" name="search" id="search" value="{% if search_post %}{{search_post}}{% endif %}"
                  placeholder="Search ..">
                <div class="search-icons">
                  <button type="button" class="search-icn-btn">
                    <i class="bx bx-search"></i>
                  </button>
                </div>
              </div>
              <button type="submit" class="btn btn-primary">Search</button>
              <button type="button" class="btn btn-secondary" onclick="location.href = '/get-artist-listing'">Reset</button>
            </div>
          </form>
          {% comment %} <a href="/add-patient" class="light-btn blue add-btn bold f-20 text-decoration-none">Add User</a> {% endcomment %}
        </div>
        <div class="manage-user-table ">
          <div class="table-responsive">
            {% if artist_obj %}
            <table class="table table-bordered " id="dataTable" width="100%" cellspacing="0">
              <thead>
                <tr>
                  <th>User ID</th>
                  <th>Stage Name</th>
                  {% comment %} <th>Phone Number</th> {% endcomment %}
                  <th>Profile Song</th>
                  <th>Arts</th>
                  <th>Bank Details</th>
                </tr>
              </thead>
              <tbody>
                {% for art in artist_obj %}
                <tr>
                  <td>{{art.user.id}}</td>
                  <td>
                    <div class="user-table-icon">
                      {% comment %} <img
                        src="{% if art.profile_picture %}{{ art.profile_picture }}{% else %}/static/admin/images/user-default.png{% endif %}"
                        alt="user"> {% endcomment %}
                      <span>{{ art.stage_name }}</span>
                    </div>
                  </td>
                  {% comment %} <td><span class="blue">{% if pat.phone_number %}{{ pat.phone_number }}{% else %}N/A{% endif %}</span></td> {% endcomment %}
                  <td>{{ art.profile_song }}</td>
                  <td>{{ art.arts }}</td>

                  <td>
                    <div class="action-btns">
                      <a href="/get-bank-details/{{ art.user.id }}" class="view-btn" data-toggle="tooltip"
                        data-placement="top" title="View"><img src="/static/admin/images/view-1.png"></a>
                      {% comment %} <a href="/user-id-verification/{{ pat.id}}" class="view-btn doc"><i class="far fa-file-alt"  data-toggle="tooltip" data-placement="top" title="Documents"></i></a> {% endcomment %}

                    </div>
                  </td>
                </tr>
                {% endfor %}

              </tbody>
            </table>
            {% else %}
            <p style="text-align: center;">No record found</p>
            {% endif %}

          </div>
        </div>
      </div>
    </div>
    {% if artist_obj %}
    <div class="demo-inline-spacing">
      <div class="pagination justify-content-center">
        <ul class="pagination">
          {% if artist_obj.has_previous %}
          <li><a href="?page={{ artist_obj.previous_page_number }}">&laquo;</a></li>
          {% else %}
          <li class="disabled"><span>&laquo;</span></li>
          {% endif %}
          {% for i in artist_obj.paginator.page_range %}
          {% if artist_obj.number == i %}
          <li class="active"><span>{{ i }} <span class="sr-only">(current)</span></span></li>
          {% else %}
          <li><a class='page-link ' data-href="?page={{ i }}" href="?page={{ i }}">{{ i }}</a></li>
          {% endif %}
          {% endfor %}
          {% if artist_obj.has_next %}
          <li><a href="?page={{ artist_obj.next_page_number }}">&raquo;</a></li>
          {% else %}
          <li class="disabledUpasana Bali mam, any update from client on this?
                    "><span>&raquo;</span></li>
          {% endif %}
        </ul>
      </div>
    </div>
    {% endif %}
    <!--end of Pagination-->
  </div>
</div>
</div>

<!-- Delete Patient Modal -->
<div class="modal fade small-modal" id="delPatientModal" tabindex="-1" aria-labelledby="delPatientModalLabel"
  aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header border-0">
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body pt-0">
        <div class="delete-brand-modal text-center pt-3">
          <img src="/static/admin/images/deleteicon.png" class="bin-icon">
          <h3 class="f-20 bold">Are you sure you want to delete this user? </h3>
        </div>
      </div>
      <div class="modal-footer justify-content-center border-0">
        <button type="button" class="dark-btn" id="delete-customer">Delete</button>
        <input type="hidden" id="model_delete_id">

        <button type="button" class="border-btn" data-bs-dismiss="modal">Cancel</button>
      </div>
    </div>
  </div>
</div>
<!-- /.container-fluid -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
  integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"
  integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  function theFunction(e) {
    $('#model_delete_id').val(e)
    $('#delPatientModal').modal('show');
    return false;
  }

  $(document).on('click', '#delete-customer', function (e) {
    del_id = $('#model_delete_id').val()
    window.location.href = '/delete-user/' + del_id;
  });
</script>

{% endblock %}