@extends('layouts.mainlayout')
@section('title', 'GeoFence')
@section('main')
<div class="row">
    <div class="col-md-6">
    <h2 style="text-align:center;">Check-in Location</h2>
        <div id="map-checkin" style="height:272px;z-index: 0;">
            <input type="text" id="search-box-checkin" placeholder="Search location">
        </div>
        <div class="container pt-2">
            <div class="form-group mt-3" hidden>
                <label for="checkin-lat">Latitude:</label>
                <input type="text" class="form-control" id="checkin-lat" onchange="updateLocation('checkin')" value="{{ $checkinGeo->lat ?? null}}">
            </div>
            <div class="form-group" hidden>
                <label for="checkin-lng">Longitude:</label>
                <input type="text" class="form-control" id="checkin-lng" onchange="updateLocation('checkin')" value="{{ $checkinGeo->lng ?? null }}">
            </div>
            <div class="form-group"style="padding-top: 1.5rem;">
                <label for="checkin-radius">Radius (in meters):</label>
                <input type="number" class="form-control" id="checkin-radius" value="{{ $checkinGeo->radius ?? null }}" onchange="updateRadius('checkin')" readonly>
                <button class="btn btn-primary" style="margin-top: 13px;" onclick="changeRadius('checkin', 'increase')">+</button>
                <button class="btn btn-primary" style="margin-top: 13px;" onclick="changeRadius('checkin', 'decrease')">−</button>
            </div>
            <div class="form-group">
                <label for="checkin-location">Location:</label>
                <input type="text" class="form-control" id="checkin-location" value="{{ $checkinGeo->location ?? null }}">
                <button class="btn btn-danger" onclick="clearCheckinFields()">Clear</button>
                <button class="btn btn-primary" id="assignedcheckin"  onclick="assignedLocation('checkin')">Assigned Location</button>
            </div>
        </div>
    </div>
    <div class="col-md-6">
    <h2 style="text-align:center">Check-out Location</h2>
        <div id="map-checkout" style="height:272px;">
            <input type="text" id="search-box-checkout" placeholder="Search location">
        </div>
        <label for="checkoutCheckbox" style="float: inline-end; padding-top: 1.5rem;">
            <input type="checkbox" id="checkoutCheckbox" onchange="autoFillCheckoutFields()">
            Same as Checkin
        </label>
        <div class="container pt-2">
            <div class="form-group mt-3" hidden>
                <label for="checkout-lat">Latitude:</label>
                <input type="text" class="form-control" id="checkout-lat" onchange="updateLocation('checkout')" value="{{ $checkoutGeo->lat ?? null }}">
            </div>
            <div class="form-group" hidden>
                <label for="checkout-lng">Longitude:</label>
                <input type="text" class="form-control" id="checkout-lng" onchange="updateLocation('checkout')" value="{{ $checkoutGeo->lng ?? null }}">
            </div>
            <div class="form-group">
                <label for="checkout-radius" style="padding-top: 1.5rem;">Radius (in meters):</label>
                <input type="number" class="form-control" id="checkout-radius" value="{{ $checkoutGeo->radius ?? null }}" onchange="updateRadius('checkout')" readonly>
                <button class="btn btn-primary" style="margin-top: 13px;" onclick="changeRadius('checkout', 'increase')">+</button>
                <button class="btn btn-primary" style="margin-top: 13px;" onclick="changeRadius('checkout', 'decrease')">−</button>
            </div>
            <div class="form-group">
                <label for="checkout-location">Location:</label>
                <input type="text" class="form-control" id="checkout-location" value="{{ $checkoutGeo->location ?? null }}">
                <button class="btn btn-danger" onclick="clearCheckoutFields()">Clear</button>
                <button class="btn btn-primary" id="assignedcheckout"  onclick="assignedLocation('checkout')">Assigned Location</button>
            </div>
        </div>
    </div>
</div>
<div class="row mt-3">
    <div class="col-md-12 text-right">
        <button class="btn btn-primary" onclick="saveGeofence()">Save</button>
    </div>
</div>

<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet-draw/dist/leaflet.draw.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet-fullscreen/dist/leaflet.fullscreen.css" />
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet-draw/dist/leaflet.draw.js"></script>
<script src="https://unpkg.com/leaflet-fullscreen/dist/Leaflet.fullscreen.min.js"></script>
<script src="https://unpkg.com/leaflet-search/dist/leaflet-search.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" />
<script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
<script src="https://unpkg.com/leaflet-search/dist/leaflet-search.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<script src="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol@0.79.0/dist/L.Control.Locate.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol@0.79.0/dist/L.Control.Locate.min.css" rel="stylesheet">

<script type="text/javascript">
    var geoFenceOrgLevel = @json($geoFenceOrgLevel);
 
// Store the data in local storage
localStorage.setItem('geoFenceOrgLevel', JSON.stringify(geoFenceOrgLevel));
// Get the data in local storage
var storedData = localStorage.getItem('geoFenceOrgLevel');
var geoFenceOrgLevel = JSON.parse(storedData);
console.log(geoFenceOrgLevel.checkinFenceDataOrg.radius);
if (geoFenceOrgLevel.checkinFenceDataOrg.lat === null || geoFenceOrgLevel.checkinFenceDataOrg.long === null) {
    document.getElementById("assignedcheckin").disabled = true;
}

if (geoFenceOrgLevel.checkoutFenceDataOrg.lat === null || geoFenceOrgLevel.checkoutFenceDataOrg.long === null) {
    document.getElementById("assignedcheckout").disabled = true;
}
    // Define a global variable to store the last location
var lastLocation;
   //geofencing functionality
   var mapCheckin = L.map('map-checkin').setView([51.505, -0.09], 13);
   var mapCheckout = L.map('map-checkout').setView([51.505, -0.09], 13);
 //Search functionality in check-in map
 L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: '© OpenStreetMap contributors'}).addTo(mapCheckin);
    var geocoderCheckin = L.Control.geocoder({
    defaultMarkGeocode: false
    })
    .on('markgeocode', function(e) {
        // Clear previous markers
        mapCheckin.eachLayer(function (layer) {
        if (layer instanceof L.Marker) {
            mapCheckin.removeLayer(layer);
        }
        });

        var latlng = e.geocode.center;
        mapCheckin.setView(latlng, 13);
        L.marker(latlng).addTo(mapCheckin);
    })
    .addTo(mapCheckin);
    var searchBoxCheckin = document.getElementById('search-box-checkin');
    searchBoxCheckin.addEventListener('keydown', function (e) {
    if (e.key === 'Enter') {
        var query = searchBoxCheckin.value;
        geocoderCheckin.geocode(query);
    }
    });
    //search functionality in checkout map
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: '© OpenStreetMap contributors'}).addTo(mapCheckout);
    var geocoderCheckout = L.Control.geocoder({
    defaultMarkGeocode: false
    })
    .on('markgeocode', function(e) {
        // Clear previous markers
        mapCheckout.eachLayer(function (layer) {
        if (layer instanceof L.Marker) {
            mapCheckout.removeLayer(layer);
        }
        });
        var latlng = e.geocode.center;
        mapCheckout.setView(latlng, 13);
        L.marker(latlng).addTo(mapCheckout);
    })
    .addTo(mapCheckout);
    var searchBoxCheckout = document.getElementById('search-box-checkout');
    searchBoxCheckout.addEventListener('keydown', function (e) {
    if (e.key === 'Enter') {
        var query = searchBoxCheckout.value;
        geocoderCheckout.geocode(query);
    }
    });
     // Adding locate control to mapCheckin
     var lcCheckin = L.control.locate({
            position: "topright",
            strings: {
                title: "Your Current Location!"
            }
        }).addTo(mapCheckin);

        // Adding locate control to mapCheckout
        var lcCheckout = L.control.locate({
            position: "topright",
            strings: {
                title: "Your Current Location!"
            }
        }).addTo(mapCheckout);
    var osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy;'
    }).addTo(mapCheckin);
    var osmLayer2 = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy;'
    }).addTo(mapCheckout);
    var satelliteLayerCheckin = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
        attribution: '&copy; <a href="https://www.esri.com/en-us/home">Esri</a> | &copy;'
    });
    var satelliteLayerCheckout = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
        attribution: '&copy; <a href="https://www.esri.com/en-us/home">Esri</a> | &copy;'
    });
    var baseLayers = {
        "OpenStreetMap": osmLayer,
        "Satellite Imagery": satelliteLayerCheckin
    };
    var baseLayers2 = {
        "OpenStreetMap": osmLayer2,
        "Satellite Imagery": satelliteLayerCheckout
    };
    // controls of map
    // L.control.locate().addTo(map); //location
    L.control.layers(baseLayers).addTo(mapCheckin);
    L.control.layers(baseLayers2).addTo(mapCheckout);
    mapCheckin.addControl(new L.Control.Fullscreen());
    mapCheckout.addControl(new L.Control.Fullscreen());
    var drawnItems = new L.FeatureGroup();
    mapCheckin.addLayer(drawnItems);
    var drawnItems2 = new L.FeatureGroup();
    mapCheckout.addLayer(drawnItems2);
    var drawControl = new L.Control.Draw({
        draw: {
            circle: true,
            marker: false,
            polyline: false,
            polygon: false,
            rectangle: false,
        },
        edit: {
            featureGroup: drawnItems,
        },
    });
    var drawControl2 = new L.Control.Draw({
        draw: {
            marker: false,
            polyline: false,
            polygon: false,
            rectangle: false,
        },
        edit: {
            featureGroup: drawnItems2,
        },
    });
    // mapCheckin.addControl(drawControl);
    // mapCheckout.addControl(drawControl2);
    mapCheckin.on('draw:created', function (event) {
        var circle = event.layer;
        drawnItems.clearLayers().addLayer(circle);
        updateInputFields(circle);
    });
    mapCheckout.on('draw:created', function (event) {
        var circle = event.layer;
        drawnItems2.clearLayers().addLayer(circle);
        updateInputFields2(circle);
    });
    mapCheckin.on('draw:edited', function (event) {
        var layers = event.layers;
        layers.eachLayer(function (layer) {
            updateInputFields(layer);
        });
    });
    mapCheckout.on('draw:edited', function (event) {
        var layers = event.layers;
        layers.eachLayer(function (layer) {
            updateInputFields2(layer);
        });
    });
    mapCheckin.on('draw:deleted', function (event) {
    document.getElementById('checkin-lat').value = '';
    document.getElementById('checkin-lng').value = '';
    document.getElementById('checkin-radius').value = '';
    document.getElementById('checkin-location').value = '';
});
mapCheckout.on('draw:deleted', function (event) {
    document.getElementById('checkout-lat').value = '';
    document.getElementById('checkout-lng').value = '';
    document.getElementById('checkout-radius').value = '';
    document.getElementById('checkout-location').value = '';
});
// Add an event listener for the checkbox
document.getElementById('checkoutCheckbox').addEventListener('change', function(event) {
    // Check if the checkbox is checked
    var isChecked = event.target.checked;
    
    // If the checkbox is checked, update the checkout map to match the checkin map
    if (isChecked) {
        // Get the checkin location and radius
        var checkinLat = document.getElementById('checkin-lat').value;
        var checkinLng = document.getElementById('checkin-lng').value;
        var checkinRadius = document.getElementById('checkin-radius').value;
        var checkinLocation = document.getElementById('checkin-location').value;
        
        // Update the checkout location and radius fields
         // Clear any existing markers and circles on the checkout map
         mapCheckout.eachLayer(function (layer) {
            if (layer instanceof L.Marker || layer instanceof L.Circle) {
                mapCheckout.removeLayer(layer);
            }
        });
        document.getElementById('checkout-lat').value = checkinLat;
        document.getElementById('checkout-lng').value = checkinLng;
        document.getElementById('checkout-radius').value = checkinRadius;
        document.getElementById('checkout-location').value = checkinLocation;
        
        // Update the checkout map to match the checkin map
        mapCheckout.setView([checkinLat, checkinLng], 13);
        var marker = L.marker([checkinLat, checkinLng]).addTo(mapCheckout);
        var circle = L.circle([checkinLat, checkinLng], {
            color: 'blue',
            fillColor: 'blue',
            fillOpacity: 0.3,
            radius: checkinRadius
        }).addTo(mapCheckout);
        
        // Update the location input field with the reverse geocoded address
        reverseGeocode(checkinLat, checkinLng, 'checkout');
    } else {
        // If the checkbox is unchecked, clear the checkout location and radius fields
        document.getElementById('checkout-lat').value = '';
        document.getElementById('checkout-lng').value = '';
        document.getElementById('checkout-radius').value = '';
        document.getElementById('checkout-location').value = '';
        
        // Clear any existing markers and circles on the checkout map
        mapCheckout.eachLayer(function (layer) {
            if (layer instanceof L.Marker || layer instanceof L.Circle) {
                mapCheckout.removeLayer(layer);
            }
        });
    }
});
// map click checkin functionality
mapCheckout.on('click', function(event) {
    // Get the clicked location
    var clickedLocation = event.latlng;

    // Remove any existing markers and circles
    mapCheckout.eachLayer(function(layer) {
        if (layer instanceof L.Marker || layer instanceof L.Circle) {
            mapCheckout.removeLayer(layer);
        }
    });

    // Add a marker at the clicked location
    var marker = L.marker(clickedLocation).addTo(mapCheckout);

    // Update the input fields with the latitude and longitude of the clicked location
    document.getElementById('checkout-lat').value = clickedLocation.lat;
    document.getElementById('checkout-lng').value = clickedLocation.lng;

    // Set the radius to 500 meters
    var radius = 500;

    // Create a circle layer with the clicked location as its center and the specified radius
    var circle = L.circle(clickedLocation, {
        color: 'blue',
        fillColor: 'blue',
        fillOpacity: 0.3,
        radius: radius // Use the specified radius
    }).addTo(mapCheckout);
    // Update the radius input field with the specified radius
    document.getElementById('checkout-radius').value = radius;
    // Reverse geocode the clicked location and update the location input field
    reverseGeocode(clickedLocation.lat, clickedLocation.lng, 'checkout');
});
// map checkout functionality
mapCheckin.on('click', function(event) {
    // Get the clicked location
    var clickedLocation = event.latlng;
    // Remove any existing markers and circles
    mapCheckin.eachLayer(function(layer) {
        if (layer instanceof L.Marker || layer instanceof L.Circle) {
            mapCheckin.removeLayer(layer);
        }
    });
    // Add a marker at the clicked location
    var marker = L.marker(clickedLocation).addTo(mapCheckin);
    // Update the input fields with the latitude and longitude of the clicked location
    document.getElementById('checkin-lat').value = clickedLocation.lat;
    document.getElementById('checkin-lng').value = clickedLocation.lng;
    // Set the radius to 500 meters
    var radius = 500;
    // Create a circle layer with the clicked location as its center and the specified radius
    var circle = L.circle(clickedLocation, {
        color: 'blue',
        fillColor: 'blue',
        fillOpacity: 0.3,
        radius: radius // Use the specified radius
    }).addTo(mapCheckin);
    // Update the radius input field with the specified radius
    document.getElementById('checkin-radius').value = radius;
    // Reverse geocode the clicked location and update the location input field
    reverseGeocode(clickedLocation.lat, clickedLocation.lng, 'checkin');
});
// setting the location and radius when choosing the location
function updateInputFields(circle) {
    var center = circle.getLatLng();
    var radius = circle.getRadius();
    document.getElementById('checkin-lat').value = center.lat;
    document.getElementById('checkin-lng').value = center.lng;
    document.getElementById('checkin-radius').value = Math.round(radius);
    // Clear the location field
    document.getElementById('checkin-location').value = '';
    reverseGeocode(center.lat, center.lng, 'checkin');
}
function updateInputFields2(circle) {
    var center = circle.getLatLng();
    var radius = circle.getRadius();
    document.getElementById('checkout-lat').value = center.lat;
    document.getElementById('checkout-lng').value = center.lng;
    document.getElementById('checkout-radius').value = Math.round(radius);
    // Clear the location field
    document.getElementById('checkout-location').value = '';
    reverseGeocode(center.lat, center.lng, 'checkout');
}
//Here getting the current location if not than show the current location else show the saved data
function getCurrentLocation(type) {
        var map = type == 'checkin' ? mapCheckin : mapCheckout;
        var radius = 500;

        // Check if the corresponding latitude and longitude fields are empty
        var latField = document.getElementById(type + '-lat');
        var lngField = document.getElementById(type + '-lng');
        if (latField.value === '' || lngField.value === '') {
            // If the fields are empty, clear the location field and get the current location using the browser's geolocation API
            document.getElementById(type + '-location').value = '';
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(
                    function (position) {
                        var currentLocation = L.latLng(position.coords.latitude, position.coords.longitude);
                        map.setView(currentLocation, 13);

                        var marker = L.marker(currentLocation).addTo(map);
                        marker.fireEvent('click', {
                            latlng: currentLocation,
                        });

                        // Update the latitude and longitude fields with the current location
                        latField.value = currentLocation.lat;
                        lngField.value = currentLocation.lng;

                        // Reverse geocode the current location and update the location input field
                        reverseGeocode(currentLocation.lat, currentLocation.lng, type);

                        // Create a circle layer with the clicked location as its center and a default radius
                        var circle = L.circle(currentLocation, {
                            color: 'blue',
                            fillColor: 'blue',
                            fillOpacity: 0.3,
                            radius: radius // 1000 meters radius
                        }).addTo(map);
                    },
                    function (error) {
                        console.error('Error getting current location:', error.message);
                    }
                );
            } else {
                console.error('Geolocation is not supported by this browser.');
            }
        } else {
            // If the fields are not empty, get the stoblue location and set the map view and markers accordingly
            var lat = parseFloat(latField.value);
            var lng = parseFloat(lngField.value);
            var location = L.latLng(lat, lng);
            map.setView(location, 13);

            var marker = L.marker(location).addTo(map);
            marker.fireEvent('click', {
                latlng: location,
            });

            // Reverse geocode the stoblue location and update the location input field
            reverseGeocode(lat, lng, type);

            // Create a circle layer with the stoblue location as its center and a default radius
            var circle = L.circle(location, {
                color: 'blue',
                fillColor: 'blue',
                fillOpacity: 0.3,
                radius: radius // 500 meters radius
            }).addTo(map);
        }
}
// updating the location 
function updateLocation(type) {
    var latField = document.getElementById(type + '-lat');
    var lngField = document.getElementById(type + '-lng');
    var locationField = document.getElementById(type + '-location');
    // Check if the latitude and longitude fields are empty
    if (latField.value !== '' && lngField.value !== '') {
        var lat = parseFloat(latField.value);
        var lng = parseFloat(lngField.value);
        var location = locationField.value;
        // Remove any existing markers and circles
        var map = type == 'checkin' ? mapCheckin : mapCheckout;
        map.eachLayer(function (layer) {
            if (layer instanceof L.Marker || layer instanceof L.Circle) {
                map.removeLayer(layer);
            }
        });
        // Create a marker at the specified location
        var marker = L.marker([lat, lng]).addTo(map);
        // Update the location input field with the specified location
        locationField.value = location;
    }
}
// updating the radius when we put the value 
function updateRadius(type) {
    var radiusField = document.getElementById(type + '-radius');
    var radius = parseInt(radiusField.value);
    // Check if the radius field is empty or the radius is less than 1
    if (isNaN(radius) || radius < 1) {
        // If the radius is less than 1, set it to 1
        radius = 0;
        radiusField.value = radius;
    }
    // Remove any existing circles and create a new circle with the updated radius
    var map = type == 'checkin' ? mapCheckin : mapCheckout;
    map.eachLayer(function (layer) {
        if (layer instanceof L.Circle) {
            map.removeLayer(layer);
        }
    });

    var centerField = document.getElementById(type + '-lat');
    var lat = parseFloat(centerField.value);
    centerField = document.getElementById(type + '-lng');
    var lng = parseFloat(centerField.value);

    if (!isNaN(lat) && !isNaN(lng)) {
        var circle = L.circle([lat, lng], {
            color: 'blue',
            fillColor: 'blue',
            fillOpacity: 0.3,
            radius: radius,
        }).addTo(map);

        // Update the radius input field with the updated radius
        radiusField.value = circle.getRadius();
    }
}

function reverseGeocode(lat, lng, type) {
    var locationField = document.getElementById(type + '-location');
    // Make a GET request to the Nominatim API to reverse geocode the latitude and longitude
    // fetch('https://nominatim.openstreetmap.org/reverse?format=jsonv2&lat=' + lat + '&lon=' + lng&acc)
    fetch(`https://nominatim.openstreetmap.org/reverse?lat=${lat}&lon=${lng}&format=json&accept-language=en`)
        .then((response) => response.json())
        .then((data) => {
            // Check if the response contains the display_name field
            if (data.display_name) {
                // Update the location input field with the reverse geocoded address
                locationField.value = data.display_name;
            }
        })
        .catch((error) => {
            // If there is an error while fetching the reverse geocode data, log the error
            console.error('Error:', error);
        });
}

// toggle the map functionality
    function toggleFullscreen(type) {
        var map = type == 'checkin' ? mapCheckin : mapCheckout;
        map.toggleFullscreen();
    }
    getCurrentLocation('checkin');
    getCurrentLocation('checkout');
    // saving the data on the database
    function saveGeofence() {
        var checkinLat = document.getElementById('checkin-lat').value;
        var checkinLng = document.getElementById('checkin-lng').value;
        var checkinRadius = document.getElementById('checkin-radius').value;
        var checkinLocation = document.getElementById('checkin-location').value;

        var checkoutLat = document.getElementById('checkout-lat').value;
        var checkoutLng = document.getElementById('checkout-lng').value;
        var checkoutRadius = document.getElementById('checkout-radius').value;
        var checkoutLocation = document.getElementById('checkout-location').value;

        // Prepare data to send to the backend
        var geofenceData = {
            checkin: {
                lat: checkinLat,
                lng: checkinLng,
                radius: checkinRadius,
                location: checkinLocation
            },
            checkout: {
                lat: checkoutLat,
                lng: checkoutLng,
                radius: checkoutRadius,
                location: checkoutLocation
            }
        };

        // Send data via AJAX to the backend
        $.ajax({
            url: '{{ route('saveLocations') }}',
            type: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                geofence_data: geofenceData
                
            },
            beforeSend: function(){
                // Show loader or do something before sending data
            },
            success: function (data) {
                // Handle success response
                console.log(data);
                new PNotify({
                    title: 'Success',
                    text: 'Geofence settings saved successfully!',
                    type: 'success',
                    hide: true,
                    delay: 1000,
                });
            },
            error: function (data){
                // Handle error response
                new PNotify({
                    title: 'Warning',
                    text: "Failed to save geofence settings!",
                    hide: true,
                    delay: 1500,
                });
            }
        });
    }
// Function to change radius
// function changeRadius(type, action) {
//     var rangeInput = document.getElementById(type + '-radius');
//     var currentValue = parseInt(rangeInput.value);
//     var newValue;

//     if (action === 'increase') {
//         newValue = currentValue + 100; // Increase radius by 100 meters
//     } else if (action === 'decrease' && currentValue > 100) { // Ensure radius doesn't become negative
//         newValue = currentValue - 100; // Decrease radius by 100 meters
//     } else {
//         return; // Exit function if decreasing below 100 meters
//     }

//     rangeInput.value = newValue;
//     updateRadius(type);

//     // Store the new radius value in local storage
//     localStorage.setItem(type + '-radius', newValue);

//     // Redraw the circle with the updated radius
//     drawCircle(type);
// }
function changeRadius(type, action) {
    var rangeInput = document.getElementById(type + '-radius');
    var currentValue = parseInt(rangeInput.value);
    var newValue;

    if (action === 'increase') {
        newValue = currentValue + 100; // Increase radius by 100 meters
    } else if (action === 'decrease') {
        if (currentValue > 100) { // Ensure radius doesn't become negative
            newValue = currentValue - 100; // Decrease radius by 100 meters
        } else if (currentValue === 100) { // Reset radius to 0
            newValue = 0;
        } else {
            return; // Exit function if decreasing below 100 meters
        }
    } else {
        return; // Exit function for unrecognized action
    }

    rangeInput.value = newValue;
    updateRadius(type);

    // Store the new radius value in local storage
    localStorage.setItem(type + '-radius', newValue);

    // Redraw the circle with the updated radius
    drawCircle(type);
     // Uncheck the checkbox if either radius value changes
     var checkinRadius = geoFenceOrgLevel.checkinFenceDataOrg.radius;
    var checkoutRadius = geoFenceOrgLevel.checkoutFenceDataOrg.radius;
    if (newValue !== checkinRadius && newValue !== checkoutRadius) {
        console.log("At least one radius value changed. Unchecking the checkbox.");
        $("#checkoutCheckbox").prop("checked", false);
    }

}



// Function to retrieve radius values from local storage and set them in input fields
function setInitialRadiusValues() {
    var checkinRadius = geoFenceOrgLevel.checkinFenceDataOrg.radius;
    var checkoutRadius = geoFenceOrgLevel.checkoutFenceDataOrg.radius;
    
    var checkinlocation=document.getElementById('checkin-location').value;
    var checkoutlocation=document.getElementById('checkout-location').value;
   
    if(checkinRadius == checkoutRadius && checkinlocation == checkoutlocation){
        $("#checkoutCheckbox").prop( "checked", true );
    }
    if (checkinRadius == null && checkoutRadius == null) {
        console.log("Both radius values are empty. Unchecking the checkbox.");
        $("#checkoutCheckbox").prop("checked", false);
    }
    if (checkinRadius !== null) {
        document.getElementById('checkin-radius').value = checkinRadius;
    }
    if (checkoutRadius !== null) {
        document.getElementById('checkout-radius').value = checkoutRadius;
    }
}

// Function to draw circle on map with updated radius
function drawCircle(type) {
    var map = type == 'checkin' ? mapCheckin : mapCheckout;
    var centerLat = parseFloat(document.getElementById(type + '-lat').value);
    var centerLng = parseFloat(document.getElementById(type + '-lng').value);
    var radius = parseInt(document.getElementById(type + '-radius').value);

    // Remove existing circle if any
    map.eachLayer(function(layer) {
        if (layer instanceof L.Circle) {
            map.removeLayer(layer);
        }
    });

    // Draw new circle with updated radius
    L.circle([centerLat, centerLng], {
        color: 'blue',
        fillColor: 'blue',
        fillOpacity: 0.3,
        radius: radius
    }).addTo(map);
}

// Call the function to set initial radius values when the page loads
window.onload = function() {
    setInitialRadiusValues();
    // Draw circles on map with initial radius values
    drawCircle('checkin');
    drawCircle('checkout');
};
  function refreshMap(mapId) {
        // Clear the values in the input fields
        document.getElementById(`search-box-${mapId}`).value = "";
        document.getElementById(`${mapId}-lat`).value = "";
        document.getElementById(`${mapId}-lng`).value = "";
        document.getElementById(`${mapId}-radius`).value = "";
        document.getElementById(`${mapId}-location`).value = "";

        // Call the initializeMap function to reset the map
        initializeMap();
    }
    // clearing the map data for checkin
function clearCheckinFields() {
        document.getElementById('checkin-lat').value = '';
        document.getElementById('checkin-lng').value = '';
        document.getElementById('checkin-radius').value = '';
        document.getElementById('checkin-location').value = '';
        mapCheckin.eachLayer(function (layer) {
            if (layer instanceof L.Marker || layer instanceof L.Circle) {
                mapCheckin.removeLayer(layer);
            }
        });
        $("#checkoutCheckbox").prop("checked", false);
    $("#checkoutCheckbox").prop("disabled", true);
}
    // clearing the map data for checkout
function clearCheckoutFields() {
        document.getElementById('checkout-lat').value = '';
        document.getElementById('checkout-lng').value = '';
        document.getElementById('checkout-radius').value = '';
        document.getElementById('checkout-location').value = '';
        mapCheckout.eachLayer(function (layer) {
            if (layer instanceof L.Marker || layer instanceof L.Circle) {
                mapCheckout.removeLayer(layer);
            }
        });
}
// autofill the checkin data 
function autoFillCheckoutFields() 
  {
     // Check if the checkbox is checked
            if (document.getElementById('checkoutCheckbox').checked) {
                // Autofill checkout fields with values from check-in fields
                document.getElementById('checkout-lat').value = document.getElementById('checkin-lat').value;
                document.getElementById('checkout-lng').value = document.getElementById('checkin-lng').value;
                document.getElementById('checkout-radius').value = document.getElementById('checkin-radius').value;
                document.getElementById('checkout-location').value = document.getElementById('checkin-location').value;
            } else {
                // Clear checkout fields if the checkbox is unchecked
                document.getElementById('checkout-lat').value = '';
                document.getElementById('checkout-lng').value = '';
                document.getElementById('checkout-radius').value = '';
                document.getElementById('checkout-location').value = '';
            }
  }
  
 // Define a function to fetch and update the geofence data
 function assignedLocation(action) {
        if (action === 'checkin') {
            document.getElementById('checkin-lat').value = geoFenceOrgLevel.checkinFenceDataOrg.lat;
            document.getElementById('checkin-lng').value = geoFenceOrgLevel.checkinFenceDataOrg.long;
            document.getElementById('checkin-radius').value = geoFenceOrgLevel.checkinFenceDataOrg.radius;
            document.getElementById('checkin-location').value = geoFenceOrgLevel.checkinFenceDataOrg.address;
        

        // Get the checkin location and radius
        var checkinLat = document.getElementById('checkin-lat').value;
        var checkinLng = document.getElementById('checkin-lng').value;
        var checkinRadius = document.getElementById('checkin-radius').value;
        var checkinLocation = document.getElementById('checkin-location').value;

        // Update the checkin location and radius fields
        // Clear any existing markers and circles on the checkout map
        mapCheckin.eachLayer(function (layer) {
            if (layer instanceof L.Marker || layer instanceof L.Circle) {
                mapCheckin.removeLayer(layer);
            }
        });
        document.getElementById('checkin-lat').value = checkinLat;
        document.getElementById('checkin-lng').value = checkinLng;
        document.getElementById('checkin-radius').value = checkinRadius;
        document.getElementById('checkin-location').value = checkinLocation;

        // Update the checkout map to match the checkin map
        updateMaps('checkin');

        // Update the location input field with the reverse geocoded address
        reverseGeocode(checkinLat, checkinLng, 'checkin');
        }
        if (action === 'checkout') {
            document.getElementById('checkout-lat').value = geoFenceOrgLevel.checkoutFenceDataOrg.lat;
            document.getElementById('checkout-lng').value = geoFenceOrgLevel.checkoutFenceDataOrg.long;
            document.getElementById('checkout-radius').value = geoFenceOrgLevel.checkoutFenceDataOrg.radius;
            document.getElementById('checkout-location').value = geoFenceOrgLevel.checkoutFenceDataOrg.address;
        

        // Get the checkout location and radius
        var checkoutLat = document.getElementById('checkout-lat').value;
        var checkoutLng = document.getElementById('checkout-lng').value;
        var checkoutRadius = document.getElementById('checkout-radius').value;
        var checkoutLocation = document.getElementById('checkout-location').value;

        // Update the checkout location and radius fields
        // Clear any existing markers and circles on the checkout map
        mapCheckout.eachLayer(function (layer) {
            if (layer instanceof L.Marker || layer instanceof L.Circle) {
                mapCheckout.removeLayer(layer);
            }
        });
        document.getElementById('checkout-lat').value = checkoutLat;
        document.getElementById('checkout-lng').value = checkoutLng;
        document.getElementById('checkout-radius').value = checkoutRadius;
        document.getElementById('checkout-location').value = checkoutLocation;

        // Update the checkout map to match the checkin map
        updateMaps('checkout');

        // Update the location input field with the reverse geocoded address
        reverseGeocode(checkoutLat, checkoutLng, 'checkout');
        }
        event.preventDefault();
    }
    //prevent

    function updateMaps(action) {
    // Update maps based on action (e.g., 'checkin' or 'checkout')
    var mapToUpdate;
    var latField, lngField, radiusField, locationField;

    if (action === 'checkin') {
        mapToUpdate = mapCheckin;
        latField = 'checkin-lat';
        lngField = 'checkin-lng';
        radiusField = 'checkin-radius';
        locationField = 'checkin-location';
    } else if (action === 'checkout') {
        mapToUpdate = mapCheckout;
        latField = 'checkout-lat';
        lngField = 'checkout-lng';
        radiusField = 'checkout-radius';
        locationField = 'checkout-location';
    }

    var lat = document.getElementById(latField).value;
    var lng = document.getElementById(lngField).value;
    var radius = document.getElementById(radiusField).value;

    // Update map view
    mapToUpdate.setView([lat, lng], 13);

    // Add marker and circle to the map
    var marker = L.marker([lat, lng]).addTo(mapToUpdate);
    var circle = L.circle([lat, lng], {
        color: 'blue',
        fillColor: 'blue',
        fillOpacity: 0.3,
        radius: radius
    }).addTo(mapToUpdate);
}
function storeCheckboxState() {
    var checkoutCheckbox = document.getElementById('checkoutCheckbox');
    var checkoutCheckboxState = checkoutCheckbox.checked ? 'checked' : 'unchecked';
    localStorage.setItem('checkoutCheckboxState', checkoutCheckboxState);
}




</script>
@endsection