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

<title>Kila Kolis | Identity Proof</title>

<div class="content-wrapper">
  <div class="inner-content">
    <div class="top-bar mb-4">
      <h2 class="f-20 bold">Identity Proof</h2>
    </div>
    <div class="manage-user-data table-customer mt-4">
      <div class="card px-0">
        <div class="card-header bg-white">
          <form action="/identity-proof" method="get">
            <div class="left-content d-flex justify-content-end 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="dark-btn">Submit</button>
              <button type="button" class="dark-btn" onclick="location.href = '/user-listing'">Reset</button>
            </div>
          </form>
        </div>

        <div class="manage-user-table">
          <div class="table-responsive">
            <table class="table table-bordered" width="100%">
              <thead>
                <tr>
                  <th>ID</th>
                  <th>User Name</th>
                  <th>Uploaded Date</th>
                  <th>Document</th>
                  <th>Status</th>
                </tr>
              </thead>
              <tbody>
                {% for doctor in doc_obj %}
                  <tr>
                    <td>{{ doctor.id }}</td>
                    <td>
                      <div class="user-table-icon">
                        <img src="{% if doctor.user.image %}{{ doctor.user.image }}{% else %}/static/admin/images/user-default.png{% endif %}" alt="user">
                        <span>{{ doctor.user.full_name }}</span>
                      </div>
                    </td>
                    <td>
                    {{doctor.uploaded_at}}
                    </td>
                    <td>
                      {% if doctor.document %}
                        {% with doctor.document.url|lower as file_url %}
                          <a href="{{ doctor.document }}" target="_blank">
                            {% if ".png" in file_url or ".jpg" in file_url or ".jpeg" in file_url %}
                              <img src="{{ doctor.document }}" style="height: 60px; border-radius: 4px; width: 75px; object-fit: cover;">
                            {% elif ".pdf" in file_url %}
                              <img src="{% static 'admin/images/user-default.png' %}" style="height: 40px;">
                            {% elif ".csv" in file_url %}
                              <img src="/static/admin/images/csv-icon-1791x2048-ot22nr8i.png" style="height: 40px;">
                            {% elif ".doc" in file_url or ".docx" in file_url %}
                              <img src="/static/admin/images/doc-document-file-11.jpg" style="height: 40px;">
                            {% else %}
                              <img src="/static/admin/images/free-file-icon-1453-thumb.png" style="height: 40px;">
                            {% endif %}
                          </a>
                        {% endwith %}
                      {% else %}
                        No Document
                      {% endif %}
                    </td>
                    <td>
                      {% if doctor.user.document_status == "Accepted" %}
                        <span class="text-success approve ">Approved</span>
                      {% elif doctor.user.document_status == "Rejected" %}
                      <div class="d-flex align-items-center">
                        <span class="text-danger disapprove">Disapproved</span><br>
                        <!-- <small class="text-muted"> -->
                          <img src="/static/admin/images/reason.png" alt="Rejection Reason" style="height: 27px; cursor: pointer;" data-bs-toggle="tooltip" data-bs-placement="right" class="px-2" title="{{ doctor.rejection_reason }}">
                             <!-- {{ doctor.rejection_reason }} -->
                            <!-- </small> -->
                      </div>
                      {% else %}
                        <div class="d-flex gap-2">
                          <button type="button" class="btn btn-success btn-sm approve-btn" data-id="{{ doctor.id }}"><i class="fa-solid fa-check pe-2"></i> Approve</button>
                          <button type="button" class="btn btn-danger btn-sm disapprove-btn" data-id="{{ doctor.id }}"><i class="fa-solid fa-xmark pe-2"></i>Disapprove</button>
                        </div>
                      {% endif %}
                    </td>
                  </tr>
                {% empty %}
                  <tr>
                    <td colspan="4" class="text-center">No users found.</td>
                  </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>

    {% if doc_obj %}
    <div class="pagination justify-content-center mt-3">
      <ul class="pagination">
        {% if doc_obj.has_previous %}
          <li><a href="?page={{ doc_obj.previous_page_number }}">&laquo;</a></li>
        {% else %}
          <li class="disabled"><span>&laquo;</span></li>
        {% endif %}
        {% for i in doc_obj.paginator.page_range %}
          {% if doc_obj.number == i %}
            <li class="active"><span>{{ i }}</span></li>
          {% else %}
            <li><a href="?page={{ i }}">{{ i }}</a></li>
          {% endif %}
        {% endfor %}
        {% if doc_obj.has_next %}
          <li><a href="?page={{ doc_obj.next_page_number }}">&raquo;</a></li>
        {% else %}
          <li class="disabled"><span>&raquo;</span></li>
        {% endif %}
      </ul>
    </div>
    {% endif %}
  </div>
</div>

<!-- Reject Reason Modal -->
<div class="modal fade" id="rejectReasonModal" tabindex="-1" aria-labelledby="rejectReasonModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <form method="post" action="{% url 'identity-proof' %}" class="w-100">
      {% csrf_token %}
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Rejection Reason</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <input type="hidden" name="rejected_doc_id" id="rejected_doc_id">
          <div class="mb-3">
            <label for="rejection_reason" class="form-label">Reason</label>
            <textarea class="form-control" name="rejection_reason" id="rejection_reason" required></textarea>
          </div>
        </div>
        <div class="modal-footer">
          <button type="submit" class="dark-btn">Submit</button>
          <button type="button" class="border-btn" data-bs-dismiss="modal">Cancel</button>
        </div>
      </div>
    </form>
  </div>
</div>

<!-- Scripts -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function () {
  $(".approve-btn").click(function () {
    const id = $(this).data("id");
    $.post("{% url 'identity-proof' %}", {
      'csrfmiddlewaretoken': '{{ csrf_token }}',
      ['status_' + id]: 'Accepted'
    }, function () {
      location.reload();
    });
  });

  $(".disapprove-btn").click(function () {
    const id = $(this).data("id");
    $("#rejected_doc_id").val(id);
    $("#rejectReasonModal").modal("show");
  });
});
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
tooltipTriggerList.forEach(function (tooltipTriggerEl) {
  new bootstrap.Tooltip(tooltipTriggerEl);
});

</script>

{% endblock %}