@extends('admin.layout.index')
@section('title', 'Muftaax | Drivers Map View')
@section('custom-style')
{{-- <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB0NWIAcfZjLVpYWWVcddq_A2qpZAV39EA&libraries=places,marker&callback=initMap">
    </script> --}}
<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB0NWIAcfZjLVpYWWVcddq_A2qpZAV39EA&libraries=places,marker&callback=initMap&map_ids=96a365e39f25c2c7">
</script>
<style>
    .map-input input[type="text"] {
        padding: 14px 16px 14px 35px !important;
    }

    .map-input i {
        left: 10px !important;
        width: fit-content;
    }

    .__proliGrpBx {
        gap: 10px !important;
    }
</style>


<style>
    .text-green-3:hover {
        color: #1A5D1A;
    }

    .footer-section {
        display: none !important;
    }

    .gmnoprint {
        display: none;
    }

    .gm-control-active.gm-fullscreen-control {
        display: none;
    }

    .custom-marker {
        position: relative;
        width: 20px;
        height: 20px;
        background-color: #00FF00;
        /* Green dot color */
        border-radius: 50%;
    }

    .wd-find-select .inner-group {
        padding: 0px !important;
    }

    /* Pulsating effect */
    .custom-marker::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 40px;
        height: 40px;
        background-color: rgba(255, 165, 0, 0.5);
        /* Orange circle color */
        border-radius: 50%;
        transform: translate(-50%, -50%);
        animation: pulsate 1.5s infinite;
    }

    /* Keyframes for the pulsating animation */
    @keyframes pulsate {
        0% {
            transform: translate(-50%, -50%) scale(1);
            opacity: 1;
        }

        100% {
            transform: translate(-50%, -50%) scale(2);
            opacity: 0;
        }
    }

    .wd-find-select .tf-btn {
        padding: 0px 16px !important;
    }

    .wd-search-form {
        width: auto !important;
        padding: 25px 20px !important;
    }

    @media only screen and (min-width: 761px) {
        .mobile-flex {
            display: flex !important;
        }

        .wrapper-layout .wrap-right {
            position: fixed !important;
            margin-top: 100px !important;
            height: calc(100vh - 220px) !important;
        }

    }

    @media only screen and (max-width: 1000px) {
        .wrapper-layout .wrap-right {
            position: relative;
            width: 100% !important;
            height: 600px !important;
        }

        .wrapper-layout .wrap-left {
            height: auto !important;
            width: 100% !important;
        }
    }

    @media only screen and (max-width: 1440px) {
        .wrapper-layout .wrap-left {
            height: calc(100vh - 220px) !important;
        }
    }

    .map-view-main {
        display: flex !important;
        height: auto !important;
        padding-top: 85px;

    }

    @media only screen and (max-width: 761px) {

        .map-view-main {
            display: block !important;
        }
    }

    .mobile-flex {
        position: fixed;
        width: 100%;
    }

    .wrap-left {
        top: 95px;
    }

    .btn-green {
        background-color: #006280;
        color: #ffffff;
        border-color: #006280;
    }

    .btn-green:hover {
        background-color: #006280;
        color: #ffffff;
        border-color: #006280;
    }

    .btn-h {
        padding-top: 0.9rem !important;
    }

    .property-address {
        text-transform: capitalize;
    }

    .property-card {
        margin-top: 25px;
    }

    .property-image {
        border-radius: 8px;
    }

    .gm-style-iw-chr {
        position: absolute;
        right: 0;
        background: #f7f7f7;
        border-radius: 50%;
        font-size: 11px;
    }
</style>

@endsection
@section('content')
<div class="main-content app-content mt-0">
    <div class="container-fluid">
        <div class="map-view-main">
            <div id="map" style="height: 580px !important; width: 100% !important;"></div>
        </div>
    </div>
</div>

@endsection

@section('custom-script')

<script>
    document.addEventListener("DOMContentLoaded", function() {
        function initMap() {
            const propertyLocations = @json($drivers);
            console.log("Drivers Data:", propertyLocations);

            // Default map center
            const defaultCenter = {
                lat: 24.4539,
                lng: 54.3773
            };

            // Initialize map
            const map = new google.maps.Map(document.getElementById("map"), {
                zoom: 12,
                center: defaultCenter,
                mapId: "96a365e39f25c2c7", // Replace with your actual Map ID
            });

            // Attempt to get user's current location
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(
                    (position) => {
                        const userLocation = {
                            lat: position.coords.latitude,
                            lng: position.coords.longitude,
                        };
                        console.log("User's Current Location:", userLocation);

                        // Center the map on user's location
                        map.setCenter(userLocation);
                        map.setZoom(14);

                        // Add a marker for the user's location
                        new google.maps.Marker({
                            position: userLocation,
                            map: map,
                            title: "Your Location",
                            icon: {
                                url: "http://maps.google.com/mapfiles/ms/icons/blue-dot.png",
                            },
                        });
                    },
                    (error) => {
                        console.warn("Geolocation failed or denied. Falling back to default center.",
                            error);
                    }
                );
            } else {
                console.warn("Geolocation is not supported by this browser. Falling back to default center.");
            }

            // Add markers for drivers
            if (propertyLocations && propertyLocations.length > 0) {
                console.log("Adding property markers:", propertyLocations);
                propertyLocations.forEach((driver) => addDriverMarker(map, driver));
            } else {
                console.warn("No driver locations available.");
            }
        }

        function addDriverMarker(map, driver) {
            // Define a custom OverlayView for the marker
            class CustomMarker extends google.maps.OverlayView {
                constructor(position, driver, map) {
                    super();
                    this.position = position;
                    this.driver = driver;
                    this.map = map;
                    this.div = null;

                    // Add this overlay to the map
                    this.setMap(map);
                }

                onAdd() {
                    const div = document.createElement("div");
                    div.style.position = "absolute";
                    div.style.width = "39px";
                    div.style.height = "53px";
                    div.style.backgroundImage = `url(${this.driver.icon})`;
                    div.style.backgroundPosition = "center";
                    div.style.cursor = "pointer";

                    // Add the user image
                    const userImage = document.createElement("img");
                    userImage.src = this.driver.image;
                    userImage.style.position = "absolute";
                    userImage.style.top = "35%";
                    userImage.style.left = "50%";
                    userImage.style.transform = "translate(-50%, -50%)";
                    userImage.style.width = "30px";
                    userImage.style.height = "30px";
                    userImage.style.borderRadius = "50%";

                    div.appendChild(userImage);

                    // Add click event for opening InfoWindow
                    div.addEventListener("click", () => {
                        console.log("Marker clicked:", this.driver.name);

                        // Create and open InfoWindow
                        const infoWindow = new google.maps.InfoWindow({
                            content: `

                            <div style="text-decoration: none; color: inherit; width: 300px;">
                                <div class="property-card d-flex" style="margin-top: 10px;">
                                    <img src="${this.driver.image}" style="width:60px; height:60px;" alt="Property Image" class="property-image me-4">
                                    <div class="property-details">
                                        <div class="property-icons">
                                        </div>
                                        <h5 class="property-address">${this.driver.name}</h5>
                                        <div class="property-address"> <span class="d-flex"><h6 class="me-2">Pickup Location: </h6> ${this.driver.ride_to}</span> </div>
                                        <div class="property-address"> <span class="d-flex"><h6 class="me-2">DropOff Location: </h6> ${this.driver.ride_from}</span> </div>
                                    </div>
                                </div>
                            </div>
                        `,
                        });

                        infoWindow.open(map);
                        infoWindow.setPosition(this.position);
                    });

                    // <div style="text-align: center;">
                    //         <h6 style="margin: 5px 0;">${this.driver.name}</h6>
                    //         <img src="${this.driver.image}" alt="Driver Image" style="width: 100px; height: 100px; border-radius: 50%; margin: 10px 0;">
                    //         <p>Address: ${this.driver.address || "No address available"}</p>
                    //         <p>Ride To: ${this.driver.ride_to || "N/A"}</p>
                    //         <p>Ride From: ${this.driver.ride_from || "N/A"}</p>
                    //     </div>

                    this.div = div;

                    // Add the element to the overlay layer
                    const panes = this.getPanes();
                    panes.overlayMouseTarget.appendChild(div);
                }

                draw() {
                    const overlayProjection = this.getProjection();
                    const position = overlayProjection.fromLatLngToDivPixel(this.position);

                    if (this.div) {
                        this.div.style.left =
                            `${position.x - 38}px`; // Adjust for marker width (76px / 2)
                        this.div.style.top = `${position.y - 104}px`; // Adjust for marker height
                    }
                }

                onRemove() {
                    if (this.div) {
                        this.div.parentNode.removeChild(this.div);
                        this.div = null;
                    }
                }
            }

            const position = new google.maps.LatLng(driver.lat, driver.lng);
            new CustomMarker(position, driver, map);
        }

        window.initMap = initMap;
    });
</script>

{{-- <script>
        window.initMap = async function() {
            try {
                const propertyLocations = @json($drivers);
                console.log("Drivers Data:", propertyLocations);

                // Default center
                const defaultCenter = {
                    lat: 24.4539,
                    lng: 54.3773
                };

                // Initialize map with a Map ID
                const map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 12,
                    center: defaultCenter,
                    mapId: '96a365e39f25c2c7', // Replace with your actual Map ID
                });

                // Attempt to get the user's current location
                if (navigator.geolocation) {
                    navigator.geolocation.getCurrentPosition(
                        (position) => {
                            const userLocation = {
                                lat: position.coords.latitude,
                                lng: position.coords.longitude,
                            };
                            console.log("User's Current Location:", userLocation);

                            // Set the map's center to the user's current location
                            map.setCenter(userLocation);
                            map.setZoom(14); // Adjust zoom level for user's location

                            // Add a marker for the user's location
                            new google.maps.Marker({
                                position: userLocation,
                                map: map,
                                title: "Your Location",
                                icon: {
                                    url: "http://maps.google.com/mapfiles/ms/icons/blue-dot.png",
                                },
                            });
                        },
                        (error) => {
                            console.warn("Geolocation failed or denied. Falling back to default center.",
                                error);
                            // Keep the map centered on the default location
                        }
                    );
                } else {
                    console.warn("Geolocation is not supported by this browser. Falling back to default center.");
                }

                // Add markers for drivers
                if (propertyLocations && propertyLocations.length > 0) {
                    console.log("Adding property markers:", propertyLocations);
                    propertyLocations.forEach(driver => addDriverMarker(map, driver));
                } else {
                    console.warn("No driver locations available.");
                }
            } catch (error) {
                console.error("Error initializing map:", error);
            }
        };

        function addDriverMarker(map, driver) {
            // Create a DOM element for the custom marker
            const markerDiv = document.createElement('div');
            markerDiv.style.position = 'relative';
            markerDiv.style.width = '76px';
            markerDiv.style.height = '104px';
            markerDiv.style.backgroundImage = `url(${driver.icon})`; // Use the driver's icon as background
            // markerDiv.style.backgroundSize = 'cover';
            markerDiv.style.backgroundPosition = 'center';
            markerDiv.style.cursor = 'pointer';
            // markerDiv.style.borderRadius = '50%';
            console.log("Custom marker div created.");

            const userImage = document.createElement('img');
            userImage.src = driver.image;
            userImage.style.position = 'absolute';
            userImage.style.top = '36%';
            userImage.style.left = '50%';
            userImage.style.transform = 'translate(-50%, -50%)'; // Center the image
            userImage.style.width = '60px';
            userImage.style.height = '60px';
            userImage.style.borderRadius = '50%';
            // userImage.style.border = '2px solid #fff';

            // Append the image to the marker div
            markerDiv.appendChild(userImage);
            console.log("User image added to marker div.");

            // AdvancedMarkerElement with custom content
            const marker = new google.maps.marker.AdvancedMarkerElement({
                position: {
                    lat: parseFloat(driver.lat),
                    lng: parseFloat(driver.lng),
                },
                map: map,
                title: driver.name,
                content: markerDiv,
                // icon: driver.icon,
            });
            console.log("Marker added to the map for:", driver.name);

            // InfoWindow for additional details
            const infoWindow = new google.maps.InfoWindow({
                content: `
            <div style="text-align: center;">
                <h6 style="margin: 5px 0;">${driver.name}</h6>
                <img src="${driver.image}" alt="Driver Image" style="width: 100px; height: 100px; border-radius: 50%; margin: 10px 0;">
                <p>Address: ${driver.address || "No address available"}</p>
                <p>Ride To: ${driver.ride_to || "N/A"}</p>
                <p>Ride From: ${driver.ride_from || "N/A"}</p>
            </div>
        `,
            });
            console.log("InfoWindow created for:", driver.name);

            // Open InfoWindow only when the marker is clicked
            marker.addEventListener("gmp-click", () => {
                console.log("Marker clicked:", driver.name);

                infoWindow.open({
                    anchor: marker,
                    map: map,
                });
            });
            console.log("Click event listener attached for:", driver.name);
        }
    </script> --}}

{{-- <script>
        let currentInfoWindow = null; // Keep track of the currently open InfoWindow
        let currentActiveMarker = null; // Keep track of the currently active marker
        let map; // Declare map globally


        async function initMap() {
            // window.initMap = async function() {

            const propertyLocations = @json($drivers);

            const urlParams = new URLSearchParams(window.location.search);
            const latParam = urlParams.get('lat');
            const lngParam = urlParams.get('lng');
            const locationParam = urlParams.get('location');

            // Set initial center
            const defaultCenter = {
                lat: 24.4539,
                lng: 54.3773
            };
            const initialCenter = latParam && lngParam ? {
                    lat: parseFloat(latParam),
                    lng: parseFloat(lngParam)
                } :
                propertyLocations.length ? {
                    lat: parseFloat(propertyLocations[0].lat),
                    lng: parseFloat(propertyLocations[0].lng)
                } :
                defaultCenter;

            map = new google.maps.Map(document.getElementById('map'), {
                zoom: 12,
                center: initialCenter,
                styles: [ /* Add your custom map styling here */ ]
            });

            if (locationParam) {
                $('#location1').val(locationParam);
                await zoomToLocation(locationParam);
            } else if (latParam && lngParam) {
                new google.maps.Marker({
                    position: initialCenter,
                    map: map,
                    title: "Searched Location",
                    icon: {
                        url: "http://maps.google.com/mapfiles/ms/icons/blue-dot.png"
                    }
                });
                map.setZoom(14);
            } else {
                await getUserLocation(propertyLocations);
            }

            setupAutocomplete();
            await addPropertyMarkers(propertyLocations);
        }

        async function getUserLocation(propertyLocations) {
            try {
                const permissionStatus = await checkGeolocationPermission();
                if (permissionStatus === 'granted' || permissionStatus === 'prompt') {
                    const position = await getCurrentPosition();
                    const userLocation = {
                        lat: position.coords.latitude,
                        lng: position.coords.longitude
                    };

                    map.setCenter(userLocation);
                    map.setZoom(14);

                    new google.maps.Circle({
                        map: map,
                        center: userLocation,
                        radius: 10000,
                        strokeColor: "#006280",
                        strokeOpacity: 0.2,
                        strokeWeight: 2,
                        fillColor: "#006280",
                        fillOpacity: 0.1
                    });

                    addUserMarker(map, userLocation);
                    await calculateDistances(userLocation, propertyLocations);
                } else {
                    alert("Location access denied. Enable location services in your browser to use this feature.");
                }
            } catch (error) {
                console.error("Geolocation error:", error);
                alert("Unable to retrieve your location. Please check your location settings.");
            }
        }

        async function zoomToLocation(location) {
            const geocoder = new google.maps.Geocoder();

            try {
                const results = await geocodeLocation(geocoder, location);
                if (results.length > 0) {
                    const {
                        lat,
                        lng
                    } = results[0].geometry.location;
                    map.setCenter({
                        lat: lat(),
                        lng: lng()
                    });
                    map.setZoom(14);

                    new google.maps.Marker({
                        position: {
                            lat: lat(),
                            lng: lng()
                        },
                        map: map,
                        title: location
                    });
                } else {
                    console.error("No results found for location:", location);
                }
            } catch (error) {
                console.error("Geocoding error:", error);
            }
        }

        function geocodeLocation(geocoder, location) {
            return new Promise((resolve, reject) => {
                geocoder.geocode({
                    address: location
                }, (results, status) => {
                    status === 'OK' ? resolve(results) : reject(status);
                });
            });
        }

        function setupAutocomplete() {
            const input = document.getElementById('location1');
            if (input) {
                const autocomplete = new google.maps.places.Autocomplete(input);
                autocomplete.setComponentRestrictions({
                    country: ['AE']
                });

                autocomplete.addListener('place_changed', () => {
                    const place = autocomplete.getPlace();
                    if (!place.geometry) {
                        console.log("No details available for input:", place.name);
                        return;
                    }
                    $('#location1').val(place.formatted_address);
                });
            }
        }

        function checkGeolocationPermission() {
            return navigator.permissions ?
                navigator.permissions.query({
                    name: 'geolocation'
                }).then(res => res.state) :
                Promise.resolve('denied');
        }

        function getCurrentPosition() {
            return new Promise((resolve, reject) => navigator.geolocation.getCurrentPosition(resolve, reject));
        }

        function addUserMarker(map, userLocation) {
            new google.maps.Marker({
                position: userLocation,
                map: map,
                title: "Your Location",
                icon: {
                    url: "http://maps.google.com/mapfiles/ms/icons/red-dot.png"
                }
            });
        }

        async function calculateDistances(userLocation, propertyLocations) {
            const service = new google.maps.DistanceMatrixService();
            const destinations = propertyLocations.map(loc => ({
                lat: parseFloat(loc.lat),
                lng: parseFloat(loc.lng)
            }));
            const batchSize = 10;

            for (let i = 0; i < destinations.length; i += batchSize) {
                const batchDestinations = destinations.slice(i, i + batchSize);
                try {
                    const response = await getDistanceMatrix(service, userLocation, batchDestinations);
                    const results = response.rows[0].elements;

                    batchDestinations.forEach((dest, j) => {
                        const index = i + j;
                        if (index < propertyLocations.length) {
                            const distance = results[j].distance ? results[j].distance.text : 'N/A';
                            const duration = results[j].duration ? results[j].duration.text : 'N/A';
                            addMarkerWithCustomInfoWindow(map, propertyLocations[index], distance, duration);
                        }
                    });
                } catch (error) {
                    console.error('Error calculating distances:', error);
                }
            }
        }

        function getDistanceMatrix(service, origin, destinations) {
            return new Promise((resolve, reject) => {
                service.getDistanceMatrix({
                    origins: [origin],
                    destinations,
                    travelMode: 'DRIVING'
                }, (response, status) => status === 'OK' ? resolve(response) : reject(status));
            });
        }

        function addMarkerWithCustomInfoWindow(map, property, distance, duration) {
            const baseUrl = '{{ url('/') }}/public/';
const imageUrl = baseUrl + property.image;
const encryptedPropertyId = property.encrypted_id;

const infoWindowContent = `
<a href="{{ url('property-details/${encryptedPropertyId}') }}" target="_blank" style="text-decoration: none; color: inherit;">
    <div class="property-card" style="margin-top: 10px;">
        <img src="${imageUrl}" alt="Property Image" class="property-image">
        <div class="property-details">
            <div class="property-icons">
                <span class="icon">'Drivers Details will be display here'</span>
            </div>
            <div class="property-address">${property.address}</div>
        </div>
    </div>
</a>`;

const infoWindow = new google.maps.InfoWindow({
content: infoWindowContent,
pixelOffset: new google.maps.Size(0, -30)
});

const inactiveIcon = {
url: '{{ asset('assets/images/green-icon.png') }}',
scaledSize: new google.maps.Size(38, 48)
};
const activeIcon = {
url: '{{ asset('assets/images/red-icon.png') }}',
scaledSize: new google.maps.Size(40, 45)
};

const marker = new google.maps.Marker({
position: {
lat: parseFloat(property.lat),
lng: parseFloat(property.lng)
},
map: map,
title: property.name,
icon: inactiveIcon,
});

marker.addListener('click', () => {
if (currentInfoWindow) {
currentInfoWindow.close();
if (currentActiveMarker) currentActiveMarker.setIcon(inactiveIcon);
}
currentActiveMarker = marker;
currentInfoWindow = infoWindow;
infoWindow.open(map, marker);
marker.setIcon(activeIcon);
});
}

async function addPropertyMarkers(propertyLocations) {
propertyLocations.forEach(property => {
addMarkerWithCustomInfoWindow(map, property, 'N/A', 'N/A');
});
}

window.onload = initMap;
</script> --}}

@endsection