@php
    $annualMembership = App\Models\Membership::whereRaw('LOWER(TRIM(package_name)) = ?', [
        trim(strtolower('annual')),
    ])->first();
@endphp

@auth
@else
    <button id="modalButton_unauthenticated_subscription" data-modal-toggle="default-modal_unauthenticated_subscription"
        data-modal-target="default-modal_unauthenticated_subscription"></button>
    <div id="default-modal_unauthenticated_subscription" tabindex="-1" aria-hidden="true"
        class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] rounded-e-xl max-h-full">
        <div class="relative w-full max-w-2xl max-h-full p-4 modal_font">
            <!-- Modal content -->
            <div class="relative bg-white rounded-lg shadow">
                <img src="{{ url('assets/image/sub_modal_bg.png') }}" alt="" class="absolute bottom-0 w-1/4">
                <div class="relative">
                    <button type="button"
                        class="absolute z-[1] right-[15px] top-[10px] text-[#F42C56] ms-auto p-2 rounded-lg"
                        data-modal-hide="default-modal_unauthenticated_subscription">
                        <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                            viewBox="0 0 14 14">
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
                        </svg>
                        <span class="sr-only">Close modal</span>
                    </button>
                    <div class="relative w-full p-5">
                        <h2 class="text-3xl text-[#F42C56] mt-3 lg:mt-0 font-semibold mb-3">Unlock your love with Reshimgathee!

                        </h2>
                        <div class="grid grid-cols-6 lg:grid-cols-12">
                            <div class="col-span-6 mb-5">
                                <ul class="flex flex-col gap-2 ps-3">
                                    <li class="flex gap-2 align-middle text-md text-[#484848]"><img
                                            src="{{ url('assets/image/subscription icon (4).png') }}" alt=""
                                            width="16px" class="my-auto">Secure & Private</li>
                                    <li class="flex gap-2 align-middle text-md text-[#484848]"><img
                                            src="{{ url('assets/image/subscription icon (3).png') }}" alt=""
                                            width="16px" class="my-auto">Priority Support</li>
                                    <li class="flex gap-2 align-middle text-md text-[#484848]"><img
                                            src="{{ url('assets/image/subscription icon (2).png') }}" alt=""
                                            width="16px" class="my-auto">Unlimited Messaging
                                    </li>
                                    <li class="flex gap-2 align-middle text-md text-[#484848]"><img
                                            src="{{ url('assets/image/subscription icon (1).png') }}" alt=""
                                            width="16px" class="my-auto">Verified Profiles</li>
                                </ul>
                                <form action="" class="space-y-4">
                                    @if ($annualMembership)
                                        <div class="flex gap-1 mt-5 align-middle">
                                            <h2 class="text-3xl text-black">
                                                {{ $annualMembership->amount ? '$' . $annualMembership->amount : 'N/A' }}
                                            </h2>
                                            <p class="my-auto fw-bold text-[#515151] text-sm">
                                                @if (!$annualMembership || $annualMembership->duration === null)
                                                    N/A
                                                @elseif ($annualMembership->duration == 30)
                                                    /month
                                                @elseif ($annualMembership->duration == 365)
                                                    /year
                                                @else
                                                    /custom-duration
                                                @endif
                                            </p>
                                        </div>
                                        <p class="my-auto fw-bold text-[#515151] text-sm">
                                            @if (!$annualMembership || $annualMembership->amount === null || $annualMembership->duration === null)
                                                N/A
                                            @elseif ($annualMembership->duration == 30)
                                                ${{ $annualMembership->amount * 12 }} Billed annually
                                            @endif
                                        </p>
                                    @else
                                        <div class="flex gap-1 mt-5 align-middle">
                                            <h2 class="text-3xl text-black">
                                                N/A
                                            </h2>
                                            <p class="my-auto fw-bold text-[#515151] text-sm">/month</p>
                                        </div>
                                        <p class="my-auto fw-bold text-[#515151] text-sm">
                                            N/A Billed
                                            annually
                                        </p>
                                    @endif
                                    <a href="javascript:void(0);"
                                        class="p-2 py-[11px] mt-6 bg-[#F42C56] text-white w-full rounded-lg flex justify-center items-center mx-auto text-center"
                                        onclick="sessionStorage.setItem('lastForm', 'register'); location.reload();">
                                        Register Now
                                    </a>
                                </form>
                            </div>

                            <div class="hidden col-span-6 lg:block mt-12">
                                <img src="{{ url('assets/image/Subscription_img.png') }}" alt="" width="90%"
                                    class="-mt-12 ps-5">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endauth

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            let modalKey = 'subscription_modal_shown';
            let modalButton = document.getElementById('modalButton_authenticated_subscription') ||
                document.getElementById('modalButton_unauthenticated_subscription');

            if (!sessionStorage.getItem(modalKey) && modalButton) {
                setTimeout(function() {
                    modalButton.click();
                    sessionStorage.setItem(modalKey, 'true');
                }, 1000);
            }
        });
    </script>
@endpush