@extends('back_office.layouts.teamleader_app.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>

<!-- HTML for Bootstrap Modal -->
<div class="modal fade" id="markerModal" tabindex="-1" aria-labelledby="markerModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-body" id="markerModalBody">
          <!-- Content will be inserted here -->
        </div>
      </div>
    </div>
  </div>

@push('scripts')

<!-- MAP SCRIPT -->
<script type="text/javascript">
    var washes = 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 < washes.length; i++) {

        marker = new google.maps.Marker({
            position: new google.maps.LatLng(washes[i].longitude, washes[i].latitude),
            map: map
        });

        // Determine the link based on the wash type
        var link = (washes[i].type == 'customer') ? '{{ env('APP_URL') }}/admin/customer/' : '{{ env('APP_URL') }}/admin/guests/';

        // Generate washLink dynamically
        let washLink = "{{ route('teamleader-app.wash_view', ['id' => ':wash_id']) }}";
        washLink = washLink.replace(':wash_id', washes[i].id);

        const contentString =
        '<div id="container-fluid">' +
            '<div class="p-4 bg-white row">' +

                '<h5>CUSTOMER INFORMATION</h5>' +

                '<div class="customer_information_section row">' +
                    '<p><span class="text-secondary">FULL NAME : </span>' + washes[i].owner + '</p>' +
                    '<p><span class="text-secondary">CONTACT : </span>' + washes[i].phone + '</p>' +
                '</div>' +
                '<hr>' +

                '<h5>CAR INFORMATION</h5>' +

                '<div class="customer_information_section row">' +
                    '<p><span class="text-secondary">CAR BRAND/MODEL : </span>' + washes[i].model + '</p>' +
                    '<p><span class="text-secondary">PLATE NUMBER : </span>' + washes[i]['car']['plate_number'] + '</p>' +
                '</div>' +

            "</div>" +
            '<a href="'+washLink+'" class="btn bg-gradient-primary cancel w-100">More Details</a>' +
            '<a href="https://www.google.com/maps/search/?api=1&query='+washes[i].longitude+','+washes[i].latitude+'" class="btn bg-gradient-secondary cancel w-100">Go to location</a>' +
        "</div>";


        // Add click event listener to marker
        google.maps.event.addListener(marker, 'click', function() {
            // Set content to modal body
            document.getElementById('markerModalBody').innerHTML = contentString;
            // Open modal
            $('#markerModal').modal('show');
        });
    }

    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