@extends('incharge.layout.page-app')
@section('page_title', __('label.live_request'))
@section('tab_title', __('label.live_request'))

@section('content')
    @include('incharge.layout.sidebar')

    <div class="right-content">
        @include('incharge.layout.header')

        <div class="body-content">

            <div class="row">
                <div class="col-12">

                    <div id="map"></div>
                </div>
            </div>
        </div>
    </div>
    
@endsection

@section('pagescript')
    <script src="https://maps.googleapis.com/maps/api/js?key=<?php echo Setting_Data()['google_map_api_key']; ?>&callback=initMap&v=weekly" async></script> 
    <script>
        var map;
        var markers = [];

        // Sample data from controller: Each object has lat, lng, and color
        var locations = <?php echo json_encode($locations); ?>;

        function initMap() {
            var myLatlng = {
                lat: 20.5937,  // Latitude for India
                lng: 78.9629  // Longitude for India
            };


            map = new google.maps.Map(document.getElementById('map'), {
                zoom: 5, // Initial zoom level
                center: myLatlng // Map center
            });

            // Create an info window instance
            var infoWindow = new google.maps.InfoWindow();

            // Loop through each location and place a marker
            locations.forEach(function (location) {
                var markerColor = location.color ? location.color : '#FF0000'; // Fallback to red if no color is provided

                // Create a custom SVG icon
                var svgMarker = {
                    path: "M226.996 0.397238C165.517 5.51024 112.965 29.3642 70.9306 71.2382C-10.4854 152.344 -23.3284 280.167 40.2716 376.372C52.6836 395.146 68.7866 413.178 87.1226 428.833C106.189 445.112 135.934 462.145 160.302 470.738L172.192 474.93L207.094 528.305C226.29 557.662 242.221 581.699 242.496 581.721C242.771 581.743 244.333 579.625 245.968 577.013C247.602 574.402 260.599 554.49 274.851 532.765C289.102 511.04 303.422 489.157 306.672 484.136L312.582 475.007L324.58 470.776C381.121 450.839 430.708 407.189 458.302 353.066C478.199 314.038 486.701 273.706 484.421 229.161C480.539 153.325 440.749 83.4112 377.496 41.2842C351.659 24.0772 326.949 13.3272 296.9 6.22124C277.701 1.68124 244.656 -1.07176 226.996 0.397238Z",
                    fillColor: markerColor, // Fill with the desired color
                    fillOpacity: 1, // Solid fill
                    strokeWeight: 1, // Optional: add a stroke (black border)
                    scale: 0.060, // Adjust scale for a smaller size
                    anchor: new google.maps.Point(122, 500), // Adjust anchor to position the tip of the pin correctly
                };

                var marker = new google.maps.Marker({
                    position: { lat: location.lat, lng: location.lng },
                    map: map,
                    draggable: false, // Marker is not draggable
                    icon: svgMarker // Use the custom SVG icon
                });

                // Add this inside the 'mouseover' event listener
                marker.addListener('mouseover', function () {
                    var content = `
                        <div class="infowindow-card">
                            <div class="infowindow-header">
                                <i class="fa-solid fa-building-columns me-2"></i>
                                <strong>{{__('label.department')}}:</strong>
                                <span class="fw-bold">${location.department}</span>
                            </div>
                            <div class="infowindow-body">
                                <div class="mb-2">
                                    <i class="fas fa-tools me-2 text-primary"></i>
                                    <span>${location.service}</span>
                                </div>
                                <div class="mb-3">
                                    <i class="fa-regular fa-calendar me-2 text-primary"></i>
                                    <span>${location.date}</span>
                                </div>
                                <div class="d-flex justify-content-between">
                                    <div class="text-center me-2">
                                        <label class="img-label">{{__('label.before_image')}}</label>
                                        <img src="${location.before}" class="img-preview">
                                    </div>
                                    <div class="text-center">
                                        <label class="img-label">{{__('label.after_image')}}</label>
                                        <img src="${location.after}" class="img-preview">
                                    </div>
                                </div>
                            </div>
                        </div>
                    `;
                    infoWindow.setContent(content);
                    infoWindow.open(map, marker);
                });

                // Close the info window when the mouse leaves the marker
                marker.addListener('mouseout', function () {
                    infoWindow.close();
                });

                // Add the marker to the markers array
                markers.push(marker);
            });
        }

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