{% extends '@SonataAdmin/standard_layout.html.twig' %}

{% block sonata_breadcrumb %}
    <li><a href="{{ path('app_funeral_donation_process_payout') }}">Payout Processing</a></li>
{% endblock %}

{% block title %}Payout Processing Dashboard{% endblock %}

{% block content %}
    <div class="box box-primary">
        <div class="box-header with-border">
            <h3 class="box-title">
                <i class="fa fa-money-check-alt"></i> Approved Payouts Awaiting Processing
            </h3>
        </div>
        <div class="box-body">

            {# Flash Messages #}
            {% for label, messages in app.flashes %}
                {% for message in messages %}
                    <div class="alert alert-{{ label }} alert-dismissible" role="alert">
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        {{ message }}
                    </div>
                {% endfor %}
            {% endfor %}

            {# Search Form #}
            <form method="GET" action="{{ path('app_funeral_donation_process_payout') }}" class="form-inline mb-4" style="margin-bottom: 20px;">
                <div class="input-group">
                    <input type="text" name="q" class="form-control" placeholder="Search by ID, requestor, or amount..." value="{{ search_query|e }}">
                    <span class="input-group-btn">
                        <button type="submit" class="btn btn-default"><i class="fa fa-search"></i> Search</button>
                        {% if search_query %}
                            <a href="{{ path('app_funeral_donation_process_payout') }}" class="btn btn-warning"><i class="fa fa-times"></i> Clear</a>
                        {% endif %}
                    </span>
                </div>
            </form>

            {% if payouts is empty and pagination.total_items == 0 %}
                <p class="lead text-center text-muted">No approved payout requests are currently awaiting processing.</p>
            {% elseif payouts is empty and pagination.total_items > 0 %}
                <p class="lead text-center text-muted">No results found for your search query: <strong>"{{ search_query|e }}"</strong>.</p>
            {% else %}
                <p class="text-info">
                    <strong>Note:</strong> Payout amount includes a <strong>{{ commission_rate }}%</strong> commission. Clicking 'Process Payout' executes the external payment logic via the `PayoutProcessorService`, and updates the database record.
                </p>

                <table class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Funeral/Requestor</th>
                            <th>Request Date</th>
                            <th>Approved By</th>
                            <th>Status</th>
                            <th>Requested Amount (GHS)</th>
                            <th>Expected Commission (GHS)</th>
                            <th>Approved Payout (GHS)</th>
                            <th>Payment Details</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for payout in payouts %}
                            
                            <tr>
                                <td>{{ payout.id }}</td>
                                <td>
                                    <strong>Campaign Creator</strong>
                                    <br>
                                    <small>Requested by: {{ payout.requestor|default('N/A') }}</small>
                                </td>
                                <td>
                                    {{ payout.requestDate ? payout.requestDate|date('Y-m-d H:i') : 'N/A' }}
                                </td>
                                <td>
                                    <span class="label label-info">{{ payout.approvedBy|default('N/A') }}</span>
                                </td>
                                <td>
                                    <span class="label label-info">{{ payout.status|default('N/A') }}</span>
                                </td>
                                <td>
                                    <strong class="text-primary">GHS {{ payout.amount|number_format(2, '.', ',') }}</strong>
                                    <small class="text-muted">(Gross)</small>
                                </td>
                                <td>
                                    <strong class="text-warning">-GHS {{ payout.expectedCommission|number_format(2, '.', ',') }}</strong>
                                </td>
                                <td>
                                    <strong class="text-success">GHS {{ payout.expectedApprovedAmount|number_format(2, '.', ',') }}</strong>
                                    <small class="text-muted">(Net)</small>
                                </td>
                                <td>
                                    <span class="label label-default">{{ payout.bankDetails|default('Pending Details') }}</span>
                                </td>
                                <td style="width: 200px;">
                                   


<form method="POST" action="{{ path('process_funeral_donation_payout_payment') }}" class="payout-process-form">
    <input type="hidden" name="payout_id" value="{{ payout.id }}">
    <input type="hidden" name="donation_id" value="{{ payout.donation.id }}">
    <input type="hidden" name="commission_name" value="FUNERAL_DONATION_COMMISSION">
    <input type="hidden" name="_token" value="{{ csrf_token('process_payout_' ~ payout.id) }}">

    <button type="submit" class="btn btn-success btn-lg payout-submit-btn">
            <span class="payout-btn-content">
                <i class="fa fa-credit-card"></i> Process Payout
            </span>

            {#<span class="payout-processing-content hidden" style="display:none;">
                <i class="fa fa-spinner fa-spin"></i> Transferring...
            </span>#}
        </button>
</form>
    

                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            {% endif %}
        </div>
        <div class="box-footer">
            <div class="row">
                <div class="col-sm-6">
                    <small class="text-muted">
                        Showing {{ (pagination.current_page - 1) * pagination.limit + 1 }} to {{ ((pagination.current_page * pagination.limit) > pagination.total_items) ? pagination.total_items : (pagination.current_page * pagination.limit) }} of {{ pagination.total_items }} entries
                        {% if search_query %}(Filtered){% endif %}
                    </small>
                </div>
                
                {# Pagination Controls #}
                <div class="col-sm-6">
                    <ul class="pagination pagination-sm no-margin pull-right">
                        {# Previous Button #}
                        <li class="{{ pagination.current_page == 1 ? 'disabled' : '' }}">
                            <a href="{{ path('app_funeral_donation_process_payout', {page: pagination.current_page - 1, q: search_query}) }}">&laquo;</a>
                        </li>
                        
                        {# Page Links (simplified for display) #}
                        {% for i in 1..pagination.total_pages %}
                            <li class="{{ i == pagination.current_page ? 'active' : '' }}">
                                <a href="{{ path('app_funeral_donation_process_payout', {page: i, q: search_query}) }}">{{ i }}</a>
                            </li>
                        {% endfor %}
                        
                        {# Next Button #}
                        <li class="{% if pagination.current_page >= pagination.total_pages %}disabled{% endif %}">
                            <a href="{{ path('app_funeral_donation_process_payout', {page: pagination.current_page + 1, q: search_query}) }}">&raquo;</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
    
    
    {% block javascripts %}
    {{ parent() }}
    {#<script>
        document.addEventListener('DOMContentLoaded', function () {
            // Target all forms with the specific class
            const forms = document.querySelectorAll('.payout-process-form');

            forms.forEach(form => {
                form.addEventListener('submit', function (event) {
                    // Find elements relative to THIS specific form
                    const btn = form.querySelector('.payout-submit-btn');
                    const originalContent = form.querySelector('.payout-btn-content');
                    const processingContent = form.querySelector('.payout-processing-content');

                    // 1. Disable button to prevent double-clicks
                    btn.setAttribute('disabled', 'disabled');
                    
                    // 2. Change styling to show activity
                    btn.classList.remove('btn-success');
                    btn.classList.add('btn-warning');

                    // 3. Toggle content visibility
                    
                    if (processingContent) processingContent.style.display = 'inline-block';

                    console.log('Processing payout ID: ' + form.querySelector('[name="payout_id"]').value);
                });
            });
        });
    </script>#}
    
    
    <script>
    document.addEventListener('DOMContentLoaded', function () {
        // Use event delegation for better performance in tables
        document.body.addEventListener('submit', function (event) {
            const form = event.target.closest('.payout-process-form');
            
            if (form) {
                const btn = form.querySelector('.payout-submit-btn');
                
                // 1. Disable immediately
                btn.disabled = true;

                // 2. Force visual change by overwriting the innerHTML 
                // This avoids CSS conflicts with classes like .d-none
                btn.innerHTML = '<i class="fa fa-refresh fa-spin"></i> Transferring...';
                
                // 3. Change color to indicate active state
                btn.classList.remove('btn-success');
                btn.classList.add('btn-warning');
                
                // 4. Ensure the style is applied even if AdminLTE has high specificity
                btn.style.opacity = "0.8";
                btn.style.cursor = "not-allowed";
            }
        });
    });
    
    </script>
{% endblock %}