@extends('layout.map_master')

@section('title', 'Peta')

@section('css')
    <style>
        .clsExpand {
            text-align: justify !important;
            border-radius: 8px;
            background-color: white;
            padding: 20px;
        }

        .myButton {
            border: 1px solid #d3d3d3;
            display: inline-block;
            padding: 0;
        }        

        div[title="Zoom To Coordinate"] calcite-icon {
            background-image: url("{{ asset('assets/img/Zoom To Coordinate.png') }}");
            background-repeat: no-repeat;
            background-size: 17px;
            background-position: center;
        }

        div[title="Zoom To Scale"] calcite-icon {
            background-image: url("{{ asset('assets/img/Zoom To Scale.png') }}");
            background-repeat: no-repeat;
            background-size: 17px;
            background-position: center;
        }

        div[title="Bookmark"] calcite-icon {
            background-image: url("{{ asset('assets/img/Bookmark.png') }}");
            background-repeat: no-repeat;
            background-size: 16px;
            background-position: center;
        }

        div[title="Planet Imagery"] calcite-icon {
            background-repeat: no-repeat;
            background-size: 16px;
            background-position: center;
        }

        div[title="Measurement"],
        div[title="Zoom To Coordinate"],
        div[title="Zoom To Scale"],
        div[title="Query"],
        div[title="Bookmark"],
        div[title="Planet Imagery"] {
            width: 31px !important;
            height: 31px !important;
        }

        .esri-layer-list {
            width: 400px !important;
        }

        .esri-widget--button[title="Layer List"], 
        .esri-widget--button[title="Basemap"], 
        .esri-locate, 
        .esri-home, 
        .esri-zoom .esri-widget--button[title="Zoom in"], 
        .esri-zoom .esri-widget--button[title="Zoom out"], 
        .esri-navigation-toggle__button , 
        .esri-compass {
            border: 1px solid #d3d3d3 !important;
        }

        .esri-print__header-title {
            display: none;
        }

        .esri-view-width-xsmall .esri-expand--auto .esri-expand__container--expanded,
        .esri-coordinate-conversion {
            z-index: 5 !important;
        }

        .esri-ui-top-right {
            top: 20px;
        }

        #lapisan-sementara_controls_content.esri-expand__content {
            top: auto !important;
            bottom: 0 !important;
        }

        .modal-backdrop{
            display: none;
        }

        .modal {
            pointer-events: none;
        }
        
        @media (min-width: 768px) {
            .modal-md {
                --bs-modal-width: 600px;
            }
        }
    </style>
@endsection

@section('content')
    <section class="section">

        <div id="terhadTop" class="terhad">TERHAD</div>
        <div id="viewDiv"></div>

        @if (\Route::is('map'))
            <div class="map-bottom-bar bg-accent">
                <div class="text-center text-white w-100">
                    <small>© Versi 2.0. Jabatan Perhutanan Semenanjung Malaysia. Hak Cipta Terpelihara.</small>
                </div>
            </div>
        @endif

        <div id="terhadBottom" class="terhad text-end">TERHAD</div>

        {{-- <div id="divLyrList" style="width:auto; " class="card m-0 clsExpand" hidden>
            <ul class="nav nav-tabs row" id="myTab" role="tablist" style="width:400px;">
                <li class="nav-item col-6" role="presentation">
                    <button class="nav-link active w-100 rounded-0" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Layer List</button>
                </li>
                <li class="nav-item col-6" role="presentation">
                    <button class="nav-link w-100 rounded-0" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Legend</button>
                </li>
            </ul>
            <div class="tab-content" id="myTabContent">
                <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                    <div id="layerlist"></div>
                </div>
                <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                    <div id="divLegend"></div>
                </div>
            </div>
        </div> --}}

        <div id="divMeasurement" style="width: 160px; " class="card m-0 clsExpand" hidden>
            <h5 class="fw-bold">Measurement</h5>
            <div class="d-flex">
                <button class="action-button esri-icon-measure-line" id="distanceButton" type="button" title="Measure distance between two points"></button>
                <button class="action-button esri-icon-measure-area" id="areaButton" type="button" title="Measure area"></button>
                <button class="action-button esri-icon-trash" id="clearMeasurement" type="button" title="Clear Measurements"></button>
            </div>
            
        </div>

        <div id="divZoomToCoordinate" style="width: 350px; " class="card m-0 clsExpand" hidden>
            <h5 class="fw-bold mb-3">Zoom to Coordinate</h5>
            
            <div class="mb-3">
                <label class="form-label d-inline-block">Spatial Reference<span onclick="fGetHeader()">&nbsp;</span></label>
                <select id="sWKID" class="form-select" onchange="fCoordinateChange(this)">
                    <option value="102062">KERTAU RSO METER</option>
                    <option value="4326">WGS84</option>
                    <option value="3375" selected>GDM 2000</option>
                </select>
            </div>
            
            <!-- 2.4778784676923267, 102.23733012113587 -->
            <!-- 440048, 268671 -->
            <div class="mb-3">
                <label for="txtX" class="form-label" id="lblTxtX">X (meters):</label>
                <input class="form-control" type="text" id="txtX" value="" />
            </div>

            <div class="mb-3">
                <label for="txtY" class="form-label" id="lblTxtY">Y (meters):</label>
                <input class="form-control" type="text" id="txtY" value="" />
            </div>

            <button type="button" class="btn btn-primary btn-sm w-100" onclick="fZoomToCoordinate()">
                Zoom
            </button>
        </div>

        <div id="divZoomToScale" style="width: 350px; " class="card m-0 clsExpand" hidden>
            <h5 class="fw-bold mb-3">Zoom to Scale</h5>
           
            <div class="form-group mb-3 row">
                <label for="sScale" class="col-3 col-form-label form-label">Scale</label>
                <div class="col-9">
                    <select id="sScale" class="form-select" onchange="fZoomToScale('select')">
                        <option value="" disabled selected>-</option>
                        <option value="1000">1,000</option>
                        <option value="5000">5,000</option>
                        <option value="10000">10,000</option>
                        <option value="24000">24,000</option>
                        <option value="50000">50,000</option>
                        <option value="100000">100,000</option>
                        <option value="250000">250,000</option>
                        <option value="500000">500,000</option>
                        <option value="1000000">1,000,000</option>
                        <option value="5000000">5,000,000</option>
                    </select>
                </div>
            </div>

            <div class="form-group mb-3 row">
                <label for="txtScale" class="col-3 col-form-label form-label">1 :</label>
                <div class="col-9">
                    <input class="form-control" type="text" id="txtScale" value="" />
                </div>
            </div>

            <button type="button" class="btn btn-primary w-100" onclick="fZoomToScale('text')">
                Apply Scale
            </button>
        </div>

        <div id="divQuery" class="card m-0 clsExpand d-none" style="width: 350px; overflow-y:auto; max-height:540px;" hidden>
            <p class="h5">Carian / Qu<span onclick="fTest()">er</span>y</p>

        </div>

        <div id="divBookmark" class="card m-0 clsExpand" style="width: 350px; overflow-y:auto; max-height:540px;" hidden>
            <div class="d-flex justify-content-between mb-3">
                <h5 class="fw-bold">Bookmark</h5>
                <div>
                    <button type="button" onclick="fToggleVisibility('divBookmarkAdd')" class="btn btn-sm btn-info" title="Tambah Bookmark"><i class='fas fa-plus'></i></button>
                    <button type="button" onclick="fToggleVisibility('divBookmarkUpload')" class="btn btn-sm btn-warning" title="Muat Naik Bookmark"><i class='fas fa-upload'></i></button>
                </div>
            </div>


            <div id="divBookmarkAdd" class="d-none">
                <div class="form-group mb-3">
                    <label for="txtBookmark" class="form-label">Nama</label>
                    <input type="text" class="form-control" id="txtBookmark" placeholder="Masukkan nama Bookmark">
                </div>
                
                <div class="form-group mb-3">
                    <label for="txtBookmarkLatitude" class="form-label">Latitude</label>
                    <input type="text" class="form-control" id="txtBookmarkLatitude" placeholder="Klik lokasi pada peta" readonly>
                </div>
                
                <div class="form-group mb-3">
                    <label for="txtBookmarkLongitude" class="form-label">Longitude</label>
                    <input type="text" class="form-control" id="txtBookmarkLongitude" placeholder="Klik lokasi pada peta" readonly>
                </div>

                <button type="button" onclick="fMapMode('Bookmark')" class="btn btn-sm btn-primary">
                    Pilih <i>point</i> pada peta
                </button>
                <button type="button" onclick="fSaveBookmark()" class="btn btn-sm btn-success">Simpan</button>
            </div>

            <div id="divBookmarkUpload" class="d-none">
                <div class="alert alert-secondary py-2 mb-2">
                    <small><i class="fas fa-info-circle me-1"></i>Muat naik fail <strong>.geojson</strong> atau <strong>.kml</strong> yang mengandungi <em>Point</em> geometri.</small>
                </div>
                <div class="form-group mb-3">
                    <label for="fileBookmarkUpload" class="form-label">Pilih Fail</label>
                    <input type="file" class="form-control" id="fileBookmarkUpload" accept=".geojson,.json,.kml">
                </div>
                <button type="button" onclick="fUploadBookmark()" class="btn btn-sm btn-success"><i class="fas fa-upload me-1"></i>Muat Naik</button>
            </div>

            <span id="spanTable"></span>

            <div class="alert alert-info">
                <small><i class="fa-solid fa-exclamation-triangle me-1"></i><strong>Disclaimer:</strong> Data yang disimpan akan dipadam secara automatik selepas tempoh satu (1) bulan.</small>
            </div>
        </div>

        <div id="divPlanet" style="width: 400px; " class="card m-0 clsExpand" hidden>
            <h5 class="fw-bold mb-3">Planet Imagery</h5>

            <div class="mb-3">
                <label for="sPlanetTop" class="form-label">Image Top (Left)</label>
                <select id="sPlanetTop" class="form-select" onchange="fAddRaster(this)">
                    <option value=""></option>
                </select>
            </div>

            <div class="mb-3">
                <label for="sPlanetBottom" class="form-label">Image Bottom (Right)</label>
                <select id="sPlanetBottom" class="form-select" onchange="fAddRasterBottom(this)">
                    <option value=""></option>
                </select>
            </div>
            
            <button type="button" onclick="fCancelPlanetImagery()" class="btn btn-sm btn-outline-danger w-100">Batal</button>

        </div>

        <div id="divPrevNext" class="bg-none" hidden>

            <button class="action-button" id="zoomprev" type="button" title="Back Extent">
                <img src="{{ asset('assets/img/Previous Extent.png') }}" alt="Back Extent" title="Back Extent" class="iconImg" />
            </button>
            <br>
            <button class="action-button" id="zoomnext" type="button" title="Forward Extent">
                <img src="{{ asset('assets/img/Next Extent.png') }}" alt="Forward Extent" title="Forward Extent" class="iconImg" />
            </button>
        </div>

        <button id="btnLyrList" class="myButton"></button>

        <button type="button" id="btnClear" class="action-button" onclick="fClear()" title="Clear Map" hidden><i class="fa-solid fa-refresh"></i></button>

        <button type="button" id="switch3D" class="action-button" onclick="fSwitch3D()" title="2D / 3D" hidden>3D</button>

        <div id="divZoom" class="bg-none d-flex flex-column" hidden>
            <button class="action-button" onclick="fZoomIn()" type="button" title="Zoom In Fixed">
                <img src="{{ asset('assets/img/Zoom In Fixed.png') }}" alt="Zoom In" title="Zoom In Fixed" class="iconImg" />
            </button>

            <button class="action-button" onclick="fZoomOut()" type="button" title="Zoom Out Fixed">
                <img src="{{ asset('assets/img/Zoom Out Fixed.png') }}" alt="Zoom Out" title="Zoom Out Fixed" class="iconImg" />
            </button>
        </div>

        <div id="divBtn2" class="bg-none d-flex flex-column" hidden>
            <button id="btnMeasure" class="myButton"></button>

            <button type="button" class="action-button" style="display: inline-block; line-height: 2;" id="btnCC" title="Coordinate Conversion">
                <img style="height:18px; vertical-align: text-top;" src="{{ asset('assets/img/Coordinate Conversion.png') }}" />
            </button>
        </div>

        <div id="divBtn3" class="bg-none d-flex flex-column" hidden>
            <button id="btnZoomToCoordinate" class="myButton"></button>
            <button id="btnZoomToScale" class="myButton"></button>

            <button id="btnLakaran" class="action-button d-none" style="line-height: 2.1; " type="button" title="Lakaran" data-bs-toggle="modal" data-bs-target="#modalLakaran" onclick="fInitLakaran()">
                <i class='fas fa-pencil'></i>
            </button>
        </div>

        <div id="divBtn4" class="bg-none d-flex flex-column" hidden>
            <button id="btnPilihanNegeri" class="btn btn-primary btn-sm d-none" type="button" title="Pilih Negeri" data-bs-toggle="modal" data-bs-target="#modalPilihanNegeri">
                <i class='fas fa-list me-2'></i>Pilih Negeri
            </button>

            <button id="btnBookmark" class="myButton"></button>
        </div>

        <div id="divBtn5" class="bg-none d-flex flex-column" hidden>
            <button id="btnPlanet" class="myButton"></button>
            <button type="button" class="action-button" style="display: inline-block; line-height: 2;" id="btnSwipe" title="Swipe" data-bs-toggle="modal" data-bs-target="#modalSwipe">
                <img style="height:18px; vertical-align: text-top;" src="{{ asset('assets/img/Swipe.png') }}" />
            </button>
        </div>

        <div id="divBtn6" class="bg-none d-flex flex-column" hidden>
            <button id="btnChangeDetection" style="display: inline-block; line-height: 1.9;" type="button" title="Change Detection" data-bs-toggle="modal" class="action-button" data-bs-target="#modalChangeDetection">
                <img style="height:18px; vertical-align: text-top;" src="{{ asset('assets/img/Change Detection.png') }}" />
            </button>

            <button id="btnIdentify" style="display: inline-block; line-height: 1.9;" class="action-button esri-icon-description" type="button" onclick="fMapMode('identify')" title="Map Identify"></button>

            {{-- <button style="display: inline-block; line-height: 1.9;" type="button" title="Add Data" data-bs-toggle="modal" class="action-button" data-bs-target="#modalAddLayer" onclick="fToggleType(1)">
                <img style="height:18px; vertical-align: text-top;" src="{{ asset('assets/img/Add Data.png') }}" />
            </button> --}}
        </div>

        <span id="spanTitleLeft" style="position:absolute; z-index:1000; top:25%; left:25%; display:none;">.....</span>
        <span id="spanTitleRight" style="position:absolute; z-index:1000; top:25%; right:25%; display:none;">.....</span>
    </section>

@endsection

@section('js')
    <script>
        const mydate = new Date();
        const negeriId = @json(isset($negeri_id) ? $negeri_id : null);
        console.log("=====" + negeriId);
        //alert("=====" + negeriId);

        // const loadingIndicator = new bootstrap.Modal(document.querySelector('#loading-indicator'));

        let view = null;
        let map = null;
        let fInitQuery = null;
        let fZoom = null;
        let fZoomIn = null;
        let fZoomOut = null;
        let mapMode = "";
        let fZoomToCoordinate = null;
        let fZoomToScale = null;
        let map2d = true;
        let kodNegeri = null;
        let urlMapServer = "";
        let urlMapImejServer = "";
        let layer = null;
        let layerRaster = null;
        let gLayer = null;
        let initLayer = null;
        let initLayerCount = 0;

        let arrUrlMapServer = []; 
        let arrMapImageLayer = []; 

        let arrLayer = [];
        let fAddLayer = null;
        let fRemoveLayer = null;

        let arrImage = [];
        let fAddImage = null;
        let fRemoveImage = null;
        let updateSelectedImejCount = null;

        let urlLot = "";
        let urlMukim = "";
        let urlDaerahHutan = "";
        let urlHSK = "";
        let urlKompartmen = "";

        let _prevExtent, _preExtent, _extentHistory;
        let fAddRaster = null;
        let fAddRasterBottom = null;
        let fSwipe = null;
        let fCancelPlanetImagery

        let myGraphic = null;
        let drawGraphic = null;
        let pointType = "";
        let pointCatatan = "";

        let arrImageURL = [];

        //COGO
        let fZoomToStartPoint = null;
        let appendPoint = null;
        let generatePolygon = null;
        let polygonGraphic = null;
        let fGBoundary = null;
        let isGereratingBoundary = false;
        let fCancelCogo = null;

        let gLayerPoint = null;
        let selectedCogoId = null;
        
        let initialExtent = null; 

        let suntingMode = ""; 

        // Fallback stub — replaced by real implementation once ArcGIS require() fires.
        window.cdRefreshLayers = function () { alert("Map is still initializing."); };

        require([
                "esri/Graphic",
                "esri/Map",
                "esri/core/watchUtils",
                "esri/geometry/geometryEngine",
                "esri/geometry/Point",
                "esri/geometry/Polygon",
                "esri/geometry/Polyline",
                "esri/geometry/SpatialReference",
                "esri/geometry/support/webMercatorUtils",
                "esri/views/MapView",
                "esri/views/SceneView",
                "esri/layers/GraphicsLayer",
                "esri/layers/MapImageLayer",
                "esri/layers/WebTileLayer",
                "esri/layers/WMSLayer",
                "esri/layers/FeatureLayer",
                "esri/layers/KMLLayer",
                "esri/layers/CSVLayer",
                "esri/layers/GeoJSONLayer",
                "esri/widgets/BasemapGallery",
                "esri/widgets/CoordinateConversion",
                "esri/widgets/CoordinateConversion/support/Format",
                "esri/widgets/Measurement",
                "esri/widgets/LayerList",
                "esri/widgets/Legend",
                "esri/widgets/Expand",
                "esri/widgets/ScaleBar",
                "esri/widgets/Search",
                "esri/widgets/Locate",
                "esri/widgets/Home",
                "esri/widgets/Swipe",
                "esri/widgets/Print",
                "esri/renderers/SimpleRenderer",
                "esri/rest/geometryService",
                "esri/rest/query",
                "esri/rest/support/Query",
                "esri/rest/identify",
                "esri/rest/support/IdentifyParameters",
                "esri/rest/support/ProjectParameters",
                "esri/symbols/TextSymbol",
                "esri/views/draw/Draw",
                "esri/request",
                "esri/layers/ImageryLayer",
                "esri/layers/WMTSLayer",
                "esri/layers/TileLayer",
                "esri/layers/WFSLayer",
            ],
            (
                Graphic,
                Map,
                watchUtils,
                geometryEngine, 
                Point,
                Polygon,
                Polyline,
                SpatialReference,
                webMercatorUtils,
                MapView,
                SceneView,
                GraphicsLayer,
                MapImageLayer,
                WebTileLayer,
                WMSLayer,
                FeatureLayer, 
                KMLLayer,
                CSVLayer,
                GeoJSONLayer,
                BasemapGallery,
                CoordinateConversion,
                Format, 
                Measurement,
                LayerList,
                Legend, 
                Expand,
                ScaleBar,
                Search,
                Locate,
                Home,
                Swipe,
                Print,
                SimpleRenderer, 
                geometryService,
                query,
                Query,
                identify,
                IdentifyParameters,
                ProjectParameters,
                TextSymbol,
                Draw,
                esriRequest,
                ImageryLayer,
                WMTSLayer,
                TileLayer,
                WFSLayer
            ) => {
                // urlDaerahHutan = "https://geoformatik.forestry.gov.my/arcgis/rest/services/JOHOR_SDE/MapServer/28";
                // urlHSK = "https://geoformatik.forestry.gov.my/arcgis/rest/services/JOHOR_SDE/MapServer/31";
                // urlKompartmen = "https://geoformatik.forestry.gov.my/arcgis/rest/services/JOHOR_SDE/MapServer/32";

                //urlMapServer = "http://geoformatik.forestry.gov.my/arcgis/rest/services/PAHANG_SDE/MapServer";

                $("#mapNav").removeClass("d-none");

                const urlGeometryService = "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/Geometry/GeometryServer";

                simpleRenderer = new SimpleRenderer({
                    symbol: mysymbolPolygonRed
                });

                if (window.location.href.indexOf("mapmobile") == -1) {
                    map = new Map({
                        basemap: "hybrid",
                        ground: "world-elevation"
                    });
                } else {
                    map = new Map({
                        basemap: "hybrid",
                        ground: "world-elevation"
                    });
                }
                
                if (map2d) {
                    view = new MapView({
                        container: "viewDiv",
                        map: map,
                        // scale: 2000000,
                        center: [102.29683, 4.09089], //3.99751, 102.20765, (103.50974, 2.05054 johor), 2.84047, 102.20205 (N. Sembilan)
                        zoom: 7
                    });
                } else {
                    view = new SceneView({
                        container: "viewDiv",
                        map: map,
                        scale: 5000000,
                        center: [102.29683, 4.09089]
                    });
                }

                view.when(() => {
                    initialExtent = view.extent.clone();

                    $('#divLyrList').prop('hidden', false);
                    $('#divMeasurement').prop('hidden', false);

                    $('#divQuery').prop('hidden', false);

                    $('#divPrevNext').prop('hidden', false);
                    $('#btnClear').prop('hidden', false);
                    $('#switch3D').prop('hidden', false);
                    $('#divZoom').prop('hidden', false);
                    $('#divZoomToCoordinate').prop('hidden', false);
                    $('#divBtn2').prop('hidden', false);
                    $('#divBtn3').prop('hidden', false);
                    $('#divBtn4').prop('hidden', false);
                    $('#divBtn5').prop('hidden', false);
                    $('#divBtn6').prop('hidden', false);

                    if (window.location.href.indexOf("mapmobile") == -1) {
                        $('#divZoomToScale').prop('hidden', false);
                        $('#divBookmark').prop('hidden', false);
                        $('#divPlanet').prop('hidden', false);
                        $('#btnSwipe').prop('hidden', false);
                    } else {
                        $('#divZoomToScale').addClass('d-none');
                        $('#btnZoomToScale').prop('hidden', true);
                        $('#btnBookmark').prop('hidden', true);
                        $('#btnPlanet').prop('hidden', true);
                        $('#btnSwipe').prop('hidden', true);
                    }

                    loadJson();

                    fListPreF();
                    fListPlantSpace();

                    // for (const key in printLayouts) {
                    //     $('#sizeCetak').append($('<option>', {
                    //         value: printLayouts[key],
                    //         text: key
                    //     }));
                    // }

                    
                });

                gLayer = new GraphicsLayer({
                    id: 3, //"Selected Layer"
                    title: "Graphic Layer"
                });
                map.add(gLayer);

                gLayerPoint = new GraphicsLayer({
                    id: 20, 
                    title: "Point Graphic"
                });
                map.add(gLayerPoint);

                initLayer = function() {
                    initLayerCount++;

                    if (urlMapServer !== "") {
                        if (urlMapImejServer != "") {
                            layerRaster = new MapImageLayer({
                                url: urlMapImejServer
                            });

                            map.add(layerRaster);
                        }

                        //check arrMapImageLayer if length > 0, remove all layer from map
                        if (arrMapImageLayer.length > 0){
                            for (let i = 0; i < arrMapImageLayer.length; i++) {
                                map.remove(arrMapImageLayer[i]);
                            }
                        }

                        arrMapImageLayer = []; 
                        if (arrUrlMapServer.length > 0) {
                            for (let i = 0; i < arrUrlMapServer.length; i++) {
                                const element = arrUrlMapServer[i];
                                arrMapImageLayer.push(new MapImageLayer({
                                    url: element, 
                                    //title: "Lapisan Data"
                                }));

                                map.add(arrMapImageLayer[arrMapImageLayer.length - 1]);
                            }
                        }
                        else {
                            arrMapImageLayer.push(new MapImageLayer({
                                url: urlMapServer, 
                                //title: "Lapisan Data"
                            }));

                            map.add(arrMapImageLayer[arrMapImageLayer.length - 1]);
                        }

                        initLegend(arrMapImageLayer[0], "Layer"); 
                        
                        if(arrMapImageLayer.length == 1) {
                            setTimeout(() => {
                                fInitQuery("DropdownDaerahHutan");
                            }, 2000);
                        }
                        else {
                            view.goTo(initialExtent);
                        }
                    } else {
                        if (initLayerCount < 3) {
                            setTimeout(() => {
                                initLayer();
                            }, 3000);
                        }
                        else {
                            console.log("-=-=- 3 times"); 
                        }
                    }
                }

                initLegend = function(lyr, title){
                    const legend = new Legend({
                        view: view,
                        layerInfos: [
                            {
                                layer: lyr,
                                title: title,
                            },
                        ],
                        container: "divLegend", 
                        // container: document.getElementById("divLegend")
                    });
                }

                initLayer();

                let pointGraphic = null;

                // Widgets
                view.ui.add("terhadTop", "top-left");

                const searchWidget = new Search({
                    view: view
                });

                const homeBtn = new Home({
                    view: view
                });

                // ─── Combined LayerList + Legend widget ───────────────────────────────────
                const _llTabContainer = document.createElement("div");
                _llTabContainer.style.cssText = "background:white;width:420px;";

                const _llTabButtons = document.createElement("div");
                _llTabButtons.style.cssText = "display:flex;padding:5px;border-bottom:1px solid #ddd;gap:4px;";

                const _llLayersTab = document.createElement("button");
                _llLayersTab.textContent = "Layers";
                _llLayersTab.style.cssText = "flex:1;padding:6px 12px;border:none;border-radius:4px;cursor:pointer;font-size:13px;background:#0079c1;color:white;font-weight:bold;";

                const _llLegendTab = document.createElement("button");
                _llLegendTab.textContent = "Legend";
                _llLegendTab.style.cssText = "flex:1;padding:6px 12px;border:none;border-radius:4px;cursor:pointer;font-size:13px;background:#f3f3f3;color:#333;";

                _llTabButtons.appendChild(_llLayersTab);
                _llTabButtons.appendChild(_llLegendTab);

                const _llSearchContainer = document.createElement("div");
                _llSearchContainer.style.cssText = "padding:8px;border-bottom:1px solid #ddd;background:#f9f9f9;";

                const _llSearchInput = document.createElement("input");
                _llSearchInput.type = "text";
                _llSearchInput.placeholder = "Search layers...";
                _llSearchInput.style.cssText = "width:100%;padding:6px 8px;border:1px solid #ccc;border-radius:4px;font-size:13px;box-sizing:border-box;";
                _llSearchContainer.appendChild(_llSearchInput);

                const _llLayerListContent = document.createElement("div");
                _llLayerListContent.style.cssText = "width:420px;display:block;max-height:70vh;overflow-y:auto;";

                const _llLegendContent = document.createElement("div");
                _llLegendContent.style.cssText = "width:420px;display:none;max-height:70vh;overflow-y:auto;";

                function _llAreAllChildrenVisible(groupLayer) {
                    return groupLayer.layers.every(function (l) { return l.visible; });
                }

                const layerList = new LayerList({
                    view: view,
                    container: _llLayerListContent,
                    selectionEnabled: true,
                    multipleSelectionEnabled: true,
                    dragEnabled: true,
                    listItemCreatedFunction: function (event) {
                        const item = event.item;

                        const btnRow = document.createElement("div");
                        btnRow.style.cssText = "display:flex;align-items:center;flex-wrap:wrap;";

                        // 🔍 Zoom (non-group only)
                        if (item.layer && item.layer.type !== "group") {
                            const zoomBtn = document.createElement("button");
                            zoomBtn.innerHTML = "🔍";
                            zoomBtn.title = "Zoom to Layer";
                            zoomBtn.style.cssText = "margin-right:6px;padding:4px 8px;border-radius:4px;background:white;border:none;cursor:pointer;";
                            zoomBtn.addEventListener("click", async function () {
                                if (!item.layer) return;
                                try {
                                    await item.layer.load();
                                    let ext = null;
                                    if (typeof item.layer.queryExtent === "function") {
                                        try { const r = await item.layer.queryExtent(); if (r && r.extent) ext = r.extent; } catch (_) {}
                                    }
                                    if (!ext) ext = item.layer.fullExtent;
                                    const ok = function (e) { return e && isFinite(e.xmin) && isFinite(e.xmax) && isFinite(e.ymin) && isFinite(e.ymax) && e.xmin !== e.xmax && e.ymin !== e.ymax; };
                                    if (ok(ext)) { await view.goTo(ext); } else { alert("This layer does not have a valid extent to zoom to."); }
                                } catch (err) { console.error("Zoom to layer error:", err); }
                            });
                            btnRow.appendChild(zoomBtn);
                        }

                        // Toggle all sub-layers (group only)
                        if (item.layer && item.layer.type === "group") {
                            const grpBtn = document.createElement("button");
                            grpBtn.style.cssText = "margin-right:6px;padding:4px 8px;border-radius:4px;background:transparent;border:none;cursor:pointer;";
                            function _refreshGrpIcon() {
                                const on = _llAreAllChildrenVisible(item.layer);
                                grpBtn.innerHTML = on
                                    ? '<span style="display:inline-block;width:32px;height:18px;background:#4caf50;border-radius:18px;vertical-align:middle;position:relative;"><span style="display:inline-block;width:16px;height:16px;background:#eafbe7;border-radius:50%;position:absolute;left:14px;top:1px;"></span></span>'
                                    : '<span style="display:inline-block;width:32px;height:18px;background:#b0bec5;border-radius:18px;vertical-align:middle;position:relative;"><span style="display:inline-block;width:16px;height:16px;background:#f5f7fa;border-radius:50%;position:absolute;left:2px;top:1px;"></span></span>';
                                grpBtn.title = on ? "Sub-Lapisan Dipaparkan" : "Sub-Lapisan Tersembunyi";
                            }
                            grpBtn.addEventListener("click", function () {
                                const hide = _llAreAllChildrenVisible(item.layer);
                                item.layer.layers.forEach(function (c) { c.visible = !hide; });
                                _refreshGrpIcon();
                            });
                            _refreshGrpIcon();
                            btnRow.appendChild(grpBtn);
                        }

                        // ☁️ Transparency
                        const transpBtn = document.createElement("button");
                        transpBtn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 2a10 10 0 0 1 0 20"/></svg>';
                        transpBtn.title = "Transparency";
                        transpBtn.style.cssText = "padding:4px 8px;border-radius:4px;background:white;border:none;cursor:pointer;";

                        const transpSliderWrap = document.createElement("div");
                        transpSliderWrap.style.cssText = "display:none;margin-top:5px;width:100%;padding:0 4px;box-sizing:border-box;";

                        const transpLbl = document.createElement("label");
                        transpLbl.textContent = "Transparency:";
                        transpLbl.style.cssText = "display:block;margin-bottom:4px;font-size:12px;";

                        const transpSlider = document.createElement("input");
                        transpSlider.type = "range"; transpSlider.min = "0"; transpSlider.max = "1"; transpSlider.step = "0.1";
                        transpSlider.value = item.layer ? String(item.layer.opacity) : "1";
                        transpSlider.style.width = "100%";
                        transpSlider.addEventListener("input", function () { if (item.layer) item.layer.opacity = parseFloat(transpSlider.value); });

                        transpSliderWrap.appendChild(transpLbl);
                        transpSliderWrap.appendChild(transpSlider);
                        transpBtn.addEventListener("click", function () {
                            transpSliderWrap.style.display = transpSliderWrap.style.display === "none" ? "block" : "none";
                        });
                        btnRow.appendChild(transpBtn);

                        // 💡 Highlight (non-group only)
                        // if (item.layer && item.layer.type !== "group") {
                        //     const hlBtn = document.createElement("button");
                        //     hlBtn.innerHTML = "💡"; hlBtn.title = "Highlight Layer Features";
                        //     hlBtn.style.cssText = "margin-left:6px;padding:4px 8px;border-radius:4px;background:white;border:none;cursor:pointer;";
                        //     let hlHandle = null;
                        //     hlBtn.addEventListener("click", async function () {
                        //         try {
                        //             if (hlHandle) {
                        //                 hlHandle.remove(); hlHandle = null;
                        //                 hlBtn.style.backgroundColor = "white"; hlBtn.title = "Highlight Layer Features";
                        //             } else if (item.layer) {
                        //                 const lv = await view.whenLayerView(item.layer);
                        //                 if ("queryFeatures" in lv) {
                        //                     const fs = await lv.queryFeatures();
                        //                     hlHandle = lv.highlight(fs.features);
                        //                     hlBtn.style.backgroundColor = "#ffeb3b"; hlBtn.title = "Remove Highlight";
                        //                 } else { alert("This layer type does not support feature highlighting."); }
                        //             }
                        //         } catch (err) { console.error("Highlight error:", err); }
                        //     });
                        //     btnRow.appendChild(hlBtn);
                        // }

                        const outer = document.createElement("div");
                        outer.appendChild(btnRow);
                        outer.appendChild(transpSliderWrap);

                        item.panel = { content: outer, open: false, className: "esri-icon-down-arrow" };
                        item.actionsOpen = false;
                        item.actionsSections = [];
                    }
                });

                new Legend({ view: view, container: _llLegendContent });

                // Layer search filter
                _llSearchInput.addEventListener("input", function () {
                    const term = _llSearchInput.value.toLowerCase().trim();
                    const doFilter = function () {
                        const items = _llLayerListContent.querySelectorAll("calcite-list-item");
                        if (!items.length) { setTimeout(doFilter, 100); return; }
                        items.forEach(function (el) {
                            const label = (el.getAttribute("label") || "").toLowerCase();
                            const desc  = (el.getAttribute("description") || "").toLowerCase();
                            const txt   = (el.textContent || "").toLowerCase();
                            const inner = el.querySelector("calcite-list-item-content");
                            const innerTxt = inner ? (inner.textContent || "").toLowerCase() : "";
                            const match = !term || label.includes(term) || desc.includes(term) || txt.includes(term) || innerTxt.includes(term);
                            el.style.display    = match ? "" : "none";
                            el.style.visibility = match ? "visible" : "hidden";
                            el.style.height     = match ? "" : "0";
                        });
                    };
                    doFilter();
                });

                // Tab switching
                _llLayersTab.addEventListener("click", function () {
                    _llLayerListContent.style.display = "block";
                    _llSearchContainer.style.display  = "block";
                    _llLegendContent.style.display    = "none";
                    _llLayersTab.style.cssText = "flex:1;padding:6px 12px;border:none;border-radius:4px;cursor:pointer;font-size:13px;background:#0079c1;color:white;font-weight:bold;";
                    _llLegendTab.style.cssText = "flex:1;padding:6px 12px;border:none;border-radius:4px;cursor:pointer;font-size:13px;background:#f3f3f3;color:#333;";
                });
                _llLegendTab.addEventListener("click", function () {
                    _llLayerListContent.style.display = "none";
                    _llSearchContainer.style.display  = "none";
                    _llLegendContent.style.display    = "block";
                    _llLegendTab.style.cssText = "flex:1;padding:6px 12px;border:none;border-radius:4px;cursor:pointer;font-size:13px;background:#0079c1;color:white;font-weight:bold;";
                    _llLayersTab.style.cssText = "flex:1;padding:6px 12px;border:none;border-radius:4px;cursor:pointer;font-size:13px;background:#f3f3f3;color:#333;";
                });

                _llTabContainer.appendChild(_llTabButtons);
                _llTabContainer.appendChild(_llSearchContainer);
                _llTabContainer.appendChild(_llLayerListContent);
                _llTabContainer.appendChild(_llLegendContent);

                const combinedExpand = new Expand({
                    view: view,
                    content: _llTabContainer,
                    expandTooltip: "Layer List & Legend",
                    expandIcon: "layers",
                });
                // ─── /Combined LayerList + Legend widget ──────────────────────────────────

                const LlExpandBasemapGallery = new Expand({
                    view: view,
                    expandTooltip: "Basemap",
                    content: new BasemapGallery({
                        view: view
                    })
                });

                const locate = new Locate({
                    view: view,
                    //useHeadingEnabled: false,
                    rotationEnabled: false,
                    goToOverride: function(view, options) {
                        options.target.scale = 1500;
                        return view.goTo(options.target);
                    }
                });

                const scaleBar = new ScaleBar({
                    view: view,
                    unit: "dual", // The scale bar displays both metric and non-metric units.
                });

                const btnMeasure = new Expand({
                    view: view,
                    expandTooltip: "Measurement",
                    container: document.getElementById("btnMeasure"),
                    expandIcon: "measure",
                    content: document.getElementById("divMeasurement")
                });

                const btnZoomToCoordinate = new Expand({
                    view: view,
                    expandTooltip: "Zoom To Coordinate",
                    container: document.getElementById("btnZoomToCoordinate"),
                    expandIcon: '', //layer-zoom-to
                    content: document.getElementById("divZoomToCoordinate")
                });


                if (window.location.href.indexOf("mapmobile") == -1) {

                    const btnZoomToScale = new Expand({
                        view: view,
                        expandTooltip: "Zoom To Scale",
                        container: document.getElementById("btnZoomToScale"),
                        expandIcon: "",
                        content: document.getElementById("divZoomToScale")
                    });

                    const btnBookmark = new Expand({
                        view: view,
                        expandTooltip: "Bookmark",
                        container: document.getElementById("btnBookmark"),
                        expandIcon: "",
                        content: document.getElementById("divBookmark")
                    });

                    const btnPlanet = new Expand({
                        view: view,
                        expandTooltip: "Planet Imagery",
                        container: document.getElementById("btnPlanet"),
                        expandIcon: "globe",
                        content: document.getElementById("divPlanet")
                    });
                }

                // esri icons: https://developers.arcgis.com/calcite-design-system/icons/

                view.ui.add([searchWidget, combinedExpand, LlExpandBasemapGallery], "top-left");

                view.ui.move(["zoom"], "top-left");

                view.ui.add("divBtn4", "top-right");
                view.ui.add("divZoom", "top-right");
                view.ui.add("divBtn2", "top-right");
                view.ui.add("divBtn3", "top-right");
                view.ui.add("divBtn5", "top-right");
                view.ui.add("divBtn6", "top-right");
                view.ui.add("terhadBottom", "bottom-right");

                if (window.location.href.indexOf("mapmobile") > -1) {
                    view.ui.remove("divBtn5");
                }

                view.ui.add(scaleBar, "bottom-left");

                // ─── ADD DATA Widget ─────────────────────────────────────────────────────
                (function () {
                    const _adTempLayers = [];
                    const _adTokenCache = {};

                    function _adRandomColor() {
                        return [
                            Math.floor(Math.random() * 200),
                            Math.floor(Math.random() * 200),
                            Math.floor(Math.random() * 200),
                            0.6
                        ];
                    }

                    function _adNormalizeFieldType(type) {
                        const m = {
                            esriFieldTypeInteger: "integer",
                            esriFieldTypeSmallInteger: "small-integer",
                            esriFieldTypeDouble: "double",
                            esriFieldTypeSingle: "single",
                            esriFieldTypeString: "string",
                            esriFieldTypeDate: "date",
                            esriFieldTypeOID: "oid",
                            esriFieldTypeGlobalID: "global-id",
                            esriFieldTypeBlob: "blob",
                            esriFieldTypeGeometry: "geometry",
                            esriFieldTypeGUID: "guid",
                        };
                        return m[type] || "string";
                    }

                    function _adNormalizeGeometryType(type) {
                        const m = {
                            esriGeometryPoint: "point",
                            esriGeometryMultipoint: "multipoint",
                            esriGeometryPolyline: "polyline",
                            esriGeometryPolygon: "polygon",
                            esriGeometryEnvelope: "envelope",
                        };
                        return m[type] || type;
                    }

                    function _adGeomTypeStr(type) {
                        return { point: "point", multipoint: "multipoint", polyline: "polyline", polygon: "polygon" }[type] || type;
                    }

                    // ── Build widget HTML ──
                    const container = document.createElement("div");
                    container.style.cssText = "width:480px;background:white;padding:14px;border-radius:4px;max-height:80vh;overflow-y:auto;";
                    container.innerHTML = `
                        <h3 style="margin:0 0 12px;font-size:15px;">🗂️ <strong>Tambah Lapisan Sementara</strong></h3>

                        <div style="margin-bottom:12px;">
                            <label class="form-label">🔗 Masukkan URL Lapisan</label>
                            <input id="_ad-url" type="text" class="form-control form-control-sm" placeholder="e.g. https://.../FeatureServer/0" />
                            <small style="display:block;margin-top:4px;color:#666;font-size:11px;">
                                Supported: <strong>FeatureLayer</strong>, <strong>MapImageLayer</strong>, <strong>ImageryLayer</strong>,
                                <strong>WMSLayer</strong>, <strong>WMTSLayer</strong>, <strong>WFSLayer</strong>, <strong>KML URL</strong>
                            </small>
                        </div>
                        <div style="margin-bottom:12px;">
                            <button id="_ad-add-btn" class="btn btn-primary btn-sm"><i class="fa fa-plus me-1"></i> Tambah Lapisan</button>
                        </div>
                        <hr style="margin:10px 0;" />
                        <div style="margin-bottom:12px;">
                            <label class="form-label">📁 Muat Naik Fail</label>
                            <input type="file" id="_ad-upload" class="form-control form-control-sm" accept=".geojson,.json,.zip,.csv,.kml" />
                            <small>Format : Shapefile (.zip), (.geojson), (.csv), (.kml) | Saiz max: 50MB</small>
                        </div>
                        <div style="margin-top:10px;">
                            <strong style="font-size:13px;">🧾 Lapisan Ditambah:</strong>
                            <ul id="_ad-layer-list" style="margin:6px 0 0;list-style:disc;background:#f9f9f9;padding:0;border-radius:6px;min-height:28px;"></ul>
                        </div>`;

                    const elUrl     = container.querySelector("#_ad-url");
                    const elAddBtn  = container.querySelector("#_ad-add-btn");
                    const elList    = container.querySelector("#_ad-layer-list");
                    const elUpload  = container.querySelector("#_ad-upload");

                    function _adRefreshList() {
                        elList.innerHTML = "";
                        _adTempLayers.forEach(function (layer, index) {
                            const li = document.createElement("li");
                            li.style.cssText = "display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;background-color: #128af91a;border-radius: 0.5rem;padding: 10px;margin-bottom: 6px;";
                            const titleSpan = document.createElement("span");
                            titleSpan.textContent = layer.title || ("Lapisan " + (index + 1));
                            const removeBtn = document.createElement("button");
                            removeBtn.textContent = "❌";
                            removeBtn.title = "Buang";
                            removeBtn.style.cssText = "background:transparent;border:none;cursor:pointer;font-size:10px;margin-left:auto;color:#dc3545;padding:2px 6px;";
                            removeBtn.onclick = function () {
                                map.remove(layer);
                                _adTempLayers.splice(index, 1);
                                _adRefreshList();
                            };
                            li.appendChild(titleSpan);
                            li.appendChild(removeBtn);
                            elList.appendChild(li);
                        });
                    }

                    // ── Shared KML text loader (called from both URL and file upload) ──
                    async function _adLoadKmlText(kmlText, title) {
                        function _kmlColor(hex) {
                            if (!hex || hex.length < 8) return null;
                            return [parseInt(hex.slice(6,8),16), parseInt(hex.slice(4,6),16), parseInt(hex.slice(2,4),16), Math.round(parseInt(hex.slice(0,2),16)/255*100)/100];
                        }
                        function _kmlCoords(str) {
                            return str.trim().split(/\s+/).filter(Boolean).map(function(c){ const p=c.split(","); return [parseFloat(p[0]),parseFloat(p[1])]; });
                        }
                        function _kmlGetText(el, tag) {
                            const n = el.getElementsByTagName(tag)[0]; return n ? n.textContent.trim() : "";
                        }
                        function _parseStyleEl(el) {
                            const s = {};
                            const is = el.getElementsByTagName("IconStyle")[0];
                            if (is) {
                                const h = is.getElementsByTagName("href")[0]; if (h) s.iconUrl = h.textContent.trim();
                                const sc = is.getElementsByTagName("scale")[0]; s.iconScale = sc ? parseFloat(sc.textContent)||1 : 1;
                            }
                            const ls = el.getElementsByTagName("LineStyle")[0];
                            if (ls) {
                                const c = ls.getElementsByTagName("color")[0]; if (c) s.lineColor = _kmlColor(c.textContent.trim());
                                const w = ls.getElementsByTagName("width")[0]; if (w) s.lineWidth = parseFloat(w.textContent)||1;
                            }
                            const ps = el.getElementsByTagName("PolyStyle")[0];
                            if (ps) {
                                const c = ps.getElementsByTagName("color")[0]; if (c) s.fillColor = _kmlColor(c.textContent.trim());
                                const o = ps.getElementsByTagName("outline")[0]; s.polyOutline = !o || o.textContent.trim() !== "0";
                            }
                            return s;
                        }

                        function _kmlFallback(rawText, ttl) {
                            try {
                                const kmlDoc = new DOMParser().parseFromString(rawText, "text/xml");
                                const styleMap = {};
                                const styleEls = kmlDoc.getElementsByTagName("Style");
                                for (let i = 0; i < styleEls.length; i++) { const id = styleEls[i].getAttribute("id"); if (id) styleMap["#"+id] = _parseStyleEl(styleEls[i]); }
                                const smEls = kmlDoc.getElementsByTagName("StyleMap");
                                for (let i = 0; i < smEls.length; i++) {
                                    const id = smEls[i].getAttribute("id"); if (!id) continue;
                                    const pairs = smEls[i].getElementsByTagName("Pair");
                                    for (let j = 0; j < pairs.length; j++) {
                                        const keyEl = pairs[j].getElementsByTagName("key")[0];
                                        if (keyEl && keyEl.textContent.trim() === "normal") {
                                            const urlEl = pairs[j].getElementsByTagName("styleUrl")[0];
                                            if (urlEl && styleMap[urlEl.textContent.trim()]) styleMap["#"+id] = styleMap[urlEl.textContent.trim()];
                                            break;
                                        }
                                    }
                                }
                                function _resolveStyle(pm) {
                                    let s = {};
                                    for (let i = 0; i < pm.children.length; i++) { if (pm.children[i].tagName === "Style") { s = _parseStyleEl(pm.children[i]); break; } }
                                    const urlEl = pm.getElementsByTagName("styleUrl")[0];
                                    if (urlEl) { const ref = urlEl.textContent.trim(); if (styleMap[ref]) s = Object.assign({}, styleMap[ref], s); }
                                    return s;
                                }
                                const groups = { point: [], polyline: [], polygon: [] };
                                let oid = 1;
                                const placemarks = kmlDoc.getElementsByTagName("Placemark");
                                for (let pi = 0; pi < placemarks.length; pi++) {
                                    const pm = placemarks[pi];
                                    const pmStyle = _resolveStyle(pm);
                                    const name = _kmlGetText(pm, "name");
                                    const description = _kmlGetText(pm, "description");
                                    const pmUrlEl = pm.getElementsByTagName("styleUrl")[0];
                                    const pmStyleKey = pmUrlEl ? pmUrlEl.textContent.trim() : "";
                                    const ptEl = pm.getElementsByTagName("Point")[0];
                                    const lsEl = pm.getElementsByTagName("LineString")[0];
                                    const pgEl = pm.getElementsByTagName("Polygon")[0];
                                    const mgEl = pm.getElementsByTagName("MultiGeometry")[0];
                                    function _pushPoint(coordEl) {
                                        const c = _kmlCoords(_kmlGetText(coordEl, "coordinates"));
                                        if (c.length) groups.point.push({ type:"Feature", geometry:{type:"Point",coordinates:c[0]}, properties:{OBJECTID:oid++,name,description,_iconUrl:pmStyle.iconUrl||"",_iconScale:pmStyle.iconScale||1}, _style:pmStyle });
                                    }
                                    function _pushLine(coordEl) {
                                        const c = _kmlCoords(_kmlGetText(coordEl, "coordinates"));
                                        if (c.length) groups.polyline.push({ type:"Feature", geometry:{type:"LineString",coordinates:c}, properties:{OBJECTID:oid++,name,description,_styleKey:pmStyleKey}, _style:pmStyle });
                                    }
                                    function _pushPolygon(pgEl2) {
                                        const outerEl = pgEl2.getElementsByTagName("outerBoundaryIs")[0]; if (!outerEl) return;
                                        const rings = [_kmlCoords(_kmlGetText(outerEl, "coordinates"))];
                                        const holes = pgEl2.getElementsByTagName("innerBoundaryIs");
                                        for (let hi = 0; hi < holes.length; hi++) rings.push(_kmlCoords(_kmlGetText(holes[hi], "coordinates")));
                                        groups.polygon.push({ type:"Feature", geometry:{type:"Polygon",coordinates:rings}, properties:{OBJECTID:oid++,name,description,_styleKey:pmStyleKey}, _style:pmStyle });
                                    }
                                    if      (ptEl) { _pushPoint(ptEl); }
                                    else if (lsEl) { _pushLine(lsEl); }
                                    else if (pgEl) { _pushPolygon(pgEl); }
                                    else if (mgEl) {
                                        const mPts = mgEl.getElementsByTagName("Point");
                                        const mLss = mgEl.getElementsByTagName("LineString");
                                        const mPgs = mgEl.getElementsByTagName("Polygon");
                                        for (let i = 0; i < mPts.length; i++) _pushPoint(mPts[i]);
                                        for (let i = 0; i < mLss.length; i++) _pushLine(mLss[i]);
                                        for (let i = 0; i < mPgs.length; i++) _pushPolygon(mPgs[i]);
                                    }
                                }
                                const totalFeatures = groups.point.length + groups.polyline.length + groups.polygon.length;
                                if (!totalFeatures) { alert("❌ No valid features found in KML."); return; }
                                const defaultColor = _adRandomColor();
                                const multiType = ["point","polyline","polygon"].filter(function(k){ return groups[k].length > 0; }).length > 1;
                                let firstLayer = null;
                                ["polygon","polyline","point"].forEach(function(gtype) {
                                    const feats = groups[gtype]; if (!feats.length) return;
                                    const cleanFeats = feats.map(function(f){ return { type:"Feature", geometry:f.geometry, properties:f.properties }; });
                                    const blobUrl = URL.createObjectURL(new Blob([JSON.stringify({type:"FeatureCollection",features:cleanFeats})], {type:"application/json"}));
                                    const layerTitle = ttl + (multiType ? " — " + gtype : "");
                                    let renderer;
                                    if (gtype === "point") {
                                        const iconUrls = [...new Set(feats.map(function(f){ return f._style && f._style.iconUrl; }).filter(Boolean))];
                                        if (iconUrls.length === 1) { renderer = { type:"simple", symbol:{type:"picture-marker",url:iconUrls[0],width:"24px",height:"24px"} }; }
                                        else if (iconUrls.length > 1) { renderer = { type:"unique-value", field:"_iconUrl", uniqueValueInfos:iconUrls.map(function(url){ return {value:url,symbol:{type:"picture-marker",url,width:"24px",height:"24px"}}; }), defaultSymbol:{type:"simple-marker",color:defaultColor,size:8,outline:{color:[255,255,255,0.8],width:1}} }; }
                                        else { renderer = { type:"simple", symbol:{type:"simple-marker",color:defaultColor,size:8,outline:{color:[255,255,255,0.8],width:1}} }; }
                                    } else if (gtype === "polyline") {
                                        const uKeys = [...new Set(feats.map(function(f){ return f.properties._styleKey||""; }))];
                                        if (uKeys.length > 1) { renderer = { type:"unique-value", field:"_styleKey", uniqueValueInfos:uKeys.map(function(k){ const st=styleMap[k]||{}; return {value:k,symbol:{type:"simple-line",color:st.lineColor||defaultColor,width:st.lineWidth||2}}; }), defaultSymbol:{type:"simple-line",color:defaultColor,width:2} }; }
                                        else { const st=feats[0]._style||{}; renderer = { type:"simple", symbol:{type:"simple-line",color:st.lineColor||defaultColor,width:st.lineWidth||2} }; }
                                    } else {
                                        const uKeys = [...new Set(feats.map(function(f){ return f.properties._styleKey||""; }))];
                                        if (uKeys.length > 1) { renderer = { type:"unique-value", field:"_styleKey", uniqueValueInfos:uKeys.map(function(k){ const st=styleMap[k]||{}; return {value:k,symbol:{type:"simple-fill",color:st.fillColor||defaultColor,outline:{color:st.lineColor||[80,80,80,0.9],width:st.lineWidth||1}}}; }), defaultSymbol:{type:"simple-fill",color:defaultColor,outline:{color:[80,80,80,0.9],width:1}} }; }
                                        else { const st=feats[0]._style||{}; renderer = { type:"simple", symbol:{type:"simple-fill",color:st.fillColor||defaultColor,outline:{color:st.lineColor||[80,80,80,0.9],width:st.lineWidth||1}} }; }
                                    }
                                    const popupTemplate = { title:"{name}", content:[{type:"fields",fieldInfos:[{fieldName:"name",label:"Name"},{fieldName:"description",label:"Description"}]}] };
                                    const lyr = new GeoJSONLayer({ url:blobUrl, title:layerTitle, popupEnabled:true, popupTemplate, renderer });
                                    map.add(lyr);
                                    if (!firstLayer) { firstLayer = lyr; lyr.when(function(){ view.goTo(lyr.fullExtent).catch(function(){}); }); }
                                    _adTempLayers.push(lyr);
                                });
                                _adRefreshList();
                            } catch (err) { console.error(err); alert("❌ Invalid KML."); }
                        }

                        // Try KMLLayer (ArcGIS proxy) first; fall back to client-side parser
                        try {
                            const blobUrl = URL.createObjectURL(new Blob([kmlText], { type: "application/vnd.google-earth.kml+xml" }));
                            const kmlLayer = new KMLLayer({ url: blobUrl, title });
                            await kmlLayer.load();
                            map.add(kmlLayer);
                            kmlLayer.when(function() { view.goTo(kmlLayer.fullExtent).catch(function(){}); });
                            _adTempLayers.push(kmlLayer);
                            _adRefreshList();
                            console.log("KML: loaded via KMLLayer.");
                        } catch (kmlErr) {
                            console.warn("KML: KMLLayer failed, falling back to GeoJSONLayer.", kmlErr);
                            _kmlFallback(kmlText, title);
                        }
                    }

                    // ── Add from URL ──
                    elAddBtn.addEventListener("click", async function () {
                        try {
                            const url = elUrl.value.trim();
                            if (!url) { alert("Sila masukkan URL yang sah."); return; }

                            let authToken = null;
                            const isArcGIS = url.includes("/rest/services/") || url.includes("/FeatureServer") ||
                                url.includes("/MapServer") || url.includes("/ImageServer") || url.includes("/SceneServer");

                            if (isArcGIS) {
                                try {
                                    const serverUrl = url.split("/rest/")[0];
                                    if (!_adTokenCache[serverUrl]) {
                                        let requiresAuth = false, isFederated = false, portalUrl = "";
                                        try {
                                            const testUrl = url.includes("?") ? (url + "&f=json") : (url + "?f=json");
                                            const testRes = await fetch(testUrl);
                                            if (testRes.ok) {
                                                const td = await testRes.json();
                                                if (td.error && (td.error.code === 499 || td.error.code === 498 ||
                                                    td.error.code === 401 || td.error.code === 403 ||
                                                    (td.error.message && (td.error.message.toLowerCase().includes("token") ||
                                                    td.error.message.toLowerCase().includes("credentials"))))) {
                                                    requiresAuth = true;
                                                }
                                            } else if (testRes.status === 401 || testRes.status === 403) {
                                                requiresAuth = true;
                                            }
                                        } catch (_) { requiresAuth = false; }

                                        if (requiresAuth) {
                                            try {
                                                const infoRes = await fetch(serverUrl + "/rest/info?f=pjson");
                                                const infoData = await infoRes.json();
                                                if (infoData.owningSystemUrl) { isFederated = true; portalUrl = infoData.owningSystemUrl; }
                                            } catch (_) {}
                                            const username = prompt("Pengesahan diperlukan untuk:\n" + (isFederated ? portalUrl : serverUrl) + "\n\nNama Pengguna:");
                                            if (!username) { alert("Pengesahan dibatalkan."); return; }
                                            const password = prompt("Kata Laluan:");
                                            if (!password) { alert("Pengesahan dibatalkan."); return; }
                                            const tokenEndpoint = isFederated && portalUrl
                                                ? (portalUrl + "/sharing/rest/generateToken")
                                                : (serverUrl + "/tokens/generateToken");
                                            const tokenRes = await fetch(tokenEndpoint, {
                                                method: "POST",
                                                headers: { "Content-Type": "application/x-www-form-urlencoded" },
                                                body: new URLSearchParams({ username, password, client: "referer", referer: window.location.origin, expiration: "60", f: "json" }),
                                            });
                                            const tokenData = await tokenRes.json();
                                            if (tokenData && tokenData.token) {
                                                _adTokenCache[serverUrl] = tokenData.token;
                                                authToken = tokenData.token;
                                            } else {
                                                throw new Error((tokenData && tokenData.error && tokenData.error.message) || "Gagal menjana token");
                                            }
                                        }
                                    } else {
                                        authToken = _adTokenCache[url.split("/rest/")[0]];
                                    }
                                } catch (_) { authToken = null; }
                            }

                            const tCust = authToken ? { customParameters: { token: authToken } } : {};
                            const tApi  = authToken ? { apiKey: authToken } : {};
                            let layer = null;

                            if (url.includes("/FeatureServer") || /\/\d+$/.test(url)) {
                                layer = new FeatureLayer(Object.assign({ url, outFields: ["*"] }, tApi));
                            } else if (url.includes("/ImageServer")) {
                                layer = new ImageryLayer(Object.assign({ url }, tCust));
                            } else if (/\/wms(server)?(\?|$|\/)/i.test(url) || /service=wms/i.test(url)) {
                                layer = new WMSLayer(Object.assign({ url }, tCust));
                            } else if (/\/wmts(\/|\?|$)/i.test(url) || /service=wmts/i.test(url)) {
                                layer = new WMTSLayer(Object.assign({ url }, tCust));
                            } else if (url.includes("/WFSServer") || /\/wfs(\?|$)/i.test(url) || /service=wfs/i.test(url)) {
                                layer = new WFSLayer(Object.assign({ url: url.replace(/\/WFSServer.*$/, "/WFSServer"), outFields: ["*"], popupEnabled: true }, tCust));
                            } else if (url.includes("/MapServer")) {
                                let useTile = false;
                                try {
                                    const ir = await fetch(url.includes("?") ? (url + "&f=json") : (url + "?f=json"));
                                    if (ir.ok) { const id = await ir.json(); useTile = !!id.singleFusedMapCache; }
                                } catch (_) {}
                                layer = useTile
                                    ? new TileLayer(Object.assign({ url }, tCust))
                                    : new MapImageLayer(Object.assign({ url }, tCust));
                            } else if (/\.kml(\?|$)/i.test(url) || /[?&](f|format|outputFormat)=kml/i.test(url)) {
                                // KML service URL — try KMLLayer with real URL (proxy can reach it), fallback to fetch+parse
                                const kmlTitle = (function() { try { return decodeURIComponent(url.split("/").pop().split("?")[0]).replace(/\.kml$/i,"") || "KML Layer"; } catch(_) { return "KML Layer"; } })();
                                try {
                                    const kmlLayer = new KMLLayer({ url, title: kmlTitle });
                                    await kmlLayer.load();
                                    map.add(kmlLayer);
                                    kmlLayer.when(function() { view.goTo(kmlLayer.fullExtent).catch(function(){}); });
                                    _adTempLayers.push(kmlLayer);
                                    _adRefreshList();
                                    elUrl.value = "";
                                    console.log("KML URL: loaded via KMLLayer.");
                                } catch (kmlErr) {
                                    console.warn("KML URL: KMLLayer failed, fetching text...", kmlErr);
                                    try {
                                        const res = await fetch(url);
                                        if (!res.ok) throw new Error("HTTP " + res.status);
                                        await _adLoadKmlText(await res.text(), kmlTitle);
                                        elUrl.value = "";
                                    } catch (fetchErr) {
                                        console.error("KML URL fetch failed:", fetchErr);
                                        alert("❌ Failed to load KML from URL.\n\n" + (fetchErr.message || ""));
                                    }
                                }
                                return;
                            } else {
                                alert("Unsupported layer type.\n\nSupported: /FeatureServer, /MapServer, /ImageServer, /wms, /wmts, /wfs, .kml");
                                return;
                            }

                            map.add(layer);
                            _adTempLayers.push(layer);
                            _adRefreshList();
                            elUrl.value = "";
                        } catch (err) {
                            console.error("ADD DATA: failed to add layer:", err);
                            alert("❌ Gagal menambah lapisan. Semak konsol untuk butiran.");
                        }
                    });

                    // ── File upload ──
                    elUpload.addEventListener("change", async function () {
                        try {
                            const file = elUpload.files && elUpload.files[0];
                            if (!file) return;
                            const fname = file.name.toLowerCase();

                            if (fname.endsWith(".csv")) {
                                const reader = new FileReader();
                                reader.onload = function (e) {
                                    try {
                                        const lines = e.target.result.split("\n").filter(function (l) { return l.trim(); });
                                        if (lines.length < 2) { alert("❌ CSV must have at least a header and one data row."); return; }
                                        const headers = lines[0].split(",").map(function (h) { return h.trim().toLowerCase(); });
                                        const latIdx = headers.findIndex(function (h) { return h.includes("lat") || h.includes("latitude") || h === "y"; });
                                        const lonIdx = headers.findIndex(function (h) { return h.includes("lon") || h.includes("lng") || h.includes("longitude") || h === "x"; });
                                        if (latIdx === -1 || lonIdx === -1) { alert("❌ CSV must have lat/lon columns (e.g. lat, lon, x, y)."); return; }
                                        const features = [];
                                        for (let i = 1; i < lines.length; i++) {
                                            const vals = lines[i].split(",").map(function (v) { return v.trim(); });
                                            const lat = parseFloat(vals[latIdx]), lon = parseFloat(vals[lonIdx]);
                                            if (!isNaN(lat) && !isNaN(lon)) {
                                                const attrs = {};
                                                headers.forEach(function (h, idx) { attrs[h] = vals[idx] || ""; });
                                                features.push({ geometry: { type: "point", x: lon, y: lat, spatialReference: { wkid: 4326 } }, attributes: attrs });
                                            }
                                        }
                                        if (!features.length) { alert("❌ No valid coordinates found in CSV."); return; }
                                        const color = _adRandomColor();
                                        const csvLayer = new FeatureLayer({
                                            source: features,
                                            objectIdField: "ObjectID",
                                            fields: headers.map(function (h, idx) {
                                                return { name: h, alias: h.charAt(0).toUpperCase() + h.slice(1), type: (idx === latIdx || idx === lonIdx ? "double" : "string") };
                                            }),
                                            geometryType: "point",
                                            spatialReference: { wkid: 4326 },
                                            title: file.name.replace(".csv", ""),
                                            renderer: { type: "simple", symbol: { type: "simple-marker", color, size: 8, outline: { color: [255,255,255,0.8], width: 1 } } },
                                            popupTemplate: {
                                                title: file.name.replace(".csv", ""),
                                                content: [{ type: "fields", fieldInfos: headers.map(function (h) { return { fieldName: h, label: h.charAt(0).toUpperCase() + h.slice(1) }; }) }]
                                            },
                                        });
                                        map.add(csvLayer);
                                        _adTempLayers.push(csvLayer);
                                        _adRefreshList();
                                        csvLayer.when(function () { view.goTo(csvLayer.fullExtent); });
                                    } catch (err) { console.error(err); alert("❌ Failed to parse CSV."); }
                                };
                                reader.readAsText(file);

                            } else if (fname.endsWith(".geojson") || fname.endsWith(".json")) {
                                const reader = new FileReader();
                                reader.onload = function (e) {
                                    try {
                                        const geojson = JSON.parse(e.target.result);
                                        const blobUrl = URL.createObjectURL(new Blob([JSON.stringify(geojson)], { type: "application/json" }));
                                        const color = _adRandomColor();
                                        const gjLayer = new GeoJSONLayer({ url: blobUrl, title: file.name.replace(/\.[^/.]+$/, "") });
                                        map.add(gjLayer);
                                        gjLayer.when(function () {
                                            const gt = gjLayer.geometryType;
                                            let renderer;
                                            if (gt === "point" || gt === "multipoint")   renderer = { type: "simple", symbol: { type: "simple-marker", color, size: 8, outline: { color: [255,255,255,0.8], width: 1 } } };
                                            else if (gt === "polyline")                  renderer = { type: "simple", symbol: { type: "simple-line", color, width: 2 } };
                                            else if (gt === "polygon")                   renderer = { type: "simple", symbol: { type: "simple-fill", color, outline: { color: [255,255,255,0.8], width: 1 } } };
                                            if (renderer) gjLayer.renderer = renderer;
                                        });
                                        _adTempLayers.push(gjLayer);
                                        _adRefreshList();
                                    } catch (err) { console.error(err); alert("❌ Invalid GeoJSON file."); }
                                };
                                reader.readAsText(file);

                            } else if (fname.endsWith(".kml")) {
                                const reader = new FileReader();
                                reader.onload = async function (e) {
                                    await _adLoadKmlText(e.target.result, file.name.replace(/\.[^/.]+$/, ""));
                                };
                                reader.readAsText(file);

                            } else if (fname.endsWith(".zip")) {
                                const formData = new FormData();
                                formData.append("file", file);
                                const publishParameters = {
                                    name: file.name.replace(".zip", ""),
                                    targetSR: { wkid: 4326 },
                                    maxRecordCount: 1000,
                                    enforceInputFileSizeLimit: true,
                                    enforceOutputJsonSizeLimit: true,
                                };
                                try {
                                    const response = await esriRequest("https://www.arcgis.com/sharing/rest/content/features/generate", {
                                        method: "post",
                                        query: { filetype: "shapefile", publishParameters: JSON.stringify(publishParameters), f: "json" },
                                        body: formData,
                                        responseType: "json",
                                    });
                                    const layerData = response.data.featureCollection &&
                                        response.data.featureCollection.layers &&
                                        response.data.featureCollection.layers[0];
                                    if (!layerData) throw new Error("No layer found in uploaded shapefile.");

                                    const OID_FIELD = "OBJECTID";
                                    const hasOID = layerData.layerDefinition.fields.some(function (f) { return f.type === "oid" || f.name === OID_FIELD; });
                                    if (!hasOID) {
                                        layerData.layerDefinition.fields.push({ name: OID_FIELD, alias: OID_FIELD, type: "oid" });
                                        layerData.featureSet.features.forEach(function (f, i) { f.attributes[OID_FIELD] = i + 1; });
                                        layerData.layerDefinition.objectIdField = OID_FIELD;
                                    }
                                    layerData.layerDefinition.fields = layerData.layerDefinition.fields.map(function (f) {
                                        return Object.assign({}, f, { type: _adNormalizeFieldType(f.type) });
                                    });
                                    layerData.layerDefinition.geometryType = _adNormalizeGeometryType(layerData.layerDefinition.geometryType);
                                    layerData.featureSet.features = layerData.featureSet.features.map(function (f) {
                                        f.geometry = Object.assign({}, f.geometry, { type: _adGeomTypeStr(layerData.layerDefinition.geometryType) });
                                        return f;
                                    });

                                    const color = _adRandomColor();
                                    const gt    = layerData.layerDefinition.geometryType;
                                    let renderer;
                                    if (gt === "point")      renderer = { type: "simple", symbol: { type: "simple-marker", color, size: 8, outline: { color: [255,255,255,0.8], width: 1 } } };
                                    else if (gt === "polyline") renderer = { type: "simple", symbol: { type: "simple-line", color, width: 2 } };
                                    else if (gt === "polygon")  renderer = { type: "simple", symbol: { type: "simple-fill", color, outline: { color: [255,255,255,0.8], width: 1 } } };

                                    const sfLayer = new FeatureLayer({
                                        source: layerData.featureSet.features,
                                        fields: layerData.layerDefinition.fields,
                                        objectIdField: layerData.layerDefinition.objectIdField,
                                        geometryType: layerData.layerDefinition.geometryType,
                                        spatialReference: { wkid: 4326 },
                                        title: file.name.replace(".zip", ""),
                                        renderer: renderer,
                                    });
                                    map.add(sfLayer);
                                    _adTempLayers.push(sfLayer);
                                    _adRefreshList();
                                    alert("✅ Shapefile loaded successfully.");
                                } catch (err) {
                                    console.error("ADD DATA: shapefile upload failed:", err);
                                    alert("❌ Failed to upload shapefile.\n\n" + (err.message || "Unknown error."));
                                }
                            } else {
                                alert("❌ Unsupported format. Please use .geojson, .json, .csv, .zip, or .kml");
                            }
                            elUpload.value = "";
                        } catch (err) { console.error("ADD DATA: upload error:", err); }
                    });

                    // ── Mount Expand widget ──
                    const addDataExpand = new Expand({
                        id: "lapisan-sementara",
                        view: view,
                        content: container,
                        expandTooltip: "Add Data",
                        expandIcon: "add-features",
                    });
                    view.ui.add(addDataExpand, "top-right");
                })();
                // ─── /ADD DATA Widget ────────────────────────────────────────────────────

                let ccWidget = new CoordinateConversion({
                    view: view,
                    locationSymbol: {
                        type: "simple-marker", 
                        color: "orange",
                        size: "16px",
                        outline: {
                            color: [255, 255, 0],
                            width: 3,
                        },
                    },
                });

                // console.log(ccWidget.formats); 

                function removeCCItem(strName){
                    let items = ccWidget.formats.items; 
                    for (let i = 0; i < items.length; i++) {
                        const element = items[i];
                        if (element.name==strName) ccWidget.formats.remove(element); 
                    }
                }

                let arrItems = ["basemap", "ddm", "dms", "mgrs", "usng", "utm", "dd"];
                for (let i = 0; i < arrItems.length; i++) {
                    removeCCItem(arrItems[i]); 
                }
                
                let items = ccWidget.formats.items; 
                for (let i = 0; i < items.length; i++) {
                    const element = items[i];
                    if (element.name=="xy") element.label = "WGS84"; 
                    //else if (element.name=="dd") element.label = "KERTAU RSO METERS"; 
                }

                let coordinateConversionActive = false;
                document.getElementById("btnCC")
                    .addEventListener("click", (event) => {
                        if (coordinateConversionActive) {
                            view.ui.remove(ccWidget);
                            coordinateConversionActive = false;
                        } else {
                            view.ui.add(ccWidget, "bottom-right");
                            coordinateConversionActive = true;
                        }

                    });

                const numberSearchPattern = /-?\d+[\.]?\d*/;

                const ccFormatGDM2000 = new Format({
                    name: "GDM 2000",
                    conversionInfo: {
                    spatialReference: new SpatialReference({ wkid: 3375 }),
                    reverseConvert: function (string, format) {
                        const parts = string.split(",");
                        return new Point({
                        x: parseFloat(parts[0]),
                        y: parseFloat(parts[1]),
                        spatialReference: { wkid: 3375 },
                        });
                    },
                    },
                    coordinateSegments: [
                    {
                        alias: "X",
                        description: "easting",
                        searchPattern: numberSearchPattern,
                    },
                    {
                        alias: "Y",
                        description: "northing",
                        searchPattern: numberSearchPattern,
                    },
                    ],
                    defaultPattern: "X, Y",
                });

                // Add our new format to the widget's dropdown
                ccWidget.formats.add(ccFormatGDM2000);


                const ccFormatKertauRSOMeter = new Format({
                    name: "Kertau RSO Meter",
                    conversionInfo: {
                    spatialReference: new SpatialReference({ wkid: 102062 }),
                    reverseConvert: function (string, format) {
                        const parts = string.split(",");
                        return new Point({
                        x: parseFloat(parts[0]),
                        y: parseFloat(parts[1]),
                        spatialReference: { wkid: 102062 },
                        });
                    },
                    },
                    coordinateSegments: [
                    {
                        alias: "X",
                        description: "easting",
                        searchPattern: numberSearchPattern,
                    },
                    {
                        alias: "Y",
                        description: "northing",
                        searchPattern: numberSearchPattern,
                    },
                    ],
                    defaultPattern: "X, Y",
                });

                // Add our new format to the widget's dropdown
                ccWidget.formats.add(ccFormatKertauRSOMeter);

                // End widget


                // expand one item, other expands will be collapse
                const expandItems = [combinedExpand, LlExpandBasemapGallery];
                for (let i = 0; i < expandItems.length; i++) {
                    expandItems[i].watch("expanded", (expanded) => {
                        if (expanded) {
                            for (let j = 0; j < expandItems.length; j++) {
                                if (j !== i) expandItems[j].collapse();
                            }
                        }
                    });
                }

                console.log("Map loaded");

                // _cdInit is a hoisted function declaration defined later in this file.
                // Calling it here runs ALL Change Detection setup before any later crash.
                _cdInit();

                //query query query query query query query query query query query query query query query query query query
                let urlQuery = "",
                    strWhere = "",
                    queryType = "";


                fInitQuery = function(type) {
                    queryType = type;
                    console.log(" -=-=- queryType: " + queryType); 
                    runQuery();
                }

                function runQuery() {
                    if (queryType !== "DropdownHSK" && queryType !== "DropdownKompartmen") gLayer.removeAll();

                    if (queryType == "txtQuery") {
                        let queryText = $("#txtQuery").val();

                        if ($('#radDaerah').is(':checked')) {
                            queryType = "Daerah";
                            urlQuery = urlDaerahHutan;
                            strWhere = "STATE like '%" + queryText + "%'";
                        } else if ($('#radMukim').is(':checked')) {
                            queryType = "Mukim";
                            urlQuery = urlMukim;
                            strWhere = "MUKIM like '%" + queryText + "%'";
                        } else if ($('#radLot').is(':checked')) {
                            queryType = "Lot";
                            urlQuery = urlLot;
                            strWhere = "LOT = '" + queryText + "'";
                        }
                    } else if (queryType == "DropdownDaerahHutan") {
                        urlQuery = urlDaerahHutan;
                        strWhere = "1=1";
                    } else if (queryType == "DropdownHSK") {
                        urlQuery = urlHSK;
                        strWhere = "Upper(DPH)='" + $("#sDaerahHutan").val().toUpperCase() + "'";
                    } else if (queryType == "DropdownKompartmen") {
                        urlQuery = urlKompartmen;
                        strWhere = "Upper(HSK)='" + $("#sHSK").val().toUpperCase() + "'";
                        //strWhere = "1=1";
                    } else if (queryType == "DaerahHutan" || queryType == "DaerahHutanGeometry") {
                        urlQuery = urlDaerahHutan;
                        strWhere = "Upper(DPH)='" + $("#sDaerahHutan").val().toUpperCase() + "'";
                    } else if (queryType == "HSK" || queryType == "HSKGeometry") {
                        urlQuery = urlHSK;
                        strWhere = "Upper(HSK)='" + $("#sHSK").val().toUpperCase() + "'";
                    } else if (queryType == "Kompartmen" || queryType == "KompartmenGeometry") {
                        urlQuery = urlKompartmen;
                        strWhere = "Upper(DPH)='" + $("#sDaerahHutan").val().toUpperCase() + "' and Upper(HSK)='" +
                            $("#sHSK").val().toUpperCase() +
                            "' and NO_KOMP='" + $("#sKompartmen").val().toUpperCase() + "'";
                    } else if (queryType == "pre_f") {
                        urlQuery = "https://geoformatik.forestry.gov.my/arcgis/rest/services/Pre_F/MapServer/1";
                        strWhere = "Upper(DPH)='" + $("#sDaerahHutan").val().toUpperCase() + "' and Upper(HSK)='" +
                            $("#sHSK").val().toUpperCase() +
                            "' and NO_KOMP='" + $("#sKompartmen").val().toUpperCase() + "'";
                    }
                    else if (queryType=="toGeoJSON") {
                        urlQuery = urlMapServer + "/" + $("#sLayers").val();
                    }



                    let queryObject = new Query();

                    if (queryType == "DaerahHutanGeometry" || queryType == "HSKGeometry" || queryType ==
                        "KompartmenGeometry") {
                        queryObject.geometry = myGeometry;
                    } else if (queryType == "pre_f") {
                        queryObject.geometry = polygonGraphic.geometry;
                    } else if (queryType=="toGeoJSON") {
                        let extent = view.extent; 

                        let polygonFromExtent = new Polygon({
                            rings: [
                            [extent.xmin, extent.ymin],
                            [extent.xmax, extent.ymin],
                            [extent.xmax, extent.ymax],
                            [extent.xmin, extent.ymax],
                            [extent.xmin, extent.ymin]
                            ],
                            spatialReference: extent.spatialReference, 
                        }); 

                        grpc = new Graphic({
                            geometry: {
                                type: "polygon",
                                rings: polygonFromExtent.rings,
                                spatialReference: view.spatialReference
                            },
                            symbol: mysymbolPolygon
                        });
                        
                        queryObject.geometry = grpc.geometry;
                    } else {
                        queryObject.where = strWhere;
                    }

                    queryObject.outSpatialReference = view.spatialReference;
                    
                    if (queryType=="toGeoJSON") {
                        queryObject.outSpatialReference = {
                            wkid: 4326,
                        };
                    }
                    
                    queryObject.returnGeometry = true;
                    queryObject.outFields = ["*"];

                    if (queryType == "pre_f") {
                        queryObject.spatialRelationship = "within"; //within  contains
                    }

                    if (queryType == "DropdownHSK" || queryType == "DropdownKompartmen") {
                        queryObject.returnGeometry = false;
                    } 
                    
                    if (queryType == "DropdownKompartmen"){
                        queryObject.orderByFields = ["NO_KOMP"];   //TODO: cek, ada limitation
                    }

                    query
                        .executeQueryJSON(urlQuery, queryObject)
                        .then(getResults, function(error) {
                            console.log(error); // will print error in console if unsupported layers are used
                            console.log(queryType); 
                        });
                }

                let queryRslt;

                function getResults(response) {

                    queryRslt = response.features.map(function(feature) {
                        feature.symbol = mysymbolPolygon;

                        if (queryType == "pre_f") feature.symbol = lineSymbol;

                        //if (queryType == "DropdownDaerahHutan") feature.symbol = mysymbolPolygonBlank;

                        return feature;
                    });

                    //Add graphic to map and zoom
                    if (queryType !== "DropdownHSK" && queryType !== "DropdownKompartmen") {

                        if (queryType !== "DropdownDaerahHutan") gLayer.addMany(queryRslt);

                        view
                            //zoom
                            .goTo(queryRslt)
                            .catch(function(error) {
                                if (error.name != "AbortError") {
                                    console.log(error);
                                }
                            });
                    }

                    let features = response.features;
                    let strRslt = "<br>";
                    
                    if (queryType == "DropdownDaerahHutan") {
                        $('#sDaerahHutan').empty(); 
                        $('#sDaerahHutan').append($('<option>', {
                            text: '-- Sila Pilih --'
                        }));

                        $('#sHSK').empty(); 
                        $('#sKompartmen').empty(); 
                    } else if (queryType == "DropdownHSK") {
                        $('#sHSK').empty(); 
                        $('#sHSK').append($('<option>', {
                            text: '-- Sila Pilih --'
                        }));

                        $('#sKompartmen').empty(); 
                    } else if (queryType == "DropdownKompartmen") {
                        $('#sKompartmen').empty(); 
                        $('#sKompartmen').append($('<option>', {
                            text: '-- Sila Pilih --'
                        }));
                    }


                    for (let i = 0; i < features.length; i++) {

                        if (queryType == "Daerah") {
                            strRslt += "NEGERI: " + features[i].attributes.STATE;
                            //strRslt += "<br>DAERAH: " + features[i].attributes.ADIST;
                            strRslt += "<br>PERIMETER: " + features[i].attributes.PERIMETER;
                            strRslt += "<br>KELUASAN (HA): " + features[i].attributes.ARH;
                            strRslt += "&nbsp;<button type='button' class='btn btn-info btn-sm' onclick='fZoom(" +
                                features[i]
                                .attributes.OBJECTID_1 +
                                ")'><i class='fas fa-search'></i></button><br><br>";
                        } else if (queryType == "DropdownDaerahHutan") {
                            $('#sDaerahHutan').append($('<option>', {
                                value: features[i].attributes.DPH,  //FOR_DIST
                                text: features[i].attributes.DPH
                            }));
                        } else if (queryType == "DropdownHSK") {
                            $('#sHSK').append($('<option>', {
                                value: features[i].attributes.HSK,
                                text: features[i].attributes.HSK
                            }));
                        } else if (queryType == "DropdownKompartmen") {
                            $('#sKompartmen').append($('<option>', {
                                value: features[i].attributes.NO_KOMP,
                                text: features[i].attributes.NO_KOMP
                            }));
                        }


                    }

                    //DaerahHutanGeometry HSKGeometry KompartmenGeometry

                    if (queryType == "DaerahHutan" || queryType == "HSK" || queryType == "Kompartmen" || queryType ==
                        "DaerahHutanGeometry" || queryType == "HSKGeometry" || queryType == "KompartmenGeometry") {
                        //let myAttr = features[0].attributes;
                        //console.log(myAttr);

                        let strContent = "";

                        for (let i = 0; i < features.length; i++) {
                            let myAttr = features[i].attributes;

                            strContent += '<div class="table-responsive"><table class="table table-bordered table-sm table-striped mb-3">';
                            strContent += '<tbody>';

                            for (const key in myAttr) {
                                if (key.toUpperCase().includes("SHAPE") == false) {
                                    strContent += '<tr>';
                                    strContent += '<th class="w-50 bg-light">' + key.replaceAll("_", " ") + '</th>';
                                    strContent += '<td>' + myAttr[key] + '</td>';
                                    strContent += '</tr>';
                                }
                            }

                            strContent += '</tbody></table></div>';
                        }


                        if (strContent != "") {
                            $("#spanResult").html('<h6 class="font-weight-bold mb-3">Atribut:</h6>' + strContent);
                        }
                    }

                    if (queryType == "DropdownDaerahHutan") {
                        return;
                    } else if (queryType == "DaerahHutan") {
                        fInitQuery("DropdownHSK");
                        return;
                    } else if (queryType == "HSK") {
                        fInitQuery("DropdownKompartmen");
                        return;
                    } else if (queryType == "DropdownHSK") {
                        return;
                    } else if (queryType == "DropdownKompartmen") {
                        return;
                    } else if (queryType=="toGeoJSON") {
                        
                        let strRings = ""; 
                        geometryType = "Polygon"; 

                        //MultiPoint LineString Polygon MultiLineString
                        if (queryRslt[0].geometry.type=="polygon") geometryType = "Polygon"; 
                        else if (queryRslt[0].geometry.type=="point") geometryType = "MultiPoint"; 
                        else geometryType = "MultiLineString"; 

                        if (geometryType == "Polygon"){
                            const rings = queryRslt.map(obj => obj.geometry.rings);

                            strRings = JSON.stringify(rings); 
                            strRings = strRings.replaceAll("[[[", "[["); 
                            strRings = strRings.replaceAll("]]]", "]]"); 
                        } 
                        else if (geometryType == "MultiPoint"){
                            for (let i = 0; i < queryRslt.length; i++) {
                                const element = queryRslt[i].geometry;
                                if (strRings!="") strRings += ", "; 
                                strRings += "[" + element.x + "," + element.y + "]"; 
                            }
                            strRings = "[" + strRings + "]"; 
                        }
                        else if (geometryType == "MultiLineString"){
                            for (let i = 0; i < queryRslt.length; i++) {
                                const paths = queryRslt[i].geometry.paths;
                                
                                if (strRings!="") strRings += ", "; 

                                strRings += JSON.stringify(paths); 
                            }

                            strRings = strRings.replaceAll("[[[", "[["); 
                            strRings = strRings.replaceAll("]]]", "]]"); 
                            strRings = "[" + strRings + "]"; 
                        }

                        console.log(queryRslt[0].geometry.type); 
                        console.log(strRings); 

                        title = $("#sLayers").find(":selected").text(); 

                        generatGeoJSON(geometryType, strRings, title, { "Title": title });

                    }

                    if (features.length == 0) strRslt = "Tiada rekod";

                }

                fZoom = function(objectid) {
                    /*for (let i=0; i < queryRslt.length; i++) {
                        if (queryRslt[i].attributes.OBJECTID==objectid) {
                            view.goTo([queryRslt[i]]);

                            break;
                        }
                    } */


                    arrayIndex = queryRslt.findIndex((obj => obj.attributes.OBJECTID == objectid));

                    if (arrayIndex == -1) {
                        arrayIndex = queryRslt.findIndex((obj => obj.attributes.OBJECTID_1 == objectid));
                    }

                    view.goTo([queryRslt[arrayIndex]]);
                }

                fZoomIn = function(objectid) {
                    view.zoom = view.zoom + 3;
                }

                fZoomOut = function(objectid) {
                    view.zoom = view.zoom - 3;
                }

                //query query query query query query query query query query query query query query query query query query

                //measurement measurement measurement measurement measurement measurement measurement measurement measurement
                let activeWidget = null;

                //// new measurement

                const measurement = new Measurement({
                    view: view,
                    //activeTool: "area",
                    areaUnit: "hectares", 
                    linearUnit: "meters", 
                });

                // measurement.view = view;
                view.ui.add(measurement, "bottom-right");

                document.getElementById("distanceButton")
                    .addEventListener("click", (event) => {
                        distanceMeasurement();
                    });

                document
                    .getElementById("areaButton")
                    .addEventListener("click", (event) => {
                        areaMeasurement();
                    });

                document
                    .getElementById("clearMeasurement")
                    .addEventListener("click", (event) => {
                        clearMeasurements();
                    });

                function distanceMeasurement() {
                    const type = view.type;
                    measurement.activeTool = type.toUpperCase() === "2D" ? "distance" : "direct-line";
                    distanceButton.classList.add("active");
                    areaButton.classList.remove("active");
                }

                // Call the appropriate AreaMeasurement2D or AreaMeasurement3D
                function areaMeasurement() {
                    measurement.activeTool = "area";
                    distanceButton.classList.remove("active");
                    areaButton.classList.add("active");
                }

                // Clears all measurements
                function clearMeasurements() {
                    distanceButton.classList.remove("active");
                    areaButton.classList.remove("active");
                    measurement.clear();
                }
                //measurement measurement measurement measurement measurement measurement measurement measurement measurement

                //map onclick map onclick map onclick map onclick map onclick map onclick map onclick map onclick map onclick 

                view.when(function() {

                    view.on("click", function(event) {
                        if (mapMode == "identify") {
                            executeIdentify(event);
                            return; 
                        } else if (mapMode == "Bookmark") {
                            fGetLatLong(event);
                            mapMode = "";
                        } else if (mapMode == "pref_start_point" || mapMode == "cogo_start_point" || mapMode == "Point Tree Marking") {
                            if (mapMode == "pref_start_point") {
                                $("#txtXPreF").val(event.mapPoint.longitude.toFixed(7));
                                $("#txtYPreF").val(event.mapPoint.latitude.toFixed(7));
                            } else if (mapMode == "cogo_start_point") {
                                $("#txtX2").val(event.mapPoint.longitude.toFixed(7));
                                $("#txtY2").val(event.mapPoint.latitude.toFixed(7));
                            }
                            
                            let x = event.mapPoint.longitude;
                            let y = event.mapPoint.latitude;

                            let point = {
                                type: "point", // autocasts as /Point
                                x: x,
                                y: y,
                                //spatialReference: view.spatialReference
                                spatialReference: {
                                    wkid: 4326,
                                },
                            };

                            pointGraphicTemp = new Graphic({
                                geometry: point,
                                symbol: mySymbolPoint,
                            });

                            if (mapMode == "Point Tree Marking") {
                                myGraphic = pointGraphicTemp; 
                            }

                            gLayerPoint.removeAll();
                            gLayerPoint.add(pointGraphicTemp);
                            
                            if (mapMode == "pref_start_point" || mapMode == "cogo_start_point") mapMode = "";
                        } 

                        view.hitTest(event).then(function(response) {
                            if (response.results.length) {
                                if (mapMode == "Point Tree Marking") {
                                    // Filter results to get the graphic from the desired layer if multiple layers are present
                                    const graphic = response.results.filter(function(result) {
                                        return result.graphic.layer === gLayerTreeMarkingBox; // Replace myGraphicsLayer with your GraphicsLayer instance
                                    })[0].graphic;
                                    
                                    if (graphic) {
                                        // Access graphic attributes or perform actions
                                        console.log("Clicked graphic attributes:", graphic.attributes);

                                        if (graphic.attributes.no_petak) {
                                            no_petak = graphic.attributes.no_petak; 
                                        }
                                    }

                                    mapMode = ""; 
                                }
                            }
                        });

                    });

                    // Set the parameters for the identify
                    params = new IdentifyParameters();
                    params.tolerance = 5;
                    //params.layerIds = [13, 30, 31];
                    params.layerOption = "all"; //visible top all
                    params.width = view.width;
                    params.height = view.height;
                });

                // Executes each time the view is clicked
                function executeIdentify(event) {
                    if (!arrMapImageLayer || arrMapImageLayer.length === 0) {
                        Swal.fire({
                            toast: true,
                            position: 'bottom-end',
                            icon: 'warning',
                            title: 'Tiada Lapisan',
                            text: 'Sila pilih negeri terlebih dahulu.',
                            showConfirmButton: false,
                            timer: 3000
                        });
                        return;
                    }

                    document.getElementById("viewDiv").style.cursor = "wait";

                    // Wait for the layer to load before accessing sublayers
                    arrMapImageLayer[0].load().then(function() {
                        let arrVisibleLayer = []; 
                        arrMapImageLayer[0].allSublayers.forEach(function(sublayer) {
                            if (sublayer.visible) {
                                arrVisibleLayer.push(sublayer.id); 
                            //console.log("Sublayer '" + sublayer.title + "' (ID: " + sublayer.id + ") is visible.");
                            } 
                        });

                        arrMapImageLayer[0].sublayers.forEach(function(sublayer) {
                            if (sublayer.visible == false) {
                                sublayer.sublayers.forEach(function(lyr) {
                                    const index = arrVisibleLayer.indexOf(lyr.id);
                                    if (index > -1) { 
                                        arrVisibleLayer.splice(index, 1); 
                                    }
                                });
                            }

                            const index = arrVisibleLayer.indexOf(sublayer.id);
                            if (index > -1) { 
                                arrVisibleLayer.splice(index, 1); 
                            }
                        });
                        
                    // console.log(arrVisibleLayer); 
                        params.layerIds = arrVisibleLayer; 

                        // Set the geometry to the location of the view click
                        params.geometry = event.mapPoint;
                        params.mapExtent = view.extent;

                        // This function returns a promise that resolves to an array of features
                        // A custom popupTemplate is set for each feature based on the layer it
                        // originates from
                        identify
                            .identify(urlMapServer, params)
                            .then(function(response) {
                                let results = response.results;

                                return results.map(function(result) {
                                    let feature = result.feature;
                                    let layerName = result.layerName;

                                    feature.attributes.layerName = layerName;

                                    /*if (layerName === "Roads") {
                                            feature.popupTemplate = {
                                            // autocasts as new PopupTemplate()
                                            title: layerName,
                                            content:
                                                "<b>Block ID:</b> {BLOCK_ID} " +
                                                "<br><b>Geometry Type:</b> {Shape}" +
                                                "<br><b>Road Length:</b> {Shape_Length}"
                                            };
                                        } else if (layerName === "water") {
                                            feature.popupTemplate = {
                                            // autocasts as new PopupTemplate()
                                            title: "{LABEL_LOCAL}",
                                            content:
                                                "<b>Block ID:</b> {BLOCK_ID} " +
                                                "<br><b>Geometry Type:</b> {Shape}" +
                                                "<br><b>Water Area:</b> {Shape_Area}"
                                            };
                                        } */

                                    let strContent = "";

                                    Object.keys(feature.attributes).forEach(function(key) {
                                        if (key.toUpperCase().includes("SHAPE") == false && key
                                            .toUpperCase().includes("OBJECTID") == false)
                                            strContent += key + ' : ' + feature.attributes[key] +
                                            "<br>";
                                    })

                                    feature.popupTemplate = {
                                        // autocasts as new PopupTemplate()
                                        title: layerName,
                                        content: strContent
                                    };

                                    return feature;
                                });
                            })
                            .then(showPopup)
                            .catch(function(err) {
                                console.error("Identify error:", err);
                                Swal.fire({
                                    toast: true,
                                    position: 'bottom-end',
                                    icon: 'error',
                                    title: 'Ralat Identify',
                                    text: 'Gagal mendapatkan maklumat. Sila cuba lagi.',
                                    showConfirmButton: false,
                                    timer: 3000
                                });
                                document.getElementById("viewDiv").style.cursor = "auto";
                            });
                    }).catch(function(err) {
                        console.error("Layer load error:", err);
                        Swal.fire({
                            toast: true,
                            position: 'bottom-end',
                            icon: 'error',
                            title: 'Ralat Lapisan',
                            text: 'Lapisan peta belum sedia. Sila cuba lagi.',
                            showConfirmButton: false,
                            timer: 3000
                        });
                        document.getElementById("viewDiv").style.cursor = "auto";
                    });

                    // Shows the results of the identify in a popup once the promise is resolved
                    function showPopup(response) {
                        if (response.length > 0) {
                            view.popup.open({
                                features: response,
                                location: event.mapPoint
                            });
                        } else {
                            Swal.fire({
                                toast: true,
                                position: 'bottom-end',
                                icon: 'warning',
                                title: 'Tiada Maklumat',
                                text: 'Tiada info dijumpai pada lokasi ini.',
                                showConfirmButton: false,
                                timer: 3000
                            });
                        }

                        document.getElementById("viewDiv").style.cursor = "auto";
                    }
                }

                //identify identify identify identify identify identify identify identify identify identify identify identify

                //zoomToCoordinate zoomToCoordinate zoomToCoordinate zoomToCoordinate zoomToCoordinate zoomToCoordinate zoomToCoordinate
                fZoomToCoordinate = function() {
                    view.graphics.remove(pointGraphic);

                    let x = $("#txtX").val();
                    let y = $("#txtY").val();

                    if (x == "" || y == "") return;

                    let myWKID = $("#sWKID").val();

                    let mypoint = new Point(
                        [x, y],
                        new SpatialReference({
                            wkid: myWKID
                        })
                    ); //3375

                    let point = {
                        type: "point", // autocasts as /Point
                        x: x,
                        y: y,
                        //spatialReference: view.spatialReference
                        spatialReference: {
                            wkid: myWKID,
                        },
                    };

                    pointGraphic = new Graphic({
                        geometry: point,
                        symbol: {
                            type: "simple-marker", // autocasts as SimpleMarkerSymbol
                            style: "circle",
                            color: "orange",
                            size: "16px",
                            outline: {
                                // autocasts as SimpleLineSymbol
                                color: [255, 255, 0],
                                width: 3,
                            },
                        },
                    });

                    if (myWKID == 3375 || myWKID == 102062) {
                        let outSR = new SpatialReference({
                            wkid: 4326,
                        });

                        let params = new ProjectParameters();
                        params.geometries = [pointGraphic.geometry];
                        params.outSpatialReference = outSR;

                        geometryService
                            .project(urlGeometryService, params, null)
                            .then(function(rslt) {
                                console.log("-=-=- geometryService completed");
                                console.log(rslt);

                                if (rslt[0].x != undefined) {

                                    pointGraphic = new Graphic({
                                        geometry: rslt[0],
                                        symbol: {
                                            type: "simple-marker", // autocasts as SimpleMarkerSymbol
                                            style: "circle",
                                            color: "orange",
                                            size: "16px",
                                            outline: {
                                                color: [255, 255, 0],
                                                width: 3,
                                            },
                                        },
                                    });

                                    view.graphics.add(pointGraphic);
                                    view.zoom = 17;
                                    view.goTo(pointGraphic);
                                }
                            });

                        return;
                    }

                    view.graphics.add(pointGraphic);
                    view.zoom = 17;
                    view.goTo(pointGraphic);

                };
                //zoomToCoordinate zoomToCoordinate zoomToCoordinate zoomToCoordinate zoomToCoordinate zoomToCoordinate zoomToCoordinate

                fZoomToScale = function(type) {
                    let valScale;
                    if (type == "select") {
                        valScale = $("#sScale").val();
                        $("#txtScale").val("");
                    } else {
                        valScale = $("#txtScale").val();
                        $("#sScale").val('');
                    }

                    if (valScale == "") return;

                    view.goTo({
                        scale: valScale
                    });
                }

                view.when(function() {

                    //setTimeout
                    layerList.operationalItems.items.map(function(item) {
                        if (!item.layer.title && item.layer.type === "graphics") {
                            item.layer.listMode = "hide";
                        }
                    });
                });

                //previous next extent =====================================================================================
                _prevExtent = false;
                _preExtent = null;
                _currentExtent = null;
                _extentHistory = [];
                _extentHistoryIndx = 0;
                _nextExtent = false;

                watchUtils.whenTrue(view, "ready", function() {

                    initToolbar();
                    watchUtils.whenOnce(view, "extent", function() {
                        watchUtils.when(view, 'stationary', function(evt) {
                            if (evt) {
                                extentChangeHandler(view.extent);
                            }
                        });
                    });
                });

                function extentChangeHandler(evt) {
                    if (_prevExtent || _nextExtent) {
                        _currentExtent = evt;
                    } else {
                        _preExtent = _currentExtent;
                        _currentExtent = evt;
                        _extentHistory.push({
                            preExtent: _preExtent,
                            currentExtent: _currentExtent
                        });
                        _extentHistoryIndx = _extentHistory.length - 1;
                    }
                    _prevExtent = _nextExtent = false;
                    extentHistoryChange();
                }

                function extentHistoryChange() {
                    if (_extentHistory.length === 0 || _extentHistoryIndx === 0) {
                        document.getElementById("zoomprev").disabled = true;
                    } else {
                        document.getElementById("zoomprev").disabled = false;
                    }
                    if (_extentHistory.length === 0 || _extentHistoryIndx === _extentHistory.length - 1) {
                        document.getElementById("zoomnext").disabled = true;
                    } else {
                        document.getElementById("zoomnext").disabled = false;
                    }
                }

                function initToolbar() {
                    document.getElementById("zoomnext")
                        .addEventListener("click", (event) => {
                            _nextExtent = true;
                            _extentHistoryIndx++;
                            view.goTo(_extentHistory[_extentHistoryIndx].currentExtent);
                        });

                    document.getElementById("zoomprev")
                        .addEventListener("click", (event) => {
                            _prevExtent = true;
                            view.goTo(_extentHistory[_extentHistoryIndx].preExtent);
                            _extentHistoryIndx--;
                        });
                }

                view.ui.add("btnClear", "top-left");

                view.ui.add("divPrevNext", "top-left");

                view.ui.add([homeBtn, locate], "top-left");

                view.ui.add("switch3D", "top-left");

                view.ui.move(["navigation-toggle", "compass"], "top-left");
                //previous next extent =====================================================================================

                //Bookmark
                function fGetLatLong(event) {
                    $("#txtBookmarkLatitude").val(event.mapPoint.latitude);
                    $("#txtBookmarkLongitude").val(event.mapPoint.longitude);

                    let x = event.mapPoint.longitude;
                    let y = event.mapPoint.latitude;

                    let mypoint = new Point(
                        [x, y],
                        new SpatialReference({
                            wkid: 4326
                        })
                    ); //3375

                    let point = {
                        type: "point", // autocasts as /Point
                        x: x,
                        y: y,
                        //spatialReference: view.spatialReference
                        spatialReference: {
                            wkid: 4326,
                        },
                    };

                    pointGraphicTemp = new Graphic({
                        geometry: point,
                        symbol: {
                            type: "simple-marker", // autocasts as SimpleMarkerSymbol
                            style: "square",
                            color: "orange",
                            size: "16px",
                            outline: {
                                // autocasts as SimpleLineSymbol
                                color: [255, 255, 0],
                                width: 3,
                            },
                        },
                    });

                    view.graphics.add(pointGraphicTemp);
                }

                fZoomToBookmark = function(y, x) {
                    console.log(x);

                    view.graphics.remove(pointGraphic);

                    let myWKID = 4326;

                    let mypoint = new Point(
                        [x, y],
                        new SpatialReference({
                            wkid: myWKID
                        })
                    ); //3375

                    let point = {
                        type: "point", // autocasts as /Point
                        x: x,
                        y: y,
                        //spatialReference: view.spatialReference
                        spatialReference: {
                            wkid: myWKID,
                        },
                    };

                    pointGraphic = new Graphic({
                        geometry: point,
                        symbol: {
                            type: "simple-marker", // autocasts as SimpleMarkerSymbol
                            style: "square",
                            color: "orange",
                            size: "16px",
                            outline: {
                                // autocasts as SimpleLineSymbol
                                color: [255, 255, 0],
                                width: 3,
                            },
                        },
                    });

                    view.graphics.add(pointGraphic);
                    view.zoom = 17;
                    view.goTo(pointGraphic);
                }

                //Planet Imagery Planet Imagery Planet Imagery Planet Imagery Planet Imagery Planet Imagery Planet Imagery

                let apiKey = "";
                apiKey = "{{ env('PLANET_KEY') }}";
                if (apiKey=="") apiKey = "PLAK9a271edcc7764f57839af81c7f4e124d";

                let planetLyrTop = null; 
                let planetLyrBottom = null; 

                //https://api.planet.com/basemaps/v1/mosaics/wmts?api_key=PLAK9a271edcc7764f57839af81c7f4e124d

                let planetXYZTileLayer = [];
                let planetXYZTileLayerBottom = [];

                function loadJson(){
                    $.ajax({
                        url: "{{ route('planetxml') }}",
                        type: 'POST',
                        contentType: false, // Do not set Content-Type header
                        processData: false, // Prevent jQuery from automatically transforming the data into a query string
                        headers: {
                            "X-CSRF-TOKEN": "{{ csrf_token() }}"
                        },
                        beforeSend: function() {
                            console.log("Starting...");
                        },
                        timeout: 1200000,
                        success: function(response) {
                            let layers = response.Contents[0].Layer;

                            let results = layers.map(layer => {
                                return {
                                    title: layer["ows:Title"] ? layer["ows:Title"][0] : null,
                                    identifier: layer["ows:Identifier"] ? layer["ows:Identifier"][0] : null
                                };
                            });

                            console.log(results);

                            for (let i = 0; i < results.length; i++) {

                                let name = results[i].identifier;
                                let name_raw = name;

                                name = name.replace(new RegExp(escapeRegExp("_"), 'g'), " ");
                                name = name.toUpperCase();

                                $('#sPlanetTop').append($('<option>', {
                                    value: name_raw,
                                    text: name
                                }));

                                $('#sPlanetBottom').append($('<option>', {
                                    value: name_raw,
                                    text: name
                                }));
                            }
                            
                        },
                        error: function(xhr, status, error) {
                            console.log(xhr);
                            //alert('Error processing the request: ' + error);
                            console.log("Check planet.com API key validity"); 
                        },
                        complete: function() {
                            console.log("Ajax completed");
                            $("#loadingDiv").css("display", "none");
                        }
                    });
                }

                fAddRaster = function(obj) {
                    if (planetXYZTileLayer != null) {
                        map.remove(planetXYZTileLayer);
                        planetXYZTileLayer = null;

                        deleteItemByName("Planet Imagery"); 
                    }

                    if (obj.value == "") return;

                    planetXYZTileLayer = new WebTileLayer({
                                            urlTemplate: "https://tiles.planet.com/basemaps/v1/planet-tiles/" +
                                                obj.value + "/gmap/{level}/{col}/{row}.png?api_key=" + apiKey,
                                            title: "Planet Imagery"
                                        });

                    map.add(planetXYZTileLayer);
                    
                    arrSwipeLayerTop.push({
                        name: "Planet Imagery", 
                        layer: planetXYZTileLayer
                    }); 

                    arrSwipeLayer.push({
                        name: "Planet Imagery", 
                        layer: planetXYZTileLayer
                    }); 

                    updateSwipeDropdown(); 

                    if (boolSwipe) {
                        swipe.position = 100;
                        view.ui.remove(swipe);
                        boolSwipe = false;
                    }
                    
                    if (planetXYZTileLayerBottom != null) {
                        map.reorder(planetXYZTileLayer, 1);
                        map.reorder(planetXYZTileLayerBottom, 0);
                    }
                };

                //TODO:
                fAddRasterBottom = function(obj) {
                    if (planetXYZTileLayerBottom != null) {
                        map.remove(planetXYZTileLayerBottom);
                        planetXYZTileLayerBottom = null;

                        deleteItemByName("Planet Imagery (Bottom)"); 
                    }

                    if (obj.value == "") return;

                    planetXYZTileLayerBottom = new WebTileLayer({
                                            urlTemplate: "https://tiles.planet.com/basemaps/v1/planet-tiles/" +
                                                obj.value + "/gmap/{level}/{col}/{row}.png?api_key=" + apiKey,
                                            title: "Planet Imagery (Bottom)"
                                        });

                    map.add(planetXYZTileLayerBottom);
                    
                    arrSwipeLayerTop.push({
                        name: "Planet Imagery (Bottom)", 
                        layer: planetXYZTileLayerBottom
                    }); 

                    arrSwipeLayer.push({
                        name: "Planet Imagery (Bottom)", 
                        layer: planetXYZTileLayerBottom
                    }); 

                    updateSwipeDropdown(); 

                    if (boolSwipe) {
                        swipe.position = 100;
                        view.ui.remove(swipe);
                        boolSwipe = false;
                    }

                    if (planetXYZTileLayer != null) {
                        map.reorder(planetXYZTileLayer, 1);
                        map.reorder(planetXYZTileLayerBottom, 0);
                    }
                };

                fCancelPlanetImagery = function() {
                    document.getElementById("sPlanetTop").selectedIndex = 0;
                    document.getElementById("sPlanetBottom").selectedIndex = 0;

                    let sPlanetTop = document.getElementById("sPlanetTop");
                    let sPlanetBottom = document.getElementById("sPlanetBottom");

                    fAddRaster(sPlanetTop);
                    fAddRasterBottom(sPlanetBottom);
                }

                // Swipe Swipe Swipe Swipe Swipe Swipe Swipe Swipe Swipe Swipe Swipe Swipe Swipe Swipe Swipe Swipe Swipe
                let boolSwipe = false;
                let swipe = null;
                fSwipe = function() {
                    if (map2d == false) {
                        Swal.fire({
                            icon: 'warning',
                            text: "Fungsi Swipe hanya boleh digunakan pada paparan peta 2D",
                            showConfirmButton: true,
                        })

                        return;
                    }

                    if (boolSwipe) {
                        fRemoveSwipe(); 
                    }

                    const topId    = $("#sSwipeLayerTop").val();
                    const bottomId = $("#sSwipeLayer").val();

                    if (!topId || !bottomId) {
                        alert("Please select both layers.");
                        return;
                    }

                    const topLayer    = map.allLayers.find(function (l) { return l.id === topId; });
                    const bottomLayer = map.allLayers.find(function (l) { return l.id === bottomId; });

                    if (!topLayer || !bottomLayer) {
                        alert("Selected layer not found on map. Please refresh and try again.");
                        return;
                    }

                    swipe = new Swipe({
                        leadingLayers:  [topLayer],
                        trailingLayers: [bottomLayer],
                        position: 35,
                        view: view
                    });

                    view.ui.add(swipe);
                    boolSwipe = true;
                };

                fRemoveSwipe = function() {
                    if (!swipe) return;
                    swipe.position = 100;
                    view.ui.remove(swipe);
                    boolSwipe = false;
                    swipe.destroy();
                    swipe = null;
                };

                //Print Print Print Print Print Print Print Print Print Print Print Print Print Print Print Print Print
                let showPrint = false;
                let print;
                fShowPrint = function() {
                    if (map2d == false) {
                        Swal.fire({
                            icon: 'warning',
                            text: "Fungsi Cetak hanya boleh digunakan pada paparan peta 2D",
                            showConfirmButton: true,
                        })

                        $('#modalPrint').modal('hide');
                        return;
                    }

                    let size = $("#sizeCetak").val();
                    let orientation = $("#orientationCetak").val();

                    // Reset modal state every time warning opened
                    document.getElementById("printSetup").style.display = "block";
                    $("#spanPrint").hide();
                    document.getElementById("titleCetak").value = "";
                    document.getElementById("sizeCetak").value = "";
                    document.getElementById("btnNext").disabled = true;

                    if (showPrint || titleCetak=="") {
                        if (print) print.destroy(); 
                        print = null;
                        showPrint = false;
                        $("#printSetup").show();
                        $("#spanPrint").hide();

                        document.getElementById("spanPrint").innerHTML = "<span id='spanPrintInner'></span>";
                    } else {
                        $("#printSetup").hide();
                        $("#spanPrint").show();
                        let mytemplateOption = {
                            title: titleCetak,
                            // author: "JCODERS author",
                            // copyright: "JCODERS copyright",
                            name: "JC name",
                            description: "JC description",
                            //layoutOptions:  { customTextElements: textElements }
                        }; 
                        
                        let myKod = kodNegeri; 
                        if (myKod == null) myKod = "0"; 

                        if (user.user_category == 1) myKod = "0"; 

                        let myPrintServiceUrl = getMapByKodAndSize(myKod, size, orientation);

                        print = new Print({
                            view: view,
                            // specify your own print service
                            // printServiceUrl: "https://utility.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task", 
                            printServiceUrl: myPrintServiceUrl, 
                            container: document.getElementById("spanPrintInner"), 
                            templateOptions: mytemplateOption
                        });
                        //view.ui.add(print, "top-right");
                        showPrint = true;

                        // setTimeout(() => {
                        //     const list = document.getElementsByClassName("esri-print__header-title")[0];
                        //     //list.getElementsByClassName("child")[0].innerHTML = "Milk";
                        //     list.innerHTML = "Cetak";
                        //     list.style.display = "block";
                        // }, 5000);

                        // print.isFulfilled(() => {
                        //     const list = document.getElementsByClassName("esri-print__header-title")[0];
                        //     //list.getElementsByClassName("child")[0].innerHTML = "Milk";
                        //     list.innerHTML = "Print";
                        // });

                        print.on("load", function(event) {
                            // event is the event handle returned after the event fires.
                            console.log("=========== print loaded");
                            console.log(event);
                        });
                    }

                }

                // Enable/disable "Seterusnya" button
                $("#titleCetak, #sizeCetak").on("input change", function () {
                    let name = $("#titleCetak").val().trim();
                    let size = $("#sizeCetak").val();
                    $("#btnNext").prop("disabled", !(name && size));
                });

                // Click "Seterusnya" button
                $("#btnNext").on("click", function () {
                    titleCetak = $("#titleCetak").val(); 
                    sizeCetak = $("#sizeCetak").val();
                    fShowPrint();
                });

                fShowCustomPanel = function(type) {
                    $('#modalCogo').modal('show');

                    let divCustomContent = $("[name='divCustomContent']");
                    divCustomContent.each(function() {
                        $(this).addClass('d-none');
                    });

                    $("#draw-polygon-button").removeClass("d-none");
                    $("#draw-line-button").removeClass("d-none");

                    if (type == "selectByAttribute") {
                        $("#modalLabelCogo").html("Carian / Query ~ Pilihan Layer");
                        $("#divSelectByAttribute").removeClass("d-none")
                    } else if (type == "COGO") {
                        $("#modalLabelCogo").html("COGO");
                        $("#divSunting").removeClass("d-none");
                    } else if (type == "Pre-F") {
                        $("#modalLabelCogo").html("COGO");
                        $("#divSunting").removeClass("d-none");

                        $("#chkPreF").prop("checked", true);
                        fSwitch('PreF', {
                            "checked": true
                        });
                    } else if (type == "Plant Space") {
                        $("#modalLabelCogo").html("COGO");
                        $("#divSunting").removeClass("d-none");

                        $("#chkPlantSpace").prop("checked", true);
                        fSwitch('PlantSpace', {
                            "checked": true
                        });
                    } else if (type == "Tree Marking") {
                        $("#modalLabelCogo").html("COGO");
                        $("#divSunting").removeClass("d-none");

                        $("#chkTreeMarking").prop("checked", true);
                        fSwitch('TreeMarking', {
                            "checked": true
                        });
                    }

                }

                //URL API URL API URL API URL API URL API URL API URL API URL API URL API URL API URL API URL API URL API
                fAddLayer = function(url) {
                    let tempLayer = null;

                    if ($("#divURLType").is(":visible")) {
                        let urlType = $("#sURLType").find(":selected").val();

                        if (urlType == "ArcGIS Server Web Service") {

                        } else if (urlType == "ArcGIS Server Web Service (Feature Layer)") {
                            tempLayer = new FeatureLayer({
                                url: url
                            });
                        } else if (urlType == "WMS OGC Web Service" || urlType == "WFS OGC Web Service") {
                            tempLayer = new WMSLayer({
                                url: url
                            });
                        } else if (urlType == "KML Layer") {
                            tempLayer = new KMLLayer({
                                url: url
                                //https://earthquake.usgs.gov/fdsnws/event/1/query?format=kml&minmagnitude=5.8
                            });
                        } else if (urlType == "CSV Layer") {
                            tempLayer = new CSVLayer({
                                url: url,
                                //https://developers.arcgis.com/javascript/latest/sample-code/layers-csv/live/earthquakes.csv
                                //copyright: "USGS Earthquakes",
                                //popupTemplate: template
                            });
                        } else if (urlType == "GeoJSON Layer") {
                            tempLayer = new GeoJSONLayer({
                                url: url
                                //https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson
                            });
                        }
                    }

                    if (tempLayer == null) {
                        tempLayer = new MapImageLayer({
                            url: url
                        });
                    }

                    arrLayer.push(tempLayer);
                    map.add(arrLayer[arrLayer.length - 1]);

                    tempLayer.load().catch(function(error) {
                        map.remove(tempLayer);
                        arrLayer.pop();
                        arrLayerIndex.pop();
                        arrUrl.pop();
                        renderTable(arrUrl);
                        sFail('Gagal memuatkan layer. Sila semak URL dan cuba lagi.\n(' + error.message + ')');
                    });

                    arrSwipeLayerTop.push({
                        name: tempLayer.title, 
                        layer: tempLayer
                    }); 

                    arrSwipeLayer.push({
                        name: tempLayer.title, 
                        layer: tempLayer
                    }); 

                    updateSwipeDropdown(); 

                    arrLayerIndex.push(arrLayer.length - 1);
                };

                fRemoveLayer = function(index) {
                    deleteItemByName(arrLayer[index].title);
                    map.remove(arrLayer[index]);
                };
                //URL API URL API URL API URL API URL API URL API URL API URL API URL API URL API URL API URL API URL API

                //Imej satelit Imej satelit Imej satelit Imej satelit Imej satelit Imej satelit Imej satelit Imej satelit

                arrImage = {};
                arrSwipeLayerTop = []; 
                arrSwipeLayer = []; 

                fAddImage = function(obj, url, strName, type) {
                    if (obj.checked == false) {
                        fRemoveImage(strName);

                        deleteItemByName(strName); 
                        updateSelectedImejCount();

                        return;
                    }

                    arrImage[strName] = new MapImageLayer({
                        url: url
                    });
                    
                    arrImage[strName].customType = type;

                    arrSwipeLayerTop.push({
                        name: strName, 
                        layer: arrImage[strName]
                    }); 

                    arrSwipeLayer.push({
                        name: strName, 
                        layer: arrImage[strName]
                    }); 

                    updateSwipeDropdown(); 

                    map.add(arrImage[strName]);
                    updateSelectedImejCount();

                };

                updateSelectedImejCount = function() {
                    let countSatelit = 0;
                    let countDron = 0;
                    
                    for (let key in arrImage) {
                        if (arrImage[key] && arrImage[key].customType) {
                            if (arrImage[key].customType === "Dron") {
                                countDron++;
                            } else {
                                countSatelit++;
                            }
                        }
                    }
                    
                    if (document.getElementById('badgeSatelitCount')) {
                        document.getElementById('badgeSatelitCount').innerText = countSatelit + ' Dipilih';
                    }
                    if (document.getElementById('badgeDronCount')) {
                        document.getElementById('badgeDronCount').innerText = countDron + ' Dipilih';
                    }
                }

                function deleteItemByName(name) {
                    const indexTop = arrSwipeLayerTop.findIndex(item => item.name === name);
                    if (indexTop !== -1) {
                        arrSwipeLayerTop.splice(indexTop, 1)[0]; // Returns the deleted item
                    }

                    const index = arrSwipeLayer.findIndex(item => item.name === name);
                    if (index !== -1) {
                        arrSwipeLayer.splice(index, 1)[0]; // Returns the deleted item
                    }

                    updateSwipeDropdown(); 
                }

                function updateSwipeDropdown() {
                    const prevTop    = $('#sSwipeLayerTop').val();
                    const prevBottom = $('#sSwipeLayer').val();

                    $('#sSwipeLayerTop').empty().append('<option value="">— Select layer —</option>');
                    $('#sSwipeLayer').empty().append('<option value="">— Select layer —</option>');

                    map.allLayers.forEach(function (layer) {
                        if (!layer.title || layer.type === 'graphics') return;
                        $('#sSwipeLayerTop').append($('<option>', { value: layer.id, text: layer.title }));
                        $('#sSwipeLayer').append($('<option>', { value: layer.id, text: layer.title }));
                    });

                    // Restore previous selections if still valid
                    if (prevTop)    $('#sSwipeLayerTop').val(prevTop);
                    if (prevBottom) $('#sSwipeLayer').val(prevBottom);
                }
                window.updateSwipeDropdown = updateSwipeDropdown;

                // Auto-refresh when modal opens
                document.getElementById('modalSwipe').addEventListener('shown.bs.modal', updateSwipeDropdown);

                fRemoveImage = function(strName) {
                    if (arrImage[strName]) {
                        map.remove(arrImage[strName]);
                        delete arrImage[strName];
                    }
                };
                //Imej satelit Imej satelit Imej satelit Imej satelit Imej satelit Imej satelit Imej satelit Imej satelit

                //Draw Draw Draw Draw Draw Draw Draw Draw Draw Draw Draw Draw Draw Draw Draw Draw Draw Draw Draw
                const draw = new Draw({
                    view: view
                });


                document.querySelector("#draw-rectangle-button").onclick = () => {
                    const action = draw.create("rectangle");

                    // fires when a vertex is added
                    action.on("vertex-add", function(evt) {
                        createPolygon(evt.vertices);
                    });

                    // fires when the pointer moves
                    action.on("cursor-update", function(evt) {
                        createPolygon(evt.vertices);
                    });

                    // fires when the drawing is completed
                    action.on("draw-complete", function(evt) {
                        drawComplete = true;
                        createPolygon(evt.vertices);
                    });

                    // fires when a vertex is removed
                    action.on("vertex-remove", function(evt) {
                        createPolygon(evt.vertices);
                    });

                };

                document.querySelector("#draw-polygon-button").onclick = () => {
                    const action = draw.create("polygon");

                    // fires when a vertex is added
                    action.on("vertex-add", function(evt) {
                        createPolygon(evt.vertices);
                    });

                    // fires when the pointer moves
                    action.on("cursor-update", function(evt) {
                        createPolygon(evt.vertices);
                    });

                    // fires when the drawing is completed
                    action.on("draw-complete", function(evt) {
                        drawComplete = true;
                        createPolygon(evt.vertices);
                    });

                    // fires when a vertex is removed
                    action.on("vertex-remove", function(evt) {
                        createPolygon(evt.vertices);
                    });

                };

                document.querySelector("#draw-line-button").onclick = () => {
                    const action = draw.create("polyline");

                    // fires when a vertex is added
                    action.on("vertex-add", function(evt) {
                        createLine(evt.vertices);
                    });

                    // fires when the pointer moves
                    action.on("cursor-update", function(evt) {
                        createLine(evt.vertices);
                    });

                    // fires when the drawing is completed
                    action.on("draw-complete", function(evt) {
                        drawComplete = true;
                        createLine(evt.vertices);
                    });

                    // fires when a vertex is removed
                    action.on("vertex-remove", function(evt) {
                        createLine(evt.vertices);
                    });

                };

                document.querySelector("#draw-point-button").onclick = () => {
                    pointType = "point square";
                    pointButtonOnClick();
                };

                document.querySelector("#draw-point-circle").onclick = () => {
                    pointType = "point circle";
                    pointButtonOnClick();
                };

                document.querySelector("#draw-point-diamond").onclick = () => {
                    pointType = "point diamond";
                    pointButtonOnClick();
                };

                document.querySelector("#draw-point-triangle").onclick = () => {
                    pointType = "point triangle";
                    pointButtonOnClick();
                };

                document.querySelector("#draw-point-x").onclick = () => {
                    pointType = "point x";
                    pointButtonOnClick();
                };

                function pointButtonOnClick() {
                    const action = draw.create("point");

                    // fires when a vertex is added
                    action.on("vertex-add", function(evt) {
                        createPoint(evt.coordinates);
                    });

                    // fires when the pointer moves
                    action.on("cursor-update", function(evt) {
                        createPoint(evt.coordinates);
                    });

                    // fires when the drawing is completed
                    action.on("draw-complete", function(evt) {
                        drawComplete = true;
                        createPoint(evt.coordinates);
                    });

                    // fires when a vertex is removed
                    action.on("vertex-remove", function(evt) {
                        createPoint(evt.coordinates);
                    });
                }

                document.querySelector("#clear-button").onclick = () => {
                    fClear(); 
                };

                document.querySelector("#clear-button2").onclick = () => {
                    fClear(); 
                };

                fClear = function(){
                    view.graphics.removeAll();
                    gLayer.removeAll();
                    if (gLayerPoint) gLayerPoint.removeAll();
                    draw.reset();

                    $("#spanResult").html("");

                    removePreFLayer(); 
                    removeTreeMarkingLayer(); 
                    removeSuntingLayer(); 
                }

                function createPolygon(vertices) {
                    view.graphics.removeAll();

                    myGraphic = new Graphic({
                        geometry: {
                            type: "polygon",
                            rings: vertices,
                            spatialReference: view.spatialReference
                        },
                        symbol: {
                            type: "simple-fill",
                            color: [0, 255, 255, 0.3],
                            style: "solid",
                            outline: {
                                color: "cyan",
                                width: 2
                            }
                        }
                    });

                    view.graphics.add(myGraphic);

                    if (drawComplete) {
                        if (drawMode == "selectByLocation") doQueryGeometry(myGraphic.geometry);
                        drawComplete = false;
                    }
                }

                function createLine(vertices) {
                    view.graphics.removeAll();

                    myGraphic = new Graphic({
                        geometry: {
                            type: "polyline",
                            paths: vertices,
                            spatialReference: view.spatialReference
                        },
                        symbol: {
                            type: "simple-line",
                            color: [0, 255, 255, 0.5],
                            width: 4,
                            cap: "round",
                            join: "round"
                        }
                    });

                    view.graphics.add(myGraphic);

                    if (drawComplete) {
                        if (drawMode == "selectByLocation") doQueryGeometry(myGraphic.geometry);
                        drawComplete = false;
                    }
                }

                function createPoint(coordinates) {
                    view.graphics.removeAll();

                    myGraphic = new Graphic({
                        geometry: {
                            type: "point",
                            x: coordinates[0],
                            y: coordinates[1],
                            spatialReference: view.spatialReference
                        },
                        symbol: {
                            type: "simple-marker",
                            style: "circle",
                            color: "red",
                            size: "8px",
                            outline: {
                                color: [255, 255, 0],
                                width: 1
                            }
                        }
                    });

                    view.graphics.add(myGraphic);

                    if (drawComplete) {
                        if (drawMode == "selectByLocation") doQueryGeometry(myGraphic.geometry);
                        drawComplete = false;
                    }
                }

                let myGeometry, drawComplete = false,
                    drawMode = "";
                
                fInitLakaran = function(){
                    drawMode = "Lakaran"; 
                }

                function doQueryGeometry(geom) {
                    if (strLayer == "") return;

                    myGeometry = geom;

                    if (strLayer == "Daerah Hutan") {
                        fInitQuery("DaerahHutanGeometry");
                    } else if (strLayer == "HSK") {
                        fInitQuery("HSKGeometry");
                    } else if (strLayer == "Kompartmen") {
                        fInitQuery("KompartmenGeometry");
                    }
                }

                //Draw Draw Draw Draw Draw Draw Draw Draw Draw Draw Draw Draw Draw Draw Draw Draw Draw Draw Draw

                fGraphicToWGS = function() {
                    let outSR = new SpatialReference({
                        wkid: 4326,
                    });

                    let params = new ProjectParameters();
                    params.geometries = [myGraphic.geometry];
                    params.outSpatialReference = outSR;

                    geometryService
                        .project(urlGeometryService, params, null)
                        .then(function(rslt) {
                            console.log("-=-=- geometryService completed");
                            console.log(rslt);

                            fSaveLakaranGo(rslt[0]);
                        });
                }

                fPointType = function(type, catatan) {
                    if (type == null) type = "";
                    if (catatan == null) catatan = "";

                    pointType = type;
                    pointCatatan = catatan;
                }

                fZoomToLakaran = function(type, geometry, title = "") {
                    let pnt = null; 
                    let txtSym = null; 
                    let lblGra = null; 

                    let myWKID = 4326;

                    if (type == "point") {
                        let arrPoint = JSON.parse(geometry);
                        let point = {
                            type: "point",
                            x: arrPoint[0],
                            y: arrPoint[1],
                            spatialReference: {
                                wkid: myWKID,
                            },
                        };

                        let pointStyle = "square";

                        if (pointType == "point circle") pointStyle = "circle";
                        if (pointType == "point diamond") pointStyle = "diamond";
                        if (pointType == "point triangle") pointStyle = "triangle";
                        if (pointType == "point x") pointStyle = "x";

                        drawGraphic = new Graphic({
                            geometry: point,
                            symbol: {
                                type: "simple-marker", // autocasts as SimpleMarkerSymbol
                                style: pointStyle,
                                color: "orange",
                                size: "16px",
                                outline: {
                                    // autocasts as SimpleLineSymbol
                                    color: [255, 255, 0],
                                    width: 3,
                                },
                            },
                        });

                        myTextSymbol.text = title; 
                        lblGra = new Graphic({
                            geometry: point,
                            symbol: myTextSymbol
                        });

                        view.graphics.add(lblGra);

                    } else if (type == "polygon" || type == "COGO") {
                        let vertices = JSON.parse(geometry);

                        drawGraphic = new Graphic({
                            geometry: {
                                type: "polygon",
                                rings: vertices,
                                spatialReference: {
                                    wkid: 4326
                                }
                            },
                            symbol: {
                                type: "simple-fill",
                                color: [0, 255, 255, 0.3],
                                style: "solid",
                                outline: {
                                    color: "cyan",
                                    width: 2
                                }
                            }
                        });

                        let area = geometryEngine.geodesicArea(drawGraphic.geometry, "hectares");
                        
                        pnt = drawGraphic.geometry.extent.center;
                        // txtSym = new TextSymbol(title);
                        area = Math.abs(area); 
                        myTextSymbol.text = title + " \n" + area.toFixed(5) + " ha"; 
                        lblGra = new Graphic(pnt, myTextSymbol);
                        gLayer.add(lblGra);
                    } else if (type == "polyline") {
                        let vertices = JSON.parse(geometry);

                        drawGraphic = new Graphic({
                            geometry: {
                                type: "polyline",
                                paths: vertices,
                                spatialReference: {
                                    wkid: 4326
                                }
                            },
                            symbol: {
                                type: "simple-line",
                                color: [0, 255, 255, 0.5],
                                width: 4,
                                cap: "round",
                                join: "round"
                            }
                        });

                        pnt = drawGraphic.geometry.extent.center;
                        myTextSymbol.text = title; 
                        lblGra = new Graphic(pnt, myTextSymbol);
                        view.graphics.add(lblGra);
                    }

                    pointType = "";

                    if (isGereratingBoundary) {
                        isGereratingBoundary = false;
                        polygonGraphic = drawGraphic;
                        queryType = "pre_f";
                        runQuery();
                    }
                    
                    gLayer.add(drawGraphic); 

                    view.zoom = 17;
                    view.goTo(drawGraphic);
                }

                //Cogo Cogo Cogo Cogo Cogo Cogo Cogo Cogo Cogo Cogo Cogo Cogo Cogo Cogo Cogo Cogo Cogo Cogo Cogo

                fZoomToStartPoint = function() {
                    view.graphics.remove(drawGraphic);
                    view.graphics.remove(pointGraphic);
                    gLayer.removeAll();

                    let x = $("#txtX2").val();
                    let y = $("#txtY2").val();

                    if (y == "" || x == "") return;

                    let point = {
                        type: "point", // autocasts as /Point
                        x: x,
                        y: y,
                        //spatialReference: view.spatialReference
                        spatialReference: {
                            wkid: 4326,
                        },
                    };

                    pointGraphic = new Graphic({
                        geometry: point,
                        symbol: {
                            type: "simple-marker", // autocasts as SimpleMarkerSymbol
                            style: "square",
                            color: "orange",
                            size: "16px",
                            outline: {
                                // autocasts as SimpleLineSymbol
                                color: [255, 255, 0],
                                width: 3,
                            },
                        },
                    });

                    gLayer.removeAll();
                    gLayer.add(pointGraphic);
                    view.zoom = 17;
                    view.goTo(pointGraphic);

                    console.log("-=-=-");

                    arrInitialLatLong = [parseFloat(x), parseFloat(y)];

                    $("#btnInitLatLong").prop("disabled", true);
                    $("#txtX2").prop("disabled", true);
                    $("#txtY2").prop("disabled", true);

                    $("#divBearingDistance").removeClass("d-none");
                };

                bearingDistance = function(lat, lon, radius, bearing) {
                    let lat1Rads = toRad(lat);
                    let lon1Rads = toRad(lon);
                    const R_KM = 6371; // radius in KM
                    let d = radius / R_KM; //angular distance on earth's surface

                    let bearingRads = toRad(bearing);
                    let lat2Rads = Math.asin(
                        Math.sin(lat1Rads) * Math.cos(d) + Math.cos(lat1Rads) * Math.sin(d) * Math.cos(bearingRads)
                    );

                    let lon2Rads = lon1Rads + Math.atan2(
                        Math.sin(bearingRads) * Math.sin(d) * Math.cos(lat1Rads),
                        Math.cos(d) - Math.sin(lat1Rads) * Math.sin(lat2Rads)
                    );

                    return {
                        latitude: toDeg(lat2Rads),
                        longitude: toDeg(lon2Rads)
                    }
                }

                function toRad(degrees) {
                    return degrees * Math.PI / 180;
                }

                function toDeg(radians) {
                    return radians * 180 / Math.PI;
                }

                appendPoint = function() {
                    if ($("#txtBearing").val() == "" || $("#txtDistance").val() == "") {
                        return;
                    }

                    txtBearing = parseFloat($("#txtBearing").val());
                    txtDistance = parseFloat($("#txtDistance").val());

                    txtDistance = txtDistance / 1000;

                    arrBearing.push(txtBearing);
                    arrDistance.push(txtDistance);

                    generateLine();
                }

                generateLine = function() {
                    arrLatLong = [];
                    arrLatLong.push([arrInitialLatLong[0], arrInitialLatLong[1]]);

                    for (let i = 0; i < arrBearing.length; i++) {
                        let bd = bearingDistance(arrLatLong[i][1], arrLatLong[i][0], arrDistance[i], arrBearing[i]);
                        arrLatLong.push([bd.longitude.toFixed(7), bd.latitude.toFixed(7)]);
                    }

                    $("#tblCogo tbody").empty();
                    for (let i = 0; i < arrBearing.length; i++) {
                        const bearingDisplay = Number(arrBearing[i]).toFixed(0);
                        const distanceDisplay = arrDistance[i];
                        $('#tblCogo tbody').append(
                        `<tr> 
                            <td> ${(i + 1)} </td>
                            <td> ${arrLatLong[i][1]}, ${arrLatLong[i][0]} </td>
                            <td> ${bearingDisplay} </td>
                            <td> ${distanceDisplay} </td>
                            <td class="text-center">
                                <div class="btn-group">
                                    <button type="button" onclick="insertRowCogo(${i})" class="btn btn-sm btn-outline-success" title="Tambah garis"><i class="fas fa-plus"></i></button>
                                    <button type="button" onclick="editRowCogo(this, 'tblCogo')" class="btn btn-sm btn-outline-warning mr-1" title="Kemaskini"><i class="fas fa-edit"></i></button>
                                    <button type="button"  onclick="deleteRow(this.closest('tr'), ' ${bearingDisplay}', 'tblCogo')" class="btn btn-sm btn-outline-danger" title="Padam"><i class="fas fa-trash"></i></button>
                                </div>
                            </td>
                        </tr>`
                        );
                    }

                    let paths = [];

                    let innerPath = [];

                    for (let i = 0; i < arrLatLong.length; i++) {
                        innerPath.push(arrLatLong[i]);
                    }

                    paths.push(innerPath);

                    let line = new Polyline({
                        hasZ: false,
                        hasM: false,
                        paths: paths,
                        spatialReference: {
                            wkid: 4326
                        }
                    });

                    let polylineGraphic = new Graphic({
                        geometry: line,
                        symbol: lineSymbol
                    });

                    gLayer.removeAll();
                    gLayer.add(polylineGraphic);
                }

                generatePolygon = function() {
                    if (arrLatLong.length < 3) {
                        return;
                    }

                    let rings = [];
                    let subrings = [];

                    // subrings.push(arrInitialLatLong);
                    for (let i = 0; i < arrLatLong.length; i++) {
                        subrings.push(arrLatLong[i]);
                    }

                    subrings.push(arrInitialLatLong);
                    rings.push(subrings);

                    let polygon = new Polygon({
                        hasZ: false,
                        hasM: false,
                        rings: rings,
                        spatialReference: {
                            wkid: 4326
                        }
                    });


                    polygonGraphic = new Graphic({
                        geometry: polygon,
                        symbol: mysymbolPolygon
                    });

                    gLayer.removeAll();
                    gLayer.add(polygonGraphic);

                    $("#btnGeneratePolygon").prop("disabled", true);
                    $("#btnSave").prop("disabled", false);
                }

                fGBoundary = function(geometry) {
                    isGereratingBoundary = true;
                    fZoomToLakaran("COGO", geometry);
                }

                fCancelCogo = function() {
                    $("#divStartPoint").addClass("d-none");
                    $("#btnTambahCogo").removeClass("d-none");
                    $("#btnCancelCogo").addClass("d-none");

                    $("#divBearingDistance").addClass("d-none");

                    $("#tblCogo tbody").empty();

                    arrBearing = [];
                    arrDistance = [];
                    gLayer.removeAll();
                    gLayerPoint.removeAll();
                }
                //Cogo Cogo Cogo Cogo Cogo Cogo Cogo Cogo Cogo Cogo Cogo Cogo Cogo Cogo Cogo Cogo Cogo Cogo Cogo

                //Plant Space Plant Space Plant Space Plant Space Plant Space Plant Space Plant Space Plant Space 
                let arrCenterPointsPlantSpace = []; 
                gLayerPlantSpacePoints = new GraphicsLayer({
                    id: 15, 
                    title: "Plant Space Point"
                });

                gLayerPlantSpacePointsHorizontal = new GraphicsLayer({
                    id: 16, 
                    title: "Plant Space Point Horizontal"
                });

                function initPlantSpace(){
                    map.add(gLayerPlantSpacePoints);
                    map.add(gLayerPlantSpacePointsHorizontal);
                }

                generatePointPlantSpace = function() {
                    if ($("#txtBearing2").val() == "") {
                        return;
                    }

                    txtBearing2 = parseFloat($("#txtBearing2").val());
                    let distanceVal = $("#sDistancePlantSpace").val() || "3x10";
                    let distanceParts = distanceVal.split('x');
                    let distanceMeters = parseFloat(distanceParts[1] || distanceParts[0]);
                    let distance = distanceMeters / 1000;

                    let x = null;
                    let y = null;

                    let currentIndex = 0;

                    if (arrCenterPointsPlantSpace.length == 0) {
                        x = parseFloat($("#txtXPreF").val());
                        y = parseFloat($("#txtYPreF").val());
                        distance = distance / 2; // First point distance is half of selected distance
                    } else {
                        currentIndex = arrCenterPointsPlantSpace.length - 1;
                        x = arrCenterPointsPlantSpace[currentIndex][0];
                        y = arrCenterPointsPlantSpace[currentIndex][1];
                    }

                    let bd = bearingDistance(y, x, distance, txtBearing2);
                    arrCenterPointsPlantSpace.push([bd.longitude, bd.latitude]);

                    arrVerticalPointsPlantSpaceRight.push([]);
                    arrVerticalPointsPlantSpaceLeft.push([]);

                    arrPlantSpaceRight.push([]);
                    arrPlantSpaceLeft.push([]);

                    arrVerticalLineRight.push([]);
                    arrVerticalLineLeft.push([]);

                    arrGrpcVerticalLineRight.push(null);
                    arrGrpcVerticalLineLeft.push(null);

                    //console.log(arrCenterPointsPlantSpace); 

                    $('#sPointPlantSpace').append($('<option>', {
                        value: arrCenterPointsPlantSpace.length - 1,
                        text: "Point " + (arrCenterPointsPlantSpace.length) + " (" + bd.longitude
                            .toFixed(5) + ", " + bd.latitude.toFixed(5) + ")"
                    }));

                    let point = {
                        type: "point",
                        x: bd.longitude,
                        y: bd.latitude,
                        spatialReference: {
                            wkid: 4326
                        },
                    };

                    pointGraphic = new Graphic({
                        geometry: point,
                        symbol: {
                            type: "simple-marker",
                            style: "circle",
                            color: "orange",
                            size: "8px",
                            outline: {
                                color: [255, 255, 0],
                                width: 1,
                            },
                        },
                    });

                    initPlantSpace(); 

                    gLayerPlantSpacePoints.add(pointGraphic);
                }

                generateAllPointsPlantSpace = function() {
                    if ($("#txtBearing2").val() == "") {
                        alert("Sila masukkan Bearing terlebih dahulu.");
                        return;
                    }
                    if ($("#txtDistance2").val() == "") {
                        alert("Sila masukkan Jarak (Total Distance) terlebih dahulu.");
                        return;
                    }

                    // let totalDistanceKm = parseFloat($("#txtDistance2").val());
                    // let totalDistanceMeters = totalDistanceKm * 1000;
                    let totalDistanceMeters = parseFloat($("#txtDistance2").val());
                    let distanceVal = $("#sDistancePlantSpace").val() || "3x10";
                    let distanceParts = distanceVal.split('x');
                    let distanceMeters = parseFloat(distanceParts[1] || distanceParts[0]);

                    let generatedDistance = 0;

                    // If array is not empty, calculate how much distance has already been generated
                    if (arrCenterPointsPlantSpace.length > 0) {
                        generatedDistance = (distanceMeters / 2) + ((arrCenterPointsPlantSpace.length - 1) * distanceMeters);
                    }

                    // First point calculation (if starting from scratch)
                    if (arrCenterPointsPlantSpace.length == 0 && totalDistanceMeters >= (distanceMeters / 2)) {
                        generatePointPlantSpace();
                        generatedDistance += (distanceMeters / 2);
                    }

                    // Subsequent points
                    while ((generatedDistance + distanceMeters) <= totalDistanceMeters) {
                        generatePointPlantSpace();
                        generatedDistance += distanceMeters;
                    }
                }

                generatePointPlantSpaceUndo = function(){
                    arrCenterPointsPlantSpace.pop();
                    gLayerPlantSpacePoints.graphics.pop();

                    const selectLength = $('#sPointPlantSpace option').length;

                    if (selectLength > 1) $('#sPointPlantSpace option:last').remove();
                }

                let bdPlantSpace, bd2PlantSpace;
                let verticalindexPlantSpaceLength; 

                generatePlantSpace = function(position) {
                    if ($("#sPointPlantSpace").val() == "") return;

                    let index = $("#sPointPlantSpace").val();
                    if (index==null) return; 

                    generatePlantSpaceLine(position, index, true); 

                    let point = {
                        type: "point",
                        x: bdPlantSpace.longitude,
                        y: bdPlantSpace.latitude,
                        spatialReference: {
                            wkid: 4326
                        }
                    };

                    let grpcID = position + ":" + index + ":" + (verticalindexPlantSpaceLength - 1).toString().padStart(3, '0');

                    let attr = { id:grpcID };

                    pointGraphic = new Graphic({
                        geometry: point,
                        symbol: pointSymbolGreenYellow,
                        attributes: attr
                    });

                    gLayerPlantSpacePointsHorizontal.add(pointGraphic);
                }

                generatePlantSpaceLine = function(position, index, addNew){
                    x = arrCenterPointsPlantSpace[index][0];
                    y = arrCenterPointsPlantSpace[index][1];

                    let distanceVal = $("#sDistancePlantSpace").val() || "3x10";
                    let distanceParts = distanceVal.split('x');
                    let sideDistanceKm = parseFloat(distanceParts[0]) / 1000;

                    let distance = sideDistanceKm / 2;
                    let minusDistance = 0;

                    let grpcID = position + ":" + index;
                    let attr = { id:grpcID };

                    if (position == "right") {
                        if (arrVerticalPointsPlantSpaceRight[index].length > 0) {
                            distance = sideDistanceKm;
                            minusDistance = sideDistanceKm / 2;
                        }

                        bdPlantSpace = bearingDistance(y, x, (distance * (arrVerticalPointsPlantSpaceRight[index].length + 1) - minusDistance), txtBearing2 + 90);
                        bd2PlantSpace = bdPlantSpace;
                        if (addNew) {
                            arrVerticalPointsPlantSpaceRight[index].push([bdPlantSpace.longitude, bdPlantSpace.latitude]);
                        }
                        else {
                            bd2PlantSpace = bearingDistance(y, x, (distance * (arrVerticalPointsPlantSpaceRight[index].length) - minusDistance), txtBearing2 + 90);
                        }

                        //line right ------------------------------------------------------------------------------------
                        arrVerticalLineRight[index] = new Polyline({
                            hasZ: false,
                            hasM: false,
                            paths: [[x, y], [bd2PlantSpace.longitude, bd2PlantSpace.latitude]],
                            spatialReference: {
                                wkid: 4326
                            }
                        });
                        
                        if (arrGrpcVerticalLineRight[index] != null) gLayerLinePlantSpace.remove(arrGrpcVerticalLineRight[index]);

                        arrGrpcVerticalLineRight[index] = new Graphic({
                            geometry: arrVerticalLineRight[index],
                            symbol: lineSymbol2, 
                            attributes: attr
                        });

                        gLayerLinePlantSpace.add(arrGrpcVerticalLineRight[index]);

                        verticalindexPlantSpaceLength = arrVerticalPointsPlantSpaceRight[index].length; 
                        //line right ------------------------------------------------------------------------------------
                    } else {
                        if (arrVerticalPointsPlantSpaceLeft[index].length > 0) {
                            distance = sideDistanceKm;
                            minusDistance = sideDistanceKm / 2;
                        }

                        bdPlantSpace = bearingDistance(y, x, (distance * (arrVerticalPointsPlantSpaceLeft[index].length + 1) - minusDistance), txtBearing2 + 90 + 180);
                        bd2PlantSpace = bdPlantSpace;
                        if (addNew) {
                            arrVerticalPointsPlantSpaceLeft[index].push([bdPlantSpace.longitude, bdPlantSpace.latitude]);
                        }
                        else {
                            bd2PlantSpace = bearingDistance(y, x, (distance * (arrVerticalPointsPlantSpaceLeft[index].length) - minusDistance), txtBearing2 + 90 + 180);
                        }
                        
                        //line left ------------------------------------------------------------------------------------
                        arrVerticalLineLeft[index] = new Polyline({
                            hasZ: false,
                            hasM: false,
                            paths: [[x, y], [bd2PlantSpace.longitude, bd2PlantSpace.latitude]],
                            spatialReference: {
                                wkid: 4326
                            }
                        });

                        if (arrGrpcVerticalLineLeft[index] != null) gLayerLinePlantSpace.remove(arrGrpcVerticalLineLeft[index]);

                        arrGrpcVerticalLineLeft[index] = new Graphic({
                            geometry: arrVerticalLineLeft[index],
                            symbol: lineSymbol2, 
                            attributes: attr
                        });

                        gLayerLinePlantSpace.add(arrGrpcVerticalLineLeft[index]);

                        verticalindexPlantSpaceLength = arrVerticalPointsPlantSpaceLeft[index].length; 
                        //line left ------------------------------------------------------------------------------------
                    }
                }

                generatePlantSpaceUndo = function(position){
                    let index = $("#sPointPlantSpace").val();
                    
                    if (position == "right") {
                        arrVerticalPointsPlantSpaceRight[index].pop();
                        verticalindexLength = arrVerticalPointsPlantSpaceRight[index].length; 
                    } 
                    else {
                        arrVerticalPointsPlantSpaceLeft[index].pop();
                        verticalindexLength = arrVerticalPointsPlantSpaceLeft[index].length; 
                    }

                    let graphicToDelete; 

                    //Remove line graphic
                    let grpcID = position + ":" + index;
                    let attr = { id:grpcID };

                    for (let i = 0; i < gLayerLinePlantSpace.graphics.items.length; i++) {
                        const g = gLayerLinePlantSpace.graphics.items[i];
                        if (g.attributes) {
                            if (g.attributes.id == grpcID) {
                                graphicToDelete = g;
                                gLayerLinePlantSpace.remove(graphicToDelete);
                                break; 
                            }
                        }
                    }

                    //Remove polygon graphic
                    grpcID = position + ":" + index + ":" + verticalindexLength.toString().padStart(3, '0');
                    // console.log("--- grpcID: " + grpcID); 
                    graphicToDelete = gLayerPlantSpacePointsHorizontal.graphics.find(g => g.attributes.id === grpcID);
                    gLayerPlantSpacePointsHorizontal.remove(graphicToDelete);

                    generatePlantSpaceLine(position, index, false); 
                }
                //Plant Space Plant Space Plant Space Plant Space Plant Space Plant Space Plant Space Plant Space 

                //Change Detection Change Detection Change Detection Change Detection Change Detection 

                // ── Feature Layer Change Detection ─────────────────────────────────────────
                // Named function so it hoists to top of require() callback and can be called early.
                function _cdInit() {
                    // ── State ──
                    let cdAvailableLayers  = [];
                    let cdBeforeLayerId    = "";
                    let cdAfterLayerId     = "";
                    let cdCompareField     = "gridcode";
                    let cdFeatureLayerFields = [];
                    let cdChangeActive     = false;
                    let cdResultLayer      = null;
                    let cdQueryLimit       = 0;

                    // ── DOM references ──
                    const elBefore     = document.getElementById("cd-map-before-layer");
                    const elAfter      = document.getElementById("cd-map-after-layer");
                    const elFieldWrap  = document.getElementById("cd-map-field-wrapper");
                    const elLimit      = document.getElementById("cd-map-query-limit");
                    const elLimitLbl   = document.getElementById("cd-map-limit-label");
                    const elActions    = document.getElementById("cd-map-actions");
                    const elStats      = document.getElementById("cd-map-stats");
                    const elNoLayers   = document.getElementById("cd-map-no-layers");
                    const elProgress   = document.getElementById("cd-map-progress");
                    const elRefresh    = document.getElementById("cd-map-refresh-btn");

                    // ── Helpers ──
                    function cdUpdateRunBtn() {
                        const runBtn = document.getElementById("cd-map-run-btn");
                        if (!runBtn) return;
                        const canRun = cdBeforeLayerId && cdAfterLayerId && !cdChangeActive;
                        runBtn.disabled = !canRun;
                        runBtn.className = canRun
                            ? "btn btn-success btn-sm w-100"
                            : "btn btn-secondary btn-sm w-100";
                    }

                    function cdRenderLayerOptions() {
                        [elBefore, elAfter].forEach(sel => {
                            const prev = sel.value;
                            sel.innerHTML = '<option value="">Select a polygon feature layer\u2026</option>';
                            cdAvailableLayers.forEach(l => {
                                const opt = document.createElement("option");
                                opt.value = l.id;
                                opt.textContent = l.title;
                                sel.appendChild(opt);
                            });
                            sel.value = prev;
                        });
                        elNoLayers.style.display = cdAvailableLayers.length === 0 ? "block" : "none";
                        cdUpdateRunBtn();
                    }

                    function cdUpdateLayers() {
                        cdAvailableLayers = [];
                        map.allLayers.forEach(layer => {
                            if (layer.type === "feature") {
                                cdAvailableLayers.push({ id: layer.id, title: layer.title || "Untitled Layer" });
                            }
                        });
                        cdRenderLayerOptions();
                        if (!cdChangeActive) {
                            elBefore.disabled = false;
                            elAfter.disabled  = false;
                        }
                    }

                    async function cdLoadFields(layerId) {
                        cdFeatureLayerFields = [];
                        elFieldWrap.innerHTML = `<input id="cd-map-field-text" type="text" class="form-control form-control-sm" value="${cdCompareField}" placeholder="e.g. gridcode" />`;
                        cdBindFieldText();
                        if (!layerId) return;
                        const layer = map.allLayers.find(l => l.id === layerId);
                        if (!layer) return;
                        try {
                            await layer.load();
                            const allowed = ["oid", "integer", "small-integer", "double", "single", "big-integer", "string"];
                            cdFeatureLayerFields = layer.fields.filter(f => allowed.includes(f.type)).map(f => f.name);
                            if (cdFeatureLayerFields.includes("gridcode")) cdCompareField = "gridcode";
                            else if (cdFeatureLayerFields.length > 0)       cdCompareField = cdFeatureLayerFields[0];
                            if (cdFeatureLayerFields.length > 0) {
                                elFieldWrap.innerHTML = `<select id="cd-map-field-select" class="form-select form-select-sm"></select>`;
                                const sel = elFieldWrap.querySelector("#cd-map-field-select");
                                cdFeatureLayerFields.forEach(f => {
                                    const opt = document.createElement("option");
                                    opt.value = f; opt.textContent = f;
                                    sel.appendChild(opt);
                                });
                                sel.value = cdCompareField;
                                sel.addEventListener("change", e => { cdCompareField = e.target.value; });
                            }
                        } catch (_) { /* ignore */ }
                    }

                    function cdBindFieldText() {
                        const el = elFieldWrap.querySelector("#cd-map-field-text");
                        if (el) el.addEventListener("change", e => { cdCompareField = e.target.value; });
                    }

                    function cdSetProgress(msg) {
                        if (msg) {
                            elProgress.style.display = "block";
                            elProgress.textContent   = msg;
                        } else {
                            elProgress.style.display = "none";
                            elProgress.textContent   = "";
                        }
                        const runBtn = document.getElementById("cd-map-run-btn");
                        if (runBtn && msg) runBtn.textContent = msg;
                    }

                    function cdSetActive(active) {
                        cdChangeActive      = active;
                        elBefore.disabled   = active;
                        elAfter.disabled    = active;
                        elLimit.disabled    = active;
                        const fieldEl = elFieldWrap.querySelector("select, input");
                        if (fieldEl) fieldEl.disabled = active;

                        if (active) {
                            elActions.innerHTML = `
                                <div class="d-flex gap-2">
                                    <button id="cd-map-export-btn" class="btn btn-primary btn-sm flex-fill">
                                        <i class="fas fa-download me-1"></i> Jana GeoJSON
                                    </button>
                                    <button id="cd-map-remove-btn" class="btn btn-danger btn-sm flex-fill">
                                        <i class="fas fa-times me-1"></i> Hapus Analisis
                                    </button>
                                </div>`;
                            document.getElementById("cd-map-export-btn").addEventListener("click", cdExportGeoJSON);
                            document.getElementById("cd-map-remove-btn").addEventListener("click", cdRemove);
                        } else {
                            elActions.innerHTML = `
                                <button id="cd-map-run-btn" class="btn btn-secondary btn-sm w-100" disabled>
                                    <i class="fas fa-search me-1"></i> Jana Analisis
                                </button>`;
                            document.getElementById("cd-map-run-btn").addEventListener("click", cdRun);
                            cdUpdateRunBtn();
                        }
                    }

                    function cdShowStats(stats) {
                        elStats.style.display = "block";
                        const byType = Object.entries(stats.changesByType).map(([type, area]) =>
                            `<div class="small border-bottom py-1">
                                <strong>${type}:</strong> ${area.toLocaleString()} m² (${(area / 10000).toFixed(4)} ha)
                             </div>`
                        ).join("");
                        elStats.innerHTML = `
                            <p class="fw-bold mb-1 text-info"><i class="fas fa-check-circle me-1"></i>Hasil Change Detection</p>
                            <p class="small mb-1 text-info"><strong>Perubahan Poligon:</strong> ${stats.featureCount.toLocaleString()}</p>
                            <p class="small mb-2 text-info"><strong>Jumlah luas perubahan :</strong>
                                ${stats.totalArea.toLocaleString()} m² (${(stats.totalArea / 10000).toFixed(2)} ha)</p>
                            <p class="small fw-bold mb-1 text-info">Jenis perubahan:</p>
                            <div style="max-height:140px; overflow-y:auto; " class="text-dark">${byType}</div>`;
                    }

                    // ── Run Change Detection ──
                    async function cdRun() {
                        if (!cdBeforeLayerId || !cdAfterLayerId) {
                            alert("Sila pilih kedua-dua lapisan Sebelum dan Selepas.");
                            return;
                        }
                        if (cdBeforeLayerId === cdAfterLayerId) {
                            alert("Sila pilih dua lapisan yang berbeza.");
                            return;
                        }
                        const field = cdCompareField.trim();
                        if (!field) { alert("Sila masukkan nama atribut untuk dibandingkan."); return; }

                        if (cdResultLayer) { map.remove(cdResultLayer); cdResultLayer = null; }
                        elStats.style.display = "none";
                        cdSetProgress("⏳ Mendapatkan ciri…");

                        try {
                            const beforeFL = map.allLayers.find(l => l.id === cdBeforeLayerId);
                            const afterFL  = map.allLayers.find(l => l.id === cdAfterLayerId);
                            if (!beforeFL || !afterFL) {
                                alert("Lapisan yang dipilih tidak dijumpai pada peta.");
                                cdSetProgress("");
                                return;
                            }

                            async function fetchAll(layer) {
                                await layer.load();
                                const pageSize   = layer.maxRecordCount || 2000;
                                const totalCount = await layer.queryFeatureCount({ where: "1=1" });
                                const fetchLimit = cdQueryLimit > 0 ? Math.min(cdQueryLimit, totalCount) : totalCount;
                                const all = [];
                                for (let start = 0; start < fetchLimit; start += pageSize) {
                                    const res = await layer.queryFeatures({
                                        where: "1=1", outFields: ["*"], returnGeometry: true,
                                        num: Math.min(pageSize, fetchLimit - start), start,
                                        orderByFields: ["objectid"]
                                    });
                                    all.push(...res.features);
                                    cdSetProgress(`Mendapatkan ${layer.title}: ${all.length} / ${fetchLimit}…`);
                                }
                                return all;
                            }

                            const [bFeats, aFeats] = await Promise.all([fetchAll(beforeFL), fetchAll(afterFL)]);
                            if (!bFeats.length || !aFeats.length) {
                                alert("Salah satu atau kedua-dua lapisan tidak mengembalikan sebarang ciri.");
                                cdSetProgress("");
                                return;
                            }

                            await Promise.all([beforeFL.load(), afterFL.load()]);
                            let fieldDef = beforeFL.fields.find(f => f.name === field) ||
                                           afterFL.fields.find(f => f.name === field);
                            const domain     = fieldDef && fieldDef.domain;
                            const isCVD      = domain && domain.type === "coded-value";
                            const lTypes     = beforeFL.types || afterFL.types;
                            const typeIdFld  = beforeFL.typeIdField || afterFL.typeIdField;
                            const hasTypes   = lTypes && lTypes.length > 0 && typeIdFld === field;

                            function getAlias(value) {
                                if (value == null) return "N/A";
                                if (hasTypes) {
                                    const t = lTypes.find(t =>
                                        t.id === value || String(t.id) === String(value) || Number(t.id) === Number(value));
                                    if (t) return t.name;
                                }
                                if (isCVD && domain.codedValues) {
                                    const cv = domain.codedValues.find(cv =>
                                        cv.code === value || String(cv.code) === String(value) || Number(cv.code) === Number(value));
                                    if (cv) return cv.name;
                                }
                                return String(value);
                            }

                            const changedFeats = [];
                            const changesByType = {};
                            let totalAreaSqm    = 0;
                            const yieldUI  = () => new Promise(r => setTimeout(r, 0));
                            const CHUNK    = 20;

                            for (let cs = 0; cs < aFeats.length; cs += CHUNK) {
                                const chunk = aFeats.slice(cs, cs + CHUNK);
                                for (const aFeat of chunk) {
                                    const aGeom = aFeat.geometry;
                                    if (!aGeom || aGeom.type !== "polygon") continue;
                                    const aVal  = aFeat.attributes && aFeat.attributes[field];
                                    for (const bFeat of bFeats) {
                                        const bGeom = bFeat.geometry;
                                        if (!bGeom || bGeom.type !== "polygon") continue;
                                        const bVal = bFeat.attributes && bFeat.attributes[field];
                                        if (String(aVal) === String(bVal)) continue;
                                        const aE = aGeom.extent, bE = bGeom.extent;
                                        if (aE && bE && (aE.xmax < bE.xmin || aE.xmin > bE.xmax ||
                                                          aE.ymax < bE.ymin || aE.ymin > bE.ymax)) continue;
                                        const intr = geometryEngine.intersect(aGeom, bGeom);
                                        if (!intr) continue;
                                        const area = geometryEngine.geodesicArea(intr, "square-meters");
                                        if (!area || area <= 0) continue;
                                        const bAlias = getAlias(bVal), aAlias = getAlias(aVal);
                                        const key    = `${bAlias} \u2192 ${aAlias}`;
                                        changesByType[key] = (changesByType[key] || 0) + area;
                                        totalAreaSqm += area;
                                        changedFeats.push({
                                            geometry: intr,
                                            attributes: {
                                                OBJECTID:    changedFeats.length + 1,
                                                change_from: bAlias, change_to: aAlias,
                                                change_type: key,
                                                area_sqm:    Math.round(area * 100) / 100,
                                                area_ha:     Math.round((area / 10000) * 10000) / 10000
                                            }
                                        });
                                    }
                                }
                                const pct = Math.round(((cs + CHUNK) / aFeats.length) * 100);
                                cdSetProgress(`Memproses… ${Math.min(pct, 100)}% (${changedFeats.length} perubahan)`);
                                await yieldUI();
                            }
                            cdSetProgress("");

                            if (changedFeats.length === 0) {
                                alert("Tiada kawasan yang berubah dijumpai.\n\nPeriksa:\n• Kedua-dua lapisan meliputi kawasan yang sama\n• Medan perbandingan adalah betul\n• Lapisan berkongsi sistem koordinat yang sama");
                                return;
                            }

                            const palette = [
                                [255,0,0,0.7],[255,165,0,0.7],[128,0,128,0.7],[0,128,0,0.7],
                                [0,0,255,0.7],[255,20,147,0.7],[0,206,209,0.7],[139,69,19,0.7]
                            ];
                            const uniqueTypes      = Object.keys(changesByType);
                            const uniqueValueInfos = uniqueTypes.map((type, i) => {
                                const c = palette[i % palette.length];
                                return {
                                    value: type,
                                    symbol: { type: "simple-fill", color: [c[0],c[1],c[2],c[3]], outline: { color: [255,255,255,0.6], width: 0.5 } },
                                    label: type
                                };
                            });

                            cdResultLayer = new FeatureLayer({
                                source: changedFeats,
                                objectIdField: "OBJECTID",
                                geometryType: "polygon",
                                spatialReference: aFeats[0].geometry.spatialReference || { wkid: 102100 },
                                title: `CD Result (${beforeFL.title} \u2192 ${afterFL.title})`,
                                fields: [
                                    { name: "OBJECTID",    type: "oid" },
                                    { name: "change_from", type: "string", alias: "From (Before)" },
                                    { name: "change_to",   type: "string", alias: "To (After)" },
                                    { name: "change_type", type: "string", alias: "Change Type" },
                                    { name: "area_sqm",    type: "double", alias: "Area (m²)" },
                                    { name: "area_ha",     type: "double", alias: "Area (ha)" }
                                ],
                                renderer: {
                                    type: "unique-value", field: "change_type", uniqueValueInfos,
                                    defaultSymbol: { type: "simple-fill", color: [200,200,200,0.5], outline: { color: [255,255,255,0.4], width: 0.5 } }
                                },
                                popupTemplate: {
                                    title: "Change Detected",
                                    content: [{ type: "fields", fieldInfos: [
                                        { fieldName: "change_from", label: "From (Before)" },
                                        { fieldName: "change_to",   label: "To (After)" },
                                        { fieldName: "change_type", label: "Change Type" },
                                        { fieldName: "area_sqm",    label: "Area (m²)" },
                                        { fieldName: "area_ha",     label: "Area (ha)" }
                                    ]}]
                                }
                            });

                            map.add(cdResultLayer);
                            cdSetActive(true);
                            cdShowStats({
                                totalArea:     Math.round(totalAreaSqm),
                                changesByType: Object.fromEntries(Object.entries(changesByType).map(([k,v]) => [k, Math.round(v)])),
                                featureCount:  changedFeats.length
                            });
                            cdResultLayer.when(() => {
                                if (cdResultLayer.fullExtent) view.goTo(cdResultLayer.fullExtent).catch(console.error);
                            });

                        } catch (err) {
                            console.error("Feature layer change detection failed:", err);
                            alert("Change detection failed. See console for details.");
                            cdSetProgress("");
                            cdSetActive(false);
                        }
                    }

                    function cdRemove() {
                        if (cdResultLayer) { map.remove(cdResultLayer); cdResultLayer = null; }
                        cdBeforeLayerId = ""; cdAfterLayerId = "";
                        elBefore.value  = ""; elAfter.value  = "";
                        elStats.style.display = "none";
                        cdFeatureLayerFields  = [];
                        elFieldWrap.innerHTML = `<input id="cd-map-field-text" type="text" class="form-control form-control-sm" value="gridcode" placeholder="e.g. gridcode" />`;
                        cdBindFieldText();
                        cdSetActive(false);
                    }

                    async function cdExportGeoJSON() {
                        if (!cdResultLayer) return;
                        try {
                            const res  = await cdResultLayer.queryFeatures({ where: "1=1", outFields: ["*"], returnGeometry: true, num: 10000 });
                            const feats = res.features.map(f => {
                                const geom = f.geometry;
                                const sr   = geom.spatialReference;
                                const isWM = sr && (sr.wkid === 102100 || sr.wkid === 3857 || sr.latestWkid === 3857);
                                const rings = geom.rings.map(ring =>
                                    ring.map(([x, y]) => {
                                        if (isWM) { const pt = webMercatorUtils.xyToLngLat(x, y); return [Math.round(pt[0]*1e7)/1e7, Math.round(pt[1]*1e7)/1e7]; }
                                        return [Math.round(x*1e7)/1e7, Math.round(y*1e7)/1e7];
                                    })
                                );
                                return { type: "Feature", geometry: { type: "Polygon", coordinates: rings }, properties: Object.assign({}, f.attributes) };
                            });
                            const blob = new Blob([JSON.stringify({ type: "FeatureCollection", features: feats }, null, 2)], { type: "application/geo+json" });
                            const url  = URL.createObjectURL(blob);
                            const a    = document.createElement("a");
                            a.href = url; a.download = `cd_result_${new Date().toISOString().slice(0,10)}.geojson`; a.click();
                            URL.revokeObjectURL(url);
                        } catch (err) { console.error("GeoJSON export failed:", err); alert("Export failed."); }
                    }

                    // ── Event wiring ──
                    window.cdRefreshLayers = cdUpdateLayers; // expose for onclick attribute on Refresh button
                    elRefresh?.addEventListener("click", cdUpdateLayers);

                    elBefore?.addEventListener("change", e => { cdBeforeLayerId = e.target.value; cdLoadFields(cdBeforeLayerId); cdUpdateRunBtn(); });
                    elAfter?.addEventListener("change",  e => { cdAfterLayerId  = e.target.value; cdUpdateRunBtn(); });
                    elLimit?.addEventListener("input",   e => {
                        cdQueryLimit = Math.max(0, parseInt(e.target.value) || 0);
                        elLimitLbl.textContent = cdQueryLimit === 0 ? "Fetch all (slower)" : `~${cdQueryLimit.toLocaleString()} rows`;
                    });
                    document.getElementById("cd-map-run-btn")?.addEventListener("click", cdRun);
                    cdBindFieldText();

                    // ── Refresh layer list when Change Detection modal opens ──
                    document.getElementById("modalChangeDetection").addEventListener("shown.bs.modal", cdUpdateLayers);

                    // ── Track layers added/removed ──
                    view.when(() => {
                        map.allLayers.on("change", cdUpdateLayers);
                    });

                }
                // ── /Feature Layer Change Detection ────────────────────────────────────────

            });

        function fSaveBookmark() {
            if ($("#txtBookmarkLatitude").val() == "" || $("#txtBookmark").val() == "") {
                alert("Sila masukkan nama Bookmark dan klik pada lokasi di atas peta terlebih dahulu");
                return;
            }

            let bookmarkTitle = $("#txtBookmark").val()
            sStore(null, bookmarkTitle, function () {
                fAjaxGet({
                    type: "save_bookmark",
                    title: $("#txtBookmark").val(),
                    latitude: $("#txtBookmarkLatitude").val(),
                    longitude: $("#txtBookmarkLongitude").val(),
                }, function() {
                    console.log(rslt);

                    $("#txtBookmark").val("");
                    $("#txtBookmarkLatitude").val("");
                    $("#txtBookmarkLongitude").val("");
                    fListBookmark();
                    fToggleVisibility('divBookmarkAdd');
                    fShowMessageSuccessOrError(rslt.Result)
                });
            });
        }

        function fListBookmark() {
            fAjaxGet({
                type: "list_bookmark"
            }, function() {

                let strRow = "";
                for (let i = 0; i < rslt.length; i++) {
                    strRow += "<tr>" +
                        "<td>" + (i + 1) + "</td>" +
                        "<td>" + rslt[i].title + "</td>" +
                        "<td>" + 
                            "<button type='button' class='btn btn-sm btn-primary' title='Zoom' onclick='fZoomToBookmark(" + rslt[i].latitude + ", " + rslt[i].longitude + ")'><i class='fas fa-search-plus'></i></button> " +
                            "<button type='button' class='btn btn-sm btn-danger' title='Delete' onclick='fDeleteBookmark(" + rslt[i].id + ",\""+rslt[i].title +"\")'><i class='fas fa-trash'></i></button>" + 
                        "</td>" +
                        "</tr>";
                }

                if (strRow != "") {
                    strTable =
                        "<table class='table table-striped'><thead><tr><th style='width:40px;'>#</th><th>Nama Bookmark</th></tr></thead><tbody>" +
                        strRow +
                        "</tbody></table>";

                    $("#spanTable").html(strTable);
                } else {
                    $("#spanTable").html("");
                }
            });
        }

        function fDeleteBookmark(id, title) {
            sPadam(null, title, function () {
                fAjaxGet({
                    type: "delete_bookmark",
                    id: id,
                }, function() {

                    fListBookmark();
                    fShowMessageSuccessOrError(rslt.Result)
                });
            });
        }

        function fUploadBookmark() {
            let fileInput = document.getElementById('fileBookmarkUpload');
            if (!fileInput.files.length) {
                alert('Sila pilih fail GeoJSON atau KML terlebih dahulu.');
                return;
            }

            let file = fileInput.files[0];
            let ext = file.name.split('.').pop().toLowerCase();
            if (!['geojson', 'json', 'kml'].includes(ext)) {
                alert('Format fail tidak disokong. Sila gunakan fail .geojson atau .kml sahaja.');
                return;
            }

            let formData = new FormData();
            formData.append('file', file);

            $.ajax({
                url: "{{ route('bookmark.upload') }}",
                type: 'POST',
                data: formData,
                contentType: false,
                processData: false,
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                beforeSend: function() {
                    Swal.fire({
                        title: 'Memproses...',
                        text: 'Sila tunggu sementara fail dimuat naik.',
                        allowOutsideClick: false,
                        didOpen: () => { Swal.showLoading(); }
                    });
                },
                success: function(response) {
                    Swal.close();
                    fileInput.value = '';
                    fListBookmark();
                    fToggleVisibility('divBookmarkUpload');
                    fShowMessageSuccessOrError(response.message);
                },
                error: function(xhr) {
                    Swal.close();
                    let msg = xhr.responseJSON?.error || 'Ralat semasa memuat naik fail.';
                    alert(msg);
                }
            });
        }

        function fMapMode(strMode) {

            if (strMode == "identify") {
                if (mapMode !== "identify") {
                    $("#btnIdentify").addClass("action-button-selected");
                    view.cursor = "crosshair";

                    Swal.fire({
                        toast: true,
                        position: 'bottom-end',
                        icon: 'info',
                        title: 'Mod Identify Aktif',
                        text: 'Sila klik pada peta untuk melihat maklumat',
                        showConfirmButton: false,
                        timer: 3000,
                        timerProgressBar: true
                    });
                } else {
                    $("#btnIdentify").removeClass("action-button-selected");
                    mapMode = "";
                    view.cursor = "default";
                    
                    Swal.fire({
                        toast: true,
                        position: 'bottom-end',
                        icon: 'success',
                        title: 'Mod Identify Dimatikan',
                        showConfirmButton: false,
                        timer: 2000
                    });
                    return;
                }
            } else if (strMode == "Bookmark") {
                if (mapMode == "Bookmark") {
                    mapMode = "";
                    return;
                }
            }

            mapMode = strMode;
        }

        function getParameterByName(name) {
            name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
            let regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
                results = regex.exec(location.search);
            return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
        }

        function fSwitch3D() {
            if (window.location.href.indexOf("3D") > -1) {
                window.location.href = window.location.origin + "/map"
            } else {
                window.location.href = window.location.origin + "/map?3D"
            }
        }

        $(document).ready(function() {
            console.log("Ready");

            if (window.location.href.indexOf("3D") > -1){
                map2d = false;
                $("#switch3D").html("2D");
            } else {    //if (window.location.href.indexOf("2D") > -1 || window.location.href.indexOf("mapmobile")  > -1)
                map2d = true;
                $("#switch3D").html("3D");

                if (window.location.href.indexOf("mapmobile")  > -1) {
                    $("#switch3D").css("display", "none");
                    $("#btnLakaran").removeClass("d-none");
                    $("#btnChangeDetection").css("display", "none");
                    $("#rdAddData2").prop('disabled', true);
                }
            } 

            if (negeriId == null) {
                initKodNegeri();
            } else {
                kodNegeri = negeriId;
                fGetMapService(kodNegeri);
            }

            // setTimeout(() => {
            //     console.log("=-=-= " + kodNegeri); 
            // }, 2000);

            fListBookmark();
            fListLakaran();
            fListCogo();
            fListTreeMarking();
            fListImage();

            //Change Detection Change Detection Change Detection Change Detection Change Detection Change Detection 

            $('#modalChangeDetection').modal({backdrop:'static', keyboard:false});
            $('#modalLakaran').modal({backdrop:'static', keyboard:false});
            $('#modalCogo').modal({backdrop:'static', keyboard:false});

            //modal-backdrop


        });

        let user = null; 
        let negeri = null; 
        function initKodNegeri() {
            user = @json($user);
            negeri = @json($user->negeris);
            console.log(" ===== "); 

            kodNegeri = user.negeri_id;

            // if (user.negeri_id==null){

            if (user.role_id == 1 || user.role_id ==2){
                $("#menuPilihanNegeri").removeClass("d-none");
                $("#divPilihanNegeriQuery").removeClass("d-none");

                if (window.location.href.indexOf("mapmobile")  > -1) {
                    $("#btnPilihanNegeri").removeClass("d-none");
                }

                fAjaxGet({
                    type: "list_negeri"
                }, function() {
                    // console.log(rslt);

                    let container = $('#negeriCheckboxList');
                    container.empty();

                    for (let i = 0; i < rslt.length; i++) {
                        const element = rslt[i];

                        // $('#sNegeri').append($('<option>', {
                        //     value: element.id,
                        //     text: element.name, 
                        //     "data-mapservice": element.map_server_url
                        // }));

                        let checkbox = $('<input>', {
                            type: 'checkbox',
                            class: 'form-check-input',
                            id: 'negeri_' + element.id,
                            name: 'negeri[]',
                            value: element.id,
                            'data-mapservice': element.map_server_url,
                            'data-name': element.name
                        });

                        let label = $('<label>', {
                            class: 'form-check-label',
                            for: 'negeri_' + element.id,
                            text: element.name
                        });

                        let wrapper = $('<div>', { class: 'form-check' });
                        wrapper.append(checkbox).append(label);

                        container.append(wrapper);
                    }
                });

                return; 
            }

            fGetMapService(kodNegeri);
        }

        function fPilihNegeri(){
            let selectedValues = $('#negeriCheckboxList input[type=checkbox]:checked').map(function() {
                return $(this).val();
            }).get();

            arrUrlMapServer = $('#negeriCheckboxList input[type=checkbox]:checked').map(function() {
                return $(this).data("mapservice");
            }).get();

            let arrNegeriQuery = $('#negeriCheckboxList input[type=checkbox]:checked').map(function() {
                return {
                    id: $(this).val(),
                    mapservice: $(this).data("mapservice"),
                    name: $(this).data("name")
                };
            }).get();

            $('#sNegeriQuery').empty();

            $('#sNegeriQuery').append($('<option>', {
                text: '-- Sila Pilih --'
            }));
            
            for (let i = 0; i < arrNegeriQuery.length; i++) {
                const element = arrNegeriQuery[i];
                
                $('#sNegeriQuery').append($('<option>', {
                    value: element.mapservice,
                    text: element.name
                }));
            }

            urlMapServer = arrUrlMapServer[0];

            if (arrUrlMapServer.length == 1) {
			    gGetMapServiceJson();
            }
            
            initLayer(); 

            $('#modalPilihanNegeri').modal('hide');
        }

        function fChangeNegeri(obj){
            urlMapServer = obj.value;
			gGetMapServiceJson();
        }

        function fListImage() {
            let selectedYear = $("#filterTahunImej").val();
            fAjaxGet({
                type: "list_image",
                year: selectedYear
            }, function() {

                let satelitImej = "";
                let dronImej = "";

                arrImageURL = [];

                for (let i = 0; i < rslt.length; i++) {
                    const element = rslt[i];
                    let isChecked = arrImage[element.nama] ? "checked" : "";

                    if (element.type != "Dron") {
                        satelitImej += `
                                    <div class="col-md-4">
                                        <div class="form-check mb-2">
                                            <input type="checkbox" class="form-check-input" ` + isChecked + ` onchange="fAddImage(this, '` + element.url + `', '` + element.nama + `', '` + element.type + `')">
                                            <label class="form-check-label" for="check1">` + element.negeri +` (` + element.nama +`)`+ `</label>
                                        </div>
                                    </div>
                                    `;
                    } 
                    else {
                        dronImej += `
                                <div class="col-md-4">
                                    <div class="form-check mb-2">
                                        <input type="checkbox" class="form-check-input" ` + isChecked + ` onchange="fAddImage(this, '` + element.url + `', '` + element.nama + `', '` + element.type + `')">
                                        <label class="form-check-label" for="check1">` + element.negeri +` (` + element.nama +`)`+ `</label>
                                    </div>
                                </div>`;
                    }

                }

                if (satelitImej=="") satelitImej = "<p class='text-muted m-0'>Tiada Imej Satelit</p>"; 
                if (dronImej=="") dronImej = "<p class='text-muted m-0'>Tiada Imej Dron</p>"; 

                $("#satelliteImages").html(satelitImej);
                $("#droneImages").html(dronImej);
                
                if (typeof updateSelectedImejCount === 'function') {
                    updateSelectedImejCount();
                }
            });
        }

        function fToggleDiv(id) {
            let isVisible;
            if ($('#' + id).hasClass("d-none")) {
                isVisible = false;
            } else {
                isVisible = true;
            }

            $('[name="myDiv"]').addClass("d-none");

            if (isVisible) {
                $('#' + id).addClass("d-none");
            } else {
                $('#' + id).removeClass("d-none");
            }
        }

        function fToggleVisibility(id) {
            let isVisible;
            if ($('#' + id).hasClass("d-none")) {
                isVisible = false;
            } else {
                isVisible = true;
            }

            if (isVisible) {
                $('#' + id).addClass("d-none");
            } else {
                $('#' + id).removeClass("d-none");
            }
        }

        function fDeleteLakaran(id, lakaranTitle) {
            sPadam(id, lakaranTitle, function () {
                fAjaxGet({
                    type: "delete_lakaran",
                    id: id,
                }, function() {
                    fListLakaran();
                    fShowMessageSuccessOrError(rslt.Result);
                });
            });
        }

        function fSaveLakaran() {
            if ($("#txtTitle").val() == "" || myGraphic == null) {
                alert("Sila buat lakaran di atas peta dan masukkan nama lakaran terlebih dahulu");
                return;
            }

            // console.log(myGraphic);

            fGraphicToWGS();
        }

        function fSaveLakaranGo(grpc) {

            let theGeometry;
            let lakaranTitle = $("#txtTitle").val();
            if (grpc.type == "polygon") theGeometry = JSON.stringify(grpc.rings);
            else if (grpc.type == "polyline") theGeometry = JSON.stringify(grpc.paths);
            else if (grpc.type == "point") theGeometry = "[" + grpc.x + ", " + grpc.y + "]";

            sStore(null, lakaranTitle, function () {
                fAjaxGet({
                    type: "save_lakaran",
                    title: lakaranTitle,
                    grpc_type: grpc.type,
                    category: pointType,
                    catatan: pointCatatan,
                    geometry: theGeometry,
                    user_id: user.id
                }, function() {
                    pointType = "";
                    pointCatatan = "";

                    $("#txtTitle").val("");
                    myGraphic = null;
                    fListLakaran();
                    fShowMessageSuccessOrError(rslt.Result)
                });
            });
        }

        function fListLakaran() {
            fAjaxGet({
                type: "list_lakaran", 
                user_id: user.id
            }, function() {

                let strRow = "";
                for (let i = 0; i < rslt.length; i++) {
                        // Calculate length for polyline type using Haversine formula
                        let lengthDisplay = "-";
                        if (rslt[i].type == "polyline") {
                            try {
                                let paths = JSON.parse(rslt[i].geometry);
                                let totalLength = 0;

                                // Haversine distance between two [lng, lat] points in meters
                                function haversineDistance(coord1, coord2) {
                                    const R = 6371000; // Earth's radius in meters
                                    const toRad = (deg) => deg * Math.PI / 180;
                                    const dLat = toRad(coord2[1] - coord1[1]);
                                    const dLng = toRad(coord2[0] - coord1[0]);
                                    const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
                                              Math.cos(toRad(coord1[1])) * Math.cos(toRad(coord2[1])) *
                                              Math.sin(dLng / 2) * Math.sin(dLng / 2);
                                    const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
                                    return R * c;
                                }

                                // paths can be [[coords]] (array of paths) or [coords] (single path)
                                let pathArray = (Array.isArray(paths[0]) && Array.isArray(paths[0][0])) ? paths : [paths];
                                for (let p = 0; p < pathArray.length; p++) {
                                    let path = pathArray[p];
                                    for (let v = 1; v < path.length; v++) {
                                        totalLength += haversineDistance(path[v - 1], path[v]);
                                    }
                                }

                                lengthDisplay = totalLength.toFixed(2) + " m";
                            } catch (e) {
                                lengthDisplay = "-";
                            }
                        }

                        strRow += `
                            <tr>
                                <td class="text-center">${i + 1}</td>
                                <td>${rslt[i].title}</td>
                                <td class="text-center">${lengthDisplay}</td>
                                <td class="text-center">
                                    <button type="button" class="btn btn-sm btn-primary" title="Zoom" onclick="fPointType('${rslt[i].category}', '${rslt[i].catatan}'); fZoomToLakaran('${rslt[i].type}', '${rslt[i].geometry}', '${rslt[i].title}')">
                                        <i class="fas fa-search-plus"></i>
                                    </button>

                                    <button type="button" class="btn btn-sm btn-primary" title="Export To GeoJSON" onclick="fInitLakaranGeoJSON('${rslt[i].type}', '${rslt[i].geometry}', '${rslt[i].title}')">
                                        <i class="fas fa-file-export"></i>
                                    </button>

                                    <button type="button" class="btn btn-sm btn-danger" title="Delete Lakaran" onclick="fDeleteLakaran('${rslt[i].id}', '${rslt[i].title}')">
                                        <i class="fa-solid fa-trash"></i>
                                    </button>
                                </td>
                            </tr>
                            `;
                }

                if (strRow != "") {
                    strTable =
                        "<table class='table table-sm table-bordered table-striped'><thead><tr><th class='text-center' style='width:40px;'>#</th><th>Nama Lakaran</th><th class='text-center'>Panjang (m)</th><th class='text-center'>Tindakan</th></tr></thead><tbody>" +
                        strRow +
                        "</tbody></table>";

                    $("#spanTableLakaran").html(strTable);
                } else {
                    $("#spanTableLakaran").html("");
                }
            });
        }

        let j = null;

        function fInitXML(title, type, geometry) {

            obj = new Object();
            obj.name = title;
            obj.type = type;
            obj.coordinates = geometry;

            j = [obj];
            //console.log(j);

            generateXML();
        }

        function generateXML() {
            //console.log(j);
            let doc = document.implementation.createDocument("", "", null);

            const pi = doc.createProcessingInstruction('xml', 'version="1.0" encoding="utf-8"');
            doc.insertBefore(pi, doc.firstChild);

            let kmlElem = doc.createElement("kml");
            kmlElem.setAttribute("xmlns", "http://www.opengis.net/kml/2.2");

            let DocumentElem = doc.createElement("Document");

            let jsondata = j;

            for (let i = 0; i < jsondata.length; i++) {
                //console.log(jsondata[i].name);
                //console.log(jsondata[i].coordinates);

                let nameElem = doc.createElement("name");
                nameElem.innerHTML = jsondata[i].name;


                //JSON.stringify

                let myjson = JSON.parse(jsondata[i].coordinates);

                let coordinatesElem = doc.createElement("coordinates");
                //coordinatesElem.innerHTML = jsondata[i].coordinates;
                //coordinatesElem.innerHTML = myjson;

                let arrTemp = myjson;

                if (jsondata[i].type == "polygon" || jsondata[i].type == "polyline") arrTemp = myjson[i];
                else if (jsondata[i].type == "point") {
                    arrTemp = [];
                    arrTemp.push(myjson);
                }

                let strTemp = "";

                for (let j = 0; j < arrTemp.length; j++) {
                    const element = arrTemp[j];

                    if (strTemp != "") strTemp += " ";
                    strTemp += element[0] + "," + element[1] + ",0"
                }

                coordinatesElem.innerHTML = strTemp;

                let PlacemarkElem = doc.createElement("Placemark");

                PlacemarkElem.appendChild(nameElem);

                if (jsondata[i].type == "point") {
                    let PointElem = doc.createElement("Point");
                    PointElem.appendChild(coordinatesElem);
                    PlacemarkElem.appendChild(PointElem);
                } else if (jsondata[i].type == "polygon") {
                    let LinearRingElem = doc.createElement("LinearRing");
                    LinearRingElem.appendChild(coordinatesElem);


                    let outerBoundaryIsElem = doc.createElement("outerBoundaryIs");
                    outerBoundaryIsElem.appendChild(LinearRingElem);

                    let PolygonElem = doc.createElement("Polygon");
                    PolygonElem.appendChild(outerBoundaryIsElem);

                    PlacemarkElem.appendChild(PolygonElem);
                } else if (jsondata[i].type == "polyline") {
                    let LineStringElem = doc.createElement("LineString");
                    LineStringElem.appendChild(coordinatesElem);
                    PlacemarkElem.appendChild(LineStringElem);
                }

                DocumentElem.appendChild(PlacemarkElem);
            }

            kmlElem.appendChild(DocumentElem);

            doc.appendChild(kmlElem);

            console.log(doc);
            downloadXML(doc);
        }

        function downloadXML(doc) {
            let xmlText = new XMLSerializer().serializeToString(doc);

            let filename = "file.kml";
            filename = j[0].name + ".kml";
            let pom = document.createElement('a');
            let bb = new Blob([xmlText], {
                type: 'text/plain'
            });

            pom.setAttribute('href', window.URL.createObjectURL(bb));
            pom.setAttribute('download', filename);

            pom.dataset.downloadurl = ['text/plain', pom.download, pom.href].join(':');
            pom.draggable = true;
            pom.classList.add('dragout');

            pom.click();
        }

        function fToggleType(i) {
            $("#divAddDataURL").removeClass('d-none');
            $("#divAddDataFile").addClass('d-none');

            $("#rdAddData1").prop("checked", true);

            if (i == 1) {
                $("#modalAddLayerLabel").html("ADD DATA");
                $("#divURLType").removeClass("d-none");
                $("#divRadioAddData").removeClass("d-none");
            } else {
                $("#modalAddLayerLabel").html("URL API");
                $("#divURLType").addClass("d-none");
                $("#divRadioAddData").addClass("d-none");
            }
        }

        function fStartCogo() {
            $("#divStartPoint").removeClass("d-none");
            $("#btnTambahCogo").addClass("d-none");
            $("#btnCancelCogo").removeClass("d-none");

            $("#btnInitLatLong").prop("disabled", false);
            $("#txtX2").prop("disabled", false);
            $("#txtY2").prop("disabled", false);

            $("#divBearingDistance").addClass("d-none");
        }

        function fSaveCogo() {
            let cogoTitle = $("#txtTitleCogo").val();

            if (cogoTitle.trim() === "") {
                alert("Sila masukkan nama kawasan terlebih dahulu");
                return;
            }

            let grpc = polygonGraphic.geometry;
            let theGeometry;

            if (grpc.type === "polygon") {
                theGeometry = JSON.stringify(grpc.rings);
            } else if (grpc.type === "polyline") {
                theGeometry = JSON.stringify(grpc.paths);
            } else if (grpc.type === "point") {
                theGeometry = "[" + grpc.x + ", " + grpc.y + "]";
            }

            id_sunting = fRNo();

            sStore(null, cogoTitle, function () {
                fAjaxGet({
                    type: "save_sunting",
                    title: cogoTitle,
                    grpc_type: grpc.type,
                    geometry: theGeometry,
                    id_sunting: id_sunting
                }, function() {
                    console.log(rslt);

                    fShowMessageSuccessOrError(rslt.Result);

                    $("#txtTitleCogo").val("");
                    $("#btnSave").prop("disabled", true);
                    $("#btnGeneratePolygon").prop("disabled", false);

                    fListCogo();
                    fCancelCogo();
                });
            });
        }

        function fDeleteCogo(id, cogoTitle) {
            sPadam(id, cogoTitle, function () {
                fAjaxGet({
                    type: "delete_cogo",
                    id: id,
                }, function() {

                    fListCogo();
                    fShowMessageSuccessOrError(rslt.Result)
                });
            });
        }

        function fListCogo() {
            fAjaxGet({
                type: "list_cogo"
            }, function() {

                let strRow = "";
                for (let i = 0; i < rslt.length; i++) {
                    strRow += "<tr>" +
                        "<td>" + (i + 1) + "</td>" +
                        "<td>" + rslt[i].title + "</td>" +
                        "<td>" +

                        "<button type='button' class='btn btn-sm btn-primary' title='Zoom' onclick='fZoomToLakaran(&#39;COGO&#39;, &#39;" + rslt[i].geometry + "&#39;, &#39;" + rslt[i].title + "&#39;);fGetListCogoGeometry(&#39;" + rslt[i].id_sunting + "&#39;)'><i class='fas fa-search-plus'></i></button> " +

                        // "<button type='button' class='btn btn-sm btn-primary' title='Export To KML' onclick='fInitXML(&#39;" + rslt[i].title + "&#39;, &#39;" + rslt[i].type + "&#39;, &#39;" + rslt[i].geometry + "&#39;)'><i class='fas fa-file-export'></i></button> " +

                        "<button type='button' class='btn btn-sm btn-primary' title='Export To GeoJSON' onclick='fInitCOGOGeoJSON(&#39;" + rslt[i].geometry + "&#39;, &#39;" + rslt[i].title + "&#39;)'><i class='fas fa-file-export'></i></button> " +

                        "<button type='button' class='btn btn-sm btn-danger' title='Delete' onclick='fDeleteCogo(" + rslt[i].id + ",\"" + rslt[i].title + "\")'><i class='fas fa-trash'></i></button>" +

                        // "<button type='button' class='btn btn-sm btn-primary' title='Create Pre-F' onclick='fGBoundary(&#39;" +
                        // rslt[i].geometry + "&#39;)'><i class='fas fa-border-style'></i></button> " +

                        "</td>" +
                        "</tr>";
                }

                if (strRow != "") {
                    strTable =
                        "<table class='table table-bordered'><thead class='table-info text-center'><tr><th style='width:40px;'>#</th><th>Nama Cogo</th><th></th></tr></thead><tbody>" +
                        strRow +
                        "</tbody></table>";

                    $("#spanTableCogo").html(strTable);
                } else {
                    $("#spanTableCogo").html("");
                }
            });
        }

        function getDistance(lat1, lon1, lat2, lon2) {
            const R = 6371000; // Earth radius in meters
            const toRad = deg => deg * Math.PI / 180;
            const dLat = toRad(lat2 - lat1);
            const dLon = toRad(lon2 - lon1);

            const a = Math.sin(dLat / 2) ** 2 +
                    Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) *
                    Math.sin(dLon / 2) ** 2;

            const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
            const distanceMeters = R * c;
            const distanceKm = distanceMeters / 1000;

            return Math.round(distanceKm);
        }

        function getBearing(lat1, lon1, lat2, lon2) {
            const toRad = deg => deg * Math.PI / 180;
            const toDeg = rad => rad * 180 / Math.PI;

            const dLon = toRad(lon2 - lon1);
            const y = Math.sin(dLon) * Math.cos(toRad(lat2));
            const x = Math.cos(toRad(lat1)) * Math.sin(toRad(lat2)) -
                    Math.sin(toRad(lat1)) * Math.cos(toRad(lat2)) * Math.cos(dLon);

            const brng = toDeg(Math.atan2(y, x));
            return (brng + 360) % 360; // normalize 0–360°
        }

        function fGetListCogoGeometry(id_sunting) {

            fAjaxGet({
                type: "get_cogo_geometry",
                id_sunting: id_sunting
            }, function () {

                for (let i = 0; i < rslt.length; i++) {

                    if (rslt[i].category == "COGO") {
                        // $("#divCogo").removeClass("d-none");
                        $("#divBearingDistance").removeClass("d-none");
                        $("#titleListCogo").html(rslt[i].title);
                        $("#tblCogo > tbody").html("");
                        selectedCogoId = rslt[i].id_sunting || id_sunting;
                        $("#txtTitleCogo").val(rslt[i].title || "");
                        $("#btnSave").addClass("d-none");
                        $("#btnUpdateCogo").removeClass("d-none");
                        $("#btnTambahCogo").addClass("d-none");
                        $("#btnCancelCogo").removeClass("d-none");

                        
                        let listGeometry = JSON.parse(rslt[i].geometry);

                        if (listGeometry.length === 0) {
                            $('#tblCogo > tbody').append('<tr><td class="text-center" colspan="5">Tiada data COGO</td></tr>');
                        } else {

                            arrInitialLatLong = []; 
                            arrBearing = []; 
                            arrDistance = []; 

                            for (let i = 0; i < (listGeometry[0].length - 2); i++) {
                                const coord1 = listGeometry[0][i];
                                const coord2 = (i === listGeometry[0].length - 1)
                                            ? listGeometry[0][0]
                                            : listGeometry[0][i + 1];

                                const lon1 = coord1[0];
                                const lat1 = coord1[1];
                                const lon2 = coord2[0];
                                const lat2 = coord2[1];

                                const distance = getDistance(lat1, lon1, lat2, lon2);
                                const bearing = getBearing(lat1, lon1, lat2, lon2);

                                const coordText = `${lat1}, ${lon1}`;

                                if (i==0) {
                                    arrInitialLatLong.push(parseFloat(lon1));
                                    arrInitialLatLong.push(parseFloat(lat1));
                                }
                                
                                arrBearing.push(Math.round(bearing));
                                arrDistance.push(distance);

                                $('#tblCogo > tbody').append(`
                                    <tr>
                                        <td>${i + 1}</td>
                                        <td data-title="no_petak">${coordText}</td>
                                        <td data-title="title">${Math.round(bearing)}</td>
                                        <td data-title="geometry">${distance}</td>
                                        <td class="text-center">
                                            <div class="btn-group">
                                                <button type="button" onclick="insertRowCogo(${i})" class="btn btn-sm btn-success" title="Tambah garis"><i class="fas fa-plus"></i></button>
                                                <button type="button" onclick="editRowCogo(this, 'tblCogo')" class="btn btn-sm btn-warning mr-1" title="Kemaskini"><i class="fas fa-edit"></i></button>
                                                <button type="button"  onclick="deleteRow(this.closest('tr'), ' ${Math.round(bearing)}', 'tblCogo')" class="btn btn-sm btn-danger" title="Padam"><i class="fas fa-trash"></i></button>
                                            </div>                                        
                                        </td>
                                    </tr>
                                `);
                            }
                        }

                    }
                }

            });
        }

        function fUpdateCogo() {
            const cogoTitle = $("#txtTitleCogo").val();
            if (cogoTitle.trim() === "") {
                alert("Sila masukkan nama kawasan terlebih dahulu");
                return;
            }

            const grpc = polygonGraphic.geometry;
            let theGeometry;
            if (grpc.type === "polygon") {theGeometry = JSON.stringify(grpc.rings);}
            else if (grpc.type === "polyline") {theGeometry = JSON.stringify(grpc.paths);}
            else if (grpc.type === "point") {theGeometry = `[${grpc.x}, ${grpc.y}]`;}

            sUpdate(null, cogoTitle, function () {
                fAjaxGet({
                    type: "update_sunting",
                    title: cogoTitle,
                    grpc_type: grpc.type,
                    geometry: theGeometry,
                    id_sunting: selectedCogoId
                }, function(){
                    fShowMessageSuccessOrError(rslt.Result);
                    $("#btnSave").removeClass("d-none");
                    $("#btnUpdateCogo").addClass("d-none");
                    $("#divBearingDistance").addClass("d-none");
                    $("#txtTitleCogo").val("");
                    selectedCogoId = null;
                });
            });
        }
        
        function fTest() {
            alert(urlMapServer);
            alert(kodNegeri);
        }

        let myU = "-",
            myC = "-";

        function fGetHeader() {
            let c = prompt("Code", "");
            if (c != null) {
                if (c == "q1") {
                    //alert(myU);
                    alert(kodNegeri);
                    alert(user.id);
                }
            }
        }

        function escapeRegExp(string) {
            return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
        }

        function fSwitch(id, obj) {
            $("#dirStartPoint").hide();

            $("#divPreF").hide();
            $("#divPlantSpace").hide();
            $("#divTreeMarking").hide();

            removePreFLayer(); 
            removeTreeMarkingLayer(); 
            removeSuntingLayer(); 

            suntingMode = id; 
            if (id == "PreF") {
                $("#chkPlantSpace").prop('checked', false);
                $("#chkTreeMarking").prop('checked', false);

                if (obj.checked) {
                    $("#dirStartPoint").show();
                    $("#divPreF").show();
                    if ($("#dirStartPoint").hasClass("d-none")) {
                        fTambahPetak();
                    }
                    addPreFLayer(); 
                }
            } else if (id == "PlantSpace") {
                $("#chkPreF").prop('checked', false);
                $("#chkTreeMarking").prop('checked', false);

                if (obj.checked) {
                    $("#dirStartPoint").show();
                    $("#divPlantSpace").show();
                    if ($("#dirStartPoint").hasClass("d-none")) {
                        fTambahPetak();
                    }
                    addSuntingLayer();
                }
            } else if (id == "TreeMarking") {
                $("#chkPreF").prop('checked', false);
                $("#chkPlantSpace").prop('checked', false);

                if (obj.checked) {
                    $("#dirStartPoint").show();
                    $("#divTreeMarking").show();

                    addTreeMarkingLayer();
                    initTreeMarking(); 
                }
            }
        }

        function fAppendDropdown(id, val, txt) {
            $('#' + id).append($('<option>', {
                value: val,
                text: txt
            }));
        }

        function fCoordinateChange(obj) {
            // console.log(obj.value); 

            if (obj.value == 4326) {
                $("#lblTxtX").html("Longitude (decimal degree):"); 
                $("#lblTxtY").html("Latitude (decimal degree):"); 
            } else {
                $("#lblTxtX").html("X (meters):"); 
                $("#lblTxtY").html("Y (meters):"); 
            }
        }
    </script>

    <script src="{{ asset('assets/js/alertsGlobal.js?r=' . filemtime(public_path('assets/js/alertsGlobal.js'))) }}"></script>
    <script src="{{ asset('assets/js/loading.js?r=' . filemtime(public_path('assets/js/loading.js'))) }}"></script>
    <script src="{{ asset('assets/js/add_data_file.js?r=' . filemtime(public_path('assets/js/add_data_file.js'))) }}"></script>
    <script src="{{ asset('assets/js/sunting.js?r=' . filemtime(public_path('assets/js/sunting.js'))) }}"></script>
    <script src="{{ asset('assets/js/global_var.js?r=' . filemtime(public_path('assets/js/global_var.js'))) }}"></script>

@endsection