@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.png') }}"
                             style="width: 200px; height: 200px">

                        <div class="xl:hidden text-center">
                            <div style="font-size: 1.7rem" class="font-medium leading-[1.4] text-black">
                                سامانه امتحانات نهایی
                            </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" id="loginForm">
                        @csrf
                        <div class="mt-6">
                            <input type="hidden" name="in_api" value="0">
                            <input type="hidden" name="data" value="">
                            <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" autocomplete="off"
                                   value="{{ old('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">
                            <p class="text-danger phoneAlert" style="display: none">لطفا شماره موبایل خود را به صورت
                                صحیح و ۱۱ رقمی وارد کنید.</p>
                            <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">
                                    رشته تحصیلی*
                                </label>
                                <select data-tw-merge="" name="field_id" required autocomplete="off"
                                        class="mb-2 disabled:bg-slate-100 disabled:cursor-not-allowed disabled:dark:bg-darkmode-800/50 [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md py-2 px-3 rtl:pl-8 ltr:pr-8 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 group-[.form-inline]:flex-1 flex-1">
                                    <option value="" selected disabled>انتخاب رشته تحصیلی</option>
                                    @foreach (\App\Models\Field::get() as $item)
                                        <option value="{{ $item->id }}">{{ $item->name }}</option>
                                    @endforeach
                                </select>
                            </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="submitBtn 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.png') }}"
                         style="width: 200px; 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('دریافت کد یکبار مصرف')
            }
        });

        {{--$(".loginBtn[type='button']").on("click", function (e) {--}}
        {{--    e.preventDefault();--}}
        {{--    let self = $(this);--}}
        {{--    let phoneInp = $("input[name='phone']");--}}
        {{--    let phone = phoneInp.val();--}}
        {{--    let existsAlert = $(".api-exists-alert");--}}
        {{--    let notExistsAlert = $(".api-not-exists-alert");--}}
        {{--    if (phone.length == 11) {--}}
        {{--        $('.phoneAlert').hide()--}}
        {{--        self.html("در حال بررسی در سامانه بورسیه...")--}}
        {{--        $.ajax({--}}
        {{--            type: "POST",--}}
        {{--            url: "{{ env("API_BASE_URL") }}" + "/get-user",--}}
        {{--            headers: {--}}
        {{--                "X-API-TOKEN": "{{ env("API_TOKEN") }}"--}}
        {{--            },--}}
        {{--            data: {--}}
        {{--                phone: phone,--}}
        {{--            }, success: function (res) {--}}
        {{--                self.html("ثبت نام");--}}
        {{--                $(".signup-form").show();--}}
        {{--                self.hide();--}}
        {{--                $(".submitBtn").show();--}}
        {{--                if(!$("input[name='type']").is(":checked")){--}}
        {{--                    $(".login-type").hide();--}}
        {{--                    $(".active-code").hide();--}}
        {{--                }--}}
        {{--                if (res.success === true) {--}}
        {{--                    existsAlert.show();--}}
        {{--                    let data = res.data;--}}
        {{--                    $("input[name='name']").val(data.name);--}}
        {{--                    $("input[name='family']").val(data.family);--}}
        {{--                    $("select[name='field_id']").val(data.field_id).change();--}}
        {{--                    $("select[name='province_id']").val(data.province_id).change();--}}
        {{--                    $("input[name='in_api']").val(1);--}}
        {{--                    $("input[name='data']").val(JSON.stringify(res.data));--}}
        {{--                    $(".signup-form > select").attr("disabled", "disabled")--}}
        {{--                } else {--}}
        {{--                    notExistsAlert.show();--}}
        {{--                    $(".signup-form > input").removeAttr("readonly")--}}
        {{--                    $(".signup-form > select").removeAttr("disabled")--}}
        {{--                }--}}
        {{--            }--}}
        {{--        })--}}
        {{--    } else {--}}
        {{--        $('.phoneAlert').show()--}}
        {{--    }--}}
        {{--})--}}

        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