@extends('layouts.dashboard.app')

@php
    $body_class = 'fullpage';
    $currency_sign = \App\Models\Setting::get('currency_sign');

    $header_params = [
            'heading_page_title' => 'Subscription Plan',
    ];


   $cur_pl_period = $activeSub?$activeSub->price_type:'month';

@endphp

@section('content')

    <div class="wrapper header-fixed sidebar-gutters">
        <main class="content">
            <section class="full-vh">
                <div class="card">
                    <div class="decor-border-bottom-4 flex items-center justify-between flex-wrap gap-16">
                        <label class="switch-multiple btn--sm btn">
                            <label class="switch-multiple-option">
                                <input type="radio" class="switch_plan_period" name="switch-option" value="month" {{ $cur_pl_period == 'month'?'checked=""':'' }} id="monthly" hidden="">
                                <div class="btn switch-multiple--btn"><span>Monthly</span></div>
                            </label>
                            <label class="switch-multiple-option">
                                <input type="radio" class="switch_plan_period" value="year"  {{ $cur_pl_period == 'year'?'checked=""':'' }} name="switch-option" id="yearly-20-off" hidden="">
                                <div class="btn switch-multiple--btn"><span>Yearly 20% Off</span></div>
                            </label>
                        </label>

                        <div class="flex items-center flex-wrap gap-16">
                            <span class="text--xs color-dark-grey">Still have any questions? </span>
                            <a href="{{ route('dashboard.supports.index') }}" class="btn btn--sm btn--light color-defaultTextColor fw-500">
                                Contact Support
                            </a>
                        </div>
                    </div>

                    <div class="compare-plans">
                        <div class="compare-plans__head">
                            <div class="compare-plans__head-tr">
                                <div class="compare-plans__head-td">
                                    <h3 class="mb-20">Compare Plans</h3>
                                    <p class="compare-plans__head-text color-gray-2 mb-20">Choose the subscription plan that best fits your needs.</p>
                                </div>

                                @foreach($plans as $plan)

                                 @php
                                  $cur_item_price = ($cur_pl_period == 'month')?$plan->price:$plan->year_price;
                                 @endphp

                                <div data-id="{{ $plan->id }}" data-price="{{  number_format($plan->price, 0) }}"  data-year_price="{{  number_format($plan->year_price, 0) }}"
                                     class="plan_item_wrp compare-plans__head-td">
                                    @if($plan->popular)
                                    <div class="flex items-center flex-wrap gap-8 mb-20">
                                        <h4 class="">{{ $plan->title }} plan</h4>
                                        <a href="#" class="btn btn--popular radius">
                                            <span class="ico"><img src="{{ asset('dash/img/star-2-popular.svg') }}"></span>
                                            <span>Popular</span>
                                        </a>
                                    </div>
                                    @else
                                        <h4 class="mb-20">{{ $plan->title }} plan</h4>
                                    @endif

                                    <div class="compare-plans__price-group mb-20">
                                        <span class="compare-plans__price --gradient-text"><span class="plan_price">{{ number_format($cur_item_price, 0) }}</span> {{ $currency_sign }}</span>
                                        <span class="compare-plans__month">/ <span class="plan_period">{{ $cur_pl_period }}</span></span>
                                    </div>
                                    <p class="compare-plans__head-text mb-20">{{ $plan->description }}</p>

                                    @if ($currentPlan && $currentPlan->id == $plan->id)
                                    {{--// @if ($activeSub && $activeSub->subscription_plan_id == $plan->id) --}}


                                        @php

                                            $class_b = $activeSub?(($activeSub->price_type == $cur_pl_period)?'':'d-none'):'';

                                            $can_cancel = false;
                                            if((int)$plan->price){
                                                $can_cancel = true;
                                            }

                                        @endphp


                                        <a data-plan-type="{{ $activeSub?$activeSub->price_type:'' }}" href="#" style="{{ $can_cancel?'':'pointer-events: none;' }}" class="plan_active_btn {{ $can_cancel?'cancel_plan_subscription_btn' : '' }} {{ $class_b }} plan_btn btn btn--md btn--light">
                                            <span class="ico"><img src="{{ asset('dash/img/check-light.svg') }}"></span>
                                            <span class="">
                                                {{ $can_cancel?'Cancel':'Selected' }}
                                            </span>
                                        </a>


                                        @php
                                            $btn_cls = 'plan_get_started_btn'; // plan_get_started_btn

                                            if($defMethod){
                                                $btn_cls = 'plan_change_btn';
                                            }

                                        $class_b = $activeSub?(($activeSub->price_type == $cur_pl_period)?'d-none':''):'';


                                        @endphp
                                        <a data-plan-type="{{ $activeSub?(($activeSub->price_type == 'month')?'year':'month' ):'' }}" href="#" data-plan_id="{{ $plan->id }}" class="{{ $btn_cls }} {{ $class_b }} plan_btn btn btn--primary btn--md radius">
                                            <span class="info">Change Plan</span>
                                        </a>


                                    @else
                                        @php
                                            $btn_cls = 'plan_get_started_btn'; // plan_get_started_btn

                                            if($defMethod){
                                                $btn_cls = 'plan_change_btn';
                                            }
                                        @endphp
                                        <a href="#" data-plan_id="{{ $plan->id }}" class="{{ $btn_cls }} btn btn--primary btn--md radius">
                                            <span class="info">Change Plan</span>
                                        </a>
                                    @endif





                                </div>
                                @endforeach

                            </div>
                        </div>
                        <div class="compare-plans__body">
                            <div class="compare-plans__body-tr">
                                <div class="compare-plans__body-td">Websites - Domains</div>
                                @foreach($plans as $plan)
                                    <div class="compare-plans__body-td">{{ $plan->website_cnt }}</div>
                                @endforeach
                            </div>
                            <div class="compare-plans__body-tr">
                                <div class="compare-plans__body-td">Pages Views</div>
                                <div class="compare-plans__body-td">10.000</div>
                                <div class="compare-plans__body-td">unlimited</div>
                                <div class="compare-plans__body-td">unlimited</div>
                                <div class="compare-plans__body-td">unlimited</div>
                            </div>
                            <div class="compare-plans__body-tr">
                                <div class="compare-plans__body-td">GDPR, CCPA/CPRA, VCDPA, LGPD, POPIA</div>
                                <div class="compare-plans__body-td"><span class="status-availability"><img src="{{ asset('dash/img/icon-check-compare-plans.svg') }}"></span></div>
                                <div class="compare-plans__body-td"><span class="status-availability"><img src="{{ asset('dash/img/icon-check-compare-plans.svg') }}"></span></div>
                                <div class="compare-plans__body-td"><span class="status-availability"><img src="{{ asset('dash/img/icon-check-compare-plans.svg') }}"></span></div>
                                <div class="compare-plans__body-td"><span class="status-availability"><img src="{{ asset('dash/img/icon-check-compare-plans.svg') }}"></span></div>
                            </div>
                            <div class="compare-plans__body-tr">
                                <div class="compare-plans__body-td">Close banner button</div>
                                <div class="compare-plans__body-td"><span class="status-availability"><img src="{{ asset('dash/img/icon-check-compare-plans.svg') }}"></span></div>
                                <div class="compare-plans__body-td"><span class="status-availability"><img src="{{ asset('dash/img/icon-check-compare-plans.svg') }}"></span></div>
                                <div class="compare-plans__body-td"><span class="status-availability"><img src="{{ asset('dash/img/icon-check-compare-plans.svg') }}"></span></div>
                                <div class="compare-plans__body-td"><span class="status-availability"><img src="{{ asset('dash/img/icon-check-compare-plans.svg') }}"></span></div>
                            </div>
                            <div class="compare-plans__body-tr">
                                <div class="compare-plans__body-td">Pre-built banner templates</div>
                                <div class="compare-plans__body-td"><span class="status-availability"><img src="{{ asset('dash/img/icon-check-compare-plans.svg') }}"></span></div>
                                <div class="compare-plans__body-td"><span class="status-availability"><img src="{{ asset('dash/img/icon-check-compare-plans.svg') }}"></span></div>
                                <div class="compare-plans__body-td"><span class="status-availability"><img src="{{ asset('dash/img/icon-check-compare-plans.svg') }}"></span></div>
                                <div class="compare-plans__body-td"><span class="status-availability"><img src="{{ asset('dash/img/icon-check-compare-plans.svg') }}"></span></div>
                            </div>
                            <div class="compare-plans__body-tr">
                                <div class="compare-plans__body-td">Wordpress plugin integration</div>
                                <div class="compare-plans__body-td"><span class="status-availability"><img src="{{ asset('dash/img/icon-check-compare-plans.svg') }}"></span></div>
                                <div class="compare-plans__body-td"><span class="status-availability"><img src="{{ asset('dash/img/icon-check-compare-plans.svg') }}"></span></div>
                                <div class="compare-plans__body-td"><span class="status-availability"><img src="{{ asset('dash/img/icon-check-compare-plans.svg') }}"></span></div>
                                <div class="compare-plans__body-td"><span class="status-availability"><img src="{{ asset('dash/img/icon-check-compare-plans.svg') }}"></span></div>
                            </div>
                            <div class="compare-plans__body-tr">
                                <div class="compare-plans__body-td">Automatic Cookiens + Categorization of cookies</div>
                                <div class="compare-plans__body-td"><span class="status-availability"><img src="{{ asset('dash/img/icon-delete-compare-plans.svg') }}"></span></div>
                                <div class="compare-plans__body-td"><span class="status-availability"><img src="{{ asset('dash/img/icon-check-compare-plans.svg') }}"></span></div>
                                <div class="compare-plans__body-td"><span class="status-availability"><img src="{{ asset('dash/img/icon-check-compare-plans.svg') }}"></span></div>
                                <div class="compare-plans__body-td"><span class="status-availability"><img src="{{ asset('dash/img/icon-check-compare-plans.svg') }}"></span></div>
                            </div>
                            <div class="compare-plans__body-tr">
                                <div class="compare-plans__body-td">Multilanguage + Autotranslate with geotargeting</div>
                                <div class="compare-plans__body-td"><span class="status-availability"><img src="{{ asset('dash/img/icon-delete-compare-plans.svg') }}"></span></div>
                                <div class="compare-plans__body-td"><span class="status-availability"><img src="{{ asset('dash/img/icon-check-compare-plans.svg') }}"></span></div>
                                <div class="compare-plans__body-td"><span class="status-availability"><img src="{{ asset('dash/img/icon-check-compare-plans.svg') }}"></span></div>
                                <div class="compare-plans__body-td"><span class="status-availability"><img src="{{ asset('dash/img/icon-check-compare-plans.svg') }}"></span></div>
                            </div>
                            <div class="compare-plans__body-tr">
                                <div class="compare-plans__body-td">Custom Branding #Colours</div>
                                <div class="compare-plans__body-td"><span class="status-availability"><img src="{{ asset('dash/img/icon-delete-compare-plans.svg') }}"></span></div>
                                <div class="compare-plans__body-td"><span class="status-availability"><img src="{{ asset('dash/img/icon-check-compare-plans.svg') }}"></span></div>
                                <div class="compare-plans__body-td"><span class="status-availability"><img src="{{ asset('dash/img/icon-check-compare-plans.svg') }}"></span></div>
                                <div class="compare-plans__body-td"><span class="status-availability"><img src="{{ asset('dash/img/icon-check-compare-plans.svg') }}"></span></div>
                            </div>
                            <div class="compare-plans__body-tr">
                                <div class="compare-plans__body-td">Integration Google Tag Manager</div>
                                <div class="compare-plans__body-td"><span class="status-availability"><img src="{{ asset('dash/img/icon-delete-compare-plans.svg') }}"></span></div>
                                <div class="compare-plans__body-td"><span class="status-availability"><img src="{{ asset('dash/img/icon-check-compare-plans.svg') }}"></span></div>
                                <div class="compare-plans__body-td"><span class="status-availability"><img src="{{ asset('dash/img/icon-check-compare-plans.svg') }}"></span></div>
                                <div class="compare-plans__body-td"><span class="status-availability"><img src="{{ asset('dash/img/icon-check-compare-plans.svg') }}"></span></div>
                            </div>
                            <div class="compare-plans__body-tr">
                                <div class="compare-plans__body-td">Google Consent Mode</div>
                                <div class="compare-plans__body-td"><span class="status-availability"><img src="{{ asset('dash/img/icon-delete-compare-plans.svg') }}"></span></div>
                                <div class="compare-plans__body-td"><span class="status-availability"><img src="{{ asset('dash/img/icon-check-compare-plans.svg') }}"></span></div>
                                <div class="compare-plans__body-td"><span class="status-availability"><img src="{{ asset('dash/img/icon-check-compare-plans.svg') }}"></span></div>
                                <div class="compare-plans__body-td"><span class="status-availability"><img src="{{ asset('dash/img/icon-check-compare-plans.svg') }}"></span></div>
                            </div>
                            <div class="compare-plans__body-tr">
                                <div class="compare-plans__body-td">Cookie autoblocking</div>
                                <div class="compare-plans__body-td"><span class="status-availability"><img src="{{ asset('dash/img/icon-delete-compare-plans.svg') }}"></span></div>
                                <div class="compare-plans__body-td"><span class="status-availability"><img src="{{ asset('dash/img/icon-check-compare-plans.svg') }}"></span></div>
                                <div class="compare-plans__body-td"><span class="status-availability"><img src="{{ asset('dash/img/icon-check-compare-plans.svg') }}"></span></div>
                                <div class="compare-plans__body-td"><span class="status-availability"><img src="{{ asset('dash/img/icon-check-compare-plans.svg') }}"></span></div>
                            </div>
                            <div class="compare-plans__body-tr">
                                <div class="compare-plans__body-td">Privacy Policy + Terms Generator</div>
                                <div class="compare-plans__body-td"><span class="status-availability"><img src="{{ asset('dash/img/icon-delete-compare-plans.svg') }}"></span></div>
                                <div class="compare-plans__body-td"><span class="status-availability"><img src="{{ asset('dash/img/icon-check-compare-plans.svg') }}"></span></div>
                                <div class="compare-plans__body-td"><span class="status-availability"><img src="{{ asset('dash/img/icon-check-compare-plans.svg') }}"></span></div>
                                <div class="compare-plans__body-td"><span class="status-availability"><img src="{{ asset('dash/img/icon-check-compare-plans.svg') }}"></span></div>
                            </div>
                            <div class="compare-plans__body-tr">
                                <div class="compare-plans__body-td">Dashboard Tracking opt in opt out users</div>
                                <div class="compare-plans__body-td"><span class="status-availability"><img src="{{ asset('dash/img/icon-delete-compare-plans.svg') }}"></span></div>
                                <div class="compare-plans__body-td"><span class="status-availability"><img src="{{ asset('dash/img/icon-delete-compare-plans.svg') }}"></span></div>
                                <div class="compare-plans__body-td"><span class="status-availability"><img src="{{ asset('dash/img/icon-check-compare-plans.svg') }}"></span></div>
                                <div class="compare-plans__body-td"><span class="status-availability"><img src="{{ asset('dash/img/icon-check-compare-plans.svg') }}"></span></div>
                            </div>
                            <div class="compare-plans__body-tr">
                                <div class="compare-plans__body-td">Custom banner creation via HTML, CSS, and JavaScript</div>
                                <div class="compare-plans__body-td"><span class="status-availability"><img src="{{ asset('dash/img/icon-delete-compare-plans.svg') }}"></span></div>
                                <div class="compare-plans__body-td"><span class="status-availability"><img src="{{ asset('dash/img/icon-delete-compare-plans.svg') }}"></span></div>
                                <div class="compare-plans__body-td"><span class="status-availability"><img src="{{ asset('dash/img/icon-check-compare-plans.svg') }}"></span></div>
                                <div class="compare-plans__body-td"><span class="status-availability"><img src="{{ asset('dash/img/icon-check-compare-plans.svg') }}"></span></div>
                            </div>
                        </div>
                    </div>

                </div>
            </section>
        </main>



        <div id="subscriptions-form-popup" class="modal">
            <div class="modal__dialog modal__dialog--md tw-max-w-xl">
                <div class="modal__content">
                    <div class="modal__header">
                        <h3>Payment Cart Info</h3>
                        <a href="#" class="btn btn-close btn--square btn--light" data-close-modal="">
                            <img src="{{ asset('dash/img/ico-close.svg') }}">
                        </a>
                    </div>
                    <form class="popup_subscription_form subscribe-form">
                        @csrf
                        <input id="subscribe-subscription-plan" type="hidden" value="" name="subscription-plan">
                        <span class="d-none" id="user-data" data-period="" data-plan="" data-email="{{$currentUser->email}}"  data-name="{{$currentUser->name}}"></span>

                        <div class="form-group row gy-24 gx-16 tw-max-w-lg">
                            <div class="popup_input_line col-12 ">
                                <div class="form-group input--xl">
                                    <label for="email" class="label porfile-change__form-label">Card</label>
                                    <div id="cardNumber" class="input input--outline  tw-h-14"></div>
                                </div>
                            </div>
                          <div class=" grid tw-grid-cols-2 tw-gap-4">
                            <div class="popup_input_line col-12">
                                <div class="form-group input--xl">
                                    <label for="password" class="label porfile-change__form-label">Expiration</label>
                                    <div id="cardExp" class="input input--outline tw-h-14"></div>
                                </div>
                            </div>
                            <div class="popup_input_line col-12">
                                <div class="form-group input--xl">
                                    <label for="password" class="label porfile-change__form-label">CVC</label>
                                    <div id="cardCVC" class="input input--outline tw-h-14"></div>
                                </div>
                            </div>
                            <div>
                        </div>
                        <div class="mt-auto pt-5 pb-5 text-center">
                            <div class="porfile-change__form-btn-wrap">
                                <button type="submit" class="btn btn--primary btn--lg btn--lg-2">Subscribe</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>


        <x-footer-dashboard />
    </div>


@endsection



@push('scripts')
    <script>
        var STRIPE_PUB_KEY = "{{\App\Models\Setting::get('stripe_public_key')}}";
        var mainURL = "{{ url('/') }}";
    </script>
    <script src="https://js.stripe.com/v3/"></script>
    <script src="{{ asset('dash/js/dash-subscription-plans.js') }}"></script>
    <script src="{{ asset('js/payments.js') }}"></script>
@endpush