@extends('layouts.project-form-base', ['title' => $title, 'formTitle' => $formTitle, 'back' => $closeRoute])
@section('content')
@section('css')
    <style>
        #wrapper {
            padding: 0px;
        }

        .material-icons {
            cursor: pointer !important;
        }

        .custom-color .output-color span {
            background: #fff;
        }

    </style>
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/front/css/main.css?v='.time()) }}" />
@endsection

<div class="pt-10">
@if ($selected_plan)
    <div class="py-5"></div>
    <section class="mt-3 user-plans">
        <livewire:register.user-plans :planId="$selected_plan" :user="$user" />
    </section>
@endif

<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>
</div>
@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();
</script>

<script> 
    $('.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');
    }
</script>

@endsection