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/index.html

@@ -518,16 +518,40 @@
     <div id="hotspot-modal" class="modal-overlay" style="display: none; z-index: 3000;">
         <div class="modal-content action-modal-content logout-modal-dark" style="max-width: 500px; border-top: 4px solid #ffc107;">
             <div class="modal-header">
-                <h3 id="hotspot-modal-title">Biên tập điểm điều hướng</h3>
+                <h3 id="hotspot-modal-title">Thêm/sửa điểm điều hướng</h3>
                 <span class="close-btn" onclick="closeHotspotModal()">&times;</span>
             </div>
             
             <form id="hotspot-form">
                 <!-- Tọa độ ẩn để xử lý GPS và vị trí -->
-                <input type="hidden" id="hs-pitch">
-                <input type="hidden" id="hs-yaw">
+                <div class="form-group" style="background: rgba(255,193,7,0.05); padding: 10px; border-radius: 6px; border: 1px dashed #ffc107; margin-bottom: 15px;">
+                    <label style="color: #ffc107; font-size: 12px; margin-bottom: 8px;">Vị trí hiển thị (Pitch/Yaw):</label>
+                    <div style="display: flex; gap: 10px; align-items: center;">
+                        <input type="text" id="hs-pitch" readonly style="flex: 1; background: #222; border: 1px solid #444; color: #fff; text-align: center; font-family: monospace;">
+                        <input type="text" id="hs-yaw" readonly style="flex: 1; background: #222; border: 1px solid #444; color: #fff; text-align: center; font-family: monospace;">
+                        <button type="button" onclick="updateHotspotCoordsFromView()" class="edit-btn-small" style="background: #007bff; white-space: nowrap; height: 34px; padding: 0 10px;">
+                            <i class="fas fa-crosshairs"></i> Lấy tọa độ hiện tại
+                        </button>
+                    </div>
+                    <small style="display: block; color: #888; font-size: 10px; margin-top: 5px;">* Xoay ảnh đến vị trí mong muốn rồi nhấn nút để cập nhật điểm đặt bong bóng.</small>
+                </div>
                 <input type="hidden" id="hs-id">
 
+                <div class="form-group divider">
+                    <label>Hành động:</label>
+                    <div class="radio-group">
+                        <label class="radio-item"><input type="radio" name="hsActionMode" value="create" checked onclick="toggleHSActionMode('create')"> Thêm mới</label>
+                        <label class="radio-item"><input type="radio" name="hsActionMode" value="edit" onclick="toggleHSActionMode('edit')"> Sửa điểm có sẵn</label>
+                    </div>
+                </div>
+
+                <div id="hs-edit-select-container" class="form-group" style="display: none; background: rgba(0, 123, 255, 0.1); padding: 10px; border-radius: 6px; border: 1px solid #007bff;">
+                    <label for="hs-to-edit-id" style="color: #00d4ff;">Chọn điểm để sửa:</label>
+                    <select id="hs-to-edit-id" onchange="onSelectHotspotToEdit(this.value)" style="background: #111; color: #fff; border: 1px solid #007bff;">
+                        <option value="">-- Chọn điểm trong Viewer --</option>
+                    </select>
+                </div>
+
                 <div class="form-group">
                     <label for="hs-title">Tiêu đề (Label)</label>
                     <input type="text" id="hs-title" name="title" placeholder="Ví dụ: Cổng vào, Phòng khách..." required>