@extends('public.main')

@section('head-script')
    <script src="{{asset('js/jquery.validationEngine-en.js')}}" type="text/javascript" charset="utf-8"></script>
    <script src="{{asset('js/jquery.validationEngine.min.js')}}" type="text/javascript" charset="utf-8"></script>
@endsection

@section('head-styles')
    <link rel="stylesheet" href="{{asset('css/validationEngine.jquery.css')}}" type="text/css"/>

    <style>
        .select2-wrapper {
            display: inline-block;
            position: relative;
        }
        .form-control{
            min-height: 50px;
            border-radius: 5px;
        }
    </style>
@endsection

@section('content')
    <div class="container-fluid bg_log "
         style="background-image: url({{asset('images/log_bg.png')}}); ">
        <div class="container">

        </div>
    </div>
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-10 mb-3 mt-4 form_bg" style="background-position: top 20px center;" >
            <h3 class="text-center blue_text mt-4">{{ __('Register') }}</h3>

                <div class="card-body">
                    <form id="registration_form" method="POST" action="{{ route('register') }}">
                        @csrf

                        <div class="form-group row mt-4">

                            <div class="col-md-4  offset-md-2">
                                <input id="first_name" type="text" placeholder="First Name" name="first_name" value="{{ old('first_name') }}"
                                       class="validate[required] pl-2 form-control{{ $errors->has('first_name') ? ' is-invalid' : '' }}" >

                                @if ($errors->has('first_name'))
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $errors->first('first_name') }}</strong>
                                    </span>
                                @endif
                            </div>
                            <div class="col-md-4">
                                <input id="last_name" type="text" placeholder="Last Name" name="last_name" value="{{ old('last_name') }}"
                                       class="validate[required] pl-2 form-control{{ $errors->has('last_name') ? ' is-invalid' : '' }}" >

                                @if ($errors->has('last_name'))
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $errors->first('last_name') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>

                        <div class="form-group row">

                            <div class="col-md-4 offset-md-2 select2-wrapper">
                                <select id="nationality" title="" name="nationality"
                                        class="validate[required] form-control{{ $errors->has('nationality') ? ' is-invalid' : '' }}">
                                    <option value="" data-iso2="">Nationality</option>
                                    @foreach($sysCountries as $sysCountry)
                                        <option value="{{$sysCountry->id}}" data-iso2="{{$sysCountry->iso_3166_2}}">{{$sysCountry->citizenship}}</option>
                                    @endforeach
                                </select>
                                @if ($errors->has('nationality'))
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $errors->first('nationality') }}</strong>
                                    </span>
                                @endif
                            </div>


                            <div class="col-md-4">
                                <input id="address" type="text" placeholder="Address" class="pl-2 form-control" name="address" value="{{ old('address') }}">
                            </div>

                            </div>


                        <div class="form-group row">
                            <div class="col-md-4  offset-md-2">
                                <input id="phone" type="tel" class="validate[required]]  form-control{{ $errors->has('phone') ? ' is-invalid' : '' }}" value="{{ old('phone') }}">

                                @if ($errors->has('phone'))
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $errors->first('phone') }}</strong>
                                    </span>
                                @endif
                            </div>


                            <div class="col-md-4">
                                <input id="email" type="text" placeholder="{{ __('E-Mail Address') }}"
                                       class="validate[required,custom[email]] pl-2 form-control{{ $errors->has('email') ? ' is-invalid' : '' }}" name="email" value="{{ old('email') }}">

                                @if ($errors->has('email'))
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $errors->first('email') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>



                        <div class="form-group row">
                            <div class="col-md-4 offset-md-2">
                                <input id="password" type="password" placeholder="{{ __('Password') }}"
                                       class="validate[required] pl-2  form-control{{ $errors->has('password') ? ' is-invalid' : '' }}" name="password">

                                @if ($errors->has('password'))
                                    <span class="invalid-feedback">
                                        <strong>{{ $errors->first('password') }}</strong>
                                    </span>
                                @endif
                            </div>
                            <div class="col-md-4">
                                <input id="password-confirm" type="password" placeholder="{{ __('Confirm Password') }}"
                                       class="validate[required,equals[password]] pl-2  form-control" name="password_confirmation">
                            </div>
                        </div>

                        <div class="form-group row">

                        </div>

                        <div class="form-group row mb-0">
                            <div class="col-md-8 offset-md-2">
                                <input type="hidden" name="back" value="{{request()->get('back',\Illuminate\Support\Facades\URL::previous())}}">
                                <button type="submit" class="btn btn-primary" style="width: 100%;">
                                    {{ __('Register User') }}
                                </button>
                            </div>
                        </div>
                    </form>
                </div>

        </div>
    </div>
</div>
@endsection

@section('custom-footer-script')
<script>
    let iti = intlTelInput(document.querySelector("#phone"), {
        hiddenInput: "phone",
    });

    $('#nationality').change(function(){
        iti.setCountry($(this).children('option:selected').data('iso2'));
    });


    $(document).ready(()=>{
        $("#registration_form").validationEngine('attach');
    });

</script>
@endsection