@extends('layouts.template')

@section('title')
| Accueil
@endsection

@section('share')

@if( $page && $page->meta_desc != '' )  
  <meta property="og:title" content="{{ $page->meta_title }}" />
@endif
@if( $page && $page->meta_desc != '' )
  <meta name="description" content="{{ strip_tags($page->meta_desc) }}">
  <meta property="og:description" content="{{ strip_tags($page->meta_desc) }}" />
@endif
@if( $page && $page->meta_img != '' )
  <meta property="og:image" content="{{url('/')}}/{{config('imagespath.path')}}/{{$page->meta_img}}" />
@endif
<meta property="og:url" content="{{ url( $page->friendlyurl ) }}" />

@endsection

@section('content')

<!--section class="homeslider" style="display: none;">
 <div id="diff-slider">
    <div class="plane">
      <img id="img" src="{{ asset("/img/illu-home.jpg") }}" alt="Concours" alt="Concours" style="width: 100%; height: auto;">      
      <div class="home-baseline" style="left:0; right:auto;">
        GAGNE DES<br>PLACES POUR<br>TON FESTIVAL PRéFéRé,<br>BABY!<br><br>
        <span>BJ Scott</span>
      </div>
    </div>
    <div class="plane">
      <div class="embed-responsive embed-responsive-16by9">
        <video class="masthead-video" id="video" loop autoplay poster="{{ asset("/video/apaq-w.png") }}">
          <source src="{{ asset("/video/apaq-w.mp4") }}" type="video/mp4">
          <source src="{{ asset("/video/apaq-w.webm") }}" type="video/webm">
          <source src="{{ asset("/video/apaq-w.ogv") }}" type="video/ogg">
        </video> 
      </div>  
      <div class="video-overlay"></div>
    </div>
 </div>
</section-->
<div style="position:relative">
  <img src="{{ asset("/img/illu1-home-2017.jpg") }}" alt="Concours" alt="APAQ-W" style="width: 100%; height: auto;">
  <!--div class="home-baseline">
    GAGNE DES<br>PLACES POUR<br>TON FESTIVAL PRéFéRé,<br>BABY!<br><br>
    <span>BJ Scott</span>
  </div-->
</div>
<!--div style="position:relative">
  <div class="embed-responsive embed-responsive-16by9">
    <video class="masthead-video" id="video" loop autoplay poster="{{ asset("/video/apaq-w.png") }}">
      <source src="{{ asset("/video/apaq-w.mp4") }}" type="video/mp4">
      <source src="{{ asset("/video/apaq-w.webm") }}" type="video/webm">
      <source src="{{ asset("/video/apaq-w.ogv") }}" type="video/ogg">
    </video> 
  </div>  
</div-->


<main role="main">

 <section class="homeintro homesec">
    <div class="container">
       
       <!--h2>{{ $page->title }}</h2>
       <p>{!! $page->content !!}</p>
       <a class="btn btn-baker" href="{{ url('savoir-faire') }}">Découvrez notre savoir-faire</a-->

       <h2>LES RECETTES COUPS DE CŒUR DE GERALD WATELET</h2>
       <p>Découvrez parmi nos délicieuses recettes et spécialités, les recettes coup de cœur de Gerald Watelet, ambassadeur de l’APAQ-W et amoureux du terroir wallon&nbsp;!<br>
        Au menu : <strong>entrées, plats et desserts inédits et surprenants</strong> autour des délicieux produits de nos <strong>Maîtres Boulangers-Pâtissiers</strong>.</p>
       <a class="btn btn-baker" href="{{ url('recettes') }}">Découvrez-les</a>

    </div>
 </section>

 <!--section class="home-cta homesec">
    <div class="container">
       <div class="row">
          <div class="col-sm-6">
             <article class="home-contest">
                <h2>Concours</h2>
                <a href="{{ url('concours') }}"><img src="{{ asset("/img/contest3.png") }}" alt="Concours" alt="Concours"></a>                
             </article>
          </div>
          <div class="col-sm-6">
             <article class="home-map">
                <h2>trouver un Maître Boulanger-Pâtissier</h2>
                <div id="map" class="googlemap-module">
                   
                </div>
                <div id="floating-panel">
                   <input id="address" type="text" value="" placeholder="Entrez votre code postal">
                   <input id="submit" class="btn btn-baker btn-s" type="button" value="Chercher">
                </div>

             </article>
          </div>
       </div>
    </div>
 </section-->

 <section class="home-bottom homesec">
    <div class="container">
       <div class="row">
          <div class="col-sm-6">
             <h2>Dernières recettes</h2>
             <div class="slickrecipe">
               @foreach($recipes as $recipe)
                    
                    <div>
                       <article class="last-recipe">
                          <header>
                             <div class="recipe-thumb">
                                <a href="{{ url('recettes/' . $recipe->friendlyurl ) }}"><img src="{{url('/')}}/{{config('imagespath.recipe_path')}}/{{$recipe->illustration}}" alt="Recette title"></a>
                             </div>
                             <h3>{{ $recipe->title }}</h3>
                          </header>
                          <div class="recipe-excerpt">
                             <p>{!! str_limit( strip_tags($recipe->content), 400, '...') !!}</p>
                             <a href="{{ url('recettes/' . $recipe->friendlyurl ) }}"> Lire plus > </a>
                          </div>
                       </article>
                    </div>

                @endforeach

             </div>
          </div>
          <div class="col-sm-6">
            <h2>Le Savoir-faire au quotidien</h2>
            <article class="last-recipe">
              <header>
                 <div class="recipe-thumb" style="margin-right: 15px;">
                  <div class="embed-responsive embed-responsive-16by9">
                    <video class="masthead-video" id="video" loop autoplay poster="{{ asset("/video/apaq-w.png") }}">
                      <source src="{{ asset("/video/apaq-w.mp4") }}" type="video/mp4">
                      <source src="{{ asset("/video/apaq-w.webm") }}" type="video/webm">
                      <source src="{{ asset("/video/apaq-w.ogv") }}" type="video/ogg">
                    </video> 
                  </div>  
                 </div>
                 <h3>{{ $page->title }}</h3>
              </header>
              <div class="recipe-excerpt">
                 <p>{!! str_limit( strip_tags($page->content), 400, '...') !!}</p>
                 <a href="{{ url('savoir-faire') }}"> Lire plus > </a>
              </div>
           </article>
          </div>
       </div>
       <div class="row">
          <div class="col-sm-6">
             <article class="home-map">
                <h2>trouver un Maître Boulanger-Pâtissier</h2>
                <div id="map" class="googlemap-module">
                   
                </div>
                <div id="floating-panel">
                   <input id="address" type="text" value="" placeholder="Entrez votre code postal">
                   <input id="submit" class="btn btn-baker btn-s" type="button" value="Chercher">
                </div>

             </article>
          </div>
          <div class="col-sm-6">
            <h2>Facebook</h2>
            <div id="fb-root"></div>
            <script>(function(d, s, id) {
              var js, fjs = d.getElementsByTagName(s)[0];
              if (d.getElementById(id)) return;
              js = d.createElement(s); js.id = id;
              js.src = "//connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v2.10&appId=1265684636824285";
              fjs.parentNode.insertBefore(js, fjs);
            }(document, 'script', 'facebook-jssdk'));</script>
            <div class="fb-page" data-href="https://www.facebook.com/maitreboulangerpatissier/" data-tabs="timeline" data-height="318" data-width="555" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/maitreboulangerpatissier/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/maitreboulangerpatissier/">Maître Boulanger-Pâtissier</a></blockquote></div>
          </div>
       </div>
    </div>
 </section>

</main>

@endsection

@section('javascript')
<style type="text/css">
  .twentytwenty-overlay { display: none !important; }
  .twentytwenty-wrapper { overflow: hidden; }
  .video-overlay { background: rgba(0,0,0,.35); position:absolute; top: 0; left: 0; right: 0; bottom: 0 }
</style>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA92BmCj8_t04H-Mlz84Ijb7HLyvAj5iV4&callback=initMap"></script>
<script type="text/javascript">
function initMap() {
    var geocoder = new google.maps.Geocoder;
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 12,
      center: {lat: 50.4673883, lng: 4.871985399999971}
    });

    document.getElementById('submit').addEventListener('click', function() {
      geocodeAddress(geocoder, map);
    });


    var locations = [
    @foreach($shops as $shop)
      @if( $shop->latitude != '' && $shop->longitude != '' )
        ["{{ $shop->name }}", "{{ $shop->friendlyurl }}", new google.maps.LatLng({{ $shop->latitude }},{{ $shop->longitude }})],    
      @endif
    @endforeach
    ];


    
  function initMarkers(map, markerData) {

      var newMarkers = [],
          marker,
          contentString;

      var infoWindow = new google.maps.InfoWindow(), marker, i;

      for(var i=0; i<markerData.length; i++) {

          var image = '{{url('/')}}/img/icon_map.png';
          marker = new google.maps.Marker({
              map: map,
              position: markerData[i][2],
              icon: image
          }),

          newMarkers.push(marker);                      
          google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infoWindow.setContent(
                   '<div class="content">' + locations[i][0] + ' <br> <a href="{{ url('/') }}/trouver-une-boulangerie-patisserie/'+ locations[i][1] +'"> Lire plus > </a></div>'
                );
                infoWindow.open(map, marker);
            }
          })(marker, i));

      }
      
      return newMarkers;
  }

//here the call to initMarkers() is made with the necessary data for each marker.  All markers are then returned as an array into the markers variable

markers = initMarkers(map, locations);


  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var pos = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };

      //infoWindow.setPosition(pos);
      //infoWindow.setContent('Location found.');
      map.setCenter(pos);
      map.setZoom(12); //remove one zoom level to ensure no marker is on the edge.
    }, function() {
      //handleLocationError(true, infoWindow, map.getCenter());
    });
  }else{
    var bounds = new google.maps.LatLngBounds();
    for (var i = 0; i < markers.length; i++) {
     bounds.extend(markers[i].getPosition());
    }
    map.setCenter(bounds.getCenter()); //center the map to the geometric center of all markers
    map.fitBounds(bounds);
    map.setZoom(5); //remove one zoom level to ensure no marker is on the edge.
  }



}


function geocodeAddress(geocoder, resultsMap) {
  var address = document.getElementById('address').value;
  geocoder.geocode({
    'address': address,
    componentRestrictions: {
      country: 'BE'
    }
  }, function(results, status) {
    if (status === google.maps.GeocoderStatus.OK) {

      var zipcode;
      for (var ii = 0; ii < results[0].address_components.length; ii++){        
        var types = results[0].address_components[ii].types.join(",");
        /*if (types == "street_number"){
          addr.street_number = results[0].address_components[ii].long_name;
        }
        if (types == "route" || types == "point_of_interest,establishment"){
          addr.route = results[0].address_components[ii].long_name;
        }
        if (types == "sublocality,political" || types == "locality,political" || types == "neighborhood,political" || types == "administrative_area_level_3,political"){
          addr.city = (city == '' || types == "locality,political") ? results[0].address_components[ii].long_name : city;
        }
        if (types == "administrative_area_level_1,political"){
          addr.state = results[0].address_components[ii].short_name;
        }*/
        if (types == "postal_code" || types == "postal_code_prefix,postal_code"){
          //addr.zipcode = results[0].address_components[ii].long_name;
          zipcode = results[0].address_components[ii].long_name;
        }
        /*if (types == "country,political"){
          addr.country = results[0].address_components[ii].long_name;
        }*/
      }

      /*var address = results[0].address_components;
      console.log( address );
      alert(zipcode);*/
      if( zipcode ){
        window.location = '{{ url('/') }}/trouver-une-boulangerie-patisserie/?name=&zip='+zipcode;
      }else{
        window.location = '{{ url('/') }}/trouver-une-boulangerie-patisserie/';
      }
      
      /*resultsMap.setCenter(results[0].geometry.location);
      resultsMap.setZoom(10);      */
    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });  
}
</script>

@endsection