@extends('web.layouts.main')

@section('content')

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

<div class="container pb-5 mb-5">
	<div class="border-radius bg-quaternary px-3 px-sm-5 p-5 h-100">
		@if($message = Session::get('status'))
		<div class="alert alert-success alert-dismissible fade show mb-5" role="alert">
			{!! $message !!}
			<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
		</div>
		@endif

		<form method="POST" action="{{ route('web.how-to-become-agent', $locale) }}" autocomplete="off">
			@csrf

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

					<div class="mb-3">
						<div class="row justify-content-between align-items-center">
							<div class="col">
								<label class="col-form-label">{{ trans('text.phone-number').'*' }}</label>
							</div>
							<div class="col-lg-8">
								<div class="row">
									<div class="col-3 {{ $locale == 'en' ? 'order-1 pe-1' : 'order-2 ps-1' }}">
										<input type="number" name="phone_code" class="form-control form-custom px-2 text-center {{ ($errors->has('phone_number') ? 'invalid-error' : '') }}" value="964" readonly>
									</div>
									<div class="col-9 {{ $locale == 'en' ? 'order-2 ps-1' : 'order-1 pe-1 text-left' }}">
										<input type="number" name="phone_number" class="form-control form-custom {{ $locale == 'en' ? 'text-start' : 'text-end' }} {{ ($errors->has('phone_number') ? 'invalid-error' : '') }}" placeholder="{{ trans('text.please-specify') }}" value="{{ old('phone_number') }}">
									</div>
								</div>
							</div>
						</div>
						@include('web.components.inputs.error', ['name' => 'phone_code'])
						@include('web.components.inputs.error', ['name' => 'phone_number'])
					</div>

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

					<div class="mb-3">
						@include('web.components.inputs.select-single', ['label' => trans('text.regions').'*', 'placeholder' => trans('text.please-specify'), 'name' => 'region', 'rows' => $regions, 'attribute' => 'title'])
					</div>
				</div>
				<div class="col-lg-6">
					<div class="mb-3">
						@include('web.components.inputs.input', ['label' => trans('text.sector').'*', 'placeholder' => trans('text.please-specify'), 'name' => 'sector'])
					</div>

					<div class="mb-3">
						@include('web.components.inputs.input', ['label' => trans('text.alley').'*', 'placeholder' => trans('text.please-specify'), 'name' => 'alley'])
					</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-number').'*', 'placeholder' => trans('text.please-specify'), 'name' => 'building_number'])
					</div>
				</div>
			</div>


			<div class="text-center mt-4">
				<button type="submit" class="btn btn-custom px-5">{{ trans('text.submit') }}</button>
			</div>
		</form>
	</div>
</div>

@endsection