{% extends 'admin_base_layout.html' %}
{% load static %}
{% block content %}
<!-- html code -->
<title>Seer | Payment</title>
	    <div class="main-content pt-0">
	    	<div class="content-wrapper">
	    		<div class="row">
	    			<div class="col-12">
	    				<h2 class="topHead">Payment</h2>
	    			</div>
				<form action="payments" method="get">
	    			<div class="col-12 pt-lg-4">
	    				<div class="d-flex align-items-center">
	    					<div class="search home position-relative">
			      				<input type="text" name="search" value="{% if search_post %}{{search_post}}{% endif %}" placeholder="Type in to search ..">
				      			<div class="search-icons">
				      				<button type="button" class="search-icn-btn">
				      					<i class='bx bx-search'></i>
					      			</button>
					      		</div>
				      		</div>
				      		<div class="dropdown px-4">
							  {% comment %} <a class="btn btn-secondary paymentMode dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
							    Payment Mode
							  </a>

							  <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
							    <li><a class="dropdown-item" href="#">Action</a></li>
							    <li><a class="dropdown-item" href="#">Another action</a></li>
							  </ul> {% endcomment %}
							</div>
					      	<div class="from-to d-flex">
					      		<div class="from">
					      			<input type="date" name="booking_date" placeholder="Date" value="{{booking_date}}">
					      		</div>
					      	</div>
					      	<div class="search-btn px-4">					      		
					      		<button type="submit" class="search-btn">Search</button>
								<button type="button" class="search-btn" onclick="location.href='/payments'" >Reset</button>
					      	</div>
	    				</div>
	    			</div>
				</form>
	    		</div>
	    		<div class="row new-user-table bookings mt-3">
	    			<div class="col-12 col-md-12">
	    				<div class="card dashboard-card">
	    					<div class="top-card">
	    						<p class="f-18">Payment Lists</p>
	    					</div>
	    					<div class="table-users">
	    						<div class="table-responsive w-100">
								{% if payment_obj %}          
					              <table class="table w-100">
					                <thead>
					                  <tr>
									    <th>Transcation Id </th>
										<th>Appointment </th>
					                    <th>Users Name</th>
					                    <th>Date & Time</th>
					                    <th>Fortuneteller</th>
					                    <th>Amount</th>
					                    <th>Payment Mode</th>
					                    <th>Status</th>
					                    <th>Actions</th>

					                  </tr>
					                </thead>
					                <tbody>
									{% for payment in payment_obj %}
					                <tr>
									<td>{{payment.transcation_id}}</td>
									<td>{{payment.booking.appointment_id}}</td>
					                    <td>
					                    	<div class="table-users">
					                    		<img src="{% if payment.seer_user.primary_image %}{{ payment.seer_user.primary_image }} {% else %}/static/admin/images/user-default.png{% endif %}">
					                    		<h6 class="f-14">{{payment.seer_user.first_name}} {{payment.seer_user.last_name}}</h6>
					                    	</div>
					                    </td>
					                    <td>{{ payment.created_at|date:"d M  Y" }}</td>
					                    <td>
					                    	<div class="table-users">
					                    		<img src="{% if payment.booking.fortune_teller.image %}{{ payment.booking.fortune_teller.image }} {% else %}/static/admin/images/user-default.png{% endif %}">
					                    		<h6 class="f-14">{{payment.booking.fortune_teller.first_name }} {{payment.booking.fortune_teller.last_name}}</h6>
					                    	</div>
					                    </td>
					                    <td>${{ payment.amount }}</td>
					                    <td>{{ payment.payment_mode}}</td>
					                    <td>
		                    				<span class="complete relative d-block">Completed</span>
		                    			</td>
										<td>
		                    				<a href="payment-details/{{payment.id}}" class="block-icon" data-toggle="tooltip" data-placement="top" title="View"><img src="{% static 'admin/images/eye.png' %}"></a>
		                    			</td>
					                </tr>
									{% endfor %}
					                </tbody>
					              </table>     
								  {% else %}
								  <p style="text-align:center;">No data found</p>
								  {% endif %}   
					            </div>
	    					</div>
	    				</div>
	    			</div>
	    		</div>
	    	</div>
	    </div>
	<div class="row ">
      {% if payment_obj %}
      <div class="demo-inline-spacing pagi">
        <div class="pagination justify-content-center">
        <nav aria-label="Page navigation">
          <ul class="pagination">
          {% if payment_obj.has_previous %}
          <li><a href="?page={{ payment_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 payment_obj.number > 3 %}
		  <li><a href="?page=1">1</a></li>
		  <li class="disabled"><span>...</span></li>
		  {% endif %}

          {% for i in payment_obj.paginator.page_range %}
		  {% if i >= payment_obj.number|add:-2 and i <= payment_obj.number|add:10 %}
          {% if payment_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 payment_obj.paginator.num_pages > payment_obj.number|add:2 %}
		  <li class="disabled"><span>...</span></li>
		  <li><a href="?page={{ payment_obj.paginator.num_pages }}">{{ payment_obj.paginator.num_pages }}</a></li>
		  {% endif %}

          {% if payment_obj.has_next %}
          <li><a class="page-link" href="?page={{ payment_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>

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

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


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