@extends('layouts.public-base', ['title' => 'Signup', 'contentwrapper' => null])

@push('liveStyle')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css">
    <link rel="stylesheet" href="{{ asset('assets/gz/css/style-signup.css') }}">
@endpush

@section('content')
    <div class="container">
        @include('gz-pages.inc.flashMessages')
    </div>

    @if (isset($payment))
        <section class="sign_section my-5">
            <div class="w-100">
                <div class="container">
                    <div class="s_inner s_trans_inner">
                        <div class="row mt-0 mx-0">
                            <div class="col-lg-6 p-0  bg-clr h-100">
                                <div class="s_left left_safe align-self-center">
                                    <div class="patern"></div>
                                    <h3 class="s_form_head mb-3">Your Card info is Safe</h3>
                                    <div class="secure_trans">
                                        <img src="{{ asset('assets/gz/images/lock.png') }}">
                                        <p class="s_trans_details">YOUR transaction is secured with 256 bit SSL production
                                        </p>
                                    </div>
                                    <p class="s_more_details">Your card will not be charged until after your 7 day trial is
                                        complete. You can test out our service. risk-free, and see exactly what a dedicated
                                        design team can do. And if it's not for you, just cancel within the 7 day trial
                                        period
                                        and you will not be charged a penny.</p>
                                    <div class="text-center">
                                        <img src="{{ asset('assets/gz/images/annotation.png') }}" class="anno_img">
                                        <div class="main_s_slider">
                                            <div class="s_slider">
                                                <img src="{{ asset('assets/gz/images/user.png') }}" class="slider_user">
                                                <h4 class="s_review_head">Great Value for money.</h4>
                                                <p class="s_review_details">"Lorem ipsum dolor sit amet, no ferri argumentum
                                                    reformidans eam, mea te saepe equidem dissentias"</p>
                                            </div>
                                            <div class="s_slider">
                                                <img src="{{ asset('assets/gz/images/user.png') }}" class="slider_user">
                                                <h4 class="s_review_head">Great Value for money.</h4>
                                                <p class="s_review_details">"Lorem ipsum dolor sit amet, no ferri argumentum
                                                    reformidans eam, mea te saepe equidem dissentias"</p>
                                            </div>
                                            <div class="s_slider">
                                                <img src="{{ asset('assets/gz/images/user.png') }}" class="slider_user">
                                                <h4 class="s_review_head">Great Value for money.</h4>
                                                <p class="s_review_details">"Lorem ipsum dolor sit amet, no ferri argumentum
                                                    reformidans eam, mea te saepe equidem dissentias"</p>
                                            </div>
                                            <div class="s_slider">
                                                <img src="{{ asset('assets/gz/images/user.png') }}" class="slider_user">
                                                <h4 class="s_review_head">Great Value for money.</h4>
                                                <p class="s_review_details">"Lorem ipsum dolor sit amet, no ferri argumentum
                                                    reformidans eam, mea te saepe equidem dissentias"</p>
                                            </div>
                                            <div class="s_slider">
                                                <img src="{{ asset('assets/gz/images/user.png') }}" class="slider_user">
                                                <h4 class="s_review_head">Great Value for money.</h4>
                                                <p class="s_review_details">"Lorem ipsum dolor sit amet, no ferri argumentum
                                                    reformidans eam, mea te saepe equidem dissentias"</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6 p-0">
                                <div class="s_trans_card h-100">

                                    <div class="wrap-coupon">
                                        <div class="input-group mb-3 discount_form">
                                            <input type="text" class="form-control s_discount_field" name="coupon_code"
                                                placeholder="Add Promo Code">
                                            <div class="input-group-append">
                                                <button class="site_btn red_btn discount_btn" type="button"
                                                    data-type="apply">Apply</button>
                                                <button class="site_btn red_btn discount_btn" type="button"
                                                    data-type="remove" style="display:none;">Remove</button>
                                            </div>
                                        </div>
                                        @include('inc.dots-loader')
                                        <div class="coupon-validation-message d-none">
                                            
                                        </div>
                                    </div>

                                    <div class="s_trial_div">
                                        <div class="before_trial">
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <p class="trail_head">Today's total</p>
                                                </div>
                                                <div class="col-md-6">
                                                    <p class="trail_price">USD $7.00</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="after_trial">
                                            <div class="row sale-tax-js d-none">
                                                <div class="col-md-6">
                                                    <p class="mb-0">Sale tax (8.25%) </p>
                                                </div>
                                                <div class="col-md-6">
                                                    <p class="trail_price mb-0 tax-price-js">$354.4</p>
                                                </div>
                                            </div>

                                            <div class="row final-amount-js">
                                                <div class="col-md-6">
                                                    <p class="trail_head mb-0">After 7 day free trial </p>
                                                </div>
                                                <div class="col-md-6">
                                                    <p class="trail_price mb-0">
                                                        <span class="discount-line-js d-none">30% OFF <del>USD
                                                                $349/mo</del></span>
                                                        <span class="payable-amount-js">USD
                                                            ${{ $total_amount ?? '' }}/mo</span>
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <form class="credit_card_form" method="POST" action="{{ route('signup-payment.store') }}"
                                        id="paymentForm">
                                        @csrf

                                        @if (isset($plan_ids) && is_array($plan_ids))
                                            @foreach ($plan_ids as $plan_id)
                                                <input type="hidden" name="plan_id[]" value="{{ $plan_id ?? '' }}" />
                                            @endforeach
                                        @endif

                                        <input type="hidden" id="payment_method" name="payment_method">
                                        <input type="hidden" name="billed_type_id" value="2">

                                        <h3 class="s_form_head mb-4 text-center">Credit Card</h3>
                                        <div class="row">
                                            <div class="form-group mb-3 col-md-12">
                                                <label class="s_form_label">Card Number</label>
                                                <div id="example2-card-number" class="input empty inner_form"></div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="form-group col-md-6">
                                                <label class="s_form_label">Expiry Date</label>
                                                <div id="example2-card-expiry" class="input empty inner_form"></div>
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label class="s_form_label">Verification Value</label>
                                                <div id="example2-card-cvc" class="input empty inner_form"></div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-12">
                                                <label class="s_form_label">Billing Location <sup>*</sup></label>
                                                <div class="inner_form">
                                                    <select name="state" id="timeframe-select"
                                                        class="select_cusarrow form-control selectpick timeframe"
                                                        onchange="Capture_values($(this))" data-valid="required"
                                                        tabindex="-1">
                                                        <option value="" selected="" class="select_mm">Select a State
                                                        </option>
                                                        <option style="background-color:#ef495f; color:#fff;"
                                                            value="International Customer">International Customer</option>
                                                        <option value="Alabama" class="select_num_m">Alabama</option>
                                                        <option value="Alaska" class="select_num_m">Alaska</option>
                                                        <option value="Arizona" class="select_num_m">Arizona</option>
                                                        <option value="Arkansas" class="select_num_m">Arkansas</option>
                                                        <option value="California" class="select_num_m">California</option>
                                                        <option value="Colorado" class="select_num_m">Colorado</option>
                                                        <option value="Connecticut" class="select_num_m">Connecticut
                                                        </option>
                                                        <option value="Delaware" class="select_num_m">Delaware</option>
                                                        <option value="District Of Columbia" class="select_num_m">District
                                                            Of
                                                            Columbia</option>
                                                        <option value="Florida" class="select_num_m">Florida</option>
                                                        <option value="Georgia" class="select_num_m">Georgia</option>
                                                        <option value="Hawaii" class="select_num_m">Hawaii</option>
                                                        <option value="Idaho" class="select_num_m">Idaho</option>
                                                        <option value="Illinois" class="select_num_m">Illinois</option>
                                                        <option value="Indiana" class="select_num_m">Indiana</option>
                                                        <option value="Iowa" class="select_num_m">Iowa</option>
                                                        <option value="Kansas" class="select_num_m">Kansas</option>
                                                        <option value="Kentucky" class="select_num_m">Kentucky</option>
                                                        <option value="Louisiana" class="select_num_m">Louisiana</option>
                                                        <option value="Maine" class="select_num_m">Maine</option>
                                                        <option value="Maryland" class="select_num_m">Maryland</option>
                                                        <option value="Massachusetts" class="select_num_m">Massachusetts
                                                        </option>
                                                        <option value="Michigan" class="select_num_m">Michigan</option>
                                                        <option value="Minnesota" class="select_num_m">Minnesota</option>
                                                        <option value="Mississippi" class="select_num_m">Mississippi
                                                        </option>
                                                        <option value="Missouri" class="select_num_m">Missouri</option>
                                                        <option value="Montana" class="select_num_m">Montana</option>
                                                        <option value="Nebraska" class="select_num_m">Nebraska</option>
                                                        <option value="Nevada" class="select_num_m">Nevada</option>
                                                        <option value="New Hampshire" class="select_num_m">New Hampshire
                                                        </option>
                                                        <option value="New Jersey" class="select_num_m">New Jersey</option>
                                                        <option value="New Mexico" class="select_num_m">New Mexico</option>
                                                        <option value="New York" class="select_num_m">New York</option>
                                                        <option value="North Carolina" class="select_num_m">North Carolina
                                                        </option>
                                                        <option value="North Dakota" class="select_num_m">North Dakota
                                                        </option>
                                                        <option value="Ohio" class="select_num_m">Ohio</option>
                                                        <option value="Oklahoma" class="select_num_m">Oklahoma</option>
                                                        <option value="Oregon" class="select_num_m">Oregon</option>
                                                        <option value="Pennsylvania" class="select_num_m">Pennsylvania
                                                        </option>
                                                        <option value="Rhode Island" class="select_num_m">Rhode Island
                                                        </option>
                                                        <option value="South Carolina" class="select_num_m">South Carolina
                                                        </option>
                                                        <option value="South Dakota" class="select_num_m">South Dakota
                                                        </option>
                                                        <option value="Tennessee" class="select_num_m">Tennessee</option>
                                                        <option value="texas" class="select_num_m">Texas</option>
                                                        <option value="Utah" class="select_num_m">Utah</option>
                                                        <option value="Vermont" class="select_num_m">Vermont</option>
                                                        <option value="Virginia" class="select_num_m">Virginia</option>
                                                        <option value="Washington" class="select_num_m">Washington</option>
                                                        <option value="est Virginia" class="select_num_m">West Virginia
                                                        </option>
                                                        <option value="Wisconsin" class="select_num_m">Wisconsin</option>
                                                        <option value="Wyoming" class="select_num_m">Wyoming</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <button id="card-button" data-secret="{{ $intent->client_secret }}" type="submit"
                                            class="text-uppercase site_btn red_btn sign_up_btn">Complete
                                            checkout</button>

                                        @include('inc.logo-loader')
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    @endif

@endsection

@push('liveScript')
    <script>
        $('.main_s_slider').slick({
            dots: true,
            arrows: false,
            autoplay: true,
            autoplaySpeed: 2000,
            touchMove: true,
            draggable: true,
            swipe: true,
        })
    </script>
    <script src="https://js.stripe.com/v3/"></script>
    <script src="{{ asset('assets/front/js/payment.js?v='.time()) }}"></script>
    
    @if (isset($payment))
    <script>
        console.log(stripeCard);
        stripeCard.mountElements();
    </script>
    @endif
  


    @if (isset($payment))
        <script>
            var total_amount = {{ $total_amount ?? '' }};
            var sales_tax = 0;
            //var subs_plans = [];
            var discount_percent = 0;
            var discount_amount = 0;

            $('form.credit_card_form').on("change", 'select[name="state"]', function() {
                updateSaleTax(this.value);
            })

            function updateSaleTax(payment_location) {
                var sale_tax_preview = $('.sale-tax-js');

                if (payment_location.toLocaleLowerCase() === 'texas') {
                    sales_tax = 8.25;
                    $(sale_tax_preview).removeClass('d-none');
                    updateTotalAmount();
                } else {
                    sales_tax = 0;
                    $(sale_tax_preview).addClass('d-none');
                    updateTotalAmount();
                }
            }

            function updateSaleTaxPreview(tax_amount) {
                tax_amount = tax_amount.toFixed(2);
                var sale_tax_preview = $('.sale-tax-js');
                sale_tax_preview.find(".tax-price-js").text(`$${tax_amount}`);
            }

            function updateCouponPreview(final_amount) {
                if (discount_amount <= 0 && discount_percent <= 0) {
                    return false;
                }

                var discount_line = $('.final-amount-js').find('.discount-line-js');
                discount_line.removeClass('d-none');

                var discount = `$${discount_amount}`;
                if (discount_percent > 0) {
                    discount = `${discount_percent}%`;
                }
                final_amount = (final_amount + getTaxAmount(final_amount)).toFixed(2);
                discount_line.html(`${discount} OFF <del>USD $${final_amount}/mo</del><br>`);
            }

            function updateTotalAmount() {
                var plan_amount = Number(total_amount),
                    plan_cycle = 'mo',
                    billed_amount = 0;

                billed_amount = plan_amount; //`${plan_amount}/${plan_cycle}`;
                console.log({
                    discount_percent
                }, {
                    discount_amount
                });

                if (discount_percent > 0) {
                    plan_amount = Number(plan_amount - (plan_amount * discount_percent / 100).toFixed(2));
                } else if (discount_amount > 0) {
                    plan_amount = Number(plan_amount - discount_amount);
                }

                var tax_amt = getTaxAmount(plan_amount);
                var final_amount = (plan_amount + tax_amt).toFixed(2);

                console.log({
                    plan_amount
                }, {
                    final_amount
                });

                updateAmountPreviews(tax_amt, final_amount, billed_amount);
            }

            function getTaxAmount(amt) {
                if (amt === 0 || sales_tax === 0) {
                    return 0;
                }

                return (amt * sales_tax / 100);
            }

            function updateAmountPreviews(tax_amt, final_amount, billed_amount) {

                var total_amount = $('.final-amount-js').find(".payable-amount-js");
                total_amount.text(`USD $${final_amount}/mo`);

                updateSaleTaxPreview(tax_amt);
                updateCouponPreview(billed_amount);
            }

            /* Apply coupon while whitelabel signup */
            jQuery(function() {
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
            });

            function applyCoupon(code) {
                var loader = $('.wrap-coupon').find('.dots-loader-js');
                loader.show();

                $.ajax({
                    url: `${location.protocol}//${location.host}/coupon/${code}`,
                    method: 'GET',
                    dataType: 'json',
                    success: function(res) {
                        loader.hide();
                        console.log({
                            res
                        });
                        updateCoupon(res);
                    },
                    error: function(err) {
                        loader.hide();
                        console.log('error', err);
                    }
                });
            }

            function updateCoupon(res) {
                var msg = $('.wrap-coupon').find('.coupon-validation-message');
                msg.removeClass('d-none');

                if (res['type'] === 'error') {
                    msg.removeClass('text-success').addClass('text-danger');
                    msg.html(`
                        <i class="fa fa-times-circle"></i> ${ res['message'] }
                    `);

                    couponAction($('.wrap-coupon').find('button[data-type="remove"]'), 'remove', 'error');

                } else if (res['type'] === 'success') {
                    msg.removeClass('text-danger').addClass('text-success');
                    msg.html(`
                        <i class="fa fa-check-circle"></i> ${ res['message'] }
                    `);

                    discount_amount = res['coupon']['amount_off'];
                    discount_percent = res['coupon']['percent_off'];
                    updateTotalAmount();
                }
            }

            $('.wrap-coupon').on('click', 'button', function() {
                couponAction(this, $(this).data('type'));

            })

            function couponAction(button, action, event = 'click') {
                var coupon_code = $('.wrap-coupon').find('input[name="coupon_code"]');
                /*if ( event === 'error' ) {
                    return false;

                }*/
                if (!coupon_code.val().trim()) {
                    return updateCoupon({
                        type: 'error',
                        message: 'Please fill the coupon code!'
                    });
                } else {
                    if (event === 'click') {
                        resetCouponMessages();
                    }

                    if (action === 'apply') {
                        applyCoupon(coupon_code.val());
                        toggleCouponButtons(button, 'remove');

                    } else if (action === 'remove') {
                        coupon_code.val('');
                        discount_amount = 0;
                        discount_percent = 0;
                        updateTotalAmount();
                        toggleCouponButtons(button, 'apply');
                    }
                }
            }

            function toggleCouponButtons(hide, show) {
                $('.wrap-coupon').find('button[data-type="' + show + '"]').show();
                $(hide).hide();
                if (show === 'apply') {
                    var discount_line = $('.final-amount-js').find('.discount-line-js');
                    discount_line.addClass('d-none');
                }
            }

            function resetCouponMessages() {
                var msg = $('.wrap-coupon').find('.coupon-validation-message');
                if (false === msg.hasClass('d-none')) {
                    msg.addClass('d-none');
                }
                if (true === msg.hasClass('text-danger')) {
                    msg.removeClass('text-danger');
                }
                if (true === msg.hasClass('text-success')) {
                    msg.removeClass('text-success');
                }
            }
        </script>
    @endif

@endpush