diff --git a/controllers/visaController.js b/controllers/visaController.js
index 47137bc..7a2ae6a 100644
--- a/controllers/visaController.js
+++ b/controllers/visaController.js
@@ -47,9 +47,9 @@ const Visa = require("../models/visa");
 const slugify = require("slugify");
 const createSlug = (text) => {
   return slugify(text, {
-    lower: true, // Chuyển về chữ thường
-    strict: true, // Loại bỏ ký tự đặc biệt
-    locale: "vi", // Xử lý tiếng Việt chuẩn
+    lower: true,
+    strict: true,
+    locale: "en",
     trim: true,
   });
 };
@@ -57,7 +57,7 @@ const createSlug = (text) => {
 
 // Get visa data from MongoDB
 const getVisaData = async () => {
-  const visa = await Visa.findOne().sort({ updatedAt: -1 }).lean();
+  const visa = await Visa.findOne().sort({ updatedAt: -1 });
   return visa || {};
 };
 
@@ -324,11 +324,11 @@ exports.updateCountry = async (req, res) => {
     const { id } = req.params;
     let visaData = await getVisaData();
 
-    // if (!visaData || !visaData.hero || !visaData.hero.summaryList) {
-    //   return res
-    //     .status(400)
-    //     .json({ error: "Cấu trúc dữ liệu Visa không hợp lệ" });
-    // }
+    if (!visaData || !visaData.hero || !visaData.hero.summaryList) {
+      return res
+        .status(400)
+        .json({ error: "Cấu trúc dữ liệu Visa không hợp lệ" });
+    }
 
     // 2. Tìm index theo ID (Chuyển về Number để so sánh chính xác)
     const countryIndex = visaData.hero.summaryList.findIndex(
@@ -413,43 +413,51 @@ exports.updateCountry = async (req, res) => {
 // Delete country
 exports.deleteCountry = async (req, res) => {
   try {
-    const { slug } = req.params;
+    // 1. Lấy id từ params
+    const { id } = req.params;
     let visaData = await getVisaData();
 
-    if (!visaData.hero || !visaData.hero.summaryList) {
-      return res.status(400).json({ error: "Invalid visa data structure" });
+    if (!visaData || !visaData.hero || !visaData.hero.summaryList) {
+      return res
+        .status(400)
+        .json({ success: false, error: "Cấu trúc dữ liệu Visa không hợp lệ" });
     }
 
+    // 2. Tìm index theo ID (Chuyển về Number để so sánh chính xác)
     const countryIndex = visaData.hero.summaryList.findIndex(
-      (c) => c.slug === slug,
+      (c) => c.id === parseInt(id),
     );
 
     if (countryIndex === -1) {
-      return res.status(404).json({ error: `Country "${slug}" not found` });
+      return res.status(404).json({
+        success: false,
+        error: `Không tìm thấy quốc gia có ID: ${id}`,
+      });
     }
 
+    // 3. Xóa phần tử khỏi mảng
     const deletedCountry = visaData.hero.summaryList[countryIndex];
     visaData.hero.summaryList.splice(countryIndex, 1);
 
-    // Update database
-    const updatedData = {
-      ...(visaData.toObject ? visaData.toObject() : visaData),
-    };
-
-    if (visaData._id) {
-      await Visa.findByIdAndUpdate(visaData._id, updatedData, { new: true });
-    } else {
-      await Visa.create(updatedData);
+    // 4. Cập nhật vào Database
+    if (visaData.markModified) {
+      visaData.markModified("hero.summaryList");
     }
 
-    console.log(`✅ Country "${deletedCountry.name}" deleted successfully`);
-    res.json({
+    if (visaData._id) {
+      await visaData.save();
+    } else {
+      await Visa.create(visaData);
+    }
+
+    console.log(`✅ Deleted Successfully: "${deletedCountry.name}"`);
+    return res.json({
       success: true,
-      message: `Country "${deletedCountry.name}" deleted successfully`,
+      message: `Country "${deletedCountry.name}" Deleted Successfully`,
     });
   } catch (err) {
-    console.error("Delete country error:", err);
-    res.status(500).json({ error: err.message });
+    console.error("❌ Error Delete:", err);
+    return res.status(500).json({ success: false, error: err.message });
   }
 };
 
@@ -469,9 +477,7 @@ exports.api = async (req, res) => {
     const heroData = visaData?.hero;
 
     // 2. Lấy riêng phần hero (Dùng biến mới, không gán đè vào const)
-    const baseUrl =
-      process.env.BACKEND_URL || `${req.protocol}://${req.get("host")}`;
-    const processedData = addBaseUrlToImages(heroData, baseUrl);
+    const processedData = heroData;
 
     return res.json({
       success: true,
@@ -552,20 +558,16 @@ exports.apiCountry = async (req, res) => {
         data: null,
       });
     }
-
-    const baseUrl =
-      process.env.BACKEND_URL || `${req.protocol}://${req.get("host")}`;
-
     // 3. Chỉ lấy phần chi tiết (detailed view)
     // Lưu ý: Chúng ta copy ra object mới để tránh tham chiếu dữ liệu gốc
     const detailedData = JSON.parse(JSON.stringify(country.viewDetail));
 
     // 4. Gắn baseUrl vào các ảnh nằm trong phần chi tiết này
-    const processedData = addBaseUrlToImages(detailedData, baseUrl);
+    const processedData = detailedData;
 
     return res.json({
       success: true,
-      data: processedData, // Trả về nội dung của detailedView
+      data: processedData,
     });
   } catch (err) {
     console.error("Visa country API error:", err);
diff --git a/routes/admin.js b/routes/admin.js
index 829abaf..d292f3f 100644
--- a/routes/admin.js
+++ b/routes/admin.js
@@ -40,8 +40,8 @@ router.post("/home/update", ensureAuthenticated, homeController.update);
 
 // Middleware chuẩn hóa code
 router.param("code", (req, res, next, code) => {
-    req.params.code = code.toUpperCase();
-    next();
+  req.params.code = code.toUpperCase();
+  next();
 });
 
 // About
@@ -50,51 +50,125 @@ router.post("/about/update", ensureAuthenticated, aboutController.update);
 
 // AboutUs admin CRUD
 router.get("/about-us", ensureAuthenticated, aboutUsController.index);
-router.get("/about-us/create", ensureAuthenticated, aboutUsController.createForm);
+router.get(
+  "/about-us/create",
+  ensureAuthenticated,
+  aboutUsController.createForm,
+);
 router.post("/about-us/create", ensureAuthenticated, aboutUsController.create);
-router.get("/about-us/:id/edit", ensureAuthenticated, aboutUsController.editForm);
-router.post("/about-us/:id/update", ensureAuthenticated, aboutUsController.update);
-router.post("/about-us/:id/delete", ensureAuthenticated, aboutUsController.delete);
-router.get("/about-us/:id/preview", ensureAuthenticated, aboutUsController.preview);
+router.get(
+  "/about-us/:id/edit",
+  ensureAuthenticated,
+  aboutUsController.editForm,
+);
+router.post(
+  "/about-us/:id/update",
+  ensureAuthenticated,
+  aboutUsController.update,
+);
+router.post(
+  "/about-us/:id/delete",
+  ensureAuthenticated,
+  aboutUsController.delete,
+);
+router.get(
+  "/about-us/:id/preview",
+  ensureAuthenticated,
+  aboutUsController.preview,
+);
 
 // Booking admin CRUD removed
 
 // Form Management
 router.get("/form", ensureAuthenticated, formController.index);
-router.post("/form/update", ensureAuthenticated, formController.updateDefaultForm);
+router.post(
+  "/form/update",
+  ensureAuthenticated,
+  formController.updateDefaultForm,
+);
 
 // Upload routes
 router.get("/upload", ensureAuthenticated, (req, res) => {
-    res.render("admin/upload/index", {
-        layout: "layouts/admin",
-        title: "Quản lý Upload Ảnh",
-        user: req.session.user,
-    });
+  res.render("admin/upload/index", {
+    layout: "layouts/admin",
+    title: "Quản lý Upload Ảnh",
+    user: req.session.user,
+  });
 });
-router.post("/upload/image", ensureAuthenticated, upload.single("image"), uploadController.uploadImage);
-router.post("/upload/video", ensureAuthenticated, uploadVideo.single("video"), uploadController.uploadVideo);
-router.post("/upload/update-path", ensureAuthenticated, uploadController.updateImagePath);
-router.post("/upload/delete", ensureAuthenticated, uploadController.deleteImage);
+router.post(
+  "/upload/image",
+  ensureAuthenticated,
+  upload.single("image"),
+  uploadController.uploadImage,
+);
+router.post(
+  "/upload/video",
+  ensureAuthenticated,
+  uploadVideo.single("video"),
+  uploadController.uploadVideo,
+);
+router.post(
+  "/upload/update-path",
+  ensureAuthenticated,
+  uploadController.updateImagePath,
+);
+router.post(
+  "/upload/delete",
+  ensureAuthenticated,
+  uploadController.deleteImage,
+);
 
 // Header routes
 router.get("/header", ensureAuthenticated, headerController.index);
 router.post("/header/update", ensureAuthenticated, headerController.update);
 router.get("/header/data", ensureAuthenticated, headerController.api); // Normalized from getHeaderData
-router.patch("/header/:id/status", ensureAuthenticated, headerController.updateStatus);
+router.patch(
+  "/header/:id/status",
+  ensureAuthenticated,
+  headerController.updateStatus,
+);
 router.delete("/header/:id", ensureAuthenticated, headerController.destroy);
 
 // Header Menu INTEGRATED routes
-router.post("/header/menu/create", ensureAuthenticated, headerMenuController.store);
-router.post("/header/menu/update/:id", ensureAuthenticated, headerMenuController.update);
-router.post("/header/menu/delete", ensureAuthenticated, headerMenuController.destroy);
-router.post("/header/menu/reorder", ensureAuthenticated, headerMenuController.reorder);
+router.post(
+  "/header/menu/create",
+  ensureAuthenticated,
+  headerMenuController.store,
+);
+router.post(
+  "/header/menu/update/:id",
+  ensureAuthenticated,
+  headerMenuController.update,
+);
+router.post(
+  "/header/menu/delete",
+  ensureAuthenticated,
+  headerMenuController.destroy,
+);
+router.post(
+  "/header/menu/reorder",
+  ensureAuthenticated,
+  headerMenuController.reorder,
+);
 
 // Social Links routes
 router.get("/social-links", ensureAuthenticated, socialLinkController.index);
 router.post("/social-links", ensureAuthenticated, socialLinkController.store);
-router.put("/social-links/:platform", ensureAuthenticated, socialLinkController.update);
-router.delete("/social-links/:platform", ensureAuthenticated, socialLinkController.destroy);
-router.post("/social-links/reorder", ensureAuthenticated, socialLinkController.reorder);
+router.put(
+  "/social-links/:platform",
+  ensureAuthenticated,
+  socialLinkController.update,
+);
+router.delete(
+  "/social-links/:platform",
+  ensureAuthenticated,
+  socialLinkController.destroy,
+);
+router.post(
+  "/social-links/reorder",
+  ensureAuthenticated,
+  socialLinkController.reorder,
+);
 
 // Footer routes
 router.get("/footer", ensureAuthenticated, footerController.index);
@@ -104,60 +178,160 @@ router.get("/footer/data", ensureAuthenticated, footerController.getFooterData);
 // Contact routes
 router.get("/contact", ensureAuthenticated, contactController.index);
 router.post("/contact/update", ensureAuthenticated, contactController.update);
-router.get("/contact/data", ensureAuthenticated, contactController.getContactData);
+router.get(
+  "/contact/data",
+  ensureAuthenticated,
+  contactController.getContactData,
+);
 
 // Contact submissions management
-router.get("/contact/submissions", ensureAuthenticated, contactController.getSubmissions);
-router.put("/contact/submissions/:id", ensureAuthenticated, contactController.updateSubmissionStatus);
+router.get(
+  "/contact/submissions",
+  ensureAuthenticated,
+  contactController.getSubmissions,
+);
+router.put(
+  "/contact/submissions/:id",
+  ensureAuthenticated,
+  contactController.updateSubmissionStatus,
+);
 
 // Appointment management
 const appointmentController = require("../controllers/appointmentController");
-router.get("/appointments", ensureAuthenticated, appointmentController.getAppointments);
-router.get("/appointments/:id", ensureAuthenticated, appointmentController.getAppointmentById);
-router.put("/appointments/:id", ensureAuthenticated, appointmentController.updateAppointmentStatus);
-router.delete("/appointments/:id", ensureAuthenticated, appointmentController.deleteAppointment);
+router.get(
+  "/appointments",
+  ensureAuthenticated,
+  appointmentController.getAppointments,
+);
+router.get(
+  "/appointments/:id",
+  ensureAuthenticated,
+  appointmentController.getAppointmentById,
+);
+router.put(
+  "/appointments/:id",
+  ensureAuthenticated,
+  appointmentController.updateAppointmentStatus,
+);
+router.delete(
+  "/appointments/:id",
+  ensureAuthenticated,
+  appointmentController.deleteAppointment,
+);
 
 // Appointment CMS page management
 router.get("/appointment", ensureAuthenticated, appointmentController.index);
-router.post("/appointment/update", ensureAuthenticated, appointmentController.update);
-router.get("/appointment/data", ensureAuthenticated, appointmentController.getAppointmentData);
+router.post(
+  "/appointment/update",
+  ensureAuthenticated,
+  appointmentController.update,
+);
+router.get(
+  "/appointment/data",
+  ensureAuthenticated,
+  appointmentController.getAppointmentData,
+);
 
 // Pricing CMS page management
 const pricingController = require("../controllers/pricingController");
 router.get("/pricing", ensureAuthenticated, pricingController.index);
 router.post("/pricing/update", ensureAuthenticated, pricingController.update);
-router.get("/pricing/data", ensureAuthenticated, pricingController.getPricingData);
+router.get(
+  "/pricing/data",
+  ensureAuthenticated,
+  pricingController.getPricingData,
+);
 
 // Activity CRUD routes
 router.get("/activity", ensureAuthenticated, activityController.index);
-router.get("/activity/create", ensureAuthenticated, activityController.createForm);
+router.get(
+  "/activity/create",
+  ensureAuthenticated,
+  activityController.createForm,
+);
 router.post("/activity/create", ensureAuthenticated, activityController.create);
 // Update filters (place before any parameterized /activity/:id routes to avoid route collision)
-router.post("/activity/filters/update", ensureAuthenticated, activityController.updateFilters);
+router.post(
+  "/activity/filters/update",
+  ensureAuthenticated,
+  activityController.updateFilters,
+);
 // Update hero (global hero section for activities)
-router.post("/activity/hero/update", ensureAuthenticated, activityController.updateHero);
-router.get("/activity/:id/edit", ensureAuthenticated, activityController.editForm);
-router.post("/activity/:id/update", ensureAuthenticated, activityController.update);
-router.post("/activity/:id/delete", ensureAuthenticated, activityController.delete);
-router.post("/activity/:id/toggle-status", ensureAuthenticated, activityController.toggleStatus);
+router.post(
+  "/activity/hero/update",
+  ensureAuthenticated,
+  activityController.updateHero,
+);
+router.get(
+  "/activity/:id/edit",
+  ensureAuthenticated,
+  activityController.editForm,
+);
+router.post(
+  "/activity/:id/update",
+  ensureAuthenticated,
+  activityController.update,
+);
+router.post(
+  "/activity/:id/delete",
+  ensureAuthenticated,
+  activityController.delete,
+);
+router.post(
+  "/activity/:id/toggle-status",
+  ensureAuthenticated,
+  activityController.toggleStatus,
+);
 // Update display order
-router.post("/activity/update-order", ensureAuthenticated, activityController.updateOrder);
+router.post(
+  "/activity/update-order",
+  ensureAuthenticated,
+  activityController.updateOrder,
+);
 
 // Booking submissions routes
-router.get("/activity/:id/bookings/count", ensureAuthenticated, activityController.getBookingCount);
-router.get("/activity/:id/bookings", ensureAuthenticated, activityController.getBookingSubmissions);
-router.get("/activity/:id/bookings/export", ensureAuthenticated, activityController.exportBookingData);
+router.get(
+  "/activity/:id/bookings/count",
+  ensureAuthenticated,
+  activityController.getBookingCount,
+);
+router.get(
+  "/activity/:id/bookings",
+  ensureAuthenticated,
+  activityController.getBookingSubmissions,
+);
+router.get(
+  "/activity/:id/bookings/export",
+  ensureAuthenticated,
+  activityController.exportBookingData,
+);
 // Export all bookings (across all activities)
-router.get("/bookings/export-all", ensureAuthenticated, activityController.exportAllBookingsData);
+router.get(
+  "/bookings/export-all",
+  ensureAuthenticated,
+  activityController.exportAllBookingsData,
+);
 // Update booking submission
-router.put("/bookings/:bookingId", ensureAuthenticated, bookingSubmissionController.updateBookingSubmission);
+router.put(
+  "/bookings/:bookingId",
+  ensureAuthenticated,
+  bookingSubmissionController.updateBookingSubmission,
+);
 // Delete booking submission
-router.delete("/bookings/:bookingId", ensureAuthenticated, bookingSubmissionController.deleteBookingSubmission);
+router.delete(
+  "/bookings/:bookingId",
+  ensureAuthenticated,
+  bookingSubmissionController.deleteBookingSubmission,
+);
 
 // Update filters
 
 // Preview activity
-router.get("/activity/:id/preview", ensureAuthenticated, activityController.preview);
+router.get(
+  "/activity/:id/preview",
+  ensureAuthenticated,
+  activityController.preview,
+);
 
 // FAQ routes - Thêm vào đây
 router.get("/faq", ensureAuthenticated, faqController.index);
@@ -257,6 +431,69 @@ router.post(
   serviceController.updateDetails,
 );
 
+// Test Image Paths route
+router.get("/test-images", ensureAuthenticated, (req, res) => {
+  const fs = require("fs");
+  const path = require("path");
+  const campLocationData = require("../data/camp-location.json");
+
+  // Collect all image paths
+  const imagePaths = [];
+
+  // Camps images
+  if (campLocationData.camps) {
+    campLocationData.camps.forEach((camp) => {
+      if (camp.image) {
+        imagePaths.push({
+          type: "Camp",
+          name: camp.title,
+          path: camp.image,
+          exists: fs.existsSync(path.join(__dirname, "../public", camp.image)),
+        });
+      }
+    });
+  }
+
+  // Locations images
+  if (campLocationData.locations) {
+    campLocationData.locations.forEach((location) => {
+      if (location.imageSrc) {
+        imagePaths.push({
+          type: "Location",
+          name: location.title,
+          path: location.imageSrc,
+          exists: fs.existsSync(
+            path.join(__dirname, "../public", location.imageSrc),
+          ),
+        });
+      }
+
+      // Program images
+      if (location.programOptions) {
+        location.programOptions.forEach((program) => {
+          if (program.imageSrc) {
+            imagePaths.push({
+              type: "Program",
+              name: program.title,
+              path: program.imageSrc,
+              exists: fs.existsSync(
+                path.join(__dirname, "../public", program.imageSrc),
+              ),
+            });
+          }
+        });
+      }
+    });
+  }
+
+  res.render("admin/test-images", {
+    layout: "layouts/admin",
+    title: "Test Image Paths",
+    images: imagePaths,
+    user: req.session.user,
+  });
+});
+
 // Display visa management page
 router.get("/visa", ensureAuthenticated, visaController.index);
 
@@ -264,7 +501,7 @@ router.get("/visa", ensureAuthenticated, visaController.index);
 router.get("/visa/edit/:id", ensureAuthenticated, visaController.getCountry);
 
 // Update hero title
-router.post("/visa/update", ensureAuthenticated, visaController.update);
+router.post("/visa/update", ensureAuthenticated, visaController.updateCountry);
 
 // Add new country
 router.post("/visa/add", ensureAuthenticated, visaController.addCountry);
@@ -278,7 +515,7 @@ router.put(
 
 // Delete country
 router.delete(
-  "/delete/:slug",
+  "/visa/delete/:id",
   ensureAuthenticated,
   visaController.deleteCountry,
 );
@@ -292,9 +529,21 @@ router.post("/blog/:id/edit", ensureAuthenticated, blogController.update);
 router.post("/blog/:id/delete", ensureAuthenticated, blogController.destroy);
 
 // Comment management routes
-router.post("/blog/:blogId/comments/:commentId/approve", ensureAuthenticated, blogController.approveComment);
-router.post("/blog/:blogId/comments/:commentId/reject", ensureAuthenticated, blogController.rejectComment);
-router.post("/blog/:blogId/comments/:commentId/delete", ensureAuthenticated, blogController.deleteComment);
+router.post(
+  "/blog/:blogId/comments/:commentId/approve",
+  ensureAuthenticated,
+  blogController.approveComment,
+);
+router.post(
+  "/blog/:blogId/comments/:commentId/reject",
+  ensureAuthenticated,
+  blogController.rejectComment,
+);
+router.post(
+  "/blog/:blogId/comments/:commentId/delete",
+  ensureAuthenticated,
+  blogController.deleteComment,
+);
 
 // Blog Categories Management
 router.get(
diff --git a/views/admin/dashboard.ejs b/views/admin/dashboard.ejs
index c04eaa0..3aec7e3 100644
--- a/views/admin/dashboard.ejs
+++ b/views/admin/dashboard.ejs
@@ -273,6 +273,25 @@
             </a>
           </div>
         </div>
+
+        <!-- Visa -->
+        <div class="col-md-4 border-end border-top">
+          <div class="p-4">
+            <div class="d-flex align-items-center mb-3">
+              <div class="rounded-circle d-flex align-items-center justify-content-center me-3"
+                style="width: 50px; height: 50px; background-color: rgba(184, 183, 106, 0.1);">
+                <i class="fas fa-passport fa-lg" style="color: var(--primary-color);"></i>
+              </div>
+              <div>
+                <h5 class="mb-0">Visa</h5>
+                <p class="text-muted mb-0 small">Manage visa countries</p>
+              </div>
+            </div>
+            <a href="/admin/visa" class="btn btn-sm btn-primary w-100 mt-2">
+              <i class="fas fa-edit me-2"></i>Edit
+            </a>
+          </div>
+        </div>
       </div>
     </div>
   </div>
diff --git a/views/admin/visa/index.ejs b/views/admin/visa/index.ejs
index 488d279..8ebd107 100644
--- a/views/admin/visa/index.ejs
+++ b/views/admin/visa/index.ejs
@@ -1,1231 +1,1003 @@
-<style>
-    :root {
-        --primary-dark: #08182f;
-        --primary-light: #0f2847;
-        --secondary: #ba3226;
-        --text-dark: #2c3e50;
-        --border-light: #e8ecef;
-        --bg-light: #f8f9fa;
-    }
-
-    * {
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-    }
-
-    body {
-        background: linear-gradient(135deg, #f5f7fa 0%, #e8ecef 100%);
-        font-family: "Inter", "Segoe UI", sans-serif;
-        color: var(--text-dark);
-        min-height: 100vh;
-    }
-
-    .navbar-modern {
-        background: var(--primary-dark);
-        padding: 1.2rem 0;
-        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
-    }
-
-    .navbar-brand-modern {
-        font-size: 1.5rem;
-        font-weight: 700;
-        color: white;
-        display: flex;
-        align-items: center;
-        gap: 0.75rem;
-        transition: transform 0.3s ease;
-    }
-
-    .navbar-brand-modern:hover {
-        transform: translateX(5px);
-    }
-
-    .navbar-brand-modern i {
-        color: var(--secondary);
-        font-size: 1.8rem;
-    }
-
-    .main-container {
-        max-width: 1400px;
-        margin: 0 auto;
-        padding: 2.5rem 1.5rem;
-    }
-
-    .card-modern {
-        background: white;
-        border-radius: 16px;
-        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
-        overflow: hidden;
-        border: none;
-    }
-
-    .card-header-modern {
-        background: linear-gradient(135deg,
-                var(--primary-dark) 0%,
-                var(--primary-light) 100%);
-        padding: 1.75rem 2rem;
-        border: none;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-    }
-
-    .card-title-modern {
-        color: white;
-        font-size: 1.4rem;
-        font-weight: 700;
-        display: flex;
-        align-items: center;
-        gap: 0.75rem;
-        margin: 0;
-    }
-
-    .card-title-modern i {
-        color: var(--secondary);
-        font-size: 1.5rem;
-    }
-
-    .btn-add-modern {
-        background: var(--secondary);
-        color: white;
-        border: none;
-        padding: 0.7rem 1.5rem;
-        border-radius: 8px;
-        font-weight: 600;
-        display: inline-flex;
-        align-items: center;
-        gap: 0.5rem;
-        transition: all 0.3s ease;
-        box-shadow: 0 4px 12px rgba(186, 50, 38, 0.3);
-        cursor: pointer;
-    }
-
-    .btn-add-modern:hover {
-        background: #a32a20;
-        transform: translateY(-2px);
-        box-shadow: 0 6px 20px rgba(186, 50, 38, 0.4);
-        color: white;
-    }
-
-    .table-container {
-        padding: 0;
-        overflow: hidden;
-    }
-
-    .table-modern {
-        margin: 0;
-        width: 100%;
-    }
-
-    .table-modern thead {
-        background: #f8f9fa;
-        border-bottom: 2px solid var(--border-light);
-    }
-
-    .table-modern thead th {
-        padding: 1.25rem 1.5rem;
-        font-weight: 700;
-        font-size: 0.85rem;
-        text-transform: uppercase;
-        letter-spacing: 0.5px;
-        color: var(--primary-dark);
-        border: none;
-    }
-
-    .table-modern tbody tr {
-        border-bottom: 1px solid var(--border-light);
-        transition: all 0.2s ease;
-    }
-
-    .table-modern tbody tr:hover {
-        background: #f8f9fa;
-    }
-
-    .table-modern tbody td {
-        padding: 1.25rem 1.5rem;
-        vertical-align: middle;
-        border: none;
-    }
-
-    .id-badge {
-        display: inline-block;
-        background: linear-gradient(135deg,
-                var(--primary-dark),
-                var(--primary-light));
-        color: white;
-        padding: 0.4rem 0.8rem;
-        border-radius: 6px;
-        font-weight: 700;
-        font-size: 0.9rem;
-    }
-
-    .icon-container {
-        width: 50px;
-        height: 50px;
-        border-radius: 10px;
-        background: var(--bg-light);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        margin: 0 auto;
-        transition: all 0.3s ease;
-        border: 2px solid var(--border-light);
-    }
-
-    .icon-container:hover {
-        transform: scale(1.1);
-        border-color: var(--secondary);
-    }
-
-    .icon-container img {
-        max-width: 35px;
-        max-height: 35px;
-        object-fit: contain;
-    }
-
-    .country-name {
-        font-size: 1.1rem;
-        font-weight: 700;
-        color: var(--primary-dark);
-        text-transform: uppercase;
-        letter-spacing: 0.5px;
-    }
-
-    .service-tag {
-        display: inline-block;
-        background: linear-gradient(135deg,
-                rgba(186, 50, 38, 0.1),
-                rgba(186, 50, 38, 0.05));
-        color: var(--secondary);
-        padding: 0.4rem 0.9rem;
-        border-radius: 20px;
-        font-size: 0.85rem;
-        font-weight: 600;
-        margin: 0.2rem;
-        border: 1px solid rgba(186, 50, 38, 0.2);
-        transition: all 0.3s ease;
-    }
-
-    .service-tag:hover {
-        background: var(--secondary);
-        color: white;
-        transform: translateY(-2px);
-    }
-
-    .action-btn-group {
-        display: flex;
-        gap: 0.5rem;
-        justify-content: center;
-    }
-
-    .action-btn {
-        width: 38px;
-        height: 38px;
-        border-radius: 8px;
-        border: none;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        cursor: pointer;
-        transition: all 0.3s ease;
-        font-size: 0.95rem;
-    }
-
-    .btn-view-modern {
-        background: linear-gradient(135deg,
-                rgba(59, 130, 246, 0.1),
-                rgba(59, 130, 246, 0.05));
-        color: #3b82f6;
-        border: 1px solid rgba(59, 130, 246, 0.3);
-    }
-
-    .btn-view-modern:hover {
-        background: #3b82f6;
-        color: white;
-        transform: translateY(-3px);
-        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
-    }
-
-    .btn-edit-modern {
-        background: linear-gradient(135deg,
-                rgba(34, 197, 94, 0.1),
-                rgba(34, 197, 94, 0.05));
-        color: #22c55e;
-        border: 1px solid rgba(34, 197, 94, 0.3);
-    }
-
-    .btn-edit-modern:hover {
-        background: #22c55e;
-        color: white;
-        transform: translateY(-3px);
-        box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
-    }
-
-    .btn-delete-modern {
-        background: linear-gradient(135deg,
-                rgba(239, 68, 68, 0.1),
-                rgba(239, 68, 68, 0.05));
-        color: #ef4444;
-        border: 1px solid rgba(239, 68, 68, 0.3);
-    }
-
-    .btn-delete-modern:hover {
-        background: #ef4444;
-        color: white;
-        transform: translateY(-3px);
-        box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
-    }
-
-    .nav-tabs-modern {
-        background: #f8f9fa;
-        border: none;
-        padding: 0;
-        border-bottom: 2px solid var(--border-light);
-    }
-
-    .nav-tabs-modern .nav-item {
-        flex: 1;
-    }
-
-    .nav-tabs-modern .nav-link {
-        border: none;
-        color: var(--text-dark);
-        font-weight: 600;
-        padding: 1.25rem 1rem;
-        transition: all 0.3s ease;
-        border-bottom: 3px solid transparent;
-        background: transparent;
-        text-align: center;
-    }
-
-    .nav-tabs-modern .nav-link:hover {
-        background: rgba(186, 50, 38, 0.05);
-        color: var(--secondary);
-    }
-
-    .nav-tabs-modern .nav-link.active {
-        background: white;
-        color: var(--secondary);
-        border-bottom: 3px solid var(--secondary);
-    }
-
-    .nav-tabs-modern .nav-link i {
-        margin-right: 0.5rem;
-    }
-
-    .form-label-modern {
-        font-weight: 700;
-        color: var(--primary-dark);
-        margin-bottom: 0.5rem;
-        font-size: 0.9rem;
-    }
-
-    .form-control-modern {
-        border: 2px solid var(--border-light);
-        border-radius: 8px;
-        padding: 0.7rem 1rem;
-        transition: all 0.3s ease;
-        font-size: 0.95rem;
-    }
-
-    .form-control-modern:focus {
-        border-color: var(--secondary);
-        box-shadow: 0 0 0 3px rgba(186, 50, 38, 0.1);
-        outline: none;
-    }
-
-    .form-footer {
-        background: #f8f9fa;
-        border-top: 1px solid var(--border-light);
-        padding: 1.5rem 2rem;
-        display: flex;
-        gap: 1rem;
-        justify-content: flex-end;
-    }
-
-    .btn-cancel-modern {
-        background: white;
-        color: var(--text-dark);
-        border: 2px solid var(--border-light);
-        padding: 0.7rem 1.5rem;
-        border-radius: 8px;
-        font-weight: 600;
-        transition: all 0.3s ease;
-        cursor: pointer;
-    }
-
-    .btn-cancel-modern:hover {
-        background: var(--border-light);
-        border-color: var(--text-dark);
-    }
-
-    .btn-save-modern {
-        background: var(--secondary);
-        color: white;
-        border: none;
-        padding: 0.7rem 1.5rem;
-        border-radius: 8px;
-        font-weight: 600;
-        display: inline-flex;
-        align-items: center;
-        gap: 0.5rem;
-        transition: all 0.3s ease;
-        box-shadow: 0 4px 12px rgba(186, 50, 38, 0.3);
-        cursor: pointer;
-    }
-
-    .btn-save-modern:hover {
-        background: #a32a20;
-        transform: translateY(-2px);
-        box-shadow: 0 6px 20px rgba(186, 50, 38, 0.4);
-    }
-
-    .info-group {
-        margin-bottom: 1.5rem;
-    }
-
-    .info-label {
-        font-weight: 700;
-        color: var(--primary-dark);
-        font-size: 0.85rem;
-        text-transform: uppercase;
-        letter-spacing: 0.5px;
-        margin-bottom: 0.5rem;
-    }
-
-    .info-value {
-        color: var(--text-dark);
-        font-size: 1rem;
-        padding: 0.75rem;
-        background: #f8f9fa;
-        border-radius: 8px;
-        border-left: 4px solid var(--secondary);
-    }
-
-    @media (max-width: 768px) {
-        .card-header-modern {
-            flex-direction: column;
-            gap: 1rem;
-            align-items: flex-start;
-        }
-
-        .table-modern thead th,
-        .table-modern tbody td {
-            padding: 1rem;
-            font-size: 0.9rem;
-        }
-
-        .form-footer {
-            flex-direction: column-reverse;
-        }
-
-        .btn-save-modern,
-        .btn-cancel-modern {
-            width: 100%;
-            justify-content: center;
-        }
-    }
-
-    @keyframes fadeInUp {
-        from {
-            opacity: 0;
-            transform: translateY(30px);
-        }
-
-        to {
-            opacity: 1;
-            transform: translateY(0);
-        }
-    }
-
-    .card-modern {
-        animation: fadeInUp 0.6s ease;
-    }
-</style>
-
-<div class="main-container">
-    <div class="card-modern">
-        <div class="card-header-modern" id="cardHeader">
-            <h5 class="card-title-modern" id="cardTitle">
-                <i class="fas fa-globe-americas"></i>
-                Visa Management
-            </h5>
-            <button type="button" class="btn-add-modern" id="btnAddCountry">
-                <i class="fas fa-plus-circle"></i>
-                Add Country
-            </button>
-        </div>
-
-        <!-- Table View -->
-        <div class="table-container" id="tableContainer">
-            <table class="table-modern">
-                <thead>
-                    <tr>
-                        <th style="width: 8%" class="text-center">ID</th>
-                        <th style="width: 10%" class="text-center">Flag</th>
-                        <th style="width: 22%">Country Name</th>
-                        <th style="width: 40%">Services</th>
-                        <th style="width: 20%" class="text-center">Actions</th>
-                    </tr>
-                </thead>
-                <tbody id="countryTableBody">
-                    <% if (data && data.hero && data.hero.summaryList) { %>
-                        <% data.hero.summaryList.forEach(function(country) { %>
-                            <tr>
-                                <td class="text-center">
-                                    <span class="id-badge">#<%= String(country.id).padStart(3, "0" ) %></span>
-                                </td>
-                                <td class="text-center">
-                                    <div class="icon-container">
-                                        <img src="<%= country.icon %>" alt="<%= country.name %>">
-                                    </div>
-                                </td>
-                                <td><span class="country-name">
-                                        <%= country.name %>
-                                    </span></td>
-                                <td>
-                                    <div class="d-flex flex-wrap gap-1">
-                                        <% country.services.forEach(function(service) { %>
-                                            <span class="service-tag">
-                                                <%= service %>
-                                            </span>
-                                            <% }); %>
-                                    </div>
-                                </td>
-                                <td>
-                                    <div class="action-btn-group">
-                                        <button class="action-btn btn-view-modern" data-id="<%= country.id %>"
-                                            title="View">
-                                            <i class="fas fa-eye"></i>
-                                        </button>
-                                        <button class="action-btn btn-edit-modern" data-id="<%= country.id %>"
-                                            title="Edit">
-                                            <i class="fas fa-edit"></i>
-                                        </button>
-                                        <button class="action-btn btn-delete-modern" data-id="<%= country.id %>"
-                                            title="Delete">
-                                            <i class="fas fa-trash-alt"></i>
-                                        </button>
-                                    </div>
-                                </td>
-                            </tr>
-                            <% }); %>
-                                <% } %>
-                </tbody>
-            </table>
-        </div>
-
-        <!-- Form View -->
-        <div id="formContainer" style="display: none">
-            <ul class="nav nav-tabs nav-tabs-modern" id="countryTab" role="tablist">
-                <li class="nav-item">
-                    <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab-summary">
-                        <i class="fas fa-map-marker-alt"></i>Country Summary
-                    </button>
-                </li>
-                <li class="nav-item">
-                    <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-detail">
-                        <i class="fas fa-file-alt"></i>Detailed View
-                    </button>
-                </li>
-                <li class="nav-item">
-                    <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-contact">
-                        <i class="fas fa-phone-alt"></i>Contact Info
-                    </button>
-                </li>
-            </ul>
-
-            <form id="formCountry" style="background: white">
-                <input type="hidden" name="country_id" id="country_id" />
-                <div class="tab-content p-4">
-                    <!-- Tab 1 -->
-                    <div class="tab-pane fade show active" id="tab-summary" role="tabpanel">
-                        <!-- <div class="col-md-12 mt-4">
-                            <label class="form-label-modern fw-bold text-dark mb-3">
-                                Page Meta Configuration (SEO)
-                            </label>
-
-                            <div class="row g-3 p-3 border rounded shadow-sm bg-white border-start">
-                                <div class="col-md-4">
-                                    <label class="small text-muted">Charset</label>
-                                    <input type="text" name="meta_charset" class="form-control-modern w-100"
-                                        value="UTF-8" placeholder="e.g. UTF-8">
-                                </div>
-
-                                <div class="col-md-4">
-                                    <label class="small text-muted">Author</label>
-                                    <input type="text" name="meta_author" class="form-control-modern w-100"
-                                        placeholder="e.g. Gramentheme">
-                                </div>
-
-                                <div class="col-md-4">
-                                    <label class="small text-muted">Viewport</label>
-                                    <input type="text" name="meta_viewport" class="form-control-modern w-100"
-                                        value="width=device-width, initial-scale=1"
-                                        placeholder="e.g. width=device-width, initial-scale=1">
-                                </div>
-
-                                <div class="col-md-12">
-                                    <label class="small text-muted">Meta Description (SEO)</label>
-                                    <textarea name="meta_description" class="form-control-modern w-100" rows="3"
-                                        placeholder="Visaway – Immigration & Visa Consulting HTML Template"></textarea>
-                                    <div class="form-text mt-1" style="font-size: 0.75rem;">
-                                        It's best to keep your text under 160 characters for optimal display on Google.
-                                    </div>
-                                </div>
-                            </div>
-                        </div> -->
-                        <div class="row g-3">
-                            <div class="col-md-6">
-                                <label class="form-label-modern">Country Name</label>
-                                <input type="text" name="name" class="form-control-modern w-100"
-                                    placeholder="e.g. France" required />
-                            </div>
-                            <div class="col-md-12">
-                                <label class="form-label-modern fw-bold">Img Flag (Country Icon)</label>
-                                <div class="input-group">
-                                    <input type="text" class="form-control-modern flex-grow-1" name="icon"
-                                        id="img_flag_path" placeholder="/img/home-2/visa/03.png">
-
-                                    <button type="button" class="btn btn-outline-secondary"
-                                        onclick="document.getElementById('fileFlagInput').click()">
-                                        <i class="fas fa-upload me-1"></i>Upload
-                                    </button>
-                                </div>
-
-                                <!-- <div id="container_preview_flag" class="mt-2 border rounded p-2 bg-light d-inline-block" style="display: none;">
-    </div> -->
-
-                                <input type="file" id="fileFlagInput" style="display:none" accept="image/*"
-                                    onchange="handleFileSelect(this, 'img_flag_path', 'preview_flag', 'container_preview_flag')">
-                            </div>
-                            <div class="col-md-12">
-                                <label class="form-label-modern fw-bold">Visa Services (5 services)</label>
-                            </div>
-                            <div class="col-md-4">
-                                <input type="text" name="services[]" class="form-control-modern w-100"
-                                    placeholder="Service 1" />
-                            </div>
-                            <div class="col-md-4">
-                                <input type="text" name="services[]" class="form-control-modern w-100"
-                                    placeholder="Service 2" />
-                            </div>
-                            <div class="col-md-4">
-                                <input type="text" name="services[]" class="form-control-modern w-100"
-                                    placeholder="Service 3" />
-                            </div>
-                            <div class="col-md-4">
-                                <input type="text" name="services[]" class="form-control-modern w-100"
-                                    placeholder="Service 4" />
-                            </div>
-                            <div class="col-md-4">
-                                <input type="text" name="services[]" class="form-control-modern w-100"
-                                    placeholder="Service 5" />
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- Tab 2 -->
-                    <div class="tab-pane fade" id="tab-detail" role="tabpanel">
-                        <div class="row g-3">
-                            <div class="col-md-12">
-                                <label class="form-label-modern">Banner Title</label>
-                                <input type="text" name="detail_title" class="form-control-modern w-100"
-                                    placeholder="COUNTRY USA" />
-                            </div>
-                            <div class="col-md-12">
-                                <label class="form-label-modern">Main Image</label>
-                                <input type="text" name="mainImage" class="form-control-modern w-100"
-                                    placeholder="/img/.../details-1.jpg" />
-                            </div>
-                            <div class="col-md-6">
-                                <label class="form-label-modern">Main Description</label>
-                                <textarea name="description" class="form-control-modern w-100" rows="5"></textarea>
-                            </div>
-                            <div class="col-md-6">
-                                <label class="form-label-modern">Additional Info</label>
-                                <textarea name="additionalInfo" class="form-control-modern w-100" rows="5"></textarea>
-                            </div>
-                            <div class="col-md-12">
-                                <label class="form-label-modern">Tagline</label>
-                                <input type="text" name="tagline" class="form-control-modern w-100" />
-                            </div>
-                            <div class="col-md-12">
-                                <label class="form-label-modern">Visa Types</label>
-
-                                <div class="row g-4">
-
-                                    <div class="col-md-6">
-                                        <div class="visa-item-group p-3 border rounded shadow-sm">
-                                            <label class="small text-muted mb-1">Type 1</label>
-                                            <input type="text" name="visa_title[]"
-                                                class="form-control-modern w-100 mb-2"
-                                                placeholder="Visa Title (e.g. Tourist Visa)" />
-                                            <textarea name="visa_description[]" class="form-control-modern w-100"
-                                                rows="4" placeholder="Visa Description"></textarea>
-                                        </div>
-                                    </div>
-
-                                    <div class="col-md-6">
-                                        <div class="visa-item-group p-3 border rounded shadow-sm">
-                                            <label class="small text-muted mb-1">Type 2</label>
-                                            <input type="text" name="visa_title[]"
-                                                class="form-control-modern w-100 mb-2"
-                                                placeholder="Visa Title (e.g. Work Permit)" />
-                                            <textarea name="visa_description[]" class="form-control-modern w-100"
-                                                rows="4" placeholder="Visa Description"></textarea>
-                                        </div>
-                                    </div>
-
-                                </div>
-                            </div>
-                            <div class="row g-3 mb-4 p-3 border rounded shadow-sm bg-white">
-                                <div class="col-md-12">
-                                    <label class="form-label-modern fw-bold">Process Main Title</label>
-                                    <input type="text" name="process_main_title" class="form-control-modern w-100"
-                                        placeholder="e.g. USA Visa Process" />
-                                </div>
-                                <div class="row g-3">
-                                    <% for(let i=1; i<=5; i++) { %>
-                                        <div class="col-md-12">
-                                            <div class="p-3 border rounded shadow-sm bg-light">
-                                                <div class="d-flex align-items-center mb-2">
-                                                    <span class="badge bg-secondary me-2">
-                                                        <%= i.toString().padStart(2, '0' ) %>
-                                                    </span>
-                                                    <input type="text" name="step_title[]"
-                                                        class="form-control-modern flex-grow-1"
-                                                        placeholder="Step <%= i %> Title" />
-                                                </div>
-                                                <textarea name="step_description[]" class="form-control-modern w-100"
-                                                    rows="2" placeholder="Step <%= i %> Description"></textarea>
-                                            </div>
-                                        </div>
-                                        <% } %>
-                                </div>
-                                <div class="col-md-6">
-                                    <label class="form-label-modern small">Process Image 1</label>
-                                    <div class="input-group">
-                                        <input type="text" class="form-control-modern flex-grow-1"
-                                            name="process_image_1" id="process_image_1"
-                                            placeholder="/img/process-1.jpg">
-                                        <button type="button" class="btn btn-outline-secondary"
-                                            onclick="document.getElementById('fileInput1').click()">
-                                            <i class="fas fa-upload me-1"></i>Upload
-                                        </button>
-                                    </div>
-                                    <div class="mt-2">
-                                        <img id="preview_process_1" src=""
-                                            style="max-width: 100px; display: none; border-radius: 4px; border: 1px solid #ddd;">
-                                    </div>
-                                    <input type="file" id="fileInput1" style="display:none"
-                                        onchange="handleFileSelect(this, 'process_image_1', 'preview_process_1')">
-                                </div>
-
-                                <div class="col-md-6">
-                                    <label class="form-label-modern small">Process Image 2</label>
-                                    <div class="input-group">
-                                        <input type="text" class="form-control-modern flex-grow-1"
-                                            name="process_image_2" id="process_image_2"
-                                            placeholder="/img/process-2.jpg">
-                                        <button type="button" class="btn btn-outline-secondary"
-                                            onclick="document.getElementById('fileInput2').click()">
-                                            <i class="fas fa-upload me-1"></i>Upload
-                                        </button>
-                                    </div>
-                                    <div class="mt-2">
-                                        <img id="preview_process_2" src=""
-                                            style="max-width: 100px; display: none; border-radius: 4px; border: 1px solid #ddd;">
-                                    </div>
-                                    <input type="file" id="fileInput2" style="display:none"
-                                        onchange="handleFileSelect(this, 'process_image_2', 'preview_process_2')">
-                                </div>
-                            </div>
-                            <div class="col-md-12 mt-4">
-                                <label class="form-label-modern fw-bold mb-3">
-                                    Visa Categories (Grouped)
-                                </label>
-
-                                <div class="row mb-3 p-3 border rounded shadow-sm bg-white">
-                                    <div class="col-md-12">
-                                        <label class="small text-muted">Categories Main Title</label>
-                                        <input type="text" name="visa_categories_title"
-                                            class="form-control-modern w-100" placeholder="e.g. Types of USA Visas" />
-                                    </div>
-                                </div>
-
-                                <div class="row g-4">
-                                    <div class="col-md-6">
-                                        <div class="p-3 border rounded bg-light shadow-sm">
-                                            <label class="small fw-bold mb-2 d-block">Group 1 (3 Items)</label>
-                                            <div class="d-flex flex-column gap-2">
-                                                <input type="text" name="category_group1[]" class="form-control-modern"
-                                                    placeholder="e.g. Student Visa (F1, M1, J1)">
-                                                <input type="text" name="category_group1[]" class="form-control-modern"
-                                                    placeholder="e.g. Work Visa (H1B, L1)">
-                                                <input type="text" name="category_group1[]" class="form-control-modern"
-                                                    placeholder="e.g. Tourist Visa (B1/B2)">
-                                            </div>
-                                        </div>
-                                    </div>
-
-                                    <div class="col-md-6">
-                                        <div class="p-3 border rounded bg-light shadow-sm">
-                                            <label class="small fw-bold mb-2 d-block">Group 2 (2 Items)</label>
-                                            <div class="d-flex flex-column gap-2">
-                                                <input type="text" name="category_group2[]" class="form-control-modern"
-                                                    placeholder="e.g. Family/Spouse Visa (K1)">
-                                                <input type="text" name="category_group2[]" class="form-control-modern"
-                                                    placeholder="e.g. Green Card">
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="col-md-12 mt-4">
-                                <label class="form-label-modern fw-bold mb-3">
-                                    Visa Service Options (5 Steps)
-                                </label>
-
-                                <div class="row mb-3">
-                                    <div class="col-md-12">
-                                        <div class="p-3 border rounded shadow-sm bg-white">
-                                            <label class="small text-muted">Service Main Title</label>
-                                            <input type="text" name="service_main_title"
-                                                class="form-control-modern w-100"
-                                                placeholder="e.g. Our USA Visa Service Options" />
-                                        </div>
-                                    </div>
-                                </div>
-
-                                <div class="row g-3">
-                                    <% for(let i=1; i<=5; i++) { %>
-                                        <div class="col-md-12">
-                                            <div class="p-3 border rounded shadow-sm bg-white border-start ">
-                                                <div class="d-flex align-items-center mb-2">
-                                                    <span class="badge bg-secondary me-2">
-                                                        <%= i.toString().padStart(2, '0' ) %>
-                                                    </span>
-                                                    <input type="text" name="service_step_title[]"
-                                                        class="form-control-modern flex-grow-1 fw-bold"
-                                                        placeholder="Service Step <%= i %> Title" />
-                                                </div>
-                                                <textarea name="service_step_description[]"
-                                                    class="form-control-modern w-100" rows="2"
-                                                    placeholder="Service Step <%= i %> Description"></textarea>
-                                            </div>
-                                        </div>
-                                        <% } %>
-                                </div>
-                            </div>
-                            <div class="col-md-12 mt-4">
-                                <label class="form-label-modern fw-bold mb-3">
-                                    Related Countries (7 Items)
-                                </label>
-
-                                <div class="row g-3">
-                                    <% for(let i=1; i<=7; i++) { %>
-                                        <div class="col-md-6">
-                                            <div class="p-3 border rounded shadow-sm bg-white border-start ">
-                                                <div class="row g-2 align-items-center">
-                                                    <input type="hidden" name="related_id[]" value="<%= i %>">
-
-                                                    <div class="col-md-5">
-                                                        <label class="small text-muted">Country Name</label>
-                                                        <input type="text" name="related_name[]"
-                                                            class="form-control-modern w-100" placeholder="e.g. Canada">
-                                                    </div>
-
-                                                    <div class="col-md-7">
-                                                        <label class="small text-muted">Icon Path</label>
-                                                        <div class="input-group">
-                                                            <input type="text" class="form-control-modern flex-grow-1"
-                                                                name="related_icon[]" id="related_icon_<%= i %>"
-                                                                placeholder="/img/.../0<%= i %>.png">
-                                                            <button type="button"
-                                                                class="btn btn-outline-secondary btn-sm"
-                                                                onclick="document.getElementById('fileRelated_<%= i %>').click()">
-                                                                <i class="fas fa-upload"></i>
-                                                            </button>
-                                                        </div>
-
-                                                        <div class="mt-2">
-                                                            <img id="preview_related_<%= i %>" src="" alt="Preview"
-                                                                style="max-width: 60px; height: 60px; object-fit: cover; display: none; border: 1px solid #ddd; padding: 2px; border-radius: 4px;">
-                                                        </div>
-
-                                                        <input type="file" id="fileRelated_<%= i %>"
-                                                            style="display:none"
-                                                            onchange="handleFileSelect(this, 'related_icon_<%= i %>', 'preview_related_<%= i %>')">
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <% } %>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- Tab 3 -->
-                    <div class="tab-pane fade" id="tab-contact" role="tabpanel">
-                        <div class="row g-3">
-                            <div class="col-md-12 mt-4">
-                                <label class="form-label-modern fw-bold mb-3">
-                                    Contact Information Section
-                                </label>
-
-                                <div class="row g-3 p-3 border rounded shadow-sm bg-white border-start">
-                                    <div class="col-md-12">
-                                        <label class="small text-muted">Background Image (Contact Section)</label>
-                                        <div class="input-group">
-                                            <input type="text" class="form-control-modern flex-grow-1"
-                                                name="contact_bg_img" id="contact_bg_img" placeholder="/img/.../bg.jpg">
-                                            <button type="button" class="btn btn-outline-secondary btn-sm"
-                                                onclick="document.getElementById('fileContactBg').click()">
-                                                <i class="fas fa-upload"></i>
-                                            </button>
-                                        </div>
-                                        <img id="preview_contact_bg" src=""
-                                            style="max-width: 150px; display: none; margin-top: 5px; border-radius: 4px;">
-                                        <input type="file" id="fileContactBg" style="display:none"
-                                            onchange="handleFileSelect(this, 'contact_bg_img', 'preview_contact_bg')">
-                                    </div>
-
-                                    <div class="col-md-6">
-                                        <label class="small text-muted">Section Title</label>
-                                        <input type="text" name="contact_sectionTitle" class="form-control-modern w-100"
-                                            placeholder="e.g. Visa & Immigration">
-                                    </div>
-                                    <div class="col-md-6">
-                                        <label class="small text-muted">Help Text</label>
-                                        <input type="text" name="contact_helpText" class="form-control-modern w-100"
-                                            placeholder="e.g. Need Help? Book Lab Visit">
-                                    </div>
-
-                                    <hr>
-
-                                    <div class="col-md-4">
-                                        <label class="small fw-bold">Phone</label>
-                                        <input type="text" name="contact_phone_label"
-                                            class="form-control-modern w-100 mb-2" placeholder="Label (e.g. Call Us)">
-                                        <input type="text" name="contact_phone_value" class="form-control-modern w-100"
-                                            placeholder="Value (e.g. +009 438...)">
-                                    </div>
-
-                                    <div class="col-md-4">
-                                        <label class="small fw-bold">Email</label>
-                                        <input type="text" name="contact_email_label"
-                                            class="form-control-modern w-100 mb-2" placeholder="Label (e.g. Mail Us)">
-                                        <input type="email" name="contact_email_value" class="form-control-modern w-100"
-                                            placeholder="Value (e.g. info@...)">
-                                    </div>
-
-                                    <div class="col-md-4">
-                                        <label class="small fw-bold">Location</label>
-                                        <input type="text" name="contact_location_label"
-                                            class="form-control-modern w-100 mb-2" placeholder="Label (e.g. Location)">
-                                        <input type="text" name="contact_location_address"
-                                            class="form-control-modern w-100" placeholder="Address">
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </form>
-
-            <div class="form-footer">
-                <button type="button" class="btn-cancel-modern" id="btnBackToList">
-                    <i class="fas fa-arrow-left"></i> Back to List
-                </button>
-                <button type="submit" form="formCountry" class="btn-save-modern">
-                    <i class="fas fa-save"></i> Save
-                </button>
-            </div>
-        </div>
-
-        <!-- View Info -->
-        <div id="viewContainer" style="display: none; padding: 2rem">
-            <div class="row g-4">
-                <div class="col-md-6">
-                    <div class="info-group">
-                        <div class="info-label">Country Name</div>
-                        <div class="info-value" id="view-name">-</div>
-                    </div>
-                </div>
-                <div class="col-md-12">
-                    <div class="info-group">
-                        <div class="info-label">Services</div>
-                        <div class="info-value" id="view-services">-</div>
-                    </div>
-                </div>
-                <div class="col-md-12">
-                    <div class="info-group">
-                        <div class="info-label">Description</div>
-                        <div class="info-value" id="view-description">-</div>
-                    </div>
-                </div>
-                <div class="col-md-6">
-                    <div class="info-group">
-                        <div class="info-label">Phone</div>
-                        <div class="info-value" id="view-phone">-</div>
-                    </div>
-                </div>
-                <div class="col-md-6">
-                    <div class="info-group">
-                        <div class="info-label">Email</div>
-                        <div class="info-value" id="view-email">-</div>
-                    </div>
-                </div>
-            </div>
-            <div class="form-footer">
-                <button type="button" class="btn-cancel-modern" id="btnBackFromView">
-                    <i class="fas fa-arrow-left"></i> Back to List
-                </button>
-            </div>
-        </div>
+<div class="container">
+  <div class="d-flex justify-content-between align-items-center mt-4 mb-4">
+    <div>
+      <h1 class="h3 mb-0" style="color: var(--primary-dark)">
+       Visa Management
+      </h1>
+      <p class="text-muted mb-0">Manage visa information for different countries</p>
     </div>
-</div>
-<script>
-    const apiData = {
-        hero: {
-            title: "Visa Service",
-            summaryList: [
-                {
-                    id: 1,
-                    slug: "france",
-                    icon: "/img/home-2/visa/03.png",
-                    services: [
-                        "Student Visa & Admission",
-                        "Work Visa – H1B",
-                        "Work permit for Canada",
-                        "Student Visa for Canada",
-                    ],
-                    detailedView: {
-                        activeCountry: {
-                            title: "COUNTRY FRANCE",
-                            mainImage: "/img/inner-page/country-details/details-1.jpg",
-                            description:
-                                "France offers world-class education and cultural experiences...",
-                            additionalInfo:
-                                "Our consultancy provides complete guidance for study visas...",
-                            tagline: "Experience the best of European education",
-                            contactInfo: {
-                                sectionTitle: "Visa & Immigration",
-                                phone: { value: "+33 1 234 5678" },
-                                email: { value: "info@france-visa.com" },
-                                location: { address: "Paris, France" },
-                            },
-                        },
-                    },
-                },
-                {
-                    id: 2,
-                    name: "UK",
-                    slug: "uk",
-                    icon: "/img/home-2/visa/11.png",
-                    services: [
-                        "Student Visa & Admission",
-                        "Work Visa – H1B",
-                        "Work permit for Canada",
-                    ],
-                    detailedView: null,
-                },
-                {
-                    id: 3,
-                    name: "Canada",
-                    slug: "canada",
-                    icon: "/img/home-2/visa/02.png",
-                    services: ["Student Visa & Admission", "Work Visa – H1B"],
-                    detailedView: null,
-                },
-            ],
-        },
-    };
+    <div>
+      <button type="button" class="btn btn-primary" id="btnAddCountry">
+        <i class="fas fa-plus-circle me-2"></i>Add Country
+      </button>
+    </div>
+  </div>
 
+  <div class="row">
+    <div class="col-12">
+      <!-- Table View -->
+      <div class="card shadow-sm border-0 mb-4" id="tableContainer">
+        <div class="card-header bg-white border-bottom">
+          <h6 class="mb-0">Countries List</h6>
+        </div>
+        <div class="card-body p-0">
+          <div class="table-responsive">
+            <table class="table table-hover mb-0">
+              <thead class="table-light">
+                <tr>
+                  <th style="width: 8%" class="text-center">ID</th>
+                  <th style="width: 10%" class="text-center">Flag</th>
+                  <th style="width: 22%">Country Name</th>
+                  <th style="width: 40%">Services</th>
+                  <th style="width: 20%" class="text-center">Actions</th>
+                </tr>
+              </thead>
+              <tbody>
+                <% if (data && data.hero && data.hero.summaryList) { %>
+                  <% data.hero.summaryList.forEach(function(country) { %>
+                    <tr>
+                      <td class="text-center align-middle">
+                        <span class="badge bg-secondary">#<%= String(country.id).padStart(3, "0") %></span>
+                      </td>
+                      <td class="text-center align-middle">
+                        <img src="<%= country.icon %>" alt="<%= country.name %>" style="width: 40px; height: 40px; object-fit: contain;">
+                      </td>
+                      <td class="align-middle">
+                        <strong><%= country.name %></strong>
+                        <div class="small text-muted">Slug: <%= country.slug %></div>
+                      </td>
+                      <td class="align-middle">
+                        <% country.services.forEach(function(service) { %>
+                          <span class="badge bg-light text-dark me-1"><%= service %></span>
+                        <% }); %>
+                      </td>
+                      <td class="text-center align-middle">
+                        <!-- <button class="btn btn-sm btn-outline-info" onclick="viewCountry('<%= country.id %>')" title="View">
+                          <i class="fas fa-eye"></i>
+                        </button> -->
+                        <button class="btn btn-sm btn-outline-warning" onclick="editCountry('<%= country.id %>')" title="Edit">
+                          <i class="fas fa-edit"></i>
+                        </button>
+                        <button class="btn btn-sm btn-outline-danger" onclick="deleteCountry('<%= country.id %>')" title="Delete">
+                          <i class="fas fa-trash-alt"></i>
+                        </button>
+                      </td>
+                    </tr>
+                  <% }); %>
+                <% } %>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+
+      <!-- Form View -->
+      <div class="card shadow-sm border-0 mb-4" id="formContainer" style="display: none;">
+        <div class="card-header bg-white border-bottom">
+          <ul class="nav nav-tabs card-header-tabs" role="tablist">
+            <li class="nav-item">
+              <a class="nav-link active" data-bs-toggle="tab" href="#tab-summary" role="tab">
+                <i class="fas fa-map-marker-alt me-2"></i>Summary
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" data-bs-toggle="tab" href="#tab-detail" role="tab">
+                <i class="fas fa-file-alt me-2"></i>Details
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" data-bs-toggle="tab" href="#tab-contact" role="tab">
+                <i class="fas fa-phone-alt me-2"></i>Contact
+              </a>
+            </li>
+          </ul>
+        </div>
+
+        <div class="card-body">
+          <form id="formCountry">
+            <input type="hidden" name="country_id" id="country_id" />
+            <div class="tab-content">
+              <!-- Tab 1: Summary -->
+              <div class="tab-pane fade show active" id="tab-summary" role="tabpanel">
+                <div class="row g-3">
+                  <div class="col-md-6">
+                    <label class="form-label fw-medium">Country Name</label>
+                    <input type="text" name="name" class="form-control" placeholder="e.g. France" required />
+                  </div>
+                  <div class="col-md-6">
+                    <label class="form-label fw-medium">Country Icon (Flag)</label>
+                    <div class="input-group mb-2">
+                      <input type="text" name="icon" id="icon_input" class="form-control" placeholder="/uploads/visa/flag.png" required />
+                      <button type="button" class="btn btn-outline-secondary" onclick="document.getElementById('fileFlagInput').click()">
+                        <i class="fas fa-upload"></i>
+                      </button>
+                    </div>
+                    <input type="file" id="fileFlagInput" style="display:none" accept="image/*" />
+                    <div style="margin-top: 10px;">
+                      <img id="preview_icon" src="" alt="Icon Preview" style="max-width: 100px; max-height: 100px; object-fit: contain; display: none; border-radius: 4px; border: 1px solid #ddd;">
+                    </div>
+                  </div>
+                  <div class="col-md-12">
+                    <label class="form-label fw-medium">Visa Services (4 services)</label>
+                  </div>
+                  <% for(let i=1; i <=4; i++) { %>
+                    <div class="col-md-6">
+                      <input type="text" name="services[]" class="form-control" placeholder="Service <%= i %>" required/>
+                    </div>
+                  <% } %>
+                </div>
+              </div>
+
+              <!-- Tab 2: Details -->
+              <div class="tab-pane fade" id="tab-detail" role="tabpanel">
+                <div class="row g-4">
+                  <!-- Basic Information -->
+                  <div class="col-md-12">
+                    <div class="card border shadow-sm">
+                      <div class="card-header bg-white">
+                        <h6 class="mb-0"><i class="fas fa-info-circle me-2"></i>Basic Information</h6>
+                      </div>
+                      <div class="card-body">
+                        <div class="row g-3">
+                          <div class="col-md-12">
+                            <label class="form-label fw-medium">Banner Title</label>
+                            <input type="text" name="detail_title" class="form-control" placeholder="COUNTRY USA" required/>
+                          </div>
+                          <div class="col-md-12">
+                            <label class="form-label fw-medium">Main Image</label>
+                            <div class="input-group mb-2">
+                              <input type="text" id="mainImage_detail" name="mainImage" class="form-control" placeholder="/uploads/visa/details-1.jpg" required />
+                              <button type="button" class="btn btn-outline-secondary" onclick="document.getElementById('fileDetailMainInput').click()">
+                                <i class="fas fa-upload"></i>
+                              </button>
+                            </div>
+                            <input type="file" id="fileDetailMainInput" style="display:none" accept="image/*"/>
+                            <div style="margin-top: 10px;">
+                              <img id="preview_main_detail" src="" alt="Main Image Preview" style="max-width: 200px; max-height: 150px; object-fit: cover; display: none; border-radius: 4px; border: 1px solid #ddd;">
+                            </div>
+                          </div>
+                          <div class="col-md-6">
+                            <label class="form-label fw-medium">Main Description</label>
+                            <textarea name="description" class="form-control" rows="5" required></textarea>
+                          </div>
+                          <div class="col-md-6">
+                            <label class="form-label fw-medium">Additional Info</label>
+                            <textarea name="additionalInfo" class="form-control" rows="5" required></textarea>
+                          </div>
+                          <div class="col-md-12">
+                            <label class="form-label fw-medium">Tagline</label>
+                            <input type="text" name="tagline" class="form-control" required />
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  <!-- Visa Types -->
+                  <div class="col-md-12">
+                    <div class="card border shadow-sm">
+                      <div class="card-header bg-white">
+                        <h6 class="mb-0"><i class="fas fa-file-contract me-2"></i>Visa Types</h6>
+                      </div>
+                      <div class="card-body">
+                        <div class="row g-3">
+                          <% for(let i=1; i<=4; i++) { %>
+                            <div class="col-md-6">
+                              <label class="form-label fw-medium">Type <%= i %> Title</label>
+                              <input type="text" name="visa_title_<%= i %>" class="form-control" placeholder="e.g. Tourist Visa" required />
+                              <label class="form-label fw-medium mt-2">Description</label>
+                              <textarea name="visa_desc_<%= i %>" class="form-control" rows="3" required></textarea>
+                            </div>
+                          <% } %>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  <!-- Visa Process -->
+                  <div class="col-md-12">
+                    <div class="card border shadow-sm">
+                      <div class="card-header bg-white">
+                        <h6 class="mb-0"><i class="fas fa-list-check me-2"></i>Visa Process</h6>
+                      </div>
+                      <div class="card-body">
+                        <div class="mb-3">
+                          <label class="form-label fw-medium">Process Title</label>
+                          <input type="text" name="process_title" class="form-control" placeholder="e.g. USA Visa Process" required />
+                        </div>
+                        <div class="row g-3">
+                          <% for(let i=1; i<=5; i++) { %>
+                            <div class="col-md-12">
+                              <div class="card bg-light">
+                                <div class="card-body">
+                                  <div class="d-flex align-items-center gap-2 mb-2">
+                                    <span class="badge bg-secondary"><%= i %></span>
+                                    <input type="text" name="step_title[]" class="form-control form-control-sm" placeholder="Step <%= i %> Title" required />
+                                  </div>
+                                  <textarea name="step_desc[]" class="form-control form-control-sm" rows="2" placeholder="Step <%= i %> Description" required></textarea>
+                                </div>
+                              </div>
+                            </div>
+                          <% } %>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  <!-- Gallery -->
+                  <div class="col-md-12">
+                    <div class="card border shadow-sm">
+                      <div class="card-header bg-white">
+                        <h6 class="mb-0"><i class="fas fa-images me-2"></i>Gallery</h6>
+                      </div>
+                      <div class="card-body">
+                        <div class="row g-3">
+                          <% for(let i=1; i<=2; i++) { %>
+                            <div class="col-md-12">
+                              <label class="form-label fw-medium">Gallery Image <%= i %></label>
+                              <div class="input-group mb-2">
+                                <input type="text" class="form-control" id="bannerImageGallery<%= i %>" name="bannerImageGallery" placeholder="https://example.com/image.jpg" required />
+                                <button type="button" class="btn btn-outline-secondary" onclick="document.getElementById('fileGalleryInput<%= i %>').click()">
+                                  <i class="fas fa-upload"></i>
+                                </button>
+                              </div>
+                              <input type="file" id="fileGalleryInput<%= i %>" style="display:none" accept="image/*">
+                              <div style="margin-top: 10px;">
+                                <img id="preview_bannerImageGallery<%= i %>" src="" alt="Gallery Image Preview" style="max-width: 200px; max-height: 150px; object-fit: cover; display: none; border-radius: 4px; border: 1px solid #ddd;">
+                              </div>
+                            </div>
+                          <% } %>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  <!-- Visa Categories -->
+                  <div class="col-md-12">
+                    <div class="card border shadow-sm">
+                      <div class="card-header bg-white">
+                        <h6 class="mb-0"><i class="fas fa-layer-group me-2"></i>Visa Categories</h6>
+                      </div>
+                      <div class="card-body">
+                        <div class="mb-3">
+                          <label class="form-label fw-medium">Categories Title</label>
+                          <input type="text" name="visa_categories_title" class="form-control" placeholder="e.g. Types of USA Visas" required />
+                        </div>
+                        <div class="row g-3">
+                          <div class="col-md-6">
+                            <label class="form-label fw-medium small">Group 1 (3 Items)</label>
+                            <input type="text" name="category_group1[]" class="form-control form-control-sm mb-2" placeholder="Item 1" required />
+                            <input type="text" name="category_group1[]" class="form-control form-control-sm mb-2" placeholder="Item 2" required />
+                            <input type="text" name="category_group1[]" class="form-control form-control-sm" placeholder="Item 3" required />
+                          </div>
+                          <div class="col-md-6">
+                            <label class="form-label fw-medium small">Group 2 (2 Items)</label>
+                            <input type="text" name="category_group2[]" class="form-control form-control-sm mb-2" placeholder="Item 1" required />
+                            <input type="text" name="category_group2[]" class="form-control form-control-sm" placeholder="Item 2" required />
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  <!-- Service Options -->
+                  <div class="col-md-12">
+                    <div class="card border shadow-sm">
+                      <div class="card-header bg-white">
+                        <h6 class="mb-0"><i class="fas fa-briefcase me-2"></i>Service Options</h6>
+                      </div>
+                      <div class="card-body">
+                        <div class="mb-3">
+                          <label class="form-label fw-medium">Service Title</label>
+                          <input type="text" name="service_main_title" class="form-control" placeholder="e.g. Our Visa Service Options" required />
+                        </div>
+                        <div class="row g-3">
+                          <% for(let i=1; i<=5; i++) { %>
+                            <div class="col-md-12">
+                              <div class="card bg-light">
+                                <div class="card-body">
+                                  <div class="d-flex align-items-center gap-2 mb-2">
+                                    <span class="badge bg-secondary"><%= i %></span>
+                                    <input type="text" name="service_step_title[]" class="form-control form-control-sm" placeholder="Service <%= i %>" required />
+                                  </div>
+                                  <textarea name="service_step_desc[]" class="form-control form-control-sm" rows="2" placeholder="Description" required></textarea>
+                                </div>
+                              </div>
+                            </div>
+                          <% } %>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  <!-- Related Countries -->
+                  <div class="col-md-12">
+                    <div class="card border shadow-sm">
+                      <div class="card-header bg-white">
+                        <h6 class="mb-0"><i class="fas fa-globe me-2"></i>Related Countries (7)</h6>
+                      </div>
+                      <div class="card-body">
+                        <div class="row g-3">
+                          <% for(let i=0; i<7; i++) { %>
+                            <div class="col-md-6">
+                              <div class="card bg-light">
+                                <div class="card-body">
+                                  <div class="row g-2">
+                                    <div class="col-md-7">
+                                      <label class="form-label fw-medium small">Country Name</label>
+                                      <input type="text" name="related_name[]" class="form-control form-control-sm" placeholder="e.g. Japan" required />
+                                    </div>
+                                    <div class="col-md-5">
+                                      <label class="form-label fw-medium small">Icon</label>
+                                      <div class="input-group input-group-sm">
+                                        <input type="text" name="related_icon[]" id="related_url_<%= i %>" class="form-control form-control-sm" placeholder="/uploads/visa/icon.png" required />
+                                        <input type="file" id="related_file_<%= i %>" class="d-none" accept="image/*">
+                                        <button type="button" class="btn btn-sm btn-outline-secondary" onclick="document.getElementById('related_file_<%= i %>').click()">
+                                          <i class="fas fa-upload"></i>
+                                        </button>
+                                      </div>
+                                      <div style="margin-top: 5px;">
+                                        <img id="related_preview_<%= i %>" src="" alt="preview" style="max-width: 60px; max-height: 60px; object-fit: contain; display: none; border-radius: 4px; border: 1px solid #ddd;">
+                                      </div>
+                                    </div>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          <% } %>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Tab 3: Contact -->
+              <div class="tab-pane fade" id="tab-contact" role="tabpanel">
+                <div class="row g-3">
+                  <div class="col-md-12">
+                    <div class="card border shadow-sm">
+                      <div class="card-header bg-white">
+                        <h6 class="mb-0"><i class="fas fa-phone-alt me-2"></i>Contact Information</h6>
+                      </div>
+                      <div class="card-body">
+                        <div class="row g-3">
+                          <div class="col-md-12">
+                            <label class="form-label fw-medium">Section Title</label>
+                            <input type="text" name="contact_sectionTitle" class="form-control" placeholder="e.g. Visa & Immigration" required/>
+                          </div>
+                          <div class="col-md-12">
+                            <label class="form-label fw-medium">Help Text</label>
+                            <input type="text" name="contact_helpText" class="form-control" placeholder="e.g. Need Help?" required/>
+                          </div>
+                          <div class="col-md-4">
+                            <label class="form-label fw-medium">Phone Label</label>
+                            <input type="text" name="contact_phone_label" class="form-control" placeholder="Call Us" required />
+                            <label class="form-label fw-medium mt-2">Phone Number</label>
+                            <input type="text" name="contact_phone" class="form-control" placeholder="+009 438 222 9540" required />
+                          </div>
+                          <div class="col-md-4">
+                            <label class="form-label fw-medium">Email Label</label>
+                            <input type="text" name="contact_email_label" class="form-control" placeholder="Mail Us" required />
+                            <label class="form-label fw-medium mt-2">Email Address</label>
+                            <input type="email" name="contact_email" class="form-control" placeholder="info@example.com" required />
+                          </div>
+                          <div class="col-md-4">
+                            <label class="form-label fw-medium">Location Label</label>
+                            <input type="text" name="contact_location_label" class="form-control" placeholder="Location" required />
+                            <label class="form-label fw-medium mt-2">Address</label>
+                            <input type="text" name="contact_location" class="form-control" placeholder="City, Country" required />
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </form>
+        </div>
+
+        <div class="card-footer bg-light d-flex gap-2 justify-content-end">
+          <button type="button" class="btn btn-secondary" id="btnBackToList">
+            <i class="fas fa-arrow-left me-2"></i>Back to List
+          </button>
+          <button type="submit" form="formCountry" class="btn btn-primary">
+            <i class="fas fa-save me-2"></i>Save
+          </button>
+        </div>
+      </div>
+
+      <!-- View Info -->
+      <div class="card shadow-sm border-0 mb-4" id="viewContainer" style="display: none;">
+        <div class="card-header bg-white border-bottom">
+          <h6 class="mb-0">Country Information</h6>
+        </div>
+        <div class="card-body">
+          <div class="row g-3">
+            <div class="col-md-6">
+              <label class="form-label fw-medium">Country Name</label>
+              <div class="alert alert-light mb-0" id="view-name">-</div>
+            </div>
+            <div class="col-md-12">
+              <label class="form-label fw-medium">Services</label>
+              <div class="alert alert-light mb-0" id="view-services">-</div>
+            </div>
+            <div class="col-md-12">
+              <label class="form-label fw-medium">Description</label>
+              <div class="alert alert-light mb-0" id="view-description">-</div>
+            </div>
+            <div class="col-md-6">
+              <label class="form-label fw-medium">Phone</label>
+              <div class="alert alert-light mb-0" id="view-phone">-</div>
+            </div>
+            <div class="col-md-6">
+              <label class="form-label fw-medium">Email</label>
+              <div class="alert alert-light mb-0" id="view-email">-</div>
+            </div>
+          </div>
+        </div>
+        <div class="card-footer bg-light d-flex gap-2 justify-content-end">
+          <button type="button" class="btn btn-secondary" id="btnBackFromView">
+            <i class="fas fa-arrow-left me-2"></i>Back to List
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
     let countriesData = {};
 
-    function attachEventListeners() {
-        document.querySelectorAll(".btn-view-modern").forEach((btn) => {
-            btn.addEventListener("click", function () {
-                viewCountry(parseInt(this.getAttribute("data-id")));
-            });
-        });
+    // Image upload handler
+    function setupImageUploadHandlers() {
+        const imageInputs = ["fileFlagInput", "fileDetailMainInput", "fileGalleryInput1", "fileGalleryInput2"];
+        const previewMap = {
+            fileFlagInput: "preview_icon",
+            fileDetailMainInput: "preview_main_detail",
+            fileGalleryInput1: "preview_bannerImageGallery1",
+            fileGalleryInput2: "preview_bannerImageGallery2"
+        };
+        const inputMap = {
+            fileFlagInput: "icon_input",
+            fileDetailMainInput: "mainImage_detail",
+            fileGalleryInput1: "bannerImageGallery1",
+            fileGalleryInput2: "bannerImageGallery2"
+        };
 
-        document.querySelectorAll(".btn-edit-modern").forEach((btn) => {
-            btn.addEventListener("click", function () {
-                editCountry(parseInt(this.getAttribute("data-id")));
-            });
-        });
+        imageInputs.forEach((fileId) => {
+            const fileEl = document.getElementById(fileId);
+            if (!fileEl) return;
 
-        document.querySelectorAll(".btn-delete-modern").forEach((btn) => {
-            btn.addEventListener("click", function () {
-                deleteCountry(parseInt(this.getAttribute("data-id")));
+            fileEl.addEventListener("change", function () {
+                const file = this.files[0];
+                if (!file) return;
+
+                if (!file.type.startsWith('image/')) {
+                    showNotification('Please select a valid image file (JPG, PNG, GIF, etc.)', 'error');
+                    return;
+                }
+
+                // Show preview immediately with base64
+                const reader = new FileReader();
+                const previewId = previewMap[fileId];
+                const preview = document.getElementById(previewId);
+
+                reader.onload = function (e) {
+                    if (preview) {
+                        preview.src = e.target.result;
+                        preview.style.display = "block";
+                    }
+                };
+                reader.readAsDataURL(file);
+
+                if (typeof uploadImageToServer === "function") {
+                    uploadImageToServer(file, fileId, inputMap[fileId], previewId);
+                }
             });
         });
     }
 
+    function uploadImageToServer(file, fileId, inputId, previewId) {
+        const formData = new FormData();
+        formData.append('image', file);
+        formData.append('imageType', 'visa');
+
+        fetch('/admin/upload/image?imageType=visa', {
+            method: 'POST',
+            body: formData
+        })
+            .then(response => response.json())
+            .then(data => {
+                if (data.success) {
+                    const inputField = document.getElementById(inputId);
+                    if (inputField) {
+                        inputField.value = data.path || `/uploads/visa/${file.name}`;
+                    }
+                    // Update preview image
+                    const preview = document.getElementById(previewId);
+                    if (preview) {
+                        preview.src = data.path || `/uploads/visa/${file.name}`;
+                        preview.style.display = "block";
+                    }
+                } else {
+                    showNotification('Upload error: ' + (data.error || 'Unknown error'), 'error');
+                }
+            })
+            .catch(error => {
+                console.error('Upload failed:', error);
+                showNotification('Connection error: ' + error.message, 'error');
+            });
+    }
+
+    document.addEventListener("DOMContentLoaded", function () {
+        for (let i = 0; i < 7; i++) {
+            const fileInput = document.getElementById(`related_file_${i}`);
+            if (fileInput) {
+                fileInput.addEventListener("change", function () {
+                    const file = this.files[0];
+                    const urlInput = document.getElementById(`related_url_${i}`);
+                    const preview = document.getElementById(`related_preview_${i}`);
+
+                    if (file) {
+                        if (!file.type.startsWith('image/')) {
+                            showNotification('Please select a valid image file (JPG, PNG, GIF, etc.)', 'error');
+                            return;
+                        }
+
+                        // Show preview immediately with base64
+                        const reader = new FileReader();
+                        reader.onload = (e) => {
+                            if (preview) {
+                                preview.src = e.target.result;
+                                preview.style.display = "block";
+                            }
+                        };
+                        reader.readAsDataURL(file);
+
+                        const formData = new FormData();
+                        formData.append('image', file);
+                        formData.append('imageType', 'visa');
+
+                        fetch('/admin/upload/image?imageType=visa', {
+                            method: 'POST',
+                            body: formData
+                        })
+                            .then(response => response.json())
+                            .then(data => {
+                                if (data.success && urlInput) {
+                                    urlInput.value = data.path || `/uploads/visa/${file.name}`;
+                                    // Update preview with server path
+                                    if (preview) {
+                                        preview.src = data.path || `/uploads/visa/${file.name}`;
+                                    }
+                                }
+                            })
+                            .catch(error => {
+                                console.error('Upload failed:', error);
+                            });
+                    }
+                });
+            }
+        }
+        setupImageUploadHandlers();
+    });
+
     function showListView() {
         document.getElementById("tableContainer").style.display = "block";
         document.getElementById("formContainer").style.display = "none";
         document.getElementById("viewContainer").style.display = "none";
-        document.getElementById("cardHeader").style.display = "flex";
     }
 
     function showFormView() {
         document.getElementById("tableContainer").style.display = "none";
         document.getElementById("formContainer").style.display = "block";
         document.getElementById("viewContainer").style.display = "none";
-        document.getElementById("cardHeader").style.display = "none";
     }
 
     function showViewView() {
         document.getElementById("tableContainer").style.display = "none";
         document.getElementById("formContainer").style.display = "none";
         document.getElementById("viewContainer").style.display = "block";
-        document.getElementById("cardHeader").style.display = "none";
     }
 
     function viewCountry(countryId) {
         const country = countriesData[countryId];
         if (country) {
             document.getElementById("view-name").textContent = country.name || "-";
-            document.getElementById("view-services").textContent =
-                country.services.join(", ") || "-";
+            document.getElementById("view-services").textContent = country.services.join(", ") || "-";
 
             if (country.detailedView && country.detailedView.activeCountry) {
                 const details = country.detailedView.activeCountry;
-                document.getElementById("view-description").textContent =
-                    details.description || "-";
-                document.getElementById("view-phone").textContent =
-                    details.contactInfo?.phone?.value || "-";
-                document.getElementById("view-email").textContent =
-                    details.contactInfo?.email?.value || "-";
+                document.getElementById("view-description").textContent = details.description || "-";
+                document.getElementById("view-phone").textContent = details.contactInfo?.phone?.value || "-";
+                document.getElementById("view-email").textContent = details.contactInfo?.email?.value || "-";
             }
 
             showViewView();
         }
     }
 
-    function editCountry(countryId) {
-        const country = countriesData[countryId];
-        if (country) {
+    async function editCountry(countryId) {
+        try {
+            const response = await fetch(`/admin/visa/edit/${countryId}`);
+            const result = await response.json();
+
+            if (!result.success) {
+                showNotification('Error: ' + result.error, 'error');
+                return;
+            }
+
+            const country = result.country;
+
             document.getElementById("country_id").value = country.id;
             document.querySelector('input[name="name"]').value = country.name || "";
-            //   document.querySelector('input[name="slug"]').value = country.slug || "";
-            document.querySelector('input[name="icon"]').value = country.icon || "";
+            document.getElementById("icon_input").value = country.icon || "";
+            
+            // Update icon preview
+            if (country.icon) {
+                const iconPreview = document.getElementById("preview_icon");
+                if (iconPreview) {
+                    iconPreview.src = country.icon;
+                    iconPreview.style.display = "block";
+                }
+            }
 
-            const serviceInputs = document.querySelectorAll(
-                'input[name="services[]"]',
-            );
-            serviceInputs.forEach((input) => (input.value = ""));
-            country.services.forEach((service, index) => {
-                if (serviceInputs[index]) serviceInputs[index].value = service;
+            const serviceInputs = document.querySelectorAll('input[name="services[]"]');
+            serviceInputs.forEach(input => input.value = "");
+            if (country.services) {
+                country.services.forEach((service, index) => {
+                    if (serviceInputs[index]) serviceInputs[index].value = service;
+                });
+            }
+
+            const details = country.detailedView?.activeCountry;
+            if (details) {
+                document.querySelector('input[name="detail_title"]').value = details.title || "";
+                document.getElementById("mainImage_detail").value = details.mainImage || "";
+                
+                // Update preview for main image
+                if (details.mainImage) {
+                    const mainPreview = document.getElementById("preview_main_detail");
+                    if (mainPreview) {
+                        mainPreview.src = details.mainImage;
+                        mainPreview.style.display = "block";
+                    }
+                }
+                
+                document.querySelector('textarea[name="description"]').value = details.description || "";
+                document.querySelector('textarea[name="additionalInfo"]').value = details.additionalInfo || "";
+                document.querySelector('input[name="tagline"]').value = details.tagline || "";
+
+                if (details.visaTypes) {
+                    for(let i=1; i<=4; i++) {
+                        const typeIdx = Math.floor((i-1)/2);
+                        const itemIdx = (i-1) % 2;
+                        document.querySelector(`input[name="visa_title_${i}"]`).value = details.visaTypes[typeIdx]?.items[itemIdx]?.title || "";
+                        document.querySelector(`textarea[name="visa_desc_${i}"]`).value = details.visaTypes[typeIdx]?.items[itemIdx]?.description || "";
+                    }
+                }
+
+                document.querySelector('input[name="process_title"]').value = details.visaProcess?.title || "";
+                const stepTitles = document.querySelectorAll('input[name="step_title[]"]');
+                const stepDescs = document.querySelectorAll('textarea[name="step_desc[]"]');
+                stepTitles.forEach(i => i.value = "");
+                stepDescs.forEach(i => i.value = "");
+                if (details.visaProcess?.steps) {
+                    details.visaProcess.steps.forEach((step, index) => {
+                        if (stepTitles[index]) stepTitles[index].value = step.title || "";
+                        if (stepDescs[index]) stepDescs[index].value = step.description || "";
+                    });
+                }
+
+                const galleryData = details.gallery || [];
+                const galleryInputs = document.querySelectorAll('input[name="bannerImageGallery"]');
+                galleryInputs.forEach((input, index) => {
+                    input.value = galleryData[index] || "";
+                    
+                    // Update gallery preview images
+                    const previewId = `preview_bannerImageGallery${index + 1}`;
+                    const preview = document.getElementById(previewId);
+                    if (preview && galleryData[index]) {
+                        preview.src = galleryData[index];
+                        preview.style.display = "block";
+                    }
+                });
+
+                const categories = details.visaCategories;
+                document.querySelector('input[name="visa_categories_title"]').value = categories?.title || "";
+                const group1Inputs = document.querySelectorAll('input[name="category_group1[]"]');
+                const group2Inputs = document.querySelectorAll('input[name="category_group2[]"]');
+                if (categories && Array.isArray(categories.steps)) {
+                    const g1 = categories.steps[0];
+                    if (g1) {
+                        for (let i = 0; i <= 2; i++) {
+                            if (group1Inputs[i]) group1Inputs[i].value = g1[i] || "";
+                        }
+                    }
+                    const g2 = categories.steps[1];
+                    if (g2) {
+                        for (let i = 0; i <= 1; i++) {
+                            if (group2Inputs[i]) group2Inputs[i].value = g2[i] || "";
+                        }
+                    }
+                }
+
+                const serviceOptions = details.visaService;
+                document.querySelector('input[name="service_main_title"]').value = serviceOptions?.title || "";
+                const serviceStepTitles = document.querySelectorAll('input[name="service_step_title[]"]');
+                const serviceStepDescs = document.querySelectorAll('textarea[name="service_step_desc[]"]');
+                const servicesData = serviceOptions?.steps || [];
+                serviceStepTitles.forEach((inputEl, index) => {
+                    const stepData = servicesData[index];
+                    inputEl.value = stepData?.title || "";
+                    if (serviceStepDescs[index]) {
+                        serviceStepDescs[index].value = stepData?.description || "";
+                    }
+                });
+
+                const relatedCountries = country.detailedView?.relatedCountries || [];
+                const relatedNameInputs = document.querySelectorAll('input[name="related_name[]"]');
+                const relatedIconInputs = document.querySelectorAll('input[name="related_icon[]"]');
+                relatedNameInputs.forEach(input => input.value = "");
+                relatedIconInputs.forEach(input => input.value = "");
+                relatedCountries.forEach((country, index) => {
+                    if (index < 7) {
+                        if (relatedNameInputs[index]) relatedNameInputs[index].value = country.name || "";
+                        if (relatedIconInputs[index]) relatedIconInputs[index].value = country.icon || "";
+                        
+                        // Update related country preview images
+                        const preview = document.getElementById(`related_preview_${index}`);
+                        if (preview && country.icon) {
+                            preview.src = country.icon;
+                            preview.style.display = "block";
+                        }
+                    }
+                });
+
+                const contactInfo = country.detailedView?.contactInfo;
+                if (contactInfo) {
+                    document.querySelector('input[name="contact_sectionTitle"]').value = contactInfo.sectionTitle || "";
+                    document.querySelector('input[name="contact_helpText"]').value = contactInfo.helpText || "";
+                    document.querySelector('input[name="contact_phone_label"]').value = contactInfo.phone?.label || "";
+                    document.querySelector('input[name="contact_phone"]').value = contactInfo.phone?.value || "";
+                    document.querySelector('input[name="contact_email_label"]').value = contactInfo.email?.label || "";
+                    document.querySelector('input[name="contact_email"]').value = contactInfo.email?.value || "";
+                    document.querySelector('input[name="contact_location_label"]').value = contactInfo.location?.label || "";
+                    document.querySelector('input[name="contact_location"]').value = contactInfo.location?.address || "";
+                }
+            }
+
+            showFormView();
+
+        } catch (error) {
+            console.error("Error:", error);
+            showNotification('Cannot connect to server. Please try again.', 'error');
+        }
+    }
+
+    async function deleteCountry(countryId) {
+        const confirmModal = document.createElement('div');
+        confirmModal.id = 'deleteConfirmModal';
+        confirmModal.style.cssText = 'position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center; z-index: 9999;';
+        confirmModal.innerHTML = `
+            <div style="background: white; padding: 25px; border-radius: 8px; max-width: 380px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); border-left: 4px solid #d9534f;">
+                <h5 style="color: #d9534f; margin: 0 0 15px 0; font-size: 16px; font-weight: 600;">Delete Country</h5>
+                <p style="color: #666; margin-bottom: 25px; font-size: 14px; line-height: 1.5;">Are you sure you want to delete this country? This action cannot be undone.</p>
+                <div style="display: flex; gap: 10px; justify-content: flex-end;">
+                    <button class="cancelBtn" onclick="document.getElementById('deleteConfirmModal').remove()" style="padding: 10px 18px; border: 1px solid #ddd; background: #f5f5f5; color: #333; border-radius: 4px; cursor: pointer; font-weight: 500; font-size: 14px;">Cancel</button>
+                    <button class="deleteBtn" onclick="performDelete(${countryId})" style="padding: 10px 18px; background: #d9534f; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: 500; font-size: 14px;">Delete</button>
+                </div>
+            </div>
+        `;
+        document.body.appendChild(confirmModal);
+    }
+
+    async function performDelete(countryId) {
+        const confirmModal = document.getElementById('deleteConfirmModal');
+        const deleteBtn = confirmModal.querySelector('.deleteBtn');
+        const cancelBtn = confirmModal.querySelector('.cancelBtn');
+        
+        deleteBtn.disabled = true;
+        cancelBtn.disabled = true;
+        deleteBtn.style.opacity = '0.6';
+        deleteBtn.innerHTML = '<span style="display: inline-block; width: 12px; height: 12px; border: 2px solid white; border-top: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; margin-right: 5px;"></span>Deleting...';
+        
+        try {
+            const response = await fetch(`/admin/visa/delete/${countryId}`, {
+                method: 'DELETE',
+                headers: { 'Content-Type': 'application/json' }
             });
 
-            if (country.detailedView && country.detailedView.activeCountry) {
-                const details = country.detailedView.activeCountry;
-                document.querySelector('input[name="detail_title"]').value =
-                    details.title || "";
-                document.querySelector('textarea[name="description"]').value =
-                    details.description || "";
-                document.querySelector('input[name="contact_phone"]').value =
-                    details.contactInfo?.phone?.value || "";
-                document.querySelector('input[name="contact_email"]').value =
-                    details.contactInfo?.email?.value || "";
-            }
+            const result = await response.json();
 
-            const firstTab = document.querySelector(".nav-tabs-modern .nav-link");
-            bootstrap.Tab.getOrCreateInstance(firstTab).show();
-
-            showFormView();
-        }
-    }
-
-    function deleteCountry(countryId) {
-        const country = countriesData[countryId];
-        if (confirm(`Delete "${country.name}"?`)) {
-            const index = apiData.hero.summaryList.findIndex(
-                (c) => c.id === countryId,
-            );
-            if (index !== -1) {
-                apiData.hero.summaryList.splice(index, 1);
-                delete countriesData[countryId];
-                loadTableData();
-                alert("Deleted!");
-            }
-        }
-    }
-
-    document
-        .getElementById("btnAddCountry")
-        .addEventListener("click", function () {
-            document.getElementById("formCountry").reset();
-            document.getElementById("country_id").value = "";
-            const firstTab = document.querySelector(".nav-tabs-modern .nav-link");
-            bootstrap.Tab.getOrCreateInstance(firstTab).show();
-            showFormView();
-        });
-
-    document
-        .getElementById("btnBackToList")
-        .addEventListener("click", showListView);
-    document
-        .getElementById("btnBackFromView")
-        .addEventListener("click", showListView);
-
-    document
-        .getElementById("formCountry")
-        .addEventListener("submit", function (e) {
-            e.preventDefault();
-            const formData = new FormData(this);
-            const countryId = formData.get("country_id");
-            const services = Array.from(
-                document.querySelectorAll('input[name="services[]"]'),
-            )
-                .map((input) => input.value)
-                .filter((val) => val.trim());
-
-            const countryData = {
-                id: countryId ? parseInt(countryId) : Date.now(),
-                name: formData.get("name"),
-                icon: formData.get("icon"),
-                services: services,
-                detailedView: {
-                    activeCountry: {
-                        title: formData.get("detail_title"),
-                        mainImage: formData.get("mainImage"),
-                        description: formData.get("description"),
-                        additionalInfo: formData.get("additionalInfo"),
-                        tagline: formData.get("tagline"),
-                        contactInfo: {
-                            sectionTitle: formData.get("contact_sectionTitle"),
-                            phone: { value: formData.get("contact_phone") },
-                            email: { value: formData.get("contact_email") },
-                            location: { address: formData.get("contact_location") },
-                        },
-                    },
-                },
-            };
-
-            if (countryId) {
-                const index = apiData.hero.summaryList.findIndex(
-                    (c) => c.id === parseInt(countryId),
-                );
-                if (index !== -1) {
-                    apiData.hero.summaryList[index] = countryData;
-                    alert("Updated!");
-                }
+            if (result.success) {
+                confirmModal.remove();
+                showNotification(result.message || 'Country deleted successfully!', 'success');
+                setTimeout(() => location.reload(), 1500);
             } else {
-                apiData.hero.summaryList.push(countryData);
-                alert("Added!");
+                deleteBtn.disabled = false;
+                cancelBtn.disabled = false;
+                deleteBtn.style.opacity = '1';
+                deleteBtn.innerHTML = 'Delete';
+                showNotification('Error: ' + (result.error || 'Cannot delete this country'), 'error');
             }
 
-            loadTableData();
-            showListView();
+        } catch (error) {
+            console.error("Error:", error.message);
+            deleteBtn.disabled = false;
+            cancelBtn.disabled = false;
+            deleteBtn.style.opacity = '1';
+            deleteBtn.innerHTML = 'Delete';
+            showNotification('Connection error: ' + error.message, 'error');
+        }
+    }
+
+    document.getElementById("btnAddCountry").addEventListener("click", function () {
+        document.getElementById("formCountry").reset();
+        document.getElementById("country_id").value = "";
+
+        // Clear all preview images
+        document.getElementById("preview_icon").style.display = "none";
+        document.getElementById("preview_main_detail").style.display = "none";
+        document.getElementById("preview_bannerImageGallery1").style.display = "none";
+        document.getElementById("preview_bannerImageGallery2").style.display = "none";
+        
+        // Clear related countries previews
+        for (let i = 0; i < 7; i++) {
+            const preview = document.getElementById(`related_preview_${i}`);
+            if (preview) {
+                preview.style.display = "none";
+                preview.src = "";
+            }
+        }
+
+        const relatedNameInputs = document.querySelectorAll('input[name="related_name[]"]');
+        const relatedIconInputs = document.querySelectorAll('input[name="related_icon[]"]');
+        relatedNameInputs.forEach(input => input.value = "");
+        relatedIconInputs.forEach(input => input.value = "");
+
+        const contactFields = ["contact_sectionTitle", "contact_helpText", "contact_phone_label", "contact_phone", "contact_email_label", "contact_email", "contact_location_label", "contact_location"];
+        contactFields.forEach(fieldName => {
+            const field = document.querySelector(`input[name="${fieldName}"]`);
+            if (field) field.value = "";
         });
 
-    document.addEventListener("DOMContentLoaded", loadTableData);
+        showFormView();
+    });
+
+    document.getElementById("btnBackToList").addEventListener("click", showListView);
+    document.getElementById("btnBackFromView").addEventListener("click", showListView);
+
+    document.getElementById('formCountry').addEventListener('submit', async function (e) {
+        e.preventDefault();
+
+        // Validate required fields
+        const requiredInputs = document.querySelectorAll('#formCountry input[required], #formCountry textarea[required]');
+        let emptyFields = [];
+        
+        requiredInputs.forEach(input => {
+            if (!input.value || input.value.trim() === '') {
+                const label = input.parentElement.querySelector('.form-label')?.textContent || input.name;
+                emptyFields.push(label);
+            }
+        });
+        
+        if (emptyFields.length > 0) {
+            showNotification(`Please fill in all required fields: ${emptyFields.join(', ')}`, 'warning');
+            return;
+        }
+
+        const btnSave = document.querySelector('.btn-primary');
+        const countryId = document.getElementById("country_id").value;
+        const galleryArray = Array.from(document.querySelectorAll('input[name="bannerImageGallery"]'))
+            .map(input => input.value)
+            .filter(url => url.trim() !== "");
+        const serviceSteps = Array.from(document.querySelectorAll('input[name="service_step_title[]"]'))
+            .map((input, index) => {
+                const title = input.value.trim();
+                const description = document.querySelectorAll('textarea[name="service_step_desc[]"]')[index].value.trim();
+                return title ? { title, description } : null;
+            })
+            .filter(item => item !== null);
+
+        const payload = {
+            id: countryId || null,
+            name: document.querySelector('input[name="name"]').value,
+            icon: document.querySelector('input[name="icon"]').value,
+            services: Array.from(document.querySelectorAll('input[name="services[]"]')).map(i => i.value),
+            detailedView: {
+                activeCountry: {
+                    id: countryId || null,
+                    title: document.querySelector('input[name="detail_title"]').value,
+                    mainImage: document.getElementById('mainImage_detail').value || "",
+                    description: document.querySelector('textarea[name="description"]').value,
+                    additionalInfo: document.querySelector('textarea[name="additionalInfo"]').value,
+                    tagline: document.querySelector('input[name="tagline"]').value,
+                    visaTypes: [
+                        {
+                            items: [
+                                { title: document.querySelector('input[name="visa_title_1"]').value, description: document.querySelector('textarea[name="visa_desc_1"]').value },
+                                { title: document.querySelector('input[name="visa_title_2"]').value, description: document.querySelector('textarea[name="visa_desc_2"]').value }
+                            ]
+                        },
+                        {
+                            items: [
+                                { title: document.querySelector('input[name="visa_title_3"]').value, description: document.querySelector('textarea[name="visa_desc_3"]').value },
+                                { title: document.querySelector('input[name="visa_title_4"]').value, description: document.querySelector('textarea[name="visa_desc_4"]').value }
+                            ]
+                        }
+                    ],
+                    visaProcess: {
+                        title: document.querySelector('input[name="process_title"]').value,
+                        steps: Array.from(document.querySelectorAll('input[name="step_title[]"]')).map((input, index) => ({
+                            title: input.value,
+                            description: document.querySelectorAll('textarea[name="step_desc[]"]')[index].value
+                        }))
+                    },
+                    gallery: galleryArray,
+                    visaCategories: {
+                        title: document.querySelector('input[name="visa_categories_title"]').value,
+                        steps: [
+                            Array.from(document.querySelectorAll('input[name="category_group1[]"]')).map(input => input.value),
+                            Array.from(document.querySelectorAll('input[name="category_group2[]"]')).map(input => input.value)
+                        ]
+                    },
+                    visaService: {
+                        title: document.querySelector('input[name="service_main_title"]').value.trim(),
+                        steps: serviceSteps
+                    }
+                },
+                relatedCountries: Array.from({ length: 7 }).map((_, index) => ({
+                    name: document.querySelectorAll('input[name="related_name[]"]')[index]?.value || "",
+                    icon: document.getElementById(`related_url_${index}`)?.value || ""
+                })),
+                contactInfo: {
+                    sectionTitle: document.querySelector('input[name="contact_sectionTitle"]').value,
+                    helpText: document.querySelector('input[name="contact_helpText"]').value,
+                    phone: {
+                        label: document.querySelector('input[name="contact_phone_label"]').value,
+                        value: document.querySelector('input[name="contact_phone"]').value
+                    },
+                    email: {
+                        label: document.querySelector('input[name="contact_email_label"]').value,
+                        value: document.querySelector('input[name="contact_email"]').value
+                    },
+                    location: {
+                        label: document.querySelector('input[name="contact_location_label"]').value,
+                        address: document.querySelector('input[name="contact_location"]').value
+                    }
+                }
+            }
+        };
+
+        try {
+            btnSave.disabled = true;
+            btnSave.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Saving...';
+
+            const method = countryId ? 'PUT' : 'POST';
+            const url = countryId ? `/admin/visa/update/${countryId}` : '/admin/visa/add';
+
+            const response = await fetch(url, {
+                method: method,
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(payload)
+            });
+
+            const result = await response.json();
+
+            if (result.success) {
+                showNotification('Country saved successfully!', 'success');
+                setTimeout(() => location.reload(), 1500);
+            } else {
+                throw new Error(result.error || "Unknown error");
+            }
+        } catch (err) {
+            showNotification('Error: ' + err.message, 'error');
+        } finally {
+            btnSave.disabled = false;
+            btnSave.innerHTML = '<i class="fas fa-save me-2"></i>Save';
+        }
+    });
 </script>
\ No newline at end of file
diff --git a/views/layouts/admin.ejs b/views/layouts/admin.ejs
index e740d1b..b132781 100644
--- a/views/layouts/admin.ejs
+++ b/views/layouts/admin.ejs
@@ -84,6 +84,9 @@
             <li class="nav-item">
               <a class="nav-link" href="/admin/blog">Blog</a>
             </li>
+            <li class="nav-item">
+              <a class="nav-link" href="/admin/visa">Visa</a>
+            </li>
             <li class="nav-item">
               <a class="nav-link" href="/admin/blog-category">Blog Category</a>
             </li>
diff --git a/views/layouts/main.ejs b/views/layouts/main.ejs
index a85e09a..1345671 100644
--- a/views/layouts/main.ejs
+++ b/views/layouts/main.ejs
@@ -772,6 +772,10 @@
             <a class="nav-link <%= currentPath === '/admin/blog' ? 'active' : '' %>"
               href="/admin/blog">Blog</a>
           </li>
+          <li class="nav-item">
+            <a class="nav-link <%= currentPath === '/admin/visa' ? 'active' : '' %>"
+              href="/admin/visa">Visa</a>
+          </li>
           <li class="nav-item">
             <a class="nav-link <%= currentPath === '/admin/contact' ? 'active' : '' %>" 
               href="/admin/contact">Contact Us</a>