@extends('layouts.app')
    
@section('title', 'Retailers | Ana Sofia & Quince Royale')

@section('content')
    
    @if(!@$hide_search)


<h1 class="text-center" style="margin-bottom: 30px">Retailers</h1>
    
<p>Our dresses are sold by the finest boutiques throughout the United States &amp; Canada. Use our retailer locator to find a salon in your area for a highly personalized shopping experience.</p>
    @endif

    <div class="row">
        <div class="{{ (!empty($retailers)) ? 'col-sm-5' : 'col-sm-6 col-sm-offset-3' }}">
            

            <form method="get" id="location-search">

                <input type="hidden" name="lat" value="{{ $lat or null }}">
                <input type="hidden" name="lng" value="{{ $lng or null }}">
                <input type="hidden" name="place_id" value="{{ $place_id or null }}">
                <input type="hidden" name="location_name" value="{{ $location_name or null }}">

                <input type="hidden" name="type" value="{{ $type or null }}">
                <input type="hidden" name="state" value="{{ $state or null }}">
                
                <div class="form-group">
                    
                    <label class="control-label" style="margin-right: 20px">Choose a Line:</label>
                    
                    <div class="visible-xs-block"></div>
                    
                    <label class="radio-inline">
                        <input type="radio" name="line_id" value="1" class="required" {{ $line_id == '1' ? 'checked="checked"' : null }}> Ana Sofia
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="line_id" value="2" class="required" {{ $line_id == '2' ? 'checked="checked"' : null }}> Quince Royale
                    </label>
                    
                </div>
            
                <div class="form-group">

                    <input type="text" name="location" class="form-control {{ @$hide_search ? 'hidden' : null }}" data-placeholder="Enter a location&hellip;" value="{{ $location_name or null }}">

                </div>

            </form>

            @forelse ($retailers as $retailer)
            
                <div class="media retailer-item {{ $retailer->is_premier ? 'premier-retailer' : null }}" id="retailer{{ $retailer->id }}">
                    <div class="media-left">
                        <i class="fa fa-map-marker fa-2x media-object"></i>
                    </div>
                    <div class="media-body">
                        
                        @if($retailer->is_premier)
                            <div class="pull-right hidden-sm hidden-md">
                                <span class="label label-primary">
                                    <i class="fa fa-star"></i>
                                    Premier Retailer
                                </span>
                            </div>
                        @endif

                        <address class="nbm">
                            <h5 class="media-heading">
                                <a href="/retailers/{{ $retailer->id }}">{{ $retailer->name }}</a>
                                @if(!@empty($retailer->distance) && $type != 'state')
                                <small>{{ round($retailer->distance, 2) }} miles</small>
                                @endif
                            </h5>
                            
                            @if($retailer->is_premier)
                                <div class="hidden-xs hidden-lg">
                                    <span class="label label-primary">
                                        <i class="fa fa-star"></i>
                                        Premier Retailer
                                    </span>
                                </div>
                            @endif
                            
                            {{ $retailer->address }}<br>
                            @if(!@empty($retailer->address2))
                            {{ $retailer->address2 }}<br>
                            @endif
                            {{ $retailer->city }}, {{ $retailer->state }} {{ $retailer->zip }}<br>
                            <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>
                            @if(!@empty($retailer->website))
                            <a href="{{{ $retailer->website }}}" target="_blank">View website</a><br>
                            @endif
                            <a href="#" target="_blank">Get directions</a>
                        </address>
                    </div>
                </div>
            
            @empty
            
                @if(!empty($location))
                    <p>Sorry, we couldn't find any retailers in that area. Please search again.</p>
                @endif
                
            @endforelse

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

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

            </div>
        @endif
        

    </div>
    
    @if(isset($online_retailers) && !$online_retailers->isEmpty())
        
        <hr>
        
        <h3>Online Retailers</h3>
        
        <div class="row">
            @foreach($online_retailers as $retailer)
            
            <div class="col-sm-3">
                <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->website))
                                <a href="{{{ $retailer->website }}}" target="_blank">View website</a><br>
                            @endif
                        </address>
                    </div>
                </div>
            </div>
            
            @endforeach
            
        </div>
        
    @endif
    
@endsection
    
    

@push('css')
    
    <style>

    #map {
        height: 400px;
    }

    </style>
    
@endpush
    



    
    @push('scripts')

<script>

$('input[name="location"]').placecomplete({
    requestParams: {
        types: ['(regions)']
        // componentRestrictions: {country: ['us']}
    }
});

$('input[name="location"]').on({
    "placecomplete:selected": function(evt, place) {
        
        console.log(place);
        
        if (place.types[0] === 'administrative_area_level_1' && place.address_components[0].short_name) {
            $('[name="type"]').val('state');
            $('[name="state"]').val(place.address_components[0].short_name);
        } else {
            $('[name="type"]').val(null);
            $('[name="state"]').val(null);
        }

        $('[name="location_name"]').val(place.display_text);
        $('[name="place_id"]').val(place.place_id);
        $('[name="lat"]').val(place.geometry.location.lat());
        $('[name="lng"]').val(place.geometry.location.lng());

        $('#location-search').submit();

    }
});

$('input[name="location"]').on({
    "placecomplete:cleared": function(evt) {
        $('[name="type"]').val(null);
        $('[name="state"]').val(null);
        $('[name="location_name"]').val(null);
        $('[name="place_id"]').val(null);
        $('[name="lat"]').val(null);
        $('[name="lng"]').val(null);
    }
});

$('[name="line_id"]').change(function () {
    
    if ($('input[name="location"]').val()) {
    $('#location-search').submit();
    }
});

var map;

function initMap() {

    map = new google.maps.Map(document.getElementById('map'), {
        zoom: 8
    });

    var markers = [];

    @if(!$retailers->isEmpty())

        @foreach($retailers as $retailer_key => $retailer)

            markers[{{$retailer_key}}] = new google.maps.Marker({
                position: {lat: {{ $retailer->latitude }}, lng: {{ $retailer->longitude }}},
                map: map,
                animation: google.maps.Animation.DROP,
                title: '{{ $retailer->name }}'
            });

            markers[{{$retailer_key}}].addListener('click', function() {
                $('.retailer-item').removeClass('highlighted-div');
                $('#retailer{{ $retailer->id }}').addClass('highlighted-div');
            });

        @endforeach

        @if(!@empty($lat) && !@empty($lng))
            
            markers[{{$retailer_key++}}] = new google.maps.Marker({
                position: {lat: {{ $lat }}, lng: {{ $lng }}},
                map: map,
                animation: google.maps.Animation.DROP,
                title: 'Your location',
                icon: 'https://maps.google.com/mapfiles/ms/icons/blue.png'
            });
            
        @endif

    @endif

    var bounds = new google.maps.LatLngBounds();
    
    for (var i = 0; i < markers.length; i++) {
        bounds.extend(markers[i].getPosition());
    }
    map.fitBounds(bounds);

}

// 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>

@endpush