@extends('auth.auth_template')
@section('content')
<!-- Sign In Start -->
<div class="row d-flex justify-content-center align-items-center h-100 pageregister">
	<div class="col-11 col-sm-9 col-md-7 col-lg-6 col-xl-6">
		@if(session()->has('error'))
		<div class="alert alert-danger">
			{{ session()->get('error') }}
		</div>
		@endif
		@if(session('status'))
		<div class="alert alert-success">
			{{ session('status') }}
		</div>
		@endif
        <div class="inverted-box">
			<div class="ArrowButton">
				<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
					<path
					d="M3.8958 0.459224C4.03015 0.324874 4.21399 0.240021 4.42613 0.240021L13.0104 0.240021C13.4205 0.240021 13.7599 0.579432 13.7599 0.989554L13.7599 9.57383C13.7599 9.98395 13.4205 10.3234 13.0104 10.3234C12.6003 10.3234 12.2609 9.98395 12.2609 9.57383L12.2609 1.73909L4.42612 1.73909C4.016 1.73909 3.67659 1.39968 3.67659 0.989554C3.66952 0.784493 3.76145 0.593574 3.8958 0.459224Z" />
					<path
					d="M0.459257 12.48L12.3599 0.579432C12.6498 0.289519 13.1306 0.289519 13.4205 0.579432C13.7104 0.869346 13.7104 1.35018 13.4205 1.64009L1.51992 13.5407C1.23 13.8306 0.74917 13.8306 0.459257 13.5407C0.169343 13.2508 0.169343 12.77 0.459257 12.48Z" />
				</svg>
			</div>
			<div class="inverted-radius">
				<div class="logo"> <a href="{{ url('/') }}"><img src="{{ asset('/img/logo-email.png') }}" alt="logo"></a> </div>
				<h3 class="text-center pb-3">@lang('translate.sign_up')</h3>
				<form action="{{url('register')}}" method="post">
					@csrf
					<div class="row">
						<div class="col-md-6 col-lg-6">
							<div class="form_group form_group-sm">
								<label for="email" class="form-label">@lang('translate.enter_your_email_address') <sup>*</sup></label>
								<input type="email" name="email" class="form-control @error('email') is-invalid @enderror" id="email" placeholder="abc@mail.com" value="{{ old('email') }}">
								@error('email')
								<div class="invalid-feedback">
									<small>{{ $message }}</small>
								</div>
								@enderror
							</div>
						</div>
						<div class="col-md-6 col-lg-6">
							<div class="form_group form_group-sm">
								<label for="name" class="form-label">@lang('translate.enter_your_name') <sup>*</sup></label>
								<input type="text" name="name" class="form-control @error('name') is-invalid @enderror" id="name" placeholder="@lang('translate.name')" value="{{ old('name') }}">
								@error('name')
								<div class="invalid-feedback">
									<small>{{ $message }}</small>
								</div>
								@enderror
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-md-6 col-lg-6">
							<div class="form_group form_group-sm">
								<label for="password-field" class="form-label">@lang('translate.enter_your_password') <sup>*</sup></label>
								<input type="password" name="password" class="form-control @error('password') is-invalid @enderror" id="password-field" placeholder="@lang('translate.enter_your_password')">
								<span toggle="#password-field" class="eye-icon toggle-password"><i class="fa fa-eye"></i></span>
								@error('password')
								<div class="invalid-feedback">
									<small>{{ $message }}</small>
								</div>
								@enderror
							</div>
						</div>
						<div class="col-md-6 col-lg-6">
							<div class="form_group form_group-sm">
								<label for="password-confirm" class="form-label">@lang('translate.confirm_your_password') <sup>*</sup></label>
								<input type="password" name="password_confirmation" class="form-control @error('password_confirmation') is-invalid @enderror" id="password-confirm" placeholder="@lang('translate.re_enter_password')">
								@error('password_confirmation')
								<div class="invalid-feedback">
									<small>{{ $message }}</small>
								</div>
								@enderror
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-md-6 col-lg-6">
							<div class="form_group form_group-sm">
								<label for="countryname" class="form-label">@lang('translate.country') <sup>*</sup></label>
								<select name="country" class="form-control @error('country') is-invalid @enderror" id="countryname" >
									<option value="" data-phone="0">Select country</option>
									@foreach($countrylist as $country)
									<option value='{{ $country->name }}' data-phone="{{ $country->phonecode }}">{{ $country->name }}</option>
									@endforeach
								</select>
								@error('country')
								<div class="invalid-feedback">
									<small>{{ $message }}</small>
								</div>
								@enderror
							</div>
						</div>
						<div class="col-md-6 col-lg-6">
							<div class="form_group form_group-sm">
								<label for="phone" class="form-label">@lang('translate.phone') <sup>*</sup></label>
								<div class="phoneinline @error('phone') is-invalid @enderror">
									<input type="text" name="phonecode" id="phonecode" class="form-control" readonly>
									<input type="number" name="phone" id="phone" class="form-control @error('phone') is-invalid @enderror" placeholder="@lang('translate.phone')" >
								</div>
								@error('phone')
								<div class="invalid-feedback">
									<small>{{ $message }}</small>
								</div>
								@enderror
							</div>
						</div>
					</div>
					<input type="text" name="honeypot" style="display:none">
					<div class="position-relative text-center mt-4">
						<button type="submit" class="btn_secondary" id="submitFormButton">@lang('translate.sign_up') <img src="{{ asset('/newdesign/images/right.svg') }}" class="ml10 mr0" alt=""></button>
					</div>
				</form>
				<div class="registration_acct">
					<p class="text-center text_14 text_dark fw_500">Already have an Account? <a href="{{ url('/login') }}" class="logregibtn">@lang('translate.sign_in') <img src="{{ asset('/newdesign/images/right-black-icon.svg') }}" class="ml10 mr0" alt=""></a></p>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- Sign In End -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
	$(function() {
		var phonecode1 = $('#countryname').find(':selected').data('phone');
		$('#phonecode').val('+' + phonecode1);
		$("#countryname").change(function() {
			var phonecode = $(this).find(':selected').data('phone');
			$('#phonecode').val('+' + phonecode);
		});
	});
</script>
@endsection