@extends('template')

@section('title', 'Contacto')

@section('content')

@foreach (DB::table('contents')->where('id', 14)->get() as $content)  
<div class="mb100 container-full banner-contacto" style="background-image:url('{{ $content -> img1 }}');">
	<div class="container pt40 pl100">
		<h1>Contacto</h1>  
	</div>
</div>   


<div class="container redux">	
	<div class="col-md-12 pt15 form-contact">

		<form id="formContacto" method="post"> 
        <p>Por favor, tómese el tiempo necesario para llenar el siguiente formulario, usando el mayor detalle posible. <br> Nos pondremos en contacto con usted lo antes posible. Gracias!</p>
		<div class="col-md-4">	
			<br>	
			<input type="" name="nombre" placeholder="Nombre completo" required>
			<input type="email" name="email" id="emaildat" placeholder="Correo electrónico" required> 
			<input type="" name="telefono" placeholder="Telefono" required>
		</div>
		<div class="col-md-4 pt20">
			<textarea rows="5" placeholder="Mensaje" name="mensaje"></textarea required>
			<div class="text-right">
			<buttom type="submit" class="btn_default-form" onclick="event.preventDefault(); sendcontacto();">ENVIAR <img src="{{asset('img/arrow-right.png')}}" class="ml10"></buttom>
			</div>
		</div>
		</form>

		<div class="col-md-4 text">			
			<h4>CONTÁCTENOS</h4><br>
			 {!! $content->description !!}
		</div>

	</div>
</div>

@endforeach

<div class="container-full box-mapa mt60">
    <div class="mapa" id="map"></div>
</div> 

<script> 
    google.maps.event.addDomListener(window, 'load', init);
    var map;                

    function init() {
        var mapOptions = {
            center: new google.maps.LatLng(10.982314,-74.825097),
            zoom: 16,
            zoomControl: true,
            zoomControlOptions: {
                style: google.maps.ZoomControlStyle.SMALL,
            },
            disableDoubleClickZoom: true,
            mapTypeControl: false,
            scaleControl: false,
            scrollwheel: false,
            panControl: false,
            streetViewControl: false,
            draggable : true,
            overviewMapControl: true,
            overviewMapControlOptions: {
                opened: false,
            },
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            styles: [{"featureType":"water","elementType":"geometry","stylers":[{"color":"#e9e9e9"},{"lightness":17}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#ffffff"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#ffffff"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":16}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":21}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#dedede"},{"lightness":21}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#ffffff"},{"lightness":16}]},{"elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#333333"},{"lightness":40}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#f2f2f2"},{"lightness":19}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#fefefe"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#fefefe"},{"lightness":17},{"weight":1.2}]}],
        }
        var mapElement = document.getElementById('map');
        var map = new google.maps.Map(mapElement, mapOptions);
        var locations = [
['Mi Empresa', 'undefined', 'undefined', 'undefined', 'undefined', 10.982314,-74.825097, 'img/icon_location.png']
        ];
        for (i = 0; i < locations.length; i++) {
            if (locations[i][1] =='undefined'){ description ='';} else { description = locations[i][1];}
            if (locations[i][2] =='undefined'){ telephone ='';} else { telephone = locations[i][2];}
            if (locations[i][3] =='undefined'){ email ='';} else { email = locations[i][3];}
           if (locations[i][4] =='undefined'){ web ='';} else { web = locations[i][4];}
           if (locations[i][7] =='undefined'){ markericon ='';} else { markericon = locations[i][7];}
            marker = new google.maps.Marker({
                icon: markericon,
                position: new google.maps.LatLng(locations[i][5], locations[i][6]),
                map: map,
                title: locations[i][0],
                desc: description,
                tel: telephone,
                email: email,
                web: web
            });
link = '';     }

}
</script> 
{{-- <div class="container-full cursos-slider mt100">
    <div class="container redux text-left slider-contactos">
    	@foreach ($contactos as $contacto)
    		<div class="col-md-3 box-contacto pt30 pb30">
    			{!! $contacto->descripcion !!}	
    		</div>
    	@endforeach
 	</div> 	
</div>   

<script>
    $('.slider-contactos').slick({
        slidesToShow: 4,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 4000,
        arrows: true,
        prevArrow: null,
        nextArrow: null,
        dots:false,
        dotsClass:"dotsBanner",
    });    
</script> --}}




@stop