@extends('layouts.admin')

@section('title' , 'Location Logs')

@section('breadcrumb-item')
    <li class="breadcrumb-item">Action Logs</li>
    <li class="breadcrumb-item active">Location</li>
@endsection

@section('content')
    <div class="card">
        <div class="card-header bg-theme">
            <p class="h5 pt-2 mb-0 float-left"><i class="fa fa-list pr-1"></i>Location: {{ $shop_name }}</p>
        </div>

        <div class="card-body" style="overflow-x:auto;">
            <div style="width: 1000px; height: 500px;" id="map">
            </div>
        </div>
    </div>
@endsection

@section('scripts')

    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCvFONX7Ym69kY4YLGPsYI_Ms6GcOLujMI&libraries=places"></script>


    <script type="text/javascript">

        var myLatLng = {lat: {{ $action_log->latitude }}, lng: {{ $action_log->longitude }}};

        var map = new google.maps.Map(document.getElementById('map'), {
            center: myLatLng,
            zoom: 15
        });

        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            title: 'Location'
        });



    </script>

@endsection