@extends('layouts/layoutMaster')

@section('title', 'Site')
@section('content')
<div class="row">
  <div class="card">
  <div class="card-header align-items-center">  
        <h4 class="rounded float-left d-inline-block m-0">{{$data->name}}</h4>
        <a href="{{route('site')}}" class="btn btn-label-primary waves-effect mr-3" style="float: right;">Back</a>       
      </div>
  </div>
</div>
<br>
<div class="row">
  <div class="card p-3">
<div id="map" style="height: 500px;"></div>
</div>
</div>

@include('content.Admin.Layoutes.Footer')
@endsection
@section('page-script')
<script 
    src="https://maps.googleapis.com/maps/api/js?key={{ env('GOOGLE_MAPS_API_KEY') }}&callback=initMap&v=weekly&libraries=marker,geometry&loading=async" 
    async 
    defer>
</script>

<script>
    let map;

    // Laravel variables (safe output)
    let lt = {{ Js::from($data->lat) }};
    let ln = {{ Js::from($data->long) }};
    let siteId = {{ Js::from($data->id) }};

    async function initMap() {
        // Load AdvancedMarkerElement
        const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

        map = new google.maps.Map(document.getElementById("map"), {
            center: { lat: parseFloat(lt), lng: parseFloat(ln) },
            zoom: 10,
            mapId: "DEMO_MAP_ID", // Optional, can be used for styling
        });
        // Add geofence circle around the site
    const geofenceRadius = 10000; // in meters (1km radius as example)

        new google.maps.Circle({
            strokeColor: "#FF0000",
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: "#FF0000",
            fillOpacity: 0.2,
            map,
            center: { lat: parseFloat(lt), lng: parseFloat(ln) },
            radius: geofenceRadius,
        });

        // Prepare a single reusable info window
        const infoWindow = new google.maps.InfoWindow();

        // Fetch workers and place Advanced Markers
        const url = new URL('/admin/site/workers/' + siteId, window.location.origin);
        fetch(url)
            .then(response => response.json())
            .then(data => {
                data.forEach(worker => {
                    const lat = parseFloat(worker.current_lat);
                    const lng = parseFloat(worker.current_long);

                    if (!isFinite(lat) || !isFinite(lng)) {
                        console.warn("Invalid coordinates for worker:", worker.name);
                        return;
                    }

                    const position = { lat, lng };

                    const marker = new AdvancedMarkerElement({
                        map,
                        position: position,
                        title: worker.name
                    });
                    const workerUrl = new URL('/admin/worker-view/' + worker.id, window.location.origin);
                    // HTML content for the info window
                    const infoContent = `
                        <div>
                            <a href="${workerUrl}" 
                               target="_blank" 
                               style="font-weight: bold; text-decoration: underline; color: #1a73e8;">
                               ${worker.name}
                            </a><br>
                            Lat: ${worker.current_lat}<br>
                            Lng: ${worker.current_long}
                        </div>
                    `;

                   marker.addEventListener('click', () => {
                        infoWindow.setContent(infoContent);
                        infoWindow.open({
                            anchor: marker,
                            map,
                            shouldFocus: false,
                        });
                    });

                });
            })
            .catch(error => console.error('Error fetching workers:', error));
    }

    window.initMap = initMap;
</script>
@endsection