@props(['auth' => false])
@php
    $pricingContent = getContent('pricing.content', true);
    $plans = App\Models\Plan::active()->get();
    $writingAssistant = App\Models\WritingAssistant::active()->count();
@endphp

@if (!$auth)
<section class="pricing-section my-120">
    <div class="container">
@endif

        <div class="row justify-content-center">
            <div class="col-lg-6">
                <div class="section-title text-center">
                    <span class="btn btn--base btn--section animate" data-direction="up">
                        {{ __($pricingContent?->data_values?->heading ?? '') }}
                    </span>
                    <h2 class="main-title animate" data-direction="down">{{ __($pricingContent?->data_values?->subheading ?? '') }}</h2>
                    <p class="sub-title animate" data-direction="down">{{ __($pricingContent?->data_values?->short_details ?? '') }}</p>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="tabsContainer">
                <div class="pricing-tab my-60">
                    <div class="pricing-tab__switch">
                        <label for="plan-switch">@lang('Monthly')</label>
                        <div class="form-check mb-0 form-switch form--switch">
                            <input class="form-check-input plan-interval" type="checkbox" role="switch" id="plan-switch">
                        </div>
                        <label for="plan-switch">@lang('Yearly')</label>
                    </div>
                </div>
                <div class="tabsContentContainer">
                    <div class="contentBox">
                        <div class="row gy-4 justify-content-center">
                            @foreach ($plans as $plan)
                                <div class="col-xl-4 col-lg-6 col-md-6">
                                    <div class="pricing-cart animate">
                                        <div class="pricing-header">
                                            <div class="pricing-icon">
                                                <i class="{{ $plan->icon }}"></i>
                                            </div>
                                            <div class="pricing-content">
                                                <h5 class="pricing-title mb-0">{{ __($plan->name) }}</h5>
                                                <p class="pricing-subtitle monthly-title">@lang('Monthly')</p>
                                                <p class="pricing-subtitle yearly-title d-none">@lang('Yearly')</p>
                                                <div class="pricing-price d-flex align-items-end">
                                                    <h6 class="mb-0 monthly-price">{{ gs('cur_sym') }}{{ showAmount($plan->monthly_price, currencyFormat: false) }}</h6>
                                                    <h6 class="mb-0 yearly-price d-none">{{ gs('cur_sym') }}{{ showAmount($plan->yearly_price, currencyFormat: false) }}</h6>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="pricing-list">
                                            <h6>@lang('What`s included')</h6>
                                            <ul>
                                                <li>
                                                    <p class="monthly-credit">
                                                        <span class="fw-semibold">{{ getAmount($plan->monthly_credit) }}</span> @lang('AI credits for content generation')
                                                    </p>
                                                    <p class="yearly-credit d-none">
                                                        <span class="fw-semibold">{{ getAmount($plan->yearly_credit) }}</span> @lang('AI credits for content generation')
                                                    </p>
                                                </li>
                                                <li class="monthly-expired">
                                                    @if ($plan->monthly_expired_days < 0)
                                                        <p>@lang('Data available for lifetime')</p>
                                                    @else
                                                        <p class="monthly-expired">@lang('Data available for ') <span class="fw-semibold">{{ $plan->monthly_expired_days }}</span> @lang('days')</p>
                                                    @endif
                                                </li>
                                                <li class="yearly-expired d-none">
                                                    @if ($plan->yearly_expired_days < 0)
                                                        <p>@lang('Data available for lifetime')</p>
                                                    @else
                                                        <p>@lang('Data available for ') <span class="fw-semibold">{{ $plan->yearly_expired_days }}</span> @lang('days')</p>
                                                    @endif
                                                </li>
                                                <li>
                                                    <p>@lang('No daily limit')</p>
                                                </li>
                                                <li>
                                                    <p>{{ __('Free access :template writing assistant', ['template' => getAmount($writingAssistant)]) }}</p>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="pricing-btn">
                                            @auth
                                                <button class="w-100 btn btn--gray subscribeBtn" data-plan_id="{{ $plan->id }}" type="submit">
                                                    @lang('Subscribe')
                                                </button>
                                            @else
                                                <button class="w-100 btn btn--gray loginBtn" type="button">
                                                    @lang('Subscribe')
                                                </button>
                                            @endauth
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>

        </div>

        @if(!$auth)
    </div>
</section>
@endif



<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-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--md" data-bs-dismiss="modal">@lang('Close')</button>
                <a href="{{ route('user.login') }}" class="btn btn--base btn--md">@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-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--md" data-bs-dismiss="modal">@lang('No')</button>
                    <button type="submit" class="btn btn--base btn--md">@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');
            let monthlyTitle = $('.monthly-title');
            let yearlyTitle = $('.yearly-title');


            $('.plan-interval').on('change', function() {
                if ($(this).prop('checked')) {
                    monthlyPrice.addClass('d-none')
                    monthlyCredit.addClass('d-none')
                    monthlyExpired.addClass('d-none')
                    monthlyTitle.addClass('d-none')
                    yearlyPrice.removeClass('d-none')
                    yearlyCredit.removeClass('d-none')
                    yearlyExpired.removeClass('d-none')
                    yearlyTitle.removeClass('d-none')
                } else {
                    monthlyPrice.removeClass('d-none')
                    monthlyCredit.removeClass('d-none')
                    monthlyExpired.removeClass('d-none')
                    monthlyTitle.removeClass('d-none')
                    yearlyPrice.addClass('d-none')
                    yearlyCredit.addClass('d-none')
                    yearlyExpired.addClass('d-none')
                    yearlyTitle.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