@extends('layouts.template')

@section('title')
| Trouver une boulangerie-Pâtisserie
@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')

<main role="main">
  <section class="page-static">
    <div class="container baseline">
	  <div class="row">
		<div class="col-md-10 col-md-offset-2">
			<h1>Trouver une boulangerie-Pâtisserie</h1>
			<ul class="ariane">
			  <li><a href="{{ url('/') }}">Accueil</a></li>
			  <li>Trouver une boulangerie-Pâtisserie</li>
			</ul>
		</div>
	  </div>
    </div>
    <div class="search">
	  <div id="map" class="googlemap-module"></div>
	  <div class="container">
		<form method="get" action="{{ url('trouver-une-boulangerie-patisserie') }}">
		  <div class="row">
			<div class="col-sm-5">
			  <input type="text" placeholder="Nom de l'établissement" value="{{ Request::input('name') }}" name="name" class="form-control">
			</div>
			<div class="col-sm-3">
			  <input type="text" placeholder="Code postal" value="{{ Request::input('zip') }}" name="zip" class="form-control">
			</div>
			<div class="col-sm-2 col-xs-6">
			  <button type="submit" class="btn btn-baker btn-block">Chercher</button>
			</div>
			<div class="col-sm-2 col-xs-6">
			  <a href="{{ url('trouver-une-boulangerie-patisserie') }}" class="btn btn-baker-enabled btn-block">Réinitialiser</a>
			</div>
		  </div>
		</form>
	  </div>
    </div>
    <div class="container">
      <div class="row">
        <div class="col-md-4">
			<div class="shop-explain">
				<p>Les Maîtres Boulangers-Pâtissiers sont encore plusieurs centaines à afficher sur leur vitrine le logo qui les identifie. Il y a certainement un Maître Boulanger-Pâtissier près de chez vous !</p>
				<p>Entrez sur cette page le nom d'établissement ou votre code postal pour obtenir la liste des Maîtres Boulangers-Pâtissiers de votre région.</p>
			</div>
        </div>
        <div class="col-md-8">
		  <div class="row">
		  	<div class="col-xs-12 shop-intro"><h3>Liste des résultats</h3></div>
		  				  @foreach($shops as $shop)
							
				@if( $var !== strtoupper(substr($shop->name, 0, 1)) )
								<div class="col-xs-12 lettersep">			
					<div>
						<span>{{ $var }}</span>
					</div>
				</div>
				@endif

		        <div class="col-sm-6">
				  <article class="shops">		  
				    <h2>{{ $shop->name }}</h2>
				    <div class="shops-content">
					  <p>{{ $shop->street }}<br>
					  {{ $shop->zip }} {{ $shop->city }}</p>		  
					  <p>Tél. : {{ $shop->phone }}</p>
					  <div class="text-right">
						<a class="shops-link" href="{{ url('/') }}/trouver-une-boulangerie-patisserie/{{ $shop->friendlyurl }}">Lire Plus ></a>
					  </div>
				    </div>
				  </article>
				</div>
			  @endforeach
			  @if( count($shops) == 0 )
				<div class="col-sm-12">
					<div class="alert alert-danger">
						Il n'y a pas de boulangerie-pâtisserie à cette localité
					</div>
				</div>
			  @endif
		  </div>
        </div>
	  </div>	  
    </div>
  </section>
</main>

@endsection

@section('javascript')
<script async defer src="https://maps.googleapis.com/maps/api/js?key={{ config('googlemaps.key') }}&callback=initMap"></script>
<script type="text/javascript">
function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 12,
      scrollwheel: false,
      center: {lat: 50.4673883, lng: 4.871985399999971}
    });

    
    var locations = [
    @foreach($shops as $shop)
    	@if( $shop->latitude != '' && $shop->longitude != '' )
    	["{{ $shop->name }}", "{{ url('/') }}/trouver-une-boulangerie-patisserie/{{ $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"><strong>' + locations[i][0] + '</strong><br><a href="'+ locations[i][1] +'"> Détails > </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( Request::input('zip') == '' && Request::input('name') == '' )
	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.
  }
@else
	map.setZoom(8);
	/*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(map.getZoom()-2); //remove one zoom level to ensure no marker is on the edge.*/
@endif
}
</script>

@endsection