@props(['className' => 'py-120'])
@php
    $pricingContent = getContent('pricing.content', true);
    $plans = App\Models\Plan::active()->get();
@endphp
<section class="pricing {{ $className }} bg-img" data-background-image="{{ asset(activeTemplate(true) . 'images/thumbs/pricing/bg.png') }}">
    <div class="container">
        <div class="section-heading">
            <div class="section-heading__tagline" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
                <span class="text--gradient"> {{ __($pricingContent?->data_values?->heading ?? '') }}</span>
            </div>
            <h2 class="section-heading__title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="200">
                {{ __($pricingContent?->data_values?->subheading ?? '') }}
            </h2>
            <p class="section-heading__desc" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="300">
                {{ __($pricingContent?->data_values?->short_description ?? '') }}
            </p>
        </div>

        <div class="pricing-bp" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="400">
            <input class="pricing-bp__input visually-hidden plan-interval" type="checkbox" name="pricing-bp" id="pricing-bp">
            <label class="pricing-bp__label monthly" for="pricing-bp">@lang('Monthly')</label>
            <label class="pricing-bp__label yearly" for="pricing-bp">@lang('Yearly')</label>
        </div>


        <div class="row justify-content-center gy-4">
            @foreach ($plans as $plan)
                <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="500">
                    <div class="pricing-card @if (auth()->check() && auth()->user()->plan_id == $plan->id && auth()->user()->expired_date >= now()) active @endif">
                        @if (auth()->check() && auth()->user()->plan_id == $plan->id && auth()->user()->expired_date >= now())
                            <span class="pricing-card__ribbon">
                                <svg width="100%" fill="none" viewBox="0 0 20 20" class="pricing-badge-icon">
                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                                          d="m10.75 2.5-7.5 9H10l-.75 6 7.5-9H10l.75-6Z">
                                    </path>
                                </svg>
                                @lang('Expire this after') {{ diffForHumans(auth()->user()->expired_date) }}
                            </span>
                        @endif
                        <div class="pricing-card__header">
                            <h6 class="pricing-card__title">{{ __($plan->name) }}</h6>
                            <h3 class="pricing-card__price monthly-price">
                                <span class="pricing-card__symbol">{{ gs('cur_sym') }}</span>
                                <span class="pricing-card__total">{{ showAmount($plan->monthly_price, currencyFormat: false) }}</span>
                                <span class="pricing-card__priod">/ @lang('Monthly')</span>
                            </h3>
                            <h3 class="pricing-card__price yearly-price d-none">
                                <span class="pricing-card__symbol">{{ gs('cur_sym') }}</span>
                                <span class="pricing-card__total">{{ showAmount($plan->yearly_price, currencyFormat: false) }}</span>
                                <span class="pricing-card__priod">/ @lang('Yearly')</span>
                            </h3>
                            <p class="pricing-card__desc">{{ __($plan->short_description) }}</p>
                        </div>
                        <div class="pricing-card__body">
                            <div class="pricing-card-block">
                                <span class="pricing-card-block__label">
                                    @lang('Includes:')
                                </span>
                                <ul class="pricing-card-info">
                                    <li class="pricing-card-info__item">
                                        <p class="text monthly-credit">
                                            @lang('Create up to ') <span class="fw-semibold">{{ getAmount($plan->monthly_limit) }}</span> @lang(' websites per month')
                                        </p>
                                        <p class="text yearly-credit d-none">
                                            @lang('Create up to ') <span class="fw-semibold">{{ getAmount($plan->yearly_limit) }}</span> @lang(' websites per year')
                                        </p>
                                    </li>
                                    <li class="pricing-card-info__item">
                                        @lang('Max ') {{ $plan->max_page }} @lang(' pages per website')
                                    </li>
                                    <li class="pricing-card-info__item">
                                        @lang('Max ') {{ $plan->max_sections }} @lang(' sections per page')
                                    </li>
                                    <li class="pricing-card-info__item">
                                        @lang('AI-powered website generation')
                                    </li>
                                    <li class="pricing-card-info__item">
                                        @lang('Fully mobile-responsive website designs')
                                    </li>
                                    <li class="pricing-card-info__item">
                                        @lang('No daily usage limits')
                                    </li>
                                    <li class="pricing-card-info__item">
                                        @lang('Lifetime data availability')
                                    </li>
                                    <li class="pricing-card-info__item">
                                        @lang('Priority generation queue')
                                    </li>
                                    <li class="pricing-card-info__item">
                                        @lang('Dedicated priority support')
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="pricing-card__footer">
                            @auth
                                <button class="w-100 btn btn--lg btn-soft--white subscribeBtn" type="button" data-plan_id="{{ $plan->id }}">
                                    @lang('Subscribe')
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                                         stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                         class="lucide lucide-move-right-icon lucide-move-right">
                                        <path d="M18 8L22 12L18 16" />
                                        <path d="M2 12H22" />
                                    </svg>
                                </button>
                            @else
                                <button class="w-100 btn btn--lg btn-soft--white loginBtn" type="button">
                                    @lang('Subscribe')
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                                         stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                         class="lucide lucide-move-right-icon lucide-move-right">
                                        <path d="M18 8L22 12L18 16" />
                                        <path d="M2 12H22" />
                                    </svg>
                                </button>
                            @endauth
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</section>


<div class="modal custom--modal fade" id="loginModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title">@lang('Login Required to Subscribe')</h6>
                <button class="btn btn--close" data-bs-dismiss="modal" aria-label="Close">
                </button>
            </div>
            <div class="modal-body">
                <p class="text-center">@lang('Please log in to your account to subscribe to a plan and unlock full access to all features.')</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn--danger btn--sm" data-bs-dismiss="modal">@lang('Close')</button>
                <a href="{{ route('user.login') }}" class="btn btn--base btn--sm">@lang('Login')</a>
            </div>
        </div>
    </div>
</div>

<div class="modal custom--modal fade" id="subscriptionModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title">@lang('Confirm Subscription!')</h6>
                <button class="btn btn--close" data-bs-dismiss="modal" aria-label="Close">
                </button>
            </div>
            <form method="POST">
                @csrf
                <div class="modal-body">
                    <p class="text-center">@lang('Are you sure to subscribe this plan?')</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn--danger btn--sm" data-bs-dismiss="modal">@lang('No')</button>
                    <button type="submit" class="btn btn--base btn--sm">@lang('Yes')</button>
                </div>
            </form>
        </div>
    </div>
</div>



@push('script')
    <script>
        (function($) {
            "use strict";

            let monthlyPrice = $('.monthly-price');
            let yearlyPrice = $('.yearly-price');
            let monthlyCredit = $('.monthly-credit');
            let yearlyCredit = $('.yearly-credit');
            let monthlyExpired = $('.monthly-expired');
            let yearlyExpired = $('.yearly-expired');


            $('.plan-interval').on('change', function() {
                if ($(this).prop('checked')) {
                    monthlyPrice.addClass('d-none')
                    monthlyCredit.addClass('d-none')
                    monthlyExpired.addClass('d-none')
                    yearlyPrice.removeClass('d-none')
                    yearlyCredit.removeClass('d-none')
                    yearlyExpired.removeClass('d-none')
                } else {
                    monthlyPrice.removeClass('d-none')
                    monthlyCredit.removeClass('d-none')
                    monthlyExpired.removeClass('d-none')
                    yearlyPrice.addClass('d-none')
                    yearlyCredit.addClass('d-none')
                    yearlyExpired.addClass('d-none')
                }
            }).change();

            $('.subscribeBtn').on('click', function(e) {
                e.preventDefault();
                let planInterval = $('.plan-interval').prop('checked') ? 1 : 0;
                let route = `{{ route('user.subscribe.plan', '') }}/${$(this).data('plan_id')}/${planInterval}`;
                let subscribeModal = $('#subscriptionModal');
                subscribeModal.find('form').attr('action', route);
                subscribeModal.modal('show');
            });
            $('.loginBtn').on('click', function(e) {
                e.preventDefault();
                let modal = $('#loginModal');
                modal.modal('show');
            });
        })(jQuery)
    </script>
@endpush
