@extends('front.layouts.auth_master')
@section('title', isset($title) ? $title : 'Home')
@section('description', isset($description) ? $description : '')
@section('keywords', isset($keywords) ? $keywords : '')
@section('content')
    <div class="rscnLoginPage">
        <div class="rscnLoginImgBox">
            <img src="{{ asset('frontend/assets/images/loginPageBg.png') }}" class="rscnLoginImg">
        </div>
        <div class="rscnLoginFormBox d-flex align-items-center rscnRegisterFormBox">
            <div class="w-100">
                <img src="{{ asset('frontend/assets/images/rscnLogo1.svg') }}" class="rscnLoginLogo">
                <div class="rscnLoginFormTit">{{ __('Register Account') }}</div>
                <form action="{{ route('user.sign.up.post') }}" method="post">
                    @csrf
                    <div class="row">

                        <div class="col-md-6">
                            <div class="mb-20">
                                <select class="form-select" name="identity">
                                    <option value="" selected>{{ __('Suits you') }}</option>
                                    @foreach (Config::get('app.identity') as $key => $id)
                                        <option value="{{ $key }}"
                                            {{ old('identity') != null && old('identity') == $key ? 'selected' : '' }}>
                                            {{ __($id) }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="mb-20">
                                <input type="text" class="form-control" placeholder="{{ __('Name') }}" name="name"
                                    required="" value="{{ old('name') }}">
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-20">
                                <input type="date" class="form-control" placeholder="{{ __('Date of birth') }}"
                                    name="birthdate" required="" value="{{ old('birthdate') }}">
                                @error('birthdate')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-20">
                                <select class="form-select" name="Gender">
                                    <option value="" selected>{{ __('Gender') }}</option>
                                    <option value="0"
                                        {{ old('Gender') != null && old('Gender') == 0 ? 'selected' : '' }}>
                                        {{ __('Male') }}</option>
                                    <option value="1" {{ old('Gender') == 1 ? 'selected' : '' }}>{{ __('Female') }}
                                    </option>
                                </select>
                                @error('Gender')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-20">
                                <select class="form-select" id="nationality" name="nationality">
                                    <option value="" selected>{{ __('Nationality') }}</option>
                                    @foreach (nationalities() as $nationality)
                                        <option value="{{ $nationality->id }}"
                                            {{ old('nationality') == $nationality->id ? 'selected' : '' }}>
                                            {{ langConverter($nationality->nationality, $nationality->name_ar) }}</option>
                                    @endforeach
                                </select>
                                @error('nationality')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-20">
                                <select class="form-select" name="residence" id="residence">
                                    <option value="" selected>{{ __('Residence') }}</option>
                                    <option value="1">{{ __('Have a residency permit') }}</option>
                                    <option value="2">{{ __('Visitor') }}</option>
                                </select>
                                @error('residence')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-xl-6">
                            <div class="mb-20">
                                <input type="text" class="form-control" placeholder="{{ __('Email') }}" name="email"
                                    required="">
                                @error('email')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

                        <div class="col-xl-6 mb-20">
                                            <div class="row">
                                                <div class="col-sm-5">
                                                    <select id="country" name="PhoneNumber_country"
                                                        class="form-control mb-2">
                                                        <option value="0">{{ __('Select') }}</option>
                                                        @foreach (countries() as $country)
                                                            <option @if ($country->name_en == 'Jordan') selected @endif
                                                                data-country-code="{{ $country->country_code }}"
                                                                value="{{ $country->iso_code }}">
                                                                {{ langConverter($country->name_en, $country->name_ar) }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                    @error('PhoneNumber_country')
                                                        <span class="text-danger">{{ $message }}</span>
                                                    @enderror
                                                </div>
                                                <div class="col-sm-7">
                                                      <div class="input-group-prepend phone-number-box">
                                                          <div class="row">
                                                              <div class="col-3 {{ app()->getLocale() == 'en' ? 'pe-0' : 'ps-0' }}">
                                                                  <span id="txtPhone"
                                                                      class="w-100 h-100 d-flex align-items-center justify-content-center form-control {{ app()->getLocale() == 'en' ? 'border-end-0' : 'border-start-0' }}">
                                                                  </span>
                                                              </div>
                                                              <div class="col-9 {{ app()->getLocale() == 'en' ? 'ps-0' : 'pe-0' }}">
                                                                  <input type="tel"
                                                                      value="{{ auth()->user() ? auth()->user()->PhoneNumber : old('PhoneNumber') }}"
                                                                      class="form-control" id="contact_number"
                                                                      name="PhoneNumber" placeholder="{{ __('Mobile Number') }}"/>
                                                              </div>
                                                          </div>
                                                      </div>
                                                    @error('PhoneNumber')
                                                        <span class="text-danger">{{ $message }}</span>
                                                    @enderror
                                                </div>
                                            </div>
                                        </div>


                        {{-- <div class="col-md-6">
                            <div class="row">
                                <div class="d-flex align-items-center">
                                    <div class="col-5">
                                        <select id="country" class="form-select rscnMemberLabel" name="PhoneNumber_country">
                                            <option value="0" selected>{{ __('Select') }}</option>
                                            @foreach (countries() as $country)
                                                <option value="{{ $country->iso_code }}" data-country-code="{{ $country->country_code }}">
                                                    {{ langConverter($country->name_en, $country->name_ar) }}</option>
                                            @endforeach
                                        </select>
                                        @error('PhoneNumber_country')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                    <div class="col-7">
                                        <div class="form-group">
                                            <div class="input-group-prepend phone-number-box">
                                                <div class="row">
                                                    <div class="col-3 pe-0">
                                                        <span id="txtPhone"
                                                            class="border w-100 h-100 d-flex align-items-center justify-content-center country-code {{ app()->getLocale() == 'en' ? 'border-right-0' : 'border-left-0 inputFieldA' }}">
                                                        </span>
                                                    </div>
                                                    <div class="col-9 ps-0">
                                                        <input type="tel"
                                                            value="{{ auth()->user() ? auth()->user()->PhoneNumber : old('PhoneNumber') }}"
                                                            class="form-control" id="contact_number"
                                                            name="PhoneNumber" />
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12">
                                    @error('PhoneNumber')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                        </div> --}}
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-20">
                                <input type="password" name="password" placeholder="{{ __('Password') }}"
                                    class="form-control">
                                @error('password')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-20">
                                <input type="password" name="confirm_password" placeholder="{{ __('Confirm Password') }}"
                                    class="form-control">
                                @error('confirm_password')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-20">
                                <input type="text" class="form-control" placeholder="{{ __('Address 1') }}"
                                    name="first_address" required="">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-20">
                                <input type="text" class="form-control" placeholder="{{ __('Address 2') }}"
                                    name="second_address" required="">
                            </div>
                        </div>
                    </div>

                    <textarea class="form-control" name="profession" placeholder="{{ __('Profession') }}"></textarea>
                    <button type="submit"
                        class="form-control btn rscnLoginBtnForm rscnRegisterBtnForm">{{ __('SIGN UP') }}</button>
                </form>
            </div>
        </div>
    </div>


    <!-- <div class="sign-in-page sign-up-page section">
                        <div class="container">
                            <div class="row align-items-center justify-content-center">
                                <div class="col-12 col-lg-5">
                                    <div class="login-wrap">
                                        <div class="icon d-flex align-items-center justify-content-center image-user">
                                            <span class="far fa-user"></span>
                                        </div>
                                        <h1 class="text-center mb-4">{{ __('Sign Up') }}</h1>
                                        <form class="login-form" action="{{ route('user.sign.up.post') }}" method="post">
                                            @csrf
                                            <div class="form-group">
                                                <input type="text" class="form-control rounded-left" placeholder="{{ __('Name') }}" name="name" required="">
                                            </div>
                                            <div class="form-group">
                                                <input type="email" class="form-control rounded-left" placeholder="{{ __('Email') }}" name="email" required="">
                                            </div>
                                            <div class="form-group d-flex">
                                                <input type="password" class="form-control rounded-left" placeholder="{{ __('Password') }}" name="password" required="">
                                            </div>
                                            <div class="form-group d-flex">
                                                <input type="password" class="form-control rounded-left" placeholder="{{ __('Confirm Password') }}" name="confirm_password" required="">
                                            </div>
                                            <div class="form-group">
                                                <button type="submit" class="form-control btn btn-primary rounded submit px-3 primary-btn auth-btn">{{ __('Sign Up') }}</button>
                                            </div>
                                            <hr>
                                            <div class="form-group">
                                                <a href="{{ route('user.redirect_google') }}" class="form-control btn btn-primary rounded submit px-3 google-btn"><i class="fab fa-google"></i> {{ __('Login With Google') }}</a>
                                            </div>
                                            <div class="form-group">
                                                <a href="{{ route('user.redirect_facebook') }}" class="form-control btn btn-primary rounded submit px-3 facebook-btn"><i class="fab fa-facebook-f fa-fw"></i> {{ __('Login With Facebook') }}</a>
                                            </div>
                                            <hr>

                                            <div class="already-have-account">
                                               {{ __('Already have an account?') }}<a href="{{ route('login') }}" class="forget-password-link">{{ __('Sign In') }}</a>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>  -->

@endsection
@push('post_script')
    <script type="text/javascript">
        $(function() {
            let value = "962";
            $("#txtPhone").text(value);
            $("#country").change(function() {
                let countryCode = $(this).find('option:selected').data('country-code');
                $("#txtPhone").text(countryCode);
                console.log(value);
            });
        });
    </script>
    <script type="text/javascript">
        $(document).on('change', '#nationality', function() {

            var stateID = $(this).val();
            console.log(stateID);
            if (stateID == '114') {
                $("#residence").prop("disabled", true);
                $("#residence").prop("disabled", true);
            } else {
                $("#residence").prop("disabled", false);
                $("#residence").prop("disabled", false);
            }
        });
    </script>
@endpush