<x-layouts.app>
    @include('theme::partials.inner_navigation')
    <!-- step : auth / register / enter_password / set_password / one_time_password / reset_password -->
    <div x-data="{
                    step: $wire.entangle('step').live,
                    validationType: $wire.entangle('validation_type').live,
                    showPasswordField: true,
                    passwordScore: 0,
                    password: '',
                    register() {
                        this.step = 'register';
                        this.validationType = 'register';
                    },
                    resetPass() {
                        this.step = 'getMobile';
                        this.validationType = 'resetPass';
                    },
                    loginWithCode() {
                        this.step = 'getMobile';
                        this.validationType = 'loginWithCode';
                    },
                    checkStrength: function() {
                        if (!this.password) return this.passwordScore = 0;
                        this.passwordScore = zxcvbn(this.password).score + 1;
                    }
                }" class="relative min-h-screen pt-10 overflow-visible flex justify-center items-center"
         >

        <!-- for password difficulty -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/zxcvbn/4.4.2/zxcvbn.js"></script>
        <style>
            input::-webkit-outer-spin-button,
            input::-webkit-inner-spin-button {
                -webkit-appearance: none;
                margin: 0;
            }

            /* Firefox */
            input[type=number] {
                -moz-appearance: textfield;
            }

            input:-webkit-autofill,
            input:-webkit-autofill:hover,
            input:-webkit-autofill:focus,
            input:-webkit-autofill:active{
                -webkit-box-shadow: 0 0 0 30px #37383e inset !important;
            }

            /*Change text in autofill textbox*/
            input:-webkit-autofill{
                -webkit-text-fill-color: #cbd5e1 !important;
            }
            .cursor-wait {
                cursor:wait;
            }
            input.error {
                border-color: #ff6161;
            }

            .error {
                color:#ff6161;
            }

            .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>
            <!-- form -->
            <div
                class="w-full sm:max-w-xl rounded-2xl mt-10 mb-10 p-5 z-10 shadow-[0_4px_30px_rgba(0,0,0,0.1)] backdrop-blur [-webkit-backdrop-filter:_blur(8px)]  bg-[#222327]">

                <form x-show="step == 'auth'" x-cloak  class="text-slate-200" wire:submit="loginWithMobile" @keydown.enter="$wire.loginWithMobile()">
                    <div class="flex bg-[#121212] rounded-full p-2">
                        <button type="button"  class="bg-blue-500 w-full text-white rounded-full py-2 px-4 text-center font-semibold disabled:bg-slate-800 disabled:text-slate-500">ورود
                        </button>

                        <button @click="register()" type="button"  class=" text-white w-full rounded-full py-2 px-4 text-center font-semibold disabled:bg-slate-800 disabled:text-slate-500">ثبت نام
                        </button>
                    </div>
                    <div class="flex flex-col gap-5">
                        <div class="flex flex-col gap-3">
                            <div class="flex items-center gap-3">
                                <svg width="80px" height="80px" viewBox="0 -0.5 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path class="fill-slate-200" d="M15.014 8.46835C14.7204 8.17619 14.2455 8.17737 13.9533 8.47099C13.6612 8.76462 13.6624 9.23949 13.956 9.53165L15.014 8.46835ZM16.971 12.5317C17.2646 12.8238 17.7395 12.8226 18.0317 12.529C18.3238 12.2354 18.3226 11.7605 18.029 11.4683L16.971 12.5317ZM18.029 12.5317C18.3226 12.2395 18.3238 11.7646 18.0317 11.471C17.7395 11.1774 17.2646 11.1762 16.971 11.4683L18.029 12.5317ZM13.956 14.4683C13.6624 14.7605 13.6612 15.2354 13.9533 15.529C14.2455 15.8226 14.7204 15.8238 15.014 15.5317L13.956 14.4683ZM17.5 12.75C17.9142 12.75 18.25 12.4142 18.25 12C18.25 11.5858 17.9142 11.25 17.5 11.25V12.75ZM3.5 11.25C3.08579 11.25 2.75 11.5858 2.75 12C2.75 12.4142 3.08579 12.75 3.5 12.75V11.25ZM13.956 9.53165L16.971 12.5317L18.029 11.4683L15.014 8.46835L13.956 9.53165ZM16.971 11.4683L13.956 14.4683L15.014 15.5317L18.029 12.5317L16.971 11.4683ZM17.5 11.25H3.5V12.75H17.5V11.25Z"/>
                                    <path class="stroke-slate-200" path d="M9.5 15C9.5 17.2091 11.2909 19 13.5 19H17.5C19.7091 19 21.5 17.2091 21.5 15V9C21.5 6.79086 19.7091 5 17.5 5H13.5C11.2909 5 9.5 6.79086 9.5 9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path class="fill-slate-200" path d="M15.014 8.46835C14.7204 8.17619 14.2455 8.17737 13.9533 8.47099C13.6612 8.76462 13.6624 9.23949 13.956 9.53165L15.014 8.46835ZM16.971 12.5317C17.2646 12.8238 17.7395 12.8226 18.0317 12.529C18.3238 12.2354 18.3226 11.7605 18.029 11.4683L16.971 12.5317ZM18.029 12.5317C18.3226 12.2395 18.3238 11.7646 18.0317 11.471C17.7395 11.1774 17.2646 11.1762 16.971 11.4683L18.029 12.5317ZM13.956 14.4683C13.6624 14.7605 13.6612 15.2354 13.9533 15.529C14.2455 15.8226 14.7204 15.8238 15.014 15.5317L13.956 14.4683ZM17.5 12.75C17.9142 12.75 18.25 12.4142 18.25 12C18.25 11.5858 17.9142 11.25 17.5 11.25V12.75ZM3.5 11.25C3.08579 11.25 2.75 11.5858 2.75 12C2.75 12.4142 3.08579 12.75 3.5 12.75V11.25ZM13.956 9.53165L16.971 12.5317L18.029 11.4683L15.014 8.46835L13.956 9.53165ZM16.971 11.4683L13.956 14.4683L15.014 15.5317L18.029 12.5317L16.971 11.4683ZM17.5 11.25H3.5V12.75H17.5V11.25Z"/>
                                    <path class="stroke-slate-200" d="M9.5 15C9.5 17.2091 11.2909 19 13.5 19H17.5C19.7091 19 21.5 17.2091 21.5 15V9C21.5 6.79086 19.7091 5 17.5 5H13.5C11.2909 5 9.5 6.79086 9.5 9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>

                                <h1 class="text-right font-bold text-xl ">ورود به {{config('app.name')}}</h1>
                            </div>
                            <p class="text-base font-light text-slate-200 text-right w-11/12 md:max-w-[800px]">
                                لطفا برای ورود شماره موبایل خود را وارد کنید.
                            </p>
                        </div>
                        @if (session()->has('error'))
                            <div class="error-box">
                                <span>{{ session('error') }}</span>
                            </div>
                        @endif

                        <div>
                            <label for="mobile_number2" class="block text-sm font-medium">شماره موبایل</label>
                            <div class="rounded-lg bg-[#37383e] mt-4 overflow-hidden relative">
                                <input inputmode="numeric" wire:model="mobile" x-data="{phone: $wire.entangle('mobile')}" :maxlength="11" :minlength="11" x-model="phone"  dir="ltr" placeholder="۰۹۱۲*******"
                                       id="mobile_number2" value=""
                                       class="w-full @error('mobile') error @enderror text-left placeholder:text-left focus:bg-[#121212] bg-[#37383e] text-slate-300  py-3 pr-4 pl-4 transition-colors duration-300 focus:outline-none">

                            </div>
                            <div>
                                @error('mobile') <span class="error">{{ $message }}</span> @enderror
                            </div>
                        </div>

                        <div>
                            <label for="enter_pass" class="block text-sm font-medium">رمز عبور</label>
                            <div class="relative mt-4">
                                <input wire:model="password" autocomplete="off" inputmode="text" :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">

                                <div 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>
                                </div>
                            </div>
                            <div>
                                @error('password') <span class="error">{{ $message }}</span> @enderror
                            </div>

                            <div class="flex justify-end flex-col gap-2 mt-4">
                                <p class="text-sm cursor-pointer text-blue-400" @click="loginWithCode()">ورود با رمز
                                    موقت
                                </p>
                            </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>

                        <div class="mt-2">
                            <div class="flex justify-end flex-col gap-2 mt-4"></div>

                            <p class="text-sm cursor-pointer text-center">رمز عبورتان را گم
                                کرده‌اید؟ <span @click="resetPass()" class="text-blue-400">ایجاد رمز جدید</span></p>
                            <p class="text-sm cursor-pointer text-center">حساب کاربری ندارید؟ <a class="text-blue-400" @click="register()"> ثبت نام</a></p>
                        </div>



                        <div>
                            <div class="flex justify-between items-center">
                                <span class="h-[1px] bg-white/10 flex-1"></span>
                                <p class="mx-2"></p>
                                <span class="h-[1px] bg-white/10 flex-1"></span>
                            </div>


                            <div class=" mt-3 text-sm text-center">
                                ورود شما، به معنای پذیرش
                                <a href="{{url('service-policy')}}" class=" text-blue-400">شرایط استفاده از خدمات</a>
                                و
                                <a href="{{url('policy')}}" class=" text-blue-400">سیاست حفظ حریم خصوصی</a>
                                {{config('app.name')}} می‌باشد.
                            </div>
                        </div>
                    </div>
                    <div x-cloak wire:loading wire:target="loginWithMobile" 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>
                </form >

                <form x-show="step == 'register'" x-cloak  class="text-slate-200" wire:submit="registerWithMobile" @keydown.enter="$wire.registerWithMobile()">
                    <div class="flex bg-[#121212] rounded-full p-2">
                        <button @click="step='auth'" type="button"  class=" text-white w-full rounded-full py-2 px-4 text-center font-semibold disabled:bg-slate-800 disabled:text-slate-500">ورود
                        </button>
                        <button type="button"  class="bg-blue-500 w-full text-white rounded-full py-2 px-4 text-center font-semibold disabled:bg-slate-800 disabled:text-slate-500">ثبت نام
                        </button>
                    </div>
                    <div class="flex flex-col gap-5">
                        <div class="flex flex-col gap-3">
                            <div class="flex items-center gap-3">
                                <svg width="80px" height="80px" viewBox="0 -0.5 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path class="fill-slate-200" d="M15.014 8.46835C14.7204 8.17619 14.2455 8.17737 13.9533 8.47099C13.6612 8.76462 13.6624 9.23949 13.956 9.53165L15.014 8.46835ZM16.971 12.5317C17.2646 12.8238 17.7395 12.8226 18.0317 12.529C18.3238 12.2354 18.3226 11.7605 18.029 11.4683L16.971 12.5317ZM18.029 12.5317C18.3226 12.2395 18.3238 11.7646 18.0317 11.471C17.7395 11.1774 17.2646 11.1762 16.971 11.4683L18.029 12.5317ZM13.956 14.4683C13.6624 14.7605 13.6612 15.2354 13.9533 15.529C14.2455 15.8226 14.7204 15.8238 15.014 15.5317L13.956 14.4683ZM17.5 12.75C17.9142 12.75 18.25 12.4142 18.25 12C18.25 11.5858 17.9142 11.25 17.5 11.25V12.75ZM3.5 11.25C3.08579 11.25 2.75 11.5858 2.75 12C2.75 12.4142 3.08579 12.75 3.5 12.75V11.25ZM13.956 9.53165L16.971 12.5317L18.029 11.4683L15.014 8.46835L13.956 9.53165ZM16.971 11.4683L13.956 14.4683L15.014 15.5317L18.029 12.5317L16.971 11.4683ZM17.5 11.25H3.5V12.75H17.5V11.25Z"/>
                                    <path class="stroke-slate-200" path d="M9.5 15C9.5 17.2091 11.2909 19 13.5 19H17.5C19.7091 19 21.5 17.2091 21.5 15V9C21.5 6.79086 19.7091 5 17.5 5H13.5C11.2909 5 9.5 6.79086 9.5 9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path class="fill-slate-200" path d="M15.014 8.46835C14.7204 8.17619 14.2455 8.17737 13.9533 8.47099C13.6612 8.76462 13.6624 9.23949 13.956 9.53165L15.014 8.46835ZM16.971 12.5317C17.2646 12.8238 17.7395 12.8226 18.0317 12.529C18.3238 12.2354 18.3226 11.7605 18.029 11.4683L16.971 12.5317ZM18.029 12.5317C18.3226 12.2395 18.3238 11.7646 18.0317 11.471C17.7395 11.1774 17.2646 11.1762 16.971 11.4683L18.029 12.5317ZM13.956 14.4683C13.6624 14.7605 13.6612 15.2354 13.9533 15.529C14.2455 15.8226 14.7204 15.8238 15.014 15.5317L13.956 14.4683ZM17.5 12.75C17.9142 12.75 18.25 12.4142 18.25 12C18.25 11.5858 17.9142 11.25 17.5 11.25V12.75ZM3.5 11.25C3.08579 11.25 2.75 11.5858 2.75 12C2.75 12.4142 3.08579 12.75 3.5 12.75V11.25ZM13.956 9.53165L16.971 12.5317L18.029 11.4683L15.014 8.46835L13.956 9.53165ZM16.971 11.4683L13.956 14.4683L15.014 15.5317L18.029 12.5317L16.971 11.4683ZM17.5 11.25H3.5V12.75H17.5V11.25Z"/>
                                    <path class="stroke-slate-200" d="M9.5 15C9.5 17.2091 11.2909 19 13.5 19H17.5C19.7091 19 21.5 17.2091 21.5 15V9C21.5 6.79086 19.7091 5 17.5 5H13.5C11.2909 5 9.5 6.79086 9.5 9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>

                                <h1 class="text-right font-bold text-xl ">ثبت نام در {{config('app.name')}}</h1>
                            </div>
                            <p class="text-base font-light text-slate-200 text-right w-11/12 md:max-w-[800px]">
                                لطفا برای ثبت نام شماره موبایل خود را وارد کنید.
                            </p>
                        </div>
                        @if (session()->has('error'))
                            <div class="error-box">
                                <span>{{ session('error') }}</span>
                            </div>
                        @endif

                        <div>
                            <label for="mobile_number_one" class="block text-sm font-medium">شماره موبایل</label>
                            <div class="rounded-lg bg-[#37383e] mt-4 overflow-hidden relative">
                                <input inputmode="numeric" wire:model="mobile" x-data="{phone: $wire.entangle('mobile')}" :maxlength="11" :minlength="11" x-model="phone" dir="ltr" placeholder="۰۹۱۲*******"
                                       id="mobile_number_one" value=""
                                       class="w-full @error('mobile') error @enderror text-left placeholder:text-left focus:bg-[#121212] bg-[#37383e] text-slate-300  py-3 pr-4 pl-4 transition-colors duration-300 focus:outline-none">

                            </div>
                            <div>
                                @error('mobile') <span class="error">{{ $message }}</span> @enderror
                            </div>
                        </div>

                        <div>
                            <label for="create_new_pass" class="block text-sm font-medium">رمز عبور جدید را وارد
                                نمائید</label>
                            <div class="relative mt-4">
                                <input wire:model="password" autocomplete="off" inputmode="text" :type="showPasswordField ? 'password' : 'text'" id="create_new_pass"
                                       x-model="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">

                                <div class="absolute p-2 top-[5px] fill-slate-300 hover:fill-brand-2"
                                        @click="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>
                                </div>
                            </div>
                            <div>
                                @error('password') <span class="error">{{ $message }}</span> @enderror
                            </div>

                            <div class="flex justify-end flex-col gap-2 mt-4">
                                <!-- password difficulty -->
                                <div class="flex flex-row-reverse -mx-1">
                                    <template x-for="(v,i) in 5">
                                        <div class="w-1/5 px-1">
                                            <div class="h-2 rounded-xl transition-colors"
                                                 :class="i < passwordScore ? (passwordScore <= 2 ? 'bg-red-400' : (passwordScore <=
                                                    4 ?
                                                    'bg-yellow-400' : 'bg-green-500')) : 'bg-transparent'">
                                            </div>
                                        </div>
                                    </template>
                                </div>
                            </div>

                            <ul class="mt-4">
                                <li class="flex gap-2 mb-4">
                                    -
                                    <p class="text-sm">حداقل ۶ کاراکتر</p>
                                </li>
                                <li class="flex gap-2 mb-4">
                                    -
                                    <p class="text-sm">حداقل یک کاراکتر با حرف بزرگ</p>
                                </li>
                                <li class="flex gap-2 mb-4">
                                    -
                                    <p class="text-sm">حداقل یک کاراکتر با حرف کوچک</p>
                                </li>
                                <li class="flex gap-2 mb-4">
                                    -
                                    <p class="text-sm">حداقل یک کاراکتر عددی</p>
                                </li>
                            </ul>
                        </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>

                        <div class="mt-2">
                            <div class="flex justify-end flex-col gap-2 mt-4"></div>
                            <p class="text-sm cursor-pointer text-center">حساب کاربری دارید؟ <a class="text-blue-400" @click="step='auth'"> ورود</a></p>
                        </div>


                    </div>
                    <div x-cloak wire:loading wire:target="registerWithMobile" 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>
                </form>

                <form x-show="step == 'getMobile'" x-cloak class="text-slate-200" wire:submit="getMobile">
                    <div class="flex flex-col gap-5">
                        <button type="button" @click="step='auth'"
                                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="flex flex-col gap-3">
                            <h1 class="text-right font-bold text-xl ">ورود با رمز موقت</h1>
                            <p class="text-base font-light text-slate-400 text-right w-11/12 md:max-w-[800px]">
                                در صورت فراموشی رمز عبور خود برای ایجاد رمز جدید شماره موبایل مرتبط با حساب کاربری خود را وارد کنید.
                            </p>
                            @if (session()->has('error'))
                                <div class="error-box">
                                    <span>{{ session('error') }}</span>
                                </div>
                            @endif
                        </div>

                        <div>
                            <label for="mobile_number" class="block text-sm font-medium">شماره موبایل</label>
                            <div class="rounded-lg bg-[#37383e] mt-4 overflow-hidden relative">
                                <input inputmode="numeric" wire:model="mobile" x-data="{phone: $wire.entangle('mobile')}" :maxlength="11" :minlength="11" x-model="phone"  dir="ltr" placeholder="۰۹۱۲*******"
                                       id="mobile_number" value=""
                                       class="w-full @error('mobile') error @enderror placeholder:text-left text-left focus:bg-[#121212] bg-[#37383e] text-slate-300  py-3 pr-4 pl-4 transition-colors duration-300 focus:outline-none">

                            </div>
                            <div>
                                @error('mobile') <span class="error">{{ $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>

                    </div>

                    <div x-cloak wire:loading wire:target="getMobile" 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>
                </form>

                <form x-show="step == 'verify_mobile'" x-cloak class="text-slate-200" wire:submit="validateCodeWithMobile">

                    <div class="flex flex-col gap-5" id="otp-form_for_reset">
                        <button type="button" @click="step='auth'"
                                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>{{$this->mobile}}</p>
                        </button>

                        @if (session()->has('code_error'))
                            <div class="error-box">
                                <span>{{ session('code_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">
                                    <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>
                    </div>
                    <div x-cloak wire:loading wire:target="validateCodeWithMobile" 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>
                </form>

                <form x-show="step == 'new_password'" x-cloak class="text-slate-200" wire:submit="saveNewPass" @keydown.enter="$wire.saveNewPass()">

                    <div class="flex flex-col gap-5" id="otp-form_for_reset">
                        <button type="button" @click="step='verify_mobile'"
                                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>{{$this->mobile}}</p>
                        </button>

                        <div>
                            <label for="enter_new_pass" class="block text-sm font-medium">رمز عبور جدید را وارد
                                نمائید</label>
                            <div class="relative mt-4">
                                <input wire:model="password" autocomplete="off" inputmode="text" :type="showPasswordField ? 'password' : 'text'" id="enter_new_pass"
                                       x-model="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">

                                <div class="absolute p-2 top-[5px] fill-slate-300 hover:fill-brand-2"
                                        @click="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>
                                </div>
                            </div>
                            <div>
                                @error('password') <span class="error">{{ $message }}</span> @enderror
                            </div>

                            <div class="flex justify-end flex-col gap-2 mt-4">
                                <!-- password difficulty -->
                                <div class="flex flex-row-reverse -mx-1">
                                    <template x-for="(v,i) in 5">
                                        <div class="w-1/5 px-1">
                                            <div class="h-2 rounded-xl transition-colors"
                                                 :class="i < passwordScore ? (passwordScore <= 2 ? 'bg-red-400' : (passwordScore <=
                                                    4 ?
                                                    'bg-yellow-400' : 'bg-green-500')) : 'bg-transparent'">
                                            </div>
                                        </div>
                                    </template>
                                </div>
                            </div>

                            <ul class="mt-4">
                                <li class="flex gap-2 mb-4">
                                    -
                                    <p class="text-sm">حداقل ۶ کاراکتر</p>
                                </li>
                                <li class="flex gap-2 mb-4">
                                    -
                                    <p class="text-sm">حداقل یک کاراکتر با حرف بزرگ</p>
                                </li>
                                <li class="flex gap-2 mb-4">
                                    -
                                    <p class="text-sm">حداقل یک کاراکتر با حرف کوچک</p>
                                </li>
                                <li class="flex gap-2 mb-4">
                                    -
                                    <p class="text-sm">حداقل یک کاراکتر عددی</p>
                                </li>
                            </ul>
                        </div>

                        <button type="submit"
                                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>
                    </div>

                    <div x-cloak wire:loading wire:target="saveNewPass" 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>
                </form>
            </div>


            <script>

                // otp form for reset
                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 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>
            <script>
                function timer(expiry) {
                    return {
                        remaining: expiry,
                        timerOn: true,
                        timer: '',
                        resend() {
                            if(!this.timerOn) {
                                this.timerOn = true;
                                this.remaining = 120;
                                this.$wire.resendCodeWithMobile();
                            }
                        },
                        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>

        </div>
    </div>
    @sortableWidgets($footerInstance, 'footer')
</x-layouts.app>

