@extends('layout.master')

@section('title', 'Rekod Trail')

@push('css')
<!-- ArcGIS -->
<link rel="stylesheet" href="https://js.arcgis.com/4.27/esri/themes/light/main.css" />

<style>
    /* Modal styles */
    #map {
        width: 100%;
        height: 500px;
        border-radius: 8px;
        border: 1px solid var(--default-border);
    }

    #pointCreated {
        max-height: 500px;
        overflow-y: auto;
    }

    #pointCreated .btn-edit-point,
    #pointCreated .btn-delete-point {
        padding: 2px 6px;
        font-size: 11px;
    }

    #pointCreated .edit-input {
        width: 100%;
        padding: 2px 4px;
        font-size: 12px;
    }

    .point-modified {
        background-color: rgba(255, 193, 7, 0.15) !important;
    }
</style>
@endpush


@section('content')

<div class="page-header">
    <h5 class="page-title">Senarai Rekod Trail</h5>
    <nav>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('laman_utama') }}">Laman Utama</a></li>
            <li class="breadcrumb-item active">Rekod Trail</li>
        </ol>
    </nav>
</div>

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

                    @role('Pentadbir Utama', 'Pentadbir')
                        <div class="row gx-3 gy-2">
                            <div class="col-sm-3">
                                <label class="form-label">Pilih Negeri</label>
                                <select class="form-select select-2" aria-label="Default select example" id="filterNegeri" autocomplete="off">
                                    <option value="" selected>Semua</option>
                                    @foreach (\App\Models\Negeri::whereIn('id', \App\Models\RekodTrail::distinct()->pluck('negeri_id'))->orderBy('name')->get() as $negeri)
                                        <option value="{{ $negeri->id }}">{{ $negeri->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    @endrole
                    
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover nowrap w-100" id="the-table"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- ArcGIS Map Modal -->
<div id="mapModal" class="modal fade" tabindex="-1" aria-labelledby="map_title" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title fw-bold">Paparan Laluan Trail</h4>
                <div class="d-flex align-items-center gap-2">
                    <button id="btnSavePoints" class="btn btn-sm btn-success d-none" onclick="fSavePoints()">
                        <i class="fa-solid fa-floppy-disk me-1"></i> Simpan Perubahan
                    </button>
                    <button id="dwnldJson" class="btn btn-sm btn-primary">
                        <i class="fa-solid fa-download me-1"></i> Jana
                    </button>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
            </div>
            <div class="modal-body">
                <div class="row g-3">
                    <div class="col-lg-8">
                        <h4 class="fw-bold mb-3"><i class="fa-solid fa-map me-2 text-info"></i><span id="map_title"></span></h4>
                        <div id="map" class="shadow-sm"></div>
                    </div>
                    <div class="col-lg-4">
                        <h5 class="fw-bold mb-3"><i class="fa-solid fa-map-location-dot me-2 text-info"></i>Koordinat (Lat, Long)</h5>
                        <div id="pointCreated"></div>
                    </div>
                </div>
                <div class="row mt-3">
                    <div class="col-12">
                        <div class="card bg-info-transparent">
                            <div class="card-body">
                                <div class="row g-3">
                                    <div class="d-flex col-6 col-md-3">
                                        <i class="fa-solid fa-user fs-30 me-3"></i>
                                        <div>
                                            <h6 class="fw-bold mb-0">Pemilik Trail:</h6>
                                            <span id="trail_owner" class="text-primary"></span>
                                        </div>
                                    </div>
                                    <div class="d-flex col-6 col-md-3">
                                        <i class="fa-solid fa-location-dot fs-30 me-3"></i>
                                        <div>
                                            <h6 class="fw-bold mb-0">Bilangan Titik:</h6>
                                            <span id="bil_titik" class="text-primary"></span>
                                        </div>
                                    </div>
                                    <div class="d-flex col-6 col-md-3">
                                        <i class="fa-solid fa-route fs-30 me-3"></i>
                                        <div>
                                            <h6 class="fw-bold mb-0">Jarak:</h6>
                                            <span id="trail_jarak" class="text-primary"></span>
                                        </div>
                                    </div>
                                    <div class="d-flex col-6 col-md-3 d-none">
                                        <i class="fa-solid fa-calendar-days fs-30 me-3"></i>
                                        <div>
                                            <h6 class="fw-bold mb-0">Dibuat Pada:</h6>
                                            <span id="trail_date" class="text-primary"></span>
                                        </div>
                                    </div>
                                    <div class="d-flex col-6 col-md-3">
                                        <i class="fa-solid fa-clock fs-30 me-3"></i>
                                        <div>
                                            <h6 class="fw-bold mb-0">Tempoh Masa:</h6>
                                            <span id="trail_duration" class="text-primary"></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('js')
<!-- ArcGIS -->
<script src="https://js.arcgis.com/4.27/"></script>

<script>

    let mapModal;
    let currentTrailId = null;
    let currentPoints = [];
    let pointsModified = false;

    $(document).ready( function () {
        mapModal = new bootstrap.Modal(document.getElementById('mapModal'));

        $('#the-table').DataTable({
            ...datatables_config,
            scrollX: true,
            processing: true,
            serverSide: true,
            ajax: {
                url : "{{ route('data_spatial.rekod_trail') }}",
                data: (data) => {
                    data.type = "{{ request()->type }}";
                    const filterNegeri = document.querySelector('#filterNegeri');
                    if (filterNegeri) data.filterNegeri = filterNegeri.value;
                }, 
            },
            buttons: [
                {
                    extend: 'selected',
                    text: '<i class="fa fa-trash me-2"></i> Padam Pilihan',
                    action: function (e, dt, node, config) {
                        fDeleteMultipleRekodTrail();
                    }
                },
               {
                    extend: 'pdf',
                    className: 'btn btn-danger',
                    text: '<i class="fa fa-file-pdf me-2"></i> PDF',
                    title: '',
                    filename: 'Senarai Rekod Trail',
                    exportOptions: {
                        columns: '.export-pdf',
                    }
               },
               {
                    extend: 'csv',
                    className: 'btn btn-success',
                    text: '<i class="fa fa-file-csv me-2"></i> CSV',
                    filename: 'Senarai Rekod Trail',
                    exportOptions: {
                        columns: '.export-csv',
                    }
               },
            ],
            columns: [
                { data: null, title: '', width: '1%' },
                { data: 'DT_RowIndex', title: 'Bil', width: '1%', orderable: false, searchable: false, className: 'text-center export-pdf export-csv' },
                { data: 'name', title: 'Nama Trail', className: 'export-pdf export-csv' },
                {
                    data: 'negeris.name',
                    title: 'Negeri',
                    className: 'export-csv',
                    render: (data, type, row) => {
                        return `${row.negeris?.name ?? '-'}`;
                    }
                },
                { 
                    data: 'mod_trail.name', 
                    name: 'modTrail.name',
                    title: 'Mod Trail', 
                    className: 'export-pdf export-csv',
                    render: (data, type, row) => {
                        return `${row.mod_trail?.name ?? '-'}`;
                    }
                },
                { 
                    data: 'kaedah_trail.name', 
                    name: 'kaedahTrail.name',
                    title: 'Kaedah Trail', 
                    className: 'export-pdf export-csv',
                    render: (data, type, row) => {
                        return `${row.kaedah_trail?.name ?? '-'}`;
                    }
                },
                { 
                    data: 'interval', 
                    title: 'Selang Masa', 
                    className: 'export-pdf export-csv', 
                    searchable: false, 
                    orderable: false,
                    render: function(data, type, row) {
                        if (!data) return '-';
                        let seconds = parseInt(data);
                        if (isNaN(seconds)) return data;
                        
                        if (seconds >= 60) {
                            let minutes = Math.floor(seconds / 60);
                            let remainingSeconds = seconds % 60;
                            if (remainingSeconds > 0) {
                                return `${minutes} min ${remainingSeconds} saat`;
                            }
                            return `${minutes} min`;
                        }
                        return `${seconds} saat`;
                    }
                },
                { data: 'start_point', title: 'Titik Mula', className: 'export-pdf export-csv' },
                { data: 'end_point', title: 'Titik Akhir', className: 'export-pdf export-csv' },
                { data: 'bil_titik', title: 'Bil. Titik Dihasilkan', className: 'export-csv', searchable: false, orderable: false },
                { 
                    data: 'users.name', 
                    title: 'Pemilik Trail', 
                    className: 'export-pdf export-csv',
                    render: (data, type, row) => {
                        return `${row.users?.name ?? '-'}`;
                    }
                },
                { 
                    data: 'created_at', 
                    title: 'Tarikh', 
                    className: 'export-pdf export-csv',
                    render: {
                        _: 'display',
                        sort: 'timestamp'
                    }
                },
                { data: 'action', title: 'Tindakan', className: 'text-center', orderable: false },
            ],
            order: [[11, 'desc']]
        });
    });

    $('#filterNegeri').on('change', function () {
        $('#the-table').DataTable().ajax.reload();
    });

    function fDeleteRekodTrail(deleteid, title) {
        sPadam(null, title, function () {
            $.ajax({
                type:"POST",
                url: "{{ route('rekod_trail.rekod_trail_delete') }}",
                data: { id : deleteid },
                dataType: 'json',
                success: function(result){
                    $('#the-table').DataTable().ajax.reload(null, false);
                    sSuccess(result.result);
                }
            });
        });
    }

    function fDeleteMultipleRekodTrail() {
        
        let selectedData = $('#the-table').DataTable().rows({ selected: true }).data().toArray();
        
        if (selectedData.length === 0) {
            alert("Sila pilih sekurang-kurangnya satu rekod untuk dipadam.");
            return;
        }

        let selectedIds = selectedData.map(row => row.id); 

        sPadam(null, selectedIds.length + " rekod ini?", function () {
            $.ajax({
                type: "POST",
                url: "{{ route('rekod_trail.rekod_trail_delete_multiple') }}",
                data: { 
                    ids: selectedIds,
                    _token: '{{ csrf_token() }}' 
                },
                dataType: 'json',
                success: function(result){
                    $('#the-table').DataTable().ajax.reload(null, false);
                    sSuccess(result.result);
                }
            });
        });
    }

    function fView(name, path, polyline_points, id, user, distance, date, duration){

        currentTrailId = id;
        pointsModified = false;
        $('#btnSavePoints').addClass('d-none');

        let parsedPath = (typeof path === "string") ? JSON.parse(path) : path;
        currentPoints = JSON.parse(JSON.stringify(parsedPath));
        let convertedPath = parsedPath.map(p => [p.lon,p.lat]);
        let unparsedPath = "[" + JSON.stringify(convertedPath) + "]";

        $("#dwnldJson").off("click").on("click", function () {
            generatGeoJSON("LineString", unparsedPath, name + " (Rekod Trail)", null);
        });

        mapModal.show();
        loadMap(name, path, polyline_points, user, distance, date, duration);
    }

    function listPoint(data) {
        currentPoints = JSON.parse(JSON.stringify(data));
        document.getElementById("bil_titik").innerText = data.length + " titik";
        let disableDelete = data.length <= 1;
        let html = `
            <table class='table table-striped table-sm'>
                <thead>
                    <tr>
                        <th style="width: 10px;">#</th>
                        <th>Latitud</th>
                        <th>Longitud</th>
                        <th style="width: 70px;" class="text-center">Tindakan</th>
                    </tr>
                </thead>
            <tbody>
            `;

        data.forEach((point, index) => {
            html += `
                <tr class="coord-row" data-index="${index}" data-lat="${point.lat}" data-lon="${point.lon}" style="cursor: pointer;" title="Papar di Peta">
                    <td class="text-center">${index + 1}</td>
                    <td class="td-lat">${point.lat}</td>
                    <td class="td-lon">${point.lon}</td>
                    <td class="text-center text-nowrap">
                        <button type="button" class="btn btn-sm btn-warning btn-edit-point" onclick="event.stopPropagation(); fEditPoint(${index})" title="Edit">
                            <i class="fa-solid fa-pencil"></i>
                        </button>
                        <button type="button" class="btn btn-sm btn-danger btn-delete-point" onclick="event.stopPropagation(); fDeletePoint(${index})" title="Padam" ${disableDelete ? 'disabled' : ''}>
                            <i class="fa-solid fa-trash"></i>
                        </button>
                    </td>
                </tr>`;
            });
        
        html += `
                </tbody>
            </table>`;
        
        document.getElementById("pointCreated").innerHTML = html;
    }

    function fDeletePoint(index) {
        if (currentPoints.length <= 1) {
            alert('Sekurang-kurangnya 1 titik diperlukan.');
            return;
        }

        let pointLabel = `Titik #${index + 1} (${currentPoints[index].lat}, ${currentPoints[index].lon})`;

        sPadam(null, pointLabel, function () {
            currentPoints.splice(index, 1);
            pointsModified = true;
            $('#btnSavePoints').removeClass('d-none');
            listPoint(currentPoints);
            refreshMapGraphics(currentPoints);
        });
    }

    function fEditPoint(index) {
        let row = $(`#pointCreated .coord-row[data-index='${index}']`);
        let lat = currentPoints[index].lat;
        let lon = currentPoints[index].lon;

        row.find('.td-lat').html(`<input type="number" step="any" class="form-control form-control-sm edit-input" value="${lat}" id="editLat${index}">`);
        row.find('.td-lon').html(`<input type="number" step="any" class="form-control form-control-sm edit-input" value="${lon}" id="editLon${index}">`);

        row.find('td:last').html(`
            <button type="button" class="btn btn-sm btn-success-transparent btn-edit-point" onclick="event.stopPropagation(); fSaveEditPoint(${index})" title="Simpan">
                <i class="fa-solid fa-check"></i>
            </button>
            <button type="button" class="btn btn-sm btn-danger-transparent btn-edit-point" onclick="event.stopPropagation(); listPoint(currentPoints)" title="Batal">
                <i class="fa-solid fa-xmark"></i>
            </button>
        `);

        row.find('.edit-input').first().focus();
    }

    function fSaveEditPoint(index) {
        let newLat = parseFloat($(`#editLat${index}`).val());
        let newLon = parseFloat($(`#editLon${index}`).val());

        if (isNaN(newLat) || isNaN(newLon)) {
            alert('Sila masukkan nilai latitud dan longitud yang sah.');
            return;
        }

        currentPoints[index].lat = newLat;
        currentPoints[index].lon = newLon;
        pointsModified = true;
        $('#btnSavePoints').removeClass('d-none');
        listPoint(currentPoints);
        refreshMapGraphics(currentPoints);
    }

    function fSavePoints() {
        if (!pointsModified) return;

        fOpenLoading();
        $.ajax({
            type: 'POST',
            url: "{{ route('rekod_trail.update_points') }}",
            data: {
                id: currentTrailId,
                point_created: currentPoints,
                _token: '{{ csrf_token() }}'
            },
            dataType: 'json',
            success: function(result) {
                fCloseLoading();
                pointsModified = false;
                $('#btnSavePoints').addClass('d-none');
                $('#the-table').DataTable().ajax.reload(null, false);
                sSuccess(result.message);
            },
            error: function(xhr) {
                fCloseLoading();
                alert('Gagal menyimpan perubahan. Sila cuba lagi.');
            }
        });
    }

    function refreshMapGraphics(points) {
        if (!window.view) return;
        let view = window.view;

        // Remove all graphics except highlight
        let toRemove = view.graphics.items.filter(g => !(g.attributes && g.attributes.type === 'highlight'));
        toRemove.forEach(g => view.graphics.remove(g));

        require(["esri/Graphic"], function(Graphic) {
            const pinPath = "M16,3.5c-4.142,0-7.5,3.358-7.5,7.5c0,4.143,7.5,18.121,7.5,18.121S23.5,15.143,23.5,11C23.5,6.858,20.143,3.5,16,3.5z M16,14.584c-1.979,0-3.584-1.604-3.584-3.584S14.021,7.416,16,7.416S19.584,9.021,19.584,11S17.979,14.584,16,14.584z";

            if (points.length === 1) {
                let pt = { type: "point", longitude: points[0].lon, latitude: points[0].lat };
                let sym = { type: "simple-marker", path: pinPath, size: 24, yoffset: 12, color: [0,255,0], outline: { color: [255,255,255], width: 1 } };
                let g = new Graphic({ geometry: pt, symbol: sym });
                view.graphics.add(g);
                view.zoom = 17;
                view.goTo(g);
            } else if (points.length > 1) {
                let arrLatLong = points.map(p => [p.lon, p.lat]);

                // Blue polyline
                let polyline = { type: "polyline", paths: [arrLatLong] };
                let lineSymbol = { type: "simple-line", color: [0,112,255], width: 4 };
                let lineGraphic = new Graphic({ geometry: polyline, symbol: lineSymbol });
                view.graphics.add(lineGraphic);

                // White dot markers
                let multiPoint = { type: "multipoint", points: arrLatLong };
                let dotSymbol = { type: "simple-marker", color: [255,255,255], size: 6, outline: { color: [0,112,255], width: 1.5 } };
                view.graphics.add(new Graphic({ geometry: multiPoint, symbol: dotSymbol }));

                // Start pin (green)
                let startPt = { type: "point", longitude: points[0].lon, latitude: points[0].lat };
                let startSym = { type: "simple-marker", path: pinPath, size: 24, yoffset: 12, color: [0,255,0], outline: { color: [255,255,255], width: 1 } };
                view.graphics.add(new Graphic({ geometry: startPt, symbol: startSym }));

                // End pin (red)
                let endPt = { type: "point", longitude: points[points.length-1].lon, latitude: points[points.length-1].lat };
                let endSym = { type: "simple-marker", path: pinPath, size: 24, yoffset: 12, color: [255,0,0], outline: { color: [255,255,255], width: 1 } };
                view.graphics.add(new Graphic({ geometry: endPt, symbol: endSym }));

                view.goTo(lineGraphic.geometry.extent.clone().expand(1.2));
            }
        });
    }

    // Function to load the ArcGIS map
    function loadMap(name, path, polyline_points, user, distance, date, duration) {
        fOpenLoading();

        require([
            "esri/Graphic",
            "esri/Map",
            "esri/views/MapView",
            "esri/widgets/BasemapGallery",
            "esri/widgets/Expand",
            "esri/Basemap",
        ], function(Graphic, Map, MapView, BasemapGallery, Expand, Basemap) {
            
            // Create the map
            const map = new Map({
                basemap: "dark-gray"
            });
            
            // Create the MapView
            const view = new MapView({
                container: "map",
                map: map,
                center: [102.20205, 2.84047], // Longitude, latitude
                scale: 2000000,
            });

            // Add collapsible BasemapGallery widget
            const basemapGallery = new BasemapGallery({
                view: view,
                source: [
                    Basemap.fromId("topo-vector"),
                    Basemap.fromId("hybrid"),
                    Basemap.fromId("osm"),
                    Basemap.fromId("dark-gray"),
                ],
            });

            const bgExpand = new Expand({
                view: view,
                content: basemapGallery,
                expandTooltip: "Tukar Basemap",
                collapseTooltip: "Tutup",
            });

            view.ui.add(bgExpand, "top-right");
            
            // Store the map and view globally so we can access them later
            window.map = map;
            window.view = view;

            view.when(() => {
                $("#map_title").text(name); 
                $("#trail_owner").text(user); 
                $("#trail_jarak").text(distance); 
                $("#trail_date").text(date); 
                $("#trail_duration").text(duration); 
                let arrLinePath = JSON.parse(polyline_points);
                let arrPath = JSON.parse(path);
                listPoint(arrPath);    
                // console.log(arrPath); 
                let myGraphic; 

                // Highlight point on hover
                $("#pointCreated").off("mouseenter").on("mouseenter", ".coord-row", function() {
                    let lat = parseFloat($(this).data("lat"));
                    let lon = parseFloat($(this).data("lon"));
                    
                    let oldHighlight = view.graphics.items.find(g => g.attributes && g.attributes.type === "highlight");
                    if (oldHighlight) view.graphics.remove(oldHighlight);

                    let pt = { type: "point", longitude: lon, latitude: lat };
                    let highlightSymbol = {
                        type: "simple-marker",
                        color: [255, 255, 0, 0.7], // Yellow transparent
                        size: 20,
                        outline: { color: [255, 255, 0], width: 2 }
                    };
                    let highlightGraphic = new Graphic({
                        geometry: pt,
                        symbol: highlightSymbol,
                        attributes: { type: "highlight" }
                    });
                    view.graphics.add(highlightGraphic);
                });

                $("#pointCreated").off("mouseleave").on("mouseleave", ".coord-row", function() {
                    let oldHighlight = view.graphics.items.find(g => g.attributes && g.attributes.type === "highlight");
                    if (oldHighlight) view.graphics.remove(oldHighlight);
                });

                const pinPath = "M16,3.5c-4.142,0-7.5,3.358-7.5,7.5c0,4.143,7.5,18.121,7.5,18.121S23.5,15.143,23.5,11C23.5,6.858,20.143,3.5,16,3.5z M16,14.584c-1.979,0-3.584-1.604-3.584-3.584S14.021,7.416,16,7.416S19.584,9.021,19.584,11S17.979,14.584,16,14.584z";

                if (arrPath.length == 1) {
                    const point = {
                        type: "point", // autocasts as new Point()
                        longitude: arrPath[0].lon,
                        latitude: arrPath[0].lat
                    };

                    const markerSymbol = {
                        type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
                        path: pinPath,
                        size: 24,
                        yoffset: 12,
                        color: [0, 255, 0], // Green
                        outline: {
                            // autocasts as new SimpleLineSymbol()
                            color: [255, 255, 255],
                            width: 1
                        }
                    };

                    myGraphic = new Graphic({
                        geometry: point,
                        symbol: markerSymbol
                    });

                    view.graphics.add(myGraphic); 
                }
                else if (arrPath.length > 1){
                    // White dot markers use arrPath (point_created)
                    let arrLatLong = []; 
                    for (let i = 0; i < arrPath.length; i++) {
                        const element = arrPath[i];
                        arrLatLong.push([element.lon, element.lat]); 
                    }

                    // Blue line uses arrLinePath (polyline_points)
                    let arrLineLatLong = [];
                    for (let i = 0; i < arrLinePath.length; i++) {
                        const element = arrLinePath[i];
                        arrLineLatLong.push([element.lon, element.lat]);
                    }

                    const polyline = {
                        type: "polyline", // autocasts as new Polyline()
                        paths: [arrLineLatLong],
                    };

                    const lineSymbol = {
                        type: "simple-line", // autocasts as SimpleLineSymbol()
                        color: [0, 112, 255], // Striking blue
                        width: 4
                    };

                    myGraphic = new Graphic({
                        geometry: polyline,
                        symbol: lineSymbol
                    });

                    view.graphics.add(myGraphic); 

                    // All Points Markers (small white circles with blue outline) — uses point_created path
                    const multiPoint = {
                        type: "multipoint", // autocasts as new Multipoint()
                        points: arrLatLong
                    };
                    const smallMarkerSymbol = {
                        type: "simple-marker",
                        color: [255, 255, 255], // White
                        size: 6,
                        outline: { color: [0, 112, 255], width: 1.5 }
                    };
                    view.graphics.add(new Graphic({ geometry: multiPoint, symbol: smallMarkerSymbol }));

                    // Start Point Marker (Green Map Pin) — uses point_created
                    const startPoint = {
                        type: "point",
                        longitude: arrPath[0].lon,
                        latitude: arrPath[0].lat
                    };
                    const startMarkerSymbol = {
                        type: "simple-marker",
                        path: pinPath,
                        size: 24,
                        yoffset: 12,
                        color: [0, 255, 0], // Green
                        outline: { color: [255, 255, 255], width: 1 }
                    };
                    view.graphics.add(new Graphic({ geometry: startPoint, symbol: startMarkerSymbol }));

                    // End Point Marker (Red Map Pin) — uses polyline_points
                    const endPoint = {
                        type: "point",
                        longitude: arrLinePath[arrLinePath.length - 1].lon,
                        latitude: arrLinePath[arrLinePath.length - 1].lat
                    };
                    const endMarkerSymbol = {
                        type: "simple-marker",
                        path: pinPath,
                        size: 24,
                        yoffset: 12,
                        color: [255, 0, 0], // Red
                        outline: { color: [255, 255, 255], width: 1 }
                    };
                    view.graphics.add(new Graphic({ geometry: endPoint, symbol: endMarkerSymbol }));
                }

                if (arrPath.length != 0) {
                    if (arrPath.length == 1) {
                        view.zoom = 17;
                        view.goTo(myGraphic);
                    } else {
                        view.goTo(myGraphic.geometry.extent.clone().expand(1.2));
                    }
                }

                fCloseLoading();
            });
        });
    }
</script>
@endsection