{#{{ dump(object.id) }}#}
{#{% if object.status is defined and  object.status == 'approved'%}
    <div class="well">
        <h4 class="box-title">Process this Approved Payout Request</h4>
        <form method="POST" action="{{ path('process_funeral_donation_payout_payment') }}" class="payout-form">
        <input type="hidden" name="payout_id" value="{{ object.payout.id }}">
        <input type="hidden" name="donation_id" value="{{ object.id }}">
        <input type="hidden" name="commission_name" value="FUNERAL_DONATION_COMMISSION">
        <input type="hidden" name="_token" value="{{ csrf_token('process_payout_' ~ object.payout.id) }}">
                                                    
        <button type="submit" class="btn btn-success">
        <i class="fa fa-credit-card"></i> Process Payout
        </button>
    </form>
    </div>

{% else %}
    <h4 class="box-title" >This Donation payout request needs to be approved before payout can be made.</h4>
{% endif  %}#}
{#{{ dump( object.status)  }}#}
{% if object.status is defined and object.status == 'approved' %}
    <div class="well">
        <h4 class="box-title">Process this Approved Payout Request</h4>

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

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

                <span id="payout-processing-content" class="d-none">
                    <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
                    Transferring Funds... Please Wait.
                </span>
            </button>
        </form>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const payoutForm = document.getElementById('payout-process-form');
            const payoutBtn = document.getElementById('payout-submit-btn');
            const originalContent = document.getElementById('payout-btn-content');
            const processingContent = document.getElementById('payout-processing-content');

            if (payoutForm && payoutBtn) {
                payoutForm.addEventListener('submit', function () {
                    // 1. Disable button to prevent multiple clicks
                    payoutBtn.setAttribute('disabled', 'disabled');
                    payoutBtn.classList.remove('btn-success');
                    payoutBtn.classList.add('btn-warning'); // Visual cue that something is happening

                    // 2. Toggle visibility
                    originalContent.classList.add('d-none');
                    processingContent.classList.remove('d-none');

                    console.log('Payout processing initiated...');
                });
            }
        });
    </script>



{% else %}
    {% if  object.status is defined and object.status == 'completed' %}
        <div class="alert alert-info" style="margin:10px;">
            <h4 class="box-title" >
                <i class="fa fa-info-circle"></i> Payout Completed.
            </h4>
        </div>
    {% else %}

        <div class="alert alert-info" style="margin:10px;">
            <h4 class="box-title" style="margin:0;">
                <i class="fa fa-info-circle"></i> This Donation payout request needs to be approved before payout can be made.
            </h4>
        </div>
    {% endif %}
{% endif %}

<style>
    /* Ensure the spinner is visible and aligned */
    .spinner-border-sm {
        width: 1rem;
        height: 1rem;
        border-width: 0.2em;
        vertical-align: middle;
        margin-right: 5px;
    }
    .d-none {
        display: none !important;
    }
</style>