@extends('layouts.app')
@section('title','CONTÁCTANOS')
@section('section')
    <!-- start contact-pg-contact-section -->
    <section class="contact-pg-contact-section section-padding">
        <div class="container">

            <div class="row">
                <div class="col-md-12 pb-5">
                        <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3949.98508961742!2d-79.035400390625!3d-8.102999687194824!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x91ad3d90d9470ba9%3A0xf900fee72ce2bedf!2sAv.%20Nicol%C3%A1s%20de%20Pi%C3%A9rola%20724%2C%20Distrito%20de%20V%C3%ADctor%20Larco%20Herrera%2013001!5e0!3m2!1ses!2spe!4v1571502501201!5m2!1ses!2spe" width="100%" height="350" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
                </div>
            </div>
            <br>
            <div class="row">
                <div class="col col-xs-12">
                    <div class="section-title">
                        <h2>CONTÁCTANOS</h2>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col col-lg-10 col-lg-offset-1">
                    <div class="row contact-info-grids">
                        <div class="col col-xs-4 grid">
                            <div class="icon">
                                <i class="fa fa-home"></i>
                            </div>
                            <p> Avenida Nicolás de Piérola 724 Urb. Primavera - Trujillo - La Libertad </p>
                        </div>
                        <div class="col col-xs-4 grid">
                            <div class="icon">
                                <i class="fa fa-phone"></i>
                            </div>
                            <p>+51 944 399 365</p>
                            <p>+51 944 399 365</p>
                        </div>
                        <div class="col col-xs-4 grid">
                            <div class="icon">
                                 <i class="fa fa-envelope"></i>
                            </div>
                            <p>ventas@nefasasac.com</p>
                            <p>informes@nefasasac.com</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col col-lg-10 col-lg-offset-1">
                    <div class="contact-form">
                        <form class="row contact-validation-active"  action="{{route('contactar')}}" method="POST">
                        {{ csrf_field() }}
                            <div class="col col-sm-6">
                                <input type="text" class="form-control" id="name" name="name" placeholder="Escribe tu Nombre y Apellidos" required>
                            </div>
                            <div class="col col-sm-6">
                                <input type="email" class="form-control" id="email" name="email" placeholder="Correo electrónico" required>
                            </div>
                            <div class="col col-sm-6">
                                <input type="text" class="form-control" id="phone" name="phone" placeholder="Número de celular" required>
                            </div>
                            <div class="col col-sm-6">
                                <input type="text" class="form-control" id="address" name="address" placeholder="Dirección">
                            </div>
                            <div class="col col-xs-12">
                                <textarea id="note" name="note" class="form-control" required></textarea>
                            </div>
                            <div class="col col-xs-12">
                                <div class="submit-btn">
                                    <button type="submit" id='btn-contact' class="theme-btn-s2">Enviar Información</button>
                                    <div id="loader">
                                        <i class="fa fa-refresh fa-spin fa-3x fa-fw"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="col col-xs-12">
                                <div class="error-handling-messages">
                                    <div id="success">Thank you</div>
                                    <div id="error"> Error occurred while sending email. Please try again later. </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

        </div> <!-- end container -->
    </section>
    <!-- end contact-pg-contact-section -->
@endsection