From 2afb2971daac21cd646b00e65e998f01202f703f Mon Sep 17 00:00:00 2001
From: 3dtours <yeunhiepanh.photo@gmail.com>
Date: Wed, 17 Jun 2026 19:37:29 +0700
Subject: [PATCH] =?UTF-8?q?fix:=20s=E1=BB=ADa=20l=E1=BA=A1i=20hi=E1=BB=83n?=
 =?UTF-8?q?=20=20th=E1=BB=8B=20c=E1=BB=A7a=20c=C3=A1c=20n=C3=BAt=20tr?=
 =?UTF-8?q?=C3=AAn=20b=E1=BA=A3n=20=C4=91=E1=BB=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/TourDetailPage.tsx | 163 ++++++++++++++------------
 1 file changed, 85 insertions(+), 78 deletions(-)

diff --git a/frontend/src/pages/TourDetailPage.tsx b/frontend/src/pages/TourDetailPage.tsx
index bbff521..8c75b0f 100644
--- a/frontend/src/pages/TourDetailPage.tsx
+++ b/frontend/src/pages/TourDetailPage.tsx
@@ -362,6 +362,7 @@ export const TourDetailPage = ({
   const [searchResults, setSearchResults] = useState<any[]>([]);
   const [isSearching, setIsSearching] = useState(false);
   const [locateTrigger, setLocateTrigger] = useState(0);
+  const [isMapControlsOpen, setIsMapControlsOpen] = useState(false);
   const [isHeadingMode, setIsHeadingMode] = useState(false);
   const [mapRotation, setMapRotation] = useState(0);
   const [isRoutingLoading, setIsRoutingLoading] = useState(false);
@@ -1437,55 +1438,92 @@ export const TourDetailPage = ({
                   
                   {/* Overlay điều khiển trên bản đồ */}
                   <div className="absolute top-4 left-4 z-[1001] flex flex-col gap-2">
-                    <div className="bg-white/90 backdrop-blur-md p-1.5 rounded-2xl shadow-xl border border-white flex flex-col gap-1.5 animate-in slide-in-from-left-2 duration-300">
-                      <button 
-                        onClick={() => setTravelMode('driving')}
-                        className={`p-2.5 rounded-xl transition-all ${travelMode === 'driving' ? 'bg-blue-600 text-white shadow-md' : 'text-gray-500 hover:bg-gray-100'}`}
-                        title="Ô tô"
-                      >
-                        <Car className="w-4 h-4" />
-                      </button>
-                      <button 
-                        onClick={() => setTravelMode('bike')}
-                        className={`p-2.5 rounded-xl transition-all ${travelMode === 'bike' ? 'bg-blue-600 text-white shadow-md' : 'text-gray-500 hover:bg-gray-100'}`}
-                        title="Xe máy / Xe đạp"
-                      >
-                        <Bike className="w-4 h-4" />
-                      </button>
-                      <button 
-                        onClick={() => setTravelMode('foot')}
-                        className={`p-2.5 rounded-xl transition-all ${travelMode === 'foot' ? 'bg-blue-600 text-white shadow-md' : 'text-gray-500 hover:bg-gray-100'}`}
-                        title="Đi bộ"
-                      >
-                        <Footprints className="w-4 h-4" />
-                      </button>
+                    <button
+                      onClick={() => setIsMapControlsOpen(!isMapControlsOpen)}
+                      className="bg-white/90 backdrop-blur-md p-3 rounded-2xl shadow-xl border border-white text-blue-600 hover:bg-blue-50 transition-all active:scale-95 flex items-center justify-center"
+                    >
+                      {isMapControlsOpen ? (
+                        <X className="w-5 h-5 text-gray-400" />
+                      ) : (
+                        travelMode === 'driving' ? <Car className="w-5 h-5" /> : 
+                        travelMode === 'bike' ? <Bike className="w-5 h-5" /> : 
+                        <Footprints className="w-5 h-5" />
+                      )}
+                    </button>
 
-                      {/* Nút La bàn / Xoay bản đồ */}
-                      <button 
-                        onClick={() => {
-                          if (mapRotation !== 0) {
-                            setMapRotation(0);
-                            setIsHeadingMode(false);
-                          } else {
-                            setIsHeadingMode(!isHeadingMode);
-                          }
-                        }}
-                        className={`p-2.5 rounded-xl transition-all border-t border-gray-100 mt-1 ${isHeadingMode ? 'bg-blue-600 text-white shadow-md' : 'text-gray-500 hover:bg-gray-100'}`}
-                        title={isHeadingMode ? "Dừng xoay (Khóa hướng Bắc)" : "Tự động xoay theo hướng di chuyển"}
-                      >
-                        <Compass className="w-4 h-4 transition-transform duration-500" style={{ transform: `rotate(${mapRotation}deg)` }} />
-                      </button>
+                    {isMapControlsOpen && (
+                      <div className="bg-white/90 backdrop-blur-md p-1.5 rounded-2xl shadow-xl border border-white flex flex-col gap-1.5 animate-in slide-in-from-top-2 duration-300">
+                        <button 
+                          onClick={() => setTravelMode('driving')}
+                          className={`p-2.5 rounded-xl transition-all ${travelMode === 'driving' ? 'bg-blue-600 text-white shadow-md' : 'text-gray-500 hover:bg-gray-100'}`}
+                          title="Ô tô"
+                        >
+                          <Car className="w-4 h-4" />
+                        </button>
+                        <button 
+                          onClick={() => setTravelMode('bike')}
+                          className={`p-2.5 rounded-xl transition-all ${travelMode === 'bike' ? 'bg-blue-600 text-white shadow-md' : 'text-gray-500 hover:bg-gray-100'}`}
+                          title="Xe máy / Xe đạp"
+                        >
+                          <Bike className="w-4 h-4" />
+                        </button>
+                        <button 
+                          onClick={() => setTravelMode('foot')}
+                          className={`p-2.5 rounded-xl transition-all ${travelMode === 'foot' ? 'bg-blue-600 text-white shadow-md' : 'text-gray-500 hover:bg-gray-100'}`}
+                          title="Đi bộ"
+                        >
+                          <Footprints className="w-4 h-4" />
+                        </button>
 
-                      {/* Nút Tìm tôi */}
-                      <button 
-                        onClick={() => setLocateTrigger(prev => prev + 1)}
-                        disabled={!userLocation}
-                        className={`p-2.5 rounded-xl transition-all border-t border-gray-100 mt-1 ${!userLocation ? 'opacity-30 cursor-not-allowed' : 'text-blue-600 hover:bg-blue-50'}`}
-                        title="Vị trí của tôi"
-                      >
-                        <LocateFixed className="w-4 h-4" />
-                      </button>
-                    </div>
+                        {/* Nút La bàn / Xoay bản đồ */}
+                        <button 
+                          onClick={() => {
+                            if (mapRotation !== 0) {
+                              setMapRotation(0);
+                              setIsHeadingMode(false);
+                            } else {
+                              setIsHeadingMode(!isHeadingMode);
+                            }
+                          }}
+                          className={`p-2.5 rounded-xl transition-all border-t border-gray-100 mt-1 ${isHeadingMode ? 'bg-blue-600 text-white shadow-md' : 'text-gray-500 hover:bg-gray-100'}`}
+                          title={isHeadingMode ? "Dừng xoay (Khóa hướng Bắc)" : "Tự động xoay theo hướng di chuyển"}
+                        >
+                          <Compass className="w-4 h-4 transition-transform duration-500" style={{ transform: `rotate(${mapRotation}deg)` }} />
+                        </button>
+
+                        {/* Nút Tìm tôi */}
+                        <button 
+                          onClick={() => setLocateTrigger(prev => prev + 1)}
+                          disabled={!userLocation}
+                          className={`p-2.5 rounded-xl transition-all border-t border-gray-100 mt-1 ${!userLocation ? 'opacity-30 cursor-not-allowed' : 'text-blue-600 hover:bg-blue-50'}`}
+                          title="Vị trí của tôi"
+                        >
+                          <LocateFixed className="w-4 h-4" />
+                        </button>
+
+                        {/* Danh sách lộ trình rút gọn */}
+                        {routes.length > 0 && (
+                          <div className="pt-2 border-t border-gray-100 flex flex-col gap-1 min-w-[120px]">
+                            <div className="text-[9px] font-black text-gray-400 uppercase tracking-tighter px-1 mb-1">Lộ trình</div>
+                            <div className="flex flex-col gap-1 max-h-[160px] overflow-y-auto pr-1 custom-scrollbar">
+                              {routes.map((route, idx) => (
+                                <button
+                                  key={idx}
+                                  onClick={() => setSelectedRouteIndex(idx)}
+                                  className={`p-2 rounded-xl text-left transition-all border ${
+                                    selectedRouteIndex === idx 
+                                      ? 'bg-blue-600 text-white border-blue-600 shadow-sm' 
+                                      : 'bg-gray-50 text-gray-600 border-gray-100'
+                                  }`}
+                                >
+                                  <div className="text-[10px] font-bold">#{idx + 1} - {(route.distance / 1000).toFixed(1)} km</div>
+                                </button>
+                              ))}
+                            </div>
+                          </div>
+                        )}
+                      </div>
+                    )}
                     
                     {/* Chỉ báo đang tìm đường */}
                     {isRoutingLoading && (
@@ -1495,37 +1533,6 @@ export const TourDetailPage = ({
                       </div>
                     )}
                     
-                    {/* Danh sách lựa chọn lộ trình đề xuất */}
-                    {routes.length > 0 && (
-                      <div className="bg-white/90 backdrop-blur-md p-2 rounded-2xl shadow-xl border border-white flex flex-col gap-1.5 animate-in slide-in-from-left-2 duration-300 min-w-[150px] max-w-[180px]">
-                        <div className="text-[10px] font-black text-gray-400 uppercase tracking-tighter px-1 mb-1">Lộ trình đề xuất</div>
-                        {routes.length === 1 && allLocations.length > 2 && (
-                          <div className="px-2 py-1 text-[9px] text-amber-600 bg-amber-50 rounded-lg font-medium leading-tight mb-1 border border-amber-100">
-                            Lưu ý: Dịch vụ bản đồ chỉ gợi ý đường đi khác khi lộ trình có đúng 2 điểm (Điểm đầu & Điểm cuối).
-                          </div>
-                        )}
-                        <div className="flex flex-col gap-1.5 max-h-[160px] overflow-y-auto pr-1 custom-scrollbar">
-                          {routes.map((route, idx) => (
-                            <button
-                              key={idx}
-                              onClick={() => setSelectedRouteIndex(idx)}
-                              className={`p-2 rounded-xl text-left transition-all border ${
-                                selectedRouteIndex === idx 
-                                  ? 'bg-blue-600 text-white border-blue-600 shadow-md' 
-                                  : 'bg-gray-50 text-gray-600 border-gray-100 hover:bg-gray-100'
-                              }`}
-                            >
-                              <div className="text-[10px] font-bold">Lựa chọn {idx + 1}</div>
-                              <div className={`text-[9px] font-medium leading-tight ${selectedRouteIndex === idx ? 'text-blue-100' : 'text-gray-400'}`}>
-                                {(route.distance / 1000).toFixed(1)} km • {Math.round(route.duration / 60)}p
-                              </div>
-                            </button>
-                          ))}
-                        </div>
-                      </div>
-                    )}
-                    
-                    
                   </div>
                 </div>
               )}