@extends('layouts.layout')

@section('title', 'Contacto')

@section('background', asset('img/contacto.jpg'))

@section('content')
    <div class="container mx-auto px-8 py-5">
        <div class="sec-title text-center mb-5">
            <h2 class="text-gray-900 relative uppercase text-4xl pb-4">Contacto</h2>
            <p class="py-5">Deja un mensaje, con gusto te responderemos</p>
        </div>

		<div id="message" class="my-3 px-3 py-2 rounded border border-green-600 bg-green-200 text-green-600 text-sm font-bold" {{ !session()->has('message') ? 'hidden' : '' }}>
			{{ session()->has('message') ? session()->get('message') : '' }}
		</div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
			<div class="m-2">
				<form id="form-comment" method="POST" action="{{ route('comments.store') }}">
					@csrf
					<div class="w-full">
						<x-jet-label for="name" value="Nombre" class="sr-only" />
						<x-jet-input type="text" id="name" name="name" :value="old('name')" class="mt-5 block w-full p-4" placeholder="Nombre" required />
						<x-jet-input-error for="name" class="mt-2" />
					</div>
					<div class="w-full">
						<x-jet-label for="email" value="Email" class="sr-only" />
						<x-jet-input type="email" id="email" name="email" :value="old('email')" class="mt-5 block w-full p-4" placeholder="Email" required />
						<x-jet-input-error for="email" class="mt-2" />
					</div>
					<div class="w-full">
						<x-jet-label for="phone" value="Teléfono" class="sr-only" />
						<x-jet-input type="text" id="phone" name="phone" :value="old('phone')" class="mt-5 block w-full p-4" placeholder="Teléfono (xxx)-xxx-xxxx" pattern="^\(\d{3}\)-\d{3}-\d{4}$" required />
						<x-jet-input-error for="phone" class="mt-2" />
					</div>
					<div class="w-full">
						<x-jet-label for="message" value="Mensaje" class="sr-only" />
						<textarea name="message" cols="30" rows="5" class="form-textarea w-full rounded-md shadow  p-3 border-gray-300 text-gray-700 mt-5" placeholder="Mensaje">{{ old('message') }}</textarea>
						<x-jet-input-error for="message" class="mt-2" />
					</div>
					<div class="text-left">
						<button type="submit" class="bg-auto-blue-dark text-white btn-effect px-8 py-3 uppercase">Enviar</button>
					</div>
				</form>
			</div>
			<div class="m-2">
				<h3 class="text-3xl text-gray-900 border-b border-auto-blue-dark mb-4">{{ $contact->title }}</h3>
				{!! $contact->description !!}
			</div>
		</div>
    </div>

    <section id="google_map">
        <div id="map-canvas" class="w-full h-1"></div>
    </section>
@endsection

@push('scripts')
	<!-- Google Map API -->
	{{-- <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCC6WFUxqJWbPLH3TPJ5n9zIixsusjoh3I&callback=initMap" async defer></script>
	<script>
		function initMap() {
			var uluru = { lat: 10.235923, lng: -67.614043 };
			var map = new google.maps.Map(document.getElementById('map-canvas'), {
				zoom: 17,
				center: uluru
			});
			var marker = new google.maps.Marker({
				position: uluru,
				map: map
			});
		}
	</script> --}}
	<script>
		(function() {
			'use strict';

			let phone = document.getElementById('phone');

			function formatTlf(e) {
				if ((this.value.length < 15) && ((e.keyCode > 47 && e.keyCode < 58) || (e.keyCode > 95 && e.keyCode <
						106))) {
					this.value = this.value.replace(/\(?(\d{3})\)?\-?(\d{3})\-?/, '($1)-$2-');
				} else {
					this.value = this.value.slice(0, -1);
				}
			}

			phone.addEventListener('keyup', formatTlf);
		})();
	</script>
@endpush