From 55f0a8e7751bbf4493262210cfd32cbb70f0edc0 Mon Sep 17 00:00:00 2001
From: 3dtours <yeunhiepanh.photo@gmail.com>
Date: Mon, 15 Jun 2026 19:42:45 +0700
Subject: [PATCH] =?UTF-8?q?S=E1=BB=ADa=20l=E1=BB=97i=20kh=C3=B4ng=20th?=
 =?UTF-8?q?=E1=BB=83=20khai=20b=C3=A1o=20s=E1=BB=91=20l=C6=B0=E1=BB=A3ng?=
 =?UTF-8?q?=20ch=E1=BA=B7ng?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/ItineraryTimeline.tsx | 60 +++++++++++++++++--
 frontend/src/pages/TourDetailPage.tsx         |  9 +--
 2 files changed, 55 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/ItineraryTimeline.tsx b/frontend/src/components/ItineraryTimeline.tsx
index a1615bb..1186e7f 100644
--- a/frontend/src/components/ItineraryTimeline.tsx
+++ b/frontend/src/components/ItineraryTimeline.tsx
@@ -1,6 +1,6 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { format, differenceInMinutes, parseISO } from 'date-fns';
-import { CheckCircle2, Circle, Clock, MapPin, AlertCircle, Zap, Navigation, Edit2, Trash2, Plus, List } from 'lucide-react';
+import { CheckCircle2, Circle, Clock, MapPin, AlertCircle, Zap, Navigation, Edit2, Trash2, Plus, List, X } from 'lucide-react';
 import { useTourStore } from '@/store/useTourStore';
 import { ConfirmModal } from '@/components/ConfirmModal'; 
 
@@ -52,6 +52,8 @@ export const ItineraryTimeline = ({
   const deleteLocation = useTourStore(state => state.deleteLocation);
 
   const [confirmState, setConfirmState] = useState<{ open: boolean; title?: string; message?: string; onConfirm?: () => void }>({ open: false });
+  const [isLegCountModalOpen, setIsLegCountModalOpen] = useState(false);
+  const [tempLegCount, setTempLegCount] = useState(3);
 
   const toggleComplete = async (locationId: string) => {
     // Gọi API PATCH /api/v1/locations/:id để cập nhật trạng thái
@@ -66,11 +68,15 @@ export const ItineraryTimeline = ({
   };
 
   const handleDeclareLegs = async () => {
-    const countStr = window.prompt("Chuyến đi này bạn muốn chia làm bao nhiêu chặng?", "3");
-    const count = parseInt(countStr || "0");
-    if (count > 0 && currentTour) {
-      await initializeLegs(currentTour.id, count);
+    setTempLegCount(legs.length > 0 ? legs.length : 3);
+    setIsLegCountModalOpen(true);
+  };
+
+  const confirmDeclareLegs = async () => {
+    if (tempLegCount > 0 && tempLegCount <= 20 && currentTour) {
+      await initializeLegs(currentTour.id, tempLegCount);
     }
+    setIsLegCountModalOpen(false);
   };
 
   const handleEditLeg = async (leg: any) => {
@@ -371,6 +377,48 @@ export const ItineraryTimeline = ({
         onConfirm={() => confirmState.onConfirm?.()}
         onCancel={() => setConfirmState({ open: false })}
       />
+
+      {/* Modal Khai báo số chặng (Popover) */}
+      {isLegCountModalOpen && (
+        <div className="fixed inset-0 z-[4000] flex items-center justify-center p-4">
+          <div className="absolute inset-0 bg-gray-900/60 backdrop-blur-sm animate-in fade-in duration-200" onClick={() => setIsLegCountModalOpen(false)} />
+          <div className="relative w-full max-w-sm bg-white rounded-[32px] shadow-2xl p-8 animate-in zoom-in-95 duration-200">
+            <div className="flex justify-between items-center mb-6">
+              <h3 className="text-xl font-black text-gray-900">Số chặng lộ trình</h3>
+              <button onClick={() => setIsLegCountModalOpen(false)} className="p-2 hover:bg-gray-100 rounded-full transition-colors">
+                <X className="w-5 h-5 text-gray-400" />
+              </button>
+            </div>
+            
+            <p className="text-sm text-gray-500 mb-6 leading-relaxed">
+              Bạn muốn chia chuyến đi này thành bao nhiêu chặng nhỏ? (Tối đa 20 chặng)
+            </p>
+
+            <div className="flex items-center justify-center gap-6 mb-8">
+              <button 
+                onClick={() => setTempLegCount(Math.max(1, tempLegCount - 1))}
+                className="w-12 h-12 rounded-2xl border-2 border-gray-100 flex items-center justify-center text-2xl font-bold text-gray-400 hover:border-blue-200 hover:text-blue-600 transition-all"
+              >
+                -
+              </button>
+              <span className="text-4xl font-black text-blue-600 w-12 text-center">{tempLegCount}</span>
+              <button 
+                onClick={() => setTempLegCount(Math.min(20, tempLegCount + 1))}
+                className="w-12 h-12 rounded-2xl border-2 border-gray-100 flex items-center justify-center text-2xl font-bold text-gray-400 hover:border-blue-200 hover:text-blue-600 transition-all"
+              >
+                +
+              </button>
+            </div>
+
+            <button
+              onClick={confirmDeclareLegs}
+              className="w-full py-4 bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-2xl shadow-lg shadow-blue-100 transition-all active:scale-95"
+            >
+              Xác nhận
+            </button>
+          </div>
+        </div>
+      )}
     </div>
   );
 };
\ No newline at end of file
diff --git a/frontend/src/pages/TourDetailPage.tsx b/frontend/src/pages/TourDetailPage.tsx
index 978cadb..2d3b4a7 100644
--- a/frontend/src/pages/TourDetailPage.tsx
+++ b/frontend/src/pages/TourDetailPage.tsx
@@ -241,14 +241,7 @@ export const TourDetailPage = ({ onBack }: { onBack: () => void }) => {
     }
   }, [publicTours, currentTour, fetchTour]);
 
-  // Hàm xử lý khai báo số chặng
-  const handleDeclareLegs = async () => {
-    const countStr = window.prompt("Chuyến đi này bạn muốn chia làm bao nhiêu chặng?", "3");
-    const count = parseInt(countStr || "0");
-    if (count > 0 && currentTour) {
-      await initializeLegs(currentTour.id, count);
-    }
-  };
+  
 
   // Hàm xử lý các hành động từ Context Menu của bản đồ
   const handleMapAction = async (action: string, latlng: L.LatLng) => {