@extends('components.main')
<script src="https://www.2checkout.com/checkout/api/2co.min.js"></script>

<script>
    // Called when token created successfully.
var successCallback = function(data) {
    var myForm = document.getElementById('myCCForm');

    // Set the token as the value for the token input
    myForm.token.value = data.response.token.token;

    // IMPORTANT: Here we call `submit()` on the form element directly instead of using jQuery to prevent and infinite token request loop.
    myForm.submit();
};

// Called when token creation fails.
var errorCallback = function(data) {
    if (data.errorCode === 200) {tokenRequest();} else {alert(data.errorMsg);}
};

var tokenRequest = function() {
    // Setup token request arguments
    var args = {
        sellerId: config('2checkout.sellerId'),
        publishableKey: config('2checkout.publish'),
        ccNo: $("#ccNo").val(),
        cvv: $("#cvv").val(),
        expMonth: $("#expMonth").val(),
        expYear: $("#expYear").val()
    };

    // Make the token request
    TCO.requestToken(successCallback, errorCallback, args);
};

$(function() {
    // Pull in the public encryption key for our environment
    TCO.loadPubKey();

    $("#myCCForm").submit(function(e) {
        // Call our token request function
        tokenRequest();

        // Prevent form from submitting
        return false;
    });
});
</script>

<style>
    body {
        position: relative;
        min-height: 100vh;
        padding-bottom: 13%
    }

    footer {
        /* position: relative; */
        position: absolute;
        bottom: 0px;
        rigth: 0px;
        width: 100%;
    }
</style>
@section('content')

<section class="login">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-10">
                <div class="row align-items-center">
                    <div class="col-md-6">
                        <img src="{{asset('main_site/img/character.png') }}" alt="">
                    </div>

                    <div class="col-md-6">
                        <div class="login-form">
                            {{-- <h1>@lang('forms.payment_title')</h1> --}}
                            @include('components.responses')

                            <form id="payment-submit" action="{{ route('pay.paypal') }}" method="POST">
                                @csrf
                             <input type="number" name="plan_id" hidden value="{{ $plan->id }}">
                             <input type="text" hidden id="pay_data" name="data">
                                <div id="paypal-button-container"  style="width: 100%;margin:auto"></div>
                            </form>

                            {{-- <form id="myCCForm" action="{{ route('pay.post') }}" method="post">
                                @csrf
                                <input id="token" name="token" type="hidden" value="">
                                <input type="hidden" name="plan" value="{{$plan }}">
                                <div class="row">

                                    <div class="col-md-12">
                                        <input id="ccNo" type="text" size="20" value="" autocomplete="off" required
                                            placeholder="@lang('forms.card_number')" />

                                    </div>

                                    <div class="col-md-4">
                                        <input type="text" size="2" id="expMonth" required
                                            placeholder="@lang('forms.exp_m')" />

                                    </div>
                                    <h1> / </h1>
                                    <div class="col-md-4">
                                        <input type="text" size="2" id="expYear" required
                                            placeholder="@lang('forms.exp_y')" />

                                    </div>
                                    <div class="col-md-3">
                                        <input id="cvv" size="4" type="text" value="" autocomplete="off"
                                            placeholder="cvv" required />

                                    </div>



                                    <div class="col-md-12">
                                        <button type="submit">Subscribe</button>
                                    </div>

                                </div>
                            </form> --}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection
@section('custom-script')
<script src="https://www.paypal.com/sdk/js?client-id=sb&currency=USD"></script>

<script>
    // Render the PayPal button into #paypal-button-container
    paypal.Buttons({

        style: {
            layout: 'horizontal',
            color:   'blue',
            shape:   'pill',
            label:   'paypal',
            height:55,
            
        },
        redirect_urls:{
            return_url:'http://localhost:3000/process',
            cancel_url:'http://localhost:3000/cancel'
            },
        // Set up the transaction
        createOrder: function(data, actions) {
            // console.log($('#username').val());
            // if($('#username').val() == 0 )
            // {
            //     alert('dd');
            // }
            return actions.order.create({
                purchase_units: [{
                    amount: {
                        value: '{{ $plan->price }}'
                    }
                }]
            });
        },

        // Finalize the transaction
        onApprove: function(data, actions) {
            return actions.order.capture().then(function(details) {
                // Show a success message to the buyer
                // console.log(details);
                document.getElementById('pay_data').value = JSON.stringify(details);
                document.getElementById('payment-submit').submit()

                // alert('Transaction completed by ' + details.payer.name.given_name + '!');
            });
        }


    }).render('#paypal-button-container');
</script>
@endsection