@extends('client.layout.master')
@section('content')
    <style>
        input::placeholder {
            font-size: small;
            padding: 10px;
        }

        textarea::placeholder {
            font-size: small;
            padding: 10px;
        }

    </style>
    <section id="subheader" class="text-light memberbg">
        <div class="center-y relative text-center">
            <div class="container">
                <div class="row">

                    <div class="col-md-12 text-center">
                        <!-- <ul class="fly-in-text hidden">
                                                                        <li>M</li>
                                                                        <li>E</li>
                                                                        <li>M</li>
                                                                        <li>B</li>
                                                                        <li>E</li>
                                                                        <li>R</li>
                                                                        <li>&nbsp;</li>
                                                                        <li>S</li>
                                                                        <li>I</li>
                                                                        <li>G</li>
                                                                        <li>N</li>
                                                                        <li>U</li>
                                                                        <li>P</li>
                                                                    </ul> -->
                        {{-- <p>Sign Up</p> --}}
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>
        </div>
    </section>
    <section id="section-highlight" class="text-light bk-color">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-5 offset-md-1 wow fadeInLeft animated animated " data-wow-delay="0s"
                    style="background-size: cover; visibility: visible; animation-delay: 0s; animation-name: fadeInLeft;">

                    <h2>
                        The Enterprise Portal
                    </h2>
                    <h6>
                        <p>The Enterprise Portal is an interactive tool to guide and facilitate member developments. The
                            portal offers five (5) databases in total. Four (4) databases for funding; Canada, USA, UK, and
                            Australian grants / loans. One (1) databases for tools and resources; over 1900 templates for
                            contracts and agreements. The Enterprise Portal offers a professional, user-friendly,  business
                            plan builder which allows members and consultants to work together to completion. Lastly, the
                            portal provides access to our application workshop where members can work with advisors to write
                            the perfect grant / loan application. Members have the ability to conduct their own research
                            within the portal, however, Enterprise Canada's professionals will generate reports by request
                            with up to date results disclosing government grants / loans, all included in your membership.
                        </p>
                    </h6>
                </div>
                <div class="col-lg-6 d-none d-lg-block d-xl-block text-center wow fadeInRight animated animated"
                    data-wow-delay="0s"
                    style="background-size: cover; visibility: visible; animation-delay: 0s; animation-name: fadeInRight;">
                    <img class="relative img-fluid" src="{{ asset('client/images/logo.svg') }}" alt="">
                </div>
            </div>
        </div>
        </div>
    </section>
    {{-- <section aria-label="section" data-bgcolor="#f0f4fd">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-md-5 idk text-center">
                <h3>About the StartUp Portal</h3>
                <p>The Startup Portal is a simple platform for starting your own small business. It contains all the
                    professional tools every entrepreneur needs to evolve their idea into a full-fledged business. Why
                    choose Canada Startups?</p>
            </div>
            <div class="col-md-2 text-center"> <i class="fa fa-refresh  text-dark" style="font-size: 150px"></i></div>
            <div class="col-md-5 idk text-center">
                <h3>Membership Details</h3>
                <p>To access the Startup Portal, fill out the Secure Checkout form below. Your Username and Password,
                    along
                    with your receipt and instructions on how to access the Startup Portal will be sent to the email
                    address
                    you provide.</p>
            </div>
        </div>
    </div>
</section> --}}


    <section class="section-title">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-6 text-center">
                    <!-- <i class="icon-big fa fa-rocket bg-color text-light"></i> -->
                    <img class="relative img-fluid ft-font" src="{{ asset('client/images/dash.jpeg') }}"
                        alt="" width="60%">
                    <img class="relative img-fluid ft-font" src="{{ asset('client/images/dash2.jpeg') }}"
                        alt="" width="60%">
                </div>
                <div class="col-md-6">
                    <h2 class="mb-1">The Enterprise Portal</h2>
                    <p class=" myDIV">
                        The Enterprise Portal powered by Enterprise Canada is an interactive cloud-based platform
                        designed
                        to
                        support entrepreneurs across all industries and sectors nationwide. Our experienced
                        professionals
                        use the portal to guide members end-to-end through:

                    </p>
                    <button class="btn btn-primary" id="Show">Show Details</button>
                    <button class="btn btn-primary" id="Hide">Hide Details</button>
                    <ul id="List" class="mt-2">
                        <li>Ideas & concepts</li>
                        <li>Strategies</li>
                        <li>Creating developmental roadmaps</li>
                        <li>Business plans</li>
                        <li>Government grants / loans </li>
                        <!--<li>Private investments</li>-->
                        <!--<li>Public funding and donations</li>-->
                        <!--<li>ICO and Cryptocurrency  investments</li>-->
                        <!--<li>TSXV/ TSX launches</li>-->
                        <li>Research & Development </li>
                        <li>Establishing parameters</li>
                        <li>Protecting inventions, products and services</li>
                        <li>Identifying and obtaining permits</li>
                        <li>Defining value propositions</li>
                        <li> Commercialization</li>
                        <li>Mergers & Acquisitions </li>
                        <li>Provincial, national and global expansions</li>
                        <li>Mentorship; professional & personal growth</li>
                    </ul>
                </div>

            </div>
        </div>
    </section>
    <section id="section-highlight " class="text-light bk-color ft-font">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-6 text-white">
                    <h1 class="mb-1">Members</h1>
                    <p>
                        All members have both a junior and senior consultant available throughout their membership to
                        support progress and developments. 
                    </p>

                </div>

                <div class="col-md-6 text-center">
                    <img class="relative img-fluid" src="{{ asset('client/images/facea.jpeg') }}" alt="" width="60%">
                </div>
            </div>
        </div>
    </section>
    <section class="ft-font">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-6 text-center">
                    <img class="relative img-fluid" src="{{ asset('client/images/bussnss.jpeg') }}" alt=""
                        width="60%">
                </div>
                <div class="col-md-6">
                    <h2 class="mb-1">Business Plans</h2>
                    <p>
                        Our business plan builder is user-friendly and takes our members step-by-step to completion. Our
                        team of professionals will review and make suggested revisions to your business plan.
                    </p>
                </div>
            </div>
        </div>
    </section>
    <section id="section-highlight" class="text-light bk-color ft-font">
        <div class="container">
            <div class="row align-items-center">

                <div class="col-md-6 text-white">
                    <h2 class="mb-1">User Choices</h2>
                    <p>
                        Members have the choice of having Enterprise Canada apply on their behalf for $34.99 / application or applying directly to government funding programs, private financing, and more…
                    </p>
                </div>
                <div class="col-md-6 text-center">
                    <img class="relative img-fluid" src="{{ asset('client/images/userchoi.jpeg') }}" alt="" width="60%">
                </div>
            </div>
        </div>
    </section>
    <section aria-label="section">
        <div class="container">
            <div class="row">
                <div class="col-lg-7 mb-sm-30">
                    <h3>Membership Sign Up </h3>
                    <form id="uu2579u3u45u2" method="POST" action="{{ route('stripe.post') }}"
                        class="card-form mt-3 mb-3">
                        @if (session('success'))
                            <div class="alert alert-success">{{ session('success') }}</div>
                        @endif
                        @if (session('errors'))
                            <div class="alert alert-danger">Input Validation Errors!</div>
                        @endif
                        @csrf
                        <div class="row">
                            <div class="form-group mb-3 col-md-6">
                                <input type="text" name="first_name" id="first_name" class="form-control" placeholder="First Name"
                                    required>
                                <span class="text-danger" id='first_name'>{{ $errors->first('first_name') }}</span>
                            </div>

                            <div class="form-group mb-3 col-md-6 ">
                                <input type="text" name="last_name" class="form-control" placeholder="Last Name" required>
                                <span class="text-danger" id='last_name'>{{ $errors->first('last_name') }}</span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group mb-3 col-md-12">
                                <input type="email" name="email" id="check_email" class="form-control" placeholder="Email"
                                    required>
                                <span class="text-danger" id='email'>{{ $errors->first('email') }}</span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group mb-3 col-md-6">
                                <input type="number" name="phone_number" onchange="uu3u52d9u4();" id="phone_number1" autocomplete="off" class="form-control" placeholder="Phone Number"
                                    required>
                                <span class="text-danger"
                                    id='phone_number'>{{ $errors->first('phone_number') }}</span>
                            </div>
                            <div class="form-group mb-3 col-md-6">
                                <select id="province_input" class="form-control" name="province" required>


                                    <option value="AB">Alberta</option>
                                    <option value="BC">British Columbia</option>
                                    <option value="MB">Manitoba</option>
                                    <option value="NB">New Brunswick</option>
                                    <option value="NL">Newfoundland and Labrador</option>
                                    <option value="NS">Nova Scotia</option>
                                    <option value="ON">Ontario</option>
                                    <option value="PE">Prince Edward Island</option>
                                    <option value="QC">Quebec</option>
                                    <option value="SK">Saskatchewan</option>
                                    <option value="NT">Northwest Territories</option>
                                    <option value="NU">Nunavut</option>
                                    <option value="YT">Yukon</option>

                                </select>
                                <span class="text-danger" id='province'>{{ $errors->first('province') }}</span>
                            </div>

                        </div>
                        <div class="spacer-half"></div>
                        <h4>Payment Information</h4>

                        <input type="hidden" name="payment_method" class="payment-method">

                        <div class="row">
                            <div class="form-group mb-3 col-md-6">
                                <input type="text" id="card_name" autocomplete="off" name="card_name" class="form-control"
                                    placeholder="Card Holder Name" onchange="uu3u52d9u4();" value="" required>

                            </div>
                            <div class="form-group mb-3 col-md-6">
                                <div id="card_number"></div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col-md-6">
                                <div id="card_expiry"></div>
                            </div>
                            <div class="form-group col-md-6">
                                <div id="card_cvc"></div>
                            </div>
                        </div>

                        <a id="showit">Have Discount Coupon?</a>
                        <div class="row">
                            <div class="form-group mb-3 col-md-12" id="hideit">
                                <input type="text" id="coupon_code" class="form-control" placeholder="Coupon"
                                    name="coupone" onchange="checkToken(this.value);">
                                <span class="text-danger" id="coupone_error"></span>
                            </div>
                        </div>

                        <div class="row mt-4 text-white blockquote bk-color padding40 box-rounded mb30">
                            <div class="col-md-12">
                                <div class="row">
                                    <div class="col-md-6">
                                        <h6>Membership Fee:</h6>
                                    </div>

                                    <div class="col-md-6 text-right">
                                        <h6 id="ori">${{ $plan['prices'][0]['price'] / 100 }}</h6>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <h6>Tax:</h6>
                                    </div>

                                    <div class="col-md-6 text-right">
                                        <h6 id="txi">0%</h6>
                                    </div>
                                </div>
                                <div class="row mt-1">
                                    <div class="col-md-6 ">
                                        <h6>Total: </h6>
                                    </div>
                                    <div class="col-md-6 text-right">
                                        <h6 id='pri'>${{ $plan['prices'][0]['price'] / 100 }}</h6>
                                    </div>
                                </div>
                            </div>
                        </div>
                
                        <div class="text-danger" id="card-errors" role="alert"></div>
                        <div class="row md-2">
                            <div class="col-sm-12">
                                <img class="img-fluid" src="{{ asset('client/images/sqa.png') }}" alt="" style="height:50px" width='100%'>
                            </div>
                       </div>
                        <p>
                            <div class="g-recaptcha" data-sitekey="{{ env('NOCAPTCHA_SITEKEY') }}"></div>
                            <span class="text-danger">{{ $errors->first('g-recaptcha-response') }}</span>
                        </p>
                        <button type="submit" class="btn btn-primary mt-2">
                            Purchase
                        </button>

                    </form>
                </div>
                <div class="col-lg-5 text-white">
                    <div class="padding40 box-rounded mb30 text-left bk-color">
                        <address class="s1">
                            <span>
                                <h3 class="text-white">Annual Membership Includes </h3>
                            </span>
                            <ul>
                                <li>
                                    <div class="bullet-text">Access to over 2000 government, private and public funding
                                        programs in Canada, United States of America, United Kingdom and Australia.</div>
                                </li>
                                <li>
                                    <div class="bullet-text">Access to our business plan builder to complete a
                                        professional business plan and secure funding.</div>
                                </li>
                                <li>
                                    <div class="bullet-text">Access to over 1900 templates for contracts and agreements
                                    </div>
                                </li>
                                <li>
                                    <div class="bullet-text">Access to our interactive Application Workshop for assisted
                                        grant writing</div>
                                </li>
                                <li>
                                    <div class="bullet-text">Reports generated upon request disclosing relevant funding
                                        /
                                        financing sources.</div>
                                </li>
                                <li>
                                    <div class="bullet-text">Updates on newly released grants / loans</div>
                                </li>
                                <li>
                                    <div class="bullet-text">Assistance with applications</div>
                                </li>
                                <li>
                                    <div class="bullet-text">Assistance with obtaining permits </div>
                                </li>
                                <li>
                                    <div class="bullet-text">Access to business consultants and expert support via phone
                                        and email.</div>
                                </li>
                                </small>
                            </ul>
                        </address>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('script')
    <script>
        $('#hideit').hide()
        $('#showit').on('click', function() {
            $('#hideit').slideToggle();
        });
    </script>
    {{-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> --}}
    <script src="https://js.stripe.com/v3/"></script>
    <script>
        $(document).on('ready', function() {
            $('#card_name').val('');
            $('#phone_number1').val('');
            $('#province_input').on('change', function() {

                checkTex($(this).val());
            });

            $('#province_input').trigger('change');

        });



        var price = "{{ $plan['prices'][0]['price'] }}";
        var default_price = "{{ $plan['prices'][0]['price'] }}";

        var check_mail = false;
        var intent;
        let stripe = Stripe("{{ env('STRIPE_KEY') }}")
        let elements = stripe.elements();
        const cardNum = elements.create('cardNumber');
        const cardExpiry = elements.create('cardExpiry');
        const cardCvc = elements.create('cardCvc');
        cardNum.mount('#card_number');
        cardExpiry.mount('#card_expiry');
        cardCvc.mount('#card_cvc');

        function stripeProcess() {
            let paymentMethod = null
            $('.card-form').on('submit', function(e) {
                $('button.pay').attr('disabled', true)
                if (paymentMethod) {
                    return true
                }
                stripe.confirmCardSetup(
                    intent, {
                        payment_method: {
                            card: cardNum,
                            billing_details: {
                                name: $('#card_name').val()
                            }
                        }
                    }
                ).then(function(result) {
                    //console.log(result);
                    if (result.error) {
                        $('#card-errors').text(result.error.message)
                        $('button.pay').removeAttr('disabled')
                    } else {
                        paymentMethod = result.setupIntent.payment_method
                        $('.payment-method').val(paymentMethod)
                        $('.card-form').submit()
                    }
                })
                return false
            })

        }


        function uu3u52d9u4() {

            var th = gid('uu2579u3u45u2');

            var span = th.getElementsByTagName('span');
            for (let i = 0; i < span.length; i += 1) {

                span[i].innerHTML = "";
            }

            var data = {};
            for (var i = 0; i < 6; i++) {
                if (th[i].name != '_token') {
                    data[th[i].name] = th[i].value;
                }
            }


            $.ajax({
                url: "{{ route('user.register_process') }}",
                method: 'POST',
                data: {
                    first_name: data.first_name,
                    last_name: data.last_name,
                    email: data.email,
                    phone_number: data.phone_number,
                    province: data.province,
                    _token: '{{ csrf_token() }}',
                    u1a1u8: 'u1a1u8',
                },
                success: response => {
                    console.log(response);

                    if (response.message) {
                        $('#card-errors').text(response.message);
                        if(!response.error_subcription){
                            $('#card_name').val('');
                            $('#phone_number1').val('');
                        }

                        if (response.url) {
                            //
                        }


                    } else if (response.errors) {

                        $('#card_name').val('');
                        $('#phone_number1').val('');
                        $.each(response.errors, function(error, messages) {
                            gid(error).innerHTML = messages[0];
                        })
                    }

                    if (response.error_subcription) {
                        $('#check_email').attr('disabled', true);
                        //intent=null;
                        //console.log(response);
                        if(!response.updated_at){
                            intent = response.intent.client_secret;
                            stripeProcess();
                            $("#card_name").removeAttr("onchange")
                            $("#phone_number1").removeAttr("onchange")
                        }
                        $('#card-errors').text('');
                    }

                },
                error: err => {
                    $('#card_name').val('');
                    $('#phone_number1').val('');
                    console.log(err);
                }
            });



        }

         var new_price1=0;
        function checkToken(val) {

            getData('{{ route('check.coupone', 'coupon') }}'.replace('coupon', val));

            req.onreadystatechange = function() {

                if (req.readyState == 4 && req.status == 200) {

                    let data = JSON.parse(req.response);

                    if (data.valid) {
                        var checktax = checkTex($('#province_input').val());
                        //alert(checktax);
                        if (data.amount_off) {
                            pric =((default_price - data.amount_off) / 100).toFixed(2);
                            // prict = Math.ceil((price - data.amount_off) / 100).toFixed(2);
                            new_price1 = (pric * (1 + 1 - parseFloat(1 - checktax / 100))) / 100;
                            //alert(new_price)
                            prict =(new_price1*100).toFixed(2);
                            //price = '$'+(data.amount_off / 100)+' $'+price;
                            gid('pri').innerHTML = '$'+prict;
                            gid('ori').innerHTML = '$' + pric;
                        }
                         else {
                            pric =((default_price * parseFloat(1 - data.discount / 100)) / 100).toFixed(2);
                            // prict = Math.ceil((price * parseFloat(1 - data.discount / 100)) / 100).toFixed(2);
                            //alert(pric)
                            new_price1 = (pric * (1 + 1 - parseFloat(1 - checktax / 100))) / 100;

                             prict =(new_price1*100).toFixed(2);

                            //price = data.discount+'% $'+price;
                            pric = '$' + pric;
                            gid('pri').innerHTML = '$'+prict;
                            gid('ori').innerHTML = pric;
                        }
                        gid("coupone_error").innerHTML = "";
                    } else {
                        $('#coupon_code').val('');
                        gid("coupone_error").innerHTML = "Invalid Coupon!";
                        gid('pri').innerHTML = '$'+(price/100).toFixed(2);
                        gid("ori").innerHTML = '$' + (default_price / 100).toFixed(2);
                    }



                }
            }


        }

        function checkTex(n) {
            var tax;

            switch (n) {
                case "AB":
                    tax = 5;
                    break;
                case "BC":
                    tax = 5;
                    break;
                case "MB":
                    tax = 5;
                    break;
                case "NB":
                    tax = 15;
                    break;
                case "NL":
                    tax = 15;
                    break;
                case "NS":
                    tax = 15;
                    break;
                case "ON":
                    tax = 13;
                    break;
                case "PE":
                    tax = 15;
                    break;
                case "QC":
                    tax = 5;
                    break;
                case "SK":
                    tax = 5;
                    break;
                case "NT":
                    tax = 5;
                    break;
                case "NU":
                    tax = 5;
                    break;
                case "YT":
                    tax = 5;
                    break;

                default:
                    tax = 0;
            }

            new_price = (default_price * (1 + 1 - parseFloat(1 - tax / 100))) / 100;

            gid('txi').innerHTML = '+'+tax + '%';
            // gid('pri').innerHTML = '$' + new_price.toFixed(2);
            price = new_price * 100;

            var checkTok = $('#coupon_code');
            if (checkTok.val() != "") {
                checkToken(checkTok.val());

                 gid('pri').innerHTML = '$' + (new_price1*100).toFixed(2);

            }else{
                gid('pri').innerHTML = '$' + new_price.toFixed(2);
            }

            return tax;

        }

        function getData(url, method = null, data = null) {
            req = new XMLHttpRequest();
            if (method) {
                method = method;
            } else {
                method = 'GET';
            }
            req.open(method, url);

            let headers = [];
            if (method == "POST") {
                req.setRequestHeader("content-type", "application/x-wwww-form-urlencoded");
                req.setRequestHeader('X-CSRF-TOKEN', '{{ csrf_token() }}');
            }
            req.send(data);
        }

        function gid(id) {

            return document.getElementById(id);
        }

        function editEmail() {

            gid('check_email').focus();

        }
    </script>

    <script>
        x = false;
        if (x == false) {
            $("#Hide").hide();
            $("#List").hide();
        }
        $("#Show").click(function() {
            $("#List").show("slow");
            x = true;
            if (x == true) {
                $("#Hide").show();
                $("#Show").hide();
            }
        });
        $("#Hide").click(function() {
            $("#List").hide("slow");
            x = true;
            if (x == true) {
                $("#Show").show();
                $("#Hide").hide();
            }
        });
    </script>

@endpush


@section('stripe_styles')

    <style>
        /*.card .card-header {*/
        /*    background: #fff;*/
        /*}*/
        .card {
            box-shadow: 0px 10px 20px 10px !important;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            color: black;
        }

        label {
            color: black !important;
        }

        .card {
            background: transparent;
        }

        .text-small {
            color: black;
        }

        a {
            color: black
        }

        .theme-white .btn-primary {
            background-color: #0172be !important;
            border-color: transparent !important;
            color: #fff;
        }


        .irf_alert {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 9999;
            min-width: 300px;
            padding-bottom: 30px;
            background: -webkit-linear-gradient(35deg, rgba(240, 240, 212, 0.0) 15%,
                    rgba(240, 240, 212, 0.25), rgba(240, 240, 212, 0.0)),
                -webkit-linear-gradient(70deg, rgba(240, 240, 212, 0.0) 15%, rgba(240, 240, 212, 0.25), rgba(240, 240, 212, 0.0) 20%), -webkit-linear-gradient(140deg, rgba(240, 240, 212, 0.0) 15%, rgba(240, 240, 212, 0.25), rgba(240, 240, 212, 0.0) 29%), -webkit-linear-gradient(140deg, rgba(240, 240, 212, 0.0) 15%, rgba(240, 240, 212, 0.25), rgba(240, 240, 212, 0.0)19%), -webkit-linear-gradient(175deg, rgba(240, 240, 212, 0.0) 15%, rgba(240, 240, 212, 0.25), rgba(240, 240, 212, 0.0) 20%), -webkit-linear-gradient(210deg, rgba(240, 240, 212, 0.0) 15%, rgba(240, 240, 212, 0.25), rgba(240, 240, 212, 0.0) 20%), -webkit-linear-gradient(280deg, rgba(240, 240, 212, 0.0) 15%, rgba(240, 240, 212, 0.25), rgba(240, 240, 212, 0.0) 20%), -webkit-linear-gradient(135deg, rgba(240, 240, 212, 0.0) 15%, rgba(240, 240, 212, 0.25), rgba(240, 240, 212, 0.0) 20%), -webkit-linear-gradient(50deg, rgba(240, 240, 212, 0.0) 15%, rgba(240, 240, 212, 0.25), rgba(240, 240, 212, 0.0) 20%), -webkit-linear-gradient(100deg, rgba(240, 240, 212, 0.0) 15%, rgba(240, 240, 212, 0.25), rgba(240, 240, 212, 0.0) 20%), #ffffff;
            border-radius: 13px;

        }

        .irf_alert_btn {}

        .stripe-element-container {
            padding-top: .55rem;
            padding-bottom: .50rem;
            border-radius: 22px;
            border: 2px solid #222;
        }

        .StripeElement {
            display: block;
            width: 100%;
            height: calc(1.5em + 0.75rem + 2px);
            padding: 0.375rem 0.75rem;
            font-size: 1rem;
            font-weight: 400;
            line-height: 1.5;
            color: #495057;
            background-color: #fff;
            background-clip: padding-box;
            border: 1px solid #ced4da;
            border-radius: 0.25rem;
            transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;

        }

        .StripeElement--focus {
            border-color: #80BDFF;
        }

        /* Can't see what I type without this */
        #card-number.form-control,
        #card-cvc.form-control,
        #card-exp.form-control {
            display: block;
        }

    </style>


@endsection