@extends('back_office.layouts.app')
@section('content')

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gmaps.js/0.4.24/gmaps.js"></script>

<script src="https://maps.google.com/maps/api/js?key={{env("MAPS_KEY")}}&libraries=drawing"></script>
<section class="content">
    <div class="container-fluid">
        <div class="card">
            <style type="text/css">
                #map {
                    height: 620px;
                }
            </style>
        </div>
    </div>
    <div class="container-fluid">
        <div class="p-4 bg-white row">
            @if($maps && $maps->value == 1)
                <div id="map"></div>
            @else
                <span>Activate Google Maps Key first!
                <a style="color: #1e90ff" href="{{route('fatora.and.maps')}}">Activate</a>
                </span>
            @endif
        </div>
    </div>
</section>

@push('scripts')

<!-- MAP SCRIPT -->
<script type="text/javascript">
    var customer_cars = null;

    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 12,
        center: new google.maps.LatLng(25.387895, 51.530836),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < customer_cars.length; i++) {
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(customer_cars[i].longitude, customer_cars[i].latitude),
            map: map
        });

        if(customer_cars[i].type == 'customer'){
            link = 'https://zigzagwash.qa/admin/customer/';
        }
        else {
           link =  'https://zigzagwash.qa/admin/guests/';
        }

        const contentString =
            '<div id="content">' +
            '<div id="siteNotice">' +
            "</div>" + '<div id="bodyContent">'
            +'<i class="fas fa-user fa-fw"></i>' + " " + customer_cars[i].owner +'<p>' +
            ' <a href="' + link + customer_cars[i].owner_id + '/">'
            + "<small>View Details </small></a> " +
            '</p>'
             "</div>" +
            "</div>";

       // var contentString = '';
       //
       //  if(car_locations[i].type == 'customer'){
       //      contentString = '<div id="content">' +
       //          '<div id="siteNotice">' +
       //          "</div>" +
       //          '<div id="bodyContent">'
       //          +'<i class="fas fa-user fa-fw"></i>' + " " + car_locations[i].owner
       //          +'<p> <a href="https://zigzagwash.qa/admin/customer/' + car_locations[i].owner_id + '/">' +
       //          "<small>View Details </small></a> " + '</p>'
       //      "</div>" +
       //      "</div>";
       //  }
       //  else {
       //      contentString = '<div id="content">' +
       //      '<div id="siteNotice">' +
       //      "</div>" +
       //      '<div id="bodyContent">'
       //      +'<i class="fas fa-user fa-fw"></i>' + " " + car_locations[i].owner
       //      +'<p> <a href="https://zigzagwash.qa/admin/guests/' + car_locations[i].owner_id + '/">' +
       //      "<small>View Details </small></a> " + '</p>'
       //      "</div>" +
       //      "</div>";
       //  }

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

    var polyOptions = {
        strokeWeight: 0,
        fillOpacity: 0.9,
        editable: true
    };
    loadPolygons(map);

    function loadPolygons(map) {
        var features = {"type":"FeatureCollection","features":[]};

        @foreach($areas as $area){
            var dbGeo = @json($area);
            features.features.push(JSON.parse(dbGeo['geojson']));
            console.log(features);
            var data = JSON.parse(dbGeo['geojson']);
            map.data.forEach(function(f) {
                map.data.remove(f);
            });
            map.data.addGeoJson(features)
            map.data.setStyle(function(feature) {
                var color = feature.getProperty('color');
                return {
                    fillColor: color,
                    strokeWeight: 1
                }
            });
        }
        @endforeach
    }
</script>
<!-- END MAP SCRIPT -->
@endpush
@endsection