@extends('frontend.layouts.partials.default')
@section('title','Shopping Cart')
@section('main')

<div class="section">
    <div class="container">
        
        <hr>
        <div class="row pb-5 justify-content-center">

            <div class="col-12 text-center">
                <h4 class="pb-3 text-warning">Payment Details</h4>
                <p>Please note that we cannot accept paper check or wire transfer for this purchase</p>
            </div>
            <div class="col-12 col-md-4 pt-4 order-lg-2">
                <i class="fa fa-lock text-warning"> Secure Checkout</i>
                <p class="text-muted" style="font-size: 13px">Your payment information is encrypted before transaction. For your convenience Image souk will save your encrypted payment information for future services, however, you can manage your information in account settings.</p>
            </div>

                <div class="col-12 col-md-4 pt-4">
                    <form method="POST" action="{{route('user.payment.plan',$plan->plan_id)}}">
                    @csrf
                    
                    <h3 > <del>{{Priceformat($price)}}</del> {{Priceformat($offerprice)}}  </h3>
                    <h5 >Payment Via</h5>
                    <input type="radio" class="" name="payment_method" value="Foloosi" checked  > <label for="payment-method"> Credit/Debit Card(Foloosi )</label><br>
                    <input type="radio" class="" name="payment_method" value="Paypal" > <label for="payment-method"> Paypal</label>

                    <div class="row checkout">
                        <div class="col-6">
                                <p>First Name</p>
                                <input type="text" value="Vijay" class="form-control" name="first_name"  placeholder="Eg. Jone Smith">
                        </div>
                        <div class="col-6">
                                <p>Last Name</p>
                                <input type="text" value="Dhiman" class="form-control" name="last_name" >
                        </div>
                        <div class="col-12">
                                <p>Mobile / Phone</p>
                                <input type="number" value="8950357771" class="form-control" name="phone_number"  >
                        </div>
                        <div class="col-12">
                                <p>Street Address</p>
                                <input type="text" value="India" class="form-control" name="Street" >
                        </div>
                        <div class="col-6">
                                <p>City</p>
                                <input type="text" value="Chandigard" class="form-control" name="city" >
                        </div>
                        <div class="col-6">
                                <p>State</p>
                                <input type="text" value="Chandigard" class="form-control" name="state" >
                        </div>
                        <div class="col-6">
                                <p>Postal Code</p>
                                <input type="text" value="1323244" class="form-control" name="postal_code" >
                        </div>
                        <div class="col-6">
                                <p>Country</p>
                                <select name="country" class="form-control" id="country">
                                    @foreach (config('variables.contries') as $item)
                                        <option
                                         value="{{$item}}">
                                            {{$item}}
                                        </option>
                                    @endforeach
                                </select>
                        </div>
                        <div class="col-12 text-center pt-4">
                            <input type="submit" class="btn btn-warning" value="Process Order">
                        </div>
                    </div>

                    </form>

                    @if ($token ?? false)
                    <script type="text/javascript" src="https://www.foloosi.com/js/foloosipay.v2.js"></script> 
                    <script type="text/javascript">
                        var reference_token = "{{$token}}"
                        var options = {
                            "reference_token" : reference_token, 
                            "merchant_key" : "{{env('FOLOOSI_KEY')}}"
            
                        }
                        var fp1 = new Foloosipay(options);
                        fp1.open();
                        foloosiHandler(response, function (e) {
                            if(e.data.status == 'success'){
                                $.ajax({
                                        type : "POST",
                                        url : '/api/verigypaymentfoloosi',
                                        headers : {
                                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                            },
                                        data : {
                                            token:e.data.data.transaction_no,
                                            plan_id:{{$plan->plan_id}},
                                            user_id:{{session('user_id')}},
                                            buy_id:{{$buy_id}}
                                        },
                                        success : function(response)
                                        {
                                            if(response === true){
                                                window.location.replace('{{route('user.payment.success')}}');
                                            }
                                            // console.log(response);
                                            // 
                                        }
                                    });
                            }
                            if(e.data.status == 'error'){
                                console.error(e.data)
                            }
                            if(e.data.status == 'closed'){
                                console.error(e.data)
                            }
                        }); 
                    </script>
                    
                    @endif

                </div>

        </div>
    </div>
</div>

@endsection