@extends('panel.layouts.master')
@section('content')
    @php
        $header = 'false';
        $sidebar = 'false';
        $footer = 'false';
        $examStart = str_starts_with(request()->url(), 'https://exam');
    @endphp
    @if($examStart)
        <style>
            .before\:from-theme-1::before {
                --tw-gradient-from: rgb(94, 54, 3) var(--tw-gradient-from-position);
            }

            .before\:to-theme-2::before {
                --tw-gradient-to: rgb(107, 110, 12) var(--tw-gradient-to-position);
            }
        </style>
    @endif
    <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($examStart ? 'dist/images/exam-logo2.png' : 'dist/images/logo/logo.png') }}"
                             style="width: 200px; height: 200px">

                        <div class="xl:hidden">
                            <div style="font-size: 1.7rem" class="font-medium leading-[1.4] text-black">
                                @if($examStart)
                                    سامانه آزمون جامع
                                @else
                                    سامانه آموزشی فست شارژ
                                @endif
                            </div>
                            <div class="mt-5 text-base leading-relaxed text-black/70 xl:text-lg">
                                @if($examStart)
                                    انتشارات ناصح زاده
                                @else
                                    سامانه رایگان جمع بندی کنکور اردیبهشت ویژه تمام داوطلبان کشور
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
                <div class="mt-10">
                    <div class="text-2xl font-medium">ورود</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>
                            <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>
                    @if($examStart)
                        <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">
                                داوطلب گرامی ابتدا شماره تماس خود را به همراه کد فعالسازی که دریافت کرده اید وارد کنید و
                                سپس وارد تکمیل پروفایل شوید و پروفایل خود را تکمیل کنید تا آزمون مورد نظر به شما تخصیص
                                داده شود.
                            </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">
                                حتما با فیلترشکن خاموش وارد شوید.
                            </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>
                    @endif
                    {{--                    @if(!$examStart)--}}
                    <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"
                                   minlength="11"
                                   maxlength="11"
                                   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">
                                <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" style="display: none;">نحوه ورود</label>
                            <div class="mt-2" style="display: none;">
                                <div data-tw-merge class="flex items-center">
                                    <input data-tw-merge type="checkbox" name="type" value="password"
                                           id="verify-type"
                                           autocomplete="off" checked
                                           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>
                            </div>
                        </div>
                    </form>
                    {{--                    @endif--}}
                </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="rounded-lg to-theme-2/80 transition-transform ease-in-out">
                    <img class="mx-auto"
                         src="{{ asset($examStart ? 'dist/images/exam-logo1.png' : 'dist/images/logo/logo.png') }}"
                         style="{{ !$examStart ? "width: 200px;" : "" }} height: 200px">
                </div>
                <div class="text-[2.6rem] font-medium leading-[1.4] text-white xl:text-5xl xl:leading-[1.2]">
                    @if($examStart)
                        سامانه آزمون جامع
                    @else
                        سامانه آموزشی فست شارژ
                    @endif
                </div>
                <div class="mt-5 text-base leading-relaxed text-white/70 xl:text-lg">
                    @if($examStart)
                        انتشارات ناصح زاده
                    @else
                        سامانه رایگان جمع بندی کنکور اردیبهشت ویژه تمام داوطلبان کشور
                    @endif
                </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