// import React, { useState, useEffect } from 'react';
// import { Pagination } from 'reactstrap';
// const MenuAccessControl = () => {
//   const [alldata, setAlldata] = useState([]);
//   const [toggle, setToggle] = useState(false);
//   const [menus, setMenus] = useState([]);
//   const [modalAdd, setModalAdd] = useState(false);
//   const [modalEdit, setModalEdit] = useState(false);
//   const [rowSelected, setRowSelected] = useState({});
//   const [loading, setLoading] = useState(true);

//   useEffect(() => {
//     // Fetch initial data here
//     fetchData();
//   }, []);

//   const fetchData = async () => {
//     // Fetch data logic
//     try {
//       const response = await fetch('api/your-api-endpoint');
//       const data = await response.json();
//       setAlldata(data);
//       setLoading(false);
//     } catch (error) {
//       console.error("Error fetching data:", error);
//     }
//   };

//   const handleToggleCheckbox = () => {
//     setToggle(!toggle);
//   };

//   const handleInputChange = (event, field) => {
//     setRowSelected(prev => ({
//       ...prev,
//       [field]: event.target.checked,
//     }));
//   };

//   const handleSelectChange = (value) => {
//     // Handle select change logic
//     console.log(value);
//   };

//   const handleModalAddToggle = () => {
//     setModalAdd(!modalAdd);
//   };

//   const handleModalEditToggle = (item) => {
//     setRowSelected(item);
//     setModalEdit(!modalEdit);
//   };

//   const handleSubmit = () => {
//     // Submit form logic for Add
//     console.log("Submitted");
//   };

//   const handleUpdate = () => {
//     // Submit form logic for Edit
//     console.log("Updated");
//   };

//   return (
//     <div>
//       <div className="clr-row">
//         <div className="clr-col-6" style={{ display: 'flex' }}>
//           <div style={{ marginRight: 25 }}>
//             <h4 style={{ fontWeight: 300 }}>Menu Access Control</h4>
//           </div>
//           <div style={{ marginTop: 27, position: 'relative' }}>
//             <span className="label label-light-blue" style={{ display: 'inline' }}>Edit Mode</span>
//           </div>
//         </div>
//         <div className="clr-col-6" style={{ textAlign: 'right' }}>
//           For
//           <select
//             style={{ height: '30px' }}
//             onChange={(e) => handleSelectChange(e.target.value)}
//           >
//             {alldata.map(sub => (
//               <option key={sub.usrGrp} value={sub.usrGrp} selected={sub.usrGrp === 40}>
//                 {sub.groupName}
//               </option>
//             ))}
//           </select>
//           <button
//             style={{ marginLeft: '20px' }}
//             onClick={fetchData}
//           >
//             Reload
//           </button>
//           <span>{toggle ? 'Only Main Menu' : 'Show All'}</span>
//           <label className="switch">
//             <input
//               type="checkbox"
//               checked={toggle}
//               onClick={handleToggleCheckbox}
//             />
//             <span className="slider round"></span>
//           </label>
//         </div>
//       </div>
//       <hr />
//       <div className="dg-wrapper">
//         <div className="clr-row">
//           <div className="clr-col-12" style={{ textAlign: 'right' }}>
//             <button
//               style={{ marginLeft: '20px' }}
//               onClick={handleModalAddToggle}
//             >
//               <span className="icon-plus"></span>Add
//             </button>
//           </div>
//         </div>

//         <div className={`clr-datagrid ${loading ? 'loading' : ''}`}>
//           {loading ? (
//             <div>Loading ...</div>
//           ) : (
//             <>
//               <div className="clr-dg-placeholder">
//                 <div>No data available</div>
//               </div>

//               <div className="clr-dg-column">
//                 <div>NO</div>
//                 <div>Menu Item Name</div>
//                 <div>View</div>
//                 <div>Create</div>
//                 <div>Edit</div>
//                 <div>Delete</div>
//                 <div>Query</div>
//                 <div>Export</div>
//               </div>

//               {alldata.map((all, i) => (
//                 <div key={i} className="clr-dg-row">
//                   <div>{i + 1}</div>
//                   <div>{all.menuId === 0 ? <b>{all.menuItemDesc}</b> : `&nbsp;&nbsp;&nbsp;${all.menuItemDesc}`}</div>
//                   <div>
//                     <input
//                       type="checkbox"
//                       checked={all.mvisible}
//                       onChange={(e) => handleInputChange(e, 'mvisible')}
//                     />
//                   </div>
//                   <div>
//                     <input
//                       type="checkbox"
//                       checked={all.mcreate}
//                       onChange={(e) => handleInputChange(e, 'mcreate')}
//                     />
//                   </div>
//                   <div>
//                     <input
//                       type="checkbox"
//                       checked={all.medit}
//                       onChange={(e) => handleInputChange(e, 'medit')}
//                     />
//                   </div>
//                   <div>
//                     <input
//                       type="checkbox"
//                       checked={all.mdelete}
//                       onChange={(e) => handleInputChange(e, 'mdelete')}
//                     />
//                   </div>
//                   <div>
//                     <input
//                       type="checkbox"
//                       checked={all.mquery}
//                       onChange={(e) => handleInputChange(e, 'mquery')}
//                     />
//                   </div>
//                   <div>
//                     <input
//                       type="checkbox"
//                       checked={all.mexport}
//                       onChange={(e) => handleInputChange(e, 'mexport')}
//                     />
//                   </div>

//                   <div>
//                     <button onClick={() => handleModalEditToggle(all)}>Edit</button>
//                     {all.menuId !== 0 ? (
//                       <button onClick={() => handleModalDelete(all)}>Delete</button>
//                     ) : (
//                       <button onClick={() => handleModalDeleteMainMenu(all)}>Delete Menu+Submenu</button>
//                     )}
//                   </div>

//                   {all.menuId === 0 && (
//                     <div className="clr-dg-row-detail">
//                       <table className="table">
//                         <tr>
//                           <td className="td-title">Menuname</td>
//                           <td className="td-content"></td>
//                         </tr>
//                       </table>
//                     </div>
//                   )}
//                 </div>
//               ))}

//               <div className="clr-dg-footer">
//                 <div>
//                   <span>Record per page</span>
//                   <select onChange={(e) => handleSelectChange(e.target.value)}>
//                     <option value="10">10</option>
//                     <option value="20">20</option>
//                     <option value="50">50</option>
//                     <option value="100">100</option>
//                   </select>
//                 </div>
//                 <div>
//                   {pagination.firstItem + 1} - {pagination.lastItem + 1} of {pagination.totalItems} Records
//                 </div>
//               </div>
//             </>
//           )}
//         </div>
//       </div>

//       {/* Modal for Add */}
//       <div className={`modal ${modalAdd ? 'open' : ''}`}>
//         <h3>Menu Access Control Add Mode</h3>
//         <div>
//           <form onSubmit={handleSubmit}>
//             <div className="clr-row">
//               <div className="clr-col-md-6 clr-col-sm-12">
//                 <label>Menu Name<span className="required-field">*</span></label>
//                 <select
//                   onChange={(e) => handleSelectChange(e.target.value)}
//                   style={{ width: '100%', padding: '5px', border: '1px solid #ccc', borderRadius: '4px' }}
//                 >
//                   {menus.map(sub => (
//                     <option key={sub.menuItemId} value={sub.menuItemId}>{sub.menuItemDesc}</option>
//                   ))}
//                 </select>
//               </div>
//             </div>
//             <div className="modal-footer">
//               <button type="button" onClick={handleModalAddToggle}>Cancel</button>
//               <button type="submit">ADD</button>
//             </div>
//           </form>
//         </div>
//       </div>

//       {/* Modal for Edit */}
//       <div className={`modal ${modalEdit ? 'open' : ''}`}>
//         <h3>Menu Access Control Edit Mode</h3>
//         <div className="modal-body">
//           {rowSelected.menuItemId && (
//             <form onSubmit={() => handleUpdate(rowSelected.menuItemId.menuItemId, rowSelected.usrGrp.usrGrp)}>
//               <div className="clr-row">
//                 <div className="clr-col-md-3 clr-col-sm-12">
//                   <label>View</label>
//                   <input
//                     type="checkbox"
//                     name="mvisible"
//                     checked={rowSelected.mvisible}
//                     onChange={(e) => handleInputChange(e, 'mvisible')}
//                   />
//                 </div>
//                 <div className="clr-col-md-3 clr-col-sm-12">
//                   <label>Create</label>
//                   <input
//                     type="checkbox"
//                     name="mcreate"
//                     checked={rowSelected.mcreate}
//                     onChange={(e) => handleInputChange(e, 'mcreate')}
//                   />
//                 </div>
//                 <div className="clr-col-md-3 clr-col-sm-12">
//                   <label>Edit</label>
//                   <input
//                     type="checkbox"
//                     name="medit"
//                     checked={rowSelected.medit}
//                     onChange={(e) => handleInputChange(e, 'medit')}
//                   />
//                 </div>
//                 <div className="clr-col-md-3 clr-col-sm-12">
//                   <label>Delete</label>
//                   <input
//                     type="checkbox"
//                     name="mdelete"
//                     checked={rowSelected.mdelete}
//                     onChange={(e) => handleInputChange(e, 'mdelete')}
//                   />
//                 </div>
//                 <div className="clr-col-md-3 clr-col-sm-12">
//                   <label>Query</label>
//                   <input
//                     type="checkbox"
//                     name="mquery"
//                     checked={rowSelected.mquery}
//                     onChange={(e) => handleInputChange(e, 'mquery')}
//                   />
//                 </div>
//                 <div className="clr-col-md-3 clr-col-sm-12">
//                   <label>Export</label>
//                   <input
//                     type="checkbox"
//                     name="mexport"
//                     checked={rowSelected.mexport}
//                     onChange={(e) => handleInputChange(e, 'mexport')}
//                   />
//                 </div>
//               </div>
//               <div className="modal-footer">
//                 <button type="button" onClick={handleModalEditToggle}>Cancel</button>
//                 <button type="submit">UPDATE</button>
//               </div>
//             </form>
//           )}
//         </div>
//       </div>
//     </div>
//   );
// };

// export default MenuAccessControl;

// import React, { useState, useEffect } from 'react';

// const MenuAccessControl = () => {
//   const [alldata, setAlldata] = useState([]);
//   const [toggle, setToggle] = useState(false);
//   const [menus, setMenus] = useState([]);
//   const [modalAdd, setModalAdd] = useState(false);
//   const [modalEdit, setModalEdit] = useState(false);
//   const [rowSelected, setRowSelected] = useState({});
//   const [loading, setLoading] = useState(true);
//   const [pagination, setPagination] = useState({ firstItem: 0, lastItem: 9, totalItems: 0 });

//   useEffect(() => {
//     // Fetch initial data here
//     fetchData();
//   }, []);

//   const fetchData = async () => {
//     // Fetch data logic
//     try {
//       const response = await fetch('api/your-api-endpoint');
//       const data = await response.json();
//       setAlldata(data.items);
//       setPagination({ ...pagination, totalItems: data.totalItems });
//       setLoading(false);
//     } catch (error) {
//       console.error("Error fetching data:", error);
//     }
//   };

//   const handleToggleCheckbox = () => {
//     setToggle(!toggle);
//   };

//   const handleInputChange = (event, field) => {
//     setRowSelected(prev => ({
//       ...prev,
//       [field]: event.target.checked,
//     }));
//   };

//   const handleSelectChange = (value) => {
//     // Handle select change logic
//     console.log(value);
//   };

//   const handleModalAddToggle = () => {
//     setModalAdd(!modalAdd);
//   };

//   const handleModalEditToggle = (item) => {
//     setRowSelected(item);
//     setModalEdit(!modalEdit);
//   };

//   const handleModalDelete = () => {
//     // Logic for deleting the selected row
//     const updatedData = alldata.filter(item => item.menuId !== rowSelected.menuId);
//     setAlldata(updatedData);
//     setModalEdit(false); // Close the edit modal after deletion
//   };

//   const handleModalDeleteMainMenu = (all) => {
//     // Logic for deleting the main menu and its associated sub-menus
//     const updatedData = alldata.filter(item => item.menuId !== all.menuId && item.parentMenuId !== all.menuId);
//     setAlldata(updatedData);
//     setModalEdit(false); // Close the edit modal after deletion
//   };

//   const handleSubmit = () => {
//     // Submit form logic for Add
//     console.log("Submitted");
//   };

//   const handleUpdate = () => {
//     // Submit form logic for Edit
//     console.log("Updated");
//   };

//   const handlePageChange = (newPage) => {
//     const firstItem = newPage * 10;
//     const lastItem = firstItem + 9;
//     setPagination({ firstItem, lastItem });
//     fetchData();
//   };

//   return (
//     <div>
//       <div className="clr-row">
//         <div className="clr-col-6" style={{ display: 'flex' }}>
//           <div style={{ marginRight: 25 }}>
//             <h4 style={{ fontWeight: 300 }}>Menu Access Control</h4>
//           </div>
//           <div style={{ marginTop: 27, position: 'relative' }}>
//             <span className="label label-light-blue" style={{ display: 'inline' }}>Edit Mode</span>
//           </div>
//         </div>
//         <div className="clr-col-6" style={{ textAlign: 'right' }}>
//           For
//           <select
//             style={{ height: '30px' }}
//             onChange={(e) => handleSelectChange(e.target.value)}
//           >
//             {alldata.map(sub => (
//               <option key={sub.usrGrp} value={sub.usrGrp} selected={sub.usrGrp === 40}>
//                 {sub.groupName}
//               </option>
//             ))}
//           </select>
//           <button
//             style={{ marginLeft: '20px' }}
//             onClick={fetchData}
//           >
//             Reload
//           </button>
//           <span>{toggle ? 'Only Main Menu' : 'Show All'}</span>
//           <label className="switch">
//             <input
//               type="checkbox"
//               checked={toggle}
//               onClick={handleToggleCheckbox}
//             />
//             <span className="slider round"></span>
//           </label>
//         </div>
//       </div>
//       <hr />
//       <div className="dg-wrapper">
//         <div className="clr-row">
//           <div className="clr-col-12" style={{ textAlign: 'right' }}>
//             <button
//               style={{ marginLeft: '20px' }}
//               onClick={handleModalAddToggle}
//             >
//               <span className="icon-plus"></span>Add
//             </button>
//           </div>
//         </div>

//         <div className={`clr-datagrid ${loading ? 'loading' : ''}`}>
//           {loading ? (
//             <div>Loading ...</div>
//           ) : (
//             <>
//               <div className="clr-dg-placeholder">
//                 <div>No data available</div>
//               </div>

//               <div className="clr-dg-column">
//                 <div>NO</div>
//                 <div>Menu Item Name</div>
//                 <div>View</div>
//                 <div>Create</div>
//                 <div>Edit</div>
//                 <div>Delete</div>
//                 <div>Query</div>
//                 <div>Export</div>
//               </div>

//               {alldata.slice(pagination.firstItem, pagination.lastItem + 1).map((all, i) => (
//                 <div key={i} className="clr-dg-row">
//                   <div>{i + 1}</div>
//                   <div>{all.menuId === 0 ? <b>{all.menuItemDesc}</b> : `&nbsp;&nbsp;&nbsp;${all.menuItemDesc}`}</div>
//                   <div>
//                     <input
//                       type="checkbox"
//                       checked={all.mvisible}
//                       onChange={(e) => handleInputChange(e, 'mvisible')}
//                     />
//                   </div>
//                   <div>
//                     <input
//                       type="checkbox"
//                       checked={all.mcreate}
//                       onChange={(e) => handleInputChange(e, 'mcreate')}
//                     />
//                   </div>
//                   <div>
//                     <input
//                       type="checkbox"
//                       checked={all.medit}
//                       onChange={(e) => handleInputChange(e, 'medit')}
//                     />
//                   </div>
//                   <div>
//                     <input
//                       type="checkbox"
//                       checked={all.mdelete}
//                       onChange={(e) => handleInputChange(e, 'mdelete')}
//                     />
//                   </div>
//                   <div>
//                     <input
//                       type="checkbox"
//                       checked={all.mquery}
//                       onChange={(e) => handleInputChange(e, 'mquery')}
//                     />
//                   </div>
//                   <div>
//                     <input
//                       type="checkbox"
//                       checked={all.mexport}
//                       onChange={(e) => handleInputChange(e, 'mexport')}
//                     />
//                   </div>

//                   <div>
//                     <button onClick={() => handleModalEditToggle(all)}>Edit</button>
//                     {all.menuId !== 0 ? (
//                       <button onClick={() => handleModalDelete(all)}>Delete</button>
//                     ) : (
//                       <button onClick={() => handleModalDeleteMainMenu(all)}>Delete Menu+Submenu</button>
//                     )}
//                   </div>

//                   {all.menuId === 0 && (
//                     <div className="clr-dg-row-detail">
//                       <table className="table">
//                         <tr>
//                           <td className="td-title">Menuname</td>
//                           <td className="td-content"></td>
//                         </tr>
//                       </table>
//                     </div>
//                   )}
//                 </div>
//               ))}

//               <div className="clr-dg-footer">
//                 <div>
//                   <span>Record per page</span>
//                   <select onChange={(e) => handleSelectChange(e.target.value)}>
//                     <option value="10">10</option>
//                     <option value="20">20</option>
//                     <option value="50">50</option>
//                     <option value="100">100</option>
//                   </select>
//                 </div>
//                 <div>
//                   <button disabled={pagination.firstItem === 0} onClick={() => handlePageChange(pagination.firstItem / 10 - 1)}>Previous</button>
//                   <button disabled={pagination.lastItem >= pagination.totalItems - 1} onClick={() => handlePageChange(pagination.firstItem / 10 + 1)}>Next</button>
//                 </div>
//                 <div>
//                   {pagination.firstItem + 1} - {pagination.lastItem + 1} of {pagination.totalItems} Records
//                 </div>
//               </div>
//             </>
//           )}
//         </div>
//       </div>

//       {/* Modal for Add */}
//       <div className={`modal ${modalAdd ? 'open' : ''}`}>
//         <h3>Menu Access Control Add Mode</h3>
//         <div>
//           <form onSubmit={handleSubmit}>
//             <div className="clr-row">
//               <div className="clr-col-md-6 clr-col-sm-12">
//                 <label>Menu Name<span className="required-field">*</span></label>
//                 <select
//                   onChange={(e) => handleSelectChange(e.target.value)}
//                   style={{ width: '100%', padding: '5px', border: '1px solid #ccc', borderRadius: '4px' }}
//                 >
//                   {menus.map(sub => (
//                     <option key={sub.menuItemId} value={sub.menuItemId}>{sub.menuItemDesc}</option>
//                   ))}
//                 </select>
//               </div>
//             </div>
//             <div className="modal-footer">
//               <button type="button" onClick={handleModalAddToggle}>Cancel</button>
//               <button type="submit">ADD</button>
//             </div>
//           </form>
//         </div>
//       </div>

//       {/* Modal for Edit */}
//       <div className={`modal ${modalEdit ? 'open' : ''}`}>
//         <h3>Menu Access Control Edit Mode</h3>
//         <div>
//           <form onSubmit={handleUpdate}>
//             <div className="clr-row">
//               <div className="clr-col-md-6 clr-col-sm-12">
//                 <label>Menu Name<span className="required-field">*</span></label>
//                 <select
//                   onChange={(e) => handleSelectChange(e.target.value)}
//                   style={{ width: '100%', padding: '5px', border: '1px solid #ccc', borderRadius: '4px' }}
//                 >
//                   {menus.map(sub => (
//                     <option key={sub.menuItemId} value={sub.menuItemId}>{sub.menuItemDesc}</option>
//                   ))}
//                 </select>
//               </div>
//             </div>
//             <div className="clr-row">
//               <div className="clr-col-md-3 clr-col-sm-12">
//                 <label>Visible</label>
//                 <input
//                   type="checkbox"
//                   name="mvisible"
//                   checked={rowSelected.mvisible}
//                   onChange={(e) => handleInputChange(e, 'mvisible')}
//                 />
//               </div>
//               <div className="clr-col-md-3 clr-col-sm-12">
//                 <label>Create</label>
//                 <input
//                   type="checkbox"
//                   name="mcreate"
//                   checked={rowSelected.mcreate}
//                   onChange={(e) => handleInputChange(e, 'mcreate')}
//                 />
//               </div>
//               <div className="clr-col-md-3 clr-col-sm-12">
//                 <label>Edit</label>
//                 <input
//                   type="checkbox"
//                   name="medit"
//                   checked={rowSelected.medit}
//                   onChange={(e) => handleInputChange(e, 'medit')}
//                 />
//               </div>
//               <div className="clr-col-md-3 clr-col-sm-12">
//                 <label>Delete</label>
//                 <input
//                   type="checkbox"
//                   name="mdelete"
//                   checked={rowSelected.mdelete}
//                   onChange={(e) => handleInputChange(e, 'mdelete')}
//                 />
//               </div>
//               <div className="clr-col-md-3 clr-col-sm-12">
//                 <label>Query</label>
//                 <input
//                   type="checkbox"
//                   name="mquery"
//                   checked={rowSelected.mquery}
//                   onChange={(e) => handleInputChange(e, 'mquery')}
//                 />
//               </div>
//               <div className="clr-col-md-3 clr-col-sm-12">
//                 <label>Export</label>
//                 <input
//                   type="checkbox"
//                   name="mexport"
//                   checked={rowSelected.mexport}
//                   onChange={(e) => handleInputChange(e, 'mexport')}
//                 />
//               </div>
//             </div>
//             <div className="modal-footer">
//               <button type="button" onClick={handleModalEditToggle}>Cancel</button>
//               <button type="submit">UPDATE</button>
//             </div>
//           </form>
//         </div>
//       </div>
//     </div>
//   );
// };

// export default MenuAccessControl;

// import React, { useState, useEffect } from "react";
// import apiService from "../../APIRequestService/APIService";
// import { getToken } from '../../utils/tokenService';
// import {
//   Button,
//   Modal,
//   ModalHeader,
//   ModalBody,
//   ModalFooter,
//   Form,
//   FormGroup,
//   Label,
//   Input,
//   Select,
//   Table,
//   InputGroup
// } from "reactstrap";

// // import { getByUsrGrpId } from "../../APIServices/";



// const MenuAccessControl = () => {
//   const [alldata, setAlldata] = useState([]);
//   const [toggle, setToggle] = useState(false);
//   const [menus, setMenus] = useState([]);
//   const [modalAdd, setModalAdd] = useState(false);
//   const [modalEdit, setModalEdit] = useState(false);
//   const [rowSelected, setRowSelected] = useState({});
//   const [loading, setLoading] = useState(true);
//   const [usrgrp, setUsrgrp] = useState('');
//   const [pagination, setPagination] = useState({
//     firstItem: 0,
//     lastItem: 9,
//     totalItems: 0,
//   });

//   useEffect(() => {
//     const apiUrl = `${process.env.REACT_APP_API_URL}/api1/getusracces1/${usrgrp}`;
//     const token = localStorage.getItem("authToken");

//     const fetchData = async () => {
//       // Fetch data logic
//       try {
//         console.log("applying fetch menu items");

//         const response = await fetch(apiUrl, {
//           method: 'GET',
//           headers: {
//             "Content-Type": "application/json",
//             Authorization: `Bearer ${token}`,
//           }
//         });

//         console.log("response", response); // Log the response to debug
//         if (!response.ok) {
//           throw new Error(`HTTP error! status: ${response.status}`);
//         }
//         const data = await response.json();
//         setAlldata(data.items);
//         setPagination({ ...pagination, totalItems: data.totalItems });
//         setLoading(false);
//       } catch (error) {
//         console.error("Error fetching data:", error);
//       }
//     };

//     fetchData(); // Call the fetchData function

//   }, [usrgrp]);// Add 'usrgrp' as a dependency

//   const handleToggleCheckbox = () => {
//     setToggle(!toggle);
//   };

//   const handleInputChange = (event, field) => {
//     setRowSelected((prev) => ({
//       ...prev,
//       [field]: event.target.checked,
//     }));
//   };

//   const handleSelectChange = (value) => {
//     console.log(value);
//   };

//   const handleModalAddToggle = () => {
//     setModalAdd(!modalAdd);
//   };

//   const handleModalEditToggle = (item) => {
//     setRowSelected(item);
//     setModalEdit(!modalEdit);
//   };

//   const handleModalDelete = () => {
//     const updatedData = alldata.filter(
//       (item) => item.menuId !== rowSelected.menuId
//     );
//     setAlldata(updatedData);
//     setModalEdit(false);
//   };

//   const handleModalDeleteMainMenu = (all) => {
//     const updatedData = alldata.filter(
//       (item) => item.menuId !== all.menuId && item.parentMenuId !== all.menuId
//     );
//     setAlldata(updatedData);
//     setModalEdit(false);
//   };

//   const handleSubmit = () => {
//     console.log("Submitted");
//   };

//   const handleUpdate = () => {
//     console.log("Updated");
//   };

//   const handlePageChange = (newPage) => {
//     const firstItem = newPage * 10;
//     const lastItem = firstItem + 9;
//     setPagination({ firstItem, lastItem });
//     fetchData();
//   };

//   return (
//     <div>
//       <div className="clr-row">
//         <div className="d-flex align-items-center" style={{ gap: "15px" }}>
//           <h4 style={{ fontWeight: 300, margin: 0 }}>Menu Access Control</h4>
//           <span
//             className="badge bg-info text-white"
//             style={{ fontSize: "14px", padding: "5px 10px", lineHeight: "1" }}
//           >
//             Edit Mode
//           </span>
//         </div>

//         <div
//           className="d-flex align-items-center justify-content-end"
//           style={{ gap: "15px" }}
//         >
//           <span>For</span>
//           <select
//             className="form-select"
//             style={{ width: "150px", height: "40px" }}
//             onChange={(e) => handleSelectChange(e.target.value)}
//           >
//             {alldata.map((sub) => (
//               <option
//                 key={sub.usrGrp}
//                 value={sub.usrGrp}
//                 selected={sub.usrGrp === 40}
//               >
//                 {sub.groupName}
//               </option>
//             ))}
//           </select>

//           <Button
//             variant="primary"
//             className="ml-3"
//             style={{ height: "40px", lineHeight: "1.2" }}
//             onClick={fetchData}
//           >
//             Reload
//           </Button>

//           <span style={{ fontWeight: "500" }}>
//             {toggle ? "Only Main Menu" : "Show All"}
//           </span>

//           <div className="form-check form-switch">
//             <input
//               className="form-check-input"
//               type="checkbox"
//               id="toggleSwitch"
//               checked={toggle}
//               onChange={handleToggleCheckbox}
//             />
//             <label className="form-check-label" htmlFor="toggleSwitch">
//               Toggle
//             </label>
//           </div>
//         </div>
//       </div>
//       <hr />
//       <div className="dg-wrapper">
//         <div className="clr-row">
//           <div className="clr-col-12" style={{ textAlign: "right" }}>
//             <Button
//               color="primary"
//               style={{ marginLeft: "20px" }}
//               onClick={handleModalAddToggle}
//             >
//               <span className="icon-plus"></span> Add
//             </Button>
//           </div>
//         </div>

//         <div className={`clr-datagrid ${loading ? "loading" : ""}`}>
//     {loading ? (
//       <div>Loading...</div>
//     ) : (
//       <>
//         <div className="text-center my-3">
//           {alldata.length === 0 && <div>No data available</div>}
//         </div>

//         <Table striped bordered hover responsive>
//           <thead>
//             <tr>
//               <th>NO</th>
//               <th>Menu Item Name</th>
//               <th>View</th>
//               <th>Create</th>
//               <th>Edit</th>
//               <th>Delete</th>
//               <th>Query</th>
//               <th>Export</th>
//               <th>Actions</th>
//             </tr>
//           </thead>
//           <tbody>
//             {alldata
//               .slice(pagination.firstItem, pagination.lastItem + 1)
//               .map((all, i) => (
//                 <tr key={i}>
//                   <td>{i + 1}</td>
//                   <td>
//                     {all.menuId === 0 ? (
//                       <strong>{all.menuItemDesc}</strong>
//                     ) : (
//                       <span style={{ paddingLeft: "20px" }}>
//                         {all.menuItemDesc}
//                       </span>
//                     )}
//                   </td>
//                   <td>
//                     <Form.Check
//                       type="checkbox"
//                       checked={all.mvisible}
//                       onChange={(e) => handleInputChange(e, "mvisible")}
//                     />
//                   </td>
//                   <td>
//                     <Form.Check
//                       type="checkbox"
//                       checked={all.mcreate}
//                       onChange={(e) => handleInputChange(e, "mcreate")}
//                     />
//                   </td>
//                   <td>
//                     <Form.Check
//                       type="checkbox"
//                       checked={all.medit}
//                       onChange={(e) => handleInputChange(e, "medit")}
//                     />
//                   </td>
//                   <td>
//                     <Form.Check
//                       type="checkbox"
//                       checked={all.mdelete}
//                       onChange={(e) => handleInputChange(e, "mdelete")}
//                     />
//                   </td>
//                   <td>
//                     <Form.Check
//                       type="checkbox"
//                       checked={all.mquery}
//                       onChange={(e) => handleInputChange(e, "mquery")}
//                     />
//                   </td>
//                   <td>
//                     <Form.Check
//                       type="checkbox"
//                       checked={all.mexport}
//                       onChange={(e) => handleInputChange(e, "mexport")}
//                     />
//                   </td>
//                   <td>
//                     <Button
//                       variant="secondary"
//                       size="sm"
//                       onClick={() => handleModalEditToggle(all)}
//                     >
//                       Edit
//                     </Button>
//                     <Button
//                       variant="danger"
//                       size="sm"
//                       className="ms-2"
//                       onClick={() =>
//                         all.menuId !== 0
//                           ? handleModalDelete(all)
//                           : handleModalDeleteMainMenu(all)
//                       }
//                     >
//                       {all.menuId !== 0 ? "Delete" : "Delete Menu+Submenu"}
//                     </Button>
//                   </td>
//                 </tr>
//               ))}
//           </tbody>
//         </Table>

//         <div className="d-flex justify-content-between align-items-center mt-3">
//           <div>
//             <span>Records per page</span>
//             <Form.Select
//               className="ms-2"
//               style={{ width: "120px", display: "inline" }}
//               onChange={(e) => handleSelectChange(e.target.value)}
//             >
//               <option value="10">10</option>
//               <option value="20">20</option>
//               <option value="50">50</option>
//               <option value="100">100</option>
//             </Form.Select>
//           </div>
//           <div>
//             <Button
//               variant="primary"
//               disabled={pagination.firstItem === 0}
//               onClick={() => handlePageChange(pagination.firstItem / 10 - 1)}
//             >
//               Previous
//             </Button>
//             <Button
//               variant="primary"
//               className="ms-2"
//               disabled={pagination.lastItem >= pagination.totalItems - 1}
//               onClick={() => handlePageChange(pagination.firstItem / 10 + 1)}
//             >
//               Next
//             </Button>
//           </div>
//           <div>
//             {pagination.firstItem + 1} - {pagination.lastItem + 1} of{" "}
//             {pagination.totalItems} Records
//           </div>
//         </div>
//       </>
//     )}
//   </div>
//       </div>

//       {/* Modal for Add */}
//       <Modal isOpen={modalAdd} toggle={handleModalAddToggle}>
//         <ModalHeader toggle={handleModalAddToggle}>
//           Menu Access Control Add Mode
//         </ModalHeader>
//         <ModalBody>
//           <Form onSubmit={handleSubmit}>
//             <FormGroup>
//               <Label for="menuName">Menu Name</Label>
//               <Input
//                 type="select"
//                 id="menuName"
//                 onChange={(e) => handleSelectChange(e.target.value)}
//               >
//                 {menus.map((sub) => (
//                   <option key={sub.menuItemId} value={sub.menuItemId}>
//                     {sub.menuItemDesc}
//                   </option>
//                 ))}
//               </Input>
//             </FormGroup>
//             <ModalFooter>
//               <Button color="secondary" onClick={handleModalAddToggle}>
//                 Cancel
//               </Button>
//               <Button type="submit" color="primary">
//                 ADD
//               </Button>
//             </ModalFooter>
//           </Form>
//         </ModalBody>
//       </Modal>

//       {/* Modal for Edit */}
//       <Modal isOpen={modalEdit} toggle={handleModalEditToggle}>
//         <ModalHeader toggle={handleModalEditToggle}>
//           Menu Access Control Edit Mode
//         </ModalHeader>
//         <ModalBody>
//           <Form onSubmit={handleUpdate}>
//             <FormGroup>
//               <Label for="menuName">Menu Name</Label>
//               <Input
//                 type="select"
//                 id="menuName"
//                 onChange={(e) => handleSelectChange(e.target.value)}
//               >
//                 {menus.map((sub) => (
//                   <option key={sub.menuItemId} value={sub.menuItemId}>
//                     {sub.menuItemDesc}
//                   </option>
//                 ))}
//               </Input>
//             </FormGroup>
//             <FormGroup row>
//               <Label for="mvisible" className="col-md-3">
//                 Visible
//               </Label>
//               <div className="col-md-9">
//                 <Input
//                   type="checkbox"
//                   name="mvisible"
//                   checked={rowSelected.mvisible}
//                   onChange={(e) => handleInputChange(e, "mvisible")}
//                 />
//               </div>
//             </FormGroup>
//             <FormGroup row>
//               <Label for="mcreate" className="col-md-3">
//                 Create
//               </Label>
//               <div className="col-md-9">
//                 <Input
//                   type="checkbox"
//                   name="mcreate"
//                   checked={rowSelected.mcreate}
//                   onChange={(e) => handleInputChange(e, "mcreate")}
//                 />
//               </div>
//             </FormGroup>
//             <FormGroup row>
//               <Label for="medit" className="col-md-3">
//                 Edit
//               </Label>
//               <div className="col-md-9">
//                 <Input
//                   type="checkbox"
//                   name="medit"
//                   checked={rowSelected.medit}
//                   onChange={(e) => handleInputChange(e, "medit")}
//                 />
//               </div>
//             </FormGroup>
//             <FormGroup row>
//               <Label for="mdelete" className="col-md-3">
//                 Delete
//               </Label>
//               <div className="col-md-9">
//                 <Input
//                   type="checkbox"
//                   name="mdelete"
//                   checked={rowSelected.mdelete}
//                   onChange={(e) => handleInputChange(e, "mdelete")}
//                 />
//               </div>
//             </FormGroup>
//             <FormGroup row>
//               <Label for="mquery" className="col-md-3">
//                 Query
//               </Label>
//               <div className="col-md-9">
//                 <Input
//                   type="checkbox"
//                   name="mquery"
//                   checked={rowSelected.mquery}
//                   onChange={(e) => handleInputChange(e, "mquery")}
//                 />
//               </div>
//             </FormGroup>
//             <FormGroup row>
//               <Label for="mexport" className="col-md-3">
//                 Export
//               </Label>
//               <div className="col-md-9">
//                 <Input
//                   type="checkbox"
//                   name="mexport"
//                   checked={rowSelected.mexport}
//                   onChange={(e) => handleInputChange(e, "mexport")}
//                 />
//               </div>
//             </FormGroup>
//             <ModalFooter>
//               <Button color="secondary" onClick={handleModalEditToggle}>
//                 Cancel
//               </Button>
//               <Button type="submit" color="primary">
//                 UPDATE
//               </Button>
//             </ModalFooter>
//           </Form>
//         </ModalBody>
//       </Modal>
//     </div>
//   );
// };

// export default MenuAccessControl;



import React, { useState, useEffect } from "react";
import apiService from "../../APIRequestService/APIService";
import { getToken } from '../../utils/tokenService';
import {
  Button,
  Modal,
  ModalHeader,
  ModalBody,
  ModalFooter,
  Form,
  FormGroup,
  Label,
  Input,
  Table,
  InputGroup
} from "reactstrap";

const MenuAccessControl = () => {
  const [alldata, setAlldata] = useState([]);
  const [toggle, setToggle] = useState(false);
  const [menus, setMenus] = useState([]);
  const [modalAdd, setModalAdd] = useState(false);
  const [modalEdit, setModalEdit] = useState(false);
  const [rowSelected, setRowSelected] = useState({});
  const [loading, setLoading] = useState(true);
  const [usrgrp, setUsrgrp] = useState('');
  const [pagination, setPagination] = useState({
    firstItem: 0,
    lastItem: 9,
    totalItems: 0,
  });

  useEffect(() => {
    fetchData(); // Call the fetchData function
  }, [usrgrp]); // Add 'usrgrp' as a dependency


  const fetchData = async () => {
    const apiUrl = `${process.env.REACT_APP_API_URL}api1/getusracces1/${usrgrp}`;
     const token = localStorage.getItem("authToken");
    try {
      setLoading(true); // Start loading
      const response = await fetch(apiUrl, {
        method: 'GET',
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${token}`,
        }
      });

      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      console.log("data:", data); // Log the fetched data
      setAlldata(data.items);
      setPagination({ ...pagination, totalItems: data.totalItems });
      setLoading(false); // Stop loading
      const data = await response.json();

    } catch (error) {
      console.error("Error fetching data:", error);
      setLoading(false); // Stop loading in case of error
    }
  };

  const handleToggleCheckbox = () => {
    setToggle(!toggle);
  };

  const handleInputChange = (event, field) => {
    setRowSelected((prev) => ({
      ...prev,
      [field]: event.target.checked,
    }));
  };

  const handleSelectChange = (value) => {
    setUsrgrp(value);
  };

  const handleModalAddToggle = () => {
    setModalAdd(!modalAdd);
  };

  const handleModalEditToggle = (item) => {
    setRowSelected(item);
    setModalEdit(!modalEdit);
  };

  const handleModalDelete = () => {
    const updatedData = alldata.filter(
      (item) => item.menuId !== rowSelected.menuId
    );
    setAlldata(updatedData);
    setModalEdit(false);
  };

  const handleModalDeleteMainMenu = (all) => {
    const updatedData = alldata.filter(
      (item) => item.menuId !== all.menuId && item.parentMenuId !== all.menuId
    );
    setAlldata(updatedData);
    setModalEdit(false);
  };

  const handleSubmit = () => {
    console.log("Submitted");
  };

  const handleUpdate = () => {
    console.log("Updated");
  };

  const handleSelect = () =>{
    
  }

  const handlePageChange = (newPage) => {
    const firstItem = newPage * 10;
    const lastItem = firstItem + 9;
    setPagination({ firstItem, lastItem });
    fetchData();
  };

  return (
    <div>
      <div className="clr-row">
        <div className="d-flex align-items-center" style={{ gap: "15px" }}>
          <h4 style={{ fontWeight: 300, margin: 0 }}>Menu Access Control</h4>
          <span
            className="badge bg-info text-white"
            style={{ fontSize: "14px", padding: "5px 10px", lineHeight: "1" }}
          >
            Edit Mode
          </span>
        </div>

        <div
          className="d-flex align-items-center justify-content-end"
          style={{ gap: "15px" }}
        >
          <span>For</span>
          <select
            className="form-select"
            style={{ width: "150px", height: "40px" }}
            onChange={(e) => handleSelectChange(e.target.value)}
          >
            {alldata.map((sub) => (
              <option
                key={sub.usrGrp}
                value={sub.usrGrp}
                selected={sub.usrGrp === 40}
              >
                {sub.groupName}
              </option>
            ))}
          </select>

          <Button
            variant="primary"
            className="ml-3"
            style={{ height: "40px", lineHeight: "1.2" }}
            onClick={() => fetchData()}
          >
            Reload
          </Button>

          <span style={{ fontWeight: "500" }}>
            {toggle ? "Only Main Menu" : "Show All"}
          </span>

          <div className="form-check form-switch">
            <input
              className="form-check-input"
              type="checkbox"
              id="toggleSwitch"
              checked={toggle}
              onChange={handleToggleCheckbox}
            />
            <label className="form-check-label" htmlFor="toggleSwitch">
              Toggle
            </label>
          </div>
        </div>
      </div>
      <hr />
      <div className="dg-wrapper">
        <div className="clr-row">
          <div className="clr-col-12" style={{ textAlign: "right" }}>
            <Button
              color="primary"
              style={{ marginLeft: "20px" }}
              onClick={handleModalAddToggle}
            >
              <span className="icon-plus"></span> Add
            </Button>
          </div>
        </div>

        <div className={`clr-datagrid ${loading ? "loading" : ""}`}>
          {loading ? (
            <div>Loading...</div>
          ) : (
            <>
              <div className="text-center my-3">
                {alldata.length === 0 && <div>No data available</div>}
              </div>

              <Table striped bordered hover responsive>
                <thead>
                  <tr>
                    <th>NO</th>
                    <th>Menu Item Name</th>
                    <th>View</th>
                    <th>Create</th>
                    <th>Edit</th>
                    <th>Delete</th>
                    <th>Query</th>
                    <th>Export</th>
                    <th>Actions</th>
                  </tr>
                </thead>
                <tbody>
                  {alldata
                    .slice(pagination.firstItem, pagination.lastItem + 1)
                    .map((all, i) => (
                      <tr key={i}>
                        <td>{i + 1}</td>
                        <td>
                          {all.menuId === 0 ? (
                            <strong>{all.menuItemDesc}</strong>
                          ) : (
                            <span style={{ paddingLeft: "20px" }}>
                              {all.menuItemDesc}
                            </span>
                          )}
                        </td>
                        <td>
                          <Form.Check
                            type="checkbox"
                            checked={all.mvisible}
                            onChange={(e) => handleInputChange(e, "mvisible")}
                          />
                        </td>
                        <td>
                          <Form.Check
                            type="checkbox"
                            checked={all.mcreate}
                            onChange={(e) => handleInputChange(e, "mcreate")}
                          />
                        </td>
                        <td>
                          <Form.Check
                            type="checkbox"
                            checked={all.medit}
                            onChange={(e) => handleInputChange(e, "medit")}
                          />
                        </td>
                        <td>
                          <Form.Check
                            type="checkbox"
                            checked={all.mdelete}
                            onChange={(e) => handleInputChange(e, "mdelete")}
                          />
                        </td>
                        <td>
                          <Form.Check
                            type="checkbox"
                            checked={all.mquery}
                            onChange={(e) => handleInputChange(e, "mquery")}
                          />
                        </td>
                        <td>
                          <Form.Check
                            type="checkbox"
                            checked={all.mexport}
                            onChange={(e) => handleInputChange(e, "mexport")}
                          />
                        </td>
                        <td>
                          <Button
                            variant="secondary"
                            size="sm"
                            onClick={() => handleModalEditToggle(all)}
                          >
                            Edit
                          </Button>
                          <Button
                            variant="danger"
                            size="sm"
                            className="ms-2"
                            onClick={() =>
                              all.menuId !== 0
                                ? handleModalDelete(all)
                                : handleModalDeleteMainMenu(all)
                            }
                          >
                            {all.menuId !== 0 ? "Delete" : "Delete Menu+Submenu"}
                          </Button>
                        </td>
                      </tr>
                    ))}
                </tbody>
              </Table>

              <div className="d-flex justify-content-between align-items-center mt-3">
                <div>
                  <span>Records per page</span>
                  <Form.Select
                    className="ms-2"
                    style={{ width: "120px", display: "inline" }}
                    onChange={(e) =>
                      setPagination({
                        ...pagination,
                        firstItem: 0,
                        lastItem: e.target.value - 1,
                      })
                    }
                  >
                    <option value="10">10</option>
                    <option value="25">25</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                  </Form.Select>
                </div>

                <div>
                  <Button
                    variant="outline-primary"
                    onClick={() => handlePageChange(0)}
                    disabled={pagination.firstItem === 0}
                  >
                    First
                  </Button>
                  <Button
                    variant="outline-primary"
                    className="ms-2"
                    onClick={() => handlePageChange(pagination.firstItem / 10 - 1)}
                    disabled={pagination.firstItem === 0}
                  >
                    Prev
                  </Button>
                  <Button
                    variant="outline-primary"
                    className="ms-2"
                    onClick={() => handlePageChange(pagination.firstItem / 10 + 1)}
                    disabled={pagination.lastItem >= pagination.totalItems - 1}
                  >
                    Next
                  </Button>
                  <Button
                    variant="outline-primary"
                    className="ms-2"
                    onClick={() => handlePageChange(Math.floor(pagination.totalItems / 10))}
                    disabled={pagination.lastItem >= pagination.totalItems - 1}
                  >
                    Last
                  </Button>
                </div>
              </div>
            </>
          )}
        </div>
      </div>

      <Modal isOpen={modalAdd} toggle={handleModalAddToggle}>
        <ModalHeader toggle={handleModalAddToggle}>Add Menu Access</ModalHeader>
        <ModalBody>
          <Form>
            <FormGroup>
              <Label for="menuItemName">Menu Item Name</Label>
              <Input
                type="text"
                name="menuItemName"
                id="menuItemName"
                placeholder="Enter menu item name"
              />
            </FormGroup>
            <FormGroup>
              <Label for="view">View</Label>
              <InputGroup>
                <Input
                  type="checkbox"
                  name="view"
                  id="view"
                  onChange={handleInputChange}
                />
                <Label for="view" check>View</Label>
              </InputGroup>
            </FormGroup>
            {/* Add other fields similarly */}
          </Form>
        </ModalBody>
        <ModalFooter>
          <Button color="primary" onClick={handleSubmit}>Add</Button>{' '}
          <Button color="secondary" onClick={handleModalAddToggle}>Cancel</Button>
        </ModalFooter>
      </Modal>

      <Modal isOpen={modalEdit} toggle={handleModalEditToggle}>
        <ModalHeader toggle={handleModalEditToggle}>Edit Menu Access</ModalHeader>
        <ModalBody>
          <Form>
            <FormGroup>
              <Label for="editMenuItemName">Menu Item Name</Label>
              <Input
                type="text"
                name="editMenuItemName"
                id="editMenuItemName"
                placeholder="Enter menu item name"
                value={rowSelected.menuItemDesc}
                onChange={handleInputChange}
              />
            </FormGroup>
            <FormGroup>
              <Label for="editView">View</Label>
              <InputGroup>
                <Input
                  type="checkbox"
                  name="editView"
                  id="editView"
                  checked={rowSelected.mvisible}
                  onChange={handleInputChange}
                />
                <Label for="editView" check>View</Label>
              </InputGroup>
            </FormGroup>
            {/* Add other fields similarly */}
          </Form>
        </ModalBody>
        <ModalFooter>
          <Button color="primary" onClick={handleUpdate}>Update</Button>{' '}
          <Button color="secondary" onClick={handleModalEditToggle}>Cancel</Button>
        </ModalFooter>
      </Modal>
    </div>
  );
};

export default MenuAccessControl;
