@section('custom-styles')
<style>
    a:focus {
        color: #23527c !important;
    }
</style>
@endsection

@section('custom-scripts')
<script src="https://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCduabSa8c4ZCAmhvExm17Jay-15s5zRiU&callback=initMap&v=weekly"
    defer></script>

<script>
    function initMap() {
        $(document).ready(function() {

                @if (request()->has('q'))
                    $("#userLocation").val("{{ request()->get('q') }}");                                        
                    let search_string = $("#userLocation").val();
                    if (search_string !== '' && search_string !== null && search_string !== undefined) {                        
                        loadList();
                    }                    
                @endif

            $(".store-table").hide();
            var markers = [];
            var geocoder = new google.maps.Geocoder();
            var map = new google.maps.Map(document.getElementById("map"), {
                center: {
                    lat: 42.510403717049684,
                    lng: -96.47690867371583
                },
                zoom: 4,
            });

            var currentLocation;
            let mockLocation = {
                lat: 29.652062006367164,
                lng: -82.33930435436633
            };
            if (false) {
                currentLocation = mockLocation;
            } else {
                if (navigator.geolocation) {
                    navigator.geolocation.getCurrentPosition((position) => {
                        currentLocation = {
                            lat: position.coords.latitude,
                            lng: position.coords.longitude
                        };
                    });
                }
            }

            $("#search-button").on('click', function() {
                loadList();
            });

            $("#radius").on('change', function() {
                loadList();
            });

            $("#userLocation").on('keyup', function() {
                loadList();
            });

            $(document).on('click', '.direction-link', function() {
                if ($(this).data('lat') != null && $(this).data('lng')) {
                    openDirection(currentLocation, {
                        lat: $(this).data('lat'),
                        lng: $(this).data('lng')
                    });
                } else {
                    openDirection(currentLocation, $(this).data('address'));
                }
            });

            function loadList(page = 1) {
                $.ajax({
                    type: "GET",
                    url: "{{ route('get_store_list') }}?page=" + page,
                    data: {
                        q: $("#userLocation").val()
                    },
                    dataType: "json",
                    success: function(response) {
                        let records = response.data;

                        // *** comment out below line because set marker is commented  
                        //removeMarkers();

                        $(".store-table").show();
                        $("#store-list").html('');

                        let marker_count = 0;
                        records.forEach(element => {
                            let isLatLngPresent = (element.lat != null && element.lng !=
                                null);

                            $("#store-list").append(`
								<tr id="row_` + element.id + `">
									<td>
										` + (element.business_account_name != null ? element.business_account_name : '') + `
									</td>
									<td>
										` + (element.city != null ? element.city : '') + `
									</td>
									<td>
										` + (element.state != null ? element.state : '') + `
									</td>
									<td>
										` + (element.postal_code != null ? element.postal_code : '') + `
									</td>
									<td>
										` + (element.address != null ? element.address : '') + `
									</td>
									<td>
										` + (element.phone_number != null ? element.phone_number : '') + `
									</td>									
								</tr>`);

                                // removed column of distance 
                                /*
                                <td id="lat_lng_` + element.id + `">
										` + (isLatLngPresent ? getDistance(currentLocation, {
                                lat: element.lat,
                                lng: element.lng
                            }) + ' miles' : '') + `
									</td>
                                */
                            let displayText = '' +
                                '<strong>' +
                                (element.business_account_name != null ? element
                                    .business_account_name : '') +
                                '</strong>' +
                                '<br />' +
                                (element.address != null ? element.address : '') +
                                '<br />' +
                                (element.city != null ? element.city : '') + ', ' + (element
                                    .state != null ? element.state : '') + ' - ' + (element
                                    .postal_code != null ? element.postal_code : '') +
                                '<br />' +
                                'Phone: <a href="tel:' + (element.phone_number != null ?
                                    element.phone_number : '') + '">' + (element
                                    .phone_number != null ? element.phone_number : '') +
                                '<br />' +
                                '<a href="javascript:void(0);" class="direction-link" data-lat="' +
                                element.lat + '" data-lng="' + element.lng +
                                '" data-address="' + (element.address != null ? element
                                    .address : '') + '">Direction</a>';

                            // '<button type="button" class="btn btn-primary btn-sm direction-link" style="margin-top: 8px;" data-lat="' + element.lat + '" data-lng="' + element.lng + '" data-address="' + (element.address != null ? element.address : '') + '">Direction</button>';

                            // *** comment out below lines because set marker api is conflicting 
                            // if(marker_count < 10){
                            //     setMarker({
                            //         'Id': element.id,
                            //         'DisplayText': displayText,
                            //         'LatitudeLongitude': !isLatLngPresent ? null : ((
                            //                 element.lat != null ? element.lat : ''
                            //                 ) + ', ' + (element.lng != null ?
                            //                 element.lng : '')),
                            //         'Address': (element.address != null ? element
                            //             .address : ''),
                            //         'PhoneNumber': (element.phone_number != null ?
                            //             element.phone_number : ''),
                            //         'City': (element.city != null ? element.city : ''),
                            //         'State': (element.state != null ? element.state :
                            //             ''),
                            //         'PostalCode': (element.postal_code != null ? element
                            //             .postal_code : '')
                            //     });
                            // }
                            // marker_count++;                                
                        });

                        setTimeout(() => {
                            if (markers.length > 0) {
                                let _marker = markers[0];
                                map.setZoom(8);
                                map.panTo(_marker.position);
                            }
                        }, 1000);

                        // Handle pagination links
                        $('#pagination-links').html(response.links);
                    }
                });
            }

            function setMarker(location) {
                //console.log("calling set marker", location);

                let infoWindow = new google.maps.InfoWindow();
                if (location["LatitudeLongitude"] == null || location["LatitudeLongitude"] == 'null' ||
                    location["LatitudeLongitude"] == '') {
                    if (location["Address"] != '' || location["City"] != '' || location["PostalCode"] != '') {
                        resolveAddress(location, infoWindow);
                    } else {
                        $("#row_" + location.Id).remove();
                    }
                } else {
                    let latitudeLongitudeStr = location["LatitudeLongitude"].split(",");
                    let lat = parseFloat(latitudeLongitudeStr[0]);
                    let lng = parseFloat(latitudeLongitudeStr[1]);

                    let radius = parseInt($("#radius").val());
                    let distance = getDistance(currentLocation, {
                        lat: lat,
                        lng: lng
                    });
                    if (distance > radius) {
                        $("#row_" + location.Id).remove();
                        return;
                    }
                    $('#lat_lng_' + location.Id).html(getDistance(currentLocation, {
                        lat: lat,
                        lng: lng
                    }) + ' miles');

                    let latitudeLongitude = new google.maps.LatLng(lat, lng);
                    let marker = new google.maps.Marker({
                        position: latitudeLongitude,
                        map: map,
                        draggable: false,
                        html: location["DisplayText"]
                    });
                    markers.push(marker);
                    google.maps.event.addListener(marker, 'click', function(event) {
                        infoWindow.setContent(this.html);
                        infoWindow.setPosition(event.latLng);
                        infoWindow.open(map, this);
                    });
                }
            }

            function removeMarkers() {
                for (let i = 0; i < markers.length; i++) {
                    markers[i].setMap(null);
                }
                markers = [];
            }

            function resolveAddress(location, infoWindow, isRetrying = false) {
                geocoder.geocode({
                    'address': location["Address"]
                }, function(results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        let latLng = {
                            lat: results[0].geometry.location.lat(),
                            lng: results[0].geometry.location.lng()
                        };
                        let radius = parseInt($("#radius").val());
                        let distance = parseInt(getDistance(currentLocation, latLng));
                        if (distance > radius) {
                            $("#row_" + location.Id).remove();
                            return;
                        }
                        $('#lat_lng_' + location.Id).html(getDistance(currentLocation, latLng) +
                            ' miles');

                        let latitudeLongitude = new google.maps.LatLng(latLng.lat, latLng.lng);
                        let marker = new google.maps.Marker({
                            position: latitudeLongitude,
                            map: map,
                            draggable: false,
                            html: location["DisplayText"] + ` - ` + getDistance(
                                currentLocation, {
                                    lat: results[0].geometry.location.lat(),
                                    lng: results[0].geometry.location.lng()
                                }) + ' miles'
                        });
                        markers.push(marker);
                        google.maps.event.addListener(marker, 'click', function(event) {
                            infoWindow.setContent(this.html);
                            infoWindow.setPosition(event.latLng);
                            infoWindow.open(map, this);
                        });
                    } else if (status == google.maps.GeocoderStatus.ZERO_RESULTS) {
                        if (!isRetrying) {
                            location["Address"] = location["Address"] + ' ' + location["City"] + ' ' +
                                location["PostalCode"];
                            resolveAddress(location, infoWindow, true);
                        } else {
                            $("#row_" + location.Id).remove();
                            console.log(status + ' | ' + location['DisplayText'] + ' -- ' + location[
                                'Address'] + ". This address couldn't be found");
                        }
                    } else {
                        $("#row_" + location.Id).remove();
                        console.log(status + ' | ' + location["DisplayText"] + " -- " + location[
                            "Address"] + ". This address couldn't be found");
                    }
                });
            }

            function openDirection(sLocation, dLocation) {
                var url = 'https://www.google.com/maps/dir/?api=1';
                var origin = '&origin=' + sLocation.lat + ',' + sLocation.lng;
                var destination;
                if (typeof dLocation === 'object') {
                    destination = '&destination=' + dLocation.lat + ',' + dLocation.lng;
                } else {
                    destination = '&destination=' + dLocation;
                }
                var newUrl = new URL(url + origin + destination);

                var win = window.open(newUrl, '_blank');
                win.focus();
            }

            function getDistance(cord1, cord2, unit = 'm') {
                if (cord1.lat == cord2.lat && cord1.lng == cord2.lng) {
                    return 0;
                }

                const rad_lat1 = (Math.PI * cord1.lat) / 180;
                const rad_lat2 = (Math.PI * cord2.lat) / 180;

                const theta = cord1.lng - cord2.lng;
                const rad_theta = (Math.PI * theta) / 180;

                let dist = Math.sin(rad_lat1) * Math.sin(rad_lat2) + Math.cos(rad_lat1) * Math.cos(rad_lat2) *
                    Math.cos(rad_theta);

                if (dist > 1) {
                    dist = 1;
                }

                dist = Math.acos(dist);
                dist = (dist * 180) / Math.PI;
                dist = dist * 60 * 1.1515;

                if (unit === 'k') {
                    dist = dist * 1.609344; //convert miles to km
                }

                return dist.toFixed(0);
            }


            // Handle pagination link click event
            $(document).on('click', '#pagination-links a', function(event) {
                event.preventDefault();

                // Get the page number from the pagination link
                let page = $(this).attr('href').split('page=')[1];                

                // Fetch stores for the selected page
                loadList(page);
            });

        });
    }

    window.initMap = initMap;
</script>
@endsection
<x-app-layout>
    <!--======= SUB BANNER =========-->

    <div id="content" class="gs_reveal">
        <section class="services padding-top-150 padding-bottom-80 bg-light-grey">
            <div class="container-fluid">
                <div class="retailer-form">
                    <div class="heading-block margin-bottom-50" aria-label="" role="main">
                        <h6 class="wow animate fadeInRight" data-wow-delay="0.4s">
                            Our
                        </h6>
                        <hr class="wow animate fadeInLeft" data-wow-delay="0.4s" />
                        <h2 class="wow animate fadeInUp" data-wow-delay="0.4s">
                            Retailers
                        </h2>
                    </div>

                    <div id="map" style="height: 700px;"></div>

                    <div class="row">
                        <div class="form-group col-md-9">
                            <label for="userLocation">Search Retailers</label>
                            <input aria-label="input field" type="text" class="form-control" id="userLocation"
                                placeholder="Search retailers by store name, zip code, city, state..." />
                        </div>
                        {{---
                        <div class="form-group mx-sm-3 col-md-3">
                            <label for="radius">Radius</label>
                            <select id="radius" class="form-control">
                                <option value="1">1 Mile</option>
                                <option value="3">3 Miles</option>
                                <option value="5">5 Miles</option>
                                <option value="10">10 Miles</option>
                                <option value="25">25 Miles</option>
                                <option value="50">50 Miles</option>
                                <option value="100">100 Miles</option>
                                <option value="200">200 Miles</option>
                                <option value="500">500 Miles</option>
                                <option value="1000" selected>1000 Miles</option>
                            </select>
                        </div>
                        ---}}
                        <button type="button" id="search-button" class="btn btn-primary col-md-3 mt-2">
                            Search
                        </button>
                    </div>

                    <div class="table-responsive">

                        <table class="table table-primary store-table">
                            <thead>
                                <tr>
                                    <th>Store Name</th>
                                    <th>City</th>
                                    <th>State</th>
                                    <th>Zip code</th>
                                    <th>Address</th>
                                    <th>Phone</th>
                                    <!-- <th>Distance</th> -->
                                </tr>
                            </thead>
                            <tbody id="store-list">
                            </tbody>
                        </table>

                        <div id="pagination-links"></div>
                    </div>
                </div>
            </div>
        </section>
    </div>
    <!-- End Content -->

</x-app-layout>