@extends('tablar::page')

@section('content')
<style>
    #checkout-container {
        height: 900px;
        width: 100%;
        margin-top: 20px;
        overflow: hidden;
    }
    #checkout-container iframe {
        width: 100% !important;
        height: 100% !important;
        border: none !important;
    }
</style>
<div class="page-header d-print-none">
    <div class="container-xl">
        <div class="row g-2 align-items-center">
            <div class="col">
                <h2 class="page-title">Checkout</h2>
            </div>
        </div>
    </div>
</div>
<div class="page-body">
    <div class="container-xl">
        <div class="card">
            <div id="payment-error-container"></div>
            <div class="card-body">
                <div id="checkout-container">
                    <div class="text-center">
                        <p>Loading secure checkout...</p>
                        <div class="spinner-border" role="status"></div>
                    </div>
                </div>
                <div id="fallback-container" class="mt-4 text-center" style="display: none;">
                    <div class="hr-text">Still here?</div>
                    <p class="text-muted">If you have already completed your payment but the page hasn't redirected, please click the button below.</p>
                    <a id="verify-button" href="#" class="btn btn-info">
                        <i class="ti ti-shield-check me-2"></i>Verify Payment Status
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://checkout.north.com/checkout.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', async () => {
        const bidderId = "{{ $bidder->idbidders }}";
        const csrfToken = "{{ csrf_token() }}";

        try {
            const response = await fetch(`/north/session/${bidderId}`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrfToken
                }
            });

            const data = await response.json();
            console.log('North Session Response:', data);

            if (data.error) {
                document.getElementById('checkout-container').innerHTML = `<div class="alert alert-danger">${data.error}</div>`;
                return;
            }

            const sessionToken = data.sessionToken;
            if (!sessionToken) {
                document.getElementById('checkout-container').innerHTML = `<div class="alert alert-danger">Invalid session token received.</div>`;
                return;
            }

            // Set up fallback button
            const verifyUrl = `/north/verify/${bidderId}?sessionToken=${sessionToken}`;
            const verifyButton = document.getElementById('verify-button');
            const fallbackContainer = document.getElementById('fallback-container');
            verifyButton.href = verifyUrl;
            
            // Show fallback after 5 seconds to give user a manual way out if auto-redirect fails
            setTimeout(() => {
                fallbackContainer.style.display = 'block';
            }, 5000);

            await checkout.mount(sessionToken, 'checkout-container');

            const handleCompletion = (result) => {
                console.log('Payment complete event received:', result);
                window.location.href = verifyUrl;
            };

            // Register standard completion events
            checkout.onPaymentComplete(handleCompletion);
            if (typeof checkout.onPaymentSuccess === 'function') {
                checkout.onPaymentSuccess(handleCompletion);
            }

            // Handle errors
            if (typeof checkout.onPaymentError === 'function') {
                checkout.onPaymentError((error) => {
                    console.error('Payment Error:', error);
                    const errorDiv = document.createElement('div');
                    errorDiv.className = 'alert alert-danger alert-dismissible';
                    errorDiv.innerHTML = `
                        <div class="d-flex">
                            <div><i class="ti ti-alert-triangle me-2"></i></div>
                            <div>
                                <strong>Payment Error:</strong> ${error.message || 'An error occurred during payment.'}
                            </div>
                        </div>
                        <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
                    `;
                    document.getElementById('payment-error-container').prepend(errorDiv);
                });
            }

        } catch (error) {
            console.error('Checkout Error:', error);
            document.getElementById('checkout-container').innerHTML = '<div class="alert alert-danger">An error occurred while initializing checkout. Please try again.</div>';
        }
    });
</script>
@endsection
@push('js')
@endpush