@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="height: 200px">

                        <div class="xl:hidden">
                            <div style="font-size: 1.7rem" class="font-medium leading-[1.4] text-black">
                                کامبک
                            </div>
                            <div class="mt-5 text-base leading-relaxed text-black/70 xl:text-lg">

                                سامانه رایگان جمع بندی کنکور تیر ویژه تمام داوطلبان کشور
                            </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">
                            داوطلب گرامی لطفا شماره تماس خودتان به همراه کد فعالسازی که در لایو دریافت کردید وارد نمایید
                        </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"
                                   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>
                </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('dist/images/logo/logo.png') }}"
                         style="height: 200px">
                </div>
                <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