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

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

        h3.cstm {
            font-size: 65px;
            color: white;
            position: relative;
            top: 85px;
            font-family: Arial, Helvetica, sans-serif;
        }

        .belowimg {
            height: 11.18rem
        }
        @media screen and (max-width: 320px) {
                .belowimg {
                    /* width: 199px; */
                    height: 83px
                }
            }
            @media screen and (max-width: 375px) and (min-width: 321px) {
            .belowimg {
                /* width: 268px; */
                /* height: 50%; */
                height: 97px
            }
        }
        @media screen and (max-width: 425px) and (min-width: 376px) {
            .belowimg {
                /* width: 268px; */
                /* height: 50%; */
                height: 115px
            }
        }
        
        @media screen and (max-width: 768px) and (min-width: 426px) {
                .belowimg {
                    /* width: 199px; */
                    height: 103px
                }
            }
        @media screen and (max-width: 1024px) and (min-width: 769px) {
            .belowimg {
                /* width: 268px; */
                /* height: 50%; */
                height: 144px
            }
        }

           
    </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> -->
                        <h3 class="cstm">Member Sign Up</h3>
                    </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>
                        EntreXplore
                    </h2>
                    <h6>
                        <p>Canada Commerce's EntreXplore is the ultimate interactive tool to guide and facilitate your
                            business developments. Our portal boasts four comprehensive funding databases, providing access
                            to a wealth of grants and loans from Canada, the USA, the UK, and Australia. Our professional
                            and user-friendly business plan builder allows for seamless collaboration between members and
                            consultants, bringing your ideas to fruition efficiently and effectively. With access to our
                            application workshop, members can work with our expert advisors to craft the perfect grant or
                            loan application. Plus, with the ability to conduct your own research within the portal and
                            up-to-date reports generated upon request by our professionals, Canada Commerce's EntreXplore
                            has everything you need to stay informed and take your business to the next level.
                        </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/CClogo.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/d1.png') }}" alt=""
                        width="60%">
                    <img class="relative img-fluid ft-font mt-5" src="{{ asset('client/images/d2.png') }}" alt=""
                        width="60%">
                </div>
                <div class="col-md-6">
                    <h2 class="mb-1">EntreXplore</h2>
                    <p class=" myDIV">
                        Canada Commerce's EntreXplore is the ultimate cloud-based platform, empowering entrepreneurs across
                        all industries and sectors nationwide. Our team of experienced professionals leverages the power of
                        EntreXplore 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>Innovation & Brainstorming</li>
                        <li>Tactics & Approaches</li>
                        <li>Developing Milestones & Action Plans</li>
                        <li>Business plans</li>
                        <li>Organizational Strategies</li>
                        <!--<li>Private investments</li>-->
                        <!--<li>Public funding and donations</li>-->
                        <!--<li>ICO and Cryptocurrency  investments</li>-->
                        <!--<li>TSXV/ TSX launches</li>-->
                        <li>Securing Government Funding</li>
                        <li>R&D Support</li>
                        <li>Setting Guidelines</li>
                        <li>Safeguarding Intellectual Property</li>
                        <li>Acquiring Permits & Licenses</li>
                        <li>Crafting Unique Selling Propositions</li>
                        <li>Bringing Products to Market</li>
                        <li>Business Partnerships & Acquisitions</li>
                        <li>Local, National & International Expansion</li>
                        <li>Professional & Personal Coaching & Mentorship</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 ft-font belowimg" src="{{ asset('client/images/3.png') }}" alt=""
                        width="60%">
                </div>
                <div class="col-md-6">
                    <h2 class="mb-1">Business Plans</h2>
                    <p>
                        Crafting a winning business plan has never been easier with our intuitive and user-friendly business
                        plan builder, guiding our members step-by-step to completion. Our team of seasoned professionals are
                        on hand to review your plan and provide insightful suggestions for improvement, ensuring your plan
                        is polished and effective.
                    </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">Flexible Options for Our Members</h2>
                    <p>
                        At Canada Commerce, we understand that every entrepreneur has unique needs. That's why we offer a
                        range of options for our members. Whether you choose to have our team apply on your behalf for a
                        nominal fee of $99.99 per application or prefer to apply directly to government funding programs and
                        private financing options, we're here to support you every step of the way.
                    </p>
                </div>
                <div class="col-md-6 text-center">
                    <img class="relative img-fluid ft-font belowimg " src="{{ asset('client/images/4.png') }}"
                        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/payment.png') }}" alt=""
                                    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:</h3>
                            </span>
                            <ul>
                                <li>
                                    <div class="bullet-text">Gain access to over 2000 government, private, and public
                                        funding programs across Canada, the United States of America, the United Kingdom,
                                        and Australia.</div>
                                </li>
                                <li>
                                    <div class="bullet-text">Create a professional business plan and secure funding with
                                        ease using our intuitive business plan builder.</div>
                                </li>
                                {{-- <li>
                                    <div class="bullet-text">Access to over 1900 templates for contracts and agreements
                                    </div>
                                </li> --}}
                                <li>
                                    <div class="bullet-text">Receive personalized support for grant writing through our
                                        interactive Application Workshop.</div>
                                </li>
                                <li>
                                    <div class="bullet-text">Stay informed with reports generated upon request disclosing
                                        relevant funding and financing sources.</div>
                                </li>
                                <li>
                                    <div class="bullet-text">Updates on newly released grants / loans</div>
                                </li>
                                <li>
                                    <div class="bullet-text">Get regular updates on newly released grants and loans to make
                                        strategic decisions for your business.</div>
                                </li>
                                <li>
                                    <div class="bullet-text">Get assistance with applications and obtaining permits to
                                        ensure a smooth process. </div>
                                </li>
                                <li>
                                    <div class="bullet-text">Tap into our team of business consultants and expert support
                                        via phone and email to guide you towards success.</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