@extends('storefront::public.layout')

@section('content')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <section class="order-complete-wrap">
        <div class="container">
            <div class="order-complete-wrap-inner">
                <div class="order-complete">
                    <h2>Please wait while we check invoice status</h2>
                </div>
            </div>
        </div>
    </section>


<script>
    $(document).ready(function(){
      
        function checkUrl() {
            const urlToCheck = "/api/v1/checkout/{{$order->id}}/payment/check"; 
            
            $.get(urlToCheck, function(res){
                if(res.status == 'canceled')
                {
                    window.location.href = '/checkout/{{$order->id}}/payment/failure';
                }
                else if(res.status != 'pending_payment')
                {
                    window.location.href = '/checkout/{{$order->id}}/payment/success';
                }
            }, 'json')
            
        }
    
        // Check once on page load
        checkUrl();
    
        // Then check every 5 seconds (5000 milliseconds)
        setInterval(checkUrl, 5000);
    });

</script>


@endsection 

@push('globals')
    @vite([
        'modules/Storefront/Resources/assets/public/sass/pages/checkout/complete/main.scss',
    ])
@endpush