<!-- Iframe Payment Integration -->
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <h6 class="mb-0">
                    <i class="fas fa-credit-card me-2"></i>{{ __('store.payment_secure_payment') }}
                    <span class="badge bg-success ms-2">{{ __('store.payment_ssl_secured') }}</span>
                </h6>
            </div>
            <div class="card-body">
                <!-- Payment Summary -->
                <div class="payment-summary mb-4 p-3  rounded">
                    <div class="row">
                        <div class="col-md-6">
                            <h6>{{ __('store.payment_payment_details') }}</h6>
                            <p class="mb-1"><strong>{{ __('store.payment_invoice_number') }}:</strong> {{ $invoice->invoice_number }}</p>
                            <p class="mb-1"><strong>{{ __('store.payment_amount') }}:</strong> {{ number_format($invoice->total_amount, 2) }} {{ $invoice->currency->code }}</p>
                            <p class="mb-0"><strong>{{ __('store.payment_payment_method') }}:</strong> {{ $settings['display_name'] ?? 'External Payment' }}</p>
                        </div>
                        <div class="col-md-6 text-end">
                            <div class="security-badges">
                                <i class="fas fa-shield-alt text-success me-2"></i>
                                <small class="text-muted">{{ __('store.payment_secure_connection') }}</small>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Loading Indicator -->
                <div id="payment-loading" class="text-center py-5">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">{{ __('store.payment_loading') }}...</span>
                    </div>
                    <p class="mt-3">{{ __('store.payment_preparing_payment') }}...</p>
                </div>

                <!-- Payment Iframe Container -->
                <div id="payment-iframe-container" style="display: none;">
                    <div class="iframe-wrapper">
                        <iframe id="payment-iframe"
                                src=""
                                width="100%"
                                height="600"
                                frameborder="0"
                                scrolling="auto"
                                sandbox="allow-forms allow-scripts allow-same-origin allow-top-navigation"
                                style="border: 1px solid #ddd; border-radius: 0.375rem;">
                        </iframe>
                    </div>
                </div>

                <!-- Error Container -->
                <div id="payment-error" class="alert alert-danger" style="display: none;">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    <span id="error-message"></span>
                </div>

                <!-- Action Buttons -->
                <div class="d-flex justify-content-between mt-4">
                    <button type="button" class="btn btn-outline-secondary" onclick="cancelPayment()">
                        <i class="fas fa-times me-2"></i>{{ __('store.payment_cancel') }}
                    </button>
                    <button type="button" id="start-payment-btn" class="btn btn-primary" onclick="startPayment()">
                        <i class="fas fa-play me-2"></i>{{ __('store.payment_start_payment') }}
                    </button>
                    <button type="button" id="refresh-payment-btn" class="btn btn-warning" onclick="refreshPayment()" style="display: none;">
                        <i class="fas fa-redo me-2"></i>{{ __('store.payment_retry') }}
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Auto-start payment if enabled
    @if($settings['auto_start'] ?? true)
    setTimeout(startPayment, 1000);
    @endif
});

function startPayment() {
    const loadingDiv = document.getElementById('payment-loading');
    const iframeContainer = document.getElementById('payment-iframe-container');
    const errorDiv = document.getElementById('payment-error');
    const startBtn = document.getElementById('start-payment-btn');
    const refreshBtn = document.getElementById('refresh-payment-btn');

    // Show loading
    loadingDiv.style.display = 'block';
    iframeContainer.style.display = 'none';
    errorDiv.style.display = 'none';
    startBtn.style.display = 'none';
    refreshBtn.style.display = 'none';

    // Request payment URL from backend
    fetch('{{ route("store.payment.process", $invoice->id) }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': window.csrfToken
        },
        body: JSON.stringify({
            payment_type: 'external_iframe',
            invoice_id: {{ $invoice->id }}
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success && data.payment_url) {
            // Load payment in iframe
            const iframe = document.getElementById('payment-iframe');
            iframe.src = data.payment_url;

            loadingDiv.style.display = 'none';
            iframeContainer.style.display = 'block';

            // Listen for payment completion
            window.addEventListener('message', handlePaymentMessage, false);
        } else {
            showError(data.message || '{{ __("store.payment_initialization_failed") }}');
        }
    })
    .catch(error => {
        console.error('Payment initialization error:', error);
        showError('{{ __("store.payment_connection_error") }}');
    });
}

function refreshPayment() {
    startPayment();
}

function cancelPayment() {
    if (confirm('{{ __("store.payment_cancel_confirmation") }}')) {
        window.location.href = '{{ route("store.auth.invoices.details", $invoice->id) }}';
    }
}

function showError(message) {
    const loadingDiv = document.getElementById('payment-loading');
    const errorDiv = document.getElementById('payment-error');
    const refreshBtn = document.getElementById('refresh-payment-btn');

    loadingDiv.style.display = 'none';
    errorDiv.style.display = 'block';
    refreshBtn.style.display = 'inline-block';

    document.getElementById('error-message').textContent = message;
}

function handlePaymentMessage(event) {
    // Handle messages from payment iframe
    if (event.data && event.data.type === 'payment_complete') {
        if (event.data.status === 'success') {
            window.location.href = window.paymentRoutes.success;
        } else {
            window.location.href = window.paymentRoutes.failed;
        }
    }
}
</script>

<style>
.iframe-wrapper {
    position: relative;
    background: #f8f9fa;
    border-radius: 0.375rem;
    overflow: hidden;
}

#payment-iframe {
    background: white;
    transition: opacity 0.3s ease;
}

.security-badges {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

@media (max-width: 768px) {
    #payment-iframe {
        height: 500px;
    }

    .security-badges {
        justify-content: flex-start;
        margin-top: 1rem;
    }
}
</style>
