<x-layouts.app>
    <style>
        .cursor-wait {
            cursor:wait;
        }
        input.error {
            border-color: red;
        }

        .error {
            color:red;
        }

        .error-box {
            background-color: #d84c4c;
            padding: 10px;
            border-radius: 5px;
            color: white;
        }

        .loading {
            background-color: rgba(10, 18, 29, 0.8);
            left: 0;
        }

        .loader {
            left:0;
            width: 48px;
            height: 48px;
            border: 5px solid #28c1f5;
            border-bottom-color: transparent;
            border-radius: 50%;
            display: inline-block;
            box-sizing: border-box;
            animation: rotation 1s linear infinite;
            margin: auto;
        }

        @keyframes rotation {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }
    </style>
    <div x-data="app()" x-on:remove-loading.window="removeLoading()" x-cloak class="relative min-h-screen pt-10 pb-10 overflow-visible" style="background: linear-gradient(0deg, rgb(37 37 37 / 70%), rgb(0 0 0 / 86%)), url({{theme("img/vod-bg.png")}});">
        <!-- select profile -->
        <div x-cloak x-show="layer=='profiles'" class="flex flex-col mt-20">
            <h1 class="text-slate-200 font-bold text-2xl block mb-5 text-center w-full p-4">چه کسی تماشا می‌کند؟</h1>
            <div class="flex gap-10 flex-wrap justify-center items-center">
                @foreach($this->profiles as $item)
                    @php
                        $age = $item->age_range;
                        $image = match ($age) {
                            null => theme('img/profile2.png'),
                            18,'18' => theme('img/kids-18.png'),
                            15,'15' => theme('img/kids-15.png'),
                            12,'12' => theme('img/kids-12.png'),
                            7,'7' => theme('img/kids-7.png')
                        }
                    @endphp
                    <div class="flex flex-col items-center justify-center cursor-pointer relative">
                        <div class="w-40 h-40 bg-[#37383e] rounded-lg overflow-hidden relative">
                            <img @click="selectProfile({{$item->id}})" src="{{$image}}"  style="background-color:darkgrey">
                            <div x-cloak x-show="edit" wire:click="editProfile({{$item->id}})" wire:loading.remove wire:target="editProfile({{$item->id}})" class="absolute bg-[#37383e] top-0 bottom-0 right-0 left-0 bg-opacity-50 flex justify-center items-center">
                                <svg  width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg" class="Component-edit-0-1-2710">
                                    <g><path d="M41.3647 26.1352L33.8623 18.6328L17.2647 35.2304L24.7671 42.7328L41.3647 26.1352Z" fill="white"></path><path d="M44.6789 15.3187C45.6738 16.3136 46.2327 17.6629 46.2327 19.0699C46.2327 20.4769 45.6738 21.8262 44.6789 22.8211L43.0066 24.4934L35.5042 16.991L37.1765 15.3187C38.1714 14.3238 39.5208 13.7649 40.9277 13.7649C42.3347 13.7649 43.6841 14.3238 44.6789 15.3187V15.3187Z" fill="white"></path><path d="M15.1453 46.5126L23.1254 44.3751L15.6254 36.8751L13.4878 44.8551C13.4268 45.0845 13.4273 45.3259 13.489 45.5552C13.5507 45.7844 13.6715 45.9933 13.8393 46.1612C14.0072 46.329 14.216 46.4498 14.4452 46.5115C14.6745 46.5732 14.9159 46.5736 15.1453 46.5126Z" fill="white"></path></g><defs><clipPath id="clip0"><rect width="60" height="60" fill="white"></rect></clipPath></defs>
                                </svg>
                            </div>
                            <div x-cloak wire:loading wire:target="editProfile({{$item->id}})" class="absolute bg-[#37383e] top-0 bottom-0 right-0 left-0 bg-opacity-50 flex justify-center items-center">
                                <span class="loader absolute right-0 left-0 top-0 bottom-0"></span>
                            </div>
                        </div>
                        <div @click="selectProfile({{$item->id}})" class="absolute bg-white text-black font-bold rounded-lg px-3 flex justify-center leading-[2]" style="top:10px;right:10px;width: max-content;">
                            {{($age == null) ? "بزرگسال" : "زیر {$age} سال"}}
                        </div>
                        <span @click="selectProfile({{$item->id}})" class="p-4 text-slate-200 text-center w-full">{{$item->name}}</span>
                    </div>
                @endforeach
                @if($this->getProfilesCount < 3)
                    <div wire:loading.remove wire:target="createProfile()" wire:click="createProfile()" class="flex flex-col items-center justify-center cursor-pointer">
                        <div class="w-40 h-40 bg-[#37383e] rounded-lg overflow-hidden flex items-center justify-center">
                            <svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 40 40" class="">
                                <path class="fill-white" d="M31.56 18.64H21.4V8.48a1.4 1.4 0 0 0-2.39-.99 1.4 1.4 0 0 0-.41.99v10.16H8.44a1.4 1.4 0 0 0-1.4 1.4 1.4 1.4 0 0 0 1.4 1.4H18.6V31.6a1.4 1.4 0 0 0 1.4 1.4 1.4 1.4 0 0 0 1.4-1.4V21.44h10.16a1.4 1.4 0 0 0 1.4-1.4 1.4 1.4 0 0 0-1.4-1.4z"></path>
                            </svg>
                        </div>
                        <span class="p-4 text-slate-200 text-center w-full">افزودن</span>
                    </div>

                    <div wire:loading.flex wire:target="createProfile()" class="flex flex-col items-center justify-center cursor-pointer">
                        <div class="w-40 h-40 bg-[#37383e] rounded-lg overflow-hidden flex items-center justify-center relative">
                            <span class="loader absolute right-0 left-0 top-0 bottom-0"></span>
                        </div>
                        <span class="p-4 text-slate-200 text-center w-full">افزودن</span>
                    </div>
                @endif
            </div>

            <button x-cloak x-show="!edit" @click="edit=true" class="bg-[#37383e] rounded-md max-w-fit py-3 px-5 m-auto mt-10 flex gap-2">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="">
                    <path class="svg-c1" fill-rule="evenodd" clip-rule="evenodd" d="M10.4167 12.5734C9.00811 12.5734 7.86632 11.4212 7.86632 10C7.86632 8.57871 9.00811 7.42646 10.4167 7.42646C11.8252 7.42646 12.967 8.57871 12.967 10C12.967 11.4212 11.8252 12.5734 10.4167 12.5734ZM16.5858 11.1736C16.4097 11.0018 16.3234 10.759 16.3444 10.5127C16.3588 10.342 16.3663 10.1693 16.3663 9.99485C16.3663 9.82482 16.3592 9.65654 16.3453 9.49014C16.3246 9.24405 16.4109 9.00161 16.5868 8.82994L17.2541 8.1789C17.5201 7.91939 17.577 7.51054 17.3919 7.18728L16.8559 6.25025L16.3198 5.31335C16.1348 4.99009 15.7555 4.83523 15.3998 4.93788L14.5132 5.19388C14.2773 5.2619 14.0252 5.21559 13.8243 5.07354C13.5452 4.87639 13.2486 4.70284 12.9373 4.55564C12.7158 4.45098 12.5508 4.25409 12.4914 4.01466L12.2688 3.11615C12.1792 2.75399 11.8567 2.5 11.4867 2.5H10.4144H9.34228C8.9723 2.5 8.64982 2.75399 8.56015 3.11615L8.33754 4.01466C8.27822 4.25409 8.11318 4.45098 7.89169 4.55564C7.5809 4.70259 7.28479 4.87589 7.00621 5.07266C6.80524 5.21446 6.55315 5.26077 6.31736 5.19275L5.43362 4.93763C5.07794 4.83486 4.6985 4.98971 4.51357 5.3131L3.97756 6.25L3.44142 7.1869C3.25637 7.51016 3.3132 7.91901 3.57922 8.17852L4.24246 8.82567C4.41843 8.99734 4.50462 9.24004 4.48397 9.486C4.46992 9.65377 4.46271 9.82344 4.46271 9.99485C4.46271 10.1708 4.47017 10.3447 4.48497 10.5168C4.50611 10.7631 4.41968 11.006 4.24357 11.1778L3.58357 11.8217C3.31755 12.0812 3.26072 12.4901 3.44577 12.8133L3.98191 13.7503L4.51805 14.6873C4.70298 15.0105 5.08229 15.1654 5.43797 15.0626L6.3293 14.8054C6.56472 14.7375 6.81618 14.7834 7.01703 14.9246C7.29176 15.1176 7.58314 15.2879 7.88883 15.4326C8.11032 15.5375 8.27536 15.7342 8.33455 15.9737L8.56015 16.8837C8.64982 17.2459 8.9723 17.5 9.34228 17.5H10.4144H11.4867C11.8567 17.5 12.1792 17.2459 12.2688 16.8837L12.4944 15.9737C12.5536 15.7342 12.7187 15.5375 12.9402 15.4327C13.2463 15.2876 13.5383 15.1171 13.8133 14.9237C14.0143 14.7824 14.2659 14.7362 14.5013 14.8042L15.3954 15.0622C15.751 15.165 16.1304 15.0102 16.3154 14.6869L16.8514 13.75L17.3876 12.813C17.5726 12.4897 17.5158 12.0809 17.2498 11.8214L16.5858 11.1736Z" fill="white"></path>
                </svg>
                <span class="text-white">ویرایش پروفایل</span>
            </button>

            <button x-cloak x-show="edit" x-on:click="edit=false" class="bg-[#37383e] rounded-md max-w-fit py-3 px-5 m-auto mt-10 flex gap-2 mb-20 items-center">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="12" cy="12" r="12" fill=""></circle><path d="M12.2929 5.29289C11.9324 5.65338 11.9047 6.22061 12.2097 6.6129L12.2929 6.70711L16.585 11H5C4.44771 11 4 11.4477 4 12C4 12.5523 4.44771 13 5 13H16.585L12.2929 17.2929C11.9324 17.6534 11.9047 18.2206 12.2097 18.6129L12.2929 18.7071C12.6534 19.0676 13.2206 19.0953 13.6129 18.7903L13.7071 18.7071L19.7071 12.7071C19.7425 12.6717 19.7747 12.6343 19.8037 12.5953L19.8753 12.4841L19.9288 12.3713L19.9642 12.266L19.989 12.1485L19.996 12.0898L20 12L19.9972 11.9248L19.9798 11.7993L19.9503 11.6879L19.9063 11.5768L19.854 11.4793L19.7903 11.3871L19.7071 11.2929L13.7071 5.29289C13.3166 4.90237 12.6834 4.90237 12.2929 5.29289Z" fill="white"></path>
                </svg>
                <span class="text-white">بازگشت</span>
            </button>

        </div>
        <!-- edit profile -->
        <div x-show="layer=='edit'" class="w-full sm:max-w-2xl mt-20 rounded-2xl p-5 z-10 shadow-[0_4px_30px_rgba(0,0,0,0.1)] backdrop-blur [-webkit-backdrop-filter:_blur(8px)] bg-[#222327] m-auto">
            <form class="text-slate-200" wire:submit="updateProfile">
                <div x-on:click="layer='profiles'" type="button" class="hover:bg-white/5 text-slate-300 rounded-lg py-2 px-4 text-center font-medium cursor-pointer transition-all flex items-center justify-center gap-2">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" class=" fill-slate-300">
                        <path d="M23.445,10.931l-4.672-4.627C18.116,5.653,17,6.118,17,7.043V10h-3c-1.105,0-2,0.895-2,2s0.895,2,2,2h3v2.957 c0,0.925,1.116,1.39,1.773,0.739l4.672-4.627C24.04,12.48,24.04,11.52,23.445,10.931z"></path>
                        <circle cx="8" cy="12" r="2" opacity=".35"></circle>
                        <circle cx="2" cy="12" r="2" opacity=".35"></circle>
                    </svg>
                    <p>ویرایش پروفایل</p>
                </div>

                <div class="flex flex-col gap-5" x-data="{ age: @entangle('age_range').live, secure:@entangle('secure').live }">
                    <div class="mb-2">
                        <div class="text-base font-bold py-3 text-slate-200 text-right">
                            نام پروفایل
                        </div>
                        <div class="relative">
                            <input wire:model="name" type="text" class="@error('name') error @enderror bg-[#121212] border border-gray-900 focus:outline-none text-gray-400 text-sm rounded-lg block w-full p-2.5" placeholder="اینجا بنویسید ...">
                        </div>
                        <div>
                            @error('name') <span class="text-red-400">{{ $message }}</span> @enderror
                        </div>
                    </div>

                    <div class="py-3 flex gap-2">
                        <div class="text-base font-bold text-slate-200 text-right">
                            لطفا رده سنی را مشخص کنید
                        </div>
                    </div>

                    <div class="relative flex items-center justify-center space-x-4 scrollbar">

                        <div class="absolute top-1/2 left-0 right-0 transform -translate-y-1/2 h-1 bg-gray-600 bg-opacity-70">
                            <div :class="age ? 'bg-yellow-500' : 'bg-gray-600 bg-opacity-70'"
                                 class="h-full transition-all duration-300"
                                 :style="'width: ' + (age === '7' ? '10%' : age === '12' ? '25%' : age === '15' ? '50%' : age === '18' ? '73%' : age === 'adult' ? '100%' : '0%')"></div>
                        </div>

                        <label class="relative flex flex-col items-center cursor-pointer rounded-full" :class="age === '7' ? 'ring-4 ring-yellow-500' : ''">
                            <input wire:model="age_range" type="radio"  name="age_range" value="7" x-model="age" class="hidden" />
                            <div class="w-16 h-16 sm:w-24 sm:h-24 rounded-full bg-cover bg-center flex items-center justify-center"
                                 style="background-image: url('{{theme('img/kids-7.png')}}');">
                                <div class="absolute inset-0 bg-black opacity-70 rounded-full"  :class="age === '7' ? 'bg-yellow-500' : ''"></div>
                                <span class="relative z-10 font-bold text-xs sm:text-sm" :class="age === '7' ? 'text-black' : ''">زیر ۷ سال</span>
                            </div>
                        </label>

                        <label class="relative flex flex-col items-center cursor-pointer rounded-full" :class="age === '12' ? 'ring-4 ring-yellow-500' : ''">
                            <input type="radio" wire:model="age_range" name="age_range" value="12" x-model="age" class="hidden" />
                            <div class="w-16 h-16 sm:w-24 sm:h-24 rounded-full bg-cover bg-center flex items-center justify-center"
                                 style="background-image: url('{{theme('img/kids-12.png')}}');">
                                <div class="absolute inset-0 bg-black opacity-70 rounded-full"  :class="age === '12' ? 'bg-yellow-500' : ''"></div>
                                <span class="relative z-10 font-bold text-xs sm:text-sm" :class="age === '12' ? 'text-black' : ''">زیر ۱۲ سال</span>
                            </div>
                        </label>

                        <label class="relative flex flex-col items-center cursor-pointer rounded-full" :class="age === '15' ? 'ring-4 ring-yellow-500' : ''">
                            <input type="radio" wire:model="age_range"  name="age_range" value="15" x-model="age" class="hidden" />
                            <div class="w-16 h-16 sm:w-24 sm:h-24 rounded-full bg-cover bg-center flex items-center justify-center"
                                 style="background-image: url('{{theme('img/kids-15.png')}}');">
                                <div class="absolute inset-0 bg-black opacity-70 rounded-full"  :class="age === '15' ? 'bg-yellow-500' : ''"></div>
                                <span class="relative z-10 font-bold text-xs sm:text-sm" :class="age === '15' ? 'text-black' : ''">زیر ۱۵ سال</span>
                            </div>
                        </label>

                        <label class="relative flex flex-col items-center cursor-pointer rounded-full" :class="age === '18' ? 'ring-4 ring-yellow-500' : ''">
                            <input type="radio" wire:model="age_range" name="age_range" x-model="age" value="18" class="hidden" />
                            <div class="w-16 h-16 sm:w-24 sm:h-24 rounded-full bg-cover bg-center flex items-center justify-center"
                                 style="background-image: url('{{theme('img/kids-18.png')}}');">
                                <div class="absolute inset-0 bg-black opacity-70 rounded-full"  :class="age === '18' ? 'bg-yellow-500' : ''"></div>
                                <span class="relative z-10 font-bold text-xs sm:text-sm" :class="age === '18' ? 'text-black' : ''">زیر ۱۸ سال</span>
                            </div>
                        </label>


                        <label class="relative flex flex-col items-center cursor-pointer rounded-full" :class="age === 'adult' ? 'ring-4 ring-yellow-500' : ''">
                            <input type="radio" wire:model="age_range" name="age_range" value="adult" x-model="age" class="hidden" />
                            <div class="w-16 h-16 sm:w-24 sm:h-24 rounded-full bg-cover bg-center flex items-center justify-center"
                                 style="background-image: url('{{theme('img/profile2.png')}}');">
                                <div class="absolute inset-0 bg-black opacity-70 rounded-full"  :class="age === 'adult' ? 'bg-yellow-500' : ''"></div>
                                <span class="relative z-10 font-bold text-xs sm:text-sm" :class="age === 'adult' ? 'text-black' : ''">بزرگسال</span>
                            </div>
                        </label>
                    </div>
                    <div>
                        @error('age_range') <span class="text-red-400">{{ $message }}</span> @enderror
                    </div>

                    <label class="flex justify-between items-center cursor-pointer">
                        <span class="text-sm font-medium text-gray-900 dark:text-gray-300">قفل کردن پروفایل
                            <span  x-cloak x-show="!secure" class="text-red-400"> : غیر فعال</span>
                            <span  x-cloak x-show="secure" class="text-green-400"> : فعال</span>
                        </span>
                        <input type="checkbox" x-model="secure" class="sr-only peer">
                        <div class="relative w-11 h-6 bg-[#121212] peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-yellow-300  rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-yellow-300 after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-gray-700 after:border-gray-700 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-yellow-500"></div>
                    </label>
                    <p class="text-sm">درصورت فعال کردن قفل برای ورود به پروفایل نیاز به وارد کردن رمز عبور می باشد</p>

                    <div x-show="secure">
                        <div class="text-base py-3 font-bold text-slate-200 text-right">
                            یک رمز عبور  تعریف کنید
                        </div>
                        <div class="relative">
                            <input wire:model="password" type="password" class="@error('password') error @enderror bg-[#121212] border border-gray-900 focus:outline-none text-gray-400 text-sm rounded-lg block w-full p-2.5" placeholder="">
                        </div>
                        <div>
                            @error('password') <span class="text-red-400">{{ $message }}</span> @enderror
                        </div>
                    </div>

                    <div class="flex mt-6 gap-2">
                        <button type="submit"
                                class=" w-full bg-blue-500 text-white rounded-lg py-3 px-5 text-center font-semibold disabled:bg-slate-800 disabled:text-slate-500">تأیید</button>
                        <div wire:click="deleteProfile()" class="cursor-pointer bg-red-500 rounded-md max-w-fit py-3 px-5 m-auto flex gap-2 items-center">
                            <svg fill="#ffffff" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                                 width="20" height="20" viewBox="0 0 408.483 408.483"
                                 xml:space="preserve">
                                    <g>
                                        <g>
                                            <path d="M87.748,388.784c0.461,11.01,9.521,19.699,20.539,19.699h191.911c11.018,0,20.078-8.689,20.539-19.699l13.705-289.316
                                                H74.043L87.748,388.784z M247.655,171.329c0-4.61,3.738-8.349,8.35-8.349h13.355c4.609,0,8.35,3.738,8.35,8.349v165.293
                                                c0,4.611-3.738,8.349-8.35,8.349h-13.355c-4.61,0-8.35-3.736-8.35-8.349V171.329z M189.216,171.329
                                                c0-4.61,3.738-8.349,8.349-8.349h13.355c4.609,0,8.349,3.738,8.349,8.349v165.293c0,4.611-3.737,8.349-8.349,8.349h-13.355
                                                c-4.61,0-8.349-3.736-8.349-8.349V171.329L189.216,171.329z M130.775,171.329c0-4.61,3.738-8.349,8.349-8.349h13.356
                                                c4.61,0,8.349,3.738,8.349,8.349v165.293c0,4.611-3.738,8.349-8.349,8.349h-13.356c-4.61,0-8.349-3.736-8.349-8.349V171.329z"/>
                                            <path d="M343.567,21.043h-88.535V4.305c0-2.377-1.927-4.305-4.305-4.305h-92.971c-2.377,0-4.304,1.928-4.304,4.305v16.737H64.916
                                                c-7.125,0-12.9,5.776-12.9,12.901V74.47h304.451V33.944C356.467,26.819,350.692,21.043,343.567,21.043z"/>
                                        </g>
                                    </g>
                                </svg>
                            <span class="text-white">خذف</span>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <!-- create new profile -->
        <div x-show="layer=='add'" class="w-full sm:max-w-2xl mt-20 rounded-2xl p-5 z-10 shadow-[0_4px_30px_rgba(0,0,0,0.1)] backdrop-blur [-webkit-backdrop-filter:_blur(8px)] bg-[#222327] m-auto">
            <form class="text-slate-200" wire:submit="saveProfile" >
                @if($this->getProfilesCount < 3)
                    <div x-on:click="layer='profiles'" type="button" class="hover:bg-white/5 text-slate-300 rounded-lg py-2 px-4 text-center font-medium cursor-pointer transition-all flex items-center justify-center gap-2">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" class=" fill-slate-300">
                            <path d="M23.445,10.931l-4.672-4.627C18.116,5.653,17,6.118,17,7.043V10h-3c-1.105,0-2,0.895-2,2s0.895,2,2,2h3v2.957 c0,0.925,1.116,1.39,1.773,0.739l4.672-4.627C24.04,12.48,24.04,11.52,23.445,10.931z"></path>
                            <circle cx="8" cy="12" r="2" opacity=".35"></circle>
                            <circle cx="2" cy="12" r="2" opacity=".35"></circle>
                        </svg>
                        <p>افزودن پروفایل</p>
                    </div>
                    <div class="flex flex-col gap-5" x-data="{ age: @entangle('age_range').live, secure:@entangle('secure').live }">
                        <div class="mb-2">
                            <div class="text-base font-bold py-3 text-slate-200 text-right">
                                نام پروفایل
                            </div>
                            <div class="relative">
                                <input wire:model="name" type="text" class="@error('name') error @enderror bg-[#121212] border border-gray-900 focus:outline-none text-gray-400 text-sm rounded-lg block w-full p-2.5" placeholder="اینجا بنویسید ...">
                            </div>
                            <div>
                                @error('name') <span class="text-red-400">{{ $message }}</span> @enderror
                            </div>
                        </div>

                        <div class="py-3 flex gap-2">
                            <div class="text-base font-bold text-slate-200 text-right">
                                لطفا رده سنی را مشخص کنید
                            </div>
                        </div>

                        <div class="relative flex items-center justify-center space-x-4 scrollbar">

                            <div class="absolute top-1/2 left-0 right-0 transform -translate-y-1/2 h-1 bg-gray-600 bg-opacity-70">
                                <div :class="age ? 'bg-yellow-500' : 'bg-gray-600 bg-opacity-70'"
                                     class="h-full transition-all duration-300"
                                     :style="'width: ' + (age === '7' ? '10%' : age === '12' ? '25%' : age === '15' ? '50%' : age === '18' ? '73%' : age === 'adult' ? '100%' : '0%')"></div>
                            </div>


                            <label class="relative flex flex-col items-center cursor-pointer rounded-full" :class="age === '7' ? 'ring-4 ring-yellow-500' : ''">
                                <input wire:model="age_range" type="radio"  name="age_range" value="7" x-model="age" class="hidden" />
                                <div class="w-16 h-16 sm:w-24 sm:h-24 rounded-full bg-cover bg-center flex items-center justify-center"
                                     style="background-image: url('{{theme('img/kids-7.png')}}');">
                                    <div class="absolute inset-0 bg-black opacity-70 rounded-full"  :class="age === '7' ? 'bg-yellow-500' : ''"></div>
                                    <span class="relative z-10 font-bold text-xs sm:text-sm" :class="age === '7' ? 'text-black' : ''">زیر ۷ سال</span>
                                </div>
                            </label>


                            <label class="relative flex flex-col items-center cursor-pointer rounded-full" :class="age === '12' ? 'ring-4 ring-yellow-500' : ''">
                                <input type="radio" wire:model="age_range" name="age_range" value="12" x-model="age" class="hidden" />
                                <div class="w-16 h-16 sm:w-24 sm:h-24 rounded-full bg-cover bg-center flex items-center justify-center"
                                     style="background-image: url('{{theme('img/kids-12.png')}}');">
                                    <div class="absolute inset-0 bg-black opacity-70 rounded-full"  :class="age === '12' ? 'bg-yellow-500' : ''"></div>
                                    <span class="relative z-10 font-bold text-xs sm:text-sm" :class="age === '12' ? 'text-black' : ''">زیر ۱۲ سال</span>
                                </div>
                            </label>


                            <label class="relative flex flex-col items-center cursor-pointer rounded-full" :class="age === '15' ? 'ring-4 ring-yellow-500' : ''">
                                <input type="radio" wire:model="age_range"  name="age_range" value="15" x-model="age" class="hidden" />
                                <div class="w-16 h-16 sm:w-24 sm:h-24 rounded-full bg-cover bg-center flex items-center justify-center"
                                     style="background-image: url('{{theme('img/kids-15.png')}}');">
                                    <div class="absolute inset-0 bg-black opacity-70 rounded-full"  :class="age === '15' ? 'bg-yellow-500' : ''"></div>
                                    <span class="relative z-10 font-bold text-xs sm:text-sm" :class="age === '15' ? 'text-black' : ''">زیر ۱۵ سال</span>
                                </div>
                            </label>


                            <label class="relative flex flex-col items-center cursor-pointer rounded-full" :class="age === '18' ? 'ring-4 ring-yellow-500' : ''">
                                <input type="radio" wire:model="age_range" name="age_range" x-model="age" value="18" class="hidden" />
                                <div class="w-16 h-16 sm:w-24 sm:h-24 rounded-full bg-cover bg-center flex items-center justify-center"
                                     style="background-image: url('{{theme('img/kids-18.png')}}');">
                                    <div class="absolute inset-0 bg-black opacity-70 rounded-full"  :class="age === '18' ? 'bg-yellow-500' : ''"></div>
                                    <span class="relative z-10 font-bold text-xs sm:text-sm" :class="age === '18' ? 'text-black' : ''">زیر ۱۸ سال</span>
                                </div>
                            </label>


                            <label class="relative flex flex-col items-center cursor-pointer rounded-full" :class="age === 'adult' ? 'ring-4 ring-yellow-500' : ''">
                                <input type="radio" wire:model="age_range" name="age_range" value="adult" x-model="age" class="hidden" />
                                <div class="w-16 h-16 sm:w-24 sm:h-24 rounded-full bg-cover bg-center flex items-center justify-center"
                                     style="background-image: url('{{theme('img/profile2.png')}}');">
                                    <div class="absolute inset-0 bg-black opacity-70 rounded-full"  :class="age === 'adult' ? 'bg-yellow-500' : ''"></div>
                                    <span class="relative z-10 font-bold text-xs sm:text-sm" :class="age === 'adult' ? 'text-black' : ''">بزرگسال</span>
                                </div>
                            </label>
                        </div>
                        <div>
                            @error('age_range') <span class="text-red-400">{{ $message }}</span> @enderror
                        </div>

                        <label class="flex justify-between items-center cursor-pointer">
                        <span class="text-sm font-medium text-gray-900 dark:text-gray-300">قفل کردن پروفایل
                            <span x-cloak x-show="!secure" class="text-red-400"> : غیر فعال</span>
                            <span x-cloak x-show="secure" class="text-green-400"> : فعال</span>
                        </span>
                            <input wire:model="secure" type="checkbox" value="" class="sr-only peer">
                            <div class="relative w-11 h-6 bg-[#121212] peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-yellow-300  rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-yellow-300 after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-gray-700 after:border-gray-700 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-yellow-500"></div>
                        </label>
                        <p class="text-sm">درصورت فعال کردن قفل برای ورود به پروفایل نیاز به وارد کردن رمز عبور می باشد</p>

                        <div x-show="secure">
                            <div class="text-base py-3 font-bold text-slate-200 text-right">
                                یک رمز عبور  تعریف کنید
                            </div>
                            <div class="relative">
                                <input wire:model="password" type="password" class="@error('password') error @enderror bg-[#121212] border border-gray-900 focus:outline-none text-gray-400 text-sm rounded-lg block w-full p-2.5" placeholder="">
                            </div>
                            <div>
                                @error('password') <span class="text-red-400">{{ $message }}</span> @enderror
                            </div>
                        </div>


                        <div class="flex mt-6 gap-2">
                            <button type="submit"
                                    class=" w-full bg-blue-500 text-white rounded-lg py-3 px-5 text-center font-semibold disabled:bg-slate-800 disabled:text-slate-500">تأیید</button>

                            <div x-on:click="layer='profiles'" class="cursor-pointer bg-[#37383e] rounded-md max-w-fit py-3 px-5 m-auto flex gap-2 items-center">
                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <circle cx="12" cy="12" r="12" fill=""></circle><path d="M12.2929 5.29289C11.9324 5.65338 11.9047 6.22061 12.2097 6.6129L12.2929 6.70711L16.585 11H5C4.44771 11 4 11.4477 4 12C4 12.5523 4.44771 13 5 13H16.585L12.2929 17.2929C11.9324 17.6534 11.9047 18.2206 12.2097 18.6129L12.2929 18.7071C12.6534 19.0676 13.2206 19.0953 13.6129 18.7903L13.7071 18.7071L19.7071 12.7071C19.7425 12.6717 19.7747 12.6343 19.8037 12.5953L19.8753 12.4841L19.9288 12.3713L19.9642 12.266L19.989 12.1485L19.996 12.0898L20 12L19.9972 11.9248L19.9798 11.7993L19.9503 11.6879L19.9063 11.5768L19.854 11.4793L19.7903 11.3871L19.7071 11.2929L13.7071 5.29289C13.3166 4.90237 12.6834 4.90237 12.2929 5.29289Z" fill="white"></path>
                                </svg>
                                <span class="text-white">بازگشت</span>
                            </div>
                        </div>

                    </div>
                @else
                    <div x-on:click="layer='profiles'" type="button" class="hover:bg-white/5 text-slate-300 rounded-lg py-2 px-4 text-center font-medium cursor-pointer transition-all flex items-center justify-center gap-2">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" class=" fill-slate-300">
                            <path d="M23.445,10.931l-4.672-4.627C18.116,5.653,17,6.118,17,7.043V10h-3c-1.105,0-2,0.895-2,2s0.895,2,2,2h3v2.957 c0,0.925,1.116,1.39,1.773,0.739l4.672-4.627C24.04,12.48,24.04,11.52,23.445,10.931z"></path>
                            <circle cx="8" cy="12" r="2" opacity=".35"></circle>
                            <circle cx="2" cy="12" r="2" opacity=".35"></circle>
                        </svg>
                        <p>بیشتر از سه پروفایل نمی توان ساخت</p>
                    </div>
                @endif
            </form>
        </div>
        <!-- authenticate for manage profile -->
        <div x-show="layer=='auth'" class="mt-20 w-full sm:max-w-xl rounded-2xl p-5 z-10 shadow-[0_4px_30px_rgba(0,0,0,0.1)] backdrop-blur [-webkit-backdrop-filter:_blur(8px)] bg-[#222327] m-auto">
            <div class="text-slate-200">
                <div x-show="step == 'select'" x-cloak class="flex flex-col gap-5">
                    <button type="button" @click="layer='profiles'"
                            class="hover:bg-white/5 text-slate-300 rounded-lg py-2 px-4 text-center font-medium cursor-pointer transition-all flex items-center justify-center gap-2">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"
                             class=" fill-slate-300">
                            <path
                                d="M23.445,10.931l-4.672-4.627C18.116,5.653,17,6.118,17,7.043V10h-3c-1.105,0-2,0.895-2,2s0.895,2,2,2h3v2.957 c0,0.925,1.116,1.39,1.773,0.739l4.672-4.627C24.04,12.48,24.04,11.52,23.445,10.931z" />
                            <circle cx="8" cy="12" r="2" opacity=".35" />
                            <circle cx="2" cy="12" r="2" opacity=".35" />
                        </svg>
                        <p>بازگشت</p>
                    </button>
                    <div class="py-3">
                        <p class="text-base font-light text-slate-200 text-right w-11/12 md:max-w-[800px]">
                            برای ویرایش پروفایل یکی از راه های زیر را انتخاب کنید:
                        </p>
                    </div>


                    <label for="with_email" @click="step='enter_password'" class="bg-brandCard block text-sm font-bold p-4 rounded-lg border-[1px] border-white/10 has-[:checked]:border-brand-2 cursor-pointer">
                        <input type="radio" name="in_method" value="email" id="with_email"
                               class="hidden peer/pass">
                        <div class="flex items-center gap-2 fill-slate-300 peer-checked/pass:fill-brand-2">
                            <svg class="optionIcon-0-1-848" width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M8.76896 11.4895H9.61084V9.71174C9.61084 8.75267 10.0035 7.88088 10.635 7.24896V7.24815C11.2667 6.61643 12.1389 6.22397 13.0984 6.22397C14.0575 6.22397 14.9293 6.61643 15.561 7.24815L15.5618 7.24896C16.1933 7.88068 16.586 8.75288 16.586 9.71154V11.4893L17.2568 11.4895C17.4061 11.4895 17.5284 11.6118 17.5284 11.7611V17.4991C17.5284 17.6484 17.4059 17.7707 17.2565 17.7707H8.76896C8.61963 17.7707 8.49715 17.6482 8.49715 17.4991V11.7611C8.49715 11.6118 8.61942 11.4895 8.76896 11.4895ZM3.39398 4.94671C3.03163 5.39572 2.69695 5.87261 2.36431 6.46384C1.14624 8.62958 0.63029 11.0885 0.840456 13.4917C1.04594 15.8389 1.9456 18.1359 3.56162 20.0573C4.14207 20.7474 4.76483 21.3557 5.41954 21.8818C7.68029 23.6996 10.3585 24.5961 13.0296 24.5706C15.7018 24.5452 18.3619 23.5973 20.5868 21.7262C21.2357 21.1805 21.844 20.561 22.4006 19.8687C23.7019 18.2498 24.5393 16.351 24.8565 14.3474C25.1682 12.3796 24.9775 10.3131 24.2321 8.31403C23.5227 6.41074 22.4389 4.71599 21.0226 3.38928C19.6727 2.12463 18.0244 1.19323 16.1125 0.730988C15.5138 0.58613 14.9042 0.491525 14.2833 0.451445C13.6603 0.411365 13.0233 0.424793 12.3707 0.497018C11.9615 0.542185 11.6669 0.910025 11.7119 1.31917C11.7571 1.7281 12.1249 2.0229 12.5338 1.97774C13.1 1.91508 13.6518 1.90327 14.1901 1.93807C14.7301 1.97286 15.2542 2.05363 15.763 2.17692C17.4122 2.57548 18.8359 3.38013 20.0025 4.47348C21.2513 5.64353 22.2094 7.14378 22.8389 8.83283C23.4923 10.5852 23.6598 12.3943 23.3874 14.1142C23.1107 15.8617 22.3788 17.5198 21.2403 18.9358C20.738 19.5606 20.1985 20.1118 19.6306 20.5893C17.6793 22.2305 15.3518 23.0618 13.018 23.0842C10.6838 23.1064 8.33846 22.3188 6.35216 20.7221C5.76317 20.2485 5.20856 19.7083 4.6983 19.1014C3.29103 17.4283 2.50693 15.4206 2.32708 13.3637C2.14234 11.2529 2.59502 9.09366 3.66416 7.19281C3.98683 6.61908 4.31744 6.16111 4.68406 5.71962L4.7925 8.70954C4.80695 9.12011 5.15159 9.44115 5.56195 9.4265C5.97232 9.41186 6.29357 9.06741 6.27892 8.65705L6.10598 3.89242C6.09154 3.48165 5.74689 3.16081 5.33653 3.17525C5.31089 3.17627 5.28567 3.17851 5.26085 3.18176V3.18115L0.642294 3.82996C0.235187 3.88632 -0.0492378 4.2623 0.0071183 4.6694C0.0632709 5.07671 0.439249 5.36114 0.846559 5.30478L3.39398 4.94671ZM10.9658 11.4895H15.2308V9.69221C15.2308 9.10566 14.9907 8.57241 14.6048 8.18606L14.6044 8.18626C14.218 7.79991 13.6846 7.55963 13.0984 7.55963C12.5119 7.55963 11.9786 7.79971 11.5921 8.18586C11.2059 8.57221 10.966 9.10566 10.966 9.69221V11.4895H10.9658ZM13.1155 14.6292L13.546 16.6157L12.3662 16.6205L12.7123 14.6074C12.39 14.5038 12.1562 14.2019 12.1562 13.8451C12.1562 13.4034 12.5143 13.0453 12.9562 13.0453C13.3977 13.0453 13.756 13.4034 13.756 13.8451C13.7558 14.2324 13.4809 14.5555 13.1155 14.6292Z" fill="#6EB8FF"></path>
                            </svg>
                            <p class="">وارد کردن رمز عبور ثابت</p>
                        </div>

                    </label>

                    <label for="with_mobile" @click="sendCodeWithMobile"
                           class="bg-brandCard block text-sm font-bold p-4 rounded-lg border-[1px] border-white/10 has-[:checked]:border-brand-2 cursor-pointer">
                        <div class="flex items-center gap-2 fill-slate-300 peer-checked/sms:fill-brand-2">
                            <svg class="optionIcon-0-1-848" width="18" height="32" viewBox="0 0 18 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M1.25039 2.04677C1.96658 1.33058 2.93795 0.928223 3.9508 0.928223H7.01977H11.1117H14.1807C15.1935 0.928223 16.1649 1.33058 16.8811 2.04677C17.5973 2.76297 17.9997 3.73434 17.9997 4.74719V27.2529C17.9997 28.2658 17.5973 29.2372 16.8811 29.9534C16.1649 30.6695 15.1935 31.0719 14.1807 31.0719H3.9508C2.93795 31.0719 1.96658 30.6695 1.25039 29.9534C0.534191 29.2372 0.131836 28.2658 0.131836 27.2529V4.74719C0.131836 3.73434 0.53419 2.76297 1.25039 2.04677ZM3.9508 2.42822C3.33577 2.42822 2.74594 2.67254 2.31105 3.10743C1.87616 3.54232 1.63184 4.13216 1.63184 4.74719V27.2529C1.63184 27.868 1.87615 28.4578 2.31105 28.8927C2.74594 29.3276 3.33577 29.5719 3.9508 29.5719H14.1807C14.7957 29.5719 15.3856 29.3276 15.8204 28.8927C16.2553 28.4578 16.4997 27.868 16.4997 27.2529V4.74719C16.4997 4.13216 16.2553 3.54232 15.8204 3.10743C15.3856 2.67254 14.7957 2.42822 14.1807 2.42822H11.8617V3.7242C11.8617 4.13841 11.5259 4.4742 11.1117 4.4742H7.01977C6.60555 4.4742 6.26977 4.13841 6.26977 3.7242V2.42822H3.9508ZM7.76977 2.42822V2.9742H10.3617V2.42822H7.76977ZM6.26977 27.2529C6.26977 26.8387 6.60555 26.5029 7.01977 26.5029H11.1117C11.5259 26.5029 11.8617 26.8387 11.8617 27.2529C11.8617 27.6672 11.5259 28.0029 11.1117 28.0029H7.01977C6.60555 28.0029 6.26977 27.6672 6.26977 27.2529Z" fill="#6EB8FF"></path>
                            </svg>
                            <p class="" >دریافت رمز یکبار مصرف ({{auth()->user()->mobile}})</p>
                        </div>
                    </label>

                </div>

                <form wire:submit="loginWithPassword" x-show="step == 'enter_password'" x-cloak class="flex flex-col gap-5">
                    <button type="button" @click="step='select'"
                            class="hover:bg-white/5 text-slate-300 rounded-lg py-2 px-4 text-center font-medium cursor-pointer transition-all flex items-center justify-center gap-2">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"
                             class=" fill-slate-300">
                            <path
                                d="M23.445,10.931l-4.672-4.627C18.116,5.653,17,6.118,17,7.043V10h-3c-1.105,0-2,0.895-2,2s0.895,2,2,2h3v2.957 c0,0.925,1.116,1.39,1.773,0.739l4.672-4.627C24.04,12.48,24.04,11.52,23.445,10.931z" />
                            <circle cx="8" cy="12" r="2" opacity=".35" />
                            <circle cx="2" cy="12" r="2" opacity=".35" />
                        </svg>
                        <p>بازگشت</p>
                    </button>
                    @if (session()->has('error'))
                        <div class="error-box">
                            <span>{{ session('error') }}</span>
                        </div>
                    @endif
                    <div class="py-3">
                        <p class="text-base font-light text-slate-200 text-right w-11/12 md:max-w-[800px]">
                            برای ویرایش پروفایل رمزعبوز حساب کاربری خود را وارد کنید:
                        </p>
                    </div>

                    <div>
                        <label for="enter_pass" class="block text-sm font-medium">رمز عبور</label>
                        <div class="relative mt-4">
                            <input wire:model="password" :type="showPasswordField ? 'password' : 'text'" id="enter_pass" x-model="password"
                                   name="password" dir="ltr" @input="checkStrength()"
                                   class="@error('password') error @enderror block w-full bg-transparent text-slate-300 rounded-lg py-3 px-4 border border-slate-600 transition-colors duration-300 focus:outline-none focus:bg-transparent focus:border-brand-2">

                            <button class="absolute p-2 top-[5px] fill-slate-300 hover:fill-brand-2"
                                    @click.prevent="showPasswordField=!showPasswordField">
                            <span x-show="showPasswordField">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24"
                                     height="24">
                                    <path
                                        d="M2.3,15.6c-1.7-2.1-1.7-5.1,0-7.3C4.2,5.9,7.5,3,12,3s7.8,2.9,9.7,5.4c1.7,2.1,1.7,5.1,0,7.3 c-2,2.5-5.2,5.4-9.7,5.4S4.2,18.1,2.3,15.6z"
                                        opacity=".35" />
                                    <path
                                        d="M12,6c-3.3,0-6,2.7-6,6s2.7,6,6,6s6-2.7,6-6S15.3,6,12,6z M13,13c-1.1,0-2-0.9-2-2s0.9-2,2-2s2,0.9,2,2S14.1,13,13,13z" />
                                </svg>
                            </span>

                                <span x-show="!showPasswordField">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24"
                                     height="24">
                                    <path
                                        d="M2.269,15.625c-1.675-2.13-1.675-5.121,0-7.251C4.235,5.875,7.479,3,12,3s7.765,2.875,9.731,5.375c1.675,2.13,1.675,5.121,0,7.251C19.765,18.125,16.521,21,12,21S4.235,18.125,2.269,15.625z"
                                        opacity=".35" />
                                    <path
                                        d="M12,6c-3.314,0-6,2.686-6,6s2.686,6,6,6s6-2.686,6-6S15.314,6,12,6z M13,13c-1.105,0-2-0.895-2-2s0.895-2,2-2s2,0.895,2,2S14.105,13,13,13z" />
                                    <path class=" opacity-60"
                                          d="M21,22c-0.256,0-0.512-0.098-0.707-0.293l-18-18c-0.391-0.391-0.391-1.023,0-1.414s1.023-0.391,1.414,0l18,18c0.391,0.391,0.391,1.023,0,1.414C21.512,21.902,21.256,22,21,22z" />
                                </svg>
                            </span>
                            </button>
                        </div>
                        <div>
                            @error('password') <span class="text-red-400">{{ $message }}</span> @enderror
                        </div>

                    </div>

                    <button type="submit"
                            class="bg-blue-500 text-white rounded-lg py-2 px-4 text-center font-semibold disabled:bg-slate-800 disabled:text-slate-500">تأیید</button>
                </form>

                <form wire:submit="validateCodeWithMobile" x-show="step == 'one_time_password'" id="otp-form_for_reset" x-cloak class="flex flex-col gap-5"
                      id="otp-form_for_login">
                    <button type="button" @click="step='select'"
                            class="hover:bg-white/5 text-slate-300 rounded-lg py-2 px-4 text-center font-medium cursor-pointer transition-all flex items-center justify-center gap-2">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"
                             class=" fill-slate-300">
                            <path
                                d="M23.445,10.931l-4.672-4.627C18.116,5.653,17,6.118,17,7.043V10h-3c-1.105,0-2,0.895-2,2s0.895,2,2,2h3v2.957 c0,0.925,1.116,1.39,1.773,0.739l4.672-4.627C24.04,12.48,24.04,11.52,23.445,10.931z" />
                            <circle cx="8" cy="12" r="2" opacity=".35" />
                            <circle cx="2" cy="12" r="2" opacity=".35" />
                        </svg>
                        <p>بازگشت</p>
                    </button>

                    @if (session()->has('error'))
                        <div class="error-box">
                            <span>{{ session('error') }}</span>
                        </div>
                    @endif

                    <div x-data="{
                            inputs: null,
                            init() {
                                const form = document.getElementById('otp-form_for_reset')
                                this.inputs = [...form.querySelectorAll('.pass_box')]
                            },
                            handleKeyDown(e) {
                                if (e.key === 'Delete' || e.key === 'Backspace') {
                                    const index = this.inputs.indexOf(e.target);
                                    if (index > 0) {
                                        this.inputs[index].value = '';
                                        this.inputs[index - 1].focus();
                                    }
                                }
                            },
                            handleInput(e) {
                                const {
                                    target
                                } = e

                                const index = this.inputs.indexOf(target)
                                if (target.value) {
                                    if (index < this.inputs.length - 1) {
                                        this.inputs[index + 1].focus()
                                    } else {
                                        Livewire.dispatch('validate-code');
                                    }
                                }
                            },
                            handlePaste(e) {
                                e.preventDefault()
                                const text = e.clipboardData.getData('text')
                                if (!new RegExp(`^ [0 - 9]{ ${this.inputs.length}$`).test(text)) {
                                    return
                                }
                                const digits = text.split('')
                                this.inputs.forEach((input, index) => input.value = digits[index])
                                Livewire.dispatch('validate-code');
                            }
                        }">
                        <label class="block text-sm font-normal">کد ارسال شده به شماره موبایل خود را در کادر زیر وارد کنید:</label>
                        <div class="mt-3 grid tm-grid-cols-6 items-center justify-center gap-2 p-4 relative" dir="ltr">
                            <input inputmode="numeric" maxlength="1" wire:model="code.0" x-on:keydown="handleKeyDown" x-on:input="handleInput" x-ref="codeinput0"
                                   class="pass_box size-12 appearance-none block text-center text-lg font-semibold bg-transparent text-slate-300 rounded-lg py-3 px-4 border border-slate-600 transition-colors duration-300 focus:outline-none focus:bg-transparent focus:border-brand-2"/>
                            <input inputmode="numeric" maxlength="1" wire:model="code.1" x-on:keydown="handleKeyDown" x-on:input="handleInput" x-ref="codeinput1"
                                   class="pass_box size-12 appearance-none block text-center text-lg font-semibold bg-transparent text-slate-300 rounded-lg py-3 px-4 border border-slate-600 transition-colors duration-300 focus:outline-none focus:bg-transparent focus:border-brand-2"/>
                            <input inputmode="numeric" maxlength="1" wire:model="code.2" x-on:keydown="handleKeyDown" x-on:input="handleInput" x-ref="codeinput2"
                                   class="pass_box size-12 appearance-none block text-center text-lg font-semibold bg-transparent text-slate-300 rounded-lg py-3 px-4 border border-slate-600 transition-colors duration-300 focus:outline-none focus:bg-transparent focus:border-brand-2"/>
                            <input inputmode="numeric" maxlength="1" wire:model="code.3" x-on:keydown="handleKeyDown" x-on:input="handleInput" x-ref="codeinput3"
                                   class="pass_box size-12 appearance-none block text-center text-lg font-semibold bg-transparent text-slate-300 rounded-lg py-3 px-4 border border-slate-600 transition-colors duration-300 focus:outline-none focus:bg-transparent focus:border-brand-2"/>
                            <input inputmode="numeric" maxlength="1" wire:model="code.4" x-on:keydown="handleKeyDown" x-on:input="handleInput" x-ref="codeinput4"
                                   class="pass_box size-12 appearance-none block text-center text-lg font-semibold bg-transparent text-slate-300 rounded-lg py-3 px-4 border border-slate-600 transition-colors duration-300 focus:outline-none focus:bg-transparent focus:border-brand-2"/>
                            <input inputmode="numeric" maxlength="1" wire:model="code.5" x-on:keydown="handleKeyDown" x-on:input="handleInput" x-ref="codeinput5"
                                   class="pass_box size-12 appearance-none block text-center text-lg font-semibold bg-transparent text-slate-300 rounded-lg py-3 px-4 border border-slate-600 transition-colors duration-300 focus:outline-none focus:bg-transparent focus:border-brand-2"/>
                            <div x-cloak wire:loading class="loading absolute right-0 left-0 top-0 bottom-0 rounded-2xl"><span class="loader absolute right-0 left-0 top-0 bottom-0"></span></div>
                        </div>
                    </div>

                    <div class="flex justify-end w-full">
                        <button type="button" @click="resend()" x-data="timer(120)"
                                :class="(remaining <= 0) ? 'hover:bg-white/10 bg-white/5' : 'cursor-wait'"
                                class=" text-slate-200 rounded-lg py-2 px-4 text-center font-normal transition-all flex items-center gap-2 w-fit ">
                            <div class="flex gap-1 text-sm" x-on:reset-timer.window="resetTimer()">
                                <p>دریافت مجدد</p>
                                <span x-init="init();" class="flex flex-row-reverse gap-[1px]">
                                        )<p x-text="timer"></p>(
                                    </span>
                            </div>
                        </button>
                    </div>

                    <button type="submit" id="otp_submit_btn_for_reset"
                            class="w-full bg-blue-500 text-white rounded-lg py-2 px-4 text-center font-semibold disabled:bg-slate-800 disabled:text-slate-500">تأیید</button>
                </form>
            </div>
        </div>
        <!-- enter pass for secure profile -->
        <div x-show="layer=='secureProfile'" class="w-full sm:max-w-2xl mt-20 rounded-2xl p-5 z-10 shadow-[0_4px_30px_rgba(0,0,0,0.1)] backdrop-blur [-webkit-backdrop-filter:_blur(8px)] bg-[#222327] m-auto">
            <form class="text-slate-200" wire:submit="loginToSecureProfile" >

                <div class="flex flex-col gap-5">
                    @if (session()->has('error'))
                        <div class="error-box">
                            <span>{{ session('error') }}</span>
                        </div>
                    @endif

                    <div >
                        <div class="text-base py-3 font-bold text-slate-200 text-right">
                            رمز ورود به پروفایل {{$this->profile->name ?? ''}} را وارد کنید
                        </div>
                        <div class="relative">
                            <input wire:model="password" type="password" class="@error('password') error @enderror bg-[#121212] border border-gray-900 focus:outline-none text-gray-400 text-sm rounded-lg block w-full p-2.5" placeholder="">
                        </div>
                        <div>
                            @error('password') <span class="text-red-400">{{ $message }}</span> @enderror
                        </div>
                    </div>

                    <div class="flex mt-6 gap-2">
                        <button type="submit" x-on:click="loginToSecureProfile"
                                class=" w-full bg-blue-500 text-white rounded-lg py-3 px-5 text-center font-semibold disabled:bg-slate-800 disabled:text-slate-500">ورود</button>

                        <div x-on:click="layer='profiles'" class="cursor-pointer bg-[#37383e] rounded-md max-w-fit py-3 px-5 m-auto flex gap-2 items-center">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <circle cx="12" cy="12" r="12" fill=""></circle><path d="M12.2929 5.29289C11.9324 5.65338 11.9047 6.22061 12.2097 6.6129L12.2929 6.70711L16.585 11H5C4.44771 11 4 11.4477 4 12C4 12.5523 4.44771 13 5 13H16.585L12.2929 17.2929C11.9324 17.6534 11.9047 18.2206 12.2097 18.6129L12.2929 18.7071C12.6534 19.0676 13.2206 19.0953 13.6129 18.7903L13.7071 18.7071L19.7071 12.7071C19.7425 12.6717 19.7747 12.6343 19.8037 12.5953L19.8753 12.4841L19.9288 12.3713L19.9642 12.266L19.989 12.1485L19.996 12.0898L20 12L19.9972 11.9248L19.9798 11.7993L19.9503 11.6879L19.9063 11.5768L19.854 11.4793L19.7903 11.3871L19.7071 11.2929L13.7071 5.29289C13.3166 4.90237 12.6834 4.90237 12.2929 5.29289Z" fill="white"></path>
                            </svg>
                            <span class="text-white">بازگشت</span>
                        </div>
                    </div>

                </div>
            </form>
        </div>
        <script>
            document.addEventListener('livewire:init', () => {
                Livewire.on('profile-created', (event) => {
                    Toastify({
                        text: "پروفایل جدید ایجاد شد",
                        className: "success",
                        gravity: "bottom",
                        duration: 3000,
                        position: "center",
                        close: true,
                        style: {
                            background: "linear-gradient(132deg, rgb(47 146 28) 0%, rgb(22 160 39) 100%)",
                            borderRadius:"10px",
                            direction: "ltr",
                        }
                    }).showToast();
                });

                Livewire.on('profile-edited', (event) => {
                    Toastify({
                        text: "تغییرات پروفایل ذخیره شد",
                        className: "success",
                        gravity: "bottom",
                        duration: 3000,
                        position: "center",
                        close: true,
                        style: {
                            background: "linear-gradient(132deg, rgb(47 146 28) 0%, rgb(22 160 39) 100%)",
                            borderRadius:"10px",
                            direction: "ltr",
                        }
                    }).showToast();
                });

                Livewire.on('profile-deleted', (event) => {
                    Toastify({
                        text: "پروفایل حذف شد",
                        className: "success",
                        gravity: "bottom",
                        duration: 3000,
                        position: "center",
                        close: true,
                        style: {
                            background: "linear-gradient(132deg, rgb(47 146 28) 0%, rgb(22 160 39) 100%)",
                            borderRadius:"10px",
                            direction: "ltr",
                        }
                    }).showToast();
                });
            });
            document.addEventListener('DOMContentLoaded', () => {

                const form = document.getElementById('otp-form_for_reset')
                const inputs = [...form.querySelectorAll('.pass_box')]
                const submit = form.querySelector('#otp_submit_btn_for_reset')

                const handleKeyDown = (e) => {
                    if (e.key === 'Delete' || e.key === 'Backspace') {
                        const index = inputs.indexOf(e.target);
                        if (index > 0) {
                            inputs[index].value = '';
                            inputs[index - 1].focus();
                        }
                    }
                }

                const handleInput = (e) => {
                    const {
                        target
                    } = e
                    const index = inputs.indexOf(target)
                    if (target.value) {
                        if (index < inputs.length - 1) {
                            inputs[index + 1].focus()
                        } else {
                            Livewire.dispatch('validate-code');
                        }
                    }
                }

                const handleFocus = (e) => {
                    // e.target.select()
                }

                const handlePaste = (e) => {
                    e.preventDefault()
                    const text = e.clipboardData.getData('text')
                    if (!new RegExp(`^ [0 - 9]{ ${inputs.length}$`).test(text)) {
                        return
                    }
                    const digits = text.split('')
                    inputs.forEach((input, index) => input.value = digits[index])
                    submit.focus()
                }

                inputs.forEach((input) => {
                    input.addEventListener('input', handleInput)
                    input.addEventListener('keydown', handleKeyDown)
                    input.addEventListener('focus', handleFocus)
                    input.addEventListener('paste', handlePaste)
                })
            });
        </script>

    <div x-cloak x-show="loading"  class="loading absolute right-0 left-0 top-0 bottom-0 rounded-2xl"><span class="loader absolute right-0 left-0 top-0 bottom-0"></span></div>
    </div>

    <script>
        function app() {
            return {
                loading: false,
                layer: @entangle('layer').live,
                step:  @entangle('step').live,
                edit: false,
                showPasswordField: true,
                passwordScore: 0,
                sendCodeWithMobile(){
                    this.loading = true;
                    this.$wire.sendCodeWithMobile();
                },
                loginToSecureProfile(){
                    this.loading = true;
                    this.$wire.loginToSecureProfile();
                },
                removeLoading(){
                    this.loading = false;
                },
                selectProfile(index){
                    this.loading = true;
                    this.$wire.selectProfile(index)
                },
                password: '',
                checkStrength: function() {
                    if (!this.password) return this.passwordScore = 0;
                    this.passwordScore = zxcvbn(this.password).score + 1;
                },
            }
        }
        function timer(expiry) {
            return {
                remaining: expiry,
                timerOn: true,
                timer: '',
                resetTimer(){
                    this.timerOn = true;
                    this.remaining = 120;
                },
                resend() {
                    if(!this.timerOn) {
                        this.timerOn = true;
                        this.remaining = 120;
                        this.$wire.sendCodeWithMobile();
                    }
                },
                init() {
                    this.setRemaining();  // نمایش اولیه تایمر
                    this.interval = setInterval(() => {
                        if (this.timerOn && this.remaining >= 0) {
                            this.setRemaining();
                            this.remaining -= 1;
                        } else {
                            clearInterval(this.interval);  // متوقف کردن تایمر وقتی زمان به پایان می‌رسد
                        }
                    }, 1000);
                },
                setRemaining() {
                    var m = Math.floor(this.remaining / 60);
                    var s = this.remaining % 60;

                    m = m < 10 ? '0' + m : m;
                    s = s < 10 ? '0' + s : s;
                    this.timer = m + ':' + s;

                    if (this.remaining <= 0) {
                        this.timerOn = false;
                    }
                }
            };
        }
    </script>

</x-layouts.app>
