{% extends 'admin_base_layout.html' %}
{% load static %}
{% block content %}
<!-- html code -->
<title>Seer | Payout Request Lists</title>
	    <div class="main-content pt-0">
	    	<div class="content-wrapper">
	    		<div class="row">
	    			<div class="col-12">
	    				<div class="d-flex align-items-center justify-content-between">
	    					<div>
		    					<h2 class="topHead">Payout Request List</h2>
	    					</div>
		    				{% comment %} <div>
		    					<input type="file" id="myFileInput" />
								<input type="button" class="export-btn" onclick="location.href='/export-csv-booking'" value="Export CSV" />
		    				</div> {% endcomment %}
	    				</div>
	    			</div>
					<form action="/get-all-payout-request" method='GET' id="get-all-payout-request">
						<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 }}{% 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="search-btn">
									<button type="submit" class="search-btn mx-2">Search</button>
									<button type="button" onclick="location.href='/get-all-payout-request'" class="search-btn">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">Payout Request Lists</p>
	    					</div>
	    					<div class="table-users">
	    						<div class="table-responsive w-100">     
								{% if payout_obj %}     
					              <table class="table w-100">
					                <thead>
					                  <tr>
					                    <th>Transcation Id</th>
					                    <th>Fortuneteller Name</th>
					                    <th>Payout Amount</th>
					                    <th>Requested Date</th>
                                        <th>Transcation Status</th>
					                    <th>Action</th>

					                  </tr>
					                </thead>
					                <tbody>
									{% for payout in payout_obj %}
					                <tr>
                                        <td>{{payout.transcation_id}}</td>
					                    <td>
					                    	<div class="table-users">
					                    		<img src="{% if payout.fortune_teller.image %}{{payout.fortune_teller.image}}{% else %}/static/admin/images/user-profile-1.png{% endif %}">
					                    		<h6 class="f-14">{{ payout.fortune_teller.first_name }} {{ payout.fortune_teller.last_name }}</h6>
					                    	</div>
					                    </td>
					                    <td>${{payout.amount}}</td>
					                    <td>{{payout.created_at|date:"d M  Y"}}</td>
					                    <td>{% if payout.transcation_status == 'pending' %}Pending{% else %}Approved{% endif %}</td>
										<td>
										{% if payout.transcation_status == 'pending' %}
                                        <select name="payout_action" id="payout_action" class="payout_action" data-payout-id="{{ payout.id }}">
										 	<option id="pending" value="pending" {% if payout.transcation_status == 'pending' %}selected{% endif %}>Pending</option>
                                            <option id="approve" value="approved" {% if payout.transcation_status == 'approved' %}selected{% endif %}>Approved</option>
											<input type="hidden" name="payout_id" class="payout_id" value="{{ payout.id }}">
										</select>
										{% else %}
										<select name="payout_action" id="payout_action" class="payout_action" data-payout-id="{{ payout.id }}">
                                            <option id="approve" value="approved" {% if payout.transcation_status == 'approved' %}selected{% endif %}>Approved</option>
										</select>
										{% endif %}
										</td>
					

					                </tr> 
									{% endfor %} 					                  
					                </tbody>
					              </table>        
								  {% else %}
								  <p style="text-align: center;">No Data Found</p>
								  {% endif %}
					            </div>
	    					</div>
	    				</div>
	    			</div>
	    		</div>
	    	</div>
	    </div>
	{% if payout_obj %}
		<div class="demo-inline-spacing pagi">
		  <div class="pagination justify-content-center">
			<nav aria-label="Page navigation">
			  <ul class="pagination">
				{% if payout_obj.has_previous %}
				<li><a href="?page={{ payout_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 payout_obj.number > 3 %}
				<li><a href="?page=1">1</a></li>
				<li class="disabled"><span>...</span></li>
				{% endif %}

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

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

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

{%block js%}
<!-- js code -->
<script>
 $(document).ready(function() {
      $('.payout_action').on('change', function() {
        const newStatus = $(this).val();
        const appointId = $(this).data('payout-id');
        const csrfToken = '{{ csrf_token }}';
    
        $.ajax({
          url: '/change-payout-request-status',
          type: 'POST',
          data: {
            'appoint_id': appointId,
            'new_status': newStatus,
            'csrfmiddlewaretoken': csrfToken
          },
          success: function(response) {
            location.reload();
          },
          error: function(xhr, status, error) {
            location.reload();
          }
        });
      });
    });
</script>

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