@extends('layouts.app')

@section('title', 'Contact')

@section('content')
<!-- =======================
Main Banner START -->
<!-- =======================
Main Banner START -->
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<section class="min-vh-100 pt-xl-9  pb-0 mb-0">
	<div class="container pt-5">
		<div class="row align-items-center">
			<div class="col-xl-6">
				<img class="w-25" src="{{asset('img/contact/shake.svg')}}">
				<!-- Title and content -->
				<h2 class="text-primary">Contactez Justine Piluso</h2>
			</div>

			<div class="col-xl-6">
				<img class="my-3   border-round-md" src="{{asset('img/findme/cheffe_nomade_justine_piluso.png')}}">
			</div>

		</div>
		<div class="row align-items-center">
			<div class="col-md-12">
				<p class="mt-xl-5 text-dark">
					Nous sommes impatients de collaborer avec vous et de répondre à toutes vos interrogations. Pour nous joindre, veuillez remplir le formulaire ci-dessous. Ensemble, donnons vie à vos projets culinaires et d’entreprise !
				</p>
			</div>
			<div>
				<i class="text-primary"><strong>Retrouvez Justine -</strong></i>
				<a href="https://www.facebook.com/ChefJustinePiluso/?locale=fr_FR"><img src="{{asset('img/contact/facebook.svg')}}" class="ms-3" alt="Facebook"></a>
				<a href="https://www.instagram.com/justine_piluso/"><img src="{{asset('img/contact/insta.svg')}}" class="ms-2" alt="Instagram"></a>
			</div>
		</div>

		<div class="card px-3 px-xl-8 py-5 my-7 border border-primary border-round-sm">

			<form class="row" action="{{ route('contact.store') }}" method="POST" id="form-contact">
				@csrf
				<input type="hidden" name="g-recaptcha-response">
				<div class="col-6">
					<input type="text" class="form-control form-control my-2  border border-dark border-round-sm" placeholder="Nom" name="name">
				</div>
				<div class="col-6">
					<input type="text" class="form-control form-control my-2 border border-dark border-round-sm" placeholder="Prénom" name="first_name">
				</div>
				<div class="col-12">
					<input type="email" class="form-control form-control my-2  border border-dark border-round-sm" placeholder="Email" name="email">
				</div>
				<div class="col-12">
					<textarea class="form-control form-control my-2  border border-dark border-round-sm " name="message" placeholder="Message"></textarea>
				</div>
				<!-- Button -->
				<div class="col-12 d-flex pt-3 justify-content-center">
                <button class="g-recaptcha btn btn-sm btn-primary p-3" data-sitekey="{{ config('services.recaptcha.site_key') }}" data-callback="onSubmit" data-action="send_mail" data-size="invisible">Envoyez votre message</button>
					<script>
						function onSubmit(token) {
							document.getElementById("form-contact").submit();
						}
					</script>
				</div>
			</form>

		</div>
	</div>
</section>

<section>

	@include('layouts.what')

</section>
@endsection