@php
 
    $paymentData = $getPaymentUrl();
@endphp
<div>
    
        
    
    @if($butt)
        <button type="button" id="btn-initiate-payment-{{ $paymentData['encodedId'] }}" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#paymentConfirmModal-{{ $paymentData['encodedId'] }}">
        <span wire:loading.remove>Pay Now</span>
        <span wire:loading>Processing...</span>
        </button>    
    @else
        <div class="alert alert-info" role="alert">
            A payment request has already been initiated. You can initiate another payment after {{ $blocktime }} minutes.
        </div> 
    @endif    
</div>

<!-- Bootstrap Confirmation Modal -->
<div class="modal fade" id="paymentConfirmModal-{{ $paymentData['encodedId'] }}" tabindex="-1" aria-labelledby="paymentConfirmLabel-{{ $paymentData['encodedId'] }}" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="paymentConfirmLabel-{{ $paymentData['encodedId'] }}">Confirm Payment</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                Are you sure you want to proceed with the payment?
            </div>
            <div class="modal-footer">
                 
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
      
                
                <form id="payment-form-{{ $paymentData['encodedId'] }}"
                    method="POST"
                    action="{{ $paymentData['route'] }}"
                    style="display:none">
                    @csrf
                    <input type="hidden" name="encodedId" value="{{ $paymentData['encodedId'] }}">
                    <input type="hidden" name="data" value="{{ $paymentData['data'] }}">
                </form>

                <a href="#" class="btn btn-primary" onclick="document.getElementById('paymentLoaderOverlay-{{ $paymentData['encodedId'] }}').classList.remove('d-none'); document.getElementById('payment-form-{{ $paymentData['encodedId'] }}').submit(); return false;">
                Yes
                </a>
            </div>
        </div>
    </div>
</div>

<div id="paymentLoaderOverlay-{{ $paymentData['encodedId'] }}" class="d-none">
    <div class="position-fixed top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center"
         style="background-color: rgba(0,0,0,0.45); z-index: 2000;">
        <div class="d-flex flex-column align-items-center">
            <div class="spinner-border text-light" role="status" style="width: 4rem; height: 4rem;">
                <span class="visually-hidden">Loading...</span>
            </div>
            <p class="mt-3 fs-5 fw-medium text-white">Processing, please wait...</p>
        </div>
    </div>
</div>

{{-- Direct link avoids Livewire script execution issues on re-render --}}