<?php get_header();
/* Template Name: Template Fale Conosco */
$pageTitle = "Contato";
include('headerInterna.php');
?>
            <?php
query_posts( array( 'post_type' => 'informacoes', 'showposts' => 1 ));
if(have_posts()):
    while (have_posts () ): the_post () ;
    $telefone_para_contato        = get_field('telefone_para_contato');
    $email_para_contato        = get_field('email_para_contato');
    $endereco        = get_field('endereco');
    ?>
<section id='Contact'>
    <div class='container'>
        <h2>Para falar com a IAP, você pode:</h2>
        <p>Telefonar: <strong><?php echo $telefone_para_contato;?></strong></p>
        <p>Mandar e-mail: <strong><?php echo $email_para_contato;?></strong></p>
        <p>Ou preencher o formulário abaixo:</p>

        <form action="/" method='POST' id="FormContato">
            <input type="hidden" id='endereco' name='endereco' value='<?php echo $endereco; ?>'>
            <input type="hidden" id='emailDestinatario' name='emailDestinatario' value='<?php echo $email_para_contato; ?>'>
            <input type="text" name='nome' id='nome' placeholder='Nome' class='input1'>
            <input type="text" name='telefone1'  id='telefone1' placeholder='Telefone 1' class='input2 telefone1'>
            <input type="text" name='cidade' id='cidade' placeholder='cidade' class='input2'>
            <input type="email" name='email' id='email' placeholder='E-mail' class='input1'>
            <input type="text" name='telefone2' id='telefone2'  placeholder='Telefone 2' class='input2 telefone2'>
            <input type="text" name='estado' id='estado' placeholder='estado' class='input2'>
            <textarea name="mensagem" id="mensagem" placeholder='Mensagem'></textarea>
            <button type='submit' id="Enviar">Enviar</button>
        </form>
    </div>

    <div class='Map' id='MapaContato'>

    </div>
</section>


<?php 
endwhile;
endif;
wp_reset_query();
?>
<?php get_footer(); ?>


  <script>
        var endereco = $("#endereco").val();
        endereco = endereco.replace(/<br/g, "");
        endereco = endereco.replace(/>/g, "");

        endereco = endereco.replace(/ /g, "+");
        endereco = endereco.replace(/(\r\n|\n|\r)/gm,"");
        console.log(endereco);
        
        var map;

        
        function initMap() {
            $.getJSON('https://maps.googleapis.com/maps/api/geocode/json?address='+endereco+'&key=AIzaSyBXg2Hjae66gXbtp-kQKOf4j8bET59yoUM&region=GB', function(data) {
                
                var latitude = data.results[0].geometry.location.lat;
                var longitude = data.results[0].geometry.location.lng;
                var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
                
                var myLatLng = {lat: latitude, lng: longitude}; 
                
                map = new google.maps.Map(document.getElementById('MapaContato'), {
                    center: myLatLng,
                    zoom: 15,  
                    styles: [
            {elementType: 'geometry', stylers: [{color: '#081e3d'}]},
            {elementType: 'labels.text.stroke', stylers: [{color: '#081e3d'}]},
            {elementType: 'labels.text.fill', stylers: [{color: '#746855'}]},
            {
              featureType: 'administrative.locality',
              elementType: 'labels.text.fill',
              stylers: [{color: '#d59563'}]
            },
            {
              featureType: 'poi',
              elementType: 'labels.text.fill',
              stylers: [{color: '#d59563'}]
            },
            {
              featureType: 'poi.park',
              elementType: 'geometry',
              stylers: [{color: '#263c3f'}]
            },
            {
              featureType: 'poi.park',
              elementType: 'labels.text.fill',
              stylers: [{color: '#6b9a76'}]
            },
            {
              featureType: 'road',
              elementType: 'geometry',
              stylers: [{color: '#0c2f59'}]
            },
            {
              featureType: 'road',
              elementType: 'geometry.stroke',
              stylers: [{color: '#212a37'}]
            },
            {
              featureType: 'road',
              elementType: 'labels.text.fill',
              stylers: [{color: '#9ca5b3'}]
            },
            {
              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: '#d59563'}]
            },
            {
              featureType: 'water',
              elementType: 'geometry',
              stylers: [{color: '#06234a'}]
            },
            {
              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: 'Hello World!'
                });
            });
        }
        
        </script>
        
        <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBXg2Hjae66gXbtp-kQKOf4j8bET59yoUM&callback=initMap">
        </script>
