@extends('layouts.admin')

@section('content')
    <section class="pc-container">
        <div class="pc-content">
            <div class="page-header">
                <div class="page-block">
                    <div class="row align-items-center">
                        <div class="col-md-12">
                            <div class="page-header-title">
                                <h3 class="mb-0">{{ $userName }}</h3>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row pt-0">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-body p-0">
                            <div id="map" class="user-map">
                                {{-- Google API will draw map here --}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <script type="text/javascript" src="https://maps.google.com/maps/api/js?key={{ env('GOOGLE_MAP_KEY') }}" ></script>

    <script>
        var latitude = parseFloat('{{ $address->latitude }}');
        var longitude = parseFloat('{{ $address->longitude }}');
        var marker = 0;
        var map = 0;
        var autocomplete;

        function drawMap() {
            var mapOptions = {
                zoom: 15,
                center: { lat: latitude, lng: longitude },
            };

            map = new google.maps.Map(document.getElementById("map"), mapOptions);

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

            const infowindow = new google.maps.InfoWindow({
                    content: '{!! $markerContent !!}',
                });

                google.maps.event.addListener(marker, "click", () => {
                    infowindow.open(map, marker);
                });
        }

        $(document).ready(function() {
            drawMap();
        })

    </script>

@endsection