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

<title>Kila Kolis | Help & Support</title>

<div class="content-wrapper">
  <div class="inner-content">
    <div class="top-bar mb-4">
      <h2 class="f-20 bold">Help & Support Tickets</h2>
    </div>

    <div class="manage-user-data table-customer mt-4">
      <div class="card px-0">
        <div class="card-header bg-white">
          <form action="{% url 'users-help-support' %}" 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="{{ search_post|default:'' }}" placeholder="Search ..">
                <div class="search-icons">
                  <button type="submit" 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 = '{% url 'users-help-support' %}'">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>Title</th>
                  <th>Description</th>
                  <th>Status</th>
                </tr>
              </thead>
              <tbody>
                {% for ticket in ticket_obj %}
                  <tr>
                    <td>{{ ticket.id }}</td>
                    <td>
                      <div class="user-table-icon">
                        <img src="{{ ticket.user.image|default:'/static/admin/images/user-default.png' }}" alt="user">
                        <span>{{ ticket.user.full_name }}</span>
                      </div>
                    </td>
                    <td>{{ ticket.title }}</td>
                    <td>{{ ticket.description }}</td>
                    <td>
                      {% if ticket.status == "Accepted" %}
                        <span class="text-success approve">Approved</span>
                      {% elif ticket.status == "Rejected" %}
                        <div class="d-flex align-items-center">
                          <span class="text-danger disapprove">Disapproved</span>
                          <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="{{ ticket.rejection_reason }}">
                        </div>
                      {% else %}
                        <div class="d-flex gap-2">
                          <button type="button" class="btn btn-success btn-sm approve-btn" data-id="{{ ticket.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="{{ ticket.id }}"><i class="fa-solid fa-xmark pe-2"></i>Disapprove</button>
                        </div>
                      {% endif %}
                    </td>
                  </tr>
                {% empty %}
                  <tr>
                    <td colspan="5" class="text-center">No support tickets found.</td>
                  </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>

    {% if ticket_obj %}
    <div class="pagination justify-content-center mt-3">
      <ul class="pagination">
        {% if ticket_obj.has_previous %}
          <li><a href="?page={{ ticket_obj.previous_page_number }}">&laquo;</a></li>
        {% else %}
          <li class="disabled"><span>&laquo;</span></li>
        {% endif %}
        {% for i in ticket_obj.paginator.page_range %}
          {% if ticket_obj.number == i %}
            <li class="active"><span>{{ i }}</span></li>
          {% else %}
            <li><a href="?page={{ i }}">{{ i }}</a></li>
          {% endif %}
        {% endfor %}
        {% if ticket_obj.has_next %}
          <li><a href="?page={{ ticket_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 'users-help-support' %}" 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_ticket_id" id="rejected_ticket_id">
          <div class="mb-3">
            <label for="rejection_reason" class="form-label">Reason</label>
            <textarea class="form-control rejected_input" 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 'users-help-support' %}", {
      'csrfmiddlewaretoken': '{{ csrf_token }}',
      ['status_' + id]: 'Accepted'
    }, function () {
      location.reload();
    });
  });

  $(".disapprove-btn").click(function () {
    const id = $(this).data("id");
    $("#rejected_ticket_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>
    // Clear the form (including all textareas with the class 'rejected_input') and close the modal
    function clearForm() {
        // Get all textareas with the class 'rejected_input' and clear their values
        const textareas = document.querySelectorAll('.rejected_input');
        textareas.forEach(textarea => {
            textarea.value = ''; // Clear textarea content
        });

        // Reset the hidden input field with id 'rejected_ticket_id'
        const hiddenField = document.getElementById('rejected_ticket_id');
        if (hiddenField) {
            hiddenField.value = ''; // Reset hidden field value
        }

        // Close the modal manually using Bootstrap's modal method
        const modalElement = document.getElementById('rejectReasonModal');
        const modal = new bootstrap.Modal(modalElement);
        modal.hide();
    }

    // Optional: Clear form when the modal is dismissed by clicking outside or pressing ESC
    document.getElementById('rejectReasonModal').addEventListener('hidden.bs.modal', function () {
        clearForm();
    });
</script>

{% endblock %}