@extends('layouts.app')
@section('content')

<section class="conteudo-internas">
    <div class="centraliza">
      <!-- <h1 class="display-4">EM BREVE</h1>
-->
       <div class="conteudo-esquerda">
          <h1 class="titulo-pagina">
            Como Chegar
          </h1>

          <article class="info-evento">
            <img src="assets/img/icon-pin.png" alt="">
            <div class="txt-info-evento">
              <strong class="tema-programacao">Local de Realização do Evento:</strong>
              <p>Núcleo Urbano de Carajás, Parauapebas-Pará, Brasil<br>
                 <!-- <br>(82) 3296-3000</p> -->
            </div>
          </article>

          <article class="info-evento">
            <img src="assets/img/icon-calendar.png" alt="">
            <div class="txt-info-evento">
              <strong class="tema-programacao">Data de Realização do Evento:</strong>
              <p>19 a 21 de maio 2022</p>
            </div>
          </article>

            <hr>
<!-- 
            <strong class="titulo-borda-simples">Defina a melhor rota</strong>

            <section class="borda-simples">

              <div  class="form-sua-localizacao">
                <label for="sua-localizacao">Sua Localização:</label>
                <input type="text" class="input-sua-localizacao" id="address" value="">
                <input id="submit" type="button" class="envia-rota" value="Traçar rota">
              </div>

              <div id="mapa" class="mapa">
              </div>

              </section> -->

              <strong class="titulo-borda-simples">Aeroportos mais próximos </strong>

              <section class="borda-simples borda-simples-espacamento">
                <p>Aeroporto de Parauapebas <br>
                  - Sigla (cks) <br>
                  - Distância do centro da cidade: 15 km  <br>
                  - Operando com companhias azul e gol</p>

                <p>Marabá <br>
                  - Distância de Parauapebas: 170 km  <br>
                  - Operando com companhia azul, gol e latam</p>
             
              <strong>Todos os voos diários</strong>
              </section>

              <!--<strong class="titulo-borda-simples">Transporte para Capitólio</strong>

              <section class="borda-simples borda-simples-espacamento">
                <div class="">
                  <p>Os participantes que chegarem pelo Aeroporto Internacional de Belo Horizonte (Confins), poderão utilizar para deslocamento até Capitólio/MG, as seguintes opções: </p>
                  <strong>Embarque: Aeroporto de Confins ao Terminal Rodoviário</strong>
                  <ul style="list-style-type: square; padding-left: 40px;">
                    <li>Por meio dos serviços de aplicativos transportes (Uber, Cabify, 99...)</li>
                    <li>Linha convencional de ônibus pela empresa UNIR. Os bilhetes devem ser retirados no guichê do terminal 01 do aeroporto. Dúvidas poderão ser esclarecidas por meio do telefone (31)3224-1002.</li>
                  </ul>
                </div>
              <br/>
                <div class="">
                  <strong >Embarque: Terminal Rodoviário à Capitólio/MG</strong>
                  <p>A compra dos bilhetes deve ser realizada previamente por meio do site da Viação Gardênia (https://expressogardenia.com.br). A empresa disponibiliza três horários (durante a semana) diferentes, sendo:  </p>
                  <ul style="list-style-type: square; padding-left: 40px;">
                    <li><strong>Manhã</strong> 	07:00h > 11:05h</li>
                    <li><strong>Tarde</strong> 	18:30h > 22:35h</li>
                    <li><strong>Noite </strong>	22:00h > 01:55h+¹</li>
                  </ul>
                </div>

              </section>-->




        <!-- Em Construção -->
        </div> <!-- final conteudo-esquerda -->

        <aside class="conteudo-direita">
            @include('layouts.conteudo-direita')
        </aside>

    </div> <!-- final centraliza -->

</section>

@endsection

@push('scripts')
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD0u7npnZ1OEqYaNIHlYosS9fflWHo5fv0&libraries=places&callback=initMap" async defer></script>
<script>

    var map;
    var bounds;
    var coordenadas;
    var geocoder;
    var input = document.getElementById('address');
    var locEvento = 'Salinas All Inclusive Resort';
    var directionsService;

    function initMap() {

        bounds = new google.maps.LatLngBounds();
        map = new google.maps.Map(document.getElementById('mapa'), {
            maxZoom: 14
        });

        directionsService = new google.maps.DirectionsService();
        var autocomplete = new google.maps.places.Autocomplete(input);

        geocoder = new google.maps.Geocoder();
        findLocation(locEvento, geocoder);

    }

    function geocodeAddress(myLatLng) {

        locEvento = myLatLng;
        var marker = new google.maps.Marker({
          position: myLatLng,
          map: map,
          title: 'Hello World!'
        });

        bounds.extend(myLatLng);
        map.fitBounds(bounds);
    }

    function findLocation(address, geocoder) {

        geocoder.geocode({
            'address': address
        }, function(results, status, callback) {
            if (status === 'OK') {
                geocodeAddress(results[0].geometry.location);
            } else {
                alert('Localização não encontrada.')
            }
        });

    }

    function reloadMap() {

        $('#mapa').html('');
        // initMap();
        map = new google.maps.Map(document.getElementById('mapa'), {});

        var directionsDisplay = new google.maps.DirectionsRenderer();
        var request = {
            origin: $("#address").val(),
            destination: locEvento,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
        };

        directionsService.route(request, function(response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
                directionsDisplay.setMap(map);
            }
        });
    }

    $('#submit').on('click', function(){
        reloadMap();
        // findLocation($('#address').val(), geocoder);
    });

    </script>
@endpush