@extends('layouts.auth')
@section('content')
@section('bodyClass', 'mobile_banner')
<style>
    .stripe-card-common {
        border: 1px solid #DDDDDD;
        border-radius: 15px;
        padding: 0px .75rem !important;
        min-height: 40px;
        display: flex;
        align-items: center;
    }
</style>
<div class="">
    <a href="{{ route('logout') }}" class="backto-login">
        <svg width="12" height="11" viewBox="0 0 12 11" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
                d="M11.3334 4.83329H3.22008L6.94675 1.10663L6.00008 0.166626L0.666748 5.49996L6.00008 10.8333L6.94008 9.89329L3.22008 6.16663H11.3334V4.83329Z"
                fill="white" />
        </svg>
        Back to Login
    </a>
    <div class="row align-items-center banner_layout login-form-align-center">
        <div class="col-md-7 contents">
            <p>{{ config('constants.auth_banner_text') }}</p>
        </div>
        <div class="col-md-5 carousel-contents">
            <div id="demo" class="carousel slide" data-bs-ride="carousel" data-bs-interval="false">
                <!-- The slideshow/carousel -->
                <div class="carousel-inner">
                    <div class="carousel-item ">

                    </div>
                    <div class="carousel-item">

                    </div>
                    <div class="carousel-item active">
                        <div class="card_layout">
                            <div class="card_body">
                                <form method="post" class="payment-form" id="payment-form" action="{{ route('payment.store') }}">
                                <!-- <form method="post" class="payment-form" id="payment-form" action=""> -->
                                <input type="hidden" name="page" value="single">
                                    @csrf
                                    <input type="hidden" value="single" name="details">
                                    <h3 class="card_title">Select Your Payment Plan</h3>
                                    @if($plans)
                                    @foreach($plans as $k => $plan)
                                    <div class="form-group form_checkbox_layout form_checkbox_layout_sec1">
                                        <div class="form_checkbox_label form_checkbox_payment">
                                            <div class="form_checkbox_payment_desc">
                                                <h6>{{$plan->name}}</h6>
                                                <p>{{$plan->description}}</p>
                                            </div>
                                            <div class="form_checkbox_payment_det">
                                                <div class="form_checkbox_payment_det_price">
                                                   
                                                    <span class="discount-price">${{$plan->amount}} {{($plan->amount!=0)?'USD':''}}</span>
                                                </div>
                                                <p>/Month</p>
                                            </div>
                                             @include('payment.discounts')
                                        </div>
                                        <div class="form_checkbox">
                                            <div class="round">
                                                <input type="radio" class="choose_plan" name="plan_id"
                                                    value="{{$plan->id}}" id="radio{{$plan->id}}" @if($k==0)
                                                    checked="checked" @endif />
                                                <label for="radio{{$plan->id}}"></label>
                                            </div>
                                        </div>
                                    </div>
                                    @endforeach
                                    @endif
                                    <div id="card-details-sec">
                                        <h3 class="card_title subtitle">Card Details</h3>
                                       
                                        <!-- stripe payment -->
                                        
                                        <!-- A Stripe Element will be inserted here. -->
                                            <!-- <div id="card-number"></div> -->
                                        
                                        <!-- Used to display form errors. -->
                                       
                                        <!-- end of stripe payment -->
                                        <div class="stripe-card-common mb-2 form-floating payment_label form-group mob_onboarding_payment_parent_cardnum" id="card-number">
                                           
                                        </div>
                                        <div class="stripe-card-common mb-2"  id="card-expiry"></div>
                                    
                                        <div class="stripe-card-common " id="card-cvc"></div>
                                        <div class="form-group mob_onboarding_payment_parent">
                                            <div class="payment_label">
                                                <div class="row">
                                                   
                                        
                                                </div>
                                            </div>
                                            <div id="card-errors" role="alert" style="color:red">

                                            </div>
                                            <div class="discount-section">
                                                @include('payment.discount_input')
                                            </div>
                                            @include('payment.gst_amount')
                                        </div>
                                    </div>
                                    @include('includes.loader')
                                    <input type="hidden" value="" name="stripeToken" id="token">
                                    <br><span class="text-danger payment-err"></span>
                                    <span class="text-success payment-succ"></span>
                                    <button type="button"  id="next" class="next-payment-btn profile-btn payment-button fw-700"><span class="font-lato">Next Step</span>
                                        {{ \App\Helpers\Helper::getArrowSvg() }}
                                    </button>
                                </form>           
                                <a href="{{ route('studio.form_notification') }}">
                                <button type="button" class="btn-theme light w-100 mt-3 fw-700">
                                    <img src="{{ asset('images/arrow_back_black.svg') }}" alt="plus">
                                    <span class="font-lato">Previous Step</span>
                                </button>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="carousel-item ">
                    </div>
                </div>
            </div>
            @include('studio.slider_buttons')
        </div>
    </div>
    @endsection
   
    @push('scripts')
    <script src="https://js.stripe.com/v3/"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        var studiosCount =' {{ count(auth::user()->studios) }}';
     
        // Create an instance of Stripe
        var stripe = Stripe('{{ env('STRIPE_PUBLISH_KEY') }}');
        // Create an instance of elements
        var elements = stripe.elements();
        // Create a card element and add it to the DOM
        var cardNumber = elements.create('cardNumber', { showIcon: true, placeholder: 'Card Number',});
        cardNumber.mount('#card-number');
        var cardExpiry = elements.create('cardExpiry');
        cardExpiry.mount('#card-expiry');
        var cardCvc = elements.create('cardCvc', { placeholder: 'CVV',});
        cardCvc.mount('#card-cvc');
        // Handle form submission
        // var form = document.getElementById('payment-form');
   
        $(' #next').click(function(event) {
            $('#token').val('');
            var selectedPlanValue = $('input[name="plan_id"]:checked').val();
           
            var tokens = [];
            if(selectedPlanValue == 3)
            {
                $('.payment-form').submit();
            } else {
                // Create tokens for each studio
                function createTokensForStudios(count) {
                    if (count === 0) {
                        stripeTokenHandler(tokens);
                        return;
                    }

                    stripe.createToken(cardNumber, cardExpiry, cardCvc).then(function(result) {
                        if (result.error) {
                            var errorElement = document.getElementById('card-errors');
                            errorElement.textContent = result.error.message;
                        
                        } else {
                            tokens.push(result.token);
                            createTokensForStudios(count - 1);
                        }
                    });
                }

                createTokensForStudios(studiosCount);
            }
        });
    });

    function stripeTokenHandler(token) 
    {
        var form = document.getElementById('payment-form');       
        $('#token').val(JSON.stringify(token));
        $('.payment-form').submit();
       
    }
   
    $(document).ready(function() {
        $('.form_checkbox_layout_sec1:first').addClass('active');
        $('.form_checkbox_layout_sec2:first').addClass('active');
        $('#card-details-sec').hide();
        $('#mblSubTitle').html('Your billing plan');
        $('.banner').removeClass('mobile_banner_img');
        $('.card_name').keypress(function(e) {
            var inputValue = event.charCode;
            if ((inputValue >= 91 && inputValue <= 96)) {
                event.preventDefault();
            } else if (!(inputValue >= 65 && inputValue <= 122) && (inputValue != 46 && inputValue !=
                    32 && inputValue != 0)) {
                event.preventDefault();
            }
        });
        $('.card_number, .cvv').keypress(function(e) {
            var inputValue = event.charCode;
            if (inputValue != 8 && inputValue != 0 && inputValue < 48 || inputValue > 57) {
                event.preventDefault();
            }
        });
        $('.card_name, .card_number, .cvv').on("cut copy paste", function(e) {
            e.preventDefault();
        });
        $('.choose_plan').change(function(e) {
            var val = $(this).val();
            if (val == 3) {
                $('#card-details-sec').hide();
            } else {
                $('#card-details-sec').show();
            }
        });
        $('.payment_drp').change(function(e) {
           $(this).removeClass('show-placeholder');
        });
        
        var initialVal = $('.choose_plan').val();
        if (initialVal == 3) {
            $('#card-details-sec').hide();
        } else {
            $('#card-details-sec').show();
        }
        $(document).on('change', '.form_checkbox_layout_sec1 .form_checkbox input', function() {
            $('.form_checkbox_layout_sec1').removeClass('active');
            if ($(this).is(':checked') ) {
                $(this).parents('.form_checkbox_layout_sec1').addClass('active');
            } 
        });
    });
    $(document).ready(function() {
        $('.discount-checkbox-check').on('change', function() {
            var code = $(this).parents('.discount-section').find('.discout-coupon').val();
            // if (code == "") {
            //     $(this).prop('checked', false);
            //     return false;
            // } 
            $this = $(this);
            $parent = $(this).parents('.discount-section');
            if ($(this).prop('checked')) {
                getDiscount($this)
            } else {
                $parent.find('.total-amount').html('');
                $this.prop('checked', false);
            }
        });

    let timeout;
    $('.discout-coupon').keyup(function(e) {
        $('.discount-error').html('');
        $this = $(this);
        clearTimeout(timeout); 
        timeout = setTimeout(function() {
            getDiscount($this);
        }, 500);
    });

        function getDiscount($this) {
            $parent = $this.parents('.discount-section');
            var postData =  {
                code: $parent.find('.discout-coupon').val(),
                studio: $parent.find('.discount_studio').val(),
                _token: '{{ csrf_token() }}',
            };
            $.ajax({
                type: 'POST',
                data: postData,
                url: "{{ route('payment.check_discount') }}",
                success: function(data) {
                    if (data) {
                        $parent.find('.discount-error').html('');
                        $parent.find('.total-amount').html(data.html);
                       
                        $('.first-time-gst').hide();
                        if (data.discountStatus) {
                            $parent.find('.discount-checkbox-check').prop('checked', true);
                        } else {
                            if ($parent.find('.discout-coupon').val() == "") {
                                $parent.find('.discount-error').html('');
                            } else {
                                $parent.find('.discount-error').html('Invalid Discount Code');
                            }
                            $parent.find('.discount-checkbox-check').prop('checked', false);
                        }
                    } 
                }
            })
        }
    });
    </script>
    <style>
    /* Chrome, Safari, Edge, Opera */
    .card_number::-webkit-outer-spin-button,
    .card_number::-webkit-inner-spin-button,
    .cvv::-webkit-outer-spin-button,
    .cvv::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    /* Firefox */
    .card_number,
    .cvv {
        -moz-appearance: textfield;
    }
    </style>
    @endpush('scripts')