@extends('admin.layout.master')

@section('css')

@endsection

@section('content')
<a href="{{route('admin.addresses.index' , $id)}}" class="btn btn-secondary buttons-copy buttons-html5">معالجة عناوين
    العميل</a>
@if(count($rows) > 0)
<div class="col-md-12 col-12">
    <div class="form-group">
        <div id="map" style="height: 400px; margin: 10px"></div>
        <input type="hidden" id="lat" value="31.121212">
        <input type="hidden" id="lng" value="31.121212">
    </div>
</div>
@else
<div class="d-flex flex-column w-100 align-center mt-4">
    <img src="http://127.0.0.1:8000/admin/app-assets/images/pages/404.png" alt="">
    <span class="mt-2" style="font-family: cairo">{{awtTrans('لا يوجد عناوين ')}}</span>
</div>
@endif


@endsection

@section('js')

<script async defer src="https://maps.googleapis.com/maps/api/js?key={{ $settings['google_places'] }}&callback=initMap"
    type="text/javascript"></script>

<script>
    function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 8,
            center: {lat: Number(@json($rows)[0].lat), lng:  Number(@json($rows)[0].long)}
        });

        $.each( @json($rows), function( index, value ) {
            var marker = new google.maps.Marker({
                position: {lat: Number(value.lat), lng:  Number(value.long)},
                map     : map , 
            });
            addInfoWindow(marker, value.title);
        });
    }

    function addInfoWindow(marker, message) {
        var infoWindow = new google.maps.InfoWindow({
            content: message
        });
        infoWindow.open(map, marker);
        google.maps.event.addListener(marker, 'click', function () {
            infoWindow.open(map, marker);
        });
    }
</script>


@endsection