// import React, { useState, useEffect } from "react";
// import Spinner from "../../UIComponants/Spinner";
// import "../Dashboard/CSS/CSS/MenuMaitenance.css";
// import { Table, Pagination, PaginationItem, PaginationLink } from "reactstrap";
// import { BsJournals } from "react-icons/bs";
// import {
//   Button,
//   Dropdown,
//   Modal,
//   Form,
//   Row,
//   Col,
//   InputGroup,
//   FormControl,
//   OverlayTrigger,
//   Tooltip,
// } from "react-bootstrap";
// import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
// import { FaSearch } from "react-icons/fa";
// import { faEdit, faTrashAlt } from "@fortawesome/free-solid-svg-icons";
// import { addSubmenuItem } from "../../APIServices/MenuMaintenanceAPI";
// import { toast } from "react-toastify";
// const SubMenuMaintenance = ({ selectedMainMenuId }) => {
//   const [recordsPerPage, setRecordsPerPage] = useState(10);
//   const [currentPage, setCurrentPage] = useState(1);
//   const [subMenu, setSubMenu] = useState([]);
//   const [modalAdd, setModalAdd] = useState(false);
//   const [modalDelete, setModalDelete] = useState(false);
//   const [modalEdit, setModalEdit] = useState(false);
//   const [loading, setLoading] = useState(false);
//   const [rowSelected, setRowSelected] = useState({});

//   const [entryForm, setEntryForm] = useState({
//     menuId: selectedMainMenuId,
//     menuItemDesc: "",
//     itemSeq: "",
//     moduleName: "",
//     status: "Enable",
//     main_menu_action_name: "",
//   });
//   const [data, setData] = useState([]);

//   const [visibleColumns, setVisibleColumns] = useState({
//   menuItemId: true,
//   menuItemDesc: true,
//   itemSeq: true,
// });

//   const [isSubMenu, setIsSubMenu] = useState(false);
//   const [searchQuery, setSearchQuery] = useState("");
//   const [menuItems, setMenuItems] = useState([]);
//   const [slicedSubMenus, setSlicedSubMenus] = useState([]);
//   const [currentMenuItem, setCurrentMenuItem] = useState({});
//   const [subMenuItems, setSubMenuItems] = useState([]);

//   useEffect(() => {
//     // Simulate loading data
//     setTimeout(() => {
//       setLoading(false);
//     }, 3000); // Simulated 3 seconds loading
//   }, []);

//   useEffect(() => {
//     if (selectedMainMenuId) {
//       setEntryForm((prev) => ({ ...prev, menuId: selectedMainMenuId }));
//     }
//   }, [selectedMainMenuId]);

//   useEffect(() => {
//     const filteredSubMenus = subMenu
//       .filter(
//         (submenu) =>
//           submenu.menuItemDesc &&
//           submenu.menuItemDesc.toLowerCase().includes(searchQuery.toLowerCase())
//       )
//       .slice((currentPage - 1) * recordsPerPage, currentPage * recordsPerPage);

//     setSlicedSubMenus(filteredSubMenus);
//   }, [subMenu, searchQuery, currentPage, recordsPerPage]);

//   const handleInputChange = (e) => {
//     const { name, value } = e.target;
//     setEntryForm((prev) => ({ ...prev, [name]: value }));
//   };

//   const handleRowChange = (e) => {
//     const { name, value } = e.target;
//     setRowSelected((prev) => ({ ...prev, [name]: value }));
//   };

//   const handleSearch = (query) => {
//     setSearchQuery(query);
//   };

//   // const goToAdd = () => {
//   //   setEntryForm((prev) => ({
//   //     ...prev,
//   //     menuId: selectedMainMenuId, // Set the main menu ID
//   //   }));
//   //   setModalAdd(true);
//   // };

//   const goToAdd = () => {
//     console.log("selectedMainMenuId:", selectedMainMenuId); // Debugging line
//     if (!selectedMainMenuId) {
//       toast.error("Please select a main menu item first.");
//       return;
//     }
//     setEntryForm((prev) => ({
//       ...prev,
//       menuId: selectedMainMenuId,
//     }));
//     setModalAdd(true);
//   };
  
  
//   const onSubmit = async (event) => {
//     event.preventDefault();

//     // Include menuId in the form data
//     const formData = {
//       menuItemDesc: entryForm.menuItemDesc,
//     };

//     try {
//       // Pass menuId as a string
//       const data = await addSubmenuItem(
//         selectedMainMenuId.toString(),
//         formData
//       );
//       toast.success("Submenu item added successfully!");
//       console.log("Submenu item added successfully:", data);
//       // Handle successful submission, e.g., close modal, refresh data, etc.
//       setModalAdd(false);
//     } catch (error) {
//       console.error("Error adding submenu item:", error);
//       toast.error(
//         "Unexpected error: " +
//           (error.message || "Server error occurred. Please try again.")
//       );
//       // Handle error, e.g., show a message to the user
//     }
//   };

//   const goToEdit = (user) => {
//     setRowSelected(user);
//     setEntryForm({
//       menuId: user.menuId,
//       menuItemDesc: user.menuItemDesc,
//     });
//     setModalEdit(true);
//   };

//   const onUpdate = (e) => {
//     e.preventDefault();

//     // Prepare the updated entry from the form
//     const updatedEntry = {
//       menuId: entryForm.menuId,
//       menuItemDesc: entryForm.menuItemDesc,
//       // Add other fields as needed
//     };

//     // Find the index of the subMenu to update
//     const index = slicedSubMenus.findIndex(
//       (subMenu) => subMenu.menuId === updatedEntry.menuId
//     );

//     if (index !== -1) {
//       // Update the subMenu in the state
//       const updatedSubMenus = [...slicedSubMenus];
//       updatedSubMenus[index] = updatedEntry;

//       // Update the state with the new subMenus list
//       setSlicedSubMenus(updatedSubMenus);

//       // Close the modal after updating
//       setModalEdit(false);
//     }
//   };

//   const onDelete = (user) => {
//     setRowSelected(user);
//     setModalDelete(true);
//   };

//   const confirmDelete = () => {
//     // Logic to delete
//     console.log("Deleted:", rowSelected);
//     setModalDelete(false);
//   };

//   // pagination
//   const toggleColumn = (column) => {
//     setVisibleColumns((prev) => ({
//       ...prev,
//       [column]: !prev[column],
//     }));
//   };

//   const totalPages = Math.ceil(subMenu.length / recordsPerPage);
//   const handlePageChange = (pageNumber) => {
//     setCurrentPage(pageNumber);
//   };
//   const handleRecordsPerPageChange = (number) => {
//     setRecordsPerPage(number);
//   };
//   return (
//     <div style={{ marginTop: "7rem" }}>
//       {loading ? (
//         <Spinner />
//       ) : (
//         <div className="submenu-maintenance">
//           {/* Header */}
//           <div className="row mt-3">
//             <div className="col-md-8">
//               <h3 className=" d-inline title_main">Sub-Menu Maintenance</h3>
//               <span className="badge bg-primary ms-3">Sub Menu</span>
//             </div>
//           </div>

//           <Row className="align-items-center my-3">
//             {/* Left: Search Bar */}
//             <Col
//               xs={12}
//               md={8}
//               lg={6}
//               className="d-flex justify-content-center my-3"
//             >
//               <InputGroup
//                 className="search-bar"
//                 style={{
//                   borderRadius: "10px",
//                   overflow: "hidden",
//                   boxShadow: "0px 4px 12px rgba(0, 0, 0, 0.1)",
//                   width: "100%",
//                   maxWidth: "528px", // Set max-width to limit overall width
//                   paddingRight: "-15px", // Increase padding on the right side
//                 }}
//               >
//                 <InputGroup.Text
//                   style={{
//                     backgroundColor: "#0E6591",
//                     color: "#fff",
//                     padding: "10px 15px",
//                   }}
//                 >
//                   <FaSearch />
//                 </InputGroup.Text>
//                 <FormControl
//                   placeholder="Search"
//                   value={searchQuery}
//                   onChange={(e) => handleSearch(e.target.value)}
//                   style={{
//                     padding: "10px",
//                     border: "none",
//                     paddingRight: "5px", // More space on the right side of input field
//                   }}
//                 />
//               </InputGroup>
//             </Col>
//             <Col xs={12} md={4} lg={6} className="d-flex justify-content-end">
//               <div className="col-md-4 text-end">
//                 <button className="btn btn-primary" onClick={goToAdd}>
//                   <i className="bi bi-plus"></i> ADD
//                 </button>
//               </div>
//             </Col>
//           </Row>

//           <div className="table-responsive">
//             <Table
//               striped
//               responsive
//               hover
//               align="middle"
//               className="table-flush shadow-sm"
//             >
//               <thead className="custom_header">
//                 <tr>
//                   <th>No</th>
//                   {Object.entries(visibleColumns).map(
//                     (
//                       [key, visible]) =>
//                       visible && (
//                         <th key={key}>
//                           {key.charAt(0).toUpperCase() + key.slice(1)}
//                         </th>
//                       )
//                   )}
//                   <th>Actions</th>
//                 </tr>
//               </thead>
//               <tbody className="tbody">
//                 {slicedSubMenus.length === 0 ? (
//                   <tr>
//                     <td
//                       colSpan={
//                         1 + // For the "No" column
//                         Object.keys(visibleColumns).filter(
//                           (key) => visibleColumns[key]
//                         ).length +
//                         (isSubMenu ? 1 : 2)
//                       }
//                       className="text-center"
//                     >
//                       No menu items found. Please add new items.
//                     </td>
//                   </tr>
//                 ) : (
//                   slicedSubMenus.map((subMenu, index) => (
//                     <tr key={index}>
//                       <td>{index + 1}</td>
//                       {Object.keys(visibleColumns).map(
//                         (key) =>
//                           visibleColumns[key] && (
//                             <td key={key}>
//                               {key === "status" ? (
//                                 <span
//                                   className="status"
//                                   style={{
//                                     color: subMenu.status ? "green" : "red",
//                                     backgroundColor: subMenu.status
//                                       ? "#d4f7d4"
//                                       : "#f7d4d4",
//                                     padding: "4px 8px",
//                                     borderRadius: "4px",
//                                     display: "inline-block",
//                                   }}
//                                 >
//                                   {subMenu.status ? "Enabled" : "Disabled"}
//                                 </span>
//                               ) : (
//                                 subMenu[key]
//                               )}
//                             </td>
//                           )
//                       )}
//                       <td className="text-center">
//                         <FontAwesomeIcon
//                           icon={faEdit}
//                           onClick={() => goToEdit(subMenu)}
//                           style={{
//                             cursor: "pointer",
//                             fontSize: "1rem",
//                             color: "green",
//                             marginRight: "15px",
//                           }}
//                         />
//                         <FontAwesomeIcon
//                           icon={faTrashAlt}
//                           onClick={() => onDelete(subMenu)}
//                           style={{
//                             cursor: "pointer",
//                             fontSize: "1rem",
//                             color: "#dc3545",
//                           }}
//                         />
//                       </td>
//                     </tr>
//                   ))
//                 )}
//               </tbody>
//             </Table>
//           </div>

//           {/* Manage Columns & Records Per Page */}
//           <Row className="mt-4">
//             <Col md={6} className="d-flex justify-content-start">
//               <Dropdown>
//                 <Dropdown.Toggle
//                   variant="outline-primary"
//                   className="custom_manage_column_button"
//                 >
//                   Manage Columns
//                 </Dropdown.Toggle>
//                 <Dropdown.Menu>
//                   {Object.keys(visibleColumns).map((column) => (
//                     <Dropdown.Item
//                       key={column}
//                       onClick={() => toggleColumn(column)}
//                     >
//                       <Form.Check
//                         type="checkbox"
//                         label={
//                           column.charAt(0).toUpperCase() +
//                           column.slice(1).toLowerCase()
//                         }
//                         checked={visibleColumns[column]}
//                         readOnly
//                         className="custom-checkbox"
//                       />
//                     </Dropdown.Item>
//                   ))}
//                 </Dropdown.Menu>
//               </Dropdown>
//             </Col>

//             <Col md={6} className="d-flex justify-content-end">
//               <Dropdown>
//                 <Dropdown.Toggle
//                   variant="outline-primary"
//                   className="custom_manage_column_button px-4 py-2 border-2 rounded-3 shadow-sm"
//                   id="dropdown-custom-components"
//                 >
//                   <BsJournals />
//                 </Dropdown.Toggle>
//                 <Dropdown.Menu
//                   className="border-0 rounded-3 shadow-lg"
//                   align="end"
//                 >
//                   {[1, 5, 10, 20, 50].map((number) => (
//                     <Dropdown.Item
//                       key={number}
//                       onClick={() => handleRecordsPerPageChange(number)}
//                       className="text-dark d-flex justify-content-between align-items-center"
//                     >
//                       <span>{number}</span>
//                       <i
//                         className="fa fa-check-circle"
//                         style={{
//                           display:
//                             recordsPerPage === number ? "inline" : "none",
//                         }}
//                       />
//                     </Dropdown.Item>
//                   ))}
//                 </Dropdown.Menu>
//               </Dropdown>
//             </Col>
//           </Row>

//           <Pagination className="pagination">
//             <PaginationItem disabled={currentPage === 1}>
//               <PaginationLink
//                 previous
//                 onClick={() => handlePageChange(currentPage - 1)}
//               />
//             </PaginationItem>
//             {[...Array(totalPages)].map((_, index) => (
//               <PaginationItem key={index} active={index + 1 === currentPage}>
//                 <PaginationLink
//                   onClick={() => handlePageChange(index + 1)}
//                   style={{ color: "#0b6592" }}
//                 >
//                   {index + 1}
//                 </PaginationLink>
//               </PaginationItem>
//             ))}
//             <PaginationItem disabled={currentPage === totalPages}>
//               <PaginationLink
//                 next
//                 onClick={() => handlePageChange(currentPage + 1)}
//               />
//             </PaginationItem>
//           </Pagination>

//           {/* Modals */}
//           {modalAdd && (
//             <div className="modal fade show d-block" tabIndex="-1">
//               <div className="modal-dialog">
//                 <div className="modal-content">
//                   <div className="modal-header">
//                     <h5 className="modal-title">Add Sub-Menu</h5>
//                     <button
//                       type="button"
//                       className="btn-close"
//                       onClick={() => setModalAdd(false)}
//                     ></button>
//                   </div>
//                   <div className="modal-body">
//                     <form onSubmit={onSubmit}>
//                       <input
//                         type="text"
//                         className="form-control mb-2"
//                         name="menuId"
//                         placeholder="Menu ID"
//                         value={entryForm.menuId || selectedMainMenuId}
//                         onChange={handleInputChange}
//                         readOnly
//                       />

//                       <input
//                         type="text"
//                         className="form-control mb-2"
//                         name="menuItemDesc"
//                         placeholder="Menu Item Name"
//                         value={entryForm.menuItemDesc}
//                         onChange={handleInputChange}
//                       />
//                       <button type="submit" className="btn btn-primary">
//                         Add
//                       </button>
//                     </form>
//                   </div>
//                 </div>
//               </div>
//             </div>
//           )}

//           {modalEdit && (
//             <div className="modal fade show d-block" tabIndex="-1">
//               <div className="modal-dialog">
//                 <div className="modal-content">
//                   <div className="modal-header">
//                     <h5 className="modal-title">Edit Sub-Menu</h5>
//                     <button
//                       type="button"
//                       className="btn-close"
//                       onClick={() => setModalEdit(false)}
//                     ></button>
//                   </div>
//                   <div className="modal-body">
//                     <form onSubmit={onUpdate}>
//                       <input
//                         type="text"
//                         className="form-control mb-2"
//                         name="menuId"
//                         placeholder="Menu ID"
//                         value={entryForm.menuId}
//                         onChange={handleInputChange}
//                       />
//                       <input
//                         type="text"
//                         className="form-control mb-2"
//                         name="menuItemDesc"
//                         placeholder="Menu Item Name"
//                         value={entryForm.menuItemDesc}
//                         onChange={handleInputChange}
//                       />
//                       <button type="submit" className="btn btn-primary">
//                         Update
//                       </button>
//                     </form>
//                   </div>
//                 </div>
//               </div>
//             </div>
//           )}
//         </div>
//       )}
//     </div>
    
//   );
// };

// export default SubMenuMaintenance;

// export default SubMenuMaintenance;
// import React, { useEffect, useState } from "react";
// import { useParams } from "react-router-dom";
// import {
//   getSubmenuItems,
//   addSubmenuItem,
//   deleteMenuItem
// } from "../../APIRequestService/APIService";
// import { Table, Button, Form } from "react-bootstrap";
// import { toast } from "react-toastify";

// const SubMenuMaintenance = () => {
//   const { menuItemId } = useParams();

//   const [subMenus, setSubMenus] = useState([]);

//   const [newItem, setNewItem] = useState({
//     menuId: menuItemId,
//     menuItemName: "",
//     sequence: "",
//     moduleName: "",
//     status: "",
//     menuActionLink: ""
//   });

//   useEffect(() => {
//     const fetchData = async () => {
//       try {
//         const data = await getSubmenuItems(menuItemId);
//         console.log("Fetched submenu data:", data);

//         if (Array.isArray(data)) {
//           setSubMenus(data);
//         } else if (Array.isArray(data?.data)) {
//           setSubMenus(data.data);
//         } else {
//           setSubMenus([]);
//           toast.error("Invalid submenu data received from API");
//           console.error("Invalid submenu response:", data);
//         }
//       } catch (err) {
//         toast.error("Failed to fetch submenu items");
//         console.error("Fetch submenu error:", err);
//       }
//     };

//     fetchData();
//   }, [menuItemId]);

//   const handleAdd = async () => {
//     try {
//       const added = await addSubmenuItem(menuItemId, newItem);
//       setSubMenus((prev) => [...prev, added]);
//       setNewItem({
//         menuId: menuItemId,
//         menuItemName: "",
//         sequence: "",
//         moduleName: "",
//         status: "",
//         menuActionLink: ""
//       });
//       toast.success("Submenu added");
//     } catch (err) {
//       toast.error("Failed to add submenu");
//       console.error("Add submenu error:", err);
//     }
//   };

//   const handleDelete = async (id) => {
//     try {
//       await deleteMenuItem(id);
//       setSubMenus((prev) => prev.filter((item) => item.id !== id));
//       toast.success("Deleted submenu");
//     } catch (err) {
//       toast.error("Delete failed");
//       console.error("Delete submenu error:", err);
//     }
//   };

//   return (
//     <div className="p-4">
//       <h2>Sub-Menu Maintenance</h2>

//       <Form className="d-flex flex-column gap-2 my-3">
//         <Form.Control
//           placeholder="Menu Item Name"
//           value={newItem.menuItemName}
//           onChange={(e) =>
//             setNewItem({ ...newItem, menuItemName: e.target.value })
//           }
//         />
//         <Form.Control
//           placeholder="Sequence"
//           value={newItem.sequence}
//           onChange={(e) =>
//             setNewItem({ ...newItem, sequence: e.target.value })
//           }
//         />
//         <Form.Control
//           placeholder="Module Name"
//           value={newItem.moduleName}
//           onChange={(e) =>
//             setNewItem({ ...newItem, moduleName: e.target.value })
//           }
//         />
//         <Form.Select
//           value={newItem.status}
//           onChange={(e) =>
//             setNewItem({ ...newItem, status: e.target.value })
//           }
//         >
//           <option value="">Select Status</option>
//           <option value="Active">Active</option>
//           <option value="Inactive">Inactive</option>
//         </Form.Select>
//         <Form.Control
//           placeholder="Menu Action Link"
//           value={newItem.menuActionLink}
//           onChange={(e) =>
//             setNewItem({ ...newItem, menuActionLink: e.target.value })
//           }
//         />
//         <Button onClick={handleAdd}>Add</Button>
//       </Form>

//       <Table striped bordered hover>
//         <thead>
//           <tr>
//             <th>Menu Item Name</th>
//             <th>Sequence</th>
//             <th>Module Name</th>
//             <th>Status</th>
//             <th>Menu Action Link</th>
//             <th>Actions</th>
//           </tr>
//         </thead>
//         <tbody>
//           {Array.isArray(subMenus) &&
//             subMenus.map((item, idx) => (
//               <tr key={idx}>
//                 <td>{item.menuItemName}</td>
//                 <td>{item.sequence}</td>
//                 <td>{item.moduleName}</td>
//                 <td>{item.status}</td>
//                 <td>{item.menuActionLink}</td>
//                 <td>
//                   <Button
//                     variant="danger"
//                     size="sm"
//                     onClick={() => handleDelete(item.id)}
//                   >
//                     Delete
//                   </Button>
//                 </td>
//               </tr>
//             ))}
//         </tbody>
//       </Table>
//     </div>
//   );
// };

// export default SubMenuMaintenance;




// import React, { useEffect, useState } from "react";
// import { useParams } from "react-router-dom";
// import {
//   getSubmenuItems,
//   addSubmenuItem,
//   updateMenuItem,
//   deleteMenuItem
// } from '../../APIRequestService/APIService';
// import { Table, Button, Form } from "react-bootstrap";
// import { toast } from "react-toastify";

// const SubMenuMaintenance = () => {
//   const { menuItemId } = useParams();
//   const [subMenus, setSubMenus] = useState([]);
//   const [newItem, setNewItem] = useState({ itemSeq: "", menuItemDesc: "" });

//   useEffect(() => {
//     const fetchData = async () => {
//       try {
//         const data = await getSubmenuItems(menuItemId);
//         setSubMenus(data);
//       } catch (err) {
//         toast.error("Failed to fetch submenu items");
//       }
//     };

//     fetchData();
//   }, [menuItemId]);

//   const handleAdd = async () => {
//     try {
//       const added = await addSubmenuItem(menuItemId, newItem);
//       setSubMenus((prev) => [...prev, added]);
//       setNewItem({ itemSeq: "", menuItemDesc: "" });
//       toast.success("Submenu added");
//     } catch (err) {
//       toast.error("Failed to add submenu");
//     }
//   };

//   const handleDelete = async (id) => {
//     try {
//       await deleteMenuItem(id);
//       setSubMenus((prev) => prev.filter((item) => item.id !== id));
//       toast.success("Deleted submenu");
//     } catch (err) {
//       toast.error("Delete failed");
//     }
//   };
// useEffect(() => {
//   const fetchData = async () => {
//     try {
//       const data = await getSubmenuItems(menuItemId);
//       console.log("Fetched submenu data from API:", data); // <-- This will print the API response

//       if (Array.isArray(data)) {
//         setSubMenus(data);
//       } else if (Array.isArray(data?.data)) {
//         setSubMenus(data.data);
//       } else {
//         setSubMenus([]);
//         toast.error("Invalid submenu data received from API");
//         console.error("Invalid submenu response:", data);
//       }
//     } catch (err) {
//       toast.error("Failed to fetch submenu items");
//       console.error("Fetch submenu error:", err);
//     }
//   };

//   fetchData();
// }, [menuItemId]);

//   return (
//     <div className="p-4">
//       <h2>Sub-Menu Maintenance</h2>

//       <Form className="d-flex gap-2 my-3">
//         <Form.Control
//           placeholder="Item Seq"
//           value={newItem.itemSeq}
//           onChange={(e) => setNewItem({ ...newItem, itemSeq: e.target.value })}
//         />
//         <Form.Control
//           placeholder="Menu Item Desc"
//           value={newItem.menuItemDesc}
//           onChange={(e) => setNewItem({ ...newItem, menuItemDesc: e.target.value })}
//         />
//         <Button onClick={handleAdd}>Add</Button>
//       </Form>

//       <Table striped bordered hover>
//         <thead>
//           <tr>
//             <th>Item Seq</th>
//             <th>Description</th>
//             <th>Actions</th>
//           </tr>
//         </thead>
//         <tbody>
//           {subMenus.map((item, idx) => (
//             <tr key={idx}>
//               <td>{item.itemSeq}</td>
//               <td>{item.menuItemDesc}</td>
//               <td>
//                 <Button variant="danger" size="sm" onClick={() => handleDelete(item.id)}>Delete</Button>
//               </td>
//             </tr>
//           ))}
//         </tbody>
//       </Table>
//     </div>
//   );
// };


// import React, { useEffect, useState } from "react";
// import { useParams } from "react-router-dom";
// import {
//   getSubmenuItems,
//   addSubmenuItem,
//   deleteMenuItem
// } from "../../APIRequestService/APIService";
// import { Table, Button, Form } from "react-bootstrap";
// import { toast } from "react-toastify";

// const SubMenuMaintenance = () => {
//   const { menuItemId } = useParams();

//   const [subMenus, setSubMenus] = useState([]);

//   const [newItem, setNewItem] = useState({
//     menuId: menuItemId,
//     menuItemName: "",
//     sequence: "",
//     moduleName: "",
//     status: "",
//     menuActionLink: ""
//   });

//   useEffect(() => {
//     const fetchData = async () => {
//       try {
//         const data = await getSubmenuItems(menuItemId);
//         console.log("Fetched submenu data:", data);

//         if (Array.isArray(data)) {
//           setSubMenus(data);
//         } else if (Array.isArray(data?.data)) {
//           setSubMenus(data.data);
//         } else {
//           setSubMenus([]);
//           toast.error("Invalid submenu data received from API");
//           console.error("Invalid submenu response:", data);
//         }
//       } catch (err) {
//         toast.error("Failed to fetch submenu items");
//         console.error("Fetch submenu error:", err);
//       }
//     };

//     fetchData();
//   }, [menuItemId]);

//   const handleAdd = async () => {
//     try {
//       const added = await addSubmenuItem(menuItemId, newItem);
//       setSubMenus((prev) => [...prev, added]);
//       setNewItem({
//         menuId: menuItemId,
//         menuItemName: "",
//         sequence: "",
//         moduleName: "",
//         status: "",
//         menuActionLink: ""
//       });
//       toast.success("Submenu added");
//     } catch (err) {
//       toast.error("Failed to add submenu");
//       console.error("Add submenu error:", err);
//     }
//   };

//   const handleDelete = async (id) => {
//     try {
//       await deleteMenuItem(id);
//       setSubMenus((prev) => prev.filter((item) => item.id !== id));
//       toast.success("Deleted submenu");
//     } catch (err) {
//       toast.error("Delete failed");
//       console.error("Delete submenu error:", err);
//     }
//   };

//   return (
//     <div className="p-4">
//       <h2>Sub-Menu Maintenance</h2>

//       <Form className="d-flex flex-column gap-2 my-3">
//         <Form.Control
//           placeholder="Menu Item Name"
//           value={newItem.menuItemName}
//           onChange={(e) =>
//             setNewItem({ ...newItem, menuItemName: e.target.value })
//           }
//         />
//         <Form.Control
//           placeholder="Sequence"
//           value={newItem.sequence}
//           onChange={(e) =>
//             setNewItem({ ...newItem, sequence: e.target.value })
//           }
//         />
//         <Form.Control
//           placeholder="Module Name"
//           value={newItem.moduleName}
//           onChange={(e) =>
//             setNewItem({ ...newItem, moduleName: e.target.value })
//           }
//         />
//         <Form.Select
//           value={newItem.status}
//           onChange={(e) =>
//             setNewItem({ ...newItem, status: e.target.value })
//           }
//         >
//           <option value="">Select Status</option>
//           <option value="Active">Active</option>
//           <option value="Inactive">Inactive</option>
//         </Form.Select>
//         <Form.Control
//           placeholder="Menu Action Link"
//           value={newItem.menuActionLink}
//           onChange={(e) =>
//             setNewItem({ ...newItem, menuActionLink: e.target.value })
//           }
//         />
//         <Button onClick={handleAdd}>Add</Button>
//       </Form>

//       <Table striped bordered hover>
//         <thead>
//           <tr>
//             <th>Menu Item Name</th>
//             <th>Sequence</th>
//             <th>Module Name</th>
//             <th>Status</th>
//             <th>Menu Action Link</th>
//             <th>Actions</th>
//           </tr>
//         </thead>
//         <tbody>
//           {Array.isArray(subMenus) &&
//             subMenus.map((item, idx) => (
//               <tr key={idx}>
//                 <td>{item.menuItemName}</td>
//                 <td>{item.sequence}</td>
//                 <td>{item.moduleName}</td>
//                 <td>{item.status}</td>
//                 <td>{item.menuActionLink}</td>
//                 <td>
//                   <Button
//                     variant="danger"
//                     size="sm"
//                     onClick={() => handleDelete(item.id)}
//                   >
//                     Delete
//                   </Button>
//                 </td>
//               </tr>
//             ))}
//         </tbody>
//       </Table>
//     </div>
//   );
// };

// export default SubMenuMaintenance;



// import React, { useEffect, useState } from "react";
// import { useParams } from "react-router-dom";
// import {
//   getSubmenuItems,
//   addSubmenuItem,
//   updateMenuItem,
//   deleteMenuItem
// } from '../../APIRequestService/APIService'; // ✅ must match where you exported them
// import { Table, Button, Form } from "react-bootstrap";
// import { toast } from "react-toastify";

// const SubMenuMaintenance = () => {
//   const { menuItemId } = useParams();
//   const [subMenus, setSubMenus] = useState([]);
//   const [newItem, setNewItem] = useState({ itemSeq: "", menuItemDesc: "" });

//   useEffect(() => {
//     const fetchData = async () => {
//       try {
//         const data = await getSubmenuItems(menuItemId);
//         setSubMenus(data);
//       } catch (err) {
//         toast.error("Failed to fetch submenu items");
//       }
//     };

//     fetchData();
//   }, [menuItemId]);

//   const handleAdd = async () => {
//     try {
//       const added = await addSubmenuItem(menuItemId, newItem);
//       setSubMenus((prev) => [...prev, added]);
//       setNewItem({ itemSeq: "", menuItemDesc: "" });
//       toast.success("Submenu added");
//     } catch (err) {
//       toast.error("Failed to add submenu");
//     }
//   };

//   const handleDelete = async (id) => {
//     try {
//       await deleteMenuItem(id);
//       setSubMenus((prev) => prev.filter((item) => item.id !== id));
//       toast.success("Deleted submenu");
//     } catch (err) {
//       toast.error("Delete failed");
//     }
//   };

//   return (
//     <div className="p-4">
//       <h2>Sub-Menu Maintenance</h2>

//       <Form className="d-flex gap-2 my-3">
//         <Form.Control
//           placeholder="Item Seq"
//           value={newItem.itemSeq}
//           onChange={(e) => setNewItem({ ...newItem, itemSeq: e.target.value })}
//         />
//         <Form.Control
//           placeholder="Menu Item Desc"
//           value={newItem.menuItemDesc}
//           onChange={(e) => setNewItem({ ...newItem, menuItemDesc: e.target.value })}
//         />
//         <Button onClick={handleAdd}>Add</Button>
//       </Form>

//       <Table striped bordered hover>
//         <thead>
//           <tr>
//             <th>Item Seq</th>
//             <th>Description</th>
//             <th>Actions</th>
//           </tr>
//         </thead>
//         <tbody>
//           {subMenus.map((item, idx) => (
//             <tr key={idx}>
//               <td>{item.itemSeq}</td>
//               <td>{item.menuItemDesc}</td>
//               <td>
//                 <Button variant="danger" size="sm" onClick={() => handleDelete(item.id)}>Delete</Button>
//               </td>
//             </tr>
//           ))}
//         </tbody>
//       </Table>
//     </div>
//   );
// };

// export default SubMenuMaintenance;



// import React, { useEffect, useState } from "react";
// import { useParams } from "react-router-dom";
// import {
//   getSubmenuItems,
//   addSubmenuItem,
//   updateMenuItem,
//   deleteMenuItem
// } from '../../APIRequestService/APIService';
// import { Table, Button, Form, Modal } from "react-bootstrap";
// import { toast } from "react-toastify";

// const SubMenuMaintenance = () => {
//   const { menuItemId } = useParams();
//   const [subMenus, setSubMenus] = useState([]);
//   const [showAddModal, setShowAddModal] = useState(false);
//   const [newItem, setNewItem] = useState({ 
//     itemSeq: "", 
//     menuItemDesc: "",
//     menuItemPath: "",
//     menuItemIcon: ""
//   });
//   const [validationErrors, setValidationErrors] = useState({});

//   useEffect(() => {
//     const fetchData = async () => {
//       try {
//         const data = await getSubmenuItems(menuItemId);
//         setSubMenus(data);
//       } catch (err) {
//         toast.error("Failed to fetch submenu items");
//         console.error("Fetch error:", err);
//       }
//     };
//     fetchData();
//   }, [menuItemId]);

//   const validateForm = () => {
//     const errors = {};
//     if (!newItem.itemSeq) errors.itemSeq = "Sequence is required";
//     if (!newItem.menuItemDesc) errors.menuItemDesc = "Description is required";
//     setValidationErrors(errors);
//     return Object.keys(errors).length === 0;
//   };

//   const handleAdd = async () => {
//     if (!validateForm()) return;
    
//     try {
//       const addedItem = await addSubmenuItem(menuItemId, newItem);
//       setSubMenus([...subMenus, addedItem]);
//       setNewItem({ itemSeq: "", menuItemDesc: "", menuItemPath: "", menuItemIcon: "" });
//       setShowAddModal(false);
//       toast.success("Submenu added successfully");
//     } catch (err) {
//       toast.error("Failed to add submenu");
//       console.error("Add error:", err.response?.data || err.message);
//     }
//   };

//   const handleDelete = async (id) => {
//     if (window.confirm("Are you sure you want to delete this submenu?")) {
//       try {
//         await deleteMenuItem(id);
//         setSubMenus(subMenus.filter(item => item.id !== id));
//         toast.success("Submenu deleted successfully");
//       } catch (err) {
//         toast.error("Failed to delete submenu");
//         console.error("Delete error:", err.response?.data || err.message);
//       }
//     }
//   };

//   return (
//     <div className="p-4">
//       <div className="d-flex justify-content-between align-items-center mb-4">
//         <h2>Sub-Menu Maintenance</h2>
//         <Button variant="primary" onClick={() => setShowAddModal(true)}>
//           Add New Submenu
//         </Button>
//       </div>

//       <Table striped bordered hover responsive>
//         <thead>
//           <tr>
//             <th>Sequence</th>
//             <th>Description</th>
//             <th>Path</th>
//             <th>Icon</th>
//             <th>Actions</th>
//           </tr>
//         </thead>
//         <tbody>
//           {subMenus.map((item) => (
//             <tr key={item.id}>
//               <td>{item.itemSeq}</td>
//               <td>{item.menuItemDesc}</td>
//               <td>{item.menuItemPath}</td>
//               <td>{item.menuItemIcon}</td>
//               <td>
//                 <Button 
//                   variant="danger" 
//                   size="sm" 
//                   onClick={() => handleDelete(item.id)}
//                 >
//                   Delete
//                 </Button>
//               </td>
//             </tr>
//           ))}
//         </tbody>
//       </Table>

//       {/* Add Submenu Modal */}
//       <Modal show={showAddModal} onHide={() => setShowAddModal(false)}>
//         <Modal.Header closeButton>
//           <Modal.Title>Add New Submenu</Modal.Title>
//         </Modal.Header>
//         <Modal.Body>
//           <Form>
//             <Form.Group className="mb-3">
//               <Form.Label>Sequence *</Form.Label>
//               <Form.Control
//                 type="text"
//                 value={newItem.itemSeq}
//                 onChange={(e) => setNewItem({...newItem, itemSeq: e.target.value})}
//                 isInvalid={!!validationErrors.itemSeq}
//               />
//               <Form.Control.Feedback type="invalid">
//                 {validationErrors.itemSeq}
//               </Form.Control.Feedback>
//             </Form.Group>

//             <Form.Group className="mb-3">
//               <Form.Label>Description *</Form.Label>
//               <Form.Control
//                 type="text"
//                 value={newItem.menuItemDesc}
//                 onChange={(e) => setNewItem({...newItem, menuItemDesc: e.target.value})}
//                 isInvalid={!!validationErrors.menuItemDesc}
//               />
//               <Form.Control.Feedback type="invalid">
//                 {validationErrors.menuItemDesc}
//               </Form.Control.Feedback>
//             </Form.Group>

//             <Form.Group className="mb-3">
//               <Form.Label>Path</Form.Label>
//               <Form.Control
//                 type="text"
//                 value={newItem.menuItemPath}
//                 onChange={(e) => setNewItem({...newItem, menuItemPath: e.target.value})}
//               />
//             </Form.Group>

//             <Form.Group className="mb-3">
//               <Form.Label>Icon</Form.Label>
//               <Form.Control
//                 type="text"
//                 value={newItem.menuItemIcon}
//                 onChange={(e) => setNewItem({...newItem, menuItemIcon: e.target.value})}
//                 placeholder="e.g., fa-home"
//               />
//             </Form.Group>
//           </Form>
//         </Modal.Body>
//         <Modal.Footer>
//           <Button variant="secondary" onClick={() => setShowAddModal(false)}>
//             Cancel
//           </Button>
//           <Button variant="primary" onClick={handleAdd}>
//             Save Submenu
//           </Button>
//         </Modal.Footer>
//       </Modal>
//     </div>
//   );
// };

// export default SubMenuMaintenance;

// --------------------------------------------------------------------------------------
// import React, { useEffect, useState } from "react";
// import { useParams } from "react-router-dom";
// import {
//   getSubmenuItems,
//   addSubmenuItem,
//   updateMenuItem,
//   deleteMenuItem
// } from '../../APIRequestService/APIService';
// import { Table, Button, Form, Modal } from "react-bootstrap";
// import { toast } from "react-toastify";

// const SubMenuMaintenance = () => {
//   const { menuItemId } = useParams();
//   const [subMenus, setSubMenus] = useState([]);
//   const [showAddModal, setShowAddModal] = useState(false);
//   const [showEditModal, setShowEditModal] = useState(false);
//   const [currentItem, setCurrentItem] = useState({ 
//     id: "",
//     itemSeq: "", 
//     menuItemDesc: "",
//     menuItemPath: "",
//     menuItemIcon: ""
//   });
//   const [validationErrors, setValidationErrors] = useState({});
//   const [isLoading, setIsLoading] = useState(false);

//   useEffect(() => {
//     fetchSubMenus();
//   }, [menuItemId]);

//   const fetchSubMenus = async () => {
//     setIsLoading(true);
//     try {
//       const data = await getSubmenuItems(menuItemId);
//       setSubMenus(data);
//     } catch (err) {
//       toast.error("Failed to fetch submenu items");
//       console.error("Fetch error:", err);
//     } finally {
//       setIsLoading(false);
//     }
//   };

//   const validateForm = () => {
//     const errors = {};
//     if (!currentItem.itemSeq) errors.itemSeq = "Sequence is required";
//     if (!currentItem.menuItemDesc) errors.menuItemDesc = "Description is required";
//     setValidationErrors(errors);
//     return Object.keys(errors).length === 0;
//   };

//   const handleInputChange = (e) => {
//     const { name, value } = e.target;
//     setCurrentItem({
//       ...currentItem,
//       [name]: value
//     });
//   };

//   const handleAdd = async () => {
//     if (!validateForm()) return;
    
//     try {
//       const addedItem = await addSubmenuItem(menuItemId, currentItem);
//       setSubMenus([...subMenus, addedItem]);
//       resetForm();
//       setShowAddModal(false);
//       toast.success("Submenu added successfully");
//     } catch (err) {
//       toast.error(err.message || "Failed to add submenu");
//       console.error("Add error:", err);
//     }
//   };

//   const handleEdit = (item) => {
//     setCurrentItem(item);
//     setShowEditModal(true);
//   };

//   const handleUpdate = async () => {
//     if (!validateForm()) return;
    
//     try {
//       await updateMenuItem(currentItem.id, currentItem);
//       setSubMenus(subMenus.map(item => 
//         item.id === currentItem.id ? currentItem : item
//       ));
//       resetForm();
//       setShowEditModal(false);
//       toast.success("Submenu updated successfully");
//     } catch (err) {
//       toast.error(err.message || "Failed to update submenu");
//       console.error("Update error:", err);
//     }
//   };

//   const handleDelete = async (id) => {
//     if (window.confirm("Are you sure you want to delete this submenu?")) {
//       try {
//         await deleteMenuItem(id);
//         setSubMenus(subMenus.filter(item => item.id !== id));
//         toast.success("Submenu deleted successfully");
//       } catch (err) {
//         toast.error(err.message || "Failed to delete submenu");
//         console.error("Delete error:", err);
//       }
//     }
//   };

//   const resetForm = () => {
//     setCurrentItem({ 
//       id: "",
//       itemSeq: "", 
//       menuItemDesc: "",
//       menuItemPath: "",
//       menuItemIcon: ""
//     });
//     setValidationErrors({});
//   };

//   return (
//     <div className="p-4">
//       <div className="d-flex justify-content-between align-items-center mb-4">
//         <h2>Sub-Menu Maintenance</h2>
//         <Button variant="primary" onClick={() => {
//           resetForm();
//           setShowAddModal(true);
//         }}>
//           Add New Submenu
//         </Button>
//       </div>

//       {isLoading ? (
//         <div className="text-center">Loading submenus...</div>
//       ) : (
//         <Table striped bordered hover responsive>
//           <thead>
//             <tr>
//               <th>Sequence</th>
//               <th>Description</th>
//               <th>Path</th>
//               <th>Icon</th>
//               <th>Actions</th>
//             </tr>
//           </thead>
//           <tbody>
//             {subMenus.length > 0 ? (
//               subMenus.map((item) => (
//                 <tr key={item.id}>
//                   <td>{item.itemSeq}</td>
//                   <td>{item.menuItemDesc}</td>
//                   <td>{item.menuItemPath}</td>
//                   <td>{item.menuItemIcon}</td>
//                   <td>
//                     <Button 
//                       variant="info" 
//                       size="sm" 
//                       className="me-2"
//                       onClick={() => handleEdit(item)}
//                     >
//                       Edit
//                     </Button>
//                     <Button 
//                       variant="danger" 
//                       size="sm" 
//                       onClick={() => handleDelete(item.id)}
//                     >
//                       Delete
//                     </Button>
//                   </td>
//                 </tr>
//               ))
//             ) : (
//               <tr>
//                 <td colSpan="5" className="text-center">No submenus found</td>
//               </tr>
//             )}
//           </tbody>
//         </Table>
//       )}

//       {/* Add Submenu Modal */}
//       <Modal show={showAddModal} onHide={() => setShowAddModal(false)}>
//         <Modal.Header closeButton>
//           <Modal.Title>Add New Submenu</Modal.Title>
//         </Modal.Header>
//         <Modal.Body>
//           <Form>
//             <Form.Group className="mb-3">
//               <Form.Label>Sequence *</Form.Label>
//               <Form.Control
//                 type="text"
//                 name="itemSeq"
//                 value={currentItem.itemSeq}
//                 onChange={handleInputChange}
//                 isInvalid={!!validationErrors.itemSeq}
//               />
//               <Form.Control.Feedback type="invalid">
//                 {validationErrors.itemSeq}
//               </Form.Control.Feedback>
//             </Form.Group>

//             <Form.Group className="mb-3">
//               <Form.Label>Description *</Form.Label>
//               <Form.Control
//                 type="text"
//                 name="menuItemDesc"
//                 value={currentItem.menuItemDesc}
//                 onChange={handleInputChange}
//                 isInvalid={!!validationErrors.menuItemDesc}
//               />
//               <Form.Control.Feedback type="invalid">
//                 {validationErrors.menuItemDesc}
//               </Form.Control.Feedback>
//             </Form.Group>

//             <Form.Group className="mb-3">
//               <Form.Label>Path</Form.Label>
//               <Form.Control
//                 type="text"
//                 name="menuItemPath"
//                 value={currentItem.menuItemPath}
//                 onChange={handleInputChange}
//               />
//             </Form.Group>

//             <Form.Group className="mb-3">
//               <Form.Label>Icon</Form.Label>
//               <Form.Control
//                 type="text"
//                 name="menuItemIcon"
//                 value={currentItem.menuItemIcon}
//                 onChange={handleInputChange}
//                 placeholder="e.g., fa-home"
//               />
//             </Form.Group>
//           </Form>
//         </Modal.Body>
//         <Modal.Footer>
//           <Button variant="secondary" onClick={() => setShowAddModal(false)}>
//             Cancel
//           </Button>
//           <Button variant="primary" onClick={handleAdd}>
//             Save Submenu
//           </Button>
//         </Modal.Footer>
//       </Modal>

//       {/* Edit Submenu Modal */}
//       <Modal show={showEditModal} onHide={() => setShowEditModal(false)}>
//         <Modal.Header closeButton>
//           <Modal.Title>Edit Submenu</Modal.Title>
//         </Modal.Header>
//         <Modal.Body>
//           <Form>
//             <Form.Group className="mb-3">
//               <Form.Label>Sequence *</Form.Label>
//               <Form.Control
//                 type="text"
//                 name="itemSeq"
//                 value={currentItem.itemSeq}
//                 onChange={handleInputChange}
//                 isInvalid={!!validationErrors.itemSeq}
//               />
//               <Form.Control.Feedback type="invalid">
//                 {validationErrors.itemSeq}
//               </Form.Control.Feedback>
//             </Form.Group>

//             <Form.Group className="mb-3">
//               <Form.Label>Description *</Form.Label>
//               <Form.Control
//                 type="text"
//                 name="menuItemDesc"
//                 value={currentItem.menuItemDesc}
//                 onChange={handleInputChange}
//                 isInvalid={!!validationErrors.menuItemDesc}
//               />
//               <Form.Control.Feedback type="invalid">
//                 {validationErrors.menuItemDesc}
//               </Form.Control.Feedback>
//             </Form.Group>

//             <Form.Group className="mb-3">
//               <Form.Label>Path</Form.Label>
//               <Form.Control
//                 type="text"
//                 name="menuItemPath"
//                 value={currentItem.menuItemPath}
//                 onChange={handleInputChange}
//               />
//             </Form.Group>

//             <Form.Group className="mb-3">
//               <Form.Label>Icon</Form.Label>
//               <Form.Control
//                 type="text"
//                 name="menuItemIcon"
//                 value={currentItem.menuItemIcon}
//                 onChange={handleInputChange}
//                 placeholder="e.g., fa-home"
//               />
//             </Form.Group>
//           </Form>
//         </Modal.Body>
//         <Modal.Footer>
//           <Button variant="secondary" onClick={() => setShowEditModal(false)}>
//             Cancel
//           </Button>
//           <Button variant="primary" onClick={handleUpdate}>
//             Update Submenu
//           </Button>
//         </Modal.Footer>
//       </Modal>
//     </div>
//   );
// };

// export default SubMenuMaintenance;



// -----------------------------------------------------





// import React, { useEffect, useState } from "react";
// import { useParams } from "react-router-dom";
// import { 
//   getSubmenuItems,
//   addSubmenuItem
// } from '../../APIServices/MenuMaintenanceAPI.js';
// import { Table, Button, Form, Modal, Dropdown, Pagination } from "react-bootstrap";
// import { toast } from "react-toastify";

// const SubMenuMaintenance = () => {
//   const { menuItemId } = useParams();
//   const [subMenus, setSubMenus] = useState([]);
//   const [showAddModal, setShowAddModal] = useState(false);
//   const [currentItem, setCurrentItem] = useState({ 
//   menuItemDesc: "",
//   menuItemId: "",
//   itemSeq: "",
//   moduleName: "",
//   main_menu_action_name: "",
//   status: "Enable",
//   main_menu_icon_name: null,
//   subMenus: []
// });
//   const [validationErrors, setValidationErrors] = useState({});
//   const [isLoading, setIsLoading] = useState(false);
//   const [itemsPerPage, setItemsPerPage] = useState(10);
//   const [currentPage, setCurrentPage] = useState(1);

//   useEffect(() => {
//     fetchSubMenus();
//   }, [menuItemId]);

//   const fetchSubMenus = async () => {
//     setIsLoading(true);
//     try {
//       const data = await getSubmenuItems(menuItemId);
//       setSubMenus(data);
//     } catch (err) {
//       toast.error("Failed to fetch submenu items");
//       console.error("Fetch error:", err);
//     } finally {
//       setIsLoading(false);
//     }
//   };
// const validateForm = () => {
//   const errors = {};
//   if (!currentItem.menuItemDesc) errors.menuItemDesc = "Menu Item Description is required";
//   if (!currentItem.menuItemId) errors.menuItemId = "Menu Item ID is required";
//   if (!currentItem.itemSeq) errors.itemSeq = "Item Sequence is required";
//   if (!currentItem.moduleName) errors.moduleName = "Module Name is required";
//   if (!currentItem.main_menu_action_name) errors.main_menu_action_name = "Main Menu Action Name is required";
//   setValidationErrors(errors);
//   return Object.keys(errors).length === 0;
// };

//   const handleInputChange = (e) => {
//     const { name, value } = e.target;
//     setCurrentItem({
//       ...currentItem,
//       [name]: value
//     });
//   };

//   // Changes to the handleAdd function
// const handleAdd = async () => {
//   if (!validateForm()) return;

//   try {
//     const requestData = {
//       menuItemDesc: currentItem.menuItemDesc,
//       menuItemId: currentItem.menuItemId,
//       itemSeq: currentItem.itemSeq,
//       moduleName: currentItem.moduleName,
//       main_menu_action_name: currentItem.main_menu_action_name,
//       status: currentItem.status,
//       main_menu_icon_name: currentItem.main_menu_icon_name || null,
//       subMenus: []
//     };

//     console.log("Submitting data:", requestData);

//     const addedItem = await addSubmenuItem(menuItemId, requestData);
    
//     // Handle both array and single object responses
//     const newItems = Array.isArray(addedItem) ? addedItem : [addedItem];
//     setSubMenus([...subMenus, ...newItems]);
    
//     resetForm();
//     setShowAddModal(false);
//     toast.success("Submenu added successfully");
//   } catch (err) {
//     const errorMessage = err.response?.data?.message || "Failed to add submenu";
//     toast.error(errorMessage);
//     console.error("Add error details:", err.response?.data);
//   }
// };

// const resetForm = () => {
//   setCurrentItem({ 
//     menuItemDesc: "",
//     menuItemId: "",
//     itemSeq: "",
//     moduleName: "",
//     main_menu_action_name: "",
//     status: "Enable",
//     main_menu_icon_name: null,
//     subMenus: []
//   });
  
//   setValidationErrors({});
// };

//   // Pagination logic
//   const totalPages = Math.ceil(subMenus.length / itemsPerPage);
//   const paginatedItems = subMenus.slice(
//     (currentPage - 1) * itemsPerPage,
//     currentPage * itemsPerPage
//   );

//   return (
//     <div className="p-4">
//       <div className="d-flex justify-content-between align-items-center mb-4">
//         <h2>Sub-Menu Maintenance</h2>
//         <Button variant="primary" onClick={() => {
//           resetForm();
//           setShowAddModal(true);
//         }}>
//           Add New Submenu
//         </Button>
//       </div>

//       <div className="d-flex justify-content-between align-items-center mb-3">
//         <Dropdown>
//           <Dropdown.Toggle variant="outline-secondary" id="dropdown-columns">
//             Manage Columns
//           </Dropdown.Toggle>
//           <Dropdown.Menu>
//             <Dropdown.Item>Sub-Menu Item Name</Dropdown.Item>
//             <Dropdown.Item>ID</Dropdown.Item>
//             <Dropdown.Item>Sequence</Dropdown.Item>
//             <Dropdown.Item>Module Name</Dropdown.Item>
//             <Dropdown.Item>Menu Action Link</Dropdown.Item>
//             <Dropdown.Item>Status</Dropdown.Item>
//           </Dropdown.Menu>
//         </Dropdown>

//         <div className="d-flex align-items-center">
//           <span className="me-2">Users per page</span>
//           <Form.Select 
//             size="sm" 
//             style={{ width: '80px' }} 
//             value={itemsPerPage}
//             onChange={(e) => setItemsPerPage(Number(e.target.value))}
//           >
//             <option value="10">10</option>
//             <option value="25">25</option>
//             <option value="50">50</option>
//             <option value="100">100</option>
//           </Form.Select>
//         </div>
//       </div>

//       {isLoading ? (
//         <div className="text-center">Loading submenus...</div>
//       ) : (
//         <>
//           <Table striped bordered hover responsive>
//             <thead>
//   <tr>
//     <th>NO</th>
//     <th>Menu Item Description</th>
//     <th>Menu Item ID</th>
//     <th>Item Sequence</th>
//     <th>Module Name</th>
//     <th>Main Menu Action Name</th>
//     <th>Main Menu Icon Name</th>
//     <th>Status</th>
//   </tr>
// </thead>
// <tbody>
//   {paginatedItems.length > 0 ? (
//     paginatedItems.map((item, index) => (
//       <tr key={item.id}>
//         <td>{(currentPage - 1) * itemsPerPage + index + 1}</td>
//         <td>{item.menuItemDesc}</td>
//         <td>{item.menuItemId}</td>
//         <td>{item.itemSeq}</td>
//         <td>{item.moduleName}</td>
//         <td>{item.main_menu_action_name}</td>
//         <td>{item.main_menu_icon_name || "null"}</td>
//         <td>
//           <Button 
//             variant={item.status === "Enable" ? "success" : "secondary"}
//             size="sm"
//             disabled
//           >
//             {item.status}
//           </Button>
//         </td>
//       </tr>
//     ))
//   ) : (
//     <tr>
//       <td colSpan="8" className="text-center">No menu items found</td>
//     </tr>
//   )}
// </tbody>
//           </Table>

//           <div className="d-flex justify-content-between align-items-center">
//             <div>
//               Showing {(currentPage - 1) * itemsPerPage + 1} to{' '}
//               {Math.min(currentPage * itemsPerPage, subMenus.length)} of{' '}
//               {subMenus.length} entries
//             </div>
//             {/* <Pagination>
//               <Pagination.First 
//                 onClick={() => setCurrentPage(1)} 
//                 disabled={currentPage === 1} 
//               />
//               <Pagination.Prev 
//                 onClick={() => setCurrentPage(p => Math.max(p - 1, 1))} 
//                 disabled={currentPage === 1} 
//               />
//               {Array.from({ length: totalPages }, (_, i) => (
//                 <Pagination.Item
//                   key={i + 1}
//                   active={i + 1 === currentPage}
//                   onClick={() => setCurrentPage(i + 1)}
//                 >
//                   {i + 1}
//                 </Pagination.Item>
//               ))}
//               <Pagination.Next 
//                 onClick={() => setCurrentPage(p => Math.min(p + 1, totalPages))} 
//                 disabled={currentPage === totalPages} 
//               />
//               <Pagination.Last 
//                 onClick={() => setCurrentPage(totalPages)} 
//                 disabled={currentPage === totalPages} 
//               />
//             </Pagination> */}
//           </div>
//         </>
//       )}

//       {/* Add Submenu Modal */}
//       <Modal show={showAddModal} onHide={() => setShowAddModal(false)}>
//         <Modal.Header closeButton>
//           <Modal.Title>Add New Submenu</Modal.Title>
//         </Modal.Header>
//         <Modal.Body>
//   <Form>
//     <Form.Group className="mb-3">
//       <Form.Label>Menu Item Description *</Form.Label>
//       <Form.Control
//         type="text"
//         name="menuItemDesc"
//         value={currentItem.menuItemDesc}
//         onChange={handleInputChange}
//         isInvalid={!!validationErrors.menuItemDesc}
//       />
//       <Form.Control.Feedback type="invalid">
//         {validationErrors.menuItemDesc}
//       </Form.Control.Feedback>
//     </Form.Group>

//     <Form.Group className="mb-3">
//       <Form.Label>Menu Item ID *</Form.Label>
//       <Form.Control
//         type="text"
//         name="menuItemId"
//         value={currentItem.menuItemId}
//         onChange={handleInputChange}
//         isInvalid={!!validationErrors.menuItemId}
//       />
//       <Form.Control.Feedback type="invalid">
//         {validationErrors.menuItemId}
//       </Form.Control.Feedback>
//     </Form.Group>

//     <Form.Group className="mb-3">
//       <Form.Label>Item Sequence *</Form.Label>
//       <Form.Control
//         type="text"
//         name="itemSeq"
//         value={currentItem.itemSeq}
//         onChange={handleInputChange}
//         isInvalid={!!validationErrors.itemSeq}
//       />
//       <Form.Control.Feedback type="invalid">
//         {validationErrors.itemSeq}
//       </Form.Control.Feedback>
//     </Form.Group>

//     <Form.Group className="mb-3">
//       <Form.Label>Module Name *</Form.Label>
//       <Form.Control
//         type="text"
//         name="moduleName"
//         value={currentItem.moduleName}
//         onChange={handleInputChange}
//         isInvalid={!!validationErrors.moduleName}
//       />
//       <Form.Control.Feedback type="invalid">
//         {validationErrors.moduleName}
//       </Form.Control.Feedback>
//     </Form.Group>

//     <Form.Group className="mb-3">
//       <Form.Label>Main Menu Action Name *</Form.Label>
//       <Form.Control
//         type="text"
//         name="main_menu_action_name"
//         value={currentItem.main_menu_action_name}
//         onChange={handleInputChange}
//         isInvalid={!!validationErrors.main_menu_action_name}
//       />
//       <Form.Control.Feedback type="invalid">
//         {validationErrors.main_menu_action_name}
//       </Form.Control.Feedback>
//     </Form.Group>

//     <Form.Group className="mb-3">
//       <Form.Label>Main Menu Icon Name</Form.Label>
//       <Form.Control
//         type="text"
//         name="main_menu_icon_name"
//         value={currentItem.main_menu_icon_name || ""}
//         onChange={handleInputChange}
//       />
//     </Form.Group>

//     <Form.Group className="mb-3">
//       <Form.Label>Status</Form.Label>
//       <Form.Select
//         name="status"
//         value={currentItem.status}
//         onChange={handleInputChange}
//       >
//         <option value="Enable">Enable</option>
//         <option value="Disable">Disable</option>
//       </Form.Select>
//     </Form.Group>
//   </Form>
// </Modal.Body>
// <Modal.Footer>
//           <Button variant="secondary" onClick={() => setShowAddModal(false)}>
//             Cancel
//           </Button>
//           <Button variant="primary" onClick={handleAdd}>
//             Save Submenu
//           </Button>
//         </Modal.Footer>
//       </Modal>
//     </div>
//   );
// };

// export default SubMenuMaintenance;




// import React, { useEffect, useState } from "react";
// import { useParams } from "react-router-dom";
// import { getSubmenuItems, addSubmenuItem } from '../../APIServices/MenuMaintenanceAPI.js';
// import { Table, Button, Form, Modal } from "react-bootstrap";
// import { toast } from "react-toastify";

// const SubMenuMaintenance = () => {
//   const { menuItemId } = useParams(); // This gets the parent ID from URL
//   const [subMenus, setSubMenus] = useState([]);
//   const [showAddModal, setShowAddModal] = useState(false);
//   const [currentItem, setCurrentItem] = useState({ 
//     menuItemDesc: "",
//     itemSeq: "",
//     moduleName: "",
//     main_menu_action_name: "#", // Default action
//     status: "Enable",
//     main_menu_icon_name: "fa-circle" // Default icon
//   });
//   const [isLoading, setIsLoading] = useState(false);

//   useEffect(() => {
//     fetchSubMenus();
//   }, [menuItemId]);

//   const fetchSubMenus = async () => {
//     setIsLoading(true);
//     try {
//       const data = await getSubmenuItems(menuItemId);
//       setSubMenus(data);
//     } catch (err) {
//       toast.error("Failed to fetch submenu items");
//       console.error(err);
//     } finally {
//       setIsLoading(false);
//     }
//   };

//   const handleAdd = async () => {
//     try {
//       const addedItem = await addSubmenuItem(menuItemId, currentItem);
      
//       // Update state with new submenu
//       setSubMenus([...subMenus, addedItem]);
      
//       // Reset form and close modal
//       setCurrentItem({
//         menuItemDesc: "",
//         itemSeq: "",
//         moduleName: "",
//         main_menu_action_name: "#",
//         status: "Enable",
//         main_menu_icon_name: "fa-circle"
//       });
//       setShowAddModal(false);
//       toast.success("Submenu added successfully!");
//     } catch (err) {
//       toast.error(err.message || "Failed to add submenu");
//     }
//   };

//   return (
//     <div className="p-4">
//       <div className="d-flex justify-content-between align-items-center mb-4">
//         <h2>Sub-Menus for Menu ID: {menuItemId}</h2>
//         <Button variant="primary" onClick={() => setShowAddModal(true)}>
//           Add Submenu
//         </Button>
//       </div>

//       {/* Submenu Table */}
//       <Table striped bordered hover>
//         <thead>
//           <tr>
//             <th>Name</th>
//             <th>Sequence</th>
//             <th>Module</th>
//             <th>Action</th>
//             <th>Status</th>
//           </tr>
//         </thead>
//         <tbody>
//           {subMenus.map((item) => (
//             <tr key={item.menuItemId}>
//               <td>{item.menuItemDesc}</td>
//               <td>{item.itemSeq}</td>
//               <td>{item.moduleName}</td>
//               <td>{item.main_menu_action_name}</td>
//               <td>{item.status ? "Enabled" : "Disabled"}</td>
//             </tr>
//           ))}
//         </tbody>
//       </Table>

//       {/* Add Submenu Modal */}
//       <Modal show={showAddModal} onHide={() => setShowAddModal(false)}>
//         <Modal.Header closeButton>
//           <Modal.Title>Add Submenu to Menu {menuItemId}</Modal.Title>
//         </Modal.Header>
//         <Modal.Body>
//           <Form>
//             <Form.Group className="mb-3">
//               <Form.Label>Submenu Name*</Form.Label>
//               <Form.Control
//                 type="text"
//                 value={currentItem.menuItemDesc}
//                 onChange={(e) => setCurrentItem({...currentItem, menuItemDesc: e.target.value})}
//                 required
//               />
//             </Form.Group>

//             <Form.Group className="mb-3">
//               <Form.Label>Sequence*</Form.Label>
//               <Form.Control
//                 type="number"
//                 value={currentItem.itemSeq}
//                 onChange={(e) => setCurrentItem({...currentItem, itemSeq: e.target.value})}
//                 required
//               />
//             </Form.Group>

//             <Form.Group className="mb-3">
//               <Form.Label>Module Name</Form.Label>
//               <Form.Control
//                 type="text"
//                 value={currentItem.moduleName}
//                 onChange={(e) => setCurrentItem({...currentItem, moduleName: e.target.value})}
//               />
//             </Form.Group>

//             <Form.Group className="mb-3">
//               <Form.Label>Action Link</Form.Label>
//               <Form.Control
//                 type="text"
//                 value={currentItem.main_menu_action_name}
//                 onChange={(e) => setCurrentItem({...currentItem, main_menu_action_name: e.target.value})}
//               />
//             </Form.Group>

//             <Form.Group className="mb-3">
//               <Form.Label>Icon Name</Form.Label>
//               <Form.Control
//                 type="text"
//                 value={currentItem.main_menu_icon_name}
//                 onChange={(e) => setCurrentItem({...currentItem, main_menu_icon_name: e.target.value})}
//                 placeholder="fa-icon-name"
//               />
//             </Form.Group>

//             <Form.Group className="mb-3">
//               <Form.Label>Status</Form.Label>
//               <Form.Select
//                 value={currentItem.status}
//                 onChange={(e) => setCurrentItem({...currentItem, status: e.target.value})}
//               >
//                 <option value="Enable">Enabled</option>
//                 <option value="Disable">Disabled</option>
//               </Form.Select>
//             </Form.Group>
//           </Form>
//         </Modal.Body>
//         <Modal.Footer>
//           <Button variant="secondary" onClick={() => setShowAddModal(false)}>
//             Cancel
//           </Button>
//           <Button variant="primary" onClick={handleAdd}>
//             Add Submenu
//           </Button>
//         </Modal.Footer>
//       </Modal>
//     </div>
//   );
// };

// export default SubMenuMaintenance;











// -----





import React, { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import { 
  getSubmenuItems, 
  addSubmenuItem,
  updateSubmenuItem,
  deleteSubmenuItem
} from '../../APIServices/MenuMaintenanceAPI.js';
import { Table, Button, Form, Modal, Dropdown } from "react-bootstrap";
import { toast } from "react-toastify";

const SubMenuMaintenance = () => {
  const { menuItemId } = useParams();
  const [subMenus, setSubMenus] = useState([]);
  const [showAddModal, setShowAddModal] = useState(false);
  const [showEditModal, setShowEditModal] = useState(false);
  const [currentItem, setCurrentItem] = useState({ 
    menuItemId: "",
    menuItemDesc: "",
    itemSeq: "",
    moduleName: "",
    main_menu_action_name: "#",
    status: "Enable",
    main_menu_icon_name: "fa-circle"
  });
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    fetchSubMenus();
  }, [menuItemId]);

  const fetchSubMenus = async () => {
    setIsLoading(true);
    try {
      const data = await getSubmenuItems(menuItemId);
      setSubMenus(data);
    } catch (err) {
      toast.error("Failed to fetch submenu items");
      console.error(err);
    } finally {
      setIsLoading(false);
    }
  };

  const handleAdd = async () => {
    try {
      const addedItem = await addSubmenuItem(menuItemId, currentItem);
      setSubMenus([...subMenus, addedItem]);
      resetForm();
      setShowAddModal(false);
      toast.success("Submenu added successfully!");
    } catch (err) {
      toast.error(err.message || "Failed to add submenu");
    }
  };

  const handleEdit = (item) => {
    setCurrentItem({
      ...item,
      status: item.status ? "Enable" : "Disable"
    });
    setShowEditModal(true);
  };

  const handleUpdate = async () => {
    try {
      const updatedItem = await updateSubmenuItem(currentItem.menuItemId, currentItem);
      setSubMenus(subMenus.map(item => 
        item.menuItemId === updatedItem.menuItemId ? updatedItem : item
      ));
      resetForm();
      setShowEditModal(false);
      toast.success("Submenu updated successfully!");
    } catch (err) {
      toast.error(err.message || "Failed to update submenu");
    }
  };

  const handleDelete = async (id) => {
    if (window.confirm("Are you sure you want to delete this submenu?")) {
      try {
        await deleteSubmenuItem(id);
        setSubMenus(subMenus.filter(item => item.menuItemId !== id));
        toast.success("Submenu deleted successfully!");
      } catch (err) {
        toast.error(err.message || "Failed to delete submenu");
      }
    }
  };

  const resetForm = () => {
    setCurrentItem({ 
      menuItemId: "",
      menuItemDesc: "",
      itemSeq: "",
      moduleName: "",
      main_menu_action_name: "#",
      status: "Enable",
      main_menu_icon_name: "fa-circle"
    });
  };

  return (
    <div className="p-4">
      <div className="d-flex justify-content-between align-items-center mb-4">
        <h2>Sub-Menus for Menu ID: {menuItemId}</h2>
        <Button variant="primary" onClick={() => setShowAddModal(true)}>
          + ADD NEW
        </Button>
      </div>

      <Table striped bordered hover>
        <thead>
          <tr>
            <th>No.</th>
            <th>Sub-Menu Item Name</th>
            <th>ID</th>
            <th>Sequence</th>
            <th>Module Name</th>
            <th>Menu Action Link</th>
            <th>Status</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          {subMenus.map((item, index) => (
            <tr key={item.menuItemId}>
              <td>{index + 1}</td>
              <td>{item.menuItemDesc}</td>
              <td>{item.menuItemId}</td>
              <td>{item.itemSeq}</td>
              <td>{item.moduleName}</td>
              <td>{item.main_menu_action_name}</td>
              <td>{item.status ? "Enable" : "Disable"}</td>
              <td>
                <Dropdown>
                  <Dropdown.Toggle variant="light" id="dropdown-basic">
                    <i className="fas fa-ellipsis-v"></i>
                  </Dropdown.Toggle>
                  <Dropdown.Menu>
                    <Dropdown.Item onClick={() => handleEdit(item)}>
                      <i className="fas fa-edit me-2"></i> Edit
                    </Dropdown.Item>
                    <Dropdown.Item onClick={() => handleDelete(item.menuItemId)}>
                      <i className="fas fa-trash me-2"></i> Delete
                    </Dropdown.Item>
                  </Dropdown.Menu>
                </Dropdown>
              </td>
            </tr>
          ))}
        </tbody>
      </Table>

      {/* Add Submenu Modal */}
      <Modal show={showAddModal} onHide={() => setShowAddModal(false)}>
        <Modal.Header closeButton>
          <Modal.Title>Add Submenu</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <Form>
            <Form.Group className="mb-3">
              <Form.Label>Sub-Menu Item Name*</Form.Label>
              <Form.Control
                type="text"
                value={currentItem.menuItemDesc}
                onChange={(e) => setCurrentItem({...currentItem, menuItemDesc: e.target.value})}
                required
              />
            </Form.Group>
            <Form.Group className="mb-3">
              <Form.Label>Sequence*</Form.Label>
              <Form.Control
                type="number"
                value={currentItem.itemSeq}
                onChange={(e) => setCurrentItem({...currentItem, itemSeq: e.target.value})}
                required
              />
            </Form.Group>
            <Form.Group className="mb-3">
              <Form.Label>Module Name</Form.Label>
              <Form.Control
                type="text"
                value={currentItem.moduleName}
                onChange={(e) => setCurrentItem({...currentItem, moduleName: e.target.value})}
              />
            </Form.Group>
            <Form.Group className="mb-3">
              <Form.Label>Menu Action Link</Form.Label>
              <Form.Control
                type="text"
                value={currentItem.main_menu_action_name}
                onChange={(e) => setCurrentItem({...currentItem, main_menu_action_name: e.target.value})}
              />
            </Form.Group>
          </Form>
        </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={() => setShowAddModal(false)}>
            CANCEL
          </Button>
          <Button variant="primary" onClick={handleAdd}>
            ADD
          </Button>
        </Modal.Footer>
      </Modal>

      {/* Edit Submenu Modal */}
      <Modal show={showEditModal} onHide={() => setShowEditModal(false)}>
        <Modal.Header closeButton>
          <Modal.Title>Update Sub Menu Maintenance</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <Form>
            <Form.Group className="mb-3">
              <Form.Label>Menu ID</Form.Label>
              <Form.Control
                type="text"
                value={menuItemId}
                disabled
              />
            </Form.Group>
            <Form.Group className="mb-3">
              <Form.Label>Menu Item Name*</Form.Label>
              <Form.Control
                type="text"
                value={currentItem.menuItemDesc}
                onChange={(e) => setCurrentItem({...currentItem, menuItemDesc: e.target.value})}
                required
              />
            </Form.Group>
            <Form.Group className="mb-3">
              <Form.Label>Sequence*</Form.Label>
              <Form.Control
                type="number"
                value={currentItem.itemSeq}
                onChange={(e) => setCurrentItem({...currentItem, itemSeq: e.target.value})}
                required
              />
            </Form.Group>
            <Form.Group className="mb-3">
              <Form.Label>Module Name</Form.Label>
              <Form.Control
                type="text"
                value={currentItem.moduleName}
                onChange={(e) => setCurrentItem({...currentItem, moduleName: e.target.value})}
              />
            </Form.Group>
            <Form.Group className="mb-3">
              <Form.Label>Menu Action Link</Form.Label>
              <Form.Control
                type="text"
                value={currentItem.main_menu_action_name}
                onChange={(e) => setCurrentItem({...currentItem, main_menu_action_name: e.target.value})}
              />
            </Form.Group>
            <Form.Group className="mb-3">
              <Form.Label>Status</Form.Label>
              <Form.Select
                value={currentItem.status}
                onChange={(e) => setCurrentItem({...currentItem, status: e.target.value})}
              >
                <option value="Enable">Enable</option>
                <option value="Disable">Disable</option>
              </Form.Select>
            </Form.Group>
          </Form>
        </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={() => setShowEditModal(false)}>
            CANCEL
          </Button>
          <Button variant="primary" onClick={handleUpdate}>
            UPDATE
          </Button>
        </Modal.Footer>
      </Modal>
    </div>
  );
};

export default SubMenuMaintenance;