{% extends 'admin_base_layout.html' %}
{% load static %}
{% block content %}
<!-- html code -->
<title>Seer | Help & Support</title>
	    <div class="main-content pt-0">
	    	<div class="content-wrapper">
	    		<div class="row">
	    			<div class="col-12">
	    				<h2 class="topHead">Help & Support</h2>
	    				<p>Welcome to Lorem Ipsum Admin Dashboard</p>
	    			</div>	    			
	    		</div>
	    		<div class="row help-support">
	    			<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-16 mb-3">Total Query</h3>
		                            <div class="dash-card-cntnt d-inline-flex align-items-center justify-content-between w-100">
		                                <div class="dash-icon">
		                                    <i class="fa-solid fa-user"></i>
		                                </div>
		                                <div class="dash-count">
		                                    <p class="bold mb-0">{{total}}</p>
		                                </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-16 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">
		                                    <i class="fa-solid fa-user"></i>
		                                </div>
		                                <div class="dash-count">
		                                    <p class="bold mb-0">{{resolved}}</p>
		                                </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-16 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">
		                                    <i class="fa-solid fa-user"></i>
		                                </div>
		                                <div class="dash-count">
		                                    <p class="bold mb-0">{{pending}}</p>
		                                </div>
		                            </div>
		                        </div>
		                    </div>
		                </div>
	            	</div>
	    		</div>
	    		<div class="row new-user-table bookings help-support mt-3">
	    			<div class="col-12 col-md-12">
	    				<div class="card dashboard-card">
	    					<div class="top-card">
	    						<p class="f-18">Support Listing</p>
	    					</div>
	    					<div class="table-users">
	    						<div class="table-responsive w-100">          
					              <table class="table w-100">
					                <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 support in sup_obj %}
					                <tr>
					                    <!-- <td>{{forloop.counter}}</td> -->
										{% if support.seer_user %}
					                    	<td>{{support.seer_user.email}}</td>
										{% elif support.fortune_teller %}
											<td>{{support.fortune_teller.email}}</td>
										{% endif %}
					                    <td>{{support.title}}</td>
					                    <td>{{support.created_at|date}}</td>
					                    <td>
										{% if support.status == 0%}
		                    				<span class="complete relative d-block">Pending</span>
										{% else %}
		                    				<span class="complete relative d-block">Complete</span>
										{% endif %}
		                    			</td>

		                    			<td>
					                      <div class="action-btns">
										   {% if support.status == 1 %}
					                        <a href="/help-support-view/{{support.id}}" class="block-icon">
					                        	<img src="/static/admin/images/eye.png">View Message
					                        </a>
											{% else %}
											<a href="/help-support-send/{{support.id}}" class="block-icon">
					                        	<i class="fa-solid fa-paper-plane"></i>Send Message
					                        </a
											{% endif %}>
					                      </div>
					                    </td>
					                </tr>
									{% endfor %}
					                </tbody>
					              </table>        
					            </div>
	    					</div>
	    				</div>
	    			</div>
	    		</div>
				{% if sup_obj %}
				<div class="demo-inline-spacing pagi">
				  <div class="pagination justify-content-center">
					<nav aria-label="Page navigation">
					  <ul class="pagination">
						{% if sup_obj.has_previous %}
						<li><a href="?page={{ sup_obj.previous_page_number }}">&laquo;</a></li>
						{% else %}
						<li class="disabled"><a class="page-link" href="#"><i class="bx bx-chevron-left"></i></a></li>
						{% endif %}

						{% if sup_obj.number > 3 %}
						<li><a href="?page=1">1</a></li>
						<li class="disabled"><span>...</span></li>
						{% endif %}

						{% for i in sup_obj.paginator.page_range %}
						{% if i >= sup_obj.number|add:-2 and i <= sup_obj.number|add:10 %}
						{% if sup_obj.number == i %}
						<li><span><a href="#" class="page-link active">{{ i }} </a></span></li>
						{% else %}
						<li><a class="page-link" href="?page={{ i }}">{{ i }}</a></li>
						{% endif %}
						{% endif %}
						{% endfor %}

						{% if sup_obj.paginator.num_pages > sup_obj.number|add:2 %}
						<li class="disabled"><span>...</span></li>
						<li><a href="?page={{ sup_obj.paginator.num_pages }}">{{ sup_obj.paginator.num_pages }}</a></li>
						{% endif %}

						{% if sup_obj.has_next %}
						<li><a class="page-link" href="?page={{ sup_obj.next_page_number }}">&raquo;</a></li>
						{% else %}
						<li class="disabled"><a href="#" class="page-link"><i class="bx bx-chevron-right"></i></a></li>
						{% endif %}
					  </ul>
					</nav>
				  </div>
				</div>
				{%endif%}
	    	</div>
	    </div>	

<!-- end of html code -->
{%endblock%}

{%block js%}
<!-- js code -->


<!-- end of js -->
{% endblock %}