@include('includes.main.header')
<div class="gallery-content">
	 <div class="container" style="background-color:white; opacity:0.9;">
		<div class="gallery-content-head text-left">
			<h3>PAYMENT CONFIRMATION</h3>
                        @include('includes.main.top-header')
                        
		</div>
			<div class="section group">
				<div class="col-xs-12 no-padding margin-t-5">
                                    
                                    <div class="col-xs-12 margin-t-10 ">
                                        <h3 class="hcenter" id="state-pending">
                                            Processing Payment ...
                                        </h3>
                                        <h3 class="hcenter" id="case-success" style="display:none;background-color:green;padding:15px">The payment was successfully done! Thank you for your contribution to SUPPORTER 2.0 development! Let's enjoy football!</h3>
                                        <h3 class="hcenter" id="case-danger" style="display:none;background-color:salmon;padding:15px">The payment has not been made! Please try again or choose another payment option. Thank you!</h3>
                                        

                                        <p class="hcenter">Your Order ID : {{$orderID}}</p>
                                       
                                    </div>
                                </div>
                        </div>
         </div>
</div>

<script>
    var count = 0;
    var i = 0;
    $(document).ready(function(){
        
        setTimeout(
        function() 
        {
            for(;i<3;i++)
            {
                console.log(i);
                var res = checkPaymentStatus();
                console.log(i);
            }
            
            return;
            
         }, 2000);
    });
    
    function checkPaymentStatus()
    {
        $.get('/api/v1/mobilpay/check/{{$orderID}}', function(){
           
            return showAppropriate('Yes')
        },'json').fail(function(xhr) {
                return showAppropriate('No')
            },'json');
    }
    
    function showAppropriate(res)
    {
        if(res == 'Yes')
        {
           
            $('#case-success').show();
            $('#state-pending').hide();
            i = 3;
            return;
        }
        else
        {
           
            if(count != 2)
            {
                i = 0;
                count++;
            }
            else
            {
                 $('#case-danger').show();
                $('#state-pending').hide();
            }
        }
    }
</script>
@include('includes.main.footer')