{% extends 'admin_base_layout.html' %}
{% load static %}
{% block content %}
<!-- html code -->
<title>Seer | Refund Money</title>
	    <div class="main-content pt-0">
	    	<div class="content-wrapper">
	    		<div class="row">
	    			<div class="col-12 col-md-7">
	    				<h2 class="topHead">Refund Money</h2>
	    			</div>
                    <div class="col-12 col-md-5 text-right">
	    				<button type="button" class="border-btn" onclick="location.href='/export-csv-refund'" >Export CSV</button>
	    			</div>
	    			<div class="col-12">
	    				<div class="d-flex align-items-center justify-content-between">
						<form action='/refund-money-list' method='GET'>
						{% csrf_token %}
	    					<div class="d-flex align-items-center">
	    						<div class="search home position-relative">
			      					<input type="text" name="search" value="{% if search_post %}{{search_post}}{% else %}{% 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="from-to d-flex  px-4">
                                    <div class="from">
                                        <input type="date" id="dateInput" placeholder="Date" name="refund_date" value="{% if refund_date %}{{refund_date}}{% endif%}">
                                    </div>
                                </div>
						      	<div class="search-btn">						      		
						      		<button type="submit" class="search-btn">Search</button>
									  <button type="button" class="search-btn"  onclick="location.href='/refund-money-list'">Reset</button>
						      	</div>
                                 
	    					</div>
                           
						</form>
	    					
	    				</div>
	    			</div>
	    		</div>
	    		<div class="row new-user-table bookings mt-3">
	    			<div class="col-12 col-md-12">
	    				<div class="card dashboard-card px-0">
	    					<div class="top-card">
	    						<p class="f-18">Refund Requests</p>	    						
	    					</div>
	    					<div class="table-users">
	    						<div class="table-responsive w-100">       
								{% if refund_obj %}   
					              <table class="table w-100">
					                <thead>
					                  <tr>
										<th>Appointment ID</th>
					                    <th>User</th>
					                    <th>Fortuneteller</th>
					                    <th>Date Requested</th>
										<th>Date Processed</th>
					                    <th>Original Amount:</th>
					                    <th>Refund Status</th>
										<th>Cancelled By</th>
					                    <th>Actions</th>

					                  </tr>
					                </thead>
					                <tbody>
									{% for refund in refund_obj %}
					                <tr>
										<td>{{ refund.appointment.appointment_id}}</td>
					                    <!-- <td>
                                            <div class="table-users">
                                                <img src="{% if refund.seer_user.primary_image %}{{refund.seer_user.primary_image}}{% else %}{% static 'admin/images/user-profile-1.png' %}{% endif %}">
                                                <h6 class="f-14">{{ refund.seer_user.first_name }} {{ refund.seer_user.last_name }}</h6>
                                            </div>
					                    </td> -->
					                    <td>{{ refund.appointment.seer_user.first_name }} {{ refund.appointment.seer_user.last_name }}</td>					                    
					                    <td>{{ refund.appointment.fortune_teller.first_name}} {{ refund.appointment.fortune_teller.last_name}}</td>					                    
					                    <td>{{ refund.created_at|date:"d M  Y" }}</td>
                                        <td>{% if refund.date_processed %}{{ refund.date_processed|date:"d M  Y" }} {%else%} N/A {%endif%}</td>
										<td>${{ refund.appointment.price }}</td>
                                        <td>{{refund.status}}</td>
										<td>{{refund.appointment.cancelled_by}}</td>
										<td>
		                    				<a href="refund-money-details/{{refund.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 refund_obj %}
			<div class="demo-inline-spacing pagi">
			  <div class="pagination justify-content-center">
			  <nav aria-label="Page navigation">
				<ul class="pagination">
				{% if refund_obj.has_previous %}
				<li><a href="?page={{ refund_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 refund_obj.number > 3 %}
				<li><a href="?page=1">1</a></li>
				<li class="disabled"><span>...</span></li>
				{% endif %}

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

				{% if refund_obj.has_next %}
				<li><a class="page-link" href="?page={{ refund_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 -->
<script>
var today = new Date().toISOString().split('T')[0];
document.getElementById('dateInput').setAttribute('max', today);
</script>

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