@extends('layouts.default-home')

@section('content')

    <!--Banner-->
    <section class="pg-banner pg-banner-bg">
        <div class="container">
            <div class="banner-title">
                <h1>CONTATO</h1> </div>
        </div>
    </section>
    <!--/Banner-->
    <!--Breadcrumb-->
    <section class="pg-breadcrumb">
        <div class="container">
            <div class="row">
                <div class="col-md-6 col-xs-9">
                    <ul class="breadcrumb">
                        <li><a href="/"><i class="fa fa-home visible-xs-inline-block"></i> <span class="hidden-xs">HOME</span></a></li>
                        <li>CONTATO</li>
                    </ul>
                </div>
                <div class="col-md-6 col-xs-3">
                    <div class="align-btn pull-right">
                        <a href="tel:{{$siteData['telefone']}}" class="btn btn-md"> <i class="fa fa-phone visible-xs-inline-block"></i> <span class="hidden-xs"><span class="fa fa-phone"></span>CONTATE-NOS</span> </a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--/Breadcrumb-->
    <!--Contacts-->
    <section class="pg-contacts section-pad">
        <div class="container">
            <div class="main">
                <div class="heading"> SOLICITE UM ORÇAMENTO </div>
            </div>
            <!--contact info-->
            <form id="form-contato">
                <div class="row">
                    <div class="col-md-4 col-sm-4">
                        <div class="form-group">
                            <input id="nome" type="text" class="form-control" name="nome" placeholder="Nome"> </div>
                    </div>
                    <div class="col-md-4 col-sm-4">
                        <div class="form-group">
                            <input id="celular" type="number" class="form-control" name="celular" placeholder="Celular"> </div>
                    </div>
                    <div class="col-md-4 col-sm-4">
                        <div class="form-group">
                            <input id="email" type="email" class="form-control" name="email" placeholder="E-mail"> </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group">
                            <textarea id="mensagem" class="form-control" name="mensagem" rows="5">Mensagem</textarea>
                        </div>
                    </div>
                    <div class="btn-middle"> <button class="btn btn-md">ENVIAR</button> </div>
                </div>
            </form>
            <!--contact details-->
            <div class="contact-details">
                <div class="row">
                    <div class="col-md-4 col-sm-12">
                        <div class="contacts-box">
                            <div class="center"> <span class="fa fa-map-o"></span> </div>
                            <p>{{$siteData['endereco']}}</p>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-12">
                        <div class="contacts-box">
                            <div class="center"> <span class="fa fa-phone"></span> </div>
                            <p>{{$siteData['telefone']}}</p>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-12">
                        <div class="contacts-box">
                            <div class="center"> <span class="fa fa-envelope-o"></span> </div>
                            <p>{{$siteData['email']}}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--/Contacts-->
    <!--google map-->
    <div id="map"></div>
    <!--/google map-->
    <script>
        function initMap() {
            var myLatLng = {lat: -23.954532, lng: -46.317014};
            // Styles a map in night mode.
            var map = new google.maps.Map(document.getElementById('map'), {
                center: myLatLng,
                zoom: 12,
                styles: [
                    {elementType: 'geometry', stylers: [{color: '#242f3e'}]},
                    {elementType: 'labels.text.stroke', stylers: [{color: '#242f3e'}]},
                    {elementType: 'labels.text.fill', stylers: [{color: '#fed45c'}]},
                  {
                    featureType: "poi",
                    elementType: "labels",
                    stylers: [
                      { visibility: "off" }
                    ]
                  },
                    {
                        featureType: 'road',
                        elementType: 'geometry',
                        stylers: [{color: '#38414e'}]
                    },
                    {
                        featureType: 'road',
                        elementType: 'geometry.stroke',
                        stylers: [{color: '#212a37'}]
                    },
                    {
                        featureType: 'road',
                        elementType: 'labels.text.fill',
                        stylers: [{color: '#000000'}]
                    },
                    {
                        featureType: 'road.highway',
                        elementType: 'geometry',
                        stylers: [{color: '#746855'}]
                    },
                    {
                        featureType: 'road.highway',
                        elementType: 'geometry.stroke',
                        stylers: [{color: '#1f2835'}]
                    },
                    {
                        featureType: 'road.highway',
                        elementType: 'labels.text.fill',
                        stylers: [{color: '#f3d19c'}]
                    },
                    {
                        featureType: 'transit',
                        elementType: 'geometry',
                        stylers: [{color: '#2f3948'}]
                    },
                    {
                        featureType: 'transit.station',
                        elementType: 'labels.text.fill',
                        stylers: [{color: '#fed45c'}]
                    },
                    {
                        featureType: 'water',
                        elementType: 'geometry',
                        stylers: [{color: '#17263c'}]
                    },
                    {
                        featureType: 'water',
                        elementType: 'labels.text.fill',
                        stylers: [{color: '#515c6d'}]
                    },
                    {
                        featureType: 'water',
                        elementType: 'labels.text.stroke',
                        stylers: [{color: '#17263c'}]
                    }
                ]
            });
            var marker = new google.maps.Marker({
                position: myLatLng,
                map: map,
                title: 'Cortes & CIA'
            });
        }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCoBpm-VS2LK1hsgTXrnwu2gGc6dC8P7cA&callback=initMap" async="" defer=""></script>
    @push('scripts')
        <script defer>
            $('#form-contato').on('submit', function (e) {
                e.preventDefault();
                $(this).parent().find('.main').append('<p class="text-center">E-MAIL ENVIADO</p>');
                $(this).hide();
                let nome = document.querySelector('#nome').value;
                let email = document.querySelector('#email').value;
                let mensagem = document.querySelector('#mensagem').value;
                console.log(nome, email, mensagem);
                $.post( "/", {"_token": '{{ csrf_token() }}',nome, email, mensagem } ).success(data => console.log(data));
            });
        </script>
    @endpush
@stop