@extends('layouts.register-base', ['title' => 'Register'])
@section('css')
<link rel="stylesheet" type="text/css" href="{{ asset('assets/front/css/main.css') }}" />
@endsection
@section('content')


<section class="gray-bg">
    <div class="container profplans">
        <div class="gray-heading col-md-10">
            <h2>Let's start journey with GraphicsZoo</h2>
            <p>{{ $tagline ?? 'Ready to get started? Register a new account; it takes less than a minute.' }} </p>
        </div>
    </div>
</section>
@if ($selected_plan)
<section class="user-plans">
    <livewire:register.user-plans :planId="$selected_plan" :user="$user" />
</section>
@endif

<section>
    <div class="container p-4  profplans">
        <div class="col-md-11 signupform-proof">
            <div class="proof-form-side">
                <div class="formsignup" id="plan-form">
                    @include('admin.subscription.inc.payment-form')
                </div>

            </div>
            <div class="proof-client-testi">
                    <div id="demo" class="carousel slide" data-ride="carousel">

                        <!-- Indicators -->
                        <ul class="carousel-indicators">
                            <li data-target="#demo" data-slide-to="0" class="active"></li>
                            <li data-target="#demo" data-slide-to="1"></li>
                            <li data-target="#demo" data-slide-to="2"></li>
                        </ul>

                        <!-- The slideshow -->
                        <div class="carousel-inner">
                            <div class="carousel-item active">
                                <div class="client-testi-proof">
                                    <h3>What Our Client’s Are Saying</h3>
                                    <div class="clietpic p-0">
                                        <img src="{{ asset('assets/front/images/pexels-photo-1043474.png') }}" class="clietpic_img">
                                    </div>
                                    <p class="clientname">Scott Levesque</p>
                                    <p class="clientcomp-name">Be Free Clothing Company</p>
                                    <img src="images/rating_star.svg" alt="Star Rating">
                                    <p class="client-textmsg">"Great designs, quick turnaround and awesome to work with.
                                        Thank you...."</p>

                                </div>
                            </div>
                            <div class="carousel-item">
                                <div class="client-testi-proof">
                                    <h3>What Our Client’s Are Saying</h3>
                                    <div class="clietpic p-0">
                                        <img src="{{ asset('assets/front/images/pexels-photo-1043474.png') }}" class="clietpic_img">
                                    </div>
                                    <p class="clientname">Scott Levesque</p>
                                    <p class="clientcomp-name">Be Free Clothing Company</p>
                                    <img src="images/rating_star.svg" alt="Star Rating">
                                    <p class="client-textmsg">"Great designs, quick turnaround and awesome to work with.
                                        Thank you...."</p>

                                </div>
                            </div>
                            <div class="carousel-item">
                                <div class="client-testi-proof">
                                    <h3>What Our Client’s Are Saying</h3>
                                    <div class="clietpic p-0">
                                        <img src="{{ asset('assets/front/images/pexels-photo-1043474.png') }}" class="clietpic_img">
                                    </div>
                                    <p class="clientname">Scott Levesque</p>
                                    <p class="clientcomp-name">Be Free Clothing Company</p>
                                    <img src="images/rating_star.svg" alt="Star Rating">
                                    <p class="client-textmsg">"Great designs, quick turnaround and awesome to work with.
                                        Thank you...."</p>

                                </div>
                            </div>
                        </div>

                        <!-- Left and right controls -->
                        <a class="carousel-control-prev" href="#demo" data-slide="prev">
                            <span class="carousel-control-prev-icon client_slidr_icon"><i
                                    class="fa fa-angle-left client_slidr_icon_i" aria-hidden="true"></i></span>
                        </a>
                        <a class="carousel-control-next" href="#demo" data-slide="next">
                            <span class="carousel-control-next-icon client_slidr_icon"><i
                                    class="fa fa-angle-right client_slidr_icon_i" aria-hidden="true"></i></span>
                        </a>

                    </div>
                </div>
        </div>
    </div>

</section>
@endsection
@section('script')
<script src="https://js.stripe.com/v3/"></script>
<script src="{{ asset('assets/front/js/payment.js?v='.time())}}"></script>
<script> 
    console.log(stripeCard);
    stripeCard.mountElements(); 

    /*var havePlans = false;

    $('.user-plans').on('click', '.change_plan', function() {
        removeActive();
        $('#user-plans-modal').modal('show');
        Livewire.emit("refreshUserPlans");
    })

    function removeActive() {
        var li = $('#user-plans-modal').find('.subscription-plan-single:not(.selected-plan)');
        var input = li.find('input[type="radio"]:checked');
       
        console.log(input);
        li.removeClass('active');
    }

    Livewire.on('changePlan', plans => {
        //console.log({ plans });
        if( plans.length === 0 ) {
            havePlans = false;
        } else {
            havePlans = true;
            $(document).find('.billing-error').remove();
        }
    })*/

    /*$(document).on('submit', '#paymentForm', function(e) {
        if ( havePlans === false ) {
            e.preventDefault();
      
            var button = $(this).find('button[type="submit"]').parent();
            $(`<p class="text-center"><span class="billing-error error">Please select billing plan first!</span><p>`).insertAfter(button);
            $(document).find('.logo-loader-js').hide();
        }
    })*/
</script>


@endsection