@extends('web.layouts.main')

@section('content')

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

<div class="container pb-5 mb-5">
	<div class="row">
		<div class="col-lg-4 mb-3 mb-lg-0">
			<div class="border-radius bg-quaternary px-3 px-sm-5 p-5 h-100">
				<ul class="list-unstyled">
					@foreach($contact_details as $contact_detail)
					<li class="mb-4">
						<div class="row align-items-center">
							<div class="col-auto">
								<img class="width-40" src="{{ $contact_detail->image }}" alt="Location">
							</div>
							<div class="col">
								<div class="rich-text" {{ $contact_detail->force_ltr ? 'dir=ltr' : '' }}>
									{!! $contact_detail->value !!}
								</div>
							</div>
						</div>
					</li>
					@endforeach
				</ul>
			</div>
		</div>
		<div class="col-lg-8">
			<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.contact', $locale) }}" autocomplete="off">
					@csrf

					<div class="row">
						<div class="col-md-6">
							<div class="mb-3">
								@include('web.components.inputs.input', ['label' => trans('text.full-name').'*', 'placeholder' => trans('text.please-specify'), 'name' => 'full_name', 'value' => Auth::guard('user')->user() ? Auth::guard('user')->user()->full_name : ''])
							</div>

							<div class="mb-3">
								@include('web.components.inputs.input', ['label' => trans('text.email').'*', 'type' => 'email', 'placeholder' => trans('text.please-specify'), 'name' => 'email', 'value' => Auth::guard('user')->user() ? Auth::guard('user')->user()->email : ''])
							</div>

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

							<div class="mb-3">
								@include('web.components.inputs.select-single', ['label' => trans('text.country-of-residence').'*', 'class' => 'country-js', 'placeholder' => trans('text.please-specify'), 'name' => 'country_of_residence', 'attribute' => 'name', 'rows' => $countries, 'data_extra' => 'calling_code'])
							</div>
						</div>

						<div class="col-md-6">
							<div class="mb-3">
								@include('web.components.inputs.input', ['label' => trans('text.phone-number').'*', 'type' => 'number', 'class' => 'phone-code-js', 'placeholder' => trans('text.please-specify'), 'name' => 'phone_number', 'value' => Auth::guard('user')->user() ? Auth::guard('user')->user()->phone_number : ''])
							</div>

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

							<div class="mb-3">
								@include('web.components.inputs.textarea', ['label' => trans('text.your-message').'*', 'placeholder' => trans('text.let-us-know'), 'name' => 'message'])
							</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>
	</div>
</div>

@endsection

@push('scripts')
<script type="text/javascript">
	$('.country-js').change(function(){
		var selected = $(this).find(':selected').attr('data-extra');
		$('.phone-code-js').val(selected);
	});
</script>
@endpush