@extends('layouts.app')
    
@section('title', $retailer->name  . ' | Zoey Grey')

@section('content')

    <div class="row">
        <div class="col-sm-5">
            
            @if(!@empty($retailer))
            
                <div class="media retailer-item" id="retailer{{ $retailer->id }}">
                    <div class="media-left">
                        <i class="fa fa-map-marker fa-2x media-object"></i>
                    </div>
                    <div class="media-body">

                        <address class="nbm">
                            <h5 class="media-heading">{{ $retailer->name }}</h5>
                            @if(!@empty($retailer->address))
                                {{ $retailer->address }}<br>
                            @endif
                            @if(!@empty($retailer->address2))
                            {{ $retailer->address2 }}<br>
                            @endif
                            @if(!@empty($retailer->city))
                            {{ $retailer->city }}, {{ $retailer->state }} {{ $retailer->zip }}<br>
                            @endif
                            @if(!@empty($retailer->phone))
                                <abbr title="Phone">P:</abbr> <a href="tel:{{{ $retailer->phone }}}" class="visible-xs-inline">{{ $retailer->phone }}</a> <span class="hidden-xs">{{ $retailer->phone }}</span><br>
                            @endif
                            @if(!@empty($retailer->website))
                                <a href="{{{ $retailer->website }}}" target="_blank">View website</a><br>
                            @endif
                            @if(!@empty($retailer->city))
                            <a href="#" target="_blank">Get directions</a>
                            @endif
                        </address>
                    </div>
                </div>
            
            @else
            
                <p>Sorry, we couldn't find this retailer. Please click <a href="/retailers">here</a> to search for a Zoey Grey retailer near you.</p>
                    
            @endif

        </div>
        

        @if(!@empty($retailer->city))
        
        <div class="col-sm-6 col-sm-offset-1">

            <div class="thumbnail">
                <div id="map"></div>
            </div>

        </div>
        @endif
        
    </div>
    
@endsection
    
    

@push('css')
    
    <style>

    #map {
        height: 400px;
    }

    </style>
    
@endpush
    



    
@push('scripts')
    
        <script>

        var map;
    
          // This example displays an address form, using the autocomplete feature
          // of the Google Places API to help users fill in the information.

          // This example requires the Places library. Include the libraries=places
          // parameter when you first load the API. For example:
          // <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">

          var placeSearch, autocomplete;

          function initMap() {
              
              @if(!empty($retailer->latitude) && !empty($retailer->longitude))
                  map = new google.maps.Map(document.getElementById('map'), {
                      center: {lat: {{ $retailer->latitude }}, lng: {{ $retailer->longitude }}},
                      zoom: 8
                  });
                  
                  @if(!@empty($retailer))
    
                      new google.maps.Marker({
                          position: {lat: {{ $retailer->latitude }}, lng: {{ $retailer->longitude }}},
                          map: map,
                          animation: google.maps.Animation.DROP,
                          title: '{{ $retailer->name }}'
                      }).addListener('click', function() {
                          $('.retailer-item').removeClass('highlighted-div');
                          $('#retailer{{ $retailer->id }}').addClass('highlighted-div');
                          // this.setAnimation(google.maps.Animation.BOUNCE);
                      });
                      
                  @endif
                  
                  
              @endif
              
            // Create the autocomplete object, restricting the search to geographical
            // location types.
            autocomplete = new google.maps.places.Autocomplete(
                /** @type {!HTMLInputElement} */(document.getElementById('autocomplete')),
                {
                    types: ['(regions)']
                    // componentRestrictions: {country: ['us']}
                }
            );

            // When the user selects an address from the dropdown, populate the address
            // fields in the form.
            autocomplete.addListener('place_changed', fillInAddress);
          }

          function fillInAddress() {
            // Get the place details from the autocomplete object.
            var place = autocomplete.getPlace();
            
            $('[name="place_id"]').val(place.place_id);
            $('[name="lat"]').val(place.geometry.location.lat());
            $('[name="lng"]').val(place.geometry.location.lng());
            
          }

          // Bias the autocomplete object to the user's geographical location,
          // as supplied by the browser's 'navigator.geolocation' object.
          function geolocate() {
            if (navigator.geolocation) {
              navigator.geolocation.getCurrentPosition(function(position) {
                var geolocation = {
                  lat: position.coords.latitude,
                  lng: position.coords.longitude
                };
                var circle = new google.maps.Circle({
                  center: geolocation,
                  radius: position.coords.accuracy
                });
                autocomplete.setBounds(circle.getBounds());
              });
            }
          }
        </script>
          
        <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAaJYtG-IYCChkwq3xVNtvZMX78Ekl6ooY&amp;libraries=places&amp;callback=initMap" async defer></script>
    
    
@endpush