@extends('Templates.master')

{{-- Commonlinks --}}

@push('css-plugins')
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <style>
        /* 
            * Always set the map height explicitly to define the size of the div element
            * that contains the map. 
        */
        #map {
            height: 100vh;
        }
    </style>
	@include('Templates.UI.Admin.CDN.links')
@endpush

{{-- Navbar --}}

@section('nav')
	@include('Templates.UI.Admin.Nav.nav-header',['name' => $name,'id' => $id, 'authUser' => $authUser])
@endsection

@section('body')
    <!-- Page wrapper  -->
    <div class="page-wrapper">
        <!-- Container fluid  -->
        <div class="container-fluid">
            <div id="map"></div>
        </div>
    </div>
@endsection

{{-- CommonScripts --}}

@push('js-scripts')
	@include('Templates.UI.Admin.CDN.scripts')
    <script>
        (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
          key: "AIzaSyBS51fHNDu9wnF1MdXva03Kwye6qvEmueM",
          v: "weekly"
        });
    </script>  
    <script>
        // Initialize and add the map
        let map;
        async function initMap() {
            const { Map } = await google.maps.importLibrary("maps");
            const myLatLng = { lat: parseInt('{{ $userLocation->lat }}'), lng: parseInt('{{ $userLocation->long }}') };
            map = new Map(document.getElementById("map"), {
                center: myLatLng,
                zoom: 8,
            });
            new google.maps.Marker({
                position: myLatLng,
                map,
                title: "Saif Kamal"
            });
        }
        initMap();
    </script>
@endpush