@extends('app-new')

@push('head-script')
    <!-- BEGIN: Vendor CSS-->
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/forms/wizard/bs-stepper.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/pickers/flatpickr/flatpickr.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/pickers/pickadate/pickadate.css">
    <!-- END: Vendor CSS-->

    <!-- BEGIN: Page CSS-->
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/form-validation.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/core/menu/menu-types/vertical-menu.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/form-wizard.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-flat-pickr.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-flat-pickr.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-pickadate.css">
    <!-- END: Page CSS-->
@endpush

@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-12">
            <h2 class="content-header-title float-start mb-0">{{trans('master/master.sub_locations')}}</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/{{$alias}}/home">{{trans('master/master.home')}}</a>
                    </li>
                    <li class="breadcrumb-item"><a href="/{{$alias}}/locations">{{trans('master/master.location')}}</a>
                    </li>
                    <li class="breadcrumb-item"><a href="/{{$alias}}/sub-locations">{{trans('master/master.sub_location')}}</a>
                    </li>
                    <li class="breadcrumb-item active">
                    @if(isset($subLocation) && ($subLocation->id))
                        {{trans('master/master.edit_sub_location')}}
                    @else
                        {{trans('master/master.add_new_sub_location')}}
                    @endif
                    </li>
                </ol>
            </div>
        </div>
    </div>
    <!-- <div class="col-md-6 text-right"> -->
            <!-- <button type="button" class="btn btn-large" title="Refresh Address" onclick="initializeMap()"><i class="fa fa-refresh" aria-hidden="true"></i></button>
        </div> -->
@endpush

@section('content')
<!-- Basic multiple Column Form section start -->
{!! Form::model($subLocation, ['method' => isset($subLocation) && $subLocation->id ? 'put' : 'post', 'files' => 'true']) !!}
    <section class="vertical-wizard">
        @if (isset($status))
        <!--Closable Alerts start -->
        <div class="row">
            <div class="col-md-12">
                <div class="alert alert-warning alert-dismissible fade show" role="alert">
                    <!-- <div class="alert-heading">{{ $status['header'] }}</div> -->
                    <div class="alert-body">
                        @foreach ($status['messages'] as $m)
                            {{$m}}<br>
                        @endforeach
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            </div>
        </div>
        <!--Closable Alerts end -->
        @endif
        <div class="bs-stepper vertical vertical-wizard-example">
            <div class="bs-stepper-header">
                <div class="step" data-target="#personal-info-vertical" role="tab" id="personal-info-vertical-trigger">
                    <button type="button" class="step-trigger">
                        <span class="bs-stepper-box">1</span>
                        <span class="bs-stepper-label">
                            <span class="bs-stepper-title">{{trans('master/master.sub_location_details')}}</span>
                            <span class="bs-stepper-subtitle">{{trans('master/master.add_sub_location_details')}}</span>
                        </span>
                    </button>
                </div>
                <div class="step" data-target="#map-vertical" role="tab" id="map-vertical-trigger">
                    <button type="button" class="step-trigger">
                        <span class="bs-stepper-box">2</span>
                        <span class="bs-stepper-label">
                            <span class="bs-stepper-title">{{trans('master/master.address_details')}}</span>
                            <span class="bs-stepper-subtitle">{{trans('master/master.add_address_details')}}</span>
                        </span>
                    </button>
                </div>
                @if($isWifiBased)
                    <div class="step" data-target="#wifi-vertical" role="tab" id="wifi-vertical-trigger">
                        <button type="button" class="step-trigger">
                            <span class="bs-stepper-box">3</span>
                            <span class="bs-stepper-label">
                                <span class="bs-stepper-title">Wifi Details</span>
                                <span class="bs-stepper-subtitle">Add Wifi Details</span>
                            </span>
                        </button>
                    </div>
                @endif
            </div>
            <div class="bs-stepper-content">
                <div id="personal-info-vertical" class="content position-relative" role="tabpanel" aria-labelledby="personal-info-vertical-trigger" style="height: 470px">
                    <div class="content-header">
                        <h5 class="mb-0">{{trans('master/master.sub_location_details')}}</h5>
                        <small class="text-muted">{{trans('master/master.enter_sub_location_details')}}</small>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-1  {{{ $errors->has('name') ? 'has-error' : '' }}}">
                                <label class="form-label" for="username">{{trans('master/master.name')}} <span class="mendatory-field text-danger">*</span></label>
                                {!! Form::text('name', isset($subLocation) && $subLocation->name ? $subLocation->name : old('name'), ['class' => 'form-control', 'id' => 'name', 'placeholder' => 'Enter Sub Location Name', 'maxlength' => 100]) !!} {!! $errors->first('name', '
                                    <label class="error" for="name">:message</label>')!!}
                            </div>
                        </div>
                        <div class="col-md-6 mb-1">
                            <label class="form-label">{{trans('master/master.location')}} <span class="mendatory-field text-danger">*</span></label>
                            <select class="form-select select2" name="location_id" id="location_id" onchange="getsubLocations(this, '{{ old('parent_id', $subLocation->parent_id) }}')">
                                <option value="">Select Location</option>
                                @foreach($locations as $location)
                                    <option value="{{$location->id}}" data-parent_id="{{@$location->parent_id}}"  @if(isset($location) && ($location->id == $subLocation->location_id) || (old('location_id') == $location->id)) selected @endif>{{ucwords($location->name)}}</option>
                                @endforeach
                            </select>
                            {!! $errors->first('location_id', '<label class="error" for="location_id">:message</label>')!!}
                        </div>
                    </div>
                    <div class="row">

                        <div class="col-md-6 mb-1 blank_sub_location">
                            <label class="form-label">Parent Sub Location</label>
                            <select class="form-select select2" name="parent_id" id="sub_location_id" >
                                <option value="">Select</option>
                            </select>
                        </div>

                        <div class="col-md-6 mb-1">
                            <label class="form-label">{{trans('master/master.status')}} <span class="mendatory-field text-danger">*</span></label>
                            <select class="form-select select2" name="status" required>
                                @foreach($subLocationStatus as $val)
                                    <option value="{{$val}}"  @if(isset($subLocation) && ($subLocation->status == $val) || (old('status') == $val)) selected @endif>{{ucwords($val)}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="row">

                        <div class="col-md-6 mb-1">
                            <label class="form-label">{{trans('master/master.master')}} <span class="mendatory-field text-danger">*</span></label>
                            <select class="form-select select2" name="master" required>
                                <option value="N"  @if(isset($subLocation) && ($subLocation->master == 'N') || (old('master') == 'N')) selected @endif>No</option>
								<option value="Y"  @if(isset($subLocation) && ($subLocation->master == 'Y') || (old('master') == 'Y')) selected @endif>Yes</option>
												
                            </select>
                        </div>

                        <div class="col-md-6">
                            <div class="mb-1  {{{ $errors->has('radius_in_meter') ? 'has-error' : '' }}}">
                                <label class="form-label" for="radius_in_meter">{{trans('master/master.radius_in_meter')}} <span class="mendatory-field text-danger">*</span></label>
                                {!! Form::text('radius_in_meter', isset($subLocation) && $subLocation->radius_in_meter ? $subLocation->radius_in_meter : old('radius_in_meter'), ['class' => 'form-control', 'id' => 'radius_in_meter', 'placeholder' => 'Enter Radius In Meter', 'maxlength' => 6, 'onChange' => 'geoCircle()']) !!} {!! $errors->first('radius_in_meter', '
                                    <label class="error" for="radius_in_meter">:message</label>')!!}
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-1">
                            <label class="form-label">{{trans('master/master.shift')}} <span class="mendatory-field text-danger">*</span></label>
                            <select class="form-select select2" name="shift_ids[]" multiple>
                                @foreach ($shifts as $shift)
                                    <option value="{{$shift->id}}"  @if(in_array($shift->id, old('shift_ids', (!empty($subLocation->shifts) ? $subLocation->shifts->pluck('id')->toArray() : [])))) selected @endif>{{$shift->name}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="row">
                        <div class="content-footer position-absolute bottom-0 col-md-12">
                            <div class="d-flex justify-content-between content-footer">
                                <button type="button" class="btn btn-outline-secondary btn-prev" disabled>
                                    <i data-feather="arrow-left" class="align-middle me-sm-25 me-0"></i>
                                    <span class="align-middle d-sm-inline-block d-none">{{trans('common/common.previous')}}</span>
                                </button>
                                <button type="button" class="btn btn-primary btn-next">
                                    <span class="align-middle d-sm-inline-block d-none">{{trans('common/common.next')}}</span>
                                    <i data-feather="arrow-right" class="align-middle ms-sm-25 ms-0"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="map-vertical" class="content position-relative" role="tabpanel" aria-labelledby="map-vertical-trigger" style="min-height:470px;">
                    <div class="content-header">
                        <h5 class="mb-0">{{trans('master/master.address_details')}}</h5>
                        <small class="text-muted">{{trans('master/master.enter_address_details')}}</small>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="mb-1  {{{ $errors->has('geo_address') ? 'has-error' : '' }}}">
                                <label class="form-label" for="geo_address">{{trans('master/master.address')}} <span class="mendatory-field text-danger">*</span></label>
                                {!! Form::text('geo_address', isset($subLocation) && $subLocation->geo_address ? $subLocation->geo_address : old('geo_address'), ['class' => 'form-control', 'id' => 'geo_address', 'placeholder' => 'Enter Address', 'onChange' => 'geolocate()']) !!} {!! $errors->first('geo_address', '
                                    <label class="error" for="geo_address">:message</label>')!!}
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-1  {{{ $errors->has('geo_latitude') ? 'has-error' : '' }}}">
                                <label class="form-label" for="geo_latitude">{{trans('master/master.latitude')}} <span class="mendatory-field text-danger">*</span></label>
                                {!! Form::text('geo_latitude', isset($subLocation) && $subLocation->geo_latitude ? $subLocation->geo_latitude : old('geo_latitude'), ['class' => 'form-control', 'id' => 'geo_latitude', 'placeholder' => 'Enter Latitude']) !!} {!! $errors->first('geo_latitude', '
                                    <label class="error" for="geo_latitude">:message</label>')!!}
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-1  {{{ $errors->has('geo_longitude') ? 'has-error' : '' }}}">
                                <label class="form-label" for="geo_longitude">{{trans('master/master.latitude')}} <span class="mendatory-field text-danger">*</span></label>
                                {!! Form::text('geo_longitude', isset($subLocation) && $subLocation->geo_longitude ? $subLocation->geo_longitude : old('geo_longitude'), ['class' => 'form-control', 'id' => 'geo_longitude', 'placeholder' => 'Enter Longitude']) !!} {!! $errors->first('geo_longitude', '
                                    <label class="error" for="geo_longitude">:message</label>')!!}
                            </div>
                        </div>
                    </div>
                    <br>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group {{{ $errors->has('geo_address') ? 'has-error' : '' }}}">
                                <p class="f-16">Click and drag the red dots to align and make a geo fencing polygon.<br /> <strong>Please be cautious while using this feature.</strong>
                                    <button class="btn btn-xs btn-danger" type="button" onclick="removeOverlay()">Remove Overlay</button>
                                </p>
                                <input type="hidden" name="geo_boundaries" id="geo_boundaries" value="{{$subLocation->geo_boundaries ?: old('geo_boundaries')}}">
                                <div id="map" style="height: 500px;"></div>
                            </div>
                        </div>
                    </div>
                   
                    <br>
                    <br>
                    <br>
                    <div class="row">
                        <div class="content-footer position-absolute bottom-0 col-md-12">
                            <div class="content-footer position-absolute bottom-0 col-md-12">
                                <div class="d-flex justify-content-between content-footer">
                                    <button type="button" class="btn btn-outline-secondary btn-prev">
                                        <i data-feather="arrow-left" class="align-middle me-sm-25 me-0"></i>
                                        <span class="align-middle d-sm-inline-block d-none">{{trans('common/common.previous')}}</span>
                                    </button>
                                    @if($isWifiBased)
                                    <button type="button" class="btn btn-primary btn-next">
                                        <span class="align-middle d-sm-inline-block d-none">{{trans('common/common.next')}}</span>
                                        <i data-feather="arrow-right" class="align-middle ms-sm-25 ms-0"></i>
                                    </button>
                                    @else
                                    <button id="save-form" type="button" class="btn btn-success btn-submit" id="confirm-submit-text">{{trans('common/common.submit')}}</button>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="wifi-vertical" class="content position-relative" role="tabpanel" aria-labelledby="wifi-vertical-trigger" style="min-height:470px;">
                    <div class="content-header row">
                        <div class="col-md-3">
                            <h5 class="mb-0">Wifi Details</h5>
                            <small class="text-muted">Enter Wifi Details</small>
                        </div>
                        <div class="col-md-6">
                            <button type="button" class="btn btn-primary" id="add-wifi-row">Add</button>
                        </div>
                    </div>
                    <div class="wifi-div">
                        @if(old('allowed_wifis'))
                            @foreach (old('allowed_wifis') as $key => $allowedWifi)
                                <div class="row" id="wifi-div-{{$key}}">
                                    <div class="col-md-4">
                                        <div class="mb-1  {{{ $errors->has('name') ? 'has-error' : '' }}}">
                                            <label class="form-label" for="username">SSID (Wifi Name) <span class="mendatory-field text-danger">*</span></label>
                                            <input type="text" name="allowed_wifis[{{$key}}][ssid]" value="{{$allowedWifi['ssid']}}" class="form-control" placeholder="Enter SSID" maxlength="100">
                                        </div>
                                    </div>                    
                                    <div class="col-md-4">
                                        <div class="mb-1  {{{ $errors->has('name') ? 'has-error' : '' }}}">
                                            <label class="form-label" for="username">BSSID<span class="mendatory-field text-danger">*</span></label>
                                            <input type="text" name="allowed_wifis[{{$key}}][bssid]" value="{{$allowedWifi['bssid']}}" class="form-control" placeholder="Enter BSSID" maxlength="100">
                                        </div>
                                    </div>                    
                                    <div class="col-md-4">
                                        <button type="button" class="btn btn-danger remove-wifi-row mt-2" data-row_id="wifi-div-{{$key}}">Delete</button>
                                    </div>                    
                                </div>
                                @if($loop->last)
                                    <script> var wifiIndex = {{$key + 1}}; </script>
                                @endif
                            @endforeach
                        @elseif(!empty($subLocation->allowed_wifis))
                            @foreach ($subLocation->allowed_wifis as $key => $allowedWifi)
                                <div class="row" id="wifi-div-{{$key}}">
                                    <div class="col-md-4">
                                        <div class="mb-1  {{{ $errors->has('name') ? 'has-error' : '' }}}">
                                            <label class="form-label" for="username">SSID (Wifi Name) <span class="mendatory-field text-danger">*</span></label>
                                            <input type="text" name="allowed_wifis[{{$key}}][ssid]" value="{{$allowedWifi['ssid']}}" class="form-control" oninput="this.value = this.value.toUpperCase()" placeholder="Enter SSID" maxlength="100">
                                        </div>
                                    </div>                    
                                    <div class="col-md-4">
                                        <div class="mb-1  {{{ $errors->has('name') ? 'has-error' : '' }}}">
                                            <label class="form-label" for="username">BSSID<span class="mendatory-field text-danger">*</span></label>
                                            <input type="text" name="allowed_wifis[{{$key}}][bssid]" value="{{$allowedWifi['bssid']}}" class="form-control" oninput="this.value = this.value.toUpperCase()" placeholder="Enter BSSID" maxlength="100">
                                        </div>
                                    </div>                    
                                    <div class="col-md-4">
                                        <button type="button" class="btn btn-danger remove-wifi-row mt-2" data-row_id="wifi-div-{{$key}}">Delete</button>
                                    </div>                    
                                </div>
                                @if($loop->last)
                                    <script> var wifiIndex = {{$key + 1}}; </script>
                                @endif
                            @endforeach
                        @else
                            <script> var wifiIndex = 0; </script>
                        @endif
                    </div>
                    <div class="row">
                        <div class="content-footer position-absolute bottom-0 col-md-12">
                            <div class="content-footer position-absolute bottom-0 col-md-12">
                                <div class="d-flex justify-content-between content-footer">
                                    <button type="button" class="btn btn-outline-secondary btn-prev">
                                        <i data-feather="arrow-left" class="align-middle me-sm-25 me-0"></i>
                                        <span class="align-middle d-sm-inline-block d-none">{{trans('common/common.previous')}}</span>
                                    </button>
                                    <button id="save-form" type="button" class="btn btn-success btn-submit" id="confirm-submit-text">{{trans('common/common.submit')}}</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
 
{!! Form::close() !!} 
<!-- Basic Floating Label Form section end -->

@endsection 

@push('footer-script')

<!-- BEGIN: Page Vendor JS-->
<script src="/app-assets/vendors/js/forms/wizard/bs-stepper.min.js"></>
<script src="/app-assets/vendors/js/forms/select/select2.full.min.js"></script>
<script src="/app-assets/vendors/js/forms/validation/jquery.validate.min.js"></script>
<script src="/app-assets/vendors/js/pickers/flatpickr/flatpickr.min.js"></script>
<script src="/app-assets/vendors/js/pickers/pickadate/picker.js"></script>
<script src="/app-assets/vendors/js/pickers/pickadate/picker.date.js"></script>
<script src="/app-assets/vendors/js/pickers/pickadate/picker.time.js"></script>
<script src="/app-assets/vendors/js/pickers/pickadate/legacy.js"></script>
<!-- END: Page Vendor JS-->

<!-- BEGIN: Page JS-->
<script src="/app-assets/js/scripts/forms/form-wizard.js"></script>
<script src="/app-assets/js/scripts/forms/form-validation.js"></script>
<script src="/app-assets/js/scripts/forms/pickers/form-pickers.js"></script>
<!-- END: Page JS-->

<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script src="https://maps.googleapis.com/maps/api/js?key={{ config('app.js_google_map_key')}}&callback=initMap&libraries=drawing,places&v=weekly" defer></script>
<script src="https://maps.googleapis.com/maps/api/geocode/json?latlng=44.4647452,7.3553838&sensor=true"></script>

<script type="text/javascript">
    var autocomplete;
    var gMap;
    var marker;
    var all_overlays = [];
    var isPlaceChange = true;

    var geoLocation = {
        lat: 28.6294015,
        lng: 77.4406144
    };

    var geoPolygon = null;

    function initMap() {
        if ($('#geo_latitude').val()) {
            geoLocation = {
                lat: parseFloat($('#geo_latitude').val()),
                lng: parseFloat($('#geo_longitude').val())
            };
        }

        gMap = new google.maps.Map(document.getElementById("map"), {
            center: geoLocation,
            zoom: 17,
        });
        const drawingManager = new google.maps.drawing.DrawingManager({
            drawingMode: google.maps.drawing.OverlayType.MARKER,
            drawingControl: true,
            drawingControlOptions: {
                position: google.maps.ControlPosition.TOP_CENTER,
                drawingModes: [
                    google.maps.drawing.OverlayType.POLYGON,
                    google.maps.drawing.OverlayType.POLYLINE,
                ],
            },
            circleOptions: {
                fillColor: "#ffff00",
                fillOpacity: 1,
                strokeWeight: 5,
                clickable: false,
                editable: true,
                zIndex: 1,
            },
        });

        /*if ($('#geo_boundaries').val()) {
            var geoBoundaries = JSON.parse($('#geo_boundaries').val());

            geoPolygon = new google.maps.Polygon({
                paths: geoBoundaries
            });
            geoPolygon.setMap(gMap);
        }

        drawingManager.setMap(gMap);*/


        /*google.maps.event.addListener(drawingManager, 'overlaycomplete', function(polygon) {
            all_overlays.push(polygon);
            var path = polygon.overlay.getPath()
            var coordinates = [];

            for (var i = 0; i < path.length; i++) {
                coordinates.push({
                    lat: path.getAt(i).lat(),
                    lng: path.getAt(i).lng()
                });
            }
            // console.log('create', all_overlays);
            $('#geo_boundaries').val(JSON.stringify(coordinates));
        });
        */
        const input = document.getElementById("geo_address")

        autocomplete = new google.maps.places.Autocomplete(
            document.getElementById("geo_address")
        );

        autocomplete.bindTo("bounds", gMap);

        autocomplete.addListener("place_changed", updateMap);

        marker = new google.maps.Marker({
            position: geoLocation,
            map: gMap,
            draggable:true
        });

        google.maps.event.addListener(marker, 'dragend', function (evt) {
            $("#geo_latitude").val(evt.latLng.lat().toFixed(6));
            $("#geo_longitude").val(evt.latLng.lng().toFixed(6));
            gMap.panTo(evt.latLng);
        });

        // centers the map on markers coords
        gMap.setCenter(marker.position);
        // adds the marker on the map
        marker.setMap(gMap);

        var radius = parseFloat($('#radius_in_meter').val());
        var circle = new google.maps.Circle({
            center: geoLocation,
            map: gMap,
            radius: radius,          // IN METERS.
            fillColor: '#FF6600',
            fillOpacity: 0.3,
            strokeColor: "#FFF",
            strokeWeight: 0         // DON'T SHOW CIRCLE BORDER.
        });

    }

    function updateMap() {

        marker.setVisible(false);
        
        const place = autocomplete.getPlace();
        isPlaceChange = true;

        // If the place has a geometry, then present it on a map.
        if (place.geometry.viewport) {
            gMap.fitBounds(place.geometry.viewport);
        } else {
            gMap.setCenter(place.geometry.location);
            gMap.setZoom(17);
        }
        marker.setPosition(place.geometry.location);
        marker.setVisible(true);

        $('#geo_latitude').val(place.geometry.location.lat())
        $('#geo_longitude').val(place.geometry.location.lng())

    }

    function geolocate() {
        if (navigator.geolocation) {
            
            navigator.geolocation.getCurrentPosition((position) => {
                geoLocation = {
                    lat: position.coords.latitude,
                    lng: position.coords.longitude,
                };
                const circle = new google.maps.Circle({
                    center: geoLocation,
                    radius: position.coords.accuracy,
                });
                gMap.setCenter({
                    lat: position.coords.latitude,
                    lng: position.coords.longitude
                });
                $('#geo_latitude').val(position.coords.latitude)
                $('#geo_longitude').val(position.coords.longitude)

            });
        }
    }

    function geoCircle()
    {
        var radius = parseFloat($('#radius_in_meter').val());
        var circle = new google.maps.Circle({
            center: geoLocation,
            map: gMap,
            radius: radius,          // IN METERS.
            fillColor: '#FF6600',
            fillOpacity: 0.3,
            strokeColor: "#FFF",
            strokeWeight: 0         // DON'T SHOW CIRCLE BORDER.
        });
    }

    function getReverseGeocodingData(lat, lng) 
    {
    var latlng = new google.maps.LatLng(lat, lng);
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({ 'latLng': latlng },  (results, status) =>
    {
        if (status !== google.maps.GeocoderStatus.OK) {
            alert(status);
        }
        // This is checking to see if the Geoeode Status is OK before proceeding
        if (status == google.maps.GeocoderStatus.OK) {
            var address = (results[0].formatted_address);
            $('#geo_address').val(address)
        }
    });
    }

    $(document).ready(function(){
        initializeMap();
        $('#location_id').trigger('change');
    });

    function initializeMap(){
        @if(isset($location) && isset($subLocation) && ($subLocation->id)){
            @if($subLocation->geo_longitude)
                $("#geo_latitude").val("{{$subLocation->geo_latitude}}");
                $("#geo_longitude").val("{{$subLocation->geo_longitude}}");
            @endif
            getReverseGeocodingData($("#geo_latitude").val(), $("#geo_longitude").val())
            initMap()
        }
        @else {
            if (navigator.geolocation) {
            

            navigator.geolocation.getCurrentPosition((position) => {
                geoLocation = {
                    lat: position.coords.latitude,
                    lng: position.coords.longitude,
                };
                const circle = new google.maps.Circle({
                    center: geoLocation,
                    radius: position.coords.accuracy,
                });
                
                getReverseGeocodingData(position.coords.latitude, position.coords.longitude)

                $('#geo_latitude').val(position.coords.latitude)
                $('#geo_longitude').val(position.coords.longitude)

                initMap()

                
            });
        }
        }
        @endif
    }
    
    $("#geo_address").keydown(function () {
        isPlaceChange = false;
    });


    $("#save-form").click(function(e) {
        e.preventDefault();
        var address = $('#geo_address').val();
        if(address!="" && address!=null){    
            if (isPlaceChange == false) {
                Swal.fire({
                    title: "Invalid Address",
                    text: "Please select valid address",
                    icon: "warning",
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "OK",
                    closeOnConfirm: true,
                });
                return false;
            }
        }
        var geoLatitude = $('#geo_latitude').val();
        var geoLongitude = $('#geo_longitude').val();
        var id = $('#location_id').val();
        if (!id) {
            Swal.fire({
                title: "Location required",
                text: "Please select location",
                icon: "warning",
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "OK",
                closeOnConfirm: true,
            });
            return false;
        }
        
        if(id!=null && id!=''){
            $.ajax({
                url: '/{{$alias}}/sub-locations/location/'+id,
                type: 'GET',
                success: function(data) {
                    var latBounds = JSON.parse(data.lat_bounds);
                    var lngBounds = JSON.parse(data.lng_bounds);

                    if(latBounds!=null && lngBounds!=null){
                        var location = new google.maps.LatLngBounds( new google.maps.LatLng(latBounds[0], lngBounds[0]), new google.maps.LatLng(latBounds[1], lngBounds[1]));
                        var subLocation = new google.maps.LatLng(geoLatitude, geoLongitude);

                        if(!location.contains(subLocation)){
                            Swal.fire({
                                title: "Invalid Sub Location",
                                text: "The Sub Location entered is outside the location boundary",
                                icon: "warning",
                                confirmButtonColor: "#DD6B55",
                                confirmButtonText: "OK",
                                closeOnConfirm: true,
                            });
                            return false;
                        }
                        else{
                            $("form").submit();
                            return true;
                        }
                    }
                    
                    else{
                        $("form").submit();
                        return true;
                    }
                   
                }
            });
        }
        return true;
    });

    function getsubLocations(location, selectedParentId) {

        var parentId = $(location).find(':selected').data('parent_id');
        var locationId = location.value;

        var data = {
            location_id: locationId,
            parent_id: parentId,
            organization_id: '{{$organization->id}}',
            '_token': '{{{csrf_token()}}}'
        }
        $.ajax({
            url: '/{{$organization->alias}}/location/parent-sub-locations',
            type: 'POST',
            data: data,
            success: function(data) {
                var selectbox = '';
                if (data) {
                    selectbox = '<option value="">Select</option>';
                    $.each(data, function(i, item) {
                        if(selectedParentId && selectedParentId != '' && selectedParentId == item.id){
                            selectbox += '<option value="' + item.id + '" selected>' + item.name + '</option>';
                        }
                        else{
                            selectbox += '<option value="' + item.id + '">' + item.name + '</option>';
                        }
                    });
                }
                $('#sub_location_id').html(selectbox);
                $("#sub_location_id").select2();
            }
        });
        
    }

    $('#add-wifi-row').click(function(){
        let html = `<div class="row" id="wifi-div-${wifiIndex}">
                        <div class="col-md-4">
                            <div class="mb-1  {{{ $errors->has('name') ? 'has-error' : '' }}}">
                                <label class="form-label" for="username">SSID (Wifi Name) <span class="mendatory-field text-danger">*</span></label>
                                <input type="text" name="allowed_wifis[${wifiIndex}][ssid]" class="form-control" oninput="this.value = this.value.toUpperCase()" placeholder="Enter SSID" maxlength="100">
                            </div>
                        </div>                    
                        <div class="col-md-4">
                            <div class="mb-1  {{{ $errors->has('name') ? 'has-error' : '' }}}">
                                <label class="form-label" for="username">BSSID<span class="mendatory-field text-danger">*</span></label>
                                <input type="text" name="allowed_wifis[${wifiIndex}][bssid]" class="form-control" oninput="this.value = this.value.toUpperCase()" placeholder="Enter BSSID" maxlength="100">
                            </div>
                        </div>                    
                        <div class="col-md-4">
                            <button type="button" class="btn btn-danger remove-wifi-row mt-2" data-row_id="wifi-div-${wifiIndex}">Delete</button>
                        </div>                    
                    </div>`;

        wifiIndex++;

        $('.wifi-div').append(html);
    });

    $(document).on('click', '.remove-wifi-row', function(){
        $("#"+$(this).data('row_id')).remove();
    });

</script>
@endpush