@extends('layouts.web')

@section('main')
<div class="breadcrumb-area breadcrumb-img bg-img" data-bg="{{ asset('images/cabeceras/'.$cabecera->imagen) }}">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="breadcrumb-wrap">
                    <nav aria-label="breadcrumb">
                        <h3 class="breadcrumb-title">CONTACTO</h3>
                        <ul class="breadcrumb justify-content-center">
                            <li class="breadcrumb-item"><a href="index.html"><i class="fa fa-home"></i></a></li>
                            <li class="breadcrumb-item active" aria-current="page">Contáctanos</li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- breadcrumb area end -->

<!-- google map start -->
<div class="map-area section-padding">
    <div id="google-map"></div>
</div>
<!-- google map end -->

<!-- contact area start -->
<div class="contact-area section-padding pt-0">
    <div class="container">
        <div class="row">
            <div class="col-lg-6">
                <div class="contact-message">
                    <h4 class="contact-title">Formulario de contacto</h4>
                    <form id="contact-form" action="assets/php/mail.php" method="post" class="contact-form">
                        <div class="row">
                            <div class="col-lg-6 col-md-6 col-sm-6">
                                <input name="first_name" placeholder="Nombre *" type="text" required>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-6">
                                <input name="phone" placeholder="Teléfono *" type="text" required>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-6">
                                <input name="email_address" placeholder="Correo Electrónico *" type="text" required>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-6">
                                <input name="contact_subject" placeholder="Asunto *" type="text">
                            </div>
                            <div class="col-12">
                                <div class="contact2-textarea text-center">
                                    <textarea placeholder="Mensaje *" name="message" class="form-control2" required=""></textarea>
                                </div>
                                <div class="contact-btn">
                                    <button class="btn btn-sqr" type="submit">Enviar mensaje</button>
                                </div>
                            </div>
                            <div class="col-12 d-flex justify-content-center">
                                <p class="form-messege"></p>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="contact-info">
                    <h4 class="contact-title">Contáctanos</h4>
                    <p>Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum
                        est notare quam littera gothica, quam nunc putamus parum claram anteposuerit litterarum
                        formas human.</p>
                    <ul>
                        <li><i class="fa fa-fax"></i> Dirección : CALLE CENTRAL NORTE #54<br> COL. SAN JOSÉ TERÁN, <br>TUXTLA GUTIÉRREZ, CHIAPAS 29000</li>
                        <li><i class="fa fa-envelope-o"></i> Correos electrónicos:<br> info@dayanara.mx<br> ventas@dayanara.mx</li>
                        <li><i class="fa fa-phone"></i> 993 279 2072</li>
                    </ul>
                    <div class="working-time">
                        <h6>Nuestros horarios</h6>                        
                        <p><span>DOMINGO A VIERNES</span> 09:00 AM A 19:00 HRS</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection