<x-layouts.app>
    @sortableWidgets($headerInstance, 'header')

    <!-- step : auth / register / enter_password / set_password / one_time_password / reset_password -->
    <div x-data="{
                    step: $wire.entangle('step').live,
                    showPasswordField: true,
                    passwordScore: 0,
                    password: '',
                    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">

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

        <!-- for password difficulty -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/zxcvbn/4.4.2/zxcvbn.js"></script>

        <!-- 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 == 'register'" x-cloak class="text-slate-200" wire:submit="register">
                <div class="flex flex-col gap-5">

                    <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]">
                            ثبت نام و مشاهده ویدیوها در {{config('app.name')}} رایگان است
                            اطلاعات حساب کاربری‌تان را وارد کنید:
                        </p>
                    </div>

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

                    <div>
                        <label for="f_name" class="block text-sm font-medium">نام</label>
                        <input type="text" id="f_name" wire:model="f_name"
                               class="@error('f_name') error @enderror block mt-4 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>
                            @error('f_name') <span class="error">{{ $message }}</span> @enderror
                        </div>
                    </div>
                    <div>
                        <label for="l_name" class="block text-sm font-medium">نام خانوادگی</label>
                        <input type="text" id="l_name" wire:model="l_name"
                               class="@error('l_name') error @enderror block mt-4 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>
                            @error('l_name') <span class="error">{{ $message }}</span> @enderror
                        </div>
                    </div>

                    <!-- email -->
                    <div>
                        <label for="email" class="block text-sm font-medium">ایمیل</label>
                        <input type="email" wire:model="email"  dir="ltr" placeholder="example@gmail.com" id="email"
                            class="@error('email') error @enderror text-slate-300 block mt-4 w-full bg-transparent 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>
                            @error('email') <span class="error">{{ $message }}</span> @enderror
                        </div>
                    </div>

                    {{-- password --}}
                    <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" 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>
                                @error('password') <span class="error">{{ $message }}</span> @enderror
                            </div>
                        </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-brand-2 text-white rounded-lg py-2 px-4 text-center font-semibold disabled:bg-slate-800 disabled:text-slate-500">ادامه</button>

                    <div class="flex justify-end flex-col gap-2 mt-4">
                        <p class="text-sm cursor-pointer text-center">حساب کاربری دارید؟ <a class="text-brand-2" href="{{url('auth/login')}}"> می‌خواهم وارد شوم</a></p>
                    </div>

                    <div>

                        <div class=" mt-3 text-sm">
                            ثبت‌نام شما، به معنای پذیرش
                            <a href="{{url('/terms-of-service')}}" class="text-brand-2">شرایط استفاده از خدمات</a>
                            و
                            <a href="{{url('/privacy-policy')}}" class=" text-brand-2">سیاست حفظ حریم خصوصی</a>
                            مدیاکست می‌باشد.
                        </div>
                    </div>
                </div>
                <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>
            </form>

            <form x-show="step == 'verify_email'" x-cloak class="text-slate-400" wire:submit="validateCode">
                <div class="flex flex-col gap-5" id="otp-form_for_reset">
                    <button type="button" @click="step='register'"
                            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->email}}</p>
                    </button>

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

                    <div>
                        <label class="block text-sm font-normal">کد تایید ارسال شده به ایمیل خود را در کادر زیر وارد کنید:</label>
                        <div class="mt-3 flex flex-row-reverse items-center justify-center gap-3">
                            <input type="text" wire:model="code.0"
                                   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"
                                   pattern="\d*" maxlength="1" />
                            <input type="text" wire:model="code.1"
                                   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"
                                   maxlength="1" />
                            <input type="text" wire:model="code.2"
                                   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"
                                   maxlength="1" />
                            <input type="text" wire:model="code.3"
                                   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"
                                   maxlength="1" />
                            <input type="text" wire:model="code.4"
                                   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"
                                   maxlength="1" />
                            <input type="text" wire:model="code.5"
                                   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"
                                   maxlength="1" />
                        </div>
                    </div>

                    <button type="button" @click="resend()" x-data="timer(120)"
                            class="hover:bg-white/5 text-slate-400 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>

                    <button type="submit" id="otp_submit_btn_for_reset"
                            class="w-full bg-brand-2 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 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>

        <!-- support icon -->
        <div class="absolute bottom-5 left-4">
            <a href="tel:+980000000" class="size-14 rounded-full bg-brand-2 flex items-center justify-center">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="40" height="40"
                     class="fill-white">
                    <path
                        d="M12,2C6.477,2,2,6.477,2,12v4h3v-4c0-3.866,3.134-7,7-7s7,3.134,7,7v4h3v-4C22,6.477,17.523,2,12,2z" />
                    <path
                        d="M21,12h-2c-1.105,0-2,0.895-2,2v2c0,1.105,0.895,2,2,2h2c0.552,0,1-0.448,1-1v-4C22,12.448,21.552,12,21,12z" />
                    <path
                        d="M3,12h2c1.105,0,2,0.895,2,2v2c0,1.105-0.895,2-2,2H3c-0.552,0-1-0.448-1-1v-4C2,12.448,2.448,12,3,12z" />
                    <path d="M5,18v-1H3v1c0,2.209,1.791,4,4,4h5v-2H7C5.895,20,5,19.105,5,18z" />
                    <circle cx="12" cy="21" r="2" />
                </svg>
            </a>
        </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.resendCode();
                        }
                    },
                    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>
    @sortableWidgets($footerInstance, 'footer')
</x-layouts.app>

