@extends('layout.front.master')

@section('title', config('site.name') . ' | ' . __('Contact'))
@section('description', config('site.contact.meta_description', __('Contact us for inquiries about our services. We are here to help you.')))
@section('keywords', config('site.contact.meta_keywords', 'contact, help, phone, email, insurance'))

{{-- Open Graph Meta Tags --}}
@section('og_title', config('site.name') . ' - ' . __('Contact'))
@section('og_description', config('site.contact.meta_description', __('Contact us for inquiries about our services. We are here to help you.')))
@section('og_image', brand_og_image())
@section('og_type', 'website')
@section('og_url', url()->current())

{{-- Twitter Card Meta Tags --}}
@section('twitter_title', config('site.name') . ' - ' . __('Contact'))
@section('twitter_description', config('site.contact.meta_description', __('Contact us for inquiries about our services.')))
@section('twitter_image', brand_twitter_image())

@section('content')

<div role="main" class="main">

	@include('layout.front.partials.page-header-insurance', [
		'pageTitle' => __('Contact'),
		'pageBreadcrumb' => [
			['label' => __('Home'), 'url' => front_homepage_url()],
			['label' => __('Contact'), 'url' => null],
		],
	])

	{{-- Contact Form and Locations Section --}}
	<section class="section bg-transparent position-relative border-0 m-0 p-0">
		<div class="container custom-container-background custom-z-index-1 py-5">
			<div class="row position-relative z-index-1 pt-5-5">
				<div class="col">
					<form class="contact-form custom-form-style-1" action="{{ route('front.contact.store') }}" method="POST">
						@csrf

						@if(session('success'))
							<div class="contact-form-success alert alert-success mt-4">
								<strong>{{ __('Success!') }}</strong> {{ session('success') }}
							</div>
						@endif

						@if(session('error'))
							<div class="contact-form-error alert alert-danger mt-4">
								<strong>{{ __('Error!') }}</strong> {{ session('error') }}
								<span class="mail-error-message text-1 d-block"></span>
							</div>
						@endif

						@if($errors->any())
							<div class="alert alert-danger mt-4">
								<strong>{{ __('Error!') }}</strong>
								<ul class="mb-0 mt-2">
									@foreach($errors->all() as $error)
										<li>{{ $error }}</li>
									@endforeach
								</ul>
							</div>
						@endif

						<div class="row row-gutter-sm">
							<div class="form-group col-lg-6 mb-4">
								<input type="text" value="{{ old('name') }}" data-msg-required="{{ __('Please enter your name.') }}" maxlength="100" class="form-control" name="name" id="name" required placeholder="{{ __('Your Name') }}" style="border-radius: 35px;">
							</div>
							<div class="form-group col-lg-6 mb-4">
								<input type="text" value="{{ old('phone') }}" data-msg-required="{{ __('Please enter your phone number.') }}" maxlength="100" class="form-control" name="phone" id="phone" required placeholder="{{ __('Phone Number') }}" style="border-radius: 35px;">
							</div>
						</div>
						<div class="row row-gutter-sm">
							<div class="form-group col-lg-6 mb-4">
								<input type="email" value="{{ old('email') }}" data-msg-required="{{ __('Please enter your email address.') }}" data-msg-email="{{ __('Please enter a valid email address.') }}" maxlength="100" class="form-control" name="email" id="email" required placeholder="{{ __('Your Email') }}" style="border-radius: 35px;">
							</div>
							<div class="form-group col-lg-6 mb-4">
								<input type="text" value="{{ old('subject') }}" data-msg-required="{{ __('Please enter the subject.') }}" maxlength="100" class="form-control" name="subject" id="subject" required placeholder="{{ __('Subject') }}" style="border-radius: 35px;">
							</div>
						</div>
						<div class="row">
							<div class="form-group col mb-4">
								<textarea maxlength="5000" data-msg-required="{{ __('Please enter your message.') }}" rows="10" class="form-control" name="message" id="message" required placeholder="{{ __('Your Message') }}" style="border-radius: 25px;">{{ old('message') }}</textarea>
							</div>
						</div>
						<div class="row">
							<div class="form-group col mb-3">
								<button type="submit" class="btn btn-secondary btn-rounded border-0 font-weight-bold text-3 btn-px-5 py-3" data-loading-text="{{ __('Loading...') }}">{{ __('SEND MESSAGE') }}</button>
							</div>
						</div>
					</form>
					<hr class="my-5">
					<h2 class="text-color-dark font-weight-medium text-8 mt-5 mb-3 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="100">{{ config('site.contact.locations_title_1', __('Our')) }} <strong>{{ config('site.contact.locations_title_2', __('Locations')) }}</strong></h2>
					<p class="text-4 line-height-8 mb-4 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="200">{{ config('site.contact.locations_description', __('Donec velit magna, consectetur at suscipit eu, dapibus vel odio. Mauris ac nulla at ligula interdum ullamcorper. Nunc mattis eros nec eros dictum, nec molestie metus auctor.')) }}</p>
					<div class="row py-4 mb-3">
						<div class="col-lg-6 pb-4 pb-lg-0 appear-animation" data-appear-animation="fadeInLeftShorterPlus" data-appear-animation-delay="300">
							{{-- Office 1 --}}
							@if(config('site.contact.address'))
								<p class="text-4-5 pe-lg-2 text-dark font-weight-bold">{{ config('site.contact.address', 'Av. Principal 1234, Buenos Aires') }}</p>
							@else
								<p class="text-4-5 pe-lg-2 text-dark font-weight-bold">{{ config('site.contact.office1_address', 'Av. Principal 1234, Buenos Aires') }}</p>
							@endif
							<ul class="list list-unstyled">
								<li class="d-flex align-items-center mb-3">
									<i class="icon icon-envelope text-color-dark text-3 font-weight-bold position-relative top-1 me-3-5"></i>
									<a href="mailto:{{ config('site.contact.email', 'contacto@aseguradora.com') }}" class="d-inline-flex align-items-center text-decoration-none text-color-dark text-color-hover-primary font-weight-semibold text-4-5">{{ config('site.contact.email', 'contacto@aseguradora.com') }}</a>
								</li>
								<li class="d-flex align-items-center mb-3">
									<i class="icon icon-phone text-color-dark text-3 font-weight-bold position-relative top-1 me-3-5"></i>
									<a href="tel:{{ str_replace([' ', '-', '(', ')'], '', config('site.contact.phone', '800-123-4567')) }}" class="d-inline-flex align-items-center text-decoration-none text-color-dark text-color-hover-primary font-weight-semibold text-4-5">{{ config('site.contact.phone', '800-123-4567') }}</a>
								</li>
							</ul>

							{{-- Office 2 --}}
							@if(config('site.contact.office2_address'))
								<hr class="my-5">
								<p class="text-4-5 pe-lg-2 text-dark font-weight-bold">{{ config('site.contact.office2_address') }}</p>
								<ul class="list list-unstyled">
									<li class="d-flex align-items-center mb-3">
										<i class="icon icon-envelope text-color-dark text-3 font-weight-bold position-relative top-1 me-3-5"></i>
										<a href="mailto:{{ config('site.contact.office2_email', config('site.contact.email', 'contacto@aseguradora.com')) }}" class="d-inline-flex align-items-center text-decoration-none text-color-dark text-color-hover-primary font-weight-semibold text-4-5">{{ config('site.contact.office2_email', config('site.contact.email', 'contacto@aseguradora.com')) }}</a>
									</li>
									<li class="d-flex align-items-center mb-3">
										<i class="icon icon-phone text-color-dark text-3 font-weight-bold position-relative top-1 me-3-5"></i>
										<a href="tel:{{ str_replace([' ', '-', '(', ')'], '', config('site.contact.office2_phone', config('site.contact.phone', '800-123-4567'))) }}" class="d-inline-flex align-items-center text-decoration-none text-color-dark text-color-hover-primary font-weight-semibold text-4-5">{{ config('site.contact.office2_phone', config('site.contact.phone', '800-123-4567')) }}</a>
									</li>
								</ul>
							@else
								{{-- Default second office --}}
								<hr class="my-5">
								<p class="text-4-5 pe-lg-2 text-dark font-weight-bold">{{ config('site.contact.office2_address', 'Calle Secundaria 567, Córdoba') }}</p>
								<ul class="list list-unstyled">
									<li class="d-flex align-items-center mb-3">
										<i class="icon icon-envelope text-color-dark text-3 font-weight-bold position-relative top-1 me-3-5"></i>
										<a href="mailto:{{ config('site.contact.email', 'contacto@aseguradora.com') }}" class="d-inline-flex align-items-center text-decoration-none text-color-dark text-color-hover-primary font-weight-semibold text-4-5">{{ config('site.contact.email', 'contacto@aseguradora.com') }}</a>
									</li>
									<li class="d-flex align-items-center mb-3">
										<i class="icon icon-phone text-color-dark text-3 font-weight-bold position-relative top-1 me-3-5"></i>
										<a href="tel:{{ str_replace([' ', '-', '(', ')'], '', config('site.contact.phone', '800-123-4567')) }}" class="d-inline-flex align-items-center text-decoration-none text-color-dark text-color-hover-primary font-weight-semibold text-4-5">{{ config('site.contact.phone', '800-123-4567') }}</a>
									</li>
								</ul>
							@endif
						</div>
						<div class="col-lg-6 appear-animation" data-appear-animation="fadeInRightShorterPlus" data-appear-animation-delay="300">
							@if(config('site.contact.latitude'))
								<div id="googlemaps" class="google-map mt-0 mb-0" style="height: 400px;"></div>
							@endif
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>

	{{-- CTA Section --}}
	<section class="section section-height-3 bg-primary position-relative z-index-1 border-0 m-0">
		<div class="container">
			<div class="row align-items-center gy-5">
				<div class="col-xl-7 text-center text-xl-start appear-animation" data-appear-animation="fadeInLeftShorterPlus" data-appear-animation-delay="100">
					<h3 class="text-color-light font-weight-medium text-4 mb-1">{{ config('site.contact.cta_label', __('LOOKING FOR AFFORDABLE INSURANCE?')) }}</h3>
					<h2 class="text-color-light font-weight-bold mb-1">{{ config('site.contact.cta_title', __('Get Insurance Online and Save Up To 20%!')) }}</h2>
					<p class="text-color-light font-weight-semibold opacity-8 text-4 mb-0">{{ config('site.contact.cta_subtitle', __('Surprisingly great rates, get started right now.')) }}</p>
				</div>
				<div class="col-xl-5 appear-animation" data-appear-animation="fadeInRightShorterPlus" data-appear-animation-delay="100">
					<div class="d-flex flex-column flex-sm-row align-items-center justify-content-center justify-content-xl-end">
						<div class="d-inline-flex align-items-center mb-4 mb-sm-0">
							<i class="icons icon-phone text-7 text-color-light position-relative bottom-2"></i>
							<div class="ps-2">
								<span class="d-block text-2 font-weight-medium text-color-light line-height-1">{{ __('CALL US NOW') }}</span>
								<strong class="text-4"><a href="tel:{{ str_replace([' ', '-', '(', ')'], '', config('site.contact.phone', '800-123-4567')) }}" class="text-color-light text-decoration-none">{{ config('site.contact.phone', '800-123-4567') }}</a></strong>
							</div>
						</div>
						<div class="custom-divider px-3 me-3 ms-5-5 d-none d-sm-block"></div>
						<a href="{{ front_homepage_url() }}" class="btn btn-light btn-rounded font-weight-bold border-0 text-color-dark text-3 px-5 btn-py-3">{{ __('GET STARTED') }}</a>
					</div>
				</div>
			</div>
		</div>
	</section>

</div>

@endsection

@if(config('site.contact.latitude'))
@push('scripts')
<script>
	(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
		({key: "{{ config('site.google_maps_api_key', 'YOUR_API_KEY') }}", v: "weekly"});
	async function initMap() {
		const { Map, InfoWindow } = await google.maps.importLibrary("maps");
		const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");
		const map = new Map(document.getElementById("googlemaps"), {
			zoom: 14,
			center: { lat: {{ config('site.contact.latitude', -37.817240) }}, lng: {{ config('site.contact.longitude', 144.955820) }} },
			mapId: "{{ config('site.google_maps_map_id', 'YOUR_MAP_API_ID') }}",
		});
		const markers = [
			{
				position: { lat: {{ config('site.contact.latitude', -37.817240) }}, lng: {{ config('site.contact.longitude', 144.955820) }} },
				title: "{{ config('site.name') }}<br>{{ config('site.contact.address', 'Office 1') }}<br>{{ __('Phone') }}: {{ config('site.contact.phone', '800-123-4567') }}",
			}
		];
		const infoWindow = new InfoWindow();
		markers.forEach(({ position, title }, i) => {
			const pin = new PinElement({
				background: "#e36159",
				borderColor: "#e36159",
				glyphColor: "#FFF",
			});
			const marker = new AdvancedMarkerElement({
				position,
				map,
				title: `${title}`,
				content: pin.element,
			});
			marker.addListener("click", ({ domEvent, latLng }) => {
				const { target } = domEvent;
				infoWindow.close();
				infoWindow.setContent(marker.title);
				infoWindow.open(marker.map, marker);
			});
		});
	}
	initMap();
</script>
@endpush
@endif