@extends('layouts.app' )
@section('title', 'CONFINCA - Contacto')
@section('content')

<!-- main-content -->
            <div class="main-content spacing-20">

                <div class="wrap-map-v5">
                    <div class="mapouter"><div class="gmap_canvas"><iframe class="gmap_iframe" width="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?width=600&amp;height=600&amp;hl=en&amp;q=confinca inmobiliaria&amp;t=&amp;z=14&amp;ie=UTF8&amp;iwloc=B&amp;output=embed"></iframe><a href="https://embed-googlemap.com">google maps embed</a></div><style>.mapouter{position:relative;text-align:right;width:100%;height:600px;}.gmap_canvas {overflow:hidden;background:none!important;width:100%;height:600px;}.gmap_iframe {height:600px!important;}</style></div>
                    <div class="grid-contact">
                        @foreach ($contact as $con)                      
                       
                            <div class="contact-item wow fadeInUp" data-wow-delay="0.1s">
                                <div class="icon">
                                    <i class="flaticon-location-pin"></i>
                                </div>
                                <div class="content">
                                    <h4>{{ $con->title }}</h4>
                                    <p>
                                        {{ $con->description }}
                                    </p>
                                </div>
                                <div class="bot">
                                    <div class="text-content">
                                        <a href="https://api.whatsapp.com/send?phone=573123799634" class="tf-button-primary w-full"><i class="flaticon-whatsapp"></i> Habla con nosotros</a>
                                    </div>
                                </div>
                            </div>

                        @endforeach
                        
                    </div>
                </div>

                <!-- send-message -->
                <section class="tf-section send-message">
                    <div class="cl-container">
                        <div class="row">
                            <div class="col-12">
                                <div class="heading-section text-center">
                                    <h2 class="wow fadeInUp">Envianos un Mensajes</h2>
                                    <div class="text wow fadeInUp">El Lorem Ipsum fue concebido como un texto de relleno.</div>
                                </div>
                            </div>
                        </div>
                        <div class="row justify-center">
                            <div class="col-xxl-8">
                                <form class="form-send-message">
                                    <div class="cols">
                                        <fieldset class="name wow fadeInUp has-top-title">
                                            <input type="text" placeholder="Nombre" class="" name="text" tabindex="2" value="Tu nombre " aria-required="true" required="">
                                            <label for="">Nombre</label>
                                        </fieldset>
                                        <fieldset class="phone wow fadeInUp has-top-title">
                                            <input type="number" placeholder="Teléfono" class="" name="phone" tabindex="2" value="" aria-required="true" required="">
                                            <label for="">Teléfono</label>
                                        </fieldset>
                                    </div>
                                    <fieldset class="email wow fadeInUp has-top-title">
                                        <input type="email" placeholder="Email" class="" name="email" tabindex="2" value="tuemail@gmail.com" aria-required="true" required="">
                                        <label for="">Email</label>
                                    </fieldset>
                                    <fieldset class="message wow fadeInUp has-top-title">
                                        <textarea name="message" rows="4" placeholder="Tu mensaje" class="" tabindex="2" aria-required="true" required="">Lorem Ipsum</textarea>
                                        <label for="">Tu mensaje</label>
                                  </fieldset>
                                    <div class="checkbox-item wow fadeInUp">
                                        <label>
                                            <p>Doy mi consentimiento para que este sitio web almacene la información enviada.</p>
                                            <input type="checkbox">
                                            <span class="btn-checkbox"></span>
                                        </label>
                                    </div>
                                    <div class="button-submit wow fadeInUp">
                                        <button class="tf-button-primary w-full" type="submit">Enviar Mensaje<i class="icon-arrow-right-add"></i></button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </section>
                <!-- /send-message -->    

            </div>
            <!-- /main-content -->
@endsection