@extends('layout.mainlayout')
@section('estilos')
<link rel="stylesheet" href="{{asset('css/contacto.css')}}">
@endsection
@section('navbar')
@include('layout.partials.nav')
@endsection
@section('content')

<div class="container my-5">
    <!--Section: Content-->
    <section class="mb-5">
        <!-- Grid row -->
        <div class="row">
            <!-- Grid column -->
            <div class="col-lg-8">
                <div class="form">
                    <!-- Header -->
                    <div class="text-center">
                        <img class="img-fluid" src="{{asset('images/contacto/envelope.svg')}}" alt="">
                    </div>
                    <h4 class="text-center text-main-orange font-black text-uppercase">¡Comunícate con Nosotros!
                    </h4>
                    <form class="mb-5 mx-md-5" id="form-contacto" method="POST" action="{{route('crearContacto')}}">
                        @csrf
                        {!! Honeypot::generate('myHoneypot', 'my_time') !!}
                        <!-- Primea FIla -->
                        <div class="row mt-4">
                            <!-- Nombre -->
                            <div class="col-md-6">
                                <div class="mb-0">
                                    <input type="text" id="nombre" class="form-control" placeholder="Nombre"
                                        name="nombre" value="{{old('nombre')}}" required>
                                    <label for="nombre" class=""></label>
                                    @error('nombre')
                                    <div class="alerta" id="nombre01">
                                        <p class="alert01"><i class="fa fa-info-circle color01"></i>
                                            {{$message}}</p>
                                    </div>
                                    @enderror
                                </div>
                            </div>
                            <!-- Apellido -->
                            <div class="col-md-6">
                                <div class="mb-0">
                                    <input type="text" id="apellido" class="form-control" placeholder="Apellido"
                                        name="apellido" value="{{old('apellido')}}" required>
                                    <label for="apellido" class=""></label>
                                    @error('apellido')
                                    <div class="alerta" id="apellido01">
                                        <p class="alert01"><i class="fa fa-info-circle color01"></i>
                                            {{$message}}</p>
                                    </div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        <!-- Segunda Fila -->
                        <div class="row">
                            <!-- Correo Electronico -->
                            <div class="col-md-6">
                                <div class="mb-0">
                                    <input type="email" id="email" class="form-control" placeholder="Correo Electrónico"
                                        name="email" value="{{old('email')}}" required>
                                    <label for="email" class=""></label>
                                    @error('email')
                                    <div class="alerta" id="email01">
                                        <p class="alert01"><i class="fa fa-info-circle color01"></i>
                                            {{$message}}</p>
                                    </div>
                                    @enderror
                                </div>
                            </div>
                            <!-- Telefono -->
                            <div class="col-md-6">
                                <div class="mb-0">
                                    <input type="tel" id="telefono" class="form-control" placeholder="Teléfono"
                                        name="telefono" value="{{old('telefono')}}" minlength="9" maxlength="12" required>
                                    <label for="telefono" class=""></label>
                                    @error('telefono')
                                    <div class="alerta" id="telefono01">
                                        <p class="alert01"><i class="fa fa-info-circle color01"></i>
                                            {{$message}}</p>
                                    </div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        <!-- Tercera Fila -->
                        <div class="row">
                            <!-- Mensaje -->
                            <div class="col-md-12">
                                <div class="mb-0">
                                    <textarea id="mensaje" class="form-control md-textarea" placeholder="Mensaje"
                                        rows="3" name="mensaje" required>{{old('mensaje')}}</textarea>
                                    <label for="mensaje"></label>
                                    <br>
                                    
                                </div>
                            </div>

                            <!-- Botón -->
                            <div class="col-12 text-center">
                                <button type="submit" id="enviar" class="btn-send btn-lg text-white"><span id="spinner"
                                        style="display:none;margin-right:5px"
                                        class="spinner-border spinner-border-sm" role="status"
                                        aria-hidden="true"></span> <span>ENVIAR</span> </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="col-lg-4 pt-5">
                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3346.694885604633!2d-71.50170752432862!3d-32.985450773577256!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x9689dc684599dc21%3A0x188987bc098a2a37!2sCam.%20Internacional%202440%2C%202541754%20Vi%C3%B1a%20del%20Mar%2C%20Valpara%C3%ADso!5e0!3m2!1ses-419!2scl!4v1718126369355!5m2!1ses-419!2scl" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
            </div>
        </div>
    </section>
</div>

@section('scripts')
<script>
    document.getElementById('form-contacto').addEventListener('submit', function (event) {
        event.preventDefault();
        const name = document.getElementById('nombre').value.trim();
        const lastName = document.getElementById('apellido').value.trim();
        const email = document.getElementById('email').value.trim();
        const phone = document.getElementById('telefono').value.trim();
        const mensaje = document.getElementById('mensaje').value.trim();
        const emailRegex = /^([A-Za-z0-9_\-.+])+@([A-Za-z0-9_\-.])+\.([A-Za-z]{2,})$/;
        const btn = document.getElementById('enviar');

        if (!name) {
            alert('Por favor ingrese su nombre');
            return;
        } else if (!lastName) {
            alert('Por favor ingrese su apellido');
            return;
        } else if (!email) {
            alert('Por favor ingrese su correo electrónico');
            return;
        } else if (!emailRegex.test(email)) {
            alert('Por favor ingrese un correo electrónico válido');
            return;
        } else if (!phone) {
            alert('Por favor ingrese su teléfono');
            return;
        } else if (phone.length < 9 || phone.length > 12) {
            alert('Por favor ingrese un teléfono válido');
            return;
        } else if (!mensaje) {
            alert('Por favor ingrese un mensaje');
            return;
        } else {
            btn.disabled = true;
            document.getElementById('spinner').style.display = 'inline-block';
            btn.querySelector('span:last-child').innerHTML = 'ENVIANDO...';
            this.submit();
        }
    }) 
</script>
@endsection
@endsection
@section('footer')
@include('layout.partials.footer')
@endsection