<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>
            .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>
            <!-- form -->
            <div
                class="w-full sm:max-w-xl rounded-2xl m-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 == 'new_password'" x-cloak class="text-slate-200" wire:submit="saveNewPass">

                    <div class="flex flex-col gap-5" id="otp-form_for_reset">
                        <button type="button" wire:click="returnBack"
                                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" :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">

                                <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="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 handleKeyDown = (e) => {
                        // if (
                        //     !/^[0-9]{1}$/.test(e.key) &&
                        //     e.key !== 'Backspace' &&
                        //     e.key !== 'Delete' &&
                        //     e.key !== 'Tab' &&
                        //     !e.metaKey
                        // ) {
                        //     e.preventDefault()
                        // }

                        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 {
                                submit.focus()
                                //form.submit()
                            }
                        }
                    }

                    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>
            <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>

