@extends('web.layouts.main')

@section('content')

@include('web.components.page-header', ['heading' => $section->title])

<div class="container pb-5 mb-5">
	<div class="custom-card bg-quaternary">

		@include('web.components.alert', ['with' => 'warning', 'class' => 'warning'])

		<div class="text-center mb-4">
			{!! $section->text !!}
		</div>

		<form method="POST" action="{{ route('web.register', $locale) }}" autocomplete="off">
			@csrf

			<div class="mb-5">
				<p class="h4 text-uppercase mb-4"><b>{{ trans('text.account-info') }}</b></p>

				<div class="row justify-content-between">
					<div class="col-md-5">
						<div class="mb-3">
							@include('web.components.inputs.input', ['label' => trans('text.email').'*', 'type' => 'email', 'placeholder' => trans('text.please-specify'), 'name' => 'email'])
						</div>

						<div class="mb-3">
							@include('web.components.inputs.input', ['label' => trans('text.create-password').'*', 'type' => 'password', 'placeholder' => trans('text.please-specify'), 'name' => 'password'])
						</div>

						<div class="mb-3">
							@include('web.components.inputs.input', ['label' => trans('text.confirm-password').'*', 'type' => 'password', 'placeholder' => trans('text.please-specify'), 'name' => 'confirm_password'])
						</div>
					</div>
					<div class="col-md-5">
						<div class="mb-3">
							@include('web.components.inputs.select-single', ['label' => trans('text.secret-question').'*', 'placeholder' => trans('text.please-specify'), 'name' => 'secret_question', 'attribute' => 'title', 'rows' => $secret_questions])
						</div>

						<div class="mb-3">
							@include('web.components.inputs.input', ['label' => trans('text.secret-answer').'*', 'placeholder' => trans('text.please-specify'), 'name' => 'secret_answer'])
						</div>
					</div>
				</div>
			</div>

			<div>
				<p class="h4 text-uppercase mb-4"><b>{{ trans('text.personal-info') }}</b></p>
				<div class="row justify-content-between">
					<div class="col-md-5">
						<div class="mb-3">
							@include('web.components.inputs.input', ['label' => trans('text.first-name').'*', 'placeholder' => trans('text.please-specify'), 'name' => 'first_name'])
						</div>

						<div class="mb-3">
							@include('web.components.inputs.input', ['label' => trans('text.last-name').'*', 'placeholder' => trans('text.please-specify'), 'name' => 'last_name'])
						</div>

						<div class="mb-3">
							@include('web.components.inputs.input', ['label' => trans('text.father-name').'*', 'placeholder' => trans('text.please-specify'), 'name' => 'father_name'])
						</div>

						<div class="mb-3">
							@include('web.components.inputs.input', ['label' => trans('text.id-number').'*', 'placeholder' => trans('text.please-specify'), 'name' => 'id_number'])
						</div>

						<div class="mb-3">
							@include('web.components.inputs.select-single', ['label' => trans('text.marital-status'), 'placeholder' => trans('text.please-specify'), 'name' => 'marital_status', 'attribute' => 'title', 'rows' => $marital_statuses])
						</div>

						<div class="mb-3">
							@include('web.components.inputs.input', ['label' => trans('text.date-of-birth').'*', 'type' => 'date', 'placeholder' => trans('text.please-specify'), 'name' => 'date_of_birth', 'max' => date('Y-m-d')])
						</div>

						<div class="mb-3">
							@include('web.components.inputs.select-single', ['label' => trans('text.country-of-birth').'*', 'placeholder' => trans('text.please-specify'), 'name' => 'country_of_birth', 'attribute' => 'name', 'rows' => $countries])
						</div>
					</div>
					<div class="col-md-5">
						<div class="mb-3">
							@include('web.components.inputs.select-single', ['label' => trans('text.city-of-residence').'*', 'placeholder' => trans('text.please-specify'), 'name' => 'city_of_residence', 'attribute' => 'title', 'rows' => $regions])
						</div>

						<div class="mb-3">
							@include('web.components.inputs.input', ['label' => trans('text.street'), 'placeholder' => trans('text.please-specify'), 'name' => 'street'])
						</div>

						<div class="mb-3">
							@include('web.components.inputs.input', ['label' => trans('text.building'), 'placeholder' => trans('text.please-specify'), 'name' => 'building'])
						</div>

						<div class="mb-3">
							@include('web.components.inputs.input', ['label' => trans('text.mobile-number').'*', 'type' => 'number', 'placeholder' => '964XXXXXXXXXXX', 'name' => 'mobile_number'])
						</div>

						<div class="mb-3">
							@include('web.components.inputs.input', ['label' => trans('text.phone-number'), 'type' => 'number', 'placeholder' => trans('text.please-specify'), 'name' => 'phone_number'])
						</div>

						<div class="row justify-content-center mt-5">
							<div class="col-lg-10">
								<div class="text-center mb-4">
									<input id="checkbox-agree" type="checkbox" name="agree" value="1" class="check-custom btn-disabled-js">
									<label for="checkbox-agree">{{ trans('text.agreed-terms-of-use') }} <a href="{{ route('web.terms', $locale) }}" class="text-decoration" target="_blank">{{ trans('text.terms-of-use') }}</a></label>
								</div>

								<button type="submit" class="btn btn-custom font-weight-bold w-100 disabled">{{ trans('text.create-account') }}</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</form>
	</div>
</div>

@endsection