@php
    use App\Models\Negeri;
@endphp

@extends('layout.master')

@section('title', 'Semakan Data Viewer')

@section('content')
    <link rel="stylesheet" href="https://js.arcgis.com/4.29/esri/themes/light/main.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        .tab-button {
            flex: 1;
            padding: 8px 12px;
            border: none;
            background: #f1f1f1;
            cursor: pointer;
            font-size: 14px;
            border-radius: 4px;
            margin-right: 5px;
        }

        .tab-button:last-child {
            margin-right: 0;
        }

        .tab-button.active {
            background: #0E7C79;
            color: #fff;
        }
    </style>
    <div class="page-header">
        <h5 class="page-title">Semakan Data Viewer</h5>

        <nav>
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    <a href="/">Laman Utama</a>
                </li>
                <li class="breadcrumb-item active">
                    Semakan Data Viewer
                </li>
            </ol>
        </nav>
    </div>

    <section class="section">
        <div class="row">
            <div class="col-lg-12">

                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-6">
                                <h5 class="section-header">Maklumat Data Spatial</h5>
                                @if ($id)
                                    @php
                                        $maklumatApi = App\Models\maklumat_api::find($id);
                                    @endphp

                                    @if ($maklumatApi)
                                        @include('components.form-' . $maklumatApi->jenis_pengesahan_data_spatial, ['maklumatApi' => $maklumatApi])
                                    @else
                                        <div class="alert alert-danger">
                                            Data not found for ID: {{ $id }}
                                        </div>
                                    @endif
                                @endif
                                <div class="row mb-3">
                                    <label for="name" class="col-sm-3 col-form-label">Muat Naik Fail</label>
                                    <div class="col-sm-9">
                                        <div id="fileUploadContainer">
                                            <input type="file" class="form-control" id="fileZipInput" name="fileZip"
                                                onchange="handleFileUpload(event)" accept=".zip" value="">
                                            <small class="text-muted">Format fail: .zip sahaja</small>
                                        </div>

                                        <div id="fileDisplayContainer" style="display: none;">
                                            <div class="input-group">
                                                <input type="text" class="form-control" id="uploadedFileName" readonly>
                                                <button class="btn btn-outline-secondary" type="button"
                                                    onclick="resetFileUpload()">
                                                    <i class="fa fa-edit"></i> Tukar Fail
                                                </button>
                                            </div>
                                            <small class="text-success"><i class="fa fa-check-circle"></i> Fail berjaya
                                                dimuat naik</small>
                                        </div>
                                        <!-- if the file exist in maklumatApi on load, show it on this file input -->
                                        @if ($maklumatApi && $maklumatApi->file)
                                            <script>
                                                document.addEventListener('DOMContentLoaded', async function () {
                                                    document.getElementById('fileUploadContainer').style.display = 'none';
                                                    document.getElementById('fileDisplayContainer').style.display = 'block';
                                                    document.getElementById('uploadedFileName').value = "{{ basename($maklumatApi->file) }}";

                                                    @if ($maklumatApi->jenis_pengesahan_data_spatial === 'kawasan_kerja' && $maklumatApi->process_status === 'Selesai')
                                                        // Data kawasan kerja sudah selesai diproses ke pangkalan data.
                                                        // Load the reference feature layers instead of re-parsing the uploaded shapefile.
                                                        setTimeout(() => {
                                                            if (typeof addKawasanKerjaLayers === 'function') {
                                                                addKawasanKerjaLayers("{{ $maklumatApi->no_rujukan }}");
                                                            }
                                                        }, 2000);
                                                    @elseif ($maklumatApi->jenis_pengesahan_data_spatial === 'inventori_hutan' && $maklumatApi->process_status === 'Selesai')
                                                        // Data inventori hutan sudah selesai diproses ke pangkalan data.
                                                        // Load the reference feature layers instead of re-parsing the uploaded shapefile.
                                                        setTimeout(() => {
                                                            if (typeof addInventoriHutanLayers === 'function') {
                                                                addInventoriHutanLayers("{{ $maklumatApi->no_rujukan }}", "{{ $maklumatApi->jenis_inventori }}");
                                                            }
                                                        }, 2000);
                                                    @elseif ($maklumatApi->jenis_pengesahan_data_spatial === 'tanda_pokok' && $maklumatApi->process_status === 'Selesai')
                                                        // Data tanda pokok sudah selesai diproses ke pangkalan data.
                                                        // Load the reference feature layers instead of re-parsing the uploaded shapefile.
                                                        setTimeout(() => {
                                                            if (typeof addTandaPokokLayers === 'function') {
                                                                addTandaPokokLayers("{{ $maklumatApi->no_rujukan }}");
                                                            }
                                                        }, 2000);
                                                    @elseif ($maklumatApi->jenis_pengesahan_data_spatial === 'kawasan_lesen' && $maklumatApi->process_status === 'Selesai')
                                                        // Data kawasan lesen sudah selesai diproses ke pangkalan data.
                                                        // Load the reference feature layers instead of re-parsing the uploaded shapefile.
                                                        setTimeout(() => {
                                                            if (typeof addKawasanLesenLayers === 'function') {
                                                                addKawasanLesenLayers("{{ $maklumatApi->no_rujukan }}");
                                                            }
                                                        }, 2000);
                                                    @elseif ($maklumatApi->jenis_pengesahan_data_spatial === 'silvikultur' && $maklumatApi->process_status === 'Selesai')
                                                        // Data silvikultur sudah selesai diproses ke pangkalan data.
                                                        // Load the reference feature layers instead of re-parsing the uploaded shapefile.
                                                        setTimeout(() => {
                                                            if (typeof addSilvikulturLayers === 'function') {
                                                                addSilvikulturLayers("{{ $maklumatApi->no_rujukan }}", "{{ $maklumatApi->jenis_kawasan }}");
                                                            }
                                                        }, 2000);
                                                    @else

                                                        // Fetch the existing file and load it to the map
                                                        try {
                                                            const response = await fetch("/storage/{{ $maklumatApi->file }}");
                                                            // console.log("Existing file fetched successfully:", response);
                                                            // response return error 404 (Not Found) fix
                                                            if (response.ok) {
                                                                const blob = await response.blob();
                                                                const file = new File([blob], "{{ basename($maklumatApi->file) }}", { type: 'application/zip' });
                                                                // Wait for the map to be ready before adding shapefile

                                                                setTimeout(() => {
                                                                    if (typeof addShapefileToMap === 'function') {
                                                                        addShapefileToMap(file);
                                                                    }
                                                                }, 2000);
                                                            }
                                                        } catch (error) {
                                                            console.error('Error loading existing file:', error);
                                                        }
                                                    @endif
                                                        });
                                            </script>
                                        @endif
                                    </div>
                                </div>
                                <div class="row mb-3"
                                    style="display: {{ $maklumatApi && !is_null($maklumatApi->process_status) ? 'block' : 'none' }};">
                                    <label class="col-sm-12 col-form-label">Keputusan Penukaran</label>
                                    <div class="col-sm-12">
                                        <div id="conversionResultContainer">
                                            <table class="table table-sm table-bordered mb-0">
                                                <tbody>
                                                    <tr>
                                                        <th style="width: 40%;">Status</th>
                                                        <td>
                                                            <span id="conversionStatus"
                                                                class="badge {{ $maklumatApi && $maklumatApi->process_status == 'Gagal' ? 'bg-danger' : ($maklumatApi && $maklumatApi->process_status == 'Selesai' ? 'bg-success' : 'bg-secondary') }}">
                                                                {{ $maklumatApi->process_status ?? '-' }}
                                                            </span>
                                                        </td>
                                                    </tr>
                                                    <tr id="conversionErrorRow"
                                                        style="display: {{ $maklumatApi && $maklumatApi->error_message ? 'table-row' : 'none' }};">
                                                        <th>Mesej Ralat</th>
                                                        <td id="conversionError" class="text-danger">
                                                            {{ $maklumatApi->error_message ?? '' }}</td>
                                                    </tr>
                                                    <tr>
                                                        <th>Masa Mula</th>
                                                        <td id="conversionStartedAt">
                                                            {{ $maklumatApi->conversion_started_at ?? '-' }}</td>
                                                    </tr>
                                                    <tr>
                                                        <th>Masa Selesai</th>
                                                        <td id="conversionCompleteAt">
                                                            {{ $maklumatApi->conversion_complete_at ?? '-' }}</td>
                                                    </tr>
                                                    <tr>
                                                        <th>Jumlah Ciri (Features) Ditambah</th>
                                                        <td id="conversionTotalFeatures">
                                                            {{ $maklumatApi->total_features_added ?? '-' }}</td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6">
                                <h5 class="section-header">Semakan Data Spatial </h5>
                                <div id="mapView" style="width: 100%; height: 500px;margin-bottom: 20px;"></div>
                                <div class="row">
                                    <h5>Pengesahan</h5>
                                    <p>Sila semak maklumat data berikut sebelum membuat pengesahan samada lulus / tolak.</p>
                                    {{-- @if ($maklumatApi && ($maklumatApi->jenis_pengesahan_data_spatial === 'kawasan_kerja' || $maklumatApi->jenis_pengesahan_data_spatial === 'inventori_hutan' || $maklumatApi->jenis_pengesahan_data_spatial === 'tanda_pokok' || $maklumatApi->jenis_pengesahan_data_spatial === 'kawasan_lesen')) --}}
                                    @if ($maklumatApi)
                                        <div class="mt-3">
                                            <button type="button" id="prosesButton" class="btn btn-success"
                                                onclick="prosesData()">Disemak</button>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>


                    </div>
                </div>

            </div>
        </div>
    </section>

    <!-- Loading Overlay -->
    <div id="loadingOverlay"
        style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); z-index: 9999; justify-content: center; align-items: center;">
        <div style="text-align: center; color: white;">
            <div class="spinner-border" role="status" style="width: 4rem; height: 4rem;">
                <span class="visually-hidden">Loading...</span>
            </div>
            <div id="loadingOverlayTitle" style="margin-top: 20px; font-size: 18px; font-weight: bold;">
                Memuat naik fail...
            </div>
            <div style="margin-top: 10px; font-size: 14px;">
                Sila tunggu sebentar
            </div>
        </div>
    </div>
@endsection
@section('js')
    <script>
        function handleFileUpload(event) {
            const file = event.target.files[0];
            if (file) {
                // Check if the uploaded file is a ZIP file
                if (file.type === "application/zip" || file.name.endsWith(".zip")) {
                    // Show loading overlay
                    const loadingOverlay = document.getElementById('loadingOverlay');
                    document.getElementById('loadingOverlayTitle').textContent = 'Memuat naik fail...';
                    loadingOverlay.style.display = 'flex';

                    // Create a FormData object to send the file to the server
                    const formData = new FormData();
                    formData.append("fileZip", file);

                    // Send the file to the server using fetch or AJAX
                    fetch("/semakan_data/upload_zip/{{ $id }}", {
                        method: "POST",
                        body: formData,
                        headers: {
                            "X-CSRF-TOKEN": "{{ csrf_token() }}" // Include CSRF token for Laravel
                        }
                    })
                        .then(response => {
                            if (!response.ok) {
                                throw new Error('Network response was not ok');
                            }
                            return response.json();
                        })
                        .then(data => {
                            // Hide loading overlay
                            loadingOverlay.style.display = 'none';

                            // console.log("File uploaded successfully:", data);

                            // Show the uploaded file name in the input field
                            const fileName = file.name;
                            document.getElementById('uploadedFileName').value = fileName;

                            // Hide file input, show file display
                            document.getElementById('fileUploadContainer').style.display = 'none';
                            document.getElementById('fileDisplayContainer').style.display = 'block';

                            // Show success message
                            Swal.fire({
                                icon: 'success',
                                title: 'Fail berjaya dimuat naik!',
                                text: 'Nama Fail: ' + fileName
                            });
                            if (typeof addShapefileToMap === 'function') {
                                addShapefileToMap(file); // Call the function to add the shapefile to the map
                            } else {
                                console.error('addShapefileToMap is not ready yet');
                            }
                        })
                        .catch(error => {
                            // Hide loading overlay
                            loadingOverlay.style.display = 'none';

                            console.error("Error uploading file:", error);
                            Swal.fire({
                                icon: 'error',
                                title: 'Ralat',
                                text: 'Ralat semasa memuat naik fail. Sila cuba lagi.'
                            });

                            // Clear the file input on error
                            document.getElementById('fileZipInput').value = '';
                        });
                } else {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Fail tidak sah',
                        text: 'Sila muat naik fail ZIP yang sah.'
                    });
                    // Clear the file input
                    event.target.value = '';
                }
            }
        }

        function resetFileUpload() {
            // Show file input, hide file display
            document.getElementById('fileUploadContainer').style.display = 'block';
            document.getElementById('fileDisplayContainer').style.display = 'none';

            // Clear the file input
            document.getElementById('fileZipInput').value = '';
            document.getElementById('uploadedFileName').value = '';
        }

        // Trigger the arcpy background process (script/processing.py via run_process.bat)
        // that appends the uploaded kawasan_kerja shapefile(s) into the GDB.
        async function prosesData() {
            const confirmation = await Swal.fire({
                icon: 'question',
                title: 'Adakah anda pasti ingin membuat semakan dan penukaran data spatial ini?',
                showCancelButton: true,
                confirmButtonText: 'Ya',
                cancelButtonText: 'Tidak'
            });

            if (!confirmation.isConfirmed) {
                return;
            }

            const loadingOverlay = document.getElementById('loadingOverlay');
            const loadingTitle = document.getElementById('loadingOverlayTitle');
            const prosesButton = document.getElementById('prosesButton');

            loadingTitle.textContent = 'Sedang memproses data ke pangkalan data...';
            loadingOverlay.style.display = 'flex';
            if (prosesButton) prosesButton.disabled = true;

            try {
                const response = await fetch("/semakan_data/proses/{{ $id }}", {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                        "X-CSRF-TOKEN": "{{ csrf_token() }}"
                    }
                });

                const data = await response.json();

                if (!response.ok) {
                    throw new Error(data.message || 'Gagal memulakan proses.');
                }

                pollProcessStatus();
            } catch (error) {
                loadingOverlay.style.display = 'none';
                if (prosesButton) prosesButton.disabled = false;
                console.error('Failed to start processing:', error);
                Swal.fire({
                    icon: 'error',
                    title: 'Ralat',
                    text: error.message || 'Gagal memulakan proses.'
                });
            }
        }

        // Poll the record's conversion status until processing finishes, then
        // reload the page so the Keputusan Penukaran panel reflects the result.
        function pollProcessStatus() {
            const pollInterval = setInterval(async () => {
                try {
                    const response = await fetch("/semakan_data/{{ $id }}", {
                        method: "POST",
                        headers: {
                            "X-CSRF-TOKEN": "{{ csrf_token() }}"
                        }
                    });
                    const data = await response.json();

                    if (data.process_status && data.process_status !== 'Sedang Diproses') {
                        clearInterval(pollInterval);
                        window.location.reload();
                    }
                } catch (error) {
                    console.error('Error polling process status:', error);
                }
            }, 3000);
        }


    </script>

    <script src="https://js.arcgis.com/4.29/"></script>
    <script>
        //add import * as projection from "@arcgis/core/geometry/support/webMercatorUtils";
        require([
            "esri/Map",
            "esri/views/MapView",
            "esri/widgets/BasemapGallery",
            "esri/widgets/Expand",
            "esri/widgets/LayerList",
            "esri/widgets/Legend",
            "esri/request",
            "esri/geometry/SpatialReference",
            "esri/layers/FeatureLayer",
            "esri/geometry/projection",
            "esri/geometry/support/webMercatorUtils"
        ], function (Map, MapView, BasemapGallery, Expand, LayerList, Legend, esriRequest, SpatialReference, FeatureLayer, projection, webMercatorUtils) {
            const map = new Map({
                basemap: "hybrid" // You can change the basemap as needed
            });

            const view = new MapView({
                container: "mapView",
                map: map,
                center: [102.109615, 4.127011], // Longitude, latitude (Malaysia coordinates)
                zoom: 7 
            });

            const basemapGallery = new BasemapGallery({
                view: view
            }); 
            // view.ui.add(basemapGallery, "top-right");

            const bgExpand = new Expand({
                view,
                content: basemapGallery,
                expandTooltip: "Basemap",
                expandIcon: "basemap",
            });

            view.ui.add(bgExpand, "top-right");

            // ------------------------------------------------------------------
            // Layer List & Legend (tabbed) widget
            // ------------------------------------------------------------------
            function areAllChildrenVisible(groupLayer) {
                let allVisible = true;
                groupLayer.layers.forEach((childLayer) => {
                    if (!childLayer.visible) {
                        allVisible = false;
                    }
                });
                return allVisible;
            }

            const tabContainer = document.createElement("div");
            tabContainer.style.background = "white";
            const tabButtons = document.createElement("div");
            tabButtons.style.display = "flex";
            tabButtons.style.padding = "5px";

            const layerListTab = document.createElement("button");
            layerListTab.textContent = "Layers";
            layerListTab.classList.add("tab-button", "active");

            const legendTab = document.createElement("button");
            legendTab.textContent = "Legend";
            legendTab.classList.add("tab-button");

            tabButtons.appendChild(layerListTab);
            tabButtons.appendChild(legendTab);

            // Search box for filtering the layer list
            const layerSearchContainer = document.createElement("div");
            layerSearchContainer.style.padding = "10px";
            layerSearchContainer.style.borderBottom = "1px solid #ddd";
            layerSearchContainer.style.backgroundColor = "#f9f9f9";

            const layerSearchInput = document.createElement("input");
            layerSearchInput.type = "text";
            layerSearchInput.placeholder = "Search layers...";
            layerSearchInput.style.width = "100%";
            layerSearchInput.style.padding = "8px";
            layerSearchInput.style.border = "1px solid #ccc";
            layerSearchInput.style.borderRadius = "4px";
            layerSearchInput.style.fontSize = "14px";
            layerSearchInput.style.boxSizing = "border-box";

            layerSearchContainer.appendChild(layerSearchInput);

            const layerListContent = document.createElement("div");
            layerListContent.style.width = "400px";
            layerListContent.style.display = "block";

            const legendContent = document.createElement("div");
            legendContent.style.width = "400px";
            legendContent.style.display = "none";

            // The LayerList widget renders a "question" info icon inside a shadow
            // DOM that can't be targeted with normal CSS, so swap it for a caret icon.
            const layerListIconObserver = new MutationObserver(() => {
                document.querySelectorAll("calcite-action").forEach((listItem) => {
                    const shadowRoot = listItem.shadowRoot;
                    if (shadowRoot) {
                        const questionBtn = shadowRoot.querySelector('calcite-icon[icon="question"]');
                        if (questionBtn) {
                            const infoIcon = document.createElement("calcite-icon");
                            infoIcon.setAttribute("icon", "caret-down");
                            infoIcon.setAttribute("scale", "s");
                            questionBtn.replaceWith(infoIcon);
                        }
                    }
                });
            });
            layerListIconObserver.observe(document.body, { childList: true, subtree: true });

            const layerList = new LayerList({
                view: view,
                container: layerListContent,
                listItemCreatedFunction: function (event) {
                    const item = event.item;

                    const buttonContainer = document.createElement("div");
                    buttonContainer.style.display = "flex";
                    buttonContainer.style.alignItems = "center";

                    // 🔍 Zoom button (non-group layers only)
                    if (item.layer.type !== "group") {
                        const zoomButton = document.createElement("button");
                        zoomButton.innerHTML = "🔍";
                        zoomButton.title = "Zoom to Layer";
                        zoomButton.style.marginRight = "10px";
                        zoomButton.style.padding = "5px 10px";
                        zoomButton.style.borderRadius = "4px";
                        zoomButton.style.backgroundColor = "white";
                        zoomButton.style.border = "none";
                        zoomButton.style.cursor = "pointer";

                        zoomButton.addEventListener("click", function () {
                            view.goTo(item.layer.fullExtent).catch((error) => {
                                console.error("Error zooming to layer:", error);
                            });
                        });

                        buttonContainer.appendChild(zoomButton);
                    }

                    // Group show/hide-all toggle
                    if (item.layer.type === "group") {
                        const groupToggleButton = document.createElement("button");
                        groupToggleButton.title = "Sub-Lapisan Dipaparkan";
                        groupToggleButton.style.marginRight = "10px";
                        groupToggleButton.style.padding = "5px 10px";
                        groupToggleButton.style.borderRadius = "4px";
                        groupToggleButton.style.backgroundColor = "white";
                        groupToggleButton.style.border = "none";
                        groupToggleButton.style.cursor = "pointer";

                        const groupLayer = item.layer;

                        function updateGroupToggleIcon() {
                            const allVisible = areAllChildrenVisible(groupLayer);
                            groupToggleButton.innerHTML = allVisible
                                ? `<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;transition:left 0.2s;"></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;transition:left 0.2s;"></span>
                                </span>`;
                            groupToggleButton.title = allVisible
                                ? "Sub-Lapisan Dipaparkan"
                                : "Sub-Lapisan Tersembunyi";
                        }

                        groupToggleButton.addEventListener("click", function () {
                            const shouldHide = areAllChildrenVisible(groupLayer);
                            groupLayer.layers.forEach((childLayer) => {
                                childLayer.visible = !shouldHide;
                            });
                            updateGroupToggleIcon();
                        });

                        updateGroupToggleIcon();
                        buttonContainer.appendChild(groupToggleButton);
                    }

                    // 🔅 Transparency toggle
                    const transparencyToggleButton = document.createElement("button");
                    transparencyToggleButton.innerHTML = "🔅";
                    transparencyToggleButton.title = "Transparency";
                    transparencyToggleButton.style.padding = "5px 10px";
                    transparencyToggleButton.style.borderRadius = "4px";
                    transparencyToggleButton.style.backgroundColor = "white";
                    transparencyToggleButton.style.border = "none";
                    transparencyToggleButton.style.cursor = "pointer";

                    const transparencySliderContainer = document.createElement("div");
                    transparencySliderContainer.style.display = "none";
                    transparencySliderContainer.style.marginTop = "5px";

                    const transparencySliderLabel = document.createElement("label");
                    transparencySliderLabel.textContent = "Transparency:";
                    transparencySliderLabel.style.display = "block";
                    transparencySliderLabel.style.marginBottom = "5px";

                    const transparencySlider = document.createElement("input");
                    transparencySlider.type = "range";
                    transparencySlider.min = "0";
                    transparencySlider.max = "1";
                    transparencySlider.step = "0.1";
                    transparencySlider.value = item.layer.opacity.toString();
                    transparencySlider.style.width = "100%";

                    transparencySlider.addEventListener("input", function () {
                        item.layer.opacity = parseFloat(transparencySlider.value);
                    });

                    transparencySliderContainer.appendChild(transparencySliderLabel);
                    transparencySliderContainer.appendChild(transparencySlider);

                    transparencyToggleButton.addEventListener("click", function () {
                        transparencySliderContainer.style.display =
                            transparencySliderContainer.style.display === "none" ? "block" : "none";
                    });

                    buttonContainer.appendChild(transparencyToggleButton);

                    // 💡 Highlight button (non-group layers only)
                    if (item.layer.type !== "group") {
                        const highlightButton = document.createElement("button");
                        highlightButton.innerHTML = "💡";
                        highlightButton.title = "Highlight Layer Features";
                        highlightButton.style.marginLeft = "10px";
                        highlightButton.style.marginRight = "10px";
                        highlightButton.style.padding = "5px 10px";
                        highlightButton.style.borderRadius = "4px";
                        highlightButton.style.backgroundColor = "white";
                        highlightButton.style.border = "none";
                        highlightButton.style.cursor = "pointer";

                        let highlightHandle = null;

                        highlightButton.addEventListener("click", async function () {
                            try {
                                if (highlightHandle) {
                                    highlightHandle.remove();
                                    highlightHandle = null;
                                    highlightButton.style.backgroundColor = "white";
                                    highlightButton.title = "Highlight Layer Features";
                                } else {
                                    const layerView = await view.whenLayerView(item.layer);

                                    if ("queryFeatures" in layerView) {
                                        const featureSet = await layerView.queryFeatures();
                                        highlightHandle = layerView.highlight(featureSet.features);

                                        highlightButton.style.backgroundColor = "#ffeb3b";
                                        highlightButton.title = "Remove Highlight";
                                    } else {
                                        await Swal.fire({
                                            icon: "warning",
                                            title: "Highlight Not Supported",
                                            text: "This layer type does not support feature highlighting.",
                                            confirmButtonColor: "#0E7C79",
                                        });
                                    }
                                }
                            } catch (error) {
                                console.error("Error highlighting layer:", error);
                            }
                        });

                        buttonContainer.appendChild(highlightButton);
                    }

                    const container = document.createElement("div");
                    container.appendChild(buttonContainer);
                    container.appendChild(transparencySliderContainer);

                    item.panel = {
                        content: container,
                        open: false,
                    };
                },
            });

            const legend = new Legend({
                view: view,
                container: legendContent,
            });

            // Filter the layer list as the user types
            layerSearchInput.addEventListener("input", function () {
                const searchTerm = layerSearchInput.value.toLowerCase().trim();

                const filterLayers = () => {
                    const listItems = layerListContent.querySelectorAll("calcite-list-item");

                    if (listItems.length === 0) {
                        setTimeout(filterLayers, 100);
                        return;
                    }

                    listItems.forEach((listItem) => {
                        const label = (listItem.getAttribute("label") || "").toLowerCase();
                        const description = (listItem.getAttribute("description") || "").toLowerCase();
                        const textContent = (listItem.textContent || "").toLowerCase();

                        let innerText = "";
                        const contentElement = listItem.querySelector("calcite-list-item-content");
                        if (contentElement) {
                            innerText = (contentElement.textContent || "").toLowerCase();
                        }

                        const isMatch =
                            searchTerm === "" ||
                            label.includes(searchTerm) ||
                            description.includes(searchTerm) ||
                            textContent.includes(searchTerm) ||
                            innerText.includes(searchTerm);

                        if (isMatch) {
                            listItem.style.display = "";
                            listItem.style.visibility = "visible";
                            listItem.style.height = "";
                        } else {
                            listItem.style.display = "none";
                            listItem.style.visibility = "hidden";
                            listItem.style.height = "0";
                        }
                    });
                };

                filterLayers();
            });

            tabContainer.appendChild(tabButtons);
            tabContainer.appendChild(layerSearchContainer);
            tabContainer.appendChild(layerListContent);
            tabContainer.appendChild(legendContent);

            layerListTab.addEventListener("click", function () {
                layerListContent.style.display = "block";
                layerSearchContainer.style.display = "block";
                legendContent.style.display = "none";
                layerListTab.classList.add("active");
                legendTab.classList.remove("active");
            });

            legendTab.addEventListener("click", function () {
                layerListContent.style.display = "none";
                layerSearchContainer.style.display = "none";
                legendContent.style.display = "block";
                legendTab.classList.add("active");
                layerListTab.classList.remove("active");
            });

            const combinedExpand = new Expand({
                view: view,
                content: tabContainer,
                expandTooltip: "Layer List & Legend",
                expandIcon: "legend",
            });

            view.ui.add(combinedExpand, "top-right");

            // Helper functions
            function normalizeFieldType(type) {
                const typeMap = {
                    esriFieldTypeOID: "oid",
                    esriFieldTypeInteger: "integer",
                    esriFieldTypeSmallInteger: "small-integer",
                    esriFieldTypeDouble: "double",
                    esriFieldTypeSingle: "single",
                    esriFieldTypeString: "string",
                    esriFieldTypeDate: "date",
                    esriFieldTypeGUID: "guid",
                    esriFieldTypeGlobalID: "global-id",
                    esriFieldTypeBlob: "blob",
                    esriFieldTypeRaster: "raster",
                    esriFieldTypeXML: "xml",
                    esriFieldTypeBigInteger: "big-integer",
                    esriFieldTypeTimestampOffset: "timestamp-offset",
                    esriFieldTypeDateOnly: "date-only",
                    esriFieldTypeTimeOnly: "time-only",
                };
                return typeMap[type] || type;
            }

            function normalizeGeometryType(type) {
                const typeMap = {
                    esriGeometryPoint: "point",
                    esriGeometryPolyline: "polyline",
                    esriGeometryPolygon: "polygon",
                    esriGeometryMultipoint: "multipoint",
                    esriGeometryMultipatch: "multipatch",
                    esriGeometryMesh: "mesh",
                };
                return typeMap[type] || type;
            }

            function getGeometryTypeFromLayer(layerGeometryType) {
                const normalized = normalizeGeometryType(layerGeometryType);
                return normalized;
            }

            function generateRandomColor() {
                return [Math.floor(Math.random() * 256), Math.floor(Math.random() * 256), Math.floor(Math.random() * 256), 0.7];
            }

            // Add the Pusat Ikatan / Kawasan Sempadan reference layers (kawasan_kerja that
            // has already been processed into the GDB) and zoom to the features matching
            // NO_REF = noRujukan, instead of re-parsing the uploaded shapefile.
            // Expose globally so it can be called from outside this require() scope
            window.addKawasanKerjaLayers = addKawasanKerjaLayers;
            async function addKawasanKerjaLayers(noRujukan) {
                // Remove existing feature layers from the map
                view.map.layers.forEach(layer => {
                    if (layer.type === "feature") {
                        view.map.remove(layer);
                    }
                });

                const loadingOverlay = document.getElementById('loadingOverlay');
                loadingOverlay.style.display = 'flex';

                try {
                    // Escape single quotes to keep the where clause valid
                    const safeNoRujukan = String(noRujukan).replace(/'/g, "''");
                    const whereClause = `NO_REF = '${safeNoRujukan}'`;

                    const pusatIkatanLayer = new FeatureLayer({
                        url: "https://dipan.map2u.com.my/server/rest/services/DASHBOARD_EGP/MODUL_SEMPADAN/FeatureServer/0",
                        title: "Pusat Ikatan",
                        definitionExpression: whereClause,
                        outFields: ["*"],
                        popupEnabled: true
                    });

                    const kawasanSempadanLayer = new FeatureLayer({
                        url: "https://dipan.map2u.com.my/server/rest/services/DASHBOARD_EGP/MODUL_SEMPADAN/FeatureServer/1",
                        title: "Kawasan Sempadan",
                        definitionExpression: whereClause,
                        outFields: ["*"],
                        popupEnabled: true
                    });

                    view.map.addMany([pusatIkatanLayer, kawasanSempadanLayer]);

                    await Promise.all([pusatIkatanLayer.when(), kawasanSempadanLayer.when()]);

                    // Build the popup template only after the layer's fields are loaded
                    // so createPopupTemplate() can generate fieldInfos for every field.
                    pusatIkatanLayer.popupTemplate = pusatIkatanLayer.createPopupTemplate();
                    kawasanSempadanLayer.popupTemplate = kawasanSempadanLayer.createPopupTemplate();

                    // Layers are already restricted to NO_REF via definitionExpression,
                    // so querying extent here only returns the matching features.
                    const extentResults = await Promise.all(
                        [pusatIkatanLayer, kawasanSempadanLayer].map((layer) =>
                            layer.queryExtent().catch(() => null)
                        )
                    );

                    const extents = extentResults
                        .map((result) => result && result.count > 0 ? result.extent : null)
                        .filter((extent) => extent);

                    if (extents.length) {
                        const unionExtent = extents.reduce(
                            (acc, ext) => (acc ? acc.union(ext) : ext.clone()),
                            null
                        );
                        view.goTo(unionExtent);
                    } else {
                        console.warn(`No features found with NO_REF = '${noRujukan}'`);
                    }

                    loadingOverlay.style.display = 'none';
                } catch (error) {
                    loadingOverlay.style.display = 'none';
                    console.error("Error loading kawasan kerja reference layers:", error);
                    Swal.fire({
                        icon: 'error',
                        title: 'Ralat',
                        text: error.message || 'Gagal memuatkan lapisan rujukan.'
                    });
                }
            }

            // Add the inventori_hutan reference layers (Pusat Ikatan, Kawasan Kerja,
            // Permulaan Garis Tapak, Baris Tanam, Petak Inventori) that have already
            // been processed into the GDB, and zoom to the features matching
            // NO_REF = noRujukan. The target feature service (and each layer's index
            // within it) depends on whether the record is Pre-F or Post-F.
            // Expose globally so it can be called from outside this require() scope
            window.addInventoriHutanLayers = addInventoriHutanLayers;
            async function addInventoriHutanLayers(noRujukan, jenisInventori) {
                // Remove existing feature layers from the map
                view.map.layers.forEach(layer => {
                    if (layer.type === "feature") {
                        view.map.remove(layer);
                    }
                });

                const loadingOverlay = document.getElementById('loadingOverlay');
                loadingOverlay.style.display = 'flex';

                try {
                    const isPostF = jenisInventori === 'Post-F';
                    const serviceBaseUrl = "https://dipan.map2u.com.my/server/rest/services/DASHBOARD_EGP/"
                        + (isPostF ? "MODUL_INVENTORI_POST_F" : "MODUL_INVENTORI_PRE_F")
                        + "/FeatureServer";

                    // layerId within the feature service differs between Pre-F and Post-F.
                    const layerDefs = isPostF
                        ? [
                            { title: 'Kawasan Kerja', layerId: 4 },
                            { title: 'Permulaan Garis Tapak', layerId: 1 },
                            { title: 'Baris Tanam', layerId: 2 },
                            { title: 'Petak Inventori Post-F', layerId: 3 },
                            { title: 'Pusat Ikatan', layerId: 0 },
                        ]
                        : [
                            { title: 'Kawasan Kerja', layerId: 4 },
                            { title: 'Permulaan Garis Tapak', layerId: 3 },
                            { title: 'Baris Tanam', layerId: 2 },
                            { title: 'Petak Inventori Pre-F', layerId: 1 },
                            { title: 'Pusat Ikatan', layerId: 0 },
                        ];

                    // Escape single quotes to keep the where clause valid
                    const safeNoRujukan = String(noRujukan).replace(/'/g, "''");
                    const whereClause = `NO_REF = '${safeNoRujukan}'`;

                    const featureLayers = layerDefs.map(({ title, layerId }) => new FeatureLayer({
                        url: `${serviceBaseUrl}/${layerId}`,
                        title,
                        definitionExpression: whereClause,
                        outFields: ["*"],
                        popupEnabled: true
                    }));

                    view.map.addMany(featureLayers);

                    await Promise.all(featureLayers.map((layer) => layer.when()));

                    // Build the popup template only after each layer's fields are loaded
                    // so createPopupTemplate() can generate fieldInfos for every field.
                    featureLayers.forEach((layer) => {
                        layer.popupTemplate = layer.createPopupTemplate();
                    });

                    // Layers are already restricted to NO_REF via definitionExpression,
                    // so querying extent here only returns the matching features.
                    const extentResults = await Promise.all(
                        featureLayers.map((layer) => layer.queryExtent().catch(() => null))
                    );

                    const extents = extentResults
                        .map((result) => result && result.count > 0 ? result.extent : null)
                        .filter((extent) => extent);

                    if (extents.length) {
                        const unionExtent = extents.reduce(
                            (acc, ext) => (acc ? acc.union(ext) : ext.clone()),
                            null
                        );
                        view.goTo(unionExtent);
                    } else {
                        console.warn(`No features found with NO_REF = '${noRujukan}'`);
                    }

                    loadingOverlay.style.display = 'none';
                } catch (error) {
                    loadingOverlay.style.display = 'none';
                    console.error("Error loading inventori hutan reference layers:", error);
                    Swal.fire({
                        icon: 'error',
                        title: 'Ralat',
                        text: error.message || 'Gagal memuatkan lapisan rujukan.'
                    });
                }
            }

            window.addSilvikulturLayers = addSilvikulturLayers;
            async function addSilvikulturLayers(noRujukan, jenisKawasan) {
                // Remove existing feature layers from the map
                view.map.layers.forEach(layer => {
                    if (layer.type === "feature") {
                        view.map.remove(layer);
                    }
                });

                const loadingOverlay = document.getElementById('loadingOverlay');
                loadingOverlay.style.display = 'flex';
                try {
                    const isTanamanMengaya = jenisKawasan === 'Tanaman Mengaya';
                    const serviceBaseUrl = "https://dipan.map2u.com.my/server/rest/services/DASHBOARD_EGP/"
                        + (isTanamanMengaya ? "MODUL_RAWATAN_SILVIKULTUR_TANAMAN_MENGAYA" : "MODUL_RAWATAN_SILVIKULTUR_POTONG_AKAR")
                        + "/FeatureServer";

                    // layerId within the feature service differs between Pre-F and Post-F.
                    const layerDefs = isTanamanMengaya
                        ? [
                            { title: "Lubang Tanaman", layerId: 0 },
                            { title: "Baris Tanam", layerId: 1 },
                            { title: "Permulaan Garis Tapak", layerId: 2 },
                            { title: "Blok Kerja", layerId: 3 },
                        ]
                        : [
                            { title: "Lubang Tanaman", layerId: 0 },
                            { title: "Baris Tanam", layerId: 1 },
                            { title: "Permulaan Garis Tapak", layerId: 2 },
                            { title: "Blok Kerja", layerId: 3 },
                        ];

                    // Escape single quotes to keep the where clause valid
                    const safeNoRujukan = String(noRujukan).replace(/'/g, "''");
                    const whereClause = `NO_REF = '${safeNoRujukan}'`;

                    const featureLayers = layerDefs.map(({ title, layerId }) => new FeatureLayer({
                        url: `${serviceBaseUrl}/${layerId}`,
                        title,
                        definitionExpression: whereClause,
                        outFields: ["*"],
                        popupEnabled: true
                    }));

                    view.map.addMany(featureLayers);

                    await Promise.all(featureLayers.map((layer) => layer.when()));

                    // Build the popup template only after each layer's fields are loaded
                    // so createPopupTemplate() can generate fieldInfos for every field.
                    featureLayers.forEach((layer) => {
                        layer.popupTemplate = layer.createPopupTemplate();
                    });

                    // Layers are already restricted to NO_REF via definitionExpression,
                    // so querying extent here only returns the matching features.
                    const extentResults = await Promise.all(
                        featureLayers.map((layer) => layer.queryExtent().catch(() => null))
                    );

                    const extents = extentResults
                        .map((result) => result && result.count > 0 ? result.extent : null)
                        .filter((extent) => extent);

                    if (extents.length) {
                        const unionExtent = extents.reduce(
                            (acc, ext) => (acc ? acc.union(ext) : ext.clone()),
                            null
                        );
                        view.goTo(unionExtent);
                    } else {
                        console.warn(`No features found with NO_REF = '${noRujukan}'`);
                    }

                    loadingOverlay.style.display = 'none';
                } catch (error) {
                    loadingOverlay.style.display = 'none';
                    console.error("Error loading inventori hutan reference layers:", error);
                    Swal.fire({
                        icon: 'error',
                        title: 'Ralat',
                        text: error.message || 'Gagal memuatkan lapisan rujukan.'
                    });
                }
            }

            // Add the tanda_pokok reference layers (Pusat Ikatan, Pokok Tebangan,
            // Pokok Ibu, Pokok Perlindungan, Baris Tanam, Permulaan Garis Tapak,
            // Garisan Kawalan Dua, Garisan Kawalan Satu, Kawasan Kerja) that have
            // already been processed into the GDB, and zoom to the features
            // matching NO_REF = noRujukan, instead of re-parsing the uploaded shapefile.
            // Expose globally so it can be called from outside this require() scope
            window.addTandaPokokLayers = addTandaPokokLayers;
            async function addTandaPokokLayers(noRujukan) {
                // Remove existing feature layers from the map
                view.map.layers.forEach(layer => {
                    if (layer.type === "feature") {
                        view.map.remove(layer);
                    }
                });

                const loadingOverlay = document.getElementById('loadingOverlay');
                loadingOverlay.style.display = 'flex';

                try {
                    const serviceBaseUrl = "https://dipan.map2u.com.my/server/rest/services/DASHBOARD_EGP/MODUL_TANDA_POKOK/FeatureServer";

                    const layerDefs = [
                        { title: "Pusat Ikatan", layerId: 0 },
                        { title: "Pokok Tebangan", layerId: 1 },
                        { title: "Pokok Ibu", layerId: 2 },
                        { title: "Pokok Perlindungan", layerId: 3 },
                        { title: "Baris Tanam", layerId: 4 },
                        { title: "Permulaan Garis Tapak", layerId: 5 },
                        { title: "Garisan Kawalan Dua", layerId: 6 },
                        { title: "Garisan Kawalan Satu", layerId: 7 },
                        { title: "Kawasan Kerja", layerId: 8 },
                    ];

                    // Escape single quotes to keep the where clause valid
                    const safeNoRujukan = String(noRujukan).replace(/'/g, "''");
                    const whereClause = `NO_REF = '${safeNoRujukan}'`;

                    const featureLayers = layerDefs.map(({ title, layerId }) => new FeatureLayer({
                        url: `${serviceBaseUrl}/${layerId}`,
                        title,
                        definitionExpression: whereClause,
                        outFields: ["*"],
                        popupEnabled: true
                    }));

                    view.map.addMany(featureLayers);

                    await Promise.all(featureLayers.map((layer) => layer.when()));

                    // Build the popup template only after each layer's fields are loaded
                    // so createPopupTemplate() can generate fieldInfos for every field.
                    featureLayers.forEach((layer) => {
                        layer.popupTemplate = layer.createPopupTemplate();
                    });

                    // Layers are already restricted to NO_REF via definitionExpression,
                    // so querying extent here only returns the matching features.
                    const extentResults = await Promise.all(
                        featureLayers.map((layer) => layer.queryExtent().catch(() => null))
                    );

                    const extents = extentResults
                        .map((result) => result && result.count > 0 ? result.extent : null)
                        .filter((extent) => extent);

                    if (extents.length) {
                        const unionExtent = extents.reduce(
                            (acc, ext) => (acc ? acc.union(ext) : ext.clone()),
                            null
                        );
                        view.goTo(unionExtent);
                    } else {
                        console.warn(`No features found with NO_REF = '${noRujukan}'`);
                    }

                    loadingOverlay.style.display = 'none';
                } catch (error) {
                    loadingOverlay.style.display = 'none';
                    console.error("Error loading tanda pokok reference layers:", error);
                    Swal.fire({
                        icon: 'error',
                        title: 'Ralat',
                        text: error.message || 'Gagal memuatkan lapisan rujukan.'
                    });
                }
            }

            // Add the kawasan_lesen reference layers (Kawasan Kerja, Kawasan Lesen) that have
            // already been processed into the GDB, and zoom to the features
            // matching NO_REF = noRujukan, instead of re-parsing the uploaded shapefile.
            // Expose globally so it can be called from outside this require() scope
            window.addKawasanLesenLayers = addKawasanLesenLayers;
            async function addKawasanLesenLayers(noRujukan) {
                // Remove existing feature layers from the map
                view.map.layers.forEach(layer => {
                    if (layer.type === "feature") {
                        view.map.remove(layer);
                    }
                });

                const loadingOverlay = document.getElementById('loadingOverlay');
                loadingOverlay.style.display = 'flex';

                try {
                    const serviceBaseUrl = "https://dipan.map2u.com.my/server/rest/services/DASHBOARD_EGP/MODUL_LESEN/FeatureServer";

                    const layerDefs = [
                        { title: "Pusat Ikatan", layerId: 0 },
                        { title: "Kawasan Lesen", layerId: 1 },
                    ];

                    // Escape single quotes to keep the where clause valid
                    const safeNoRujukan = String(noRujukan).replace(/'/g, "''");
                    const whereClause = `NO_REF = '${safeNoRujukan}'`;

                    const featureLayers = layerDefs.map(({ title, layerId }) => new FeatureLayer({
                        url: `${serviceBaseUrl}/${layerId}`,
                        title,
                        definitionExpression: whereClause,
                        outFields: ["*"],
                        popupEnabled: true
                    }));

                    view.map.addMany(featureLayers);

                    console.log("Added kawasan lesen reference layers to map:", featureLayers);

                    await Promise.all(featureLayers.map((layer) => layer.when()));

                    // Build the popup template only after each layer's fields are loaded
                    // so createPopupTemplate() can generate fieldInfos for every field.
                    featureLayers.forEach((layer) => {
                        layer.popupTemplate = layer.createPopupTemplate();
                    });

                    // Layers are already restricted to NO_REF via definitionExpression,
                    // so querying extent here only returns the matching features.
                    const extentResults = await Promise.all(
                        featureLayers.map((layer) => layer.queryExtent().catch(() => null))
                    );

                    const extents = extentResults
                        .map((result) => result && result.count > 0 ? result.extent : null)
                        .filter((extent) => extent);

                    if (extents.length) {
                        const unionExtent = extents.reduce(
                            (acc, ext) => (acc ? acc.union(ext) : ext.clone()),
                            null
                        );
                        view.goTo(unionExtent);
                    } else {
                        console.warn(`No features found with NO_REF = '${noRujukan}'`);
                    }

                    loadingOverlay.style.display = 'none';
                } catch (error) {
                    loadingOverlay.style.display = 'none';
                    console.error("Error loading kawasan lesen reference layers:", error);
                    Swal.fire({
                        icon: 'error',
                        title: 'Ralat',
                        text: error.message || 'Gagal memuatkan lapisan rujukan.'
                    });
                }
            }

            // Main function to add shapefile to map
            // Expose globally so it can be called from outside this require() scope
            window.addShapefileToMap = addShapefileToMap;
            async function addShapefileToMap(file) {
                if (!file || !file.name) {
                    console.error("Invalid file object");
                    return;
                }
                //remove existing feature layers from the map
                view.map.layers.forEach(layer => {
                    if (layer.type === "feature") {
                        view.map.remove(layer);
                    }
                });

                const filename = file.name;
                if (filename.endsWith(".zip")) {
                    const formData = new FormData();
                    formData.append("file", file);

                    const publishParameters = {
                        name: file.name.replace(".zip", ""),
                        targetSR: SpatialReference.WebMercator,
                        maxRecordCount: 50000,
                        enforceInputFileSizeLimit: true,
                        enforceOutputJsonSizeLimit: true,
                    };

                    try {
                        const loadingOverlay = document.getElementById('loadingOverlay');
                        loadingOverlay.style.display = 'flex';

                        //   await saveConversionStatus({
                        //       process_status: 'Sedang Diproses',
                        //       conversion_started_at: new Date().toISOString(),
                        //       conversion_complete_at: null,
                        //       error_message: null,
                        //       total_features_added: null,
                        //   });

                        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 allLayersData = response.data.featureCollection?.layers;
                        if (!allLayersData || !allLayersData.length) throw new Error("No layer found in uploaded shapefile.");

                        // Load projection module if needed
                        await projection.load();

                        const targetSR = new SpatialReference({ wkid: 102100 });
                        const baseName = file.name.replace(".zip", "");
                        const featureLayers = [];

                        allLayersData.forEach((layerData, index) => {
                            // Ensure OBJECTID (check against the raw Esri type, since
                            // normalization to "oid" only happens further below)
                            const existingOidField = layerData.layerDefinition.fields.find(
                                (f) => f.type === "esriFieldTypeOID"
                            );

                            if (existingOidField) {
                                // Reuse the existing OID field instead of adding a duplicate one
                                layerData.layerDefinition.objectIdField = existingOidField.name;
                            } else {
                                const objectIdField = "OBJECTID";
                                layerData.layerDefinition.fields.push({
                                    name: objectIdField,
                                    alias: objectIdField,
                                    type: "esriFieldTypeOID",
                                });

                                layerData.featureSet.features.forEach((f, i) => {
                                    f.attributes[objectIdField] = i + 1;
                                });

                                layerData.layerDefinition.objectIdField = objectIdField;
                            }

                            // Normalize field types
                            layerData.layerDefinition.fields = layerData.layerDefinition.fields.map((f) => ({
                                ...f,
                                type: normalizeFieldType(f.type),
                            }));

                            // Fix geometryType for FeatureLayer
                            layerData.layerDefinition.geometryType = normalizeGeometryType(
                                layerData.layerDefinition.geometryType
                            );

                            // The "generate" request above already asked the service to
                            // return geometries in Web Mercator (targetSR), and the raw
                            // features don't carry a spatialReference of their own, so
                            // re-projecting them here (projection.project assumes a
                            // source SR) corrupts the coordinates and leaves the map
                            // blank. Just stamp them with the correct type/SR instead.
                            layerData.featureSet.features = layerData.featureSet.features.map((f) => {
                                f.geometry = {
                                    ...f.geometry,
                                    type: getGeometryTypeFromLayer(layerData.layerDefinition.geometryType),
                                    spatialReference: targetSR,
                                };

                                return f;
                            });

                            const randomColor = generateRandomColor();
                            const geometryType = layerData.layerDefinition.geometryType;
                            let renderer;

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

                            // layerData.layerDefinition.name (from the shapefile's own
                            // filename inside the zip) is used to keep each layer's
                            // title distinct when there are multiple shapefiles.
                            const layerTitle = allLayersData.length > 1
                                ? (layerData.layerDefinition.name || `${baseName} (${index + 1})`)
                                : baseName;

                            const featureLayer = new FeatureLayer({
                                source: layerData.featureSet.features,
                                fields: layerData.layerDefinition.fields,
                                objectIdField: layerData.layerDefinition.objectIdField,
                                geometryType: layerData.layerDefinition.geometryType,
                                spatialReference: SpatialReference.WebMercator,
                                title: layerTitle,
                                renderer: renderer,
                                popupTemplate: {
                                    title: "{Name}", // Adjust based on your attribute fields
                                    content: [
                                        {
                                            type: "fields",
                                            fieldInfos: layerData.layerDefinition.fields.map((f) => ({
                                                fieldName: f.name,
                                                label: f.alias || f.name,
                                                visible: true,
                                            })),
                                        },
                                    ],
                                },
                            });

                            featureLayers.push(featureLayer);
                        });

                        view.map.addMany(featureLayers);

                        // Zoom to the combined extent of all layers
                        Promise.all(featureLayers.map((l) => l.when())).then(() => {
                            const extents = featureLayers
                                .map((l) => l.fullExtent)
                                .filter((e) => e);

                            if (extents.length) {
                                const unionExtent = extents.reduce(
                                    (acc, ext) => (acc ? acc.union(ext) : ext.clone()),
                                    null
                                );
                                view.goTo(unionExtent);
                            }
                        });

                        const totalFeaturesAdded = allLayersData.reduce(
                            (sum, layerData) => sum + (layerData.featureSet.features?.length || 0),
                            0
                        );

                        //   await saveConversionStatus({
                        //       process_status: 'Selesai',
                        //       conversion_complete_at: new Date().toISOString(),
                        //       error_message: null,
                        //       total_features_added: totalFeaturesAdded,
                        //   });

                        console.log(`✅ Shapefile loaded successfully (${featureLayers.length} layer(s)).`);
                        loadingOverlay.style.display = 'none';
                    } catch (error) {
                        console.error("❌ Upload failed:", error);
                        loadingOverlay.style.display = 'none';
                        const isHTML =
                            typeof error?.response?.data === "string" &&
                            error.response.data.startsWith("<!DOCTYPE");
                        const message = isHTML
                            ? "Server returned HTML (check CORS or authentication)."
                            : error?.message || "Unknown error uploading shapefile.";

                        //   await saveConversionStatus({
                        //       process_status: 'Gagal',
                        //       conversion_complete_at: new Date().toISOString(),
                        //       error_message: message,
                        //   });

                        Swal.fire({
                            icon: 'error',
                            title: 'Failed to upload shapefile',
                            text: message
                        });
                    }
                }
            }

            // Optional: Add error handling
            view.when(function () {
                console.log("Map loaded successfully");
            }, function (error) {
                console.error("Error loading map:", error);
            });
        });

    </script>
@endsection