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

<title>Kila Kolis | Payout management</title>

<div class="content-wrapper">
  <div class="inner-content">
    <div class="top-bar mb-4">
      <h2 class="f-20 bold">Payout management</h2>
    </div>
    <div class="manage-user-data table-customer mt-4">
      <div class="card px-0">
        <div class="card-header bg-white">
          <form action="/payout-management" 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>Requested Money</th>
                  <th>Created At</th>
                  <th>Updated At</th>
                  <!-- <th>End Date</th> -->
                  <th>Available Balance</th>
                  <th>Total Balance</th>
                  <th>Rejection Reason</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.requested_money }}</td>
                    <td class="white-space">{{ doctor.created_at|date:"Y-m-d" }}</td>
                    <td class="white-space">{{ doctor.updated_at|date:"Y-m-d" }}</td>
                    <!-- <td>{{ doctor.end_date|date:"Y-m-d" }}</td> -->
                    <td>{{ doctor.available_balance }}</td>
                    <td>{{ doctor.total_balance }}</td>
                    <td>
                      {% if doctor.rejection_reason %}
                        <span data-bs-toggle="tooltip" title="{{ doctor.rejection_reason }}">
                          {{ doctor.rejection_reason|truncatechars:20 }}
                        </span>
                      {% else %}
                        -
                      {% endif %}
                    </td>
                    <td class="d-flex align-items-end justify-content-start white-space gap-2">
                      {% if doctor.transaction_status == "Accepted" %}
                        <span class="text-success approved-btn pointer" title="approved"><i class="fa-solid fa-check-double"></i></span>
                        {% with latest_doc=doctor.user.userdocument_set.last %}
                          {% if latest_doc %}
                            <a href="{{ latest_doc.document.url }}" target="_blank" class="view-upload-btn"><i class="fa-solid fa-eye"></i></a>
                          {% endif %}
                        {% endwith %}
                      
                      {% elif doctor.transaction_status == "Rejected" %}
                        <div>
                          <span class="text-danger disapprove">Disapproved</span>
                          <br><small class="text-muted">{{ doctor.rejection_reason }}</small>
                        </div>
                      
                      {% else %}
                        <form method="post" action="{% url 'user-wallet-requests' %}" enctype="multipart/form-data"
                              class="approve-form text-center d-flex gap-2" id="approve-form-{{ doctor.id }}">
                          {% csrf_token %}
                          <input type="hidden" name="status_{{ doctor.id }}" value="Accepted">
                    
                          <!-- Hidden File Upload -->
                          <label for="file-upload-{{ doctor.id }}" class="doc-upload m-0 text-center d-none">
                            <span class="upload-icon">
                              <i class="fa-solid fa-arrow-up-from-bracket"></i>
                            </span>
                            <input type="file" name="document_{{ doctor.id }}" accept=".pdf,.jpg,.jpeg,.png"
                                   class="form-control mb-2 d-none" required id="file-upload-{{ doctor.id }}">
                             <!-- <span class="file-name mt-1 d-none"></span> -->
                            <!-- <span class="tick-icon d-none">
                              <i class="fa-solid fa-check"></i>
                            </span> -->
                          </label>

                          <!-- Show Upload Button -->
                          <button type="button" class="btn btn-success btn-sm show-upload-btn" data-id="{{ doctor.id }}">
                            <i class="fa-solid fa-check "></i>
                          </button>
                    
                          <!-- Final Submit Button -->
                          <button type="submit" class="btn btn-primary btn-sm d-none submit-upload-btn" id="submit-btn-{{ doctor.id }}">
                            Submit
                          </button>
                        </form>
                    
                        <!-- Disapprove Button -->
                        <button type="button" class="btn btn-danger btn-sm disapprove-btn" data-id="{{ doctor.id }}">
                          <i class="fa-solid fa-xmark"></i> 
                        </button>
                      {% endif %}
                    </td>
                    
                  </tr>
                {% empty %}
                  <tr>
                    <td colspan="10" class="text-center">No requests 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 'user-wallet-requests' %}" 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 'user-wallet-requests' %}", {
      '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>
<script>
$(document).ready(function () {
  // Show file input + Submit on Approve click
  $(".show-upload-btn").click(function () {
    const id = $(this).data("id");
    const form = $("#approve-form-" + id);

    // Show the file input and Submit button
    form.find(".doc-upload").removeClass("d-none");
    form.find(".submit-upload-btn").removeClass("d-none");

    // Hide the show upload button
    $(this).addClass("d-none");

    // Select and modify disapprove button outside the form
    $(".disapprove-btn[data-id='" + id + "']").addClass("d-none"); // Add class outside the form
  });

  // When a file is selected, mark the document as uploaded and change icon
  $("input[type='file']").change(function () {
    const id = $(this).attr("id").split("-")[2]; // Get the doctor id from input id
    const docUpload = $("#file-upload-" + id).closest(".doc-upload");

    // Check if a file is selected
    if (this.files && this.files[0]) {
      // Change icon to checkmark or uploaded icon
      docUpload.find(".upload-icon").html('<i class="fa-solid fa-file"></i>'); // Change icon to checkmark

      // Show the file name (optional)
      docUpload.find(".file-name").text(this.files[0].name).removeClass("d-none");

      // Mark the document as uploaded
      docUpload.addClass("uploaded"); // Add "uploaded" class to the .doc-upload
    } else {
      // Reset the icon if no file is selected
      docUpload.find(".upload-icon").html('<i class="fa-solid fa-arrow-up-from-bracket"></i>'); // Reset to upload icon

      // Remove the "uploaded" class
      docUpload.removeClass("uploaded");
    }
  });

  // Disapprove button triggers modal
  $(".disapprove-btn").click(function () {
    const id = $(this).data("id");
    $("#rejected_doc_id").val(id);
    $("#rejectReasonModal").modal("show"); // Show rejection modal
  });
});

  $(document).ready(function () {
    // Other existing code...

    // Clear modal textarea and hidden field on close
    $('#rejectReasonModal').on('hidden.bs.modal', function () {
      $('#rejection_reason').val('');
      $('#rejected_doc_id').val('');
    });

    // Disapprove button triggers modal
    $(".disapprove-btn").click(function () {
      const id = $(this).data("id");
      $("#rejected_doc_id").val(id);
      $("#rejectReasonModal").modal("show");
    });
  });
</script>

  </script>
  

{% endblock %}