@if(isset($userdetail))
<form class="wizard" id="settingForm" action="{{url('/setting-tab')}}" method="POST">
<!-- <input type="hidden" name="_method" value="PATCH"/> -->
<input type ="hidden" name="editUserdetail" value = {{$editUserdetail}}>
<input type ="hidden" name="user_id" id="user_id" value = {{$user->id}}>
@else
<form class="wizard" id="settingForm" action="{{url('/setting-tab')}}" data-fouc method="POST">
<input type ="hidden" name="editUserdetail" value = {{$editUserdetail}}>
@endif
   @csrf
   <fieldset class="mb-6">
      <div class="form-group row">  
             <br><br>                      
                    <label class="col-form-label col-lg-3"> Holiday List:</label>
                    
                    <div class="col-lg-9">
                        
                         <select name="holiday_list" class="form-control select-multiple-drag required">
                        
                        
                            @if(isset($holidaylist))
                            <option></option>
                                @foreach ($holidaylist as $holiday)
                                    <option value="{{ $holiday->id }}"
                                    @if(isset($userdetail))
                                           
                                            @if ($userdetail->holiday_list_id == $holiday->id)
                                            {{ 'selected="selected"' }}
                                             @endif 
                                            @endif
                                            >
                                        {{ $holiday->name }}
                                        
                                    </option>
                                @endforeach
                           
                            @endif
                        </select>
                    </div>         
                </div>
      <h3>Manual Leave Allocation</h3>
      <div class="form-group row">
         <label class="col-form-label col-lg-3 font-weight-semibold">Leave Type
         </label>
         <div class="col-lg-9">
            <div class="form-check">
               <label class="form-check-label font-weight-semibold">Balance</label>
            </div>
         </div>
      </div>

      @foreach ($leaveBalances as $leaveBalance)
         <div class="form-group row">
            <label class="col-form-label col-lg-3 font-weight-semibold">{{ $leaveBalance['abbr'] }} :
            </label>
            <div class="col-lg-9">
               <div class="form-check">
                  <label class="form-check-label">
                  <input type="number" step="0.1" name="{{ $leaveBalance['id'] }}" id="{{ $leaveBalance['id'] }}" placeholder="Enter {{$leaveBalance['abbr']}}" value="{{ $leaveBalance['leave_balance'] }}">
                  </label>
               </div>
            </div>
         </div>
      @endforeach
      <!-- <div class="form-group row">
                <div class='card'> -->
                    <div class="form-group row card-header header-elements-inline">
                        <h5 class="card-title  font-weight-bold">Attendance </h5>
                    </div>
                    <div class='card-body row form-group row'>
                        <div class="form-group col-lg-4">
                            <label class="col-form-label font-weight-semibold pt-0"><h3>Attendance Marking:</h3>
                            </label>
                        </div>
                        
                        <div class="col-lg-6 form-group">
                            <div class="form-check">
                                <form id="UserAttendanceForm" method="POST" action="{{ route('storeAttendanceUser') }}">
                                @csrf
                                <div class="form-check">
                                    
                                    <input type="radio" class="form-check-input " id="no_checkin" name="check"
                                    value="1" {{ $valUser == '1' ? 'checked' : '' }}> 
                                    <label for="no_checkin"><strong>No Check In Required</strong> <br>
                                        <span> Attendance data will not be based on check in/out data</span>
                                    </label>  
                                </div>   
                                <div class="form-check">
                                    <input type="radio" class="form-check-input" id="only_checkin" name="check"
                                    value="2" {{ $valUser == '2' ? 'checked' : '' }}> 
                                    <label for="only_checkin"><strong>Only Check In Required</strong> <br>
                                        <span> Attendance data will be generated based on check Ins</span>
                                    </label>
                                </div>
                                <div class="form-check">    
                                    <input type="radio" class="form-check-input" id="both_checkin" name="check"
                                    value="3" {{ $valUser == '3' ? 'checked' : '' }}> 
                                    <label for="both_checkin"><strong>Both check in & Check Out required</strong> <br>
                                        <span> Attendance data will be generated based on both check in & out data</span>
                                    </label>
                                </div>    
                                   
                            </div>
                            
                        </div>
                    </div> 
        <div class="form-group row">
        <form id="UserEngagementType" method="POST" action="{{ route('storeEngagementType') }}">
            <h5 class="form-check font-weight-bold col-lg-4" style="margin-left: 1px;">Engagement Type </h5>
                <div class="form-check " style="width:11%; margin-left: 2.9rem;">
                    <input type="radio" class="form-check-input" id="Employee" name="emp_type"
                    value="Employee" {{ $empType == 'Employee' ? 'checked' : '' }}> 
                    <label for="Employee">Employee
                    </label>
                </div>
                <div class="form-check " style="width:11%">
                    <input type="radio" class="form-check-input" id="Contract" name="emp_type"
                    value="Contract" {{ $empType == 'Contract' ? 'checked' : '' }}> 
                    <label for="Contract">Contract
                    </label>
                </div>
                <div class="form-check " style="width:11%">
                    <input type="radio" class="form-check-input" id="Consultant" name="emp_type"
                    value="Consultant" {{ $empType == 'Consultant' ? 'checked' : '' }}> 
                    <label for="Consultant">Consultant
                    </label>
                </div>
                <div class="form-check " style="width:11%">
                    <input type="radio" class="form-check-input" id="Intern" name="emp_type"
                    value="Intern" {{ $empType == 'Intern' ? 'checked' : '' }}> 
                    <label for="Intern">Intern
                    </label>
                </div>
        </div>
        <div class="form-group row" style="text-align: -webkit-right;">
            <div class="col-md-3 row">
                <label class="form-check-label col-md-6" style="padding-top: 0.6rem;" for="start_date">Start Date <span class="text-danger">*</span></label>
                <div class="col-md-6">
                    <input type="text" name="start_date" placeholder="{{ config('settings.date_format') }}" data-date-format="{{ config('settings.date_format') }}" id="start_date" readonly="readonly" class="form-control" @if(isset($startDateEndDate[0])) value="{{ $startDateEndDate[0] }}" @endif/>
                </div>
            </div>
            <div class="col-md-3 row">
                <label class="form-check-label col-md-6" style="padding-top: 0.6rem;" for="end_date">End Date <span class="text-danger">*</span></label>
                <div class="col-md-6">
                    <input type="text" name="end_date" placeholder="{{ config('settings.date_format') }}" data-date-format="{{ config('settings.date_format') }}" id="end_date" readonly="readonly" class="form-control" @if(isset($startDateEndDate[1])) value="{{ $startDateEndDate[1] }}" @endif />
                </div>
            </div>
        </div> 

        <h5 class="card-title  font-weight-bold" style="padding-top: 1rem;">Geofence Setting </h5>
        <div class="row">
            <div class="col-md-6">
                <div id="map-checkin" style="height: 272px;">
                    <input type="text" id="search-box-checkin" placeholder="Search location">
                </div>
                <h2 style="padding-top: 1rem;">Select Check-in Location</h2>
                <div class="form-group mt-3" hidden>
                    <label for="checkin-lat">Latitude:</label>
                    <input type="text" class="form-control" id="checkin-lat" name="checkin_lat" onchange="updateLocation('checkin')" value="{{$geoFenceUserLevel['checkinFenceDataUser']['lat'] ?? null}}">
                </div>
                <div class="form-group" hidden>
                    <label for="checkin-lng">Longitude:</label>
                    <input type="text" class="form-control" id="checkin-lng" name="checkin_long" onchange="updateLocation('checkin')" value="{{$geoFenceUserLevel['checkinFenceDataUser']['long'] ?? null}}">
                </div>
                <div class="form-group">
                    <label for="checkin-radius">Radius (in meters):</label>
                    <input type="number" class="form-control" id="checkin-radius" name="checkin_radius" onchange="updateRadius('checkin')" value="{{$geoFenceUserLevel['checkinFenceDataUser']['radius'] ?? null}}" readonly>
                    <button class="btn btn-primary"  onclick="changeRadius('checkin', 'increase')">+</button>
                    <button class="btn btn-primary"  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" name="checkin_address" value="{{$geoFenceUserLevel['checkinFenceDataUser']['address'] ?? null}}" readonly>
                </div>
                <div style="float: inline-end;">
                    <button class="btn btn-primary"  id="assignedLocationCheckin" onclick="assignedLocation('checkin')">Assigned Location</button>
                    <i class="delete-checkin btn btn-danger" id="delete-checkin-icon" style="font-style: normal;"  onclick="clearCheckinFields()">Clear</i>
                </div>
            </div>

                <div class="col-md-6">
                    <div id="map-checkout" style="height: 272px;">
                        <input type="text" id="search-box-checkout" placeholder="Search location">
                    </div>
                    <div>
                        <label for="checkoutCheckbox" style="float: inline-end; padding-top: 1.5rem;">
                            <input type="checkbox" id="checkoutCheckbox" onchange="autoFillCheckoutFields()">
                            Same as Checkin
                        </label>
                        <h2 style="padding-top: 1rem;">Select Check-out Location</h2>
                    </div>
                    <div class="form-group mt-3" hidden>
                        <label for="checkout-lat">Latitude:</label>
                        <input type="text" class="form-control" id="checkout-lat" name="checkout_lat" onchange="updateLocation('checkout')" value="{{$geoFenceUserLevel['checkoutFenceDataUser']['lat'] ?? null}}">
                    </div>
                    <div class="form-group" hidden>
                        <label for="checkout-lng">Longitude:</label>
                        <input type="text" class="form-control" id="checkout-lng" name="checkout_long" onchange="updateLocation('checkout')" value="{{$geoFenceUserLevel['checkoutFenceDataUser']['long'] ?? null}}">
                    </div>
                    <div class="form-group">
                        <label for="checkout-radius">Radius (in meters):</label>
                        <input type="number" class="form-control" id="checkout-radius" name="checkout_radius" onchange="updateRadius('checkout')" value="{{$geoFenceUserLevel['checkoutFenceDataUser']['radius'] ?? null}}" readonly>
                        <button class="btn btn-primary" onclick="changeRadius('checkout', 'increase')">+</button>
                        <button class="btn btn-primary" 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" name="checkout_address" value="{{$geoFenceUserLevel['checkoutFenceDataUser']['address'] ?? null}}" readonly>
                    </div>
                    <div style="float: inline-end;">
                        <button class="btn btn-primary" id="assignedLocationCheckout" onclick="assignedLocation('checkout')">Assigned Location</button>
                        <i class="delete-checkout btn btn-danger" id="delete-checkout-icon" style="font-style: normal;" onclick="clearCheckoutFields()">Clear</i>
                    </div>
                </div>
        </div>
        <div>
            <div class='card-body row' style="margin-top: 2rem;">
                <div class="form-group col-lg-4">
                    <label class="col-form-label font-weight-semibold pt-0"><h3> Attendance Platforms:</h3>
                    </label>
                </div>
                
                <div class="col-lg-6 form-group">
                
                        <div class="form-check form-check-inline">
                            <input type="checkbox" class="weekend form-check-input-styled-primary" id="Chrome_extension" value-id= "checked" name="check1" value="Chrome_extension" @if (isset($platformUser) && is_array(json_decode($platformUser)) && in_array('Chrome_extension', json_decode($platformUser))) checked @endif>
                            <label class="form-check-label" for="Chrome_extension"><strong>Chrome extension</strong></label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input type="checkbox" class="weekend form-check-input-styled-primary" id="Mobile_Device" name="check2" value="Mobile_Device" value-id= "checked"  @if (isset($platformUser) && is_array(json_decode($platformUser)) && in_array('Mobile_Device', json_decode($platformUser))) checked @endif>
                            <label class="form-check-label" for="Mobile_Device"><strong>Mobile Device</strong></label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input type="checkbox" class="weekend form-check-input-styled-primary" id="Biometric" name="check3" value="Biometric" value-id= "checked"  @if (isset($platformUser) && is_array(json_decode($platformUser)) && in_array('Biometric', json_decode($platformUser))) checked @endif>
                            <label class="form-check-label" for="Biometric"><strong>Biometric</strong></label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input type="checkbox" class="weekend form-check-input-styled-primary" id="Browser" name="check4" value="Browser" value-id= "checked"  @if (isset($platformUser) && is_array(json_decode($platformUser)) && in_array('Browser', json_decode($platformUser))) checked @endif>
                            <label class="form-check-label" for="Browser"><strong>Browser</strong></label>
                        </div>
            
                </div>
            </div>
        </div>
   </fieldset>
   <button type="submit" name="status" value="" class="btn btn-primary savegeo">
   <i ></i>Save</button>
</form>

<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>
<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 geoFenceUserLevel = @json($geoFenceUserLevel);

// Store the data in local storage
localStorage.setItem('geoFenceUserLevel', JSON.stringify(geoFenceUserLevel));
// Get the data in local storage
var storedData = localStorage.getItem('geoFenceUserLevel');
var geoFenceUserLevel = JSON.parse(storedData);
console.log('GeoFenceUserLevel:', geoFenceUserLevel.checkinFenceDataUser.radius);

// Check if any of the variables are null or empty for checkin
if (geoFenceUserLevel.checkinFenceDataUser.lat == null && geoFenceUserLevel.checkinFenceDataUser.long == null && 
    geoFenceUserLevel.checkinFenceDataUser.Radius == null && geoFenceUserLevel.checkinFenceDataUser.address == null) {
    // Disable the button
    document.getElementById('assignedLocationCheckin').disabled = true;
} else {
    // Enable the button
    document.getElementById('assignedLocationCheckin').disabled = false;
}

// Check if any of the variables are null or empty for checkout
if (geoFenceUserLevel.checkoutFenceDataUser.lat == null && geoFenceUserLevel.checkoutFenceDataUser.long == null &&
    geoFenceUserLevel.checkoutFenceDataUser.Radius == null && geoFenceUserLevel.checkoutFenceDataUser.address == null) {
    // Disable the button
    document.getElementById('assignedLocationCheckout').disabled = true;
} else {
    // Enable the button
    document.getElementById('assignedLocationCheckout').disabled = false;
}


  function getEngagementType(){
    var engagementType = $('input[name="emp_type"]:checked').val();

    $.ajax({
      url: '{{ route('storeEngagementType') }}',
      type: 'POST',
      data: {
        _token: '{{ csrf_token() }}',
        value: engagementType
      },
      success: function (data) {
        console.log(data);
      },
      error: function (data){
      }
    });
  }

  var startDate = new Date(new Date().getFullYear(), 0, 1);
  var endDate = new Date(new Date().getFullYear(), 36, 00); 
  $("#start_date").datepicker({
        autoclose: true,
        startDate: startDate,
    }).on('changeDate', function(selected) {
        var start_date = $("#start_date").val();
    });
  $("#end_date").datepicker({
        autoclose: true,
        endDate: endDate,
    }).on('changeDate', function(selected) {
        var end_date = $("#end_date").val();
    });

    function sendDataToController() {
        var start_date = $("#start_date").val();
        var end_date = $("#end_date").val();
            $.ajax({
                url: '/setting-tab',
                type: 'POST', 
                data: {
                    start_date: start_date,
                    end_date: end_date
                },
                success: function(response) {
                    console.log(response);
                },
                error: function(error) {
                    console.error("Error: " + error.statusText);
                }
            });
    }

    function getStartDateEndDate(){
        $.ajax({
            url: '{{ route('getStartDateEndDate') }}',
            type: 'GET',
            data: {
            },
            success: function (data) {
                console.log(data);
            },
            error: function (data){
            }
        });
    }

   //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: "Show me where I am, yo!"
            }
        }).addTo(mapCheckin);

        // Adding locate control to mapCheckout
        var lcCheckout = L.control.locate({
            position: "topright",
            strings: {
                title: "Show me where I am, yo!"
            }
        }).addTo(mapCheckout);

    var osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(mapCheckin);

    var osmLayer2 = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).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; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    });

    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; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    });

    var baseLayers = {
        "OpenStreetMap": osmLayer,
        "Satellite Imagery": satelliteLayerCheckin
    };

    var baseLayers2 = {
        "OpenStreetMap": osmLayer2,
        "Satellite Imagery": satelliteLayerCheckout
    };

    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: {
            circle: true,
            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);
                }
            });
        }
    });
    
    $('.content li.nav-item:last-of-type').on('shown.bs.tab', function (e) {
        mapCheckin.invalidateSize();
        mapCheckout.invalidateSize();
    });

    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');
    });
    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');
    });

    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);

        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);

        reverseGeocode(center.lat, center.lng, 'checkout');
    }

    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);
        }
    }

    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) {
        fetch(`https://nominatim.openstreetmap.org/reverse?lat=${lat}&lon=${lng}&format=json&accept-language=en`)
            .then(response => response.json())
            .then(data => {
                const locationName = data.display_name;
                document.getElementById(type + '-location').value = locationName;
            })
            .catch(error => {
                console.error('Error in reverse geocoding:', error);
            });
    }

    function toggleFullscreen(type) {
        var map = type == 'checkin' ? mapCheckin : mapCheckout;
        map.toggleFullscreen();
    }
    getCurrentLocation('checkin');
    getCurrentLocation('checkout');
    
//     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 > 0) { // 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);

//     // Prevent the default form submission behavior
//     event.preventDefault();
//   }
function changeRadius(type, action) {
    event.preventDefault();
    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);
    var checkinRadius =  geoFenceUserLevel.checkinFenceDataUser.radius;
    var checkoutRadius =  geoFenceUserLevel.checkoutFenceDataUser.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 =  geoFenceUserLevel.checkinFenceDataUser.radius;
    var checkoutRadius =  geoFenceUserLevel.checkoutFenceDataUser.radius;
    console.log(checkoutRadius);
    console.log(checkinRadius);
    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 == "" && checkoutRadius == "") {
    $("#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');
};

  document.getElementById('delete-checkin-icon').addEventListener('click', function() {
    // Clear input fields
    document.getElementById('checkin-lat').value = '';
    document.getElementById('checkin-lng').value = '';
    document.getElementById('checkin-radius').value = '';
    document.getElementById('checkin-location').value = '';

    // Remove existing layers on the map
    mapCheckin.eachLayer(function(layer) {
        if (layer instanceof L.Marker || layer instanceof L.Circle) {
        mapCheckin.removeLayer(layer);
        }
    });
});

document.getElementById('delete-checkout-icon').addEventListener('click', function() {
    // Clear input fields
    document.getElementById('checkout-lat').value = '';
    document.getElementById('checkout-lng').value = '';
    document.getElementById('checkout-radius').value = '';
    document.getElementById('checkout-location').value = '';

    // Remove existing layers on the map
    mapCheckout.eachLayer(function(layer) {
        if (layer instanceof L.Marker || layer instanceof L.Circle) {
        mapCheckout.removeLayer(layer);
        }
    });
});

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 = '';
            }
        }
        // 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);
                }
            });
    }

    function assignedLocation(action) {
        if (action === 'checkin') {
            document.getElementById('checkin-lat').value = geoFenceUserLevel.checkinFenceDataUser.lat;
            document.getElementById('checkin-lng').value = geoFenceUserLevel.checkinFenceDataUser.long;
            document.getElementById('checkin-radius').value = geoFenceUserLevel.checkinFenceDataUser.radius;
            document.getElementById('checkin-location').value = geoFenceUserLevel.checkinFenceDataUser.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 = geoFenceUserLevel.checkoutFenceDataUser.lat;
            document.getElementById('checkout-lng').value = geoFenceUserLevel.checkoutFenceDataUser.long;
            document.getElementById('checkout-radius').value = geoFenceUserLevel.checkoutFenceDataUser.radius;
            document.getElementById('checkout-location').value = geoFenceUserLevel.checkoutFenceDataUser.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();
    }

    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);
}
</script>