@extends('layout/main')
@section('title' , 'Register | '. env('APP_NAME'))
@section('content')
<!-- begin::-->
<div class="mb-30"></div>
<div class="container">
    <h2 class="font-bold text-primary mb-30 text-[28px]">{!! ___('registration.register') !!}</h2>
    <div class="bg-white rounded-2xl shadow-md border border-exgray flex flex-col gap-20 p-30 mb-6">
        <div>
            <h2 class="text-base font-medium text-primary">{!! ___('registration.about') !!}</h2>
            <p class="text-sm font-medium text-exdark leading-7"> {!! ___('registration.aboutContent') !!}</p>
        </div>
        <h3 class="text-sm font-medium">{!! ___('registration.admissionRequirements') !!}</h3>
        <ul class="list-disc text-sm font-medium space-y-2 rtl:pr-4 ltr:pl-4">
            <li>{!! ___('registration.nationality') !!}</li>
            <li>{!! ___('registration.graduates') !!}</li>
            {{-- {!! ___('registration.maxAge') !!} --}}
            <li>{!! ___('registration.HumanResourcesDevelopmentFund') !!}</li>
            <li>{!! ___('registration.insurance') !!}</li>
            <li>{!! ___('registration.interview') !!}</li>
        </ul>
        {{-- print user name --}}

        <p class="text-sm font-medium">{!! ___('registration.queries') !!} <a class="text-primary"
                href="https://api.whatsapp.com/send?phone=966538459110"> {!! ___('registration.WhatsAppFromHere') !!}</a></p>
    </div>
    <form id="hform" class="register-form" action="{{route('register.store')}}" method="POST" enctype="multipart/form-data">
        @csrf
        @method('POST')
        <div class="bg-exlight rounded-2xl border border-exgray flex flex-col gap-20 p-20 mb-6">
            <h2 class="input-box w-full text-primary text-[20px]">{!! ___('registration.arabicName') !!} <span
                    class="text-exred text-xs"> ({!! ___('registration.mustMatch') !!})</span></h2>
            <div class="grid gap-20 p-20 bg-white rounded-lg grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
                <div class="input-box">
                    <label class="block text-sm font-medium mb-3" for="fname_ar">{!! ___('registration.fname') !!}</label>
                    <input class="input @error('fname_ar') border-exred @enderror  w-full" type="text"
                        value="{{old('fname_ar')}}" name="fname_ar" placeholder="{{__('registration.fname')}}">
                    <div class="messages text-xs text-exred mt-2">@error('fname'){{ $message }} @enderror</div>
                </div>
                <div class="input-box">
                    <label class="block text-sm font-medium mb-3" for="sname_ar">{!! ___('registration.sname') !!}</label>
                    <input class="input w-full @error('sname_ar') border-exred @enderror" type="text" name="sname_ar"
                        value="{{old('sname_ar')}}" placeholder="{{__('registration.sname')}}">
                    <div class="messages text-xs text-exred mt-2">@error('sname_ar'){{ $message }} @enderror</div>
                </div>
                <div class="input-box">
                    <label class="block text-sm font-medium mb-3" for="tname_ar">{!! ___('registration.tname') !!}</label>
                    <input class="input w-full @error('tname_ar') border-exred @enderror" type="text" name="tname_ar"
                        value="{{old('tname_ar')}}" placeholder="{{__('registration.tname')}}">
                    <div class="messages text-xs text-exred mt-2">@error('tname_ar'){{ $message }} @enderror</div>
                </div>
                <div class="input-box">
                    <label class="block text-sm font-medium mb-3" for="lname_ar">{!! ___('registration.family') !!}</label>
                    <input class="input w-full @error('lname_ar') border-exred @enderror" type="text" name="lname_ar"
                        value="{{old('lname_ar')}}" placeholder="{{__('registration.family')}}">
                    <div class="messages text-xs text-exred mt-2">@error('lname_ar'){{ $message }} @enderror</div>
                </div>

            </div>
            <h2 class="input-box w-full text-primary text-[20px]">{!! ___('registration.englishName') !!} <span
                    class="text-exred text-xs"> ({!! ___('registration.mustMatch') !!})</span></h2>
            <div class="grid gap-20 p-20 bg-white rounded-lg grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
                <div class="input-box">
                    <label class="block text-sm font-medium mb-3" for="fname">{!! ___('registration.fname') !!}</label>
                    <input class="input @error('fname') border-exred @enderror  w-full" type="text"
                        value="{{old('fname')}}" name="fname" placeholder="{{__('registration.fname')}}">
                    <div class="messages text-xs text-exred mt-2">@error('fname'){{ $message }} @enderror</div>
                </div>
                <div class="input-box">
                    <label class="block text-sm font-medium mb-3" for="sname">{!! ___('registration.sname') !!}</label>
                    <input class="input w-full @error('sname') border-exred @enderror" type="text" name="sname"
                        value="{{old('sname')}}" placeholder="{{__('registration.sname')}}">
                    <div class="messages text-xs text-exred mt-2">@error('sname'){{ $message }} @enderror</div>
                </div>
                <div class="input-box">
                    <label class="block text-sm font-medium mb-3" for="tname">{!! ___('registration.tname') !!}</label>
                    <input class="input w-full @error('tname') border-exred @enderror" type="text" name="tname"
                        value="{{old('tname')}}" placeholder="{{__('registration.tname')}}">
                    <div class="messages text-xs text-exred mt-2">@error('tname'){{ $message }} @enderror</div>
                </div>
                <div class="input-box">
                    <label class="block text-sm font-medium mb-3" for="lname">{!! ___('registration.family') !!}</label>
                    <input class="input w-full @error('lname') border-exred @enderror" type="text" name="lname"
                        value="{{old('lname')}}" placeholder="{{__('registration.family')}}">
                    <div class="messages text-xs text-exred mt-2">@error('lname'){{ $message }} @enderror</div>
                </div>

            </div>
            <div class="grid gap-20 p-20 bg-white rounded-lg grid-cols-1 md:grid-cols-2">
                <div class="input-box">
                    <label class="block text-sm font-medium mb-3" for="name">{!! ___('registration.identification') !!}</label>
                    <input class="input w-full rtl:text-right  @error('id_number') border-exred @enderror" type="text"
                        name="id_number" value="{{old('id_number')}}" data-imask="id_number" dir="ltr"
                        placeholder="{!! ___('registration.identification') !!}">
                    <div class="messages text-xs text-exred mt-2">@error('id_number'){{ $message }} @enderror</div>
                </div>
                <div class="input-box">
                    <label class="block text-sm font-medium mb-3" for="name">{!! ___('registration.region') !!}</label>
                    <select id="region" class="input w-full @error('region') border-exred @enderror" type="text" name="region"
                        placeholder="{!! ___('registration.region') !!}">
                        <option value="">{!! ___('registration.region') !!}</option>
                    </select>
                    <div class="messages text-xs text-exred mt-2">@error('region'){{ $message }} @enderror</div>
                </div>
                <div class="input-box">
                    <label class="block text-sm font-medium mb-3" for="name">{!! ___('registration.city') !!}</label>
                    <select id="city" class="input w-full @error('city') border-exred @enderror" type="text" name="city"
                        placeholder="{!! ___('registration.city') !!}">
                        <option value="">{!! ___('registration.city') !!}</option>
                    </select>
                    <div class="messages text-xs text-exred mt-2">@error('city'){{ $message }} @enderror</div>
                </div>
                <div id="otherCity" class="input-box hidden">
                    <label class="block text-sm font-medium mb-3" for="otherCity">{!! ___('registration.otherCity') !!}</label>
                    <input class="input @error('otherCity') border-exred @enderror  w-full" type="text"
                        value="{{old('otherCity')}}" name="otherCity" placeholder="{{__('registration.otherCity')}}">
                    <div class="messages text-xs text-exred mt-2">@error('otherCity'){{ $message }} @enderror</div>
                </div>
            </div>
            <div class="grid gap-20 p-20 bg-white rounded-lg grid-cols-1 md:grid-cols-2">
                <div class="input-box">
                    <label class="block text-sm font-medium mb-3" for="name">{!! ___('registration.email') !!}</label>
                    <input class="input w-full rtl:text-right @error('email') border-exred @enderror" type="text"
                        value="{{old('email')}}" name="email" data-imask="email" dir="ltr"
                        placeholder="example@email.com">
                    <div class="messages text-xs text-exred mt-2">@error('email'){{ $message }} @enderror</div>
                </div>
                <div class="input-box">
                    <label class="block text-sm font-medium mb-3" for="name">{!! ___('registration.phone') !!}</label>
                    <input id="phone" class="input w-full rtl:text-right @error('phone') border-exred @enderror" type="text"
                        value="{{old('phone')}}" name="phone" data-imask="phone" dir="ltr" placeholder="+966">
                    <div class="messages text-xs text-exred mt-2">@error('phone'){{ $message }} @enderror</div>
                </div>
            </div>
            <div class="grid gap-20 p-20 bg-white rounded-lg grid-cols-1 md:grid-cols-2">
                <div class="input-box">
                    <label class="block text-sm font-medium mb-3" for="dob">{!! ___('registration.dateOfBirth') !!}</label>
                    <div class="relative">
                        <input class="input w-full rtl:text-right @error('dob') border-exred @enderror" type="text"
                            value="{{old('dob')}}" name="dob" data-imask="date" data-hijri="dob" dir="ltr"
                            placeholder="16/07/1426"
                            @change="document.querySelector('.hijri-date').innerText = 'hijri date'">
                        <div
                            class="hijri-date absolute top-5 text-xs text-primary pointer-events-none select-none rtl:left-4 ltr:right-4 z-2">
                        </div>
                    </div>
                    <div class="messages text-xs text-exred mt-2">@error('dob'){{ $message }} @enderror</div>
                </div>
                <div class="input-box">
                    <label class="block text-sm font-medium mb-3" for="gender">{!! ___('registration.sex') !!}</label>
                    <div class="flex gap-30 md:gap-80">
                        <label class="flex items-center gap-3">
                            <input class="input-radio peer" type="radio" value="0" {{ old('sex')=='0' ? 'checked' : ''
                                }} name="sex"><span class="text-sm font-medium peer-checked:text-primary">{!! ___('registration.male') !!}</span>
                        </label>
                        {{-- <label class="flex items-center gap-3">
                            <input class="input-radio peer" type="radio" value="1" {{ old('sex')=='1' ? 'checked' : ''
                                }} name="sex"><span class="text-sm font-medium peer-checked:text-primary">{!! ___('registration.female') !!}</span>
                        </label> --}}
                    </div>
                    <div class="messages text-xs text-exred mt-4">@error('sex'){{ $message }} @enderror</div>
                </div>
            </div>
            <div class="flex flex-col gap-30 p-20 bg-white rounded-lg" x-data="{degree: 0}">
                <div class="input-box">
                    <label class="block text-sm font-medium mb-3" for="degree">{!! ___('registration.TypeOfCertificate') !!}</label>
                    <div class="flex flex-wrap gap-30 md:gap-80">
                        <label class="flex items-center gap-3">
                            <input class="input-radio peer" type="radio" value="0" {{ old('certificate_type')=='0'
                                ? 'checked' : '' }} name="certificate_type" @change="degree = 0"><span
                                class="text-sm font-medium peer-checked:text-primary">{!! ___('registration.HighSchool') !!}</span>
                        </label>
                        <label class="flex items-center gap-3">
                            <input class="input-radio peer" type="radio" value="1" {{ old('certificate_type')=='1'
                                ? 'checked' : '' }} name="certificate_type" @change="degree = 1"><span
                                class="text-sm font-medium peer-checked:text-primary">{!! ___('registration.Diploma') !!}</span>
                        </label>
                        <label class="flex items-center gap-3">
                            <input class="input-radio peer" type="radio" value="2" {{ old('certificate_type')=='2'
                                ? 'checked' : '' }} name="certificate_type" @change="degree = 2"><span
                                class="text-sm font-medium peer-checked:text-primary">{!! ___('registration.BA') !!}</span>
                        </label>
                        <label class="flex items-center gap-3">
                            <input class="input-radio peer" type="radio" value="3" {{ old('certificate_type')=='3'
                                ? 'checked' : '' }} name="certificate_type" @change="degree = 3"><span
                                class="text-sm font-medium peer-checked:text-primary">{!! ___('registration.other') !!}</span>
                        </label>
                    </div>
                    <div class="messages text-xs text-exred mt-4">@error('certificate_type'){{ $message }} @enderror
                    </div>
                </div>
                <div x-show="degree == 0" x-data="{degreeTrack: 0}" >
                    <div class="flex flex-col gap-30 p-20 bg-white rounded-lg">
                        <div class="input-box">
                            <label class="block text-sm font-medium mb-3" for="degreeTrack">{!! ___('registration.degreeTrack') !!}</label>
                            <div class="flex flex-wrap gap-30 md:gap-80">
                                <label class="flex items-center gap-3">
                                    <input class="input-radio peer" type="radio" value="0" {{ old('degreeTrack')=='0'
                                        ? 'checked' : '' }} name="degreeTrack" @change="degreeTrack = 0"><span
                                        class="text-sm font-medium peer-checked:text-primary">{!! ___('registration.science') !!}</span>
                                </label>
                                <label class="flex items-center gap-3">
                                    <input class="input-radio peer" type="radio" value="1" {{ old('degreeTrack')=='1'
                                        ? 'checked' : '' }} name="degreeTrack" @change="degreeTrack = 1"><span
                                        class="text-sm font-medium peer-checked:text-primary">{!! ___('registration.humanities') !!}</span>
                                </label>
                                <label class="flex items-center gap-3">
                                    <input class="input-radio peer" type="radio" value="2" {{ old('degreeTrack')=='2'
                                        ? 'checked' : '' }} name="degreeTrack" @change="degreeTrack = 2"><span
                                        class="text-sm font-medium peer-checked:text-primary">{!! ___('registration.others') !!}</span>
                                </label>
                            </div>
                            <div class="messages text-xs text-exred mt-4">@error('certificate_type'){{ $message }} @enderror
                            </div>
                        </div>
                    </div>
                    <div x-show="degreeTrack == 2" class="input-box">
                        <label class="block text-sm font-medium mb-3" for="name">{!! ___('registration.otherTrack') !!}</label>
                        <input class="input w-full @error('track') border-exred @enderror" value="{{ old('track')}}"
                            type="text" name="track" placeholder="{!! ___('registration.writeOtherTrack') !!}">
                        <div class="messages text-xs text-exred mt-4">@error('track'){{ $message }} @enderror</div>
                    </div>
                </div>
                <div x-show="degree == 3">
                    <div class="input-box">
                        <label class="block text-sm font-medium mb-3" for="name">{!! ___('registration.otherCertificate') !!}</label>
                        <input class="input w-full @error('note') border-exred @enderror" value="{{ old('note')}}"
                            type="text" name="note" placeholder="{!! ___('registration.writeWhatYouWant') !!}">
                        <div class="messages text-xs text-exred mt-4">@error('note'){{ $message }} @enderror</div>
                    </div>
                </div>
                <div x-show="degree == 0 || degree == 3">
                    <div class="input-box">
                        <label class="block text-sm font-medium mb-3" for="name">{!! ___('registration.average') !!}</label>
                        <input class="input w-full rtl:text-right @error('gpa') border-exred @enderror"
                            value="{{ old('gpa')}}" name="gpa" type="text" data-imask="degree%" dir="ltr"
                            placeholder="%">
                        <div class="messages text-xs text-exred mt-4">@error('gpa'){{ $message }} @enderror</div>
                    </div>
                </div>
                <div class="grid gap-20 grid-cols-1 md:grid-cols-2" x-data="{gpaTypeSelected: 0}"
                    x-show="degree == 1 || degree == 2">
                    <div class="input-box">
                        {{--

                            $column = [
                                'id' => 5,
                                'key' => 'registration.GPA',
                                'value_ar' => 'العلامة',
                                'value_en' => 'GPA',
                            ]

                            function ___($key) {
                                if (auth()->user()) {
                                    Transaltions::find($key);
                                    return arOnly($column->value_ar).enOnly($column->value_en).'<div onClick="translationForm($column->id, $column->value_en, $column->value_ar)"></div>';
                                } else {
                                    return __($key);
                                }
                            }

                            --}}
                        <label class="block text-sm font-medium mb-3" for="gpaType">{!! ___('registration.GPA') !!}</label>
                        <select id="gpaType" class="input w-full" x-model="gpaTypeSelected" placeholder="{!! ___('registration.city') !!}"
                            x-data="{gpaType: [{val: 2, text: '{{__('registration.GPA4')}}'}, {val: 1, text: ' {{__('registration.GPA5')}}'}]}"                            @change="gpaTypeSelected = $event.target.value" name="gpaType">
                            <option value=""> {!! ___('registration.ChooseGPA') !!} </option>
                            <template x-for="(option, index) in gpaType">
                                <option :key="index" :value="option.val" x-text="option.text"></option>
                            </template>
                        </select>
                    </div>
                    <div class="input-box" x-show="gpaTypeSelected == 1">
                        <label class="block text-sm font-medium mb-3" for="name"> {!! ___('registration.GPA5') !!} </label>
                        <input class="input w-full @error('gpa5') border-exred @enderror" value="{{ old('gpa5')}}"
                            type="text" name="gpa5" data-imask="degree5" placeholder="">
                        <div class="messages text-xs text-exred mt-4">@error('gpa5'){{ $message }} @enderror</div>
                    </div>
                    <div class="input-box" x-show="gpaTypeSelected == 2">
                        <label class="block text-sm font-medium mb-3" for="name"> {!! ___('registration.GPA4') !!} </label>
                        <input class="input w-full @error('gpa4') border-exred @enderror" value="{{ old('gpa4')}}"
                            type="text" name="gpa4" data-imask="degree4" placeholder="">
                        <div class="messages text-xs text-exred mt-4">@error('gpa4'){{ $message }} @enderror</div>
                    </div>
                </div>
                <div x-data="{file: null}">
                    <div class="flex items-center justify-center w-full">
                        <label for="dropzone-file" class="flex flex-col items-center justify-center w-full h-64 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600" style="border: 2px dashed #e2e8f0; border-radius: 0.375rem;">
                            <div class="flex flex-col items-center justify-center pt-5 pb-6" style="padding-top: 1.25rem; padding-bottom: 1.5rem;">
                                <svg
                                x-show="!file"
                                aria-hidden="true" style="width: 4rem; height: 4rem; color: #a0aec0;" class="w-10 h-10 mb-3 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path></svg>
                                <svg
                                x-show="file"
                                aria-hidden="true" style="width: 4rem; height: 4rem; color: #a0aec0;" class="w-10 h-10 mb-3 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>

                                <p class="mb-2 text-sm text-gray-500 dark:text-gray-400"><span class="font-semibold">{!! __('registration.certificate') !!}</span></p>
                                <p class="text-xs text-gray-500 dark:text-gray-400">SVG, PNG, JPG or PDF</p>
                            </div>
                            <input id="dropzone-file" type="file" class="hidden" name="certificate" accept="image/*,application/pdf" x-ref="file" x-on:change="file = $refs.file.files[0].name">
                        </label>
                    </div>
                </div>
            </div>
            <div class="input-box my-40">
                <div class="flex gap-3">
                    <input class="input-checkbox peer self-start translate-y-1" type="checkbox" name="agreement" {{ @old('agreement') ? 'checked' : '' }} required>
                    <span class="text-sm font-medium">
                        {!! ___('registration.AgreeToTheTerms.0') !!}
                        {{-- download terms pdf --}}
                        <!-- <a href="{ !! ___('registration.AgreeToTheTerms.1') !! }"</a> -->
                        <a href="{{route('trainees.agreement')}}" target="_blank" class="text-primary">{{__('registration.AgreeToTheTerms.1')}}</a>                    </span>
                </div>
                <div class="messages text-xs text-exred mt-2"></div>
            </div>
            <div class="rtl:text-left ltr:text-right">
                <button type="button" id="hsubmit"
                    class="btn bg-primary inline-flex items-center justify-center h-12 text-sm text-white rounded-lg shadow shadow-primary/20 px-40 transition-all hover:scale-95 active:shadow-none"><span>{!! ___('registration.login') !!}</span></button>
            </div>
        </div>
    </form>
</div>

<script defer type="application/javascript" src="{{asset('runtime.69f987cfdc1c88e3ce19.js')}}"></script>
<script defer type="application/javascript" src="{{asset('vendors~main~.55c69586f70f04e9a5ac.js')}}"></script>
<script defer type="application/javascript" src="{{asset('main.caeceadb8388481bc9a6.js')}}"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr-hijri-calendar@1.0.0/dist/flatpickr-hijri-calendar.min.css">
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/validate.js/0.13.1/validate.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script defer src="https://cdn.jsdelivr.net/npm/flatpickr@4.6.9/dist/l10n/ar.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/luxon@2.0.2/build/global/luxon.min.js"></script>
<script defer src="/flatpicker-hijri.js"></script>
<script defer src="https://unpkg.com/imask"></script>
<script>
  window.onload = function () {
    // reset form on refresh
    if (performance.navigation.type == 1) {
      document.getElementById("hform").reset();
    }

    // old values from blade
    var oldCity = "{{ old('city') }}";
    var oldRegion = "{{ old('region') }}";

    let cityValue = oldCity;


    fetch('/regions-cities.min.json')
    .then((response) => response.json())
    .then((regions) => {
        const regionsSelect = document.querySelector('#region');
        const citiesSelect = document.querySelector('#city');
        const regionsOptions = regions.map((region) => `<option value="${region.name_en}" ${region.name_en == oldRegion ? 'selected' : ''}>${region.name_ar}</option>`);
        regionsSelect.innerHTML = `<option value="">{!! ___('registration.pickRegion') !!}</option>${regionsOptions.join('')}`;
        regionsSelect.addEventListener('change', (e) => {
            const citiesOptions = regions.find(r => r.name_en === e.target.value).cities.map((city) => `<option value="${city.name_en}" ${city.name_en == oldCity ? 'selected' : ''}>${city.name_ar}</option>`);
            citiesSelect.innerHTML = `<option value="">{{__('registration.pickCity')}}</option>${citiesOptions.join('')}<option value="other">{{__('registration.others')}}</option>`;        });
        // show other city input
        citiesSelect.addEventListener('change', (e) => {
            const otherCityInput = document.querySelector('#otherCity');
            cityValue = e.target.value;
            if (e.target.value == 'other') {
                otherCityInput.classList.remove('hidden');
            } else {
                otherCityInput.classList.add('hidden');
            }
        });
    });

    const phoneMasks = [];

    document.querySelectorAll('[data-imask="phone"]').forEach(function (input) {
      phoneMasks.push(IMask(input, {
        mask: "+{966}000000000",
      }));
    });
    document
      .querySelectorAll('[data-imask="id_number"]')
      .forEach(function (input) {
        IMask(input, {
          mask: Number,
          min:1000000000,
          max: 1999999999,
        });
      });
    document.querySelectorAll('[data-imask="email"]').forEach(function (input) {
      IMask(input, {
        mask: /^\S*@?\S*$/,
      });
    });
    // document.querySelectorAll('[data-imask="date"]').forEach(function (input) {
    //   IMask(input, {
    //     mask: Date,
    //     // min: new Date(11, 00, 1980),
    //     // max: new Date(11, 00, 2005),
    //     pattern: "Y/`m/`d",
    //     lazy: false,
    //   });
    // });
    document
      .querySelectorAll('[data-imask="degree%"]')
      .forEach(function (input) {
        IMask(input, {
          mask: "{{sessionLocale() == 'en' ? "{%}000.00" : "000,00{%}"}}",
          scale: 2,
          min: 0,
          max: 100,
        });
      });
    document
      .querySelectorAll('[data-imask="degree5"]')
      .forEach(function (input) {
        IMask(input, {
          mask: Number,
          scale: 2,
          min: 1,
          max: 5,
          overwrite: true,
        });
      });
    document
      .querySelectorAll('[data-imask="degree4"]')
      .forEach(function (input) {
        IMask(input, {
          mask: Number,
          scale: 2,
          min: 1,
          max: 4,
          overwrite: true,
        });
      });
    document
      .querySelectorAll('[data-flatpickr="dob"]')
      .forEach(function (input) {
        flatpickr(input, {
          dateFormat: "d/m/Y",
          // minDate: "22/08/1987",
          minDate: new Date().fp_incr(-12784),
          maxDate: new Date(moment().subtract(16, "years")), //"22/08/2005",
        });
      });
    document.querySelectorAll('[data-hijri="dob"]').forEach(function (input) {
      flatpickr(input, {
        locale: "{{sessionLocale()}}",
        dateFormat: "d/m/Y",
        minDate: new Date().fp_incr(-12784),
        maxDate: new Date(moment().subtract(16, "years")), //"22/08/2005",
        plugins: [
          hijriCalendarPlugin(luxon.DateTime, {
            showHijriDates: true,
            showHijriToggle: true,
          }),
        ],
      });
    });

    var radios = document.getElementsByName('certificate_type');
    for (var i = 0, length = radios.length; i < length; i++) {
           radios[i].addEventListener('change', function() {
               // reset gqa type
                document.querySelector('#gpaType').value = '';
           });
    }

    // Start Validate
    validate.extend(validate.validators.datetime, {
      // The value is guaranteed not to be null or undefined but otherwise it
      // could be anything.
      parse: function (value, options) {
        return +moment.utc(value);
      },
      // Input is a unix timestamp
      format: function (value, options) {
        var format = options.dateOnly ? "d/m/y" : "d/m/y hh:mm:ss";
        return moment.utc(value).format(format);
      },
    });
    // phone on change update mask options
    document.querySelector('#phone').addEventListener('keyup', function (e) {
        console.log(e.target.value);
      phoneMasks.forEach(function (mask) {
        mask.updateOptions({
          mask: e.target.value.startsWith('+9660') ? "+{966}0000000000" : "+{966}000000000",
        });
      });
    });
    var constraints =  () =>{
        let cityVal = document.querySelector('#city').value;
        let certificate_typeVal = null;
        let degreeTrackVal = null;
        let gpaTypeVal = document.querySelector('#gpaType').value;
        let phoneVal = document.querySelector('#phone').value;

        var radios = document.getElementsByName('certificate_type');
        var degreeTrackRadios = document.getElementsByName('degreeTrack');

        for (var i = 0, length = radios.length; i < length; i++) {
            if (radios[i].checked) {
                // do whatever you want with the checked radio
                certificate_typeVal = radios[i].value;

                // only one radio can be logically checked, don't check the rest
                break;
            }
        }

        for (var i = 0, length = degreeTrackRadios.length; i < length; i++) {
            if (degreeTrackRadios[i].checked) {
                // do whatever you want with the checked radio
                degreeTrackVal = degreeTrackRadios[i].value;

                // only one radio can be logically checked, don't check the rest
                break;
            }
        }

        return {
        fname: {
            presence: {
                message: "{!! ___('validation.required') !!}.",
            },
        },
        sname: {
            presence: {
                message: "{!! ___('validation.required') !!}.",
            },
        },
        lname: {
            presence: {
                message: "{!! ___('validation.required') !!}.",
            },
        },
        tname: {
            presence: {
                message: "{!! ___('validation.required') !!}.",
            },
        },
        fname_ar: {
            presence: {
                message: "{!! ___('validation.required') !!}.",
            },
        },
        sname_ar: {
            presence: {
                message: "{!! ___('validation.required') !!}.",
            },
        },
        lname_ar: {
            presence: {
                message: "{!! ___('validation.required') !!}.",
            },
        },
        tname_ar: {
            presence: {
                message: "{!! ___('validation.required') !!}.",
            },
        },

      email: {
        // Email is required
        presence: true,
        // and must be an email (duh)
        email: true,
        presence: {
          message: "{!! ___('validation.required') !!}.",
        },
        email: {
          message: "{!! ___('validation.email') !!}",
        },
      },
      dob: {
        // The user needs to give a dob
        presence: true,
        // and must be born at least 18 years ago
        // date: {
        //   dateOnly: true,
        //   latest: new Date(moment().subtract(16, "years")),
        //   message: "^يجب ألا يقل عمرك عن 18 عامًا لاستخدام هذه الخدمة",
        // },
        presence: {
          message: "{!! ___('validation.required') !!}.",
        },
      },
      id_number: {
        // show رقم الهوية instead of id_number
        presence: true,
        length: { is: 10 },
        presence: {
          message: "{!! ___('validation.required') !!}.",
        },
      },
      phone: {
        presence: true,
        length: { is: phoneVal.startsWith('+9660') ? 14 : 13, message: "{!! ___('validation.phone') !!}" },
        presence: {
          message: "{!! ___('validation.required') !!}.",
        },
      },
      city: {
        // You also need to input where you live
        presence: true,
        presence: {
          message: "{!! ___('validation.required') !!}.",
        },
      },
      region: {
        // You also need to input where you live
        presence: true,
        presence: {
          message: "{!! ___('validation.required') !!}.",
        },
      },
      otherCity: {
        // You also need to input where you live
        presence: cityVal == "other",
        presence: cityVal == "other" && {
          message: "{!! ___('validation.required') !!}.",
        },
      },
      agreement: {
        presence: true,
        presence: {
          message: "{!! ___('validation.required') !!}.",
        },
      },
      certificate_type: {
        presence: true,
        presence: {
          message: "{!! ___('validation.required') !!}.",
        },
      },
      gpaType: {
        presence: certificate_typeVal == 1 || certificate_typeVal == 2,
        presence: ((certificate_typeVal == 1 || certificate_typeVal == 2) && {
          message: "{!! ___('validation.required') !!}.",
        }),
      },
      gpa4: {
        presence: gpaTypeVal == 2,
        presence: (gpaTypeVal == 2 && {
          message: "{!! ___('validation.required') !!}.",
        }),
      },
      gpa5: {
        presence: gpaTypeVal == 1,
        presence: (gpaTypeVal == 1 && {
          message: "{!! ___('validation.required') !!}.",
        }),
      },
        gpa: {
            presence: certificate_typeVal == 3 || certificate_typeVal == 0,
            presence: ((certificate_typeVal == 3 || certificate_typeVal == 0) && {
            message: "{!! ___('validation.required') !!}.",
            }),
        },
        note: {
            presence: certificate_typeVal == 3,
            presence: ((certificate_typeVal == 3) && {
            message: "{!! ___('validation.required') !!}.",
            }),
        },
        degreeTrack: {
            presence: certificate_typeVal == 0,
            presence: ((certificate_typeVal == 0) && {
            message: "{!! ___('validation.required') !!}.",
            }),
        },
        track: {
            presence: degreeTrackVal == 2,
            presence: ((degreeTrackVal == 2) && {
            message: "{!! ___('validation.required') !!}.",
            }),
        },

    };
    };
    var form = document.querySelector("form.register-form");
    document.getElementById('hsubmit').addEventListener("click", function (ev) {
      return handleFormSubmit();
    });
    function handleFormSubmit() {
      // validate the form against the constraints
      var errors = validate(form, constraints());
      // then we update the form to reflect the results
      showErrors(form, errors || {});
      console.log(errors);
        if(!errors) {
            form.submit();
        }
    }
    form
      .querySelectorAll("input[name], select[name]")
      .forEach(function (input) {
        input.addEventListener("change", function (ev) {
          var errors = validate(form, constraints()) || {};
          showErrorsForInput(this, errors[this.name]);
        });
        input.addEventListener("blur", function (ev) {
          var errors = validate(form, constraints()) || {};
          showErrorsForInput(this, errors[this.name]);
        });
      });

    function showErrors(form, errors) {
      // We loop through all the inputs and show the errors for that input
      form
        .querySelectorAll("input[name], select[name]")
        .forEach(function (input) {
          showErrorsForInput(input, errors && errors[input.name]);
        });
      // _.each(
      //   form.querySelectorAll("input[name], select[name]"),
      //   function (input) {
      //     // Since the errors can be null if no errors were found we need to handle
      //     // that
      //     showErrorsForInput(input, errors && errors[input.name]);
      //   }
      // );
    }
    function showErrorsForInput(input, errors) {
      // This is the root of the input
      // ignore hidden inputs
        if (input.type == "hidden") {
            return;
        }
      var formGroup = closestParent(input.parentNode, "input-box");
      if (formGroup == null) {
        return;
      }
        // Find where the error messages will be insert into
      var messages = formGroup.querySelector(".messages");
      // First we remove any old messages and resets the classes
      resetFormGroup(formGroup);
      // If we have errors
      if (errors) {
        // we first mark the group has having errors
        formGroup.classList.add("has-error");
        // then we append all the errors
        errors.forEach(function (error) {
          addError(messages, error);
        });
      } else {
        // otherwise we simply mark it as success
        formGroup.classList.add("has-success");
      }
    }
    function closestParent(child, className) {
      if (!child || child == document) {
        return null;
      }
      if (child.classList.contains(className)) {
        return child;
      } else {
        return closestParent(child.parentNode, className);
      }
    }
    function resetFormGroup(formGroup) {
      // Remove the success and error classes
      formGroup.classList.remove("has-error");
      formGroup.classList.remove("has-success");
      // and remove any old messages
      formGroup.querySelectorAll(".help-block.error").forEach(function (el) {
        el.parentNode.removeChild(el);
      });
    }

    // Adds the specified error with the following markup
    // <p class="help-block error">[message]</p>
    function addError(messages, error) {
      var block = document.createElement("p");
      block.classList.add("help-block");
      block.classList.add("error");
      // remove first word from error message
      var error_message = error.split(" ");
        error_message.shift();
        error_message = error_message.join(" ");
        block.innerText = error_message;
        // if error starts with 'ar' remove it
        if (error_message.startsWith('ar ')) {
            error_message = error_message.replace('ar ', '');
            block.innerText = error_message;
        }
        if (error_message.startsWith('city ')) {
            error_message = error_message.replace('city ', '');
            block.innerText = error_message;
        }
        if (error_message.startsWith('type ')) {
            error_message = error_message.replace('city ', '');
            block.innerText = error_message;
        }

    //   block.innerText = error;
      messages?.appendChild(block);
    }

    function showSuccess() {
      // We made it \:D/
      alert("Success!");
    }
  };
</script>
</div>


@if (Session::has('success'))
<div id="success-modal" class="w-full h-full fixed inset-0 z-50 flex flex-col justify-center transition-all bg-[#eee] bg-opacity-70 visible opacity-100" x-transition>
    <div class="sm:container">
        <div
        class="bg-white border shadow-lg rounded-2xl flex flex-col items-center justify-center text-center gap-5 px-4 py-30 xs:p-40 lg:p-100 max-w-[90%] lg:w-2/3 mx-auto">
        <h2 class="text-2xl md:text-3xl font-bold text-primary">{!! ___('index.ModalTitle') !!}</h2>
        <p>{!! ___('index.ModalBody') !!}</p>
        <a
        id="success-close-modal"
        class="btn group bg-primary font-bold text-white rounded shadow flex items-center justify-center px-5 py-3 hover:bg-primary/80 active:shadow-none"
                href="https://hipf.edu.sa"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"
                class="fill-current transition-all invisible w-0 opacity-0 ltr:-scale-x-100 rtl:translate-x-9 ltr:-translate-x-9 group-hover:w-6 group-hover:visible group-hover:opacity-100 group-hover:translate-x-0 rtl:group-hover:ml-2 ltr:group-hover:mr-2">
                <path fill="none" d="M0 0h24v24H0z" />
                <path d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z" />
                </svg><span>{!! ___('index.ModalAction') !!}</span></a>
        </div>
    </div>
</div>

<script>
    // document.getElementById('success-close-modal').addEventListener('click', function () {
    //     document.getElementById('success-modal').classList.remove('visible');
    //     document.getElementById('success-modal').classList.remove('opacity-100');
    //     document.getElementById('success-modal').classList.add('invisible');
    //     document.getElementById('success-modal').classList.add('opacity-0');
    // });
</script>
@endif
@endsection