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

<!-- Begin Page Content -->
<title>Manimaran | Help & Support</title>
<div class="container-fluid">
    <div class="inner-content">
        <!-- Page Heading -->
        <div class="top-bar mb-4">
            <h2 class="topHead">Help & Support</h2>
        </div>

        <div class="row">
            <div class="col-12 col-xl-3 col-md-4 mb-4">
                <div class="card  shadow h-100 py-2">
                    <div class="card-body">
                        <div class="dash-cards">
                            <h3 class="f-15 mb-3">Total Queries</h3>
                            <div class="dash-card-cntnt d-inline-flex align-items-center justify-content-between w-100">
                                <div class="dash-icon">
                                    <img src="/static/admin/images/question.png">
                                </div>
                                <div class="dash-count">
                                    <p class="f-30 bold dark mb-0">{{total}}</p>
                                </div>
                                <!-- <div class="dash-graph">
                                    <img src="/static/admin/img/sound.svg">
                                </div> -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-xl-3 col-md-4 mb-4">
                <div class="card  shadow h-100 py-2">
                    <div class="card-body">
                        <div class="dash-cards">
                            <h3 class="f-15 mb-3">Total Resolved</h3>
                            <div class="dash-card-cntnt d-inline-flex align-items-center justify-content-between w-100">
                                <div class="dash-icon">
                                    <img src="/static/admin/images/resolved.png">
                                </div>
                                <div class="dash-count">
                                    <p class="f-30 bold dark mb-0">{{resolved}}</p>
                                </div>
                                <!-- <div class="dash-graph">
                                    <img src="/static/admin/img/sound.svg">
                                </div> -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    
            <div class="col-12 col-xl-3 col-md-4 mb-4">
                <div class="card  shadow h-100 py-2">
                    <div class="card-body">
                        <div class="dash-cards">
                            <h3 class="f-15 mb-3">Total Pending</h3>
                            <div class="dash-card-cntnt d-inline-flex align-items-center justify-content-between w-100">
                                <div class="dash-icon">
                                    <img src="/static/admin/images/expired.png">
                                </div>
                                <div class="dash-count">
                                    <p class="f-30 bold dark mb-0">{{pending}}</p>
                                </div>
                                <!-- <div class="dash-graph">
                                    <img src="/static/admin/img/sound.svg">
                                </div> -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="manage-user-data table-customer mt-4">
            <div class="card px-0">
                <div class="card-header bg-white ">
                        <h2 class="f-20 mb-0">Support Listing</h1>
                </div>
                <div class="manage-user-table ">
                    <div class="table-responsive">
                    {% if sup_obj %}
                        <table class="table table-bordered " id="dataTable" width="100%" cellspacing="0">
                            <thead>
                                <tr>
                                    <th>Sr. No.</th>
                                    <th>Email</th>
                                    <th>Subject</th>
                                    <th>Date</th>
                                    <th>Status</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                               {% for help in sup_obj %}
                                <tr>
                                    <td>{{ forloop.counter }}</td>
                                    <td>{{help.user.email}}</td>
                                    <td>{{help.title}}</td>
                                    <td>{{ help.start_date| date:"d M  Y"}}</td>
                                    {% if help.status == 0 %}
                                    <td><span class="label gradient-4 btn-rounded">Pending</span></td>
                                    {% else %}
                                    <td><span class="label gradient-1 btn-rounded">Completed</span></td>
                                    {% endif %}
                                    {% if help.status == 1 %}
                                    <td>
                                        <span class="message-btn"><a href="/view-help-and-support/{{help.id}}" data-toggle="tooltip" data-placement="top" title="" data-original-title="View" aria-describedby="tooltip977194"><i class="fa fa-eye color-muted m-r-5"></i> View Message </a></span>
                                        
                                    </td>
                                    {% else %}
                                    <td>
                                        <span class="send-btn"><a href="/send-reply-help-support/{{help.id}}" data-toggle="tooltip" data-placement="top" title="" data-original-title="View" aria-describedby="tooltip977194"><i class="fa fa-send color-muted m-r-5"></i> Send Message </a></span>
                                    </td>
                                    {% endif %}
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    {% else %}
                    <p style="text-align:center;">No data found</p>
                    {% endif %}
                    </div>
                </div>
            </div>
        </div>
        {% if sup_obj %}
        <div class="demo-inline-spacing">
            <div class="pagination justify-content-center">
             <ul class="pagination">
                  {% if sup_obj.has_previous %}
                       <li><a href="?page={{ sup_obj.previous_page_number }}">&laquo;</a></li>
                  {% else %}
                    <li class="disabled"><span>&laquo;</span></li>
                  {% endif %}
                  {% for i in sup_obj.paginator.page_range %}
                    {% if sup_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 sup_obj.has_next %}
                    <li><a href="?page={{ sup_obj.next_page_number }}">&raquo;</a></li>
                  {% else %}
                    <li class="disabled"><span>&raquo;</span></li>
                  {% endif %}
                  </ul>
            </div>
          </div>
          {% endif %}
          <!--end of Pagination-->
    </div>
    </div>
</div>

<!-- Support Modal -->
<div class="modal fade" id="supportModal" tabindex="-1" aria-labelledby="supportModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="supportModalLabel">Queries</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="help-modal">
            <div class="help-modal-top d-flex align-items-center gap-3">
                <div class="help-icon"><img src="{% static 'admin/images/user.png' %}" alt="User"></div>
                <div class="details-cnt">
                    <span><strong>Name : </strong> <span>Varun Dhawan</span></span>
                    <span><strong>Email : </strong> <span>Varun00@gmail.com</span></span>
                    <span><strong>Date & time : </strong> <span>14 Feb 2023, 9:00 AM</span></span>
                </div>          
            </div>
            <div class="query-para pt-4">
                <span class="d-flex gap-3 f-14"><strong>Query: </strong> <span>Lorem Ipsum has been the industry's standard dummy te industry. Lorem Ipsum has been the industry's standard dummy te</span></span>
            </div>
            <div class="query-aera pt-4">
                <textarea class="query-txt rounded" placeholder="Resolve the query"></textarea>
            </div>
          </div>
        </div>
        <div class="modal-footer justify-content-center pt-0">
          <button type="button" class="btn dark-btn rounded">Resolve</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>

{% endblock %}