@extends('layouts.mainlayout')
@section('title', 'Team')
@section('main')
<style>
    #map { height: 180px; }
</style>
<!-- Form validation -->
<!-- geofencing librarry to show the map -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/leaflet.css" />
<div class="card">
    <div class="card-header header-elements-inline">
        <h5 class="card-title icon-users4 font-weight-bold"> Create/Edit Team</h5>
    </div>
    <div class="card-body">
        @if(isset($team))
        <form class="form-validate-jquery" id="TeamForm" action="{{ route('team.update',$team->id) }}" method="POST">
            <input type="hidden" name="_method" value="PATCH"/>
            <input type="hidden" id="teamid"  value="{{ $team->id }}"/>
            {{-- <input type ="text" name="user_id" value="1"> --}}
        @else
        <form class="form-validate-jquery" id="TeamForm" action="{{ route('team.store') }}" method="POST">
        @endif
            @csrf
            <fieldset class="mb-3">
                <legend class="text-uppercase font-size-sm font-weight-bold"> Team</legend>
                <!-- Basic text input -->
                <div class="form-group row">
                    <label class="col-form-label col-lg-3">@if(isset($team)) {{ 'Edit Team' }}
                        @else {{ 'Add Team' }}@endif<span class="text-danger"></span></label>
                    <div class="col-lg-9">
                        <input type="text" name="team" class="form-control @error('team') is-invalid @enderror"
                               required placeholder="Team Name" @if(isset($team)) value="{{old('team')? old('team') : $team->team}}" autofocus @else value="{{old('team')}}" @endif />
                        @error('team')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                    @enderror
                    </div>
                </div>
                <div class="form-group row">                        
                    <label class="col-lg-3"> Does this team work on a schedule?<br>
                        (Choose if this team has multiple shifts)
                    </label>
                    <div class="col-lg-9">
                        @if(old("has_schedule")  == 1 || (isset($team) && $team->has_schedule == 1))  
                          <input type="radio" id="has_schdule_yes" class="
                        form-radio-input-styled-primary" name="has_schedule" value="1" checked="" onclick="setoption('1')">
                          <label for="has_schdule_yes">Yes</label><br>
                          <input type="radio" class="
                        form-radio-input-styled-primary" id="has_schdule_no" name="has_schedule" value="0" onclick="setoption('0')">
                          <label for="has_schdule_no">No</label>
                        @else
                            <input type="radio" id="has_schdule_yes" class="
                        form-radio-input-styled-primary" name="has_schedule" value="1" onclick="setoption('1')">
                          <label for="has_schdule_yes">Yes</label><br>
                          <input type="radio" class="
                        form-radio-input-styled-primary" id="has_schdule_no" name="has_schedule" value="0" checked="" onclick="setoption('0')">
                          <label for="has_schdule_no">No</label>
                        @endif
                    </div>
                </div>
                
                 <!-- <div class="form-group row">                        
                    <label class="col-lg-3"> <br>
                    </label>
                    <div class="col-lg-9">
                        @if(old("has_holiday") == 1 || (isset($team) && $team->has_holiday == 1))
                            <input type="radio" id="has_holiday_yes" class="form-radio-input-styled-primary" name="has_holiday" value="1" checked="" onclick="setoption('1')">
                            <label for="has_holiday_yes">Yes</label><br>
                            <input type="radio" class="form-radio-input-styled-primary" id="has_holiday_no" name="has_holiday" value="0" onclick="setoption('0')">
                            <label for="has_holiday_no">No</label>
                        @else
                            <input type="radio" id="has_holiday_yes" class="form-radio-input-styled-primary" name="has_holiday" value="1" onclick="setoption('1')">
                            <label for="has_holiday_yes">Yes</label><br>
                            <input type="radio" class="form-radio-input-styled-primary" id="has_holiday_no" name="has_holiday" value="0" checked="" onclick="setoption('0')">
                            <label for="has_holiday_no">No</label>
                        @endif
                    </div> -->

                <!-- </div> -->
                <div class="form-group row">                        
                    <label class="col-form-label col-lg-3"> Shift:</label>
                    <div class="col-lg-9" id="multipleselection">
                         
                         <select name="shift_id[]" class="form-control select-multiple-drag required" multiple="multiple">
                         
                        
                            @if(isset($shifts))
                            <option></option>
                                @foreach ($shifts as $shift)
                                    <option @ value="{{ $shift->id }}"
                                    @if(isset($teamshift))
                                            @foreach($teamshift as $selectshift)
                                            @if (old("shift_id") ? in_array($shift->id, old("shift_id")) : $selectshift->shift_id == $shift->id){{ 'selected="selected"' }} @endif 
                                            @endforeach 
                                            @else
                                            @if (old("shift_id"))
                                            {{ in_array($shift->id, old("shift_id")) ? "selected":"" }}
                                            @endif
                                            @endif>
                                        {{ $shift->shift }}
                                    </option>
                                @endforeach
                            @else
                            <option></option>
                                @foreach ($shifts as $shift)
                                    <option></option>
                                    <option  value="{{$shift->id}}">{{ $shift->shift }}</option>
                                @endforeach
                            @endif
                        </select>
                    </div> 
                    <div class="col-lg-9" id="sigleselection">
                        
                         <select name="single_shift_id[]" class="form-control select-multiple-drag required">
                        
                        
                            @if(isset($shifts))
                            <option></option>
                                @foreach ($shifts as $shift)
                                    <option @ value="{{ $shift->id }}"
                                    @if(isset($teamshift))
                                            @foreach($teamshift as $selectshift)
                                            @if (old("shift_id") ? in_array($shift->id, old("shift_id")) : $selectshift->shift_id == $shift->id){{ 'selected="selected"' }} @endif 
                                            @endforeach 
                                            @else
                                            @if (old("shift_id"))
                                            {{ in_array($shift->id, old("shift_id")) ? "selected":"" }}
                                            @endif
                                            @endif>
                                        {{ $shift->shift }}
                                    </option>
                                @endforeach
                            @else
                            <option></option>
                                @foreach ($shifts as $shift)
                                    <option></option>
                                    <option  value="{{$shift->id}}">{{ $shift->shift }}</option>
                                @endforeach
                            @endif
                        </select>
                    </div>         
                </div>
                <div class="form-group row">
                    <label class="col-lg-3">Show holiday calendar to team members:</label>
                    <div class="checkbox">
                    <label>
                    <input type="checkbox" id="schedule_checkbox" name="has_holiday" @if (old("has_holiday") == 1 || (isset($team) && $team->has_holiday == 1))  checked @endif>
                    <input type="hidden" name="has_holiday" value="{{ old('has_holiday', isset($team) ? $team->has_holiday : 0) }}">
                    </label>
                    </div>
                </div>      
             <div class="form-group row holiday_list">  
             <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 style="display:none;"></option>
                                @foreach ($holidaylist as $holiday)
                                    <option value="{{ $holiday->id }}"
                                    @if(isset($team))
                                           
                                            @if ($team->holiday_list_id == $holiday->id)
                                            {{ 'selected="selected"' }}
                                             @endif 
                                            @endif
                                            >
                                        {{ $holiday->name }}
                                        
                                    </option>
                                @endforeach
                           
                            @endif
                        </select>
                    </div>         
                </div>
                <div class="form-group row">
                    <div class='card'>
                        <div class="card-header header-elements-inline">
                            <h5 class="card-title  font-weight-bold">Attendance </h5>
                        </div>
                    <div class='card-body 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="TeamAttendanceForm" method="POST" action="{{ route('storeAttendanceTeam') }}">
                                @csrf
                                <div class="form-check">
                                    <input type="radio" class="form-check-input " id="no_checkin" name="check"
                                    value="1" {{ $valTeam == '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" {{ $valTeam == '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" {{ $valTeam == '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>
                </div>    
             <!-- geofencing section-->
                <div class="row">
                        <div class="col-md-6">
                            <h2 style="text-align:center">Check-in Location</h2>
                            <div id="map-checkin" style="height: 272px;">  <input type="text" id="search-box-checkin" placeholder="Search location"></div>
                            <div class="form-group mt-3" hidden>
                                <label for="checkin-lat">Latitude:</label>
                                <input type="text" class="form-control" name="checkin_lat" value="{{ $team_geofence['checkinFenceDataTeam']['lat'] ?? null }}" id="checkin-lat" onchange="updateLocation('checkin')">
                            </div>
                            <div class="form-group" hidden>
                                <label for="checkin-lng">Longitude:</label>
                                <input type="text" class="form-control" name="checkin_long" value="{{ $team_geofence['checkinFenceDataTeam']['long']?? null }}" id="checkin-lng" onchange="updateLocation('checkin')">
                            </div>
                            <div class="form-group" style="padding-top: 1.5rem;">
                                <label for="checkin-radius">Radius (in meters):</label>
                                <input type="number" class="form-control" name="checkin_radius" value="{{ $team_geofence['checkinFenceDataTeam']['radius']?? null }}" id="checkin-radius" value="" 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" name="checkin_address" value="{{ $team_geofence['checkinFenceDataTeam']['address']?? null }}" id="checkin-location" readonly>
                                <button class="btn btn-danger" style="margin-top: 13px;" id="checkinclear" onclick="clearCheckinFields()">Clear</button>
                                <button class="btn btn-primary" id="assignedcheckin" style="margin-top: 13px;"  onclick="assignedLocation('checkin')">Assigned Location</button>
                            </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="form-group mt-3" hidden>
                                <label for="checkout-lat">Latitude:</label>
                                <input type="text" class="form-control" name="checkout_lat" value="{{ $team_geofence['checkoutFenceDataTeam']['lat']?? null }}" id="checkout-lat" onchange="updateLocation('checkout')">
                            </div>
                            <div class="form-group" hidden>
                                <label for="checkout-lng">Longitude:</label>
                                <input type="text" class="form-control" name="checkout_long" value="{{ $team_geofence['checkoutFenceDataTeam']['long'] ?? null}}" id="checkout-lng" onchange="updateLocation('checkout')">
                            </div>
                            <div class="form-group">
                                <label for="checkout-radius" style="padding-top: 1.5rem;">Radius (in meters):</label>
                                <input type="number" class="form-control" name="checkout_radius" value="{{ $team_geofence['checkoutFenceDataTeam']['radius']?? null }}" id="checkout-radius" value="" 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" name="checkout_address" value="{{ $team_geofence['checkoutFenceDataTeam']['address']?? null }}" id="checkout-location" readonly>
                                <button class="btn btn-danger" style="margin-top: 13px;" id="checkoutclear" onclick="clearCheckoutFields()">Clear</button>
                                <button class="btn btn-primary" style="margin-top: 13px;" id="assignedcheckout" style="margin-top: 13px;"  onclick="assignedLocation('checkout')">Assigned Location</button>
                            </div>
                        </div>
                </div>
                
                <div class='' style="margin-top: 2rem;">
                    <div class='card-body row'>
                        <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="only_Chrome_extension" name="check1" value="Chrome_extension" {{ !empty($platformMarkval) && in_array('Chrome_extension', json_decode($platformMarkval)) ? 'checked' : '' }}>
                                <label class="form-check-label" for="only_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="only_Mobile_Device" name="check2" value="Mobile_Device" {{ !empty($platformMarkval) && in_array('Mobile_Device', json_decode($platformMarkval)) ? 'checked' : '' }}>
                                <label class="form-check-label" for="only_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" {{ !empty($platformMarkval) && in_array('Biometric', json_decode($platformMarkval)) ? 'checked' : '' }}>
                                <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" {{ !empty($platformMarkval) && in_array('Browser', json_decode($platformMarkval)) ? 'checked' : '' }}>
                                <label class="form-check-label" for="Browser"><strong>Browser</strong></label>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /basic text input -->
            </fieldset>
            <div class="d-flex justify-content-end align-items-center">
                <button type="submit"  id="submitButton" class="btn btn-primary ml-3">@if(isset($team)) {{ 'Update' }}
                         @else {{ 'Save' }} @endif<i class="icon-paperplane ml-2" ></i></button>
                <a class="btn btn-default btn-close btn-danger ml-3" href="{{ route('team.index') }}">Cancel</a>
            </div>
        </form>
    </div>
</div>
<!-- /form validation -->
<script src="{{asset('global_assets/js/demo_pages/custom_ams/validation/team_create_validation.js')}}"></script>

    <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>
    <!-- CSS -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet-search/dist/leaflet-search.min.css" />
    <!-- JavaScript -->
    <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://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 team_geofence = @json($team_geofence);
    // Store the data in local storage
    localStorage.setItem('team_geofence', JSON.stringify(team_geofence));
    // Get the data in local storage
    var storedData = localStorage.getItem('team_geofence');
    var team_geofence = JSON.parse(storedData);
    console.log(team_geofence.checkinFenceDataTeam.radius)
    if(team_geofence === null)
    {
        document.getElementById("assignedcheckin").disabled = true;
        document.getElementById("assignedcheckout").disabled = true;
    }
    else{
        if (team_geofence.checkinFenceDataTeam.lat === null || team_geofence.checkinFenceDataTeam.long === null) {
            document.getElementById("assignedcheckin").disabled = true;
        }

        if (team_geofence.checkoutFenceDataTeam.lat === null || team_geofence.checkoutFenceDataTeam.long === null) {
            document.getElementById("assignedcheckout").disabled = true;
        }
    function setInitialRadiusValues() {
        var checkinRadius = team_geofence.checkinFenceDataTeam.radius;
        var checkoutRadius = team_geofence.checkoutFenceDataTeam.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;
        }
    }

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

    L.control.layers(baseLayers).addTo(mapCheckin);
    L.control.layers(baseLayers2).addTo(mapCheckout);
    mapCheckin.addControl(new L.Control.Fullscreen());
    mapCheckout.addControl(new L.Control.Fullscreen());
    
    // 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 checkout 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 checkin 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);
            });
    }   
    //get the current location on load for checkin and checkout
        getCurrentLocation('checkin');
        getCurrentLocation('checkout');
        
    // chnaging the radius by clicking the + and - icons button
    // 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' && 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);
            
    // }
    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 = team_geofence.checkinFenceDataTeam.radius;
    var checkoutRadius = team_geofence.checkoutFenceDataTeam.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 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);
                }
            });
    }
    //get the last location from database teamsetting
    function assignedLocation(action) {
        if (action === 'checkin') {
            document.getElementById('checkin-lat').value = team_geofence.checkinFenceDataTeam.lat;
            document.getElementById('checkin-lng').value = team_geofence.checkinFenceDataTeam.long;
            document.getElementById('checkin-radius').value = team_geofence.checkinFenceDataTeam.radius;
            document.getElementById('checkin-location').value = team_geofence.checkinFenceDataTeam.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 = team_geofence.checkoutFenceDataTeam.lat;
            document.getElementById('checkout-lng').value = team_geofence.checkoutFenceDataTeam.long;
            document.getElementById('checkout-radius').value = team_geofence.checkoutFenceDataTeam.radius;
            document.getElementById('checkout-location').value = team_geofence.checkoutFenceDataTeam.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);
    }
    document.getElementById("checkinclear").onclick = function(e) { 
        e.preventDefault();
        clearCheckinFields();
    }; 
    document.getElementById("checkoutclear").onclick = function(e) { 
        e.preventDefault();
        clearCheckoutFields();
    }; 
//..........end of geofencing code.......//

    function handleRadioChange() {
         var selectedValue = $('input[name="has_schedule"]:checked').val();
         if (selectedValue === '0' || ($('#schedule_checkbox').prop('checked') && selectedValue === '1')) {
             $('.holiday_list').show();
         } else {
             $('.holiday_list').hide();
         }
    }
    $(document).ready(function() {
        var schedule = $('input[name="has_schedule"]:checked').val();
        setoption(schedule);
        updateCheckboxStatus();
        $('input[name="has_schedule"]').on('change', function() {
            updateCheckboxStatus();
        });        
        $('#schedule_checkbox').on('change', function() {
        if ($(this).is(':checked')) {
            $('input[name="has_holiday"]').val(1);
        } else {
            $('input[name="has_holiday"]').val(0);
        }
        });
        handleRadioChange(); 
        $('input[name="has_schedule"]').on('change', function () {
            handleRadioChange();
        })
        $('#schedule_checkbox').on('change', function () {
            handleRadioChange();
        });
         $('#schedule_checkbox').change(function() {
         if ($(this).val() === '0') {
             $('.holiday_list').hide();
         } else {
             $('.holiday_list').show();
         }
         });
    });
   
  function setoption(schedule) {
    
 
    if(schedule === '0')
    {
        document.getElementById("multipleselection").style.display = "none";
        document.getElementById("sigleselection").style.display = "block";
        $('input[name="has_holiday"]').val(1);
        var checkbox = document.getElementById('schedule_checkbox');
        checkbox.checked = false;   
        /*document.getElementById("multipleselection").style.visibility = "hidden";
        document.getElementById("sigleselection").style.visibility = "visible";*/

    }
    else
    {
        document.getElementById("multipleselection").style.display = "block";
        document.getElementById("sigleselection").style.display = "none";
        $('input[name="has_holiday"]').val(0);

    }

   };
   function updateCheckboxStatus() {
        if ($('input[name="has_schedule"]:checked').val() == 1) {
            $('#schedule_checkbox').prop('disabled', false);
        } else {
            $('#schedule_checkbox').prop('disabled', true);
        }
    }

   
</script>
<script type='text/javascript'>
  function updateAttendance(e) {
    var selectedValue = $('input[name="check"]:checked').val();
    $.ajax({
      url: '{{ route('storeAttendanceTeam') }}',
      type: 'POST',
      data: {
        _token: '{{ csrf_token() }}',
        value: selectedValue,
        geofenceData: geofenceData,
      },
      success: function (data) {
        console.log(data);
      },
      error: function (data){
      }
    });
  }
  
</script>  


</script>
@endsection