@extends('layouts.client')

@push('meta_title')
    {{ __('Contact Us') }}
@endpush

@push('scriptsToHead')
	{!! htmlScriptTagJsApi() !!}
@endpush

@section('content')    
	<section class="section">
		<div class="container">
			<h4 class="fw-bold text-center">Get in Touch with Us</h4>
			<p class="text text-center">Write your inquiry in the form</p>

			<div class="row justify-content-center pt-5">
				<div class="col-xl-6 col-lg-6 col-md-9">
					<form action="{{ route('contact.create') }}" method="POST">
						@csrf

						<div class="row g-4">
							<div class="col-xl-6 col-lg-6 col-md-6">
								<div class="form-group">
									<label for="name" class="form-label">Full Name</label>
									<input type="text" name="name" class="form-control @error('name') is-invalid @enderror" value="{{ old('name') }}" required>

									@error('name')
										<span class="invalid-feedback" role="alert">{{ $message }}</span>
									@enderror
								</div>
							</div>
							<div class="col-xl-6 col-lg-6 col-md-6">
								<div class="form-group">
									<label for="email" class="form-label">Email address</label>
									<input type="email" name="email" class="form-control @error('email') is-invalid @enderror" value="{{ old('email') }}" required>

									@error('email')
										<span class="invalid-feedback" role="alert">{{ $message }}</span>
									@enderror
								</div>
							</div>
							<div class="col-xl-6 col-lg-6 col-md-6">
								<div class="form-group">
									<label for="phone" class="form-label">Phone</label>
									<input type="tel" name="phone" class="form-control @error('phone') is-invalid @enderror" value="{{ old('phone') }}" pattern="((^(\+)(\d){12}$)|(^\d{11}$))" required>

									@error('phone')
										<span class="invalid-feedback" role="alert">{{ $message }}</span>
									@enderror
								</div>
							</div>
							<div class="col-xl-6 col-lg-6 col-md-6">
								<div class="form-group">
									<label for="subject" class="form-label">Subject</label>
									<input type="text" name="subject" class="form-control @error('subject') is-invalid @enderror" value="{{ old('subject') }}" required>

									@error('subject')
										<span class="invalid-feedback" role="alert">{{ $message }}</span>
									@enderror
								</div>
							</div>
							<div class="col-xl-12">
								<div class="form-group">
									<label for="message" class="form-label">Message</label>
									<textarea name="message" class="form-control @error('message') is-invalid @enderror" rows="3">{{ old('message') }}</textarea>

									@error('message')
										<span class="invalid-feedback" role="alert">{{ $message }}</span>
									@enderror
								</div>
							</div>
							<div class="col-xl-12">
								{!! htmlFormSnippet() !!}

								@error('g-recaptcha-response')
									<span class="text-danger" role="alert">{{ $message }}</span>
								@enderror
							</div>
							<div class="col-xl-12">
								<button type="submit" class="btn btn-dark btn-lg">Submit Inquiry</button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</section>
@endsection

@push('snackbar')
    <x-alert></x-alert>
    <x-alert-danger></x-alert-danger>
@endpush