@extends('front.layouts.master')
@section('title', isset($title) ? $title : 'Home')
@section('description', isset($description) ? $description : '')
@section('keywords', isset($keywords) ? $keywords : '')
@section('content')

    <!-- Breadcrumb Area -->
    <div class="breadcrumb-area">
        <div class="container">
            <div class="breadcrumb-wrap text-center">
                <h2 class="page-title">{{ __('Become a Friend') }}</h2>
                <ul class="breadcrumb-pages">
                    <li class="page-item"><a class="page-item-link" href="{{ route('front') }}">{{ __('Home') }}</a></li>
                    <li class="page-item">{{ __('Become a Friend') }}</li>
                </ul>
            </div>
        </div>
    </div>

    <!-- Work Area -->
    <div class="section">
        <div class="container">
            <div class="emzHistoryBox">
                <div class="rscnSettingBox">
                    <img src="{{ asset(isset(informativedata()['friendMembershipPageInfo_img_sec1']) ? IMG_friendMembershipPageSec1 . informativedata()['friendMembershipPageInfo_img_sec1'] : '') }}"
                        class="emzHisImg">
                    <div class="emzHisDescription">
                        {!! langConverter(
                            isset($informativedata['friendMembershipPageInfo_sec1_descriptionEn'])
                                ? $informativedata['friendMembershipPageInfo_sec1_descriptionEn']
                                : '',
                            isset($informativedata['friendMembershipPageInfo_sec1_descriptionAr'])
                                ? $informativedata['friendMembershipPageInfo_sec1_descriptionAr']
                                : '',
                        ) !!}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="rscnFriendBox text-center">
        <div class="container">
            <div class="rscnFriendTxt">
                {!! langConverter(
                    isset($informativedata['friendMembershipPageInfo_sec2_descriptionEn'])
                        ? $informativedata['friendMembershipPageInfo_sec2_descriptionEn']
                        : '',
                    isset($informativedata['friendMembershipPageInfo_sec2_descriptionAr'])
                        ? $informativedata['friendMembershipPageInfo_sec2_descriptionAr']
                        : '',
                ) !!}
            </div>
        </div>
    </div>
    <div class="rscnFriendSection">
      <div class="container">
        <div class="rscnFriendForm">
          <div class="rscnFriendFormTit">{{ __('Become a friend') }}</div>
          <hr class="rscnFormDividor marY">
          <form action="{{ route('storeFriendMember') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="row mt-30">
              <div class="col-md-6 mb-20">
                <select class="form-select rscnMemberLabel" name="nationality">
                  <option value="" selected disabled>{{ __('Nationality') }}</option>
                  @foreach ($nationalities as $nationality)
                    @if( old('nationality') ? old('nationality')== $nationality->id  : (auth()->user() && !auth()->user()->is_admin ? auth()->user()->nationality == $nationality->id : false ))
                      <option value="{{ $nationality->id }}" selected>{{ langConverter($nationality->nationality, $nationality->name_ar) }}</option>
                    @else
                      <option value="{{ $nationality->id }}">{{ langConverter($nationality->nationality, $nationality->name_ar) }}</option>
                    @endif
                  @endforeach
                </select>
                @error('nationality')
                  <span class="text-danger">{{ $message }}</span>
                  @else
                  <small class="text-danger required-txt">* {{ __('Required Field') }}</small>
                @enderror
              </div>
              <div class="col-md-6 mb-20">
                <select class="form-select rscnMemberLabel" name="residence">
                  <option value="" selected disabled>{{ __('Country of residence') }}</option>
                  @foreach ($countries as $country)
                    @if( old('residence') ? old('residence')== $country->id  : (auth()->user() && !auth()->user()->is_admin ? auth()->user()->residence == $country->id : false ))
                      <option value="{{ $country->id }}" selected>{{ langConverter($country->name_en, $country->name_ar) }}</option>
                    @else
                      <option value="{{ $country->id }}">{{ langConverter($country->name_en, $country->name_ar) }}</option>
                    @endif
                  @endforeach
                </select>
                @error('residence')
                  <span class="text-danger">{{ $message }}</span>
                  @else
                  <small class="text-danger required-txt">* {{ __('Required Field') }}</small>
                @enderror
              </div>
              <div class="col-md-6 mb-20">
                <input type="text" name="name" value="{{ old('name') ? old('name') : ( auth()->user() && !auth()->user()->is_admin ? auth()->user()->name : "") }}"
                placeholder="{{ __('Name (In English)') }}" class="form-control rscnMemberLabel">
                @error('name')
                  <span class="text-danger">{{ $message }}</span>
                  @else
                  <small class="text-danger required-txt">* {{ __('Required Field') }}</small>
                @enderror
              </div>
              <div class="col-md-6 mb-20">
                <input type="date" name="DOB" value="{{ old('DOB') ? old('DOB') : ( auth()->user() && !auth()->user()->is_admin ? auth()->user()->DOB : "")}}"
                  placeholder="{{ __('DOB') }}" class="form-control rscnMemberLabel emzDateInputField">
                <div class="rscnHint">{{ __('Date of Birth') }}</div>
                @error('DOB')
                  <span class="text-danger">{{ $message }}</span>
                  @else
                  <small class="text-danger required-txt">* {{ __('Required Field') }}</small>
                @enderror
              </div>
              <div class="col-md-6 mb-20">
                <select class="form-select rscnMemberLabel" name="Gender">
                  <option value="" selected disabled>{{ __('Gender') }}</option>
                  @foreach (config('app.gender') as $key => $gender)
                    @if( old('Gender') != null ? old('Gender')== $key : (auth()->user() && !auth()->user()->is_admin ? auth()->user()->Gender == $key : false ))
                      <option value="{{ $key }}" selected>{{ __($gender) }}</option>
                    @else
                      <option value="{{ $key }}">{{ __($gender) }}</option>
                    @endif
                  @endforeach
                </select>
                @error('Gender')
                  <span class="text-danger">{{ $message }}</span>
                  @else
                  <small class="text-danger required-txt">* {{ __('Required Field') }}</small>
                @enderror
              </div>
              <div class="col-md-6 mb-20">
                <div class="row">
                  <div class="col-5">
                    <select id="country" name="PhoneNumber_country" class="form-control">
                      <option value="" selected disabled>{{ __('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-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="{{ old('PhoneNumber') ? old('PhoneNumber') : ( auth()->user() && !auth()->user()->is_admin ? auth()->user()->PhoneNumber : "") }}"
                              class="form-control" id="contact_number" name="PhoneNumber" placeholder="{{ __('Mobile Number') }}"/>
                          </div>
                        </div>
                      </div>
                    </div>
                    @error('PhoneNumber')
                      <span class="text-danger">{{ $message }}</span>
                      @else
                      <small class="text-danger required-txt">* {{ __('Required Field') }}</small>
                    @enderror
                  </div>
                </div>
              </div>
              <div class="col-md-6 mb-20">
                <select class="form-select rscnMemberLabel" name="preferred_language">
                  <option value="" selected disabled>{{ __('Preferred language') }}</option>
                  @foreach (config('app.preferred_language') as $key => $language)
                    @if( old('preferred_language') ? old('preferred_language')== $key : (auth()->user() && !auth()->user()->is_admin ? auth()->user()->preferred_language == $key : false ))
                      <option value="{{ $key }}" selected>{{ __($language) }}</option>
                    @else
                      <option value="{{ $key }}">{{ __($language) }}</option>
                    @endif
                  @endforeach
                </select>
                @error('preferred_language')
                  <span class="text-danger">{{ $message }}</span>
                  @else
                  <small class="text-danger required-txt">* {{ __('Required Field') }}</small>
                @enderror
              </div>
            </div>
            <hr class="mt-3 mb-5">
            @if (!auth()->user() || auth()->user()->is_admin )
              <div class="row">
                <div class="col-md-12 mb-20">
                  <input type="email" name="email" value="{{ old('email') }}"
                    placeholder="{{ __('Email Address') }}" class="form-control rscnMemberLabel">
                  @error('email')
                    <span class="text-danger">{{ $message }}</span>
                    @else
                    <small class="text-danger required-txt">* {{ __('Required Field') }}</small>
                  @enderror
                </div>
                <div class="col-md-6 mb-20">
                  <input type="password" name="password"
                    placeholder="{{ __('Password') }}" class="form-control rscnMemberLabel">
                  <span>{{ __('Password Length Should be 5-12') }}</span>
                  @error('password')
                    <span class="text-danger">{{ $message }}</span>
                    @else
                    <small class="text-danger required-txt">* {{ __('Required Field') }}</small>
                  @enderror
                </div>
                <div class="col-md-6 mb-20">
                  <input type="password" name="confirm_password"
                    placeholder="{{ __('Confirm Password') }}" class="form-control rscnMemberLabel">
                  @error('confirm_password')
                    <span class="text-danger">{{ $message }}</span>
                  @enderror
                </div>
              </div>
              @else
              <div>Email : {{ auth()->user()->email }}</div>
            @endif
            <hr class="mt-3 mb-5">
            <button type="submit" class="btn rscnSubmitForm">{{ __('Submit') }}</button>
          </form>
        </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);
      });
    });
  </script>
@endpush