Cho phép chỉnh sửa tọa độ của điểm quay lại cho chính xác với hướng nhìn

frontend/js/main_map.js

@@ -1467,6 +1467,24 @@ function restoreActiveScene() {
     }
 }
 
+/**
+ * Cập nhật tọa độ Pitch/Yaw cho hotspot từ góc nhìn trung tâm hiện tại của Viewer
+ */
+window.updateHotspotCoordsFromView = function() {
+    // activeViewer được quản lý trong viewer360.js
+    if (typeof activeViewer !== 'undefined' && activeViewer) {
+        const pitch = activeViewer.getPitch();
+        const yaw = activeViewer.getYaw();
+        
+        document.getElementById('hs-pitch').value = pitch.toFixed(2);
+        document.getElementById('hs-yaw').value = yaw.toFixed(2);
+        
+        showNotification(`Đã ghi nhận vị trí mới: Pitch ${pitch.toFixed(2)}, Yaw ${yaw.toFixed(2)}`, 'success');
+    } else {
+        showNotification("Viewer không hoạt động, không thể lấy tọa độ.", "error");
+    }
+};
+
 /**
  * Xử lý việc tạo hotspot sau khi click chuột phải trong trình xem 360
  * @param {number} pitch - Tọa độ dọc (-90 đến 90)
@@ -1486,14 +1504,34 @@ window.handleHotspotCreation = async function(pitch, yaw, existingHotspot = null
     // Hiển thị Modal TRƯỚC để các logic UI (như Mini Map) tính toán được kích thước
     modal.style.display = 'flex';
 
-    // Reset form và gán tọa độ
+    // Reset form và gán tọa độ click ban đầu
     form.reset();
     document.getElementById('hs-pitch').value = pitch;
     document.getElementById('hs-yaw').value = yaw;
     document.getElementById('hs-id').value = existingHotspot ? existingHotspot._id : '';
-    document.getElementById('hotspot-modal-title').innerText = existingHotspot ? 'Cập nhật điểm điều hướng' : 'Thêm điểm điều hướng mới';
+    document.getElementById('hotspot-modal-title').innerText = 'Thêm/sửa điểm điều hướng';
+
+    // Nạp danh sách hotspot hiện có trong Viewer vào dropdown chỉnh sửa
+    const editSelect = document.getElementById('hs-to-edit-id');
+    editSelect.innerHTML = '<option value="">-- Chọn điểm trong Viewer --</option>';
+    if (typeof currentHotspots !== 'undefined' && currentHotspots.length > 0) {
+        currentHotspots.forEach(h => {
+            editSelect.innerHTML += `<option value="${h._id}">${h.title || 'Không tiêu đề'} (ID: ...${h._id.slice(-4)})</option>`;
+        });
+    }
 
     // Reset UI states
+    if (existingHotspot) {
+        document.querySelector('input[name="hsActionMode"][value="edit"]').checked = true;
+        toggleHSActionMode('edit');
+        editSelect.value = existingHotspot._id;
+        // Điền dữ liệu của hotspot được click vào form
+        onSelectHotspotToEdit(existingHotspot._id);
+    } else {
+        document.querySelector('input[name="hsActionMode"][value="create"]').checked = true;
+        toggleHSActionMode('create');
+    }
+
     document.querySelector('input[name="hsLinkType"][value="existing"]').checked = true;
     window.toggleHSLinkType('existing');
     document.querySelector('input[name="hsGPSMode"][value="map"]').checked = true;
@@ -1536,17 +1574,6 @@ window.handleHotspotCreation = async function(pitch, yaw, existingHotspot = null
                 if (existingNotice) existingNotice.style.opacity = '1';
             }
         };
-
-        // QUAN TRỌNG: Chỉ điền dữ liệu hotspot cũ SAU KHI dropdown đã được nạp đầy đủ options
-        if (existingHotspot) {
-            document.getElementById('hs-title').value = existingHotspot.title || '';
-            document.getElementById('hs-desc').value = existingHotspot.description || '';
-            if (existingHotspot.target_scene_id) {
-                select.value = existingHotspot.target_scene_id;
-                // Kích hoạt logic hiển thị thông báo ngay khi mở modal nếu đang sửa
-                if (typeof select.onchange === 'function') select.onchange();
-            }
-        }
     } catch (e) { console.error("Lỗi nạp danh sách scene:", e); }
 
     // Xử lý sự kiện submit form
@@ -1554,6 +1581,7 @@ window.handleHotspotCreation = async function(pitch, yaw, existingHotspot = null
         e.preventDefault();
         const formData = new FormData(form);
         const linkType = formData.get('hsLinkType');
+        const hotspotId = document.getElementById('hs-id').value;
 
         if (linkType === 'upload') {
             const file = document.getElementById('hs-panorama-file').files[0];
@@ -1592,7 +1620,7 @@ window.handleHotspotCreation = async function(pitch, yaw, existingHotspot = null
             if (activeTourId) sceneData.append('tourId', activeTourId);
 
             uploadWithProgress(`${API_BASE_URL}/scenes`, 'POST', sceneData, token, 'hs', async (sceneRes) => {
-                await saveHotspotToDB(pitch, yaw, formData.get('title'), formData.get('description'), sceneRes.scene._id, existingHotspot?._id);
+                await saveHotspotToDB(pitch, yaw, formData.get('title'), formData.get('description'), sceneRes.scene._id, hotspotId);
                 closeHotspotModal();
             });
             return;
@@ -1603,11 +1631,48 @@ window.handleHotspotCreation = async function(pitch, yaw, existingHotspot = null
             showNotification('Vui lòng chọn cảnh để liên kết.', 'warning');
             return;
         }
-        await saveHotspotToDB(pitch, yaw, formData.get('title'), formData.get('description'), finalTargetId, existingHotspot?._id);
+        await saveHotspotToDB(pitch, yaw, formData.get('title'), formData.get('description'), finalTargetId, hotspotId);
         closeHotspotModal();
     };
 };
 
+/**
+ * Chuyển đổi giữa chế độ Thêm mới và Sửa điểm có sẵn
+ */
+window.toggleHSActionMode = function(mode) {
+    const selectContainer = document.getElementById('hs-edit-select-container');
+    selectContainer.style.display = mode === 'edit' ? 'block' : 'none';
+    
+    if (mode === 'create') {
+        document.getElementById('hs-id').value = '';
+        // Giữ nguyên pitch/yaw vừa click, chỉ reset text
+        document.getElementById('hs-title').value = '';
+        document.getElementById('hs-desc').value = '';
+    }
+};
+
+/**
+ * Điền thông tin khi người dùng chọn một hotspot từ danh sách để sửa
+ */
+window.onSelectHotspotToEdit = function(id) {
+    if (!id) return;
+    // currentHotspots được quản lý trong viewer360.js
+    const hs = currentHotspots.find(h => h._id === id);
+    if (hs) {
+        document.getElementById('hs-id').value = hs._id;
+        document.getElementById('hs-title').value = hs.title || '';
+        document.getElementById('hs-desc').value = hs.description || '';
+        
+        // Giữ nguyên tọa độ pitch/yaw từ điểm vừa click chuột phải
+        // Không ghi đè bằng tọa độ cũ của hotspot để thực hiện việc di chuyển vị trí
+        
+        if (hs.target_scene_id) {
+            const targetId = hs.target_scene_id._id || hs.target_scene_id;
+            document.getElementById('hs-target-id').value = targetId;
+        }
+    }
+};
+
 /**
  * Đóng Modal biên tập Hotspot
  */