@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="flex h-[55px] w-[55px] items-center justify-center rounded-[0.8rem] border border-primary/30">
                    <div
                        class="flex h-[60px] w-[60px] items-center justify-center rounded-lg bg-gradient-to-b from-theme-1 to-theme-2/80 transition-transform ease-in-out">
                        <img src="{{ asset('dist/images/logo/logo.png') }}">
                    </div>
                </div>
                <div class="mt-10">
                    <div class="text-2xl font-medium">ثبت نام و رزرو</div>
                    @if ($userExists && $signed_up)
                        <p class="text-success">شما قبلا رزرو کرده اید</p>
                    @else
                        <form action="{{ route('signup.store') }}" id="pay-form" method="POST">
                            @csrf
                            <div class="mt-6">
                                <div class="my-3">
                                    <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" required name="name" onkeyup="findType(this)"
                                           value="{{ $user ? $user->name : null }}"
                                           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>
                                <div class="my-3">
                                    <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" required name="family" onkeyup="findType(this)"
                                           value="{{ $user ? $user->family : null }}"
                                           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>
                                <div class="my-3">
                                    <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" required name="phone" onkeyup="number(this)"
                                           value="{{ $phone }}" disabled 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">
                                    <input type="hidden" name="phone" value="{{ $phone }}">
                                    <p class="number-error text-danger hidden">شماره وارد شده معتبر نیست</p>
                                </div>
                                <div class="my-3">
                                    <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" required name="national_code"
                                           onkeyup="number(this)"
                                           value="{{ old('national_code', $user ? $user->national_code : null) }}"
                                           minlength="10" maxlength="10"
                                           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="number-error text-danger hidden">کد ملی وارد شده معتبر نیست</p>
                                </div>
                                <div class="my-3">
                                    <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="provinces" id="provinces"
                                            data-placeholder="جستجو" required
                                            class="tom-select 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 mt-2 flex-1">
                                        @foreach (DB::table('provinces')->get() as $item)
                                            <option value="{{ $item->id }}"
                                                    data-code="{{ $item->code }}"
                                                {{ old('provinces', $user ? $user->province_id : null) == $item->id ? 'selected' : '' }}>
                                                {{ $item->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
{{--                                <div class="my-3">--}}
{{--                                    <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" name="city" required onkeyup="findType(this)"--}}
{{--                                           value="{{ old('city', $user ? $user->city : null) }}" minlength="10"--}}
{{--                                           maxlength="10"--}}
{{--                                           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>--}}
                                <div class="my-3">
                                    <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"
                                           required
                                           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>
                                <div class="my-3">
                                    <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_confirmation" required
                                           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>
                                <div class="my-3">
                                    <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="main_major"
                                            data-placeholder="جستجو" required
                                            class="tom-select 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 mt-2 flex-1">
                                        @foreach (\App\Models\Phone::getAllMajors() as $key => $value)
                                            <option value="{{ $key }}"
                                            @if ($user)
                                                @if ($user->majors)
                                                    {{ json_decode($user->majors)[0] == $key ? 'selected' : '' }}
                                                    @endif
                                                @endif
                                            @if (old('majors'))
                                                {{ old('majors')[0] == $key ? 'selected' : '' }}
                                                @endif
                                            >{{ $value }}</option>
                                        @endforeach
                                    </select>
                                </div>
{{--                                <div class="my-3">--}}
{{--                                    <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="majors[]" multiple="multiple" id="majors"--}}
{{--                                            data-placeholder="جستجو"--}}
{{--                                            class="tom-select 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 mt-2 flex-1">--}}
{{--                                        @foreach (\App\Models\Phone::SECONDARY_MAJOR as $key => $value)--}}
{{--                                            <option value="{{ $key }}"--}}
{{--                                            @if ($user)--}}
{{--                                                @if ($user->majors)--}}
{{--                                                    @foreach (json_decode($user->majors) as $item)--}}
{{--                                                        {{ $item == $key ? 'selected' : '' }}--}}
{{--                                                        @endforeach--}}
{{--                                                    @endif--}}
{{--                                                @endif--}}
{{--                                            @if (old('majors'))--}}
{{--                                                @foreach (old('majors') as $item)--}}
{{--                                                    {{ $item == $key ? 'selected' : '' }}--}}
{{--                                                    @endforeach--}}
{{--                                                @endif--}}
{{--                                            >{{ $value }}</option>--}}
{{--                                        @endforeach--}}
{{--                                    </select>--}}
{{--                                    <p class="majors-error text-danger hidden">فقط می توانید یکی از 3 رشته--}}
{{--                                        تجربی، ریاضی و انسانی را انتخاب کنید</p>--}}
{{--                                </div>--}}
                                <div class="my-3">
                                    <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" name="phone2" onkeyup="number(this)"
                                           value="{{ old('phone2', $user ? $user->phone2 : null) }}" 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">
                                    <p class="number-error text-danger hidden">شماره وارد شده معتبر نیست</p>
                                </div>
                                <div class="my-3">
                                    <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>
                                    <div class="flex group input-group mt-2">
                                        <input type="text" aria-label="2345678" name="tel"
                                               value="{{ old('tel', $user ? $user->tel : '') }}" maxlength="8"
                                               onkeyup="number(this)" dir="ltr"
                                               aria-describedby="input-group-price" placeholder="2345678"
                                               class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&amp;[readonly]]:bg-slate-100 [&amp;[readonly]]:cursor-not-allowed [&amp;[readonly]]:dark:bg-darkmode-800/50 [&amp;[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md 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 [&amp;[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]:[&amp;:not(:first-child)]:border-r-transparent ltr:group-[.input-group]:[&amp;: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 ui-autocomplete-input"
                                               autocomplete="off">
                                        <div id="input-group-price"
                                             class="py-2 px-3 bg-slate-100 border shadow-sm border-slate-200 text-slate-600 dark:bg-darkmode-900/20 dark:border-darkmode-900/20 dark:text-slate-400 group-[.input-group]:rounded-none rtl:group-[.input-group]:[&amp;:not(:first-child)]:border-r-transparent ltr:group-[.input-group]:[&amp;: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 province-code">
                                            021
                                        </div>
                                        {{--                                        <p class="number-error text-danger hidden">شماره وارد شده معتبر نیست</p>--}}
                                    </div>
                                </div>

                                <input type="hidden" name="getway" autocomplete="off"
                                       class="getway" value="">
                                <input type="hidden" name="installment" autocomplete="off"
                                       class="installment" value="1">

                                <div class="my-3">
                                    <p class="text-center text-2xl">پرداخت قسط اول</p>
                                    <button type="button" autocomplete="off"
                                            class="transition duration-200 border shadow-sm items-center justify-center py-2 px-3 rounded-md 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 [&amp;:hover:not(:disabled)]:bg-opacity-90 [&amp;:hover:not(:disabled)]:border-opacity-90 [&amp;:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-success border-success text-white dark:border-success w-full payBtn submitFormBtn"
                                            data-getway="bitpay"><img width="100"
                                                                      src="https://bpm.shaparak.ir/pgwchannel/img/behpardakht_logo.svg"
                                                                      alt="" class="mx-auto"><br>پرداخت قسط اول با درگاه
                                        ملت
                                    </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="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>
        $('.submitFormBtn').on('click', function (e) {
            let self = $(this);
            let getway = self.data('getway');
            $('.getway').val(getway);
            $('#pay-form').submit();
        })

        window.addEventListener("pageshow", function (event) {
            var historyTraversal = event.persisted ||
                (typeof window.performance != "undefined" &&
                    window.performance.navigation.type === 2);
            if (historyTraversal) {
                // Handle page restore.
                window.location.reload();
            }
        });

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

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

        let self = $('#provinces')
        let option = self.find('option:selected')
        $('.province-code').html(option.data('code'))
        console.log(option)
        checkMajors();

        $(document).ready(function () {
            $('#provinces').on('change', function () {
                let self = $(this)
                let option = self.find('option:selected')
                $('.province-code').html(option.data('code'))
            })

            $('select[name="majors[]"], select[name="main_major"]').on('change', function () {
                checkMajors();
            })

            $('select[name="main_major"]').on('change', function () {
                $('select[name="majors[]"]').val([])
            })
        });

        // Validate Persian Characters
        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 {
                        validation.push(false);
                        validate();
                    }
                } else {
                    if (sib.length == 0) {
                        $('<p class="english-error text-danger">فقط حروف فارسی مجاز است</p>').insertAfter(element)
                        // validation.push(false);
                        // validate();
                    }
                }
            } else {
                if (sib.length) {
                    sib.remove()
                    validation.pop(false);
                    validate();
                }
            }
        }

        function checkMajors() {
            var array = ['riazi', 'ensani', 'tajrobi'];
            var main_major = $('select[name="main_major"]').val();

            if (array.includes(main_major)) {
                $.each($('select[name="majors[]"] option'), function (i, option) {
                    if (array.includes(option.value)) {
                        $(option).addClass('hidden')
                    } else {
                        $(option).removeClass('hidden')
                    }
                })
            } else {

                $.each($('select[name="majors[]"] option'), function (i, option) {
                    if (main_major == option.value) {
                        $(option).addClass('d-none')
                    } else {
                        $(option).removeClass('hidden')
                    }
                })
            }

            var common = $.grep(array, function (element) {
                return $.inArray(element, $('select[name="majors[]"]').val()) !== -1;
            });

            if (common.length >= 2) {
                $('.majors-error').removeClass('hidden');
                $('.submitFormBtn').attr('disabled', 'disabled');
            } else {
                $('.majors-error').addClass('hidden');
                $('.submitFormBtn').removeAttr('disabled');
            }
        }

        // validate numbers
        var stop = false;

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

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

@endsection