@include('site/header')

<section class="min-h-[calc(100vh-550px)] sm:min-h-[calc(100vh-240px)] bg-white relative">
	<div class="absolute w-full h-full">
		<picture>
			<source
				srcset="{{ url('images/login-bg.avif') }}"
				type="image/avif"
			>
			<img src="{{ url('images/login-bg.webp') }}" alt="Circuitos" width="100" class="w-full h-full object-cover">
		</picture>
	</div>
	<div class="absolute bg-black w-full h-full opacity-10 z-10"></div>

	<div class="min-h-[calc(100vh-550px)] sm:min-h-[calc(100vh-240px)] flex justify-center items-center px-4 sm:px-6 pt-[90px] pb-[15px] z-20 relative">
		<div class="w-full max-w-[800px] border-2 border-solid border-[#0077b2] rounded-lg bg-white shadow-lg p-6">
			<h1 class="text-center text-[#0077b2] text-xl sm:text-2xl tracking-[4px] leading-[40px] font-[700] overflow-hidden whitespace-nowrap text-ellipsis">¡Contactanos!</h1>
			<p class="text-center text-gray-400 font-[600] text-sm pt-1 pb-3">Nos pondremos en contacto contigo lo antes posible.</p>
			<div class="py-4">
				<form onsubmit="return mySubmitFunction(event)">
				@csrf
					<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
						<div class="w-full">
							<div class="">
								<input type="text" placeholder="Nombre y Apellido" id="name" class="w-full border border-gray-300 border-solid rounded px-2 py-1">
							</div>
						</div>
						<div class="w-full">
							<div class="">
								<input type="text" placeholder="Email" id="email" class="w-full border border-gray-300 border-solid rounded px-2 py-1">
							</div>
						</div>
						<div class="w-full">
							<div class="">
								<input type="text" placeholder="Teléfono (Opcional)" id="phone" class="w-full border border-gray-300 border-solid rounded px-2 py-1">
							</div>
						</div>
						<div class="sm:col-span-3">
							<textarea placeholder="Escribe aquí tu consulta" rows="3" id="message" class="w-full border border-gray-300 border-solid rounded px-2 py-1"></textarea>
						</div>

						<div class="text-center w-full sm:col-span-3" id="botonEnviar">
							<button type="submit" class="w-full sm:w-auto bg-[#2C8272] text-white font-[600] uppercase rounded px-4 py-2 hover:scale-105"><span>Enviar</span></button>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</section>

<script>
    function mySubmitFunction(e) {
        e.preventDefault();
        let name = $('#name').val()
		let email = $('#email').val()
		let phone = $('#phone').val()
		let message = $('#message').val()

        if (name != "" && email != "" && message != "") {
            $('#botonEnviar').html('<button type="button" class="w-full sm:w-auto bg-[#2C8272] text-white font-[600] uppercase rounded px-4 py-2 mt-2">'+
                                            'Enviando...'+
                                        '</button>');

            $.ajax({
                type:'POST',
                url:"{{route('send_mail_contacto')}}",
                data: {
                    "_token": "{{csrf_token()}}",
                    name: name,
                    email: email,
                    phone: phone,
                    message: message
                },
                success:function(resp){
                    if (resp == 1) {
                        $('#botonEnviar').html('<button type="button" class="w-full sm:w-auto bg-[#2C8272] text-white font-[600] uppercase rounded px-4 py-2 mt-2">'+
													'Mensaje Enviado!'+
												'</button>');
                    } else {
                        $('#botonEnviar').html('<button type="submit" class="w-full sm:w-auto bg-[#2C8272] text-white font-[600] uppercase rounded px-4 py-2 mt-2 hover:scale-105">'+
													'Error al enviar el email. Inténtalo nuevamente!'+
												'</button>');
                    }
                }
            });
        }
    }
</script>

@include('site/footer')