@extends('Client.layouts.layout')

@section('content')
    <style>
        .iti {
            width: 100%;
        }
    </style>

    <section class="py-5">
    	<div class="container">
    		<div class="row justify-content-center">
    			<div class="col-lg-12 col-sm-12 col-xl-8 col-md-12 col-12">
    				<div class="card text-center p-4">
    					<form action="{{ route('client.register-select-otp') }}" class="card-body" method="POST">
    					    @csrf
    						<h5 class="card-title h1 fw-semibold text-dark">@lang('trans.register')</h5>
    						<p class="card-text text-dark text-normal mb-4">
    						    @lang('trans.register_text')
    						</p>
    						<!-- End checkbox -->
    						<div class="row mb-4 placeholder-color">
    							<label for="" class="text-dark d-flex justify-content-start mb-2 mt-3  fw-semibold">@lang('trans.name')</label>
    							<div class="col-sm-12">
    								<input type="text" class="form-control" name="name" placeholder="@lang('trans.name')" required id="name" value="{{ old('name') }}">
    							</div>
    							<label for="" class="text-dark d-flex justify-content-start mb-2 mt-3  fw-semibold">@lang('trans.email')</label>
    							<div class="col-sm-12">
    								<input type="text" class="form-control" name="email" placeholder="@lang('trans.email')" required id="email" value="{{ old('email') }}">
    							</div>
    							<label for="" class="text-dark d-flex justify-content-start mb-2 mt-3  fw-semibold">@lang('trans.phone')</label>
    							<div class="col-sm-12">
    								<input type="tel" name="phone" id="phone" required class="form-control" value="{{ old('phone') }}" type="tel" minlength="{{ Country()->length }}" maxlength="{{ Country()->length }}" size="{{ Country()->length }}" />
                					<input type="hidden" name="country_code" id="country_code" value="{{ old('country_code', country_code()) }}">
                					<input required type="hidden" name="phone_code" id="phone_code" value="{{ old('phone_code', phone_code()) }}">
    							</div>
    							<label for="" class="text-dark d-flex justify-content-start mb-2 mt-3  fw-semibold">@lang('trans.password')</label>
    							<div class="col-sm-12">
    								<input type="text" class="form-control" name="password" required placeholder="******" id="password">
    							</div>
    							<label for="" class="text-dark d-flex justify-content-start mb-2 mt-3 fw-semibold">@lang('trans.confirmPassword')</label>
    							<div class="col-sm-12">
    								<input type="text" class="form-control" name="password_confirmation" required placeholder="******" id="password_confirmation">
    							</div>
    						</div>
    						<div class="form-check col-sm-12 mb-4 d-flex">
    							<input class="form-check-input mx-2" type="checkbox" required id="terms">
    							<label class="form-check-label text-dark" for="terms">
    							 @lang('trans.By_registering__I_agree_to') <a href="{{ route('client.privacy') }}" class="text-decoration-none fw-semibold">@lang('trans.privacy')</a> @lang('trans.and') <a href="{{ route('client.terms') }}" class="text-decoration-none fw-semibold">@lang('trans.terms')</a>
    							</label>
    						</div>
    						<div class="mb-3">
    							<button type="submit" class="btn main_bt rounded-2 col-sm-12 fw-semibold"> @lang('trans.register') </button>
    						</div>
    						<span class="text-dark">@lang('trans.haveAccount') <a href="{{ route('client.login') }}" class="text-decoration-none fw-semibold">  @lang('trans.login') </a></span>
    					</form>
    				</div>
    			</div>
    		</div>
    	</div>
    </section>


	@include('intlTelInput')
	
@endsection