{"version":3,"file":"Index-UvKjnddm.js","sources":["../../../resources/js/Composables/useGeolocation.js","../../../resources/js/Components/GoogleMap/Map.vue","../../../resources/js/Pages/Location/Index.vue"],"sourcesContent":["import { onMounted, ref } from 'vue';\n\nexport function useGeolocation() {\n    const defaultLat = 45.50178534043209;\n    const defaultLng = -73.56690611933699;\n    const coordinatesInStorage = localStorage.getItem('coordinates');\n    const parsedCoordinates = JSON.parse(coordinatesInStorage);\n    let errors = null;\n    const coordinates = ref({ lat: parsedCoordinates?.lat, lng: parsedCoordinates?.lng });\n\n    onMounted(() => {\n        geolocate();\n    });\n\n    const geolocate = () => {\n        if ('geolocation' in navigator) {\n            navigator.geolocation.getCurrentPosition(setPosition, showError);\n        } else {\n            errors = 'Geolocation is not supported by this browser.';\n        }\n    };\n\n    const setPosition = (position) => {\n        setCoordinates(position.coords.latitude, position.coords.longitude);\n    };\n\n    const setCoordinates = (latitude, longitude) => {\n        coordinates.value = {\n            lat: latitude,\n            lng: longitude,\n        };\n\n        localStorage.setItem('coordinates', JSON.stringify(coordinates.value));\n\n        if (parsedCoordinates?.lat !== latitude || parsedCoordinates?.lng !== longitude) {\n            document.location.reload(true);\n        }\n    };\n\n    if (coordinatesInStorage === null) {\n        setCoordinates(defaultLat, defaultLng);\n        coordinates.value = {\n            lat: defaultLat,\n            lng: defaultLng,\n        };\n    }\n\n    const showError = (error) => {\n        switch (error.code) {\n            case error.PERMISSION_DENIED:\n                errors = 'User denied the request for Geolocation.';\n                break;\n            case error.POSITION_UNAVAILABLE:\n                errors = 'Location information is unavailable.';\n                break;\n            case error.TIMEOUT:\n                errors = 'The request to get user location timed out.';\n                break;\n            case error.UNKNOWN_ERROR:\n                errors = 'An unknown error occurred.';\n                break;\n        }\n    };\n\n    return {\n        coordinates,\n        errors,\n    };\n}\n","<template>\n    <div ref=\"mapContainer\" class=\"h-full w-full\" />\n</template>\n\n<script setup>\nimport { computed, onMounted, ref } from 'vue';\nimport { Loader } from '@googlemaps/js-api-loader';\nimport googleMaptheme from '@/googleMapTheme';\nimport { useGeolocation } from '@/Composables/useGeolocation';\n\nconst props = defineProps({\n    zoom: {\n        type: [Object, Number],\n        default: 12,\n    },\n    mapTypeId: {\n        type: String,\n        default: 'roadmap',\n        validator: (value) => ['roadmap', 'satellite', 'hybrid', 'terrain'].indexOf(value) > -1,\n    },\n    options: {\n        type: Object,\n        default() {\n            return {};\n        },\n    },\n});\n\nconst { coordinates, errors, isSupported } = useGeolocation();\n\nconst googleMapKey = computed(() => import.meta.env.VITE_GOOGLE_MAP_KEY);\nconst loader = new Loader({ apiKey: googleMapKey.value, libraries: ['places'] });\nconst mapContainer = ref(null);\nlet map = ref(null);\nlet infoWindow = ref(null);\nconst markers = ref([]);\nconst activeLocation = ref(null);\n\nonMounted(async () => {\n    await loader.load();\n    map.value = new google.maps.Map(mapContainer.value, {\n        center: coordinates.value,\n        zoom: props.zoom,\n        mapTypeId: props.mapTypeId,\n        styles: googleMaptheme,\n        mapTypeControl: false,\n        rotateControl: false,\n        scaleControl: false,\n        streetViewControl: false,\n        zoomControl: true,\n        clickableIcons: false,\n        ...props.options,\n    });\n\n    new google.maps.Marker({\n        position: coordinates.value,\n        animation: google.maps.Animation.DROP,\n        map: map.value,\n    });\n});\n\nconst createMarkers = (locations) => {\n    clearMarkers();\n    locations.forEach((location, idx) => {\n        var marker = new google.maps.Marker({\n            position: new google.maps.LatLng(location.latitude, location.longitude),\n            animation: google.maps.Animation.DROP,\n            map: map.value,\n        });\n\n        infoWindow.value = new google.maps.InfoWindow();\n        marker.addListener('click', () => {\n            panMapTo(marker.getPosition());\n            infoWindow.value.setContent(infoWindowContent(location));\n            infoWindow.value.open(map.value, marker);\n            activeLocation.value = idx;\n        });\n\n        // reset active location on info window close\n        google.maps.event.addListener(infoWindow.value, 'closeclick', function () {\n            activeLocation.value = null;\n        });\n\n        markers.value.push(marker);\n    });\n};\n\nconst clearMarkers = () => {\n    for (var i = 0; i < markers.value.length; i++) {\n        markers.value[i].setMap(null);\n    }\n    markers.value = [];\n};\n\nconst infoWindowContent = (location) => {\n    const contentString = `<div class=\"font-sans p-4\">\n        <h3 class=\"text-lg leading-6 font-medium text-primary-500\">${location.name}</h3>\n        <div class=\"flex space-x-1 text-sm ${location.current_state.status}\">\n            <span>${location.current_state.text}</span>\n            <span aria-hidden=\"true\" class=\"text-gray-900\">&middot;</span>\n            <span>${location.current_state.message}</span>\n        </div>\n        <ul class=\"my-2\">\n            <li>${location.full_address_line_1}</li>\n            <li>${location.full_address_line_2}</li>\n        </ul>\n        <a class=\"text-secondary-600\" href=\"tel:+1${location.phone_number}\">${location.phone_number}</a>\n        <div class=\"mt-5 sm:mt-6\">\n            <button onclick=\"navigateTo('${route(\n                'find-us.show',\n                location.slug,\n            )}')\" type=\"button\" class=\"btn-outline-neutral btn-sm w-full\">Store Info</button>\n        </div>\n    </div>`;\n\n    return contentString;\n};\n\nconst panMapTo = (coordinates) => {\n    if (map.value) {\n        map.value.panTo(coordinates);\n        if (window.innerWidth > 1024) {\n            map.value.panBy(-200, 0);\n        } else {\n            map.value.panBy(0, -200);\n        }\n    }\n};\n\nconst triggerMarker = (id) => {\n    google.maps.event.trigger(markers.value[id], 'click');\n};\n\ndefineExpose({\n    triggerMarker,\n    createMarkers,\n    coordinates,\n});\n</script>\n\n<style>\n.gm-style .gm-style-iw-c {\n    padding: 0px !important;\n    max-height: 300px !important;\n    max-width: 300px !important;\n}\n.gm-style .gm-style-iw-d {\n    overflow: initial !important;\n    max-height: 300px !important;\n    max-width: 300px !important;\n}\n.gm-style .gm-style-iw-c button.gm-ui-hover-effect {\n    padding: 10px !important;\n    top: 0px !important;\n    right: 0px !important;\n    width: 40px !important;\n    height: 40px !important;\n}\n.gm-style .gm-style-iw-c button.gm-ui-hover-effect img {\n    width: 20px !important;\n    height: 20px !important;\n    margin: 0px !important;\n}\n</style>\n","<template>\n    <AppLayout :title=\"$t('location.find_us')\">\n        <div class=\"relative h-1/2 w-full lg:h-screen--menu\">\n            <GMap ref=\"map\" />\n\n            <div\n                class=\"overflow-hidden border-b bg-white lg:absolute lg:inset-y-0 lg:left-0 lg:my-10 lg:ml-5 lg:w-1/3 lg:rounded-lg lg:border-none lg:shadow-xl xl:w-1/4\"\n            >\n                <PerfectScrollbar class=\"h-screen--menu-1/2 lg:h-full\">\n                    <ul v-if=\"locations.length > 0\" role=\"list\" class=\"divide-y divide-gray-200\">\n                        <li v-for=\"(location, idx) in locations\" :key=\"idx\">\n                            <button\n                                @click=\"map.triggerMarker(idx)\"\n                                type=\"button\"\n                                :class=\"[activeLocation == idx ? 'bg-gray-50' : '', 'block w-full hover:bg-gray-50']\"\n                            >\n                                <div class=\"flex items-center px-4 py-4 sm:px-6\">\n                                    <div class=\"min-w-0 flex-1 sm:flex sm:items-center sm:justify-between\">\n                                        <div class=\"truncate\">\n                                            <div class=\"flex text-sm\">\n                                                <p class=\"truncate text-lg font-medium text-primary-500\">\n                                                    {{ location.name }}\n                                                </p>\n                                            </div>\n                                            <div class=\"mt-1 flex\">\n                                                <div class=\"flex items-center space-x-2 text-xs text-gray-500\">\n                                                    <MapIcon\n                                                        class=\"h-5 w-5 flex-shrink-0 text-gray-500\"\n                                                        aria-hidden=\"true\"\n                                                    />\n                                                    <div>\n                                                        {{ location.full_address_line_1 }},\n                                                        {{ location.full_address_line_2 }}\n                                                    </div>\n                                                </div>\n                                            </div>\n                                            <div class=\"mt-1 flex\">\n                                                <div class=\"flex items-center text-xs\">\n                                                    <ClockIcon\n                                                        :class=\"[\n                                                            location.current_state.status,\n                                                            'mr-1.5 h-5 w-5 flex-shrink-0',\n                                                        ]\"\n                                                    />\n                                                    <div\n                                                        :class=\"[\n                                                            location.current_state.status,\n                                                            'flex space-x-1 text-sm',\n                                                        ]\"\n                                                    >\n                                                        <span>\n                                                            {{ location.current_state.text }}\n                                                        </span>\n                                                        <span aria-hidden=\"true\" class=\"text-gray-900\">&middot;</span>\n                                                        <span>\n                                                            {{ location.current_state.message }}\n                                                        </span>\n                                                    </div>\n                                                </div>\n                                            </div>\n                                        </div>\n                                    </div>\n                                    <div class=\"flex-shrink-0\">\n                                        <div class=\"mx-auto flex h-12 w-12 items-center justify-center\">\n                                            <MapPinIcon class=\"h-7 w-7 text-secondary-500\" aria-hidden=\"true\" />\n                                        </div>\n                                        <div class=\"text-center\">\n                                            <p class=\"text-sm text-gray-500\">{{ location.distance.toFixed(1) }} KM</p>\n                                        </div>\n                                    </div>\n                                </div>\n                            </button>\n                        </li>\n                    </ul>\n\n                    <div v-else class=\"my-24 flex justify-center border-t-0\">\n                        <div class=\"loading-spinner h-32 w-32 border-primary-500 border-l-transparent\"></div>\n                    </div>\n                </PerfectScrollbar>\n            </div>\n        </div>\n    </AppLayout>\n</template>\n\n<script setup>\nimport { ref, onMounted } from 'vue';\nimport AppLayout from '@/Layouts/AppLayout/Layout.vue';\nimport { GMap } from '@/Components';\nimport { MapPinIcon, MapIcon, ClockIcon } from '@heroicons/vue/24/outline';\n\nconst locations = ref({});\nconst map = ref(null);\n\nconst getLocations = async (latitude = null, longitude = null) => {\n    return await axios.get(route('find-us.list', { latitude: latitude, longitude: longitude })).then((response) => {\n        locations.value = response.data;\n        map.value.createMarkers(locations.value);\n    });\n};\n\nconst activeLocation = ref(null);\nonMounted(async () => {\n    getLocations(map.value.coordinates.lat, map.value.coordinates.lng);\n});\n</script>\n"],"names":["useGeolocation","defaultLat","defaultLng","coordinatesInStorage","parsedCoordinates","errors","coordinates","ref","onMounted","geolocate","setPosition","showError","position","setCoordinates","latitude","longitude","error","props","__props","isSupported","googleMapKey","computed","loader","Loader","mapContainer","map","infoWindow","markers","activeLocation","googleMaptheme","createMarkers","locations","clearMarkers","location","idx","marker","panMapTo","infoWindowContent","i","coordinates2","__expose","id","getLocations","response"],"mappings":"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"}