@extends('stores.layouts.app')

@section('content')
@php
    $type = 'store';
@endphp

<livewire:tables.profileupdate :type="$type"  />
@endsection
@push('scripts')
    <script type="text/javascript"
            src="https://maps.google.com/maps/api/js?key={{ env('GOOGLE_MAPS_API') }}"></script>

    <script>
        var lat = {{ auth()->user()->latitude }};
        var lng = {{ auth()->user()->longitude }};
        const myLatLng = {lat: parseFloat(lat), lng: parseFloat(lng)};
        const map = new google.maps.Map(document.getElementById("map"), {
            zoom: 14,
            center: myLatLng,
        });

        marker = new google.maps.Marker({
            position: new google.maps.LatLng(parseFloat(lat), parseFloat(lng)),
            map: map
        });

        i = 0;
        google.maps.event.addListener(marker, 'click', (function (marker, i) {
            return function () {
                infowindow.setContent('Site In');
                infowindow.open(map, marker);
            }
        })(marker, i));

    </script>

    <script>
        const x = document.getElementById("demo");

        function getLocation() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(showPosition);
            } else {
                x.innerHTML = "Geolocation is not supported by this browser.";
            }
        }

        function showPosition(position) {
            document.getElementById("latitude").value = position.coords.latitude;
            document.getElementById("longitude").value = position.coords.longitude;

            var lat = position.coords.latitude;
            var lng = position.coords.longitude;
            document.getElementById("updatedmapcard").style.display = 'block';
            document.getElementById("locationSave").style.display = 'block';
            const myLatLng = {lat: parseFloat(lat), lng: parseFloat(lng)};
            const map = new google.maps.Map(document.getElementById("updatedmap"), {
                zoom: 14,
                center: myLatLng,
            });

            marker = new google.maps.Marker({
                position: new google.maps.LatLng(parseFloat(lat), parseFloat(lng)),
                map: map
            });

            i = 0;
            google.maps.event.addListener(marker, 'click', (function (marker, i) {
                return function () {
                    infowindow.setContent('Site In');
                    infowindow.open(map, marker);
                }
            })(marker, i));


            var latlng = new google.maps.LatLng(lat, lng);
            var geocoder = geocoder = new google.maps.Geocoder();
            geocoder.geocode({ 'latLng': latlng }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    if (results[1]) {
                        document.getElementById("address").textContent = results[1].formatted_address;
                    }
                }
            });
        }



    </script>
@endpush