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

<!-- Begin Page Content -->
<title>Manimaran | Payout Listing</title>
<style>
.transaction-status select.form-control {
    width: max-content;
   padding: 5px 12px;
   appearance: auto;
   margin: 0 !important;
}
</style>
<div class="container-fluid">
    <div class="inner-content">
        <!-- Page Heading -->
        <div class="top-bar mb-4">
            <h2 class="topHead">Payout Listing</h2>
        </div>
        <div class="manage-user-data table-customer border-0 mt-4">
            <div class="card px-0">
                <div class="card-header bg-white ">
                    <h2 class="f-20 mb-0">Payouts</h1>
                </div>
                <div class="manage-user-table">
                    <div class="table-responsive">
                    {% if pay_obj %}
                        <table class="table" id="dataTable" width="100%" cellspacing="0">
                            <thead>
                                <tr>
                                    <th>Transcation ID</th>
                                    <th>Service Provider Name</th>
                                    <th>Service Email</th>
                                    <th>Date</th>
                                    <th>Amount</th>
                                    <th>Transcation Status</th>
                                </tr>
                            </thead>
                            <tbody>
                            {% for pay in pay_obj %}
                                <tr>
                                    <td>{{ pay.transcation_id}}</td>
                                    <td>
                                        <div class="table-users name"><img src="{% if pay.user.avatar %}{{ pay.user.avatar}}{% else %}{% static 'admin/images/user.png' %}{% endif %}" alt=""> {{pay.user.first_name }} {{pay.user.last_name }}  </div>
                                    </td>
                                     <td>{{ pay.user.email}}</td>
                                    <td>{{pay.created_at|date:"d M  Y"}}</td>
                                    <td>£{{ pay.amount}}</td>
                                    {% comment %} <td>{{ pay.transcation_status}}</td>           {% endcomment %}
                                    {% if pay.transcation_status == 'Pending'  %}
                                    <td>
                                        <div class="transaction-status">
                                        <select class="form-control" id="transaction-status-select" data-transaction-id="{{ pay.id }}">
                                        <option {% if pay.transcation_status == 'Pending' %}selected{% endif %}>Pending</option>
                                        <option {% if pay.transcation_status == 'Completed' %}selected{% endif %}>Completed</option>
                                        </select>
                                        </div>
                                    </td>   
                                    {% else %}
                                    <td style="color:green;">Completed</td>       
                                    {% endif %}
                                </tr> 
                                {% endfor %}
                            </tbody>
                        </table>
                    {% else %}
                    <p style="text-align:center;">No results found.</p>
                    {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
</div>
        {% if pay_obj %}
        <div class="demo-inline-spacing">
            <div class="pagination justify-content-center">
             <ul class="pagination">
                  {% if pay_obj.has_previous %}
                       <li><a href="?page={{ pay_obj.previous_page_number }}">&laquo;</a></li>
                  {% else %}
                    <li class="disabled"><span>&laquo;</span></li>
                  {% endif %}
                  {% for i in pay_obj.paginator.page_range %}
                    {% if pay_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 pay_obj.has_next %}
                    <li><a href="?page={{ pay_obj.next_page_number }}">&raquo;</a></li>
                  {% else %}
                    <li class="disabled"><span>&raquo;</span></li>
                  {% endif %}
                  </ul>
            </div>
          </div>
          {% endif %}

<!-- /.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>
<script>
    $(document).ready(function () {
        $('#transaction-status-select').change(function () {
            var transactionId = $(this).data('transaction-id');
            var newStatus = $(this).val();

            $.ajax({
                type: 'POST',
                url: 'update_transaction_status/',
                data: {
                    'transaction_id': transactionId,
                    'new_status': newStatus,
                    'csrfmiddlewaretoken': '{{ csrf_token }}',
                },
                dataType: 'json',
                success: function (data) {
                    if (data.success) {
                        location.reload();
                    } else {
                       
                    }
                },
                error: function (xhr, status, error) {
                    // Optional: Add code to handle AJAX error
                }
            });
        });
    });
</script>
{% endblock %}