@extends('panel.layouts.master')
@section('content')
    @php
        $header = 'false';
        $sidebar = 'false';
        $footer = 'false';
    @endphp

    <div
        class="container grid grid-cols-12 px-5 py-10 sm:px-10 sm:py-14 md:px-36 lg:h-screen lg:max-w-[1550px] lg:py-0 lg:pl-14 lg:pr-12 xl:px-24 2xl:max-w-[1750px]">
        <div
            class="relative z-50 h-full col-span-12 p-7 sm:p-14 bg-white rounded-2xl lg:bg-transparent lg:pr-10 lg:col-span-5 rtl:xl:pl-24 ltr:xl:pr-24 2xl:col-span-4 lg:p-0 before:content-[''] before:absolute before:inset-0 before:-mb-3.5 before:bg-white/40 before:rounded-2xl before:mx-5">
            <div class="relative z-10 flex flex-col justify-center w-full h-full py-2 lg:py-32">
                <div
                    class="rounded-[0.8rem]">
                    <div
                        class="rounded-lg to-theme-2/80 transition-transform ease-in-out">
                        <img class="mx-auto" src="{{ asset('dist/images/logo/logo.png') }}" style="width: 100px; height: 100px">
                    </div>
                </div>
                <div class="mt-10">
                    <div class="text-2xl font-medium">ورود</div>
                    <div class="mt-2.5 text-slate-600">
                        حساب کاربری ندارید؟
                        <a class="font-medium text-primary shadow bg-primary text-white rounded-xl p-3" href="{{ route('register') }}">
                            ثبت نام
                        </a>
                    </div>
                    <div role="alert"
                         class="alert relative border rounded-md px-5 py-4 border-primary text-primary dark:border-primary my-7 flex items-center rounded-[0.6rem] border-primary/20 bg-primary/5 px-4 py-3 leading-[1.7]">
                        <div class="">
                            <i data-tw-merge="" data-lucide="lightbulb"
                               class="rtl:ml-2 ltr:mr-2 h-7 w-7 fill-primary/10 stroke-[0.8]"></i>
                        </div>
                        <div class="rtl:mr-1 ltr:ml-1 rtl:ml-8 ltr:mr-8">
                            دو روش برای ورود وجود دارد :
                            <br>
                            <strong>روش اول:</strong> ورود با شماره موبایل و کد یکبار مصرف
                            <br>
                            <strong>روش دوم:</strong> ورود با رمز شخصی
                        </div>
                        <button data-tw-merge="" data-tw-dismiss="alert" type="button" aria-label="Close"
                                class="py-2 px-3 absolute rtl:left-0 ltr:right-0 my-auto rtl:ml-2 ltr:mr-2 btn-close text-primary">
                            <i data-tw-merge="" data-lucide="x" class="stroke-[1] w-5 h-5"></i></button>
                    </div>
                    <div role="alert"
                         class="alert relative border rounded-md px-5 py-4 border-primary text-primary dark:border-primary my-7 flex items-center rounded-[0.6rem] border-primary/20 bg-primary/5 px-4 py-3 leading-[1.7]">
                        <div class="">
                            <i data-tw-merge="" data-lucide="lightbulb"
                               class="rtl:ml-2 ltr:mr-2 h-7 w-7 fill-primary/10 stroke-[0.8]"></i>
                        </div>
                        <div class="rtl:mr-1 ltr:ml-1 rtl:ml-8 ltr:mr-8">
                            اطلاعیه مهم ویژه داوطلبان سیکس پک
                            <br/>
                            در انتشارات ناصح زاده:
                            <br/>
                            طرح ملی بورسیه تحصیلی رایگان ده هزار داوطلب کنکور،ویژه امتحانات نهایی خرداد ۱۴۰۴ در گروه آموزشی ناصح‌زاده شروع شد،با توجه به ظرفیت محدود این طرح در هر استان ،از داوطلبان پکیج سیکس پک درخواست میشود که سریعا در این طرح ملی کاملا رایگان ثبت نام کنند تا در ایام امتحان نهایی با نهایت آرامش و به همراه داشتن ابزارهای کافی به نتیجه مطلوب برسند
                            <br/>
                            لینک ثبت نام در طرح ملی بورسیه تحصیلی رایگان ویژه امتحانات نهایی:
                            <br/>
                            <br/>
                            <a href="https://boursie.miladnasehzadeh.com/login"><strong>برای ورود به بورسیه اینجا کلیک کنید</strong></a>
                        </div>
                        <button data-tw-merge="" data-tw-dismiss="alert" type="button" aria-label="Close"
                                class="py-2 px-3 absolute rtl:left-0 ltr:right-0 my-auto rtl:ml-2 ltr:mr-2 btn-close text-primary">
                            <i data-tw-merge="" data-lucide="x" class="stroke-[1] w-5 h-5"></i></button>
                    </div>
                    <form action="{{ route('login') }}" method="POST">
                        @csrf
                        <div class="mt-6">
                            <label data-tw-merge=""
                                   class="inline-block mb-2 group-[.form-inline]:mb-2 group-[.form-inline]:sm:mb-0 ltr:group-[.form-inline]:sm:mr-5 rtl:group-[.form-inline]:sm:ml-5 ltr:group-[.form-inline]:sm:text-right rtl:group-[.form-inline]:sm:text-left">
                                شماره موبایل*
                            </label>
                            <input data-tw-merge="" type="text" placeholder="09123456789" name="phone"
                                   class="mb-1 disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm shadow-sm placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 [&[type='file']]:border rtl:file:ml-4 ltr:file:mr-4 file:py-2 file:px-4 rtl:file:rounded-r-md ltr:file:rounded-l-md file:border-0 rtl:file:border-l-[1px] ltr:file:border-r-[1px] file:border-slate-100/10 file:text-sm file:font-semibold file:bg-slate-100 file:text-slate-500/70 hover:file:bg-200 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none rtl:group-[.input-group]:[&:not(:first-child)]:border-r-transparent ltr:group-[.input-group]:[&:not(:first-child)]:border-l-transparent rtl:group-[.input-group]:first:rounded-r ltr:group-[.input-group]:first:rounded-l rtl:group-[.input-group]:last:rounded-l ltr:group-[.input-group]:last:rounded-r group-[.input-group]:z-10 block rounded-[0.6rem] border-slate-300/80 px-4 py-3.5">
                            <div class="pass-inp mb-2" style="display: none">
                                <label data-tw-merge=""
                                       class="inline-block mb-2 group-[.form-inline]:mb-2 group-[.form-inline]:sm:mb-0 ltr:group-[.form-inline]:sm:mr-5 rtl:group-[.form-inline]:sm:ml-5 ltr:group-[.form-inline]:sm:text-right rtl:group-[.form-inline]:sm:text-left mt-4">
                                    رمز عبور*
                                </label>
                                <input data-tw-merge="" type="password" placeholder="************" name="password"
                                       class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm shadow-sm placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 [&[type='file']]:border rtl:file:ml-4 ltr:file:mr-4 file:py-2 file:px-4 rtl:file:rounded-r-md ltr:file:rounded-l-md file:border-0 rtl:file:border-l-[1px] ltr:file:border-r-[1px] file:border-slate-100/10 file:text-sm file:font-semibold file:bg-slate-100 file:text-slate-500/70 hover:file:bg-200 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none rtl:group-[.input-group]:[&:not(:first-child)]:border-r-transparent ltr:group-[.input-group]:[&:not(:first-child)]:border-l-transparent rtl:group-[.input-group]:first:rounded-r ltr:group-[.input-group]:first:rounded-l rtl:group-[.input-group]:last:rounded-l ltr:group-[.input-group]:last:rounded-r group-[.input-group]:z-10 block rounded-[0.6rem] border-slate-300/80 px-4 py-3.5">
                            </div>
                            <label class="mt-4">نحوه ورود</label>
                            <div class="mt-2">
                                <div data-tw-merge class="flex items-center">
                                    <input data-tw-merge type="checkbox" name="type" value="password" id="verify-type" autocomplete="off"
                                           class="transition-all duration-100 ease-in-out shadow-sm border-slate-200 cursor-pointer rounded focus:ring-4 focus:ring-offset-0 focus:ring-primary focus:ring-opacity-20 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&[type='radio']]:checked:bg-primary [&[type='radio']]:checked:border-primary [&[type='radio']]:checked:border-opacity-10 [&[type='checkbox']]:checked:bg-primary [&[type='checkbox']]:checked:border-primary [&[type='checkbox']]:checked:border-opacity-10 [&:disabled:not(:checked)]:bg-slate-100 [&:disabled:not(:checked)]:cursor-not-allowed [&:disabled:not(:checked)]:dark:bg-darkmode-800/50 [&:disabled:checked]:opacity-70 [&:disabled:checked]:cursor-not-allowed [&:disabled:checked]:dark:bg-darkmode-800/50 w-[38px] h-[24px] p-px rounded-full relative before:w-[20px] before:h-[20px] before:shadow-[1px_1px_3px_rgba(0,0,0,0.25)] rtl:before:transition-[margin-right] ltr:before:transition-[margin-left] before:duration-200 before:ease-in-out before:absolute before:inset-y-0 before:my-auto before:rounded-full before:dark:bg-darkmode-600 checked:bg-primary checked:border-primary checked:bg-none rtl:before:checked:mr-[14px] ltr:before:checked:ml-[14px] before:checked:bg-white w-[38px] h-[24px] p-px rounded-full relative before:w-[20px] before:h-[20px] before:shadow-[1px_1px_3px_rgba(0,0,0,0.25)] rtl:before:transition-[margin-right] ltr:before:transition-[margin-left] before:duration-200 before:ease-in-out before:absolute before:inset-y-0 before:my-auto before:rounded-full before:dark:bg-darkmode-600 checked:bg-primary checked:border-primary checked:bg-none rtl:before:checked:mr-[14px] ltr:before:checked:ml-[14px] before:checked:bg-white">
                                    <label data-tw-merge for="verify-type" class="cursor-pointer rtl:mr-2 ltr:ml-2">ورود با
                                        رمز شخصی</label>
                                </div>
                            </div>
                            <div class="mt-5 text-center xl:mt-8 rtl:xl:text-right ltr:xl:text-left">
                                <button data-tw-merge="" type="submit"
                                        class="loginBtn transition duration-200 border shadow-sm inline-flex items-center justify-center px-3 font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary rounded-full w-full rtl:bg-gradient-to-l ltr:bg-gradient-to-r from-theme-1/70 to-theme-2/70 py-3.5 rtl:xl:ml-3 ltr:xl:mr-3">
                                    دریافت کد یکبار مصرف
                                </button>
                                <button data-tw-merge=""
                                        class="transition duration-200 border shadow-sm inline-flex items-center justify-center px-3 font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed border-secondary text-slate-500 dark:border-darkmode-100/40 dark:text-slate-300 [&:hover:not(:disabled)]:bg-secondary/20 [&:hover:not(:disabled)]:dark:bg-darkmode-100/10 rounded-full mt-3 w-full bg-white/70 py-3.5">
                                    ثبت نام
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div
        class="container fixed inset-0 grid h-screen w-screen grid-cols-12 rtl:pr-14 ltr:pl-14 rtl:pl-12 ltr:pr-12 lg:max-w-[1550px] xl:px-24 2xl:max-w-[1750px]">
        <div
            class="relative h-screen col-span-12 lg:col-span-5 2xl:col-span-4 z-20 after:bg-white after:hidden after:lg:block after:content-[''] after:absolute rtl:after:left-0 ltr:after:right-0 after:inset-y-0 after:bg-gradient-to-b after:from-white after:to-slate-100/80 after:w-[800%] after:rounded-[0_1.2rem_1.2rem_0/0_1.7rem_1.7rem_0] before:content-[''] before:hidden before:lg:block before:absolute rtl:before:left-0 ltr:before:right-0 before:inset-y-0 before:my-6 before:bg-gradient-to-b before:from-white/10 before:to-slate-50/10 before:bg-white/50 before:w-[800%] rtl:before:-ml-4 ltr:before:-mr-4 before:rounded-[0_1.2rem_1.2rem_0/0_1.7rem_1.7rem_0]"></div>
        <div
            class="h-full col-span-7 2xl:col-span-8 lg:relative before:content-[''] before:absolute before:lg:-ml-10 rtl:before:right-0 ltr:before:left-0 before:inset-y-0 before:bg-gradient-to-b before:from-theme-1 before:to-theme-2 before:w-screen before:lg:w-[800%] after:content-[''] after:absolute after:inset-y-0 rtl:after:right-0 ltr:after:left-0 after:w-screen after:lg:w-[800%] after:bg-texture-white after:bg-fixed after:bg-center after:lg:bg-[25rem_-25rem] after:bg-no-repeat">
            <div
                class="sticky top-0 z-10 flex-col justify-center hidden h-screen rtl:mr-16 ltr:ml-16 lg:flex rtl:xl:mr-28 ltr:xl:ml-28 2xl:ml-36 text-center">
                <div class="text-[2.6rem] font-medium leading-[1.4] text-white xl:text-5xl xl:leading-[1.2]">
                    سیکس پک پرو اولین و بزرگ ترین
                </div>
                <div class="mt-5 text-base leading-relaxed text-white/70 xl:text-lg">
                    سامانه برنامه ریزی تحصیلی در کشور
                </div>
            </div>
        </div>
    </div>

@endsection
@section('script')
    <script>
        $("input[name='type']").on("change", function () {
            let self = $(this);
            $('.pass-inp').fadeToggle(100);

            if(self.is(':checked')){
                $('.loginBtn').text('ورود')
            }else{
                $('.loginBtn').text('دریافت کد یکبار مصرف')
            }
        });

        var validation = [];
        var checker = arr => arr.every(Boolean);

        function validate() {
            $('form input').on('keyup', function () {
                if (checker(validation)) {
                    $('.submitFormBtn').removeAttr('disabled')
                } else {
                    $('.submitFormBtn').attr('disabled', 'disabled')
                }
            })
        }

        function findType(element) {
            let char = new RegExp("[\u0600-\u06FF]");
            let sib = $(element).siblings('.english-error')
            if (element.value != '') {
                if (char.test(element.value) === true) {
                    if (sib.length) {
                        sib.remove()
                        validation.pop(false)
                        validate();
                    }
                } else if (!sib.length) {
                    $('<p class="english-error text-danger">فقط حروف فارسی مجاز است</p>').insertAfter(element)
                    validation.push(false)
                    validate();
                }
            } else {
                if (sib.length) {
                    sib.remove()
                    validation.pop(false)
                    validate();
                }
            }
        }

        // validate numbers
        function number(el) {
            var number = /^[0-9]*$/;

            if (el.value != '') {
                if ((el.value.match(number))) {
                    $(el).siblings('.number-error').addClass('d-none');
                    validation.pop(false);
                    validate();
                } else {
                    $(el).siblings('.number-error').removeClass('d-none');
                    validation.push(false);
                    validate();
                }
            } else {
                validation.pop(false);
                validate();
            }
        }
    </script>
@endsection