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

<!-- Begin Page Content -->
<title>Music | Request Payout List</title>
<div class="content-wrapper">
    <div class="inner-content">
        <!-- Page Heading -->
        <div class="top-bar mb-4">
            <h2 class="f-20 bold">Request Payout</h2>
        </div>
        {% comment %} <div class="data-filter">
            <div class="card">
                <div class="data-filtr-col">
                    <div class="filter">
                        <div class="form-group">                  
                            <label for="name" class="col-form-label">Search</label>                
                            <input type="text" class="form-control" name="search" id="search" placeholder="Search">              
                        </div>
                    </div>  
                    <div class="filter">
                        <div class="form-group">                  
                            <label for="name" class="col-form-label">Date From</label>                
                            <input type="date" class="form-control" name="date" id="date">          
                        </div>
                    </div>
                    <div class="filter">
                        <div class="form-group">                  
                            <label for="name" class="col-form-label">To Date</label>                
                            <input type="date" class="form-control" name="date" id="date">          
                        </div>
                    </div> 
                    <div class="filter">
                        <div class="form-group">                  
                            <label for="name" class="col-form-label">Payment Method</label>                
                            <select class="form-control">
                                <option>Credit Card</option>     
                                <option>Credit Card</option>     
                                <option>Credit Card</option>     
                                <option>Credit Card</option>     
                            </select>              
                        </div>
                    </div>  
                   
                    <div class="filter">
                        <div class="filter-btn">                  
                            <button type="button" class="dark-btn me-2">Search</button>
                            <button type="button" class="light-btn">Clear</button>
                        </div>
                    </div>
                </div>
            </div>
        </div> {% endcomment %}
        <div class="manage-user-data table-customer mt-4">
            <div class="card px-0">
                <div class="card-header bg-white ">
                    <h2 class="f-16 bold mb-0">All Donations</h1>
                </div>
                <div class="manage-user-table ">
                    <div class="table-responsive">
                        {% if trans_obj %}
                        <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                            <thead>
                                <tr>
                                    <th><p>ID</p></th>
                                    <th><p>Artist ID</p></th>
                                    <th><p>Artist Name</p></th>
                                    <th><p>Transcation Id</p></th>
                                    <th><p>Amount</p></th>
                                    <th><p>Transacation Date</p></th>
                                    <th><p>Payout Status</p></th>
                                </tr>
                            </thead>
                            <tbody>
                            {% for pay in trans_obj %}
                                <tr>
                                    <td>{{pay.id}}</td>
                                    <td>{{pay.artiste.id}}</td>
                                    <td>{{pay.artiste.stage_name}}</td>
                                    <td>{{pay.transcation_id}}</td>

                                    <td>{{pay.amount}}</td>
                                    <td>{{pay.created_at|date:"Y-m-d"}}</td>
                                    {% if pay.status == "Pending" %}
                                    <td><button  onclick="location.href = '/mark-payout-complete/{{ pay.id}}'"  type="button" class="btn btn-primary me-2" >Mark as complete</button></td>
                                    {% else %}
                                    <td style="color: green;">Completed</td>
                                    {% endif  %}

                                </tr>
                             {% endfor %}
                            </tbody>
                        </table>
                        {% else %}
                        <p style="text-align: center;">No data found</p>
                        {% endif %}
                  
                    </div>
                </div>
            </div>
        </div>
        {% if trans_obj %}
        <div class="demo-inline-spacing">
            <div class="pagination justify-content-center">
             <ul class="pagination">
                  {% if trans_obj.has_previous %}
                       <li><a href="?page={{ trans_obj.previous_page_number }}">&laquo;</a></li>
                  {% else %}
                    <li class="disabled"><span>&laquo;</span></li>
                  {% endif %}
                  {% for i in trans_obj.paginator.page_range %}
                    {% if trans_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 trans_obj.has_next %}
                    <li><a href="?page={{ trans_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>


<!-- /.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 %}