@extends('layouts.app')

@section('content')
<style>
    #checkout-container {
        min-height: 1600px;
        width: 100%;
        margin-top: 20px;
    }
    
    /* Ensure the iframe inside the container takes full width */
    #checkout-container iframe {
        width: 100% !important;
        min-height: 600px !important;
    }
</style>
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default">
                <div class="panel-heading">Checkout for Bidder #{{ $bidder->bidder_assigned_number }}</div>

                <div class="panel-body">
                    <h4>Total Amount Due: ${{ number_format($total_cost, 2) }}</h4>
                    <hr>
                    
                    <div id="checkout-container">
                        <div class="text-center">
                            <p>Loading secure checkout...</p>
                            <div class="spinner-border" role="status">
                                <span class="sr-only">Loading...</span>
                            </div>
                        </div>
                    </div>

                    <hr>
                    <div class="text-center">
                        <a href="/mywinnings?bidder_number={{ $bidder->bidder_assigned_number }}" class="btn btn-default">Cancel and Return</a>
                    </div>
                </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 {
            // Create a checkout session
            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 from server.</div>`;
                return;
            }

            // Initialize North Checkout
            // The global 'checkout' object is provided by checkout.js
            console.log('Mounting checkout with token:', sessionToken);
            await checkout.mount(sessionToken, 'checkout-container');

            // Handle completion
            checkout.onPaymentComplete((result) => {
                // Redirect to verify the payment on the server
                window.location.href = `/north/verify/${bidderId}?sessionToken=${sessionToken}`;
            });

        } 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
