@extends('frontend.layouts.UserMain')

<title>{{ translate('Humsafar - Dashboard') }}</title>


@section('content')

<section class="flex-1 w-full relative">
    <div class="flex items-start w-full">
        <div class="flex-1 bg-white">
            @include('frontend.user.layouts.header')


            <div
            class="px-6 xs:px-10 sm:px-20 md:px-10 xl:px-[60px] pt-6 md:pt-20 w-full mt-10">
            <div class="w-full">
                <h3
                    class="text-black text-[22px] lg:text-[26px] xl:text-[30px] font-semibold mb-2.5 relative">
                    {{ translate('Membership
                    Required') }}

                    {{-- <img src="{{ asset('frontend/src/images/happy-face-emoji.png') }}"
                        alt="happy-face-emoji"
                        class="w-[50px] h-50px lg:w-[70px] lg:h-[70px] rounded-full absolute right-0 top-0"> --}}
                </h3>
                <p class="text-black text-sm font-medium">{{ translate('Please
                    select a membership plan to continue.') }}</p>
                <!-- ==package== -->
                <div
                    class="grid gap-5 grid-cols-1 min-[500px]:grid-cols-2 min-[850px]:grid-cols-3 lg:grid-cols-2 xl:grid-cols-3 mt-[50px]">
                    <!-- =item= -->

                    @foreach ($packages as $package)
                    @if($package->id == '1')
                        {{-- <a href="#">
                            <div
                                class="h-[86px] rounded-[5px] border-[1px] border-[#e2e2e2] flex items-center justify-center relative">
                                <h3
                                    class="text-black text-[32px] font-bold">${{$package->price}}</h3>
                                <span
                                    class="whitespace-nowrap px-2.5 py-1 bg-red-color rounded-[5px] text-xs font-bold text-white absolute right-5 -top-3">{{ translate('Unlimited') }}
                                    </span>
                            </div>
                            <p
                                class="mt-2.5 text-xs text-black font-normal">{{$package->name}}
                                Membership</p>
                        </a> --}}
                        @else
                        <a href="{{ route('buypackage', ['id' => $package->id]) }}">
                            <div
                                class="h-[86px] rounded-[5px] border-[1px] border-[#e2e2e2] flex items-center justify-center relative">


                                <h3 class="text-black text-[32px] font-bold">{{ formatCurrency($package->price, $currency) }}</h3>


                                <span
                                    class="whitespace-nowrap px-2.5 py-1 bg-red-color rounded-[5px] text-xs font-bold text-white absolute right-5 -top-3">{{$package->validity}} days
                                    </span>
                            </div>
                            <p
                                class="mt-2.5 text-xs text-black font-normal">{{$package->name}}
                                </p>
                        </a>
                        @endif
                    @endforeach

                    <!-- =item= -->


                </div>

                <!-- =extra-free-plan= -->

                @foreach ($packages as $package)
                @if($package->id == '1')
                {{-- <div
                    class="py-6 flex items-center justify-between gap-10  border-y-[1px] border-y-[#e2e2e2] mt-10">
                    <!-- =text= -->
                    <div class="flex-1">
                        <h4
                            class="mb-1 text-black text-base font-bold">{{$package->name}}
                            </h4>
                        <p
                            class="text-sm text-black font-normal">{{ translate('Unlimited') }}
                           </p>
                    </div>

                        <span style="color:red;" class="py-[11px] px-[32px] bg-gray-400 rounded-[5px] text-sm font-semibold text-white cursor-not-allowed">
                            {{ translate('Already Subscribed') }}
                        </span>
                </div> --}}
                @else

                <div
                    class="py-6 flex items-center justify-between gap-10  border-y-[1px] border-y-[#e2e2e2] mt-10">
                    <!-- =text= -->
                    <div class="flex-1">
                        <h4
                            class="mb-1 text-black text-base font-bold">{{$package->name}}
                            {{ translate('Membership') }}</h4>
                        <p
                            class="text-sm text-black font-normal">{{ translate('Unlimited') }}({{ formatCurrency($package->price, $currency) }})
                        </p>
                    </div>
                    <!-- =button= -->
                    <a href="{{ route('buypackage', ['id' => $package->id]) }}"
                        class="whitespace-nowrap py-[11px] px-[32px] bg-blue-color rounded-[5px] duration-300 hover:bg-red-color text-sm font-semibold text-white">{{ translate('Select') }}</a>
                </div>

                @endif
                @endforeach

            </div>

            <!-- ===small-device-footer=== -->
            <section
                class="xs:hidden w-full fixed bottom-0 left-0 flex items-center justify-center z-10 bg-white"
                style="box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.3);">
                <div
                    class="small_container flex items-center justify-between bg-white py-2.5 max-w-[400px] w-full  rounded-t-lg">
                    <!-- =left= -->
                    <div class="w-1/2 flex items-center gap-[25%]">
                        <a href="#"
                            class="flex flex-col items-center justify-center text-black gap-0 hover:text-red-color duration-300">
                            <i class="ri-home-6-line text-2xl"></i>
                            <p
                                class="text-[12px] font-semibold -mt-1">Home</p>
                        </a>
                        <button
                            class="flex flex-col items-center justify-center text-black gap-0 hover:text-red-color duration-300">
                            <i
                                class="ri-search-2-line text-2xl"></i>
                            <p
                                class="text-[12px] font-semibold -mt-1">Search</p>
                        </button>
                    </div>
                    <!-- =right= -->
                    <div
                        class="w-1/2 flex items-center gap-[25%] justify-end">
                        <a href="#"
                            class="flex flex-col items-center justify-center text-black gap-0 hover:text-red-color duration-300">
                            <i
                                class="ri-account-circle-line text-2xl"></i>
                            <p
                                class="text-[12px] font-semibold -mt-1">My
                                Account</p>
                        </a>
                        <button
                            class="flex flex-col items-center justify-center text-black gap-0 hover:text-red-color duration-300">
                            <i
                                class="ri-message-3-line text-2xl"></i>
                            <p
                                class="text-[12px] font-semibold -mt-1">Blog</p>
                        </button>
                    </div>
                    <!-- =add-button= -->
                    <button
                        class="w-[50px] h-[50px] rounded-full bg-blue-color absolute left-1/2 text-white -translate-x-1/2 -top-6 flex items-center justify-center duration-300 hover:bg-red-color"
                        style="box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.3);">
                        <svg width="20" height="20"
                            viewBox="0 0 20 20"
                            fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd"
                                clip-rule="evenodd"
                                d="M19.4922 10C19.4922 10.5477 19.0482 10.9917 18.5005 10.9917L1.50052 10.9917C0.952837 10.9917 0.508854 10.5477 0.508854 10C0.508854 9.45235 0.952837 9.00837 1.50052 9.00837L18.5005 9.00837C19.0482 9.00837 19.4922 9.45235 19.4922 10Z"
                                fill="white" />
                            <path fill-rule="evenodd"
                                clip-rule="evenodd"
                                d="M10.0005 0.508301C10.5482 0.508301 10.9922 0.952285 10.9922 1.49997L10.9922 18.5C10.9922 19.0477 10.5482 19.4916 10.0005 19.4916C9.45284 19.4916 9.00885 19.0477 9.00885 18.5L9.00885 1.49997C9.00885 0.952285 9.45284 0.508301 10.0005 0.508301Z"
                                fill="white" />
                        </svg>
                    </button>
                </div>
            </section>
        </div>


        </div>
    </div>

</section>
@endsection


@push('scripts')


@endpush