@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="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