@php
    $symbol = $admin_payment_setting['currency_symbol'] ?? $payment_setting['currency_symbol']?? $company_payment_setting['currency_symbol'] ?? 'Ksh';
    /*
    item=[
    'price'=>0,'class'=>'','id'=>1,
    ]
    */
@endphp
<div class="row">
    <div class="col-md-12">
        <div class="alert alert-info">Ensure you have enough funds in your mpesa to pay</div>    
        @if(isset($item))
            <h4>Total: <strong class="text-primary">{{ $symbol . ' ' . $item['price'] }}</strong></h4>
        @else
        <h6 class="text-warning">Testing with  <strong class="text-primary">{{ $symbol }} 1 /=</strong></h6>
        @endif
    </div>
    <div class="md-8 col-offest-2">
        <div class="input-group">
            <input type="tel" name="phone" id="mpesa_phone" class="form-control" placeholder="Enter phone number">
            <div class="input-group-btn">
                <button id="retry_btn" class="btn btn-info" type="button" onclick="retryPayment()" style="border-radius:0px">
                    Push Stk
                </button>
            </div>
        </div>
    </div>
    <div class="col-md-12">
    <hr/>
     <img class="img-responsive" src="https://vectorseek.com/wp-content/uploads/2024/02/Lipa-Na-Mpesa-Logo-Vector.svg-.png" 
     alt="Pay with mpesa" style="max-height:30px;max-width:200px;">

    </div>

</div>

@push('script-page')
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert2/11.23.0/sweetalert2.all.min.js" integrity="sha512-J+4Nt/+nieSNJjQGCPb8jKf5/wv31QiQM10bOotEHUKc9tB1Pn0gXQS6XXPtDoQhHHao5poTnSByMInzafUqzA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script type="text/javascript">
    let checkoutThread;
    
    function retryPayment(){
        let phone = $("#mpesa_phone").val();
        if(!phone || phone.length < 10){
            swal.fire({ icon:"warning", text:"Provide a valid phone number"});
            return;
        }

        $("#retry_btn").html('<i class="fa fa-spinner fa-spin"></i>');
        $.ajax({
            url:"{{route('softeria.mpesa.pay', [isset($item) ? $item['id'] : 0]).'?type='.($item['class']??'')}}&phone="+phone,
            success:function(data){
                if(data.success){
                    swal.fire({
                        icon:"success",
                        text:"Check your phone for a popup"
                    });

                    if(data.hasOwnProperty('id')){
                        checkoutThread = setInterval(() => checkStatus(data.id), 1000*6);
                        swal.fire({
                            title: 'Processing...',
                            text: 'Waiting for mpesa response...',
                            allowOutsideClick: false,
                            allowEscapeKey: false
                        });
                        swal.showLoading();
                    }
                }else{
                    swal.fire({
                        icon:"error",
                        text:data.message
                    });
                }
            },
            error:function(){
                swal.fire({
                    icon:"error",
                    text:"Something Went wrong"
                });
            },
            complete:function(){
                $("#retry_btn").html('Try Again');
            }
        });
    }

    function checkStatus(chechout_id){           
        $.ajax({
            url:"{{route('softeria.mpesa.status')}}/"+chechout_id,
            success:function(data){
                if(data.success){                 
                    swal.fire({ icon:"success", text:"Payment compete" });

                    setTimeout(() => {
                        if(data.hasOwnProperty('redirect')){
                            window.location.href = data.redirect;
                        }else{
                            window.location.reload();
                        }
                    }, 5000);
                }else{
                    swal.fire({ icon:"error", text:data.message });
                }

                clearInterval(checkoutThread);
                
            },
            error:function(){
            },
            complete:function(){
            }
        });
    }

</script>

<style>
.swal2-container {
    z-index: 999999
}
</style>
@endpush