<!-- External Payment via iframe -->
<div class="text-center mb-4">
    <h5>{{ __('store.payment_external_payment') }}</h5>
    <p class="text-muted">{{ __('store.payment_external_payment_info') }}</p>
</div>

<form method="POST" action="{{ route('store.payment.process', $invoice->id) }}" data-payment-form="external-iframe">
    @csrf

    <div class="payment-iframe-container" style="min-height: 400px; border: 1px solid #ddd; border-radius: 8px;">
        <div class="text-center p-5">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">{{ __('store.payment_loading') }}</span>
            </div>
            <p class="mt-3">{{ __('store.payment_initializing_payment') }}</p>
        </div>
    </div>

    <button type="submit" class="btn btn-primary btn-lg w-100 mt-3">
        <i class="fas fa-credit-card me-2"></i>
        {{ __('store.payment_start_payment') }} - {{ $invoice->currency->format($invoice->total_amount) }}
    </button>
</form>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const form = document.querySelector('form[data-payment-form="external-iframe"]');
    const container = document.querySelector('.payment-iframe-container');

    if (form) {
        form.addEventListener('submit', function(e) {
            e.preventDefault();

            fetch(form.action, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': window.csrfToken,
                    'Content-Type': 'application/json',
                    'Accept': 'application/json'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success && data.iframe_url) {
                    // Create iframe
                    const iframe = document.createElement('iframe');
                    iframe.src = data.iframe_url;
                    iframe.style.width = '100%';
                    iframe.style.height = '400px';
                    iframe.style.border = 'none';
                    iframe.frameBorder = '0';

                    container.innerHTML = '';
                    container.appendChild(iframe);

                    // Hide submit button
                    form.querySelector('button[type="submit"]').style.display = 'none';
                } else {
                    throw new Error(data.message || window.translations?.errorOccurred || 'Error occurred');
                }
            })
            .catch(error => {
                console.error('Payment error:', error);
                container.innerHTML = `
                    <div class="alert alert-danger">
                        <i class="fas fa-exclamation-triangle"></i>
                        ${error.message || window.translations?.errorOccurred || 'Error occurred'}
                    </div>
                `;
            });
        });
    }
});
</script>