// import React, { useEffect, useState, useRef } from "react";
// import { Modal, Table } from "react-bootstrap";
// import ErrorLogService from "../../../../services/ErrorLogService";
// import Alert from "../../../../components/Common/Alert";
// import { requestRegularizationTime } from "../../../../services/TicketService/TaskService";
// import { getRegularizationTime, changeStatusRegularizationTime } from '../../../../services/TicketService/TaskService';
// import { Label } from "recharts";

// const RequestModal = (props) => {

//   const [notify, setNotify] = useState(null);
//   const [inputList, setInputList] = useState([
//     {
//       // date: "",
//       from_time: "00:00",
//       to_time: "00:00",
//       from_date: null,
//       to_date: null
//     },
//   ]);

//   const [date, setDate] = useState("");
//   const [time, setTime] = useState(null);

//   const [fromTime, setFromTime] = useState('');
//   const [toTime, setToTime] = useState('');
//   const [timeDifference, setTimeDifference] = useState('');



//   const currentDate = new Date();
//   const year = currentDate.getFullYear();
//   const month = String(currentDate.getMonth() + 1).padStart(2, '0');
//   const day = String(currentDate.getDate()).padStart(2, '0');
//   const formattedDate = `${year}-${month}-${day}`;


//   const handleInputChange = (e, index) => {
//     const { name, value } = e.target;
//     const list = [...inputList];
//     list[index] = { ...list[index], [name]: value };

//     const fromDateList = list.map(item => item[`from_date[${index}]`]);
//     const toDateList = list.map(item => item[`to_date[${index}]`]);

//     // const payload = {
//     //   from_date: fromDateList.filter(date => date !== undefined),
//     //   to_date: toDateList.filter(date => date !== undefined),
//     //   // Add other relevant values from the component state or props
//     //   // Example: fromDate: date,
//     //   //          fromTime: time,
//     //   //          ...
//     // };

//     if (name.includes("from_date")) {
//       setDate(value);
//     }
//     if (name.includes("from_time")) {
//       setTime(value);
//     }

//     setInputList(list);
//   };



//   const statusValue = props.data.regularized_data.map((i)=>i.status)
 

//   const [timeData, setTimeData] = useState({});
//   var ticket_id = props.data.ticket_id;
//   var ticket_basket_id = props.data.ticket_basket_id;
//   var task_owner_id = localStorage.getItem("id");
//   var ticket_task_id = props.data.id;


//   const [firstCheckboxChecked, setFirstCheckboxChecked] = useState(false);
//   const [secondCheckboxChecked, setSecondCheckboxChecked] = useState(false);
//   const [showModal, setShowModal] = useState(false);

//   const handleFirstCheckboxChange = (e) => {
//     if (e) {
//       setFirstCheckboxChecked(e.target.checked);
//       if (e.target.checked) {
//         handleSecondCheckboxChange({ target: { checked: false } });
//       }
//     }
//   };

//   const handleSecondCheckboxChange = (e) => {
//     if (e) {
//       setSecondCheckboxChecked(e.target.checked);
//       if (e.target.checked) {
//         handleFirstCheckboxChange({ target: { checked: false } });
//       }
//     }
//   };




//   const [rows, setRows] = useState([{ increaseChecked: false, decreaseChecked: false, value: 0, actual_time: null }]);
  // const addRow = () => {
  //   setRows(prevRows => [...prevRows, { increaseChecked: false, decreaseChecked: false, value: 0, actual_time: null }]);
  // };




//   // Assuming you are using React and have a state variable called 'values'




//   const calculateTimeDifference = () => {
//     // Your existing code for calculating the time difference goes here
//     if (fromTime && toTime) {
//       const fromDateTime = new Date(`2000-01-01T${fromTime}`);
//       const toDateTime = new Date(`2000-01-01T${toTime}`);

//       const timeDiffMs = toDateTime - fromDateTime;
//       const timeDiffMinutes = Math.floor(timeDiffMs / (1000 * 60));

//       let hours = Math.floor(timeDiffMinutes / 60);
//       let minutes = timeDiffMinutes % 60;

//       if (hours === 24 && minutes === 0) {
//         hours = 0;
//         minutes = 0;
//       }

//       const formattedTime = `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`;

//       setTimeDifference(formattedTime); // Assuming setTimeDifference is a state setter function

//       return formattedTime;
//     }

//     return '';
//   };

//   const handleActualTimeChange = (index, fromTime, toTime) => {
//     const calculateTimeDifference = (fromTime, toTime) => {
//       if (fromTime && toTime) {
//         const fromDateTime = new Date(`2000-01-01T${fromTime}`);
//         const toDateTime = new Date(`2000-01-01T${toTime}`);

//         const timeDiffMs = toDateTime - fromDateTime;
//         const timeDiffMinutes = Math.floor(timeDiffMs / (1000 * 60));

//         let hours = Math.floor(timeDiffMinutes / 60);
//         let minutes = timeDiffMinutes % 60;

//         if (hours === 24 && minutes === 0) {
//           hours = 0;
//           minutes = 0;
//         }

//         const formattedTime = `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`;

//         return formattedTime;
//       }

//       return '';
//     };

//     setRows((prev) => {
//       return prev.map((data, rowIndex) => {
//         if (rowIndex === index) {
//           const newData = { ...data }; // Create a new copy of the row data
//           newData.from_time = fromTime; // Update the from_time value
//           newData.to_time = toTime; // Update the to_time value
//           newData.actual_time = calculateTimeDifference(fromTime, toTime); // Calculate and set the actual_time
//           return newData;
//         } else {
//           return data;
//         }
//       });
//     });
//   };




//   const handleRowInputChange = (e, rowIndex) => {
//     const { name, value, type, checked } = e.target;
//     const updatedRows = rows.map((row, index) => {
//       if (index === rowIndex) {
//         if (type === "checkbox") {
//           return { ...row, [name]: checked };
//         } else if (name === "actual_time[]") {
//           const formattedTime = calculateTimeDifference(value);
//           return { ...row, [name]: value, timeDifference: formattedTime };
//         } else {
//           return { ...row, [name]: value };
//         }
//       } else {
//         return row;
//       }
//     });

//     setRows(updatedRows);
//     setDate(e.target.value)
//   };






//   // const handleIncreaseChange = (index) => {
//   //   const updatedRows = [...rows];
//   //   updatedRows[index].increaseChecked = true;
//   //   updatedRows[index].decreaseChecked = false;
//   //   setRows(updatedRows);
//   // };

//   // This function is called when the checkbox for regularization time increase is clicked.
// const handleIncreaseChange = (index) => {
//   // Create a copy of the 'rows' array to avoid directly modifying the state.
//   const updatedRows = [...rows];

//   // Set the 'increaseChecked' property of the row at the specified index to true.
//   updatedRows[index].increaseChecked = true;

//   // Set the 'decreaseChecked' property of the same row to false.
//   updatedRows[index].decreaseChecked = false;

//   // Update the state with the modified array of rows.
//   setRows(updatedRows);
// };


//   const handleActualChange = (index) => {
//     const updatedRows = [...rows];
//     updatedRows[index].actual_time = timeDifference;
//     setRows(updatedRows);
//   };

//   // const handleDecreaseChange = (index) => {
//   //   const updatedRows = [...rows];
//   //   updatedRows[index].decreaseChecked = true;
//   //   updatedRows[index].increaseChecked = false;
//   //   setRows(updatedRows);
//   // };



//   // This function is called when the checkbox for regularization time decrease is clicked.
// const handleDecreaseChange = (index) => {
//   // Create a copy of the 'rows' array to avoid directly modifying the state.
//   const updatedRows = [...rows];

//   // Set the 'decreaseChecked' property of the row at the specified index to true.
//   updatedRows[index].decreaseChecked = true;

//   // Set the 'increaseChecked' property of the same row to false.
//   updatedRows[index].increaseChecked = false;

//   // Update the state with the modified array of rows.
//   setRows(updatedRows);
// };





//   const handleSubmit = (e) => {
//     e.preventDefault();
//     setNotify(null);


//     const data = new FormData(e.target);
//     data.append('scheduled_time', props.data.task_hours);
//     // data.append('actual_total_time',"00:30");        

//     new requestRegularizationTime(data).then((res) => {
//       if (res.status === 200) {
//         if (res.data.status === 1) {
//           setNotify({ type: "success", message: res.data.message });
//           // window.location.reload(false)
//           props.hide();
//           document.getElementById("requestForm").reset();
//         } else {
//           setNotify({ type: "danger", message: res.data.message });
//         }
//       }

//     });
//   };





//   // handle click event of the Remove button
//   const handleRemoveClick = (index) => {
//     const list = [...rows];
//     list.splice(index, 1);
//     setRows(list);
//   };

//   // handle click event of the Add button
//   const[remark, setRemark] = useState()
//   const handleAddClick = (e) => {
//     setRemark(e.target.value)
//     // setInputList([...inputList, { name: null, id: null }]);
//   };
//   const [approveData, setApproveData] = useState()

//   const getApproveData = () => {


//     new getRegularizationTime(props.data.ticket_id).then(res => {

//       if (res.data.data) {
//         var temp = [];
//         setApproveData(null);
//         res.data.data.forEach(d => {
//           temp.push({
//             'id': d.id,
//             'created_by_name': d.created_by_name,
//             'from_date': d.from_date,
//             'to_date': d.to_date,
//             'from_time': d.from_time,
//             'to_time': d.to_time,
//             'status': d.status,
//             'remark': d.remark,
//             'is_checked': 0,
//             'regularization_time_status': d.regularization_time_status,
//             'task_name': d.task_name,
//             'ticket_id_name': d.ticket_id_name,
//             'ticket_task_id': d.ticket_task_id

//           });
//         })
//         setApproveData(temp);
//       }
//     })

//   }


//   useEffect(() => {
//     calculateTimeDifference();
//   }, [fromTime, toTime, rows]);



//   useEffect(() => {
//     // Code to update the actual_time value automatically
//     const updatedRows = rows.map(row => ({
//       ...row,
//       actual_time: timeDifference
//     }));
//     setRows(updatedRows);
//   }, [timeDifference]);


//   useEffect(() => {
//     setNotify(null);
//     getApproveData()

//   }, []);

//   console.log("row",rows)
//   // const [approvedStatus, setApprovedStatus] = useState()
//   // useEffect(() => {
//   //  props.isRegularised.map((d,i)=>{
//   //   setApprovedStatus(d.status)
//   //  })
//   //  console.log(approvedStatus);
//   // }, [approvedStatus]);

// console.log("statusValue", props.data.regularized_data.length)
// console.log("statusValue==>", statusValue)

//   return (
//     <div>
//       {notify && <Alert alertData={notify} />}
//       <Modal
//         show={props.show}
//         onHide={props.hide}
//         dialogClassName="modal-100w"
//         size="xl"
//         aria-labelledby="example-custom-modal-styling-title"
//       >
//         <Modal.Header
//         closeButton
//         onClick={()=>{ window.location.reload(false)}}
//         >
//           <Modal.Title id="example-custom-modal-styling-title">
//             Request Regularization
//           </Modal.Title>
//         </Modal.Header>
//         <Modal.Header>
//           <Modal.Title id="example-custom-modal-styling-title">
//             <div className="row">
//               {/* <div className="col">
//                 <h6>Task Name</h6>
//               </div> */}                    
//               <div className="col-md" >
//                 <h6 style={{ fontWeight: 'bold', width: '300px' }}>{`Ticket ID: ${props.data.ticket_id_name}`}</h6>
//               </div>
//               <div className="col-md ">
//                 <h6 style={{ fontWeight: 'bold', width: '580px' }}>{`Task Name:
//                 ${props.data.task_name}`}</h6>
//               </div>

//               <div className="col-md">
//                 <h6 style={{ fontWeight: 'bold' }}>{`Scheduled Time: ${props.data.task_hours}`}</h6>
//               </div>
//             </div>
//           </Modal.Title>

//         </Modal.Header>

//         <form onSubmit={handleSubmit} id="requestForm">
//           <input
//             type="hidden"
//             id="ticket_id"
//             name="ticket_id"
//             value={ticket_id}
//           />
//           <input
//             type="hidden"
//             id="ticket_basket_id"
//             name="ticket_basket_id"
//             value={ticket_basket_id}
//           />
//           <input
//             type="hidden"
//             id="ticket_task_id"
//             name="ticket_task_id"
//             value={ticket_task_id}
//           />
// {/* {console.log("hi",props.data.regularized_data.map((i)=>i.status))} */}
//           <Modal.Body>
//             <div className="table-responsive">
//               <table
//                 className="table table-bordered mt-3 table-responsive"
//                 id="tab_logic"
//               >
//                 <thead>
//                   <tr>
//                     <th className="text-center"> Sr No </th>
//                     <th className="text-center"> From Date </th>
//                     <th className="text-center"> To Date </th>
//                     <th className="text-center"> From Time </th>
//                     <th className="text-center"> To Time </th>
//                     <th className="text-center"> Actual Time </th>


//                     <th className="text-center"> Increase Time </th>
//                     <th className="text-center"> Decrease Time </th>
//                     <th className="text-center"> Remark </th>
//                     <th className="text-center"> Action</th>
//                   </tr>
//                 </thead>
//                 <tbody>
                 
// {/* Updated by  */}

//                   {/* {rows.map((row, index) => (
                               
//                     <tr key={index}>

//                       <td>{index + 1}</td>
//                       <td>
//                         <input
//                           type="date"
//                           className="form-control form-control-sm"
//                           name={`from_date[${index}]`}
//                           defaultValue={props.data.from_date ? props.data.from_date : props.data.start_date}
//                           max={formattedDate}
//                           onChange={(e) => handleRowInputChange(e, index)}
//                           required
//                           disabled={props.data.regularized_data.length == 0 || statusValue === "REJECTED"  ? false :true }
//                         />
//                       </td>
//                       <td>
//                         <input
//                           type="date"
//                           className="form-control form-control-sm"
//                           name={`to_date[${index}]`}

//                           defaultValue={props.data.to_date ? props.data.to_date : props.data.end_date}
//                           min={date}
//                           max={formattedDate}
//                           onChange={(e) => handleRowInputChange(e, index)}
//                           required
//                           disabled={props.data.regularized_data.length > 0 || statusValue === "REJECT"  ? false :true }

//                           // disabled={props.data.is_regularized === "YES" ? true : false}
//                           // disabled={props.data.is_regularized === "YES" && props.isRegularised.filter((d)=>d.ticket_task_id == props.data.id).map((i)=>i.status) != "REJECTED"  ? true : false}

//                         />
//                       </td>
//                       <td>
//                         <input
//                           type="time"
//                           className="form-control form-control-sm"
//                           name="from_time[]"
//                           defaultValue={row.from_time || ''}
//                           onChange={(e) => handleActualTimeChange(index, e.target.value, row.to_time)}
//                           required
//                           disabled={props.data.regularized_data.length <= 0 || statusValue === "REJECT"  ? false :true }

//                         />
//                         <i className="icofont-clock"></i>

//                       </td>
//                       <td>
//                         <input
//                           type="time"
//                           className="form-control form-control-sm"
//                           name="to_time[]"
//                           defaultValue={row.to_time || ''}
//                           onChange={(e) => handleActualTimeChange(index, row.from_time, e.target.value)}
//                           required
//                           disabled={props.data.regularized_data.length <= 0 || statusValue === "REJECT"  ? false :true }

//                         />
//                       </td>
//                       <td>
//                         <input
//                           type="text"
//                           className="form-control form-control-sm-2"
//                           name="actual_time[]"
//                           style={{ width: "5rem", height: 32 }}
//                           value={row.actual_time}
//                           required
//                           disabled={props.data.regularized_data.length <= 0 || statusValue === "REJECT"  ? false :true }

//                         />
//                       </td>



//                       {props.data.regularization_time_status ?

//                         <td >
//                           <input
//                             type="checkbox"
//                             checked={props.data.regularization_time_status === "YES" ? true : false}
//                             onChange={() => handleIncreaseChange(index)}

//                             value="YES"
//                             disabled={props.data.regularized_data.length <= 0 || statusValue === "REJECT"  ? false :true }



//                           />
//                         </td>

//                         :
//                         <td >
//                           <input
//                             type="checkbox"
//                             checked={row.increaseChecked}
//                             onChange={() => handleIncreaseChange(index)}
//                             name="regularization_time_status"
//                             id="regularization_time_status"
//                             value="YES"
//                             disabled={props.data.regularized_data.length <= 0 || statusValue === "REJECT"  ? false :true }

//                           />
//                           <i className="icofont-long-arrow-up" style={{ fontSize: "34px", color: 'red' }}></i>
//                         </td>
//                       }


//                       {props.data.regularization_time_status ?
//                         <td>
//                           <input
//                             type="checkbox"
//                             checked={props.data.regularization_time_status === "NO" ? true : false}
//                             onChange={() => handleDecreaseChange(index)}
//                             name="regularization_time_status"
//                             id="regularization_time_status"
//                             value="NO"
//                             disabled={props.data.regularized_data.length <= 0 || statusValue === "REJECT"  ? false :true }

//                             // disabled={props.data.is_regularized === "NO" ? true : false}

//                           />
//                           <i className="icofont-long-arrow-down" style={{ fontSize: "34px", color: 'green' }}></i>
//                         </td>

//                         :
//                         <td>
//                           <input
//                             type="checkbox"
//                             checked={row.decreaseChecked}
//                             onChange={() => handleDecreaseChange(index)}
//                             name="regularization_time_status"
//                             id="regularization_time_status"
//                             value="NO"
//                             disabled={props.data.regularized_data.length <= 0 || statusValue === "REJECT"  ? false :true }

//                           />
//                           <i className="icofont-long-arrow-down" style={{ fontSize: "34px", color: 'green' }}></i>
//                         </td>


//                       }
//                       <td >
//                         <input
//                         title={remark && remark ?remark : ""}
//                           type="text"
//                           className="form-control form-control-sm"
//                           name="remark[]"
//                           onChange={e=> handleAddClick(e)}
//                           defaultValue={props.data.remark}
//                           required
//                           disabled={props.data.regularized_data.length <= 0 || statusValue === "REJECT"  ? false :true }

//                           // disabled={props.data.is_regularized === "YES" ? true : false}
//                           // disabled={props.data.is_regularized === "YES" && props.isRegularised.filter((d)=>d.ticket_task_id == props.data.id).map((i)=>i.status) != "REJECTED"  ? true : false}


//                         />
//                       </td>
//                       <td>

//                         {index + 1 == 1 && (
//                           <button
//                             onClick={addRow}
//                             className="btn btn-primary"
//                             style={{ backgroundColor: "#484C7F" }}
//                             // disabled={props.data.is_regularized === "YES" ? true : false}
//                           // disabled={props.data.is_regularized === "YES" && props.isRegularised.filter((d)=>d.ticket_task_id == props.data.id).map((i)=>i.status) != "REJECTED"  ? true : false}
//                           disabled={props.data.regularized_data.length <= 0 || statusValue === "REJECT"  ? false :true }


//                           >
//                             <i className="icofont-plus-circle"></i>
//                           </button>
//                         )}

//                         {index + 1 > 1 && (
//                           <button
//                             className="mr10 mr-1 btn btn-danger"
//                             onClick={() => handleRemoveClick()}
//                           >
//                             <i className="icofont-ui-delete"></i>
//                           </button>
//                         )}


//                       </td>

//                     </tr>
//                   ))} */}


//  {props && props.isRegularisedData.length == 0 || props && props.isRegularisedData.length == 1 && props.isRegularisedData.filter((d)=>d.status === "REJECTED").map((i)=>i.status) == "REJECTED" || props && props.isRegularisedData.length == 2 && props.isRegularisedData.filter((d)=>d.status === "APPROVED").map((i)=>i.status) != "APPROVED"?
// <>

// {rows.map((row, index) => {


//                     return <tr key={index}>


//                       <td>{index + 1}</td>
//                       <td>

//                         <input
//                           type="date"
//                           className="form-control form-control-sm"
//                           name={`from_date[${index}]`}
//                           defaultValue={props.data.from_date ? props.data.from_date : props.data.start_date}
//                           max={formattedDate}
//                           onChange={(e) => handleRowInputChange(e, index)}
//                           required

//                         />
//                       </td>


//                       <td>
//                         <input
//                           type="date"
//                           className="form-control form-control-sm"
//                           name={`to_date[${index}]`}

//                           defaultValue={props.data.to_date ? props.data.to_date : props.data.end_date}
//                           min={date}
//                           max={formattedDate}
//                           onChange={(e) => handleRowInputChange(e, index)}
//                           required
//                           disabled={props.data.is_regularized === "YES" ? true : false}

//                         />
//                       </td>
//                       <td>
//                         <input
//                           type="time"
//                           className="form-control form-control-sm"
//                           name="from_time[]"
//                           defaultValue={row.from_time || ''}
//                           onChange={(e) => handleActualTimeChange(index, e.target.value, row.to_time)}
//                           required
//                           disabled={props.data.is_regularized === "YES" ? true : false}

//                         />
//                         <i className="icofont-clock"></i>

//                       </td>
//                       <td>
//                         <input
//                           type="time"
//                           className="form-control form-control-sm"
//                           name="to_time[]"
//                           defaultValue={row.to_time || ''}
//                           onChange={(e) => handleActualTimeChange(index, row.from_time, e.target.value)}
//                           required
//                           disabled={props.data.is_regularized === "YES" ? true : false}

//                         />
//                       </td>
//                       <td>
//                         <input
//                           type="text"
//                           className="form-control form-control-sm-2"
//                           name="actual_time[]"
//                           style={{ width: "5rem", height: 32 }}
//                           value={row.actual_time}
//                           required
//                           disabled={props.data.is_regularized === "YES" ? true : false}

//                         />
//                       </td>




//                       <td >
//                         <input
//                           title={remark && remark ? remark : ""}
//                           type="text"
//                           className="form-control form-control-sm"
//                           name="remark[]"
//                           onChange={e => handleAddClick(e)}
//                           defaultValue={props.data.remark}
//                           required
//                           disabled={props.data.is_regularized === "YES" ? true : false}
//                         // disabled={props.data.is_regularized === "YES" && props.isRegularised.filter((d)=>d.ticket_task_id == props.data.id).map((i)=>i.status) != "REJECTED"  ? true : false}


//                         />
//                       </td>
//                       <td>

//                         {index + 1 == 1 && (
//                           <button
//                             onClick={addRow}
//                             className="btn btn-primary"
//                             style={{ backgroundColor: "#484C7F" }}
//                             disabled={props.data.is_regularized === "YES" ? true : false}
//                           // disabled={props.data.is_regularized === "YES" && props.isRegularised.filter((d)=>d.ticket_task_id == props.data.id).map((i)=>i.status) != "REJECTED"  ? true : false}


//                           >
//                             <i className="icofont-plus-circle"></i>
//                           </button>
//                         )}

//                         {index + 1 > 1 && (
//                           <button
//                             className="mr10 mr-1 btn btn-danger"
//                             onClick={() => handleRemoveClick()}
//                           >
//                             <i className="icofont-ui-delete"></i>
//                           </button>
//                         )}


//                       </td>

//                     </tr>
//                   })}

// </>: <>  
//  {rows.map((row, index) => {
//                     // console.log("props.isss", props.isRegularisedData.length)
//                     // console.log("props.isssSTATUS", props.isRegularisedData.filter((d)=>d.status === "PENDING").map((i)=>i.status))
//                     // console.log("r", props.isRegularisedData.filter((d)=>d.status != "REJECTED").map((i)=>i.status ))

//                     return <tr key={index}>


//                       <td>{index + 1}</td>
//                       <td>

//                         <input
//                           type="date"
//                           className="form-control form-control-sm"
//                           name={`from_date[${index}]`}
//                           defaultValue={props.isRegularisedData.map((i)=>i.from_date)}
//                           max={formattedDate}
//                           onChange={(e) => handleRowInputChange(e, index)}
//                           required
//                           disabled={true}
// // disabled={props.isRegularisedData.length == 0 ||  props.isRegularisedData.length == 1 && props.isRegularisedData.filter((d)=>d.status === "PENDING").map((i)=>i.status === []) || props.isRegularisedData.filter((d)=>d.status === "REJECTED").map((i)=>i.status === []) || props.isRegularisedData.filter((d)=>d.status === ["PENDING"]).map((i)=>i.status === ["PENDING"]) || props.isRegularisedData.filter((d)=>d.status === "REJECTED").map((i)=>i.status === []) || props.isRegularisedData.filter((d)=>d.status === "REJECTED").map((i)=>i.status === "REJECTED") ? false : true}

//                           // disabled=
//                            // Change this to true if you want to disable when status is not "REJECTED"
//                         />
//                       </td>


//                       <td>
//                         <input
//                           type="date"
//                           className="form-control form-control-sm"
//                           name={`to_date[${index}]`}
//                           disabled={true}

//                           defaultValue={props.isRegularisedData.map((i)=>i.to_date)}
//                           min={date}
//                           max={formattedDate}
//                           onChange={(e) => handleRowInputChange(e, index)}
//                           required
//                           // disabled={props.data.is_regularized === "YES" ? true : false}
//                         // disabled={props.data.is_regularized === "YES" && props.isRegularised.filter((d)=>d.ticket_task_id == props.data.id).map((i)=>i.status) != "REJECTED"  ? true : false}

//                         />
//                       </td>
//                       <td>
//                         <input
//                           type="time"
//                           className="form-control form-control-sm"
//                           name="from_time[]"
//                           defaultValue={props.isRegularisedData.map((i)=>i.from_time)}
//                           onChange={(e) => handleActualTimeChange(index, e.target.value, row.to_time)}
//                           required
//                           // disabled={props.data.is_regularized === "YES" ? true : false}
//                           disabled={true}

//                         />
//                         <i className="icofont-clock"></i>

//                       </td>
//                       <td>
//                         <input
//                           type="time"
//                           className="form-control form-control-sm"
//                           name="to_time[]"
//                           defaultValue={props.isRegularisedData.map((i)=>i.to_time)}
//                           onChange={(e) => handleActualTimeChange(index, row.from_time, e.target.value)}
//                           required
//                           // disabled={props.data.is_regularized === "YES" ? true : false}
//                           disabled={true}

//                         />
//                       </td>
//                       <td>
//                         <input
//                           type="text"
//                           className="form-control form-control-sm-2"
//                           name="actual_time[]"
//                           style={{ width: "5rem", height: 32 }}
//                           value={row.actual_time}
//                           required
//                           // disabled={props.data.is_regularized === "YES" ? true : false}
//                           disabled={true}

//                         />
//                       </td>




//                       <td >
//                         <input
//                           title={remark && remark ? remark : ""}
//                           type="text"
//                           className="form-control form-control-sm"
//                           name="remark[]"
//                           onChange={e => handleAddClick(e)}
//                           defaultValue={ props.isRegularisedData.map((i)=>i.remark)}
//                           required

//                           // disabled={props.data.is_regularized === "YES" ? true : false}
//                         // disabled={props.data.is_regularized === "YES" && props.isRegularised.filter((d)=>d.ticket_task_id == props.data.id).map((i)=>i.status) != "REJECTED"  ? true : false}
//                         disabled={true}


//                         />
//                       </td>
//                       <td>

//                         {index + 1 == 1 && (
//                           <button
//                             onClick={addRow}
//                             className="btn btn-primary"
//                             style={{ backgroundColor: "#484C7F" }}
//                           disabled={true}

//                             // disabled={props.data.is_regularized === "YES" ? true : false}
//                           // disabled={props.data.is_regularized === "YES" && props.isRegularised.filter((d)=>d.ticket_task_id == props.data.id).map((i)=>i.status) != "REJECTED"  ? true : false}


//                           >
//                             <i className="icofont-plus-circle"></i>
//                           </button>
//                         )}

//                         {index + 1 > 1 && (
//                           <button
//                             className="mr10 mr-1 btn btn-danger"
//                             onClick={() => handleRemoveClick()}
//                           >
//                             <i className="icofont-ui-delete"></i>
//                           </button>
//                         )}


//                       </td>

//                     </tr>
//                   })}
//                   </>}


//                 </tbody>
//               </table>
//             </div>
//           </Modal.Body>
//           <Modal.Footer>
//             <button
//               type="submit"
//               className="btn btn-sm btn-primary"
//               style={{ backgroundColor: "#484C7F" }}
//               disabled={props.data.regularized_data.length <= 0 || statusValue === "REJECT"  ? false :true }

//               // disabled={props.data.is_regularized === "YES" ? true : false}
//               // disabled={props.data.is_regularized === "YES" && props.isRegularised.filter((d)=>d.ticket_task_id == props.data.id).map((i)=>i.status) != "REJECTED"  ? true : false}


//             >
//               Submit
//             </button>
//           </Modal.Footer>
//         </form>
//       </Modal>
//     </div>
//   );
// };

// export default RequestModal;



// import React, { useEffect, useState, useRef } from "react";
// import { Modal, Table } from "react-bootstrap";
// import ErrorLogService from "../../../../services/ErrorLogService";
// import Alert from "../../../../components/Common/Alert";
// import { requestRegularizationTime } from "../../../../services/TicketService/TaskService";
// import { getRegularizationTime,getRegularizationTimeData, changeStatusRegularizationTime } from '../../../../services/TicketService/TaskService';
// import { Label } from "recharts";

// const RequestModal = (props) => {

//   const [notify, setNotify] = useState(null);
//   const [inputList, setInputList] = useState([
//     {
//       // date: "",
//       from_time: "00:00",
//       to_time: "00:00",
//       from_date: null,
//       to_date: null
//     },
//   ]);

//   const [date, setDate] = useState("");
//   const [time, setTime] = useState(null);

//   const [fromTime, setFromTime] = useState('');
//   const [toTime, setToTime] = useState('');
//   const [timeDifference, setTimeDifference] = useState('');



//   const currentDate = new Date();
//   const year = currentDate.getFullYear();
//   const month = String(currentDate.getMonth() + 1).padStart(2, '0');
//   const day = String(currentDate.getDate()).padStart(2, '0');
//   const formattedDate = `${year}-${month}-${day}`;

  

//   const handleFromDate = (e) => {
//     setDate(e.target.value);

//   };

//   const [timeData, setTimeData] = useState({});
//   var ticket_id = props.data.ticket_id;
//   var ticket_basket_id = props.data.ticket_basket_id;
//   var task_owner_id = localStorage.getItem("id");
//   var ticket_task_id = props.data.id;


//   const [firstCheckboxChecked, setFirstCheckboxChecked] = useState(false);
//   const [secondCheckboxChecked, setSecondCheckboxChecked] = useState(false);
//   const [showModal, setShowModal] = useState(false);

//   const handleFirstCheckboxChange = (e) => {
//     if (e) {
//       setFirstCheckboxChecked(e.target.checked);
//       if (e.target.checked) {
//         handleSecondCheckboxChange({ target: { checked: false } });
//       }
//     }
//   };

//   const handleSecondCheckboxChange = (e) => {
//     if (e) {
//       setSecondCheckboxChecked(e.target.checked);
//       if (e.target.checked) {
//         handleFirstCheckboxChange({ target: { checked: false } });
//       }
//     }
//   };










//   // This function is called when the checkbox for regularization time increase is clicked.
//   const handleIncreaseChange = (index) => {
//     // Create a copy of the 'rows' array to avoid directly modifying the state.
//     const updatedRows = [...rows];

//     // Set the 'increaseChecked' property of the row at the specified index to true.
//     updatedRows[index].increaseChecked = true;

//     // Set the 'decreaseChecked' property of the same row to false.
//     updatedRows[index].decreaseChecked = false;

//     // Update the state with the modified array of rows.
//     setRows(updatedRows);
//   };


//   const handleActualChange = (index) => {
//     const updatedRows = [...rows];
//     updatedRows[index].actual_time = timeDifference;
//     setRows(updatedRows);
//   };





//   // This function is called when the checkbox for regularization time decrease is clicked.
//   const handleDecreaseChange = (index) => {
//     // Create a copy of the 'rows' array to avoid directly modifying the state.
//     const updatedRows = [...rows];

//     // Set the 'decreaseChecked' property of the row at the specified index to true.
//     updatedRows[index].decreaseChecked = true;

//     // Set the 'increaseChecked' property of the same row to false.
//     updatedRows[index].increaseChecked = false;

//     // Update the state with the modified array of rows.
//     setRows(updatedRows);
//   };





//   const handleSubmit = (e) => {
//     e.preventDefault();
//     setNotify(null);


//     const data = new FormData(e.target);
//     data.append('scheduled_time', props.data.task_hours);
//     // data.append('actual_total_time',"00:30");        

//     new requestRegularizationTime(data).then((res) => {
//       if (res.status === 200) {
//         if (res.data.status === 1) {
//           setNotify({ type: "success", message: res.data.message });
//           loadData()
//           // window.location.reload(false)
//           props.hide();
//           document.getElementById("requestForm").reset();
//         } else {
//           setNotify({ type: "danger", message: res.data.message });
//         }
//       }

//     });
//   };





//   // handle click event of the Remove button
//   const handleRemoveClick = (index) => {
//     const list = [...rows];
//     list.splice(index, 1);
//     setRows(list);
//   };

//   // handle click event of the Add button
//   const [remark, setRemark] = useState()
//   const handleAddClick = (e) => {
//     setRemark(e.target.value)
//     // setInputList([...inputList, { name: null, id: null }]);
//   };
//   const [approveData, setApproveData] = useState()

//   const getApproveData = () => {


//     new getRegularizationTime(props.data.ticket_id).then(res => {

//       if (res.data.data) {
//         var temp = [];
//         setApproveData(null);
//         res.data.data.forEach(d => {
//           temp.push({
//             'id': d.id,
//             'created_by_name': d.created_by_name,
//             'from_date': d.from_date,
//             'to_date': d.to_date,
//             'from_time': d.from_time,
//             'to_time': d.to_time,
//             'status': d.status,
//             'remark': d.remark,
//             'is_checked': 0,
//             'regularization_time_status': d.regularization_time_status,
//             'task_name': d.task_name,
//             'ticket_id_name': d.ticket_id_name,
//             'ticket_task_id': d.ticket_task_id

//           });
//         })
//         setApproveData(temp);
//       }
//     })

//   }
// const [regularizeTimeData,setRegularizeTimeData]=useState([])

//   const loadData = () => {

//     new getRegularizationTimeData(props.data.ticket_id,props.data.id).then(res => {
//         if (res.data.data) {
//             // setData(null);
//             setRegularizeTimeData(res.data.data)
         
//         }
//     })

// }

//   // useEffect(() => {
//   //   calculateTimeDifference();
//   // }, [fromTime, toTime, rows]);


// // console.log("hii",props.data)
//   useEffect(() => {
//     // Code to update the actual_time value automatically
//     const updatedRows = rows.map(row => ({
//       ...row,
//       actual_time: timeDifference
//     }));
//     setRows(updatedRows);
//   }, [timeDifference]);


//   useEffect(() => {
//     setNotify(null);
//     getApproveData()
//   }, []);

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






//   const [rows, setRows] = useState([
//     { from_date: '', to_date: '', from_time: '', to_time: '', actual_time: '' },
//     // Add more rows as needed
//   ]);
  


//   const calculateTimeDifference = (fromDate, toDate, fromTime, toTime) => {
//     if (fromDate && toDate && fromTime && toTime) {
//       const fromDateObj = new Date(fromDate);
//       const toDateObj = new Date(toDate);
  
//       // Extract hours and minutes from the time strings
//       const fromHours = Number(fromTime.split(':')[0]);
//       const fromMinutes = Number(fromTime.split(':')[1]);
//       const toHours = Number(toTime.split(':')[0]);
//       const toMinutes = Number(toTime.split(':')[1]);
  
//       fromDateObj.setHours(fromHours, fromMinutes);
//       toDateObj.setHours(toHours, toMinutes);
  
//       // Calculate the time difference in milliseconds
//       const timeDiffMs = toDateObj - fromDateObj;
  
//       // Ensure the time difference is positive
//       const positiveTimeDiffMs = Math.abs(timeDiffMs);
  
//       const timeDiffMinutes = Math.floor(positiveTimeDiffMs / (1000 * 60));
//       const hours = Math.floor(timeDiffMinutes / 60);
//       const minutes = (timeDiffMinutes % 60).toString().padStart(2, '0');
  
//       return `${hours}:${minutes}`;
//     }
  
//     return '';
//   };
  
//   const addRow = () => {
//         setRows(prevRows => [...prevRows, { increaseChecked: false, decreaseChecked: false, value: 0, actual_time: null }]);
//       };
    
  
//   const handleActualTimeChange = (index, fromTime, toTime) => {
//     const fromDate = rows[index].from_date;
//     const toDate = rows[index].to_date;
    
//     const actualTime = calculateTimeDifference(fromDate, toDate, fromTime, toTime);
    
//     setRows((prev) => {
//       return prev.map((data, rowIndex) => {
//         if (rowIndex === index) {
//           const newData = { ...data };
//           newData.from_time = fromTime;
//           newData.to_time = toTime;
//           newData.actual_time = actualTime;
//           return newData;
//         } else {
//           return data;
//         }
//       });
//     });
//   };
  
//   const handleDateChange = (index, dateType, value) => {
//     setRows((prev) => {
//       const updatedRows = prev.map((data, rowIndex) => {
//         if (rowIndex === index) {
//           return { ...data, [dateType]: value };
//         } else {
//           return data;
//         }
//       });
      
//       const updatedFromTime = updatedRows[index].from_time;
//       const updatedToTime = updatedRows[index].to_time;
//       const actualTime = calculateTimeDifference(
//         updatedRows[index].from_date,
//         updatedRows[index].to_date,
//         updatedFromTime,
//         updatedToTime
//       );
      
//       updatedRows[index].actual_time = actualTime;
//       return updatedRows;
//     });
//   };
  
//   const handleInputChange = (e, index) => {
//     const { name, value } = e.target;
//     setRows((prev) =>
//       prev.map((data, rowIndex) =>
//         rowIndex === index ? { ...data, [name]: value } : data
//       )
//     );
//   };


//   return (
    
//     <div>
//       {notify && <Alert alertData={notify} />}
//       <Modal
//         show={props.show}
//         onHide={props.hide}
//         dialogClassName="modal-100w"
//         size="xl"
//         aria-labelledby="example-custom-modal-styling-title"
//       >
//         <Modal.Header
//           closeButton
//           onClick={() => { window.location.reload(false) }}
//         >
//           <Modal.Title id="example-custom-modal-styling-title">
//             Time Regularization
//           </Modal.Title>
//         </Modal.Header>
//         <Modal.Header>
//           <Modal.Title id="example-custom-modal-styling-title">

//   <div className="row">

// <div className="col-md" >
//   <h6 style={{ fontWeight: 'bold', width: '300px' }}>{`Ticket ID: ${props.data.ticket_id_name}`}</h6>
// </div>
// <div className="col-md ">
//   <h6 style={{ fontWeight: 'bold', width: '580px' }}>{`Task Name:
//   ${props.data.task_name}`}</h6>
// </div>

// <div className="col-md">
//   <h6 style={{ fontWeight: 'bold' }}>{`Scheduled Time: ${props.data.task_hours}`}</h6>
// </div>
// </div>
            
           
//           </Modal.Title>
//         </Modal.Header>

//         <form onSubmit={handleSubmit} id="requestForm">
//           <input
//             type="hidden"
//             id="ticket_id"
//             name="ticket_id"
//             value={ticket_id}
//           />
//           <input
//             type="hidden"
//             id="ticket_basket_id"
//             name="ticket_basket_id"
//             value={ticket_basket_id}
//           />
//           <input
//             type="hidden"
//             id="ticket_task_id"
//             name="ticket_task_id"
//             value={ticket_task_id}
//           />

//           <Modal.Body>
//             <div className="table-responsive">
//               <table
//                 className="table table-bordered mt-3 table-responsive"
//                 id="tab_logic"
//               >
//                 <thead>
//                   <tr>
//                     <th className="text-center"> Sr No </th>
//                     <th className="text-center"> From Date </th>
//                     <th className="text-center"> To Date </th>
//                     <th className="text-center"> From Time </th>
//                     <th className="text-center"> To Time </th>
//                     <th className="text-center"> Actual Time </th>


//                     <th className="text-center"> Remark </th>
//                     <th className="text-center"> Action</th>
//                   </tr>
//                 </thead>
//                 <tbody>



                 
// {console.log("re",regularizeTimeData)}



// {regularizeTimeData && regularizeTimeData.length > 0 ?
//  <> 

//                      { regularizeTimeData && regularizeTimeData.map((x, index) => {
//                                 return <tr id={`addr_${index}`} key={index}>
//                       <td>{index + 1}</td>
                      
//                       {rows && rows.map((row,i)=>{
//                         return<>
//                       <td>

//                         <input
//                           type="date"
//                           className="form-control form-control-sm"
//                           name={`from_date[${index}]`}
//                           defaultValue={x.from_date}
//                           max={formattedDate}
//                           required
//                           disabled={x.status === "REJECTED" ? false :true}
//                           // value={row.from_date}
//                           onChange={(e) => handleDateChange(index, 'from_date', e.target.value)}


//                         />
//                       </td>


//                       <td>
//                         <input
//                           type="date"
//                           className="form-control form-control-sm"
//                           name={`to_date[${index}]`}
//                           disabled={x.status === "REJECTED" ? false :true}
                          

//                           defaultValue={x.to_date}
//                           // value={row.to_date}
//                           onChange={(e) => handleDateChange(index, 'to_date', e.target.value)}
//                           min={date}
//                           max={formattedDate}
//                           required


//                         />
//                       </td>

// <td>
//                         <input
//                           type="time"
//                           className="form-control form-control-sm"
//                           name="from_time[]"
//                           defaultValue={x.from_time}
//                           disabled={x.status === "REJECTED" ? false :true}
//                           // value={row.from_time}
//                           onChange={(e) => handleActualTimeChange(index, e.target.value, row.to_time)}

//                           required
                         

//                         />
//                         <i className="icofont-clock"></i>

//                       </td>
//                       <td>
//                         <input
//                           type="time"
//                           className="form-control form-control-sm"
//                           name="to_time[]"
//                           disabled={x.status === "REJECTED" ? false :true}

//                           defaultValue={x.to_time}
//                           // value={row.to_time}
//                   onChange={(e) => handleActualTimeChange(index, row.from_time, e.target.value)}
//                           required


//                         />
//                       </td>
// {regularizeTimeData && regularizeTimeData.length > 0 || x.status === "REJECTED" ?  <td>
//                         <input
//                           type="text"
//                           className="form-control form-control-sm"
//                           name="actual_time[]"
//                           disabled={x.status === "REJECTED" ? false :true}
//                           defaultValue={x.total_time }
//                           // value={row.actual_time}
//                           required
                         
//                         />
//                       </td> :
//                       <td>
//                         <input
//                           type="time"
//                           className="form-control form-control-sm"
//                           name="actual_time[]"
//                           disabled={x.status === "REJECTED" ? false :true}
//                           // defaultValue={x.total_time }
//                           value={row.actual_time}
//                           required
                         
//                         />
//                       </td>}
//                       </>})}

//                       <td >
//                         <input
//                           title={remark && remark ? remark : ""}
//                           type="text"
//                           className="form-control form-control-sm"
//                           name="remark[]"
//                           onChange={e => handleAddClick(e)}
//                           defaultValue={ x.remark}
//                           required
//                           disabled={x.status === "REJECTED" ? false :true}


//                         />
//                       </td>
//                       <td>

//                         {index + 1 == 1 && (
//                           <button
//                             onClick={addRow}
//                             className="btn btn-primary"
//                             style={{ backgroundColor: "#484C7F" }}
//                             disabled={x.status === "REJECTED" ? false :true}





//                           >
//                             <i className="icofont-plus-circle"></i>
//                           </button>
//                         )}

//                         {index + 1 > 1 && (
//                           <button
//                             className="mr10 mr-1 btn btn-danger"
//                             onClick={() => handleRemoveClick()}
//                           disabled={x.status === "REJECTED" ? false :true}

//                           >
//                             <i className="icofont-ui-delete"></i>
//                           </button>
//                         )}


//                       </td>

//                     </tr>
//                       //  })}
//                   })}
//                    </>

//                   : 
                  
                  
                  
//                   <>
//                   {rows.map((row, index) => {
//                                 return <tr key={index}>


//                       <td>{index + 1}</td>
//                       <td>
//                       <input
//                           type="date"
//                           className="form-control form-control-sm"
//                           name={`from_date[${index}]`}
//                           // disabled={true}

//                           // defaultValue={props.isRegularisedData.map((i)=>i.to_date)}
//                           // min={date}
//                           max={formattedDate}
//                           // onChange={(e) => handleRowInputChange(e, index)}
//                           value={row.from_date}
//                   onChange={(e) => handleDateChange(index, 'from_date', e.target.value)}
//                           required
//                           // disabled={props.data.is_regularized === "YES" ? true : false}
//                         // disabled={props.data.is_regularized === "YES" && props.isRegularised.filter((d)=>d.ticket_task_id == props.data.id).map((i)=>i.status) != "REJECTED"  ? true : false}

//                         />
//                       </td>


//                       <td>
//                         <input
//                           type="date"
//                           className="form-control form-control-sm"
//                           name={`to_date[${index}]`}
//                           // disabled={true}

//                           // defaultValue={props.isRegularisedData.map((i)=>i.to_date)}
//                           min={date}
//                           max={formattedDate}
//                           // onChange={(e) => handleRowInputChange(e, index)}
//                           value={row.to_date}
//                           onChange={(e) => handleDateChange(index, 'to_date', e.target.value)}
//                           required
//                           // disabled={props.data.is_regularized === "YES" ? true : false}
//                         // disabled={props.data.is_regularized === "YES" && props.isRegularised.filter((d)=>d.ticket_task_id == props.data.id).map((i)=>i.status) != "REJECTED"  ? true : false}

//                         />
//                       </td>
//                       <td>
//                         <input
//                           type="time"
//                           className="form-control form-control-sm"
//                           name="from_time[]"
//                           // defaultValue={props.isRegularisedData.map((i)=>i.from_time)}
//                           // onChange={(e) => handleActualTimeChange(index, e.target.value, row.to_time)}
//                           value={row.from_time}
//                   onChange={(e) => handleActualTimeChange(index, e.target.value, row.to_time)}
//                           required
//                           // disabled={props.data.is_regularized === "YES" ? true : false}
//                           // disabled={true}

//                         />
//                         <i className="icofont-clock"></i>

//                       </td>


                      
//                       <td>
//                         <input
//                           type="time"
//                           className="form-control form-control-sm"
//                           name="to_time[]"
//                           // defaultValue={props.isRegularisedData.map((i)=>i.to_time)}
//                           // onChange={(e) => handleActualTimeChange(index, row.from_time, e.target.value)}
//                           value={row.to_time}
//                   onChange={(e) => handleActualTimeChange(index, row.from_time, e.target.value)}
//                           required
//                           // disabled={props.data.is_regularized === "YES" ? true : false}
//                           // disabled={true}

//                         />
//                       </td>

//                       <td>
//                       <input
//                           type="text"
//                           className="form-control form-control-sm-2"
//                           name="actual_time[]"
//                           style={{ width: "5rem", height: 32 }}
//                           value={row.actual_time}
//                           required
//                           // disabled={props.data.is_regularized === "YES" ? true : false}

//                         />
//                       </td>


//                       <td >
//                         <input
//                           title={remark && remark ? remark : ""}
//                           type="text"
//                           className="form-control form-control-sm"
//                           name="remark[]"
//                           onChange={e => handleAddClick(e)}
//                           // defaultValue={ props.isRegularisedData.map((i)=>i.remark)}
//                           required
//                           // disabled={true}


//                         />
//                       </td>
//                       <td>

//                         {index + 1 == 1 && (
//                           <button
//                             onClick={addRow}
//                             className="btn btn-primary"
//                             style={{ backgroundColor: "#484C7F" }}

                          

//                           >
//                             <i className="icofont-plus-circle"></i>
//                           </button>
//                         )}

//                         {index + 1 > 1 && (
//                           <button
//                             className="mr10 mr-1 btn btn-danger"
//                             onClick={() => handleRemoveClick()}
//                           >
//                             <i className="icofont-ui-delete"></i>
//                           </button>
//                         )}


//                       </td>

//                     </tr>
//                   })}</>}


//                   {/* </>} */}







//                 </tbody>
//               </table>
//             </div>
//           </Modal.Body>
//           <Modal.Footer>

         
                        
//             <button
//               type="submit"
//               className="btn btn-sm btn-primary"
//               style={{ backgroundColor: "#484C7F" }}
//               // disabled={x.status === "REJECTED" ? false : true}
//               >
//               Submit
//        </button> 
     
                      
            
//           </Modal.Footer>
//         </form>
//       </Modal>
//     </div>
//   );
// };

// export default RequestModal;




// import React, { useEffect, useState, useRef } from "react";
// import { Modal, Table } from "react-bootstrap";
// import ErrorLogService from "../../../../services/ErrorLogService";
// import Alert from "../../../../components/Common/Alert";
// import { requestRegularizationTime } from "../../../../services/TicketService/TaskService";
// import { getRegularizationTime,getRegularizationTimeData, changeStatusRegularizationTime } from '../../../../services/TicketService/TaskService';
// import { Label } from "recharts";

// const RequestModal = (props) => {

//   const [notify, setNotify] = useState(null);
//   const [inputList, setInputList] = useState([
//     {
//       // date: "",
//       from_time: "00:00",
//       to_time: "00:00",
//       from_date: null,
//       to_date: null
//     },
//   ]);

//   const [date, setDate] = useState("");
//   const [time, setTime] = useState(null);

//   const [fromTime, setFromTime] = useState('');
//   const [toTime, setToTime] = useState('');
//   const [timeDifference, setTimeDifference] = useState('');



//   const currentDate = new Date();
//   const year = currentDate.getFullYear();
//   const month = String(currentDate.getMonth() + 1).padStart(2, '0');
//   const day = String(currentDate.getDate()).padStart(2, '0');
//   const formattedDate = `${year}-${month}-${day}`;

//   const handleInputChange = (e, index) => {
//     const { name, value } = e.target;
//     const list = [...inputList];
//     list[index] = { ...list[index], [name]: value };

//     const fromDateList = list.map(item => item[`from_date[${index}]`]);
//     const toDateList = list.map(item => item[`to_date[${index}]`]);

//     // const payload = {
//     //   from_date: fromDateList.filter(date => date !== undefined),
//     //   to_date: toDateList.filter(date => date !== undefined),
//     //   // Add other relevant values from the component state or props
//     //   // Example: fromDate: date,
//     //   //          fromTime: time,
//     //   //          ...
//     // };

//     if (name.includes("from_date")) {
//       setDate(value);
//     }
//     if (name.includes("from_time")) {
//       setTime(value);
//     }

//     setInputList(list);
//   };


//   const handleFromDate = (e) => {
//     setDate(e.target.value);
//     // const gettodatevalue = e.target.value;
//     // const setdateformat = gettodatevalue.split('-');
//     // const settoyear = setdateformat[0];
//     // const settomonth = setdateformat[1];
//     // const settodate = setdateformat[2];
//     // const settodateformat = settoyear + "" + settomonth + "" + settodate;
//     // setTodate(gettodatevalue);
//     // setTodateformat(settodateformat);
//   };

//   const [timeData, setTimeData] = useState({});
//   var ticket_id = props.data.ticket_id;
//   var ticket_basket_id = props.data.ticket_basket_id;
//   var task_owner_id = localStorage.getItem("id");
//   var ticket_task_id = props.data.id;


//   const [firstCheckboxChecked, setFirstCheckboxChecked] = useState(false);
//   const [secondCheckboxChecked, setSecondCheckboxChecked] = useState(false);
//   const [showModal, setShowModal] = useState(false);

//   const handleFirstCheckboxChange = (e) => {
//     if (e) {
//       setFirstCheckboxChecked(e.target.checked);
//       if (e.target.checked) {
//         handleSecondCheckboxChange({ target: { checked: false } });
//       }
//     }
//   };

//   const handleSecondCheckboxChange = (e) => {
//     if (e) {
//       setSecondCheckboxChecked(e.target.checked);
//       if (e.target.checked) {
//         handleFirstCheckboxChange({ target: { checked: false } });
//       }
//     }
//   };




//   const [rows, setRows] = useState([{ increaseChecked: false, decreaseChecked: false, value: 0, actual_time: null }]);
//   const addRow = () => {
//     setRows(prevRows => [...prevRows, { increaseChecked: false, decreaseChecked: false, value: 0, actual_time: null }]);
//   };




//   // Assuming you are using React and have a state variable called 'values'




//   const calculateTimeDifference = () => {
//     // Your existing code for calculating the time difference goes here
//     if (fromTime && toTime) {
//       const fromDateTime = new Date(`2000-01-01T${fromTime}`);
//       const toDateTime = new Date(`2000-01-01T${toTime}`);

//       const timeDiffMs = toDateTime - fromDateTime;
//       const timeDiffMinutes = Math.floor(timeDiffMs / (1000 * 60));

//       let hours = Math.floor(timeDiffMinutes / 60);
//       let minutes = timeDiffMinutes % 60;

//       if (hours === 24 && minutes === 0) {
//         hours = 0;
//         minutes = 0;
//       }

//       const formattedTime = `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`;

//       setTimeDifference(formattedTime); // Assuming setTimeDifference is a state setter function

//       return formattedTime;
//     }

//     return '';
//   };
//   const handleActualTimeChange = (index, fromTime, toTime) => {
//     // const calculateTimeDifference = (fromTime, toTime) => {
//     //   if (fromTime && toTime) {
//     //     const fromDateTime = new Date(`2000-01-01T${fromTime}`);
//     //     const toDateTime = new Date(`2000-01-01T${toTime}`);

//     //     const timeDiffMs = toDateTime - fromDateTime;
//     //     const timeDiffMinutes = Math.floor(timeDiffMs / (1000 * 60));

//     //     let hours = Math.floor(timeDiffMinutes / 60);
//     //     let minutes = timeDiffMinutes % 60;

//     //     if (hours === 24 && minutes === 0) {
//     //       hours = 0;
//     //       minutes = 0;
//     //     }

//     //     const formattedTime = `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`;
//     //     console.log("t",formattedTime)

//     //     return formattedTime;

//     //   }

//     //   return '';
//     // };

//     const calculateTimeDifference = (fromTime, toTime) => {
//       if (fromTime && toTime) {
//         const [fromHours, fromMinutes] = fromTime.split(':').map(Number);
//         const [toHours, toMinutes] = toTime.split(':').map(Number);
   
//         let hours = toHours - fromHours;
//         let minutes = toMinutes - fromMinutes;
   
//         if (minutes < 0) {
//           minutes += 60;
//           hours--;
//         }
   
//         if (hours < 0) {
//           hours += 24; // Handle cases where 'toTime' is on the next day
//         }
   
//         const formattedTime = `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`;
//         return formattedTime;
//       }
   
//       return '';
//     };
   
   
   

//     setRows((prev) => {
//       return prev.map((data, rowIndex) => {
//         if (rowIndex === index) {
//           const newData = { ...data }; // Create a new copy of the row data
//           newData.from_time = fromTime; // Update the from_time value
//           newData.to_time = toTime; // Update the to_time value
//           newData.actual_time = calculateTimeDifference(fromTime, toTime); // Calculate and set the actual_time
//           return newData;
//         } else {
//           return data;
//         }
//       });
//     });
//   };




//   // const handleRowInputChange = (e, rowIndex) => {
//   //   const { name, value, type, checked } = e.target;
//   //   const updatedRows = rows.map((row, index) => {
//   //     if (index === rowIndex) {
//   //       if (type === "checkbox") {
//   //         return { ...row, [name]: checked };
//   //       } else if (name === "actual_time[]") {
//   //         const formattedTime = calculateTimeDifference(value);
//   //         return { ...row, [name]: value, timeDifference: formattedTime };
//   //       } else {
//   //         return { ...row, [name]: value };
//   //       }
//   //     } else {
//   //       return row;
//   //     }
//   //   });

//   //   setRows(updatedRows);
//   //   setDate(e.target.value)
//   // };


//   const handleRowInputChange = (e, rowIndex) => {
//     const { name, value, type, checked } = e.target;
//     setDate(e.target.value)
//     const updatedRows = rows.map((row, index) => {
//       if (index === rowIndex) {
//         if (type === "checkbox") {
//           return { ...row, [name]: checked };
//         } else if (name === "actual_time[]") {
//           const formattedTime = calculateTimeDifference(value);
//           return { ...row, [name]: value, actual_time: formattedTime }; // Update actual_time
//         } else {
//           return { ...row, [name]: value };
//         }
//       } else {
//         return row;
//       }
//     });
 
//     setRows(updatedRows);
//   };



//   // const handleIncreaseChange = (index) => {
//   //   const updatedRows = [...rows];
//   //   updatedRows[index].increaseChecked = true;
//   //   updatedRows[index].decreaseChecked = false;
//   //   setRows(updatedRows);
//   // };

//   // This function is called when the checkbox for regularization time increase is clicked.
//   const handleIncreaseChange = (index) => {
//     // Create a copy of the 'rows' array to avoid directly modifying the state.
//     const updatedRows = [...rows];

//     // Set the 'increaseChecked' property of the row at the specified index to true.
//     updatedRows[index].increaseChecked = true;

//     // Set the 'decreaseChecked' property of the same row to false.
//     updatedRows[index].decreaseChecked = false;

//     // Update the state with the modified array of rows.
//     setRows(updatedRows);
//   };


//   const handleActualChange = (index) => {
//     const updatedRows = [...rows];
//     updatedRows[index].actual_time = timeDifference;
//     setRows(updatedRows);
//   };

//   // const handleDecreaseChange = (index) => {
//   //   const updatedRows = [...rows];
//   //   updatedRows[index].decreaseChecked = true;
//   //   updatedRows[index].increaseChecked = false;
//   //   setRows(updatedRows);
//   // };



//   // This function is called when the checkbox for regularization time decrease is clicked.
//   const handleDecreaseChange = (index) => {
//     // Create a copy of the 'rows' array to avoid directly modifying the state.
//     const updatedRows = [...rows];

//     // Set the 'decreaseChecked' property of the row at the specified index to true.
//     updatedRows[index].decreaseChecked = true;

//     // Set the 'increaseChecked' property of the same row to false.
//     updatedRows[index].increaseChecked = false;

//     // Update the state with the modified array of rows.
//     setRows(updatedRows);
//   };





//   const handleSubmit = (e) => {
//     e.preventDefault();
//     setNotify(null);


//     const data = new FormData(e.target);
//     data.append('scheduled_time', props.data.task_hours);
//     // data.append('actual_total_time',"00:30");        

//     new requestRegularizationTime(data).then((res) => {
//       if (res.status === 200) {
//         if (res.data.status === 1) {
//           setNotify({ type: "success", message: res.data.message });
//           loadData()
//           // window.location.reload(false)
//           props.hide();
//           document.getElementById("requestForm").reset();
//         } else {
//           setNotify({ type: "danger", message: res.data.message });
//         }
//       }

//     });
//   };



//   {console.log("date",date)}


//   // handle click event of the Remove button
//   const handleRemoveClick = (index) => {
//     const list = [...rows];
//     list.splice(index, 1);
//     setRows(list);
//   };

//   // handle click event of the Add button
//   const [remark, setRemark] = useState()
//   const handleAddClick = (e) => {
//     setRemark(e.target.value)
//     // setInputList([...inputList, { name: null, id: null }]);
//   };
//   const [approveData, setApproveData] = useState()

//   const getApproveData = () => {


//     new getRegularizationTime(props.data.ticket_id).then(res => {

//       if (res.data.data) {
//         var temp = [];
//         setApproveData(null);
//         res.data.data.forEach(d => {
//           temp.push({
//             'id': d.id,
//             'created_by_name': d.created_by_name,
//             'from_date': d.from_date,
//             'to_date': d.to_date,
//             'from_time': d.from_time,
//             'to_time': d.to_time,
//             'status': d.status,
//             'remark': d.remark,
//             'is_checked': 0,
//             'regularization_time_status': d.regularization_time_status,
//             'task_name': d.task_name,
//             'ticket_id_name': d.ticket_id_name,
//             'ticket_task_id': d.ticket_task_id

//           });
//         })
//         setApproveData(temp);
//       }
//     })

//   }
// const [regularizeTimeData,setRegularizeTimeData]=useState([])

//   const loadData = () => {

//     new getRegularizationTimeData(props.data.ticket_id,props.data.id).then(res => {
//         if (res.data.data) {
//             // setData(null);
//             setRegularizeTimeData(res.data.data)
         
//         }
//     })

// }

//   useEffect(() => {
//     calculateTimeDifference();
//   }, [fromTime, toTime, rows]);


// // console.log("hii",props.data)
//   useEffect(() => {
//     // Code to update the actual_time value automatically
//     const updatedRows = rows.map(row => ({
//       ...row,
//       actual_time: timeDifference
//     }));
//     setRows(updatedRows);
//   }, [timeDifference]);


//   useEffect(() => {
//     setNotify(null);
//     getApproveData()
//   }, []);

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


//   // console.log("props",props.data)
//   // console.log("isR",props.isRegularisedData.length)


//   // const [approvedStatus, setApprovedStatus] = useState()
//   // useEffect(() => {
//   //  props.isRegularised.map((d,i)=>{
//   //   setApprovedStatus(d.status)
//   //  })
//   //  console.log(approvedStatus);
//   // }, [approvedStatus]);
//   // console.log("props",props)

//   return (
   
//     <div>
//       {notify && <Alert alertData={notify} />}
//       <Modal
//         show={props.show}
//         onHide={props.hide}
//         dialogClassName="modal-100w"
//         size="xl"
//         aria-labelledby="example-custom-modal-styling-title"
//       >
//         <Modal.Header
//           closeButton
//           onClick={() => { window.location.reload(false) }}
//         >
//           <Modal.Title id="example-custom-modal-styling-title">
//             Time Regularization
//           </Modal.Title>
//         </Modal.Header>
//         <Modal.Header>
//           <Modal.Title id="example-custom-modal-styling-title">

//   <div className="row">
// {/* <div className="col">
//   <h6>Task Name</h6>
// </div> */}
// <div className="col-md" >
//   <h6 style={{ fontWeight: 'bold', width: '300px' }}>{`Ticket ID: ${props.data.ticket_id_name}`}</h6>
// </div>
// <div className="col-md ">
//   <h6 style={{ fontWeight: 'bold', width: '580px' }}>{`Task Name:
//   ${props.data.task_name}`}</h6>
// </div>

// <div className="col-md">
//   <h6 style={{ fontWeight: 'bold' }}>{`Scheduled Time: ${props.data.task_hours}`}</h6>
// </div>
// </div>
           
           
//           </Modal.Title>
//         </Modal.Header>

//         <form onSubmit={handleSubmit} id="requestForm">
//           <input
//             type="hidden"
//             id="ticket_id"
//             name="ticket_id"
//             value={ticket_id}
//           />
//           <input
//             type="hidden"
//             id="ticket_basket_id"
//             name="ticket_basket_id"
//             value={ticket_basket_id}
//           />
//           <input
//             type="hidden"
//             id="ticket_task_id"
//             name="ticket_task_id"
//             value={ticket_task_id}
//           />

//           <Modal.Body>
//             <div className="table-responsive">
//               <table
//                 className="table table-bordered mt-3 table-responsive"
//                 id="tab_logic"
//               >
//                 <thead>
//                   <tr>
//                     <th className="text-center"> Sr No </th>
//                     <th className="text-center"> From Date </th>
//                     <th className="text-center"> To Date </th>
//                     <th className="text-center"> From Time </th>
//                     <th className="text-center"> To Time </th>
//                     <th className="text-center"> Actual Time </th>


//                     <th className="text-center"> Remark </th>
//                     <th className="text-center"> Action</th>
//                   </tr>
//                 </thead>
//                 <tbody>



                 




// {regularizeTimeData && regularizeTimeData.length > 0 ?
//  <>

//                      { regularizeTimeData && regularizeTimeData.map((x, index) => {
//                                 return <tr id={`addr_${index}`} key={index}>
//                       <td>{index + 1}</td>
//                       {rows && rows.map((row,i)=>{
//                         return<>
//                       <td>

//                         <input
//                           type="date"
//                           className="form-control form-control-sm"
//                           name={`from_date[${index}]`}
//                           // defaultValue={props.isRegularisedData.map((i)=>i.from_date)}
//                           defaultValue={x.from_date}
//                           max={formattedDate}
//                           onChange={(e) => handleRowInputChange(e, index)}
//                           required
//                           disabled={x.status === "REJECTED" ? false :true}


//                         />
//                       </td>

//                       <td>
//                         <input
//                           type="date"
//                           className="form-control form-control-sm"
//                           name={`to_date[${index}]`}
//                           disabled={x.status === "REJECTED" ? false :true}
                         

//                           defaultValue={x.to_date}
//                           // min={date}
//                           max={formattedDate}
//                           onChange={(e) => handleRowInputChange(e, index)}
//                           required
//                           // disabled={props.data.is_regularized === "YES" ? true : false}
//                         // disabled={props.data.is_regularized === "YES" && props.isRegularised.filter((d)=>d.ticket_task_id == props.data.id).map((i)=>i.status) != "REJECTED"  ? true : false}

//                         />
//                       </td>

// <td>
//                         <input
//                           type="time"
//                           className="form-control form-control-sm"
//                           name="from_time[]"
//                           defaultValue={x.from_time}
//                           disabled={x.status === "REJECTED" ? false :true}

//                           onChange={(e) => handleActualTimeChange(index, e.target.value, x.to_time)}
//                           required
//                           // disabled={props.data.is_regularized === "YES" ? true : false}
//                           // disabled={true}

//                         />
//                         <i className="icofont-clock"></i>

//                       </td>
//                       <td>
//                         <input
//                           type="time"
//                           className="form-control form-control-sm"
//                           name="to_time[]"
//                           disabled={x.status === "REJECTED" ? false :true}

//                           defaultValue={x.to_time}
//                           onChange={(e) => handleActualTimeChange(index, x.from_time, e.target.value)}
//                           required
//                           // disabled={props.data.is_regularized === "YES" ? true : false}
//                           // disabled={true}

//                         />
//                       </td>
// {regularizeTimeData && regularizeTimeData.length > 0 || x.status === "REJECTED" ?  <td>
//                         <input
//                           type="text"
//                           className="form-control form-control-sm"
//                           name="actual_time[]"
//                           disabled={x.status === "REJECTED" ? false :true}
//                           defaultValue={x.total_time }
//                           // value={row.actual_time}
//                           required
                         
//                         />
//                       </td> :
//                       <td>
//                         <input
//                           type="time"
//                           className="form-control form-control-sm"
//                           name="actual_time[]"
//                           disabled={x.status === "REJECTED" ? false :true}
//                           defaultValue={x.total_time }
//                           value={row.actual_time}
//                           required
                         
//                         />
//                       </td>}
//                       </>})}

//                       <td >
//                         <input
//                           title={remark && remark ? remark : ""}
//                           type="text"
//                           className="form-control form-control-sm"
//                           name="remark[]"
//                           onChange={e => handleAddClick(e)}
//                           defaultValue={ x.remark}
//                           required
//                           disabled={x.status === "REJECTED" ? false :true}


//                         />
//                       </td>
//                       <td>

//                         {index + 1 == 1 && (
//                           <button
//                             onClick={addRow}
//                             className="btn btn-primary"
//                             style={{ backgroundColor: "#484C7F" }}
//                             disabled={x.status === "REJECTED" ? false :true}


//                             // disabled={props.data.is_regularized === "YES" ? true : false}
//                           // disabled={props.data.is_regularized === "YES" && props.isRegularised.filter((d)=>d.ticket_task_id == props.data.id).map((i)=>i.status) != "REJECTED"  ? true : false}


//                           >
//                             <i className="icofont-plus-circle"></i>
//                           </button>
//                         )}

//                         {index + 1 > 1 && (
//                           <button
//                             className="mr10 mr-1 btn btn-danger"
//                             onClick={() => handleRemoveClick()}
//                           disabled={x.status === "REJECTED" ? false :true}

//                           >
//                             <i className="icofont-ui-delete"></i>
//                           </button>
//                         )}


//                       </td>

//                     </tr>
//                       //  })}
//                   })} </>

//                   :
                 
                 
                 
//                   <>
//                   {rows.map((row, index) => {
//                                 return <tr key={index}>


//                       <td>{index + 1}</td>
//                       <td>
//                       <input
//                           type="date"
//                           className="form-control form-control-sm"
//                           name={`from_date[${index}]`}
//                           // disabled={true}

//                           // defaultValue={props.isRegularisedData.map((i)=>i.to_date)}
//                           // min={date}
//                           max={formattedDate}
//                           onChange={(e) => handleRowInputChange(e, index)}
//                           required
//                           // disabled={props.data.is_regularized === "YES" ? true : false}
//                         // disabled={props.data.is_regularized === "YES" && props.isRegularised.filter((d)=>d.ticket_task_id == props.data.id).map((i)=>i.status) != "REJECTED"  ? true : false}

//                         />
//                       </td>


//                       <td>
//                         <input
//                           type="date"
//                           className="form-control form-control-sm"
//                           name={`to_date[${index}]`}
//                           // disabled={true}

//                           // defaultValue={props.isRegularisedData.map((i)=>i.to_date)}
//                           min={date}
//                           max={formattedDate}
//                           onChange={(e) => handleRowInputChange(e, index)}
//                           required
//                           // disabled={props.data.is_regularized === "YES" ? true : false}
//                         // disabled={props.data.is_regularized === "YES" && props.isRegularised.filter((d)=>d.ticket_task_id == props.data.id).map((i)=>i.status) != "REJECTED"  ? true : false}

//                         />
//                       </td>
//                       <td>
//                         <input
//                           type="time"
//                           className="form-control form-control-sm"
//                           name="from_time[]"
//                           // defaultValue={props.isRegularisedData.map((i)=>i.from_time)}
//                           onChange={(e) => handleActualTimeChange(index, e.target.value, row.to_time)}
//                           required
//                           // disabled={props.data.is_regularized === "YES" ? true : false}
//                           // disabled={true}

//                         />
//                         <i className="icofont-clock"></i>

//                       </td>


                     
//                       <td>
//                         <input
//                           type="time"
//                           className="form-control form-control-sm"
//                           name="to_time[]"
//                           // defaultValue={props.isRegularisedData.map((i)=>i.to_time)}
//                           onChange={(e) => handleActualTimeChange(index, row.from_time, e.target.value)}
//                           required
//                           // disabled={props.data.is_regularized === "YES" ? true : false}
//                           // disabled={true}

//                         />
//                       </td>

//                       <td>
//                       <input
//                           type="text"
//                           className="form-control form-control-sm-2"
//                           name="actual_time[]"
//                           style={{ width: "5rem", height: 32 }}
//                           value={row.actual_time}
//                           required
//                           // disabled={props.data.is_regularized === "YES" ? true : false}

//                         />
//                       </td>


//                       <td >
//                         <input
//                           title={remark && remark ? remark : ""}
//                           type="text"
//                           className="form-control form-control-sm"
//                           name="remark[]"
//                           onChange={e => handleAddClick(e)}
//                           // defaultValue={ props.isRegularisedData.map((i)=>i.remark)}
//                           required
//                           // disabled={true}


//                         />
//                       </td>
//                       <td>

//                         {index + 1 == 1 && (
//                           <button
//                             onClick={addRow}
//                             className="btn btn-primary"
//                             style={{ backgroundColor: "#484C7F" }}

                         

//                           >
//                             <i className="icofont-plus-circle"></i>
//                           </button>
//                         )}

//                         {index + 1 > 1 && (
//                           <button
//                             className="mr10 mr-1 btn btn-danger"
//                             onClick={() => handleRemoveClick()}
//                           >
//                             <i className="icofont-ui-delete"></i>
//                           </button>
//                         )}


//                       </td>

//                     </tr>
//                   })}</>}


//                   {/* </>} */}







//                 </tbody>
//               </table>
//             </div>
//           </Modal.Body>
//           <Modal.Footer>

         
                       
//             <button
//               type="submit"
//               className="btn btn-sm btn-primary"
//               style={{ backgroundColor: "#484C7F" }}
//               // disabled={x.status === "REJECTED" ? false : true}
//               >
//               Submit
//        </button>
     
                     
           
//           </Modal.Footer>
//         </form>
//       </Modal>
//     </div>
//   );
// };

// export default RequestModal;



// import React, { useEffect, useState, useRef } from "react";
// import { Modal, Table } from "react-bootstrap";
// import ErrorLogService from "../../../../services/ErrorLogService";
// import Alert from "../../../../components/Common/Alert";
// import { requestRegularizationTime } from "../../../../services/TicketService/TaskService";
// import { getRegularizationTime, changeStatusRegularizationTime } from '../../../../services/TicketService/TaskService';
// import { Label } from "recharts";

// const RequestModal = (props) => {

//   const [notify, setNotify] = useState(null);
//   const [inputList, setInputList] = useState([
//     {
//       // date: "",
//       from_time: "00:00",
//       to_time: "00:00",
//       from_date: null,
//       to_date: null
//     },
//   ]);

//   const [date, setDate] = useState("");
//   const [time, setTime] = useState(null);

//   const [fromTime, setFromTime] = useState('');
//   const [toTime, setToTime] = useState('');
//   const [timeDifference, setTimeDifference] = useState('');



//   const currentDate = new Date();
//   const year = currentDate.getFullYear();
//   const month = String(currentDate.getMonth() + 1).padStart(2, '0');
//   const day = String(currentDate.getDate()).padStart(2, '0');
//   const formattedDate = `${year}-${month}-${day}`;


//   const handleInputChange = (e, index) => {
//     const { name, value } = e.target;
//     const list = [...inputList];
//     list[index] = { ...list[index], [name]: value };

//     const fromDateList = list.map(item => item[`from_date[${index}]`]);
//     const toDateList = list.map(item => item[`to_date[${index}]`]);

//     // const payload = {
//     //   from_date: fromDateList.filter(date => date !== undefined),
//     //   to_date: toDateList.filter(date => date !== undefined),
//     //   // Add other relevant values from the component state or props
//     //   // Example: fromDate: date,
//     //   //          fromTime: time,
//     //   //          ...
//     // };

//     if (name.includes("from_date")) {
//       setDate(value);
//     }
//     if (name.includes("from_time")) {
//       setTime(value);
//     }

//     setInputList(list);
//   };



//   const statusValue = props.data.regularized_data.map((i)=>i.status)
 

//   const [timeData, setTimeData] = useState({});
//   var ticket_id = props.data.ticket_id;
//   var ticket_basket_id = props.data.ticket_basket_id;
//   var task_owner_id = localStorage.getItem("id");
//   var ticket_task_id = props.data.id;


//   const [firstCheckboxChecked, setFirstCheckboxChecked] = useState(false);
//   const [secondCheckboxChecked, setSecondCheckboxChecked] = useState(false);
//   const [showModal, setShowModal] = useState(false);

//   const handleFirstCheckboxChange = (e) => {
//     if (e) {
//       setFirstCheckboxChecked(e.target.checked);
//       if (e.target.checked) {
//         handleSecondCheckboxChange({ target: { checked: false } });
//       }
//     }
//   };

//   const handleSecondCheckboxChange = (e) => {
//     if (e) {
//       setSecondCheckboxChecked(e.target.checked);
//       if (e.target.checked) {
//         handleFirstCheckboxChange({ target: { checked: false } });
//       }
//     }
//   };




//   const [rows, setRows] = useState([{ increaseChecked: false, decreaseChecked: false, value: 0, actual_time: null }]);
//   const addRow = () => {
//     setRows(prevRows => [...prevRows, { increaseChecked: false, decreaseChecked: false, value: 0, actual_time: null }]);
//   };




//   // Assuming you are using React and have a state variable called 'values'




//   const calculateTimeDifference = () => {
//     // Your existing code for calculating the time difference goes here
//     if (fromTime && toTime) {
//       const fromDateTime = new Date(`2000-01-01T${fromTime}`);
//       const toDateTime = new Date(`2000-01-01T${toTime}`);

//       const timeDiffMs = toDateTime - fromDateTime;
//       const timeDiffMinutes = Math.floor(timeDiffMs / (1000 * 60));

//       let hours = Math.floor(timeDiffMinutes / 60);
//       let minutes = timeDiffMinutes % 60;

//       if (hours === 24 && minutes === 0) {
//         hours = 0;
//         minutes = 0;
//       }

//       const formattedTime = `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`;

//       setTimeDifference(formattedTime); // Assuming setTimeDifference is a state setter function

//       return formattedTime;
//     }

//     return '';
//   };

//   const handleActualTimeChange = (index, fromTime, toTime) => {
//     const calculateTimeDifference = (fromTime, toTime) => {
//       if (fromTime && toTime) {
//         const fromDateTime = new Date(`2000-01-01T${fromTime}`);
//         const toDateTime = new Date(`2000-01-01T${toTime}`);

//         const timeDiffMs = toDateTime - fromDateTime;
//         const timeDiffMinutes = Math.floor(timeDiffMs / (1000 * 60));

//         let hours = Math.floor(timeDiffMinutes / 60);
//         let minutes = timeDiffMinutes % 60;

//         if (hours === 24 && minutes === 0) {
//           hours = 0;
//           minutes = 0;
//         }

//         const formattedTime = `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`;

//         return formattedTime;
//       }

//       return '';
//     };

//     setRows((prev) => {
//       return prev.map((data, rowIndex) => {
//         if (rowIndex === index) {
//           const newData = { ...data }; // Create a new copy of the row data
//           newData.from_time = fromTime; // Update the from_time value
//           newData.to_time = toTime; // Update the to_time value
//           newData.actual_time = calculateTimeDifference(fromTime, toTime); // Calculate and set the actual_time
//           return newData;
//         } else {
//           return data;
//         }
//       });
//     });
//   };




//   const handleRowInputChange = (e, rowIndex) => {
//     const { name, value, type, checked } = e.target;
//     const updatedRows = rows.map((row, index) => {
//       if (index === rowIndex) {
//         if (type === "checkbox") {
//           return { ...row, [name]: checked };
//         } else if (name === "actual_time[]") {
//           const formattedTime = calculateTimeDifference(value);
//           return { ...row, [name]: value, timeDifference: formattedTime };
//         } else {
//           return { ...row, [name]: value };
//         }
//       } else {
//         return row;
//       }
//     });

//     setRows(updatedRows);
//     setDate(e.target.value)
//   };






//   // const handleIncreaseChange = (index) => {
//   //   const updatedRows = [...rows];
//   //   updatedRows[index].increaseChecked = true;
//   //   updatedRows[index].decreaseChecked = false;
//   //   setRows(updatedRows);
//   // };

//   // This function is called when the checkbox for regularization time increase is clicked.
// const handleIncreaseChange = (index) => {
//   // Create a copy of the 'rows' array to avoid directly modifying the state.
//   const updatedRows = [...rows];

//   // Set the 'increaseChecked' property of the row at the specified index to true.
//   updatedRows[index].increaseChecked = true;

//   // Set the 'decreaseChecked' property of the same row to false.
//   updatedRows[index].decreaseChecked = false;

//   // Update the state with the modified array of rows.
//   setRows(updatedRows);
// };


//   const handleActualChange = (index) => {
//     const updatedRows = [...rows];
//     updatedRows[index].actual_time = timeDifference;
//     setRows(updatedRows);
//   };

//   // const handleDecreaseChange = (index) => {
//   //   const updatedRows = [...rows];
//   //   updatedRows[index].decreaseChecked = true;
//   //   updatedRows[index].increaseChecked = false;
//   //   setRows(updatedRows);
//   // };



//   // This function is called when the checkbox for regularization time decrease is clicked.
// const handleDecreaseChange = (index) => {
//   // Create a copy of the 'rows' array to avoid directly modifying the state.
//   const updatedRows = [...rows];

//   // Set the 'decreaseChecked' property of the row at the specified index to true.
//   updatedRows[index].decreaseChecked = true;

//   // Set the 'increaseChecked' property of the same row to false.
//   updatedRows[index].increaseChecked = false;

//   // Update the state with the modified array of rows.
//   setRows(updatedRows);
// };





//   const handleSubmit = (e) => {
//     e.preventDefault();
//     setNotify(null);


//     const data = new FormData(e.target);
//     data.append('scheduled_time', props.data.task_hours);
//     // data.append('actual_total_time',"00:30");        

//     new requestRegularizationTime(data).then((res) => {
//       if (res.status === 200) {
//         if (res.data.status === 1) {
//           setNotify({ type: "success", message: res.data.message });
//           // window.location.reload(false)
//           props.hide();
//           document.getElementById("requestForm").reset();
//         } else {
//           setNotify({ type: "danger", message: res.data.message });
//         }
//       }

//     });
//   };





//   // handle click event of the Remove button
//   const handleRemoveClick = (index) => {
//     const list = [...rows];
//     list.splice(index, 1);
//     setRows(list);
//   };

//   // handle click event of the Add button
//   const[remark, setRemark] = useState()
//   const handleAddClick = (e) => {
//     setRemark(e.target.value)
//     // setInputList([...inputList, { name: null, id: null }]);
//   };
//   const [approveData, setApproveData] = useState()

//   const getApproveData = () => {


//     new getRegularizationTime(props.data.ticket_id).then(res => {

//       if (res.data.data) {
//         var temp = [];
//         setApproveData(null);
//         res.data.data.forEach(d => {
//           temp.push({
//             'id': d.id,
//             'created_by_name': d.created_by_name,
//             'from_date': d.from_date,
//             'to_date': d.to_date,
//             'from_time': d.from_time,
//             'to_time': d.to_time,
//             'status': d.status,
//             'remark': d.remark,
//             'is_checked': 0,
//             'regularization_time_status': d.regularization_time_status,
//             'task_name': d.task_name,
//             'ticket_id_name': d.ticket_id_name,
//             'ticket_task_id': d.ticket_task_id

//           });
//         })
//         setApproveData(temp);
//       }
//     })

//   }


//   useEffect(() => {
//     calculateTimeDifference();
//   }, [fromTime, toTime, rows]);



//   useEffect(() => {
//     // Code to update the actual_time value automatically
//     const updatedRows = rows.map(row => ({
//       ...row,
//       actual_time: timeDifference
//     }));
//     setRows(updatedRows);
//   }, [timeDifference]);


//   useEffect(() => {
//     setNotify(null);
//     getApproveData()

//   }, []);

//   console.log("row",rows)
//   // const [approvedStatus, setApprovedStatus] = useState()
//   // useEffect(() => {
//   //  props.isRegularised.map((d,i)=>{
//   //   setApprovedStatus(d.status)
//   //  })
//   //  console.log(approvedStatus);
//   // }, [approvedStatus]);

// console.log("statusValue", props.data.regularized_data.length)
// console.log("statusValue==>", statusValue)

//   return (
//     <div>
//       {notify && <Alert alertData={notify} />}
//       <Modal
//         show={props.show}
//         onHide={props.hide}
//         dialogClassName="modal-100w"
//         size="xl"
//         aria-labelledby="example-custom-modal-styling-title"
//       >
//         <Modal.Header
//         closeButton
//         onClick={()=>{ window.location.reload(false)}}
//         >
//           <Modal.Title id="example-custom-modal-styling-title">
//             Request Regularization
//           </Modal.Title>
//         </Modal.Header>
//         <Modal.Header>
//           <Modal.Title id="example-custom-modal-styling-title">
//             <div className="row">
//               {/* <div className="col">
//                 <h6>Task Name</h6>
//               </div> */}                    
//               <div className="col-md" >
//                 <h6 style={{ fontWeight: 'bold', width: '300px' }}>{`Ticket ID: ${props.data.ticket_id_name}`}</h6>
//               </div>
//               <div className="col-md ">
//                 <h6 style={{ fontWeight: 'bold', width: '580px' }}>{`Task Name:
//                 ${props.data.task_name}`}</h6>
//               </div>

//               <div className="col-md">
//                 <h6 style={{ fontWeight: 'bold' }}>{`Scheduled Time: ${props.data.task_hours}`}</h6>
//               </div>
//             </div>
//           </Modal.Title>

//         </Modal.Header>

//         <form onSubmit={handleSubmit} id="requestForm">
//           <input
//             type="hidden"
//             id="ticket_id"
//             name="ticket_id"
//             value={ticket_id}
//           />
//           <input
//             type="hidden"
//             id="ticket_basket_id"
//             name="ticket_basket_id"
//             value={ticket_basket_id}
//           />
//           <input
//             type="hidden"
//             id="ticket_task_id"
//             name="ticket_task_id"
//             value={ticket_task_id}
//           />
// {/* {console.log("hi",props.data.regularized_data.map((i)=>i.status))} */}
//           <Modal.Body>
//             <div className="table-responsive">
//               <table
//                 className="table table-bordered mt-3 table-responsive"
//                 id="tab_logic"
//               >
//                 <thead>
//                   <tr>
//                     <th className="text-center"> Sr No </th>
//                     <th className="text-center"> From Date </th>
//                     <th className="text-center"> To Date </th>
//                     <th className="text-center"> From Time </th>
//                     <th className="text-center"> To Time </th>
//                     <th className="text-center"> Actual Time </th>


//                     <th className="text-center"> Increase Time </th>
//                     <th className="text-center"> Decrease Time </th>
//                     <th className="text-center"> Remark </th>
//                     <th className="text-center"> Action</th>
//                   </tr>
//                 </thead>
//                 <tbody>
                 
// {/* Updated by  */}

//                   {/* {rows.map((row, index) => (
                               
//                     <tr key={index}>

//                       <td>{index + 1}</td>
//                       <td>
//                         <input
//                           type="date"
//                           className="form-control form-control-sm"
//                           name={`from_date[${index}]`}
//                           defaultValue={props.data.from_date ? props.data.from_date : props.data.start_date}
//                           max={formattedDate}
//                           onChange={(e) => handleRowInputChange(e, index)}
//                           required
//                           disabled={props.data.regularized_data.length == 0 || statusValue === "REJECTED"  ? false :true }
//                         />
//                       </td>
//                       <td>
//                         <input
//                           type="date"
//                           className="form-control form-control-sm"
//                           name={`to_date[${index}]`}

//                           defaultValue={props.data.to_date ? props.data.to_date : props.data.end_date}
//                           min={date}
//                           max={formattedDate}
//                           onChange={(e) => handleRowInputChange(e, index)}
//                           required
//                           disabled={props.data.regularized_data.length > 0 || statusValue === "REJECT"  ? false :true }

//                           // disabled={props.data.is_regularized === "YES" ? true : false}
//                           // disabled={props.data.is_regularized === "YES" && props.isRegularised.filter((d)=>d.ticket_task_id == props.data.id).map((i)=>i.status) != "REJECTED"  ? true : false}

//                         />
//                       </td>
//                       <td>
//                         <input
//                           type="time"
//                           className="form-control form-control-sm"
//                           name="from_time[]"
//                           defaultValue={row.from_time || ''}
//                           onChange={(e) => handleActualTimeChange(index, e.target.value, row.to_time)}
//                           required
//                           disabled={props.data.regularized_data.length <= 0 || statusValue === "REJECT"  ? false :true }

//                         />
//                         <i className="icofont-clock"></i>

//                       </td>
//                       <td>
//                         <input
//                           type="time"
//                           className="form-control form-control-sm"
//                           name="to_time[]"
//                           defaultValue={row.to_time || ''}
//                           onChange={(e) => handleActualTimeChange(index, row.from_time, e.target.value)}
//                           required
//                           disabled={props.data.regularized_data.length <= 0 || statusValue === "REJECT"  ? false :true }

//                         />
//                       </td>
//                       <td>
//                         <input
//                           type="text"
//                           className="form-control form-control-sm-2"
//                           name="actual_time[]"
//                           style={{ width: "5rem", height: 32 }}
//                           value={row.actual_time}
//                           required
//                           disabled={props.data.regularized_data.length <= 0 || statusValue === "REJECT"  ? false :true }

//                         />
//                       </td>



//                       {props.data.regularization_time_status ?

//                         <td >
//                           <input
//                             type="checkbox"
//                             checked={props.data.regularization_time_status === "YES" ? true : false}
//                             onChange={() => handleIncreaseChange(index)}

//                             value="YES"
//                             disabled={props.data.regularized_data.length <= 0 || statusValue === "REJECT"  ? false :true }



//                           />
//                         </td>

//                         :
//                         <td >
//                           <input
//                             type="checkbox"
//                             checked={row.increaseChecked}
//                             onChange={() => handleIncreaseChange(index)}
//                             name="regularization_time_status"
//                             id="regularization_time_status"
//                             value="YES"
//                             disabled={props.data.regularized_data.length <= 0 || statusValue === "REJECT"  ? false :true }

//                           />
//                           <i className="icofont-long-arrow-up" style={{ fontSize: "34px", color: 'red' }}></i>
//                         </td>
//                       }


//                       {props.data.regularization_time_status ?
//                         <td>
//                           <input
//                             type="checkbox"
//                             checked={props.data.regularization_time_status === "NO" ? true : false}
//                             onChange={() => handleDecreaseChange(index)}
//                             name="regularization_time_status"
//                             id="regularization_time_status"
//                             value="NO"
//                             disabled={props.data.regularized_data.length <= 0 || statusValue === "REJECT"  ? false :true }

//                             // disabled={props.data.is_regularized === "NO" ? true : false}

//                           />
//                           <i className="icofont-long-arrow-down" style={{ fontSize: "34px", color: 'green' }}></i>
//                         </td>

//                         :
//                         <td>
//                           <input
//                             type="checkbox"
//                             checked={row.decreaseChecked}
//                             onChange={() => handleDecreaseChange(index)}
//                             name="regularization_time_status"
//                             id="regularization_time_status"
//                             value="NO"
//                             disabled={props.data.regularized_data.length <= 0 || statusValue === "REJECT"  ? false :true }

//                           />
//                           <i className="icofont-long-arrow-down" style={{ fontSize: "34px", color: 'green' }}></i>
//                         </td>


//                       }
//                       <td >
//                         <input
//                         title={remark && remark ?remark : ""}
//                           type="text"
//                           className="form-control form-control-sm"
//                           name="remark[]"
//                           onChange={e=> handleAddClick(e)}
//                           defaultValue={props.data.remark}
//                           required
//                           disabled={props.data.regularized_data.length <= 0 || statusValue === "REJECT"  ? false :true }

//                           // disabled={props.data.is_regularized === "YES" ? true : false}
//                           // disabled={props.data.is_regularized === "YES" && props.isRegularised.filter((d)=>d.ticket_task_id == props.data.id).map((i)=>i.status) != "REJECTED"  ? true : false}


//                         />
//                       </td>
//                       <td>

//                         {index + 1 == 1 && (
//                           <button
//                             onClick={addRow}
//                             className="btn btn-primary"
//                             style={{ backgroundColor: "#484C7F" }}
//                             // disabled={props.data.is_regularized === "YES" ? true : false}
//                           // disabled={props.data.is_regularized === "YES" && props.isRegularised.filter((d)=>d.ticket_task_id == props.data.id).map((i)=>i.status) != "REJECTED"  ? true : false}
//                           disabled={props.data.regularized_data.length <= 0 || statusValue === "REJECT"  ? false :true }


//                           >
//                             <i className="icofont-plus-circle"></i>
//                           </button>
//                         )}

//                         {index + 1 > 1 && (
//                           <button
//                             className="mr10 mr-1 btn btn-danger"
//                             onClick={() => handleRemoveClick()}
//                           >
//                             <i className="icofont-ui-delete"></i>
//                           </button>
//                         )}


//                       </td>

//                     </tr>
//                   ))} */}


//  {props && props.isRegularisedData.length == 0 || props && props.isRegularisedData.length == 1 && props.isRegularisedData.filter((d)=>d.status === "REJECTED").map((i)=>i.status) == "REJECTED" || props && props.isRegularisedData.length == 2 && props.isRegularisedData.filter((d)=>d.status === "APPROVED").map((i)=>i.status) != "APPROVED"?
// <>

// {rows.map((row, index) => {


//                     return <tr key={index}>


//                       <td>{index + 1}</td>
//                       <td>

//                         <input
//                           type="date"
//                           className="form-control form-control-sm"
//                           name={`from_date[${index}]`}
//                           defaultValue={props.data.from_date ? props.data.from_date : props.data.start_date}
//                           max={formattedDate}
//                           onChange={(e) => handleRowInputChange(e, index)}
//                           required

//                         />
//                       </td>


//                       <td>
//                         <input
//                           type="date"
//                           className="form-control form-control-sm"
//                           name={`to_date[${index}]`}

//                           defaultValue={props.data.to_date ? props.data.to_date : props.data.end_date}
//                           min={date}
//                           max={formattedDate}
//                           onChange={(e) => handleRowInputChange(e, index)}
//                           required
//                           disabled={props.data.is_regularized === "YES" ? true : false}

//                         />
//                       </td>
//                       <td>
//                         <input
//                           type="time"
//                           className="form-control form-control-sm"
//                           name="from_time[]"
//                           defaultValue={row.from_time || ''}
//                           onChange={(e) => handleActualTimeChange(index, e.target.value, row.to_time)}
//                           required
//                           disabled={props.data.is_regularized === "YES" ? true : false}

//                         />
//                         <i className="icofont-clock"></i>

//                       </td>
//                       <td>
//                         <input
//                           type="time"
//                           className="form-control form-control-sm"
//                           name="to_time[]"
//                           defaultValue={row.to_time || ''}
//                           onChange={(e) => handleActualTimeChange(index, row.from_time, e.target.value)}
//                           required
//                           disabled={props.data.is_regularized === "YES" ? true : false}

//                         />
//                       </td>
//                       <td>
//                         <input
//                           type="text"
//                           className="form-control form-control-sm-2"
//                           name="actual_time[]"
//                           style={{ width: "5rem", height: 32 }}
//                           value={row.actual_time}
//                           required
//                           disabled={props.data.is_regularized === "YES" ? true : false}

//                         />
//                       </td>




//                       <td >
//                         <input
//                           title={remark && remark ? remark : ""}
//                           type="text"
//                           className="form-control form-control-sm"
//                           name="remark[]"
//                           onChange={e => handleAddClick(e)}
//                           defaultValue={props.data.remark}
//                           required
//                           disabled={props.data.is_regularized === "YES" ? true : false}
//                         // disabled={props.data.is_regularized === "YES" && props.isRegularised.filter((d)=>d.ticket_task_id == props.data.id).map((i)=>i.status) != "REJECTED"  ? true : false}


//                         />
//                       </td>
//                       <td>

//                         {index + 1 == 1 && (
//                           <button
//                             onClick={addRow}
//                             className="btn btn-primary"
//                             style={{ backgroundColor: "#484C7F" }}
//                             disabled={props.data.is_regularized === "YES" ? true : false}
//                           // disabled={props.data.is_regularized === "YES" && props.isRegularised.filter((d)=>d.ticket_task_id == props.data.id).map((i)=>i.status) != "REJECTED"  ? true : false}


//                           >
//                             <i className="icofont-plus-circle"></i>
//                           </button>
//                         )}

//                         {index + 1 > 1 && (
//                           <button
//                             className="mr10 mr-1 btn btn-danger"
//                             onClick={() => handleRemoveClick()}
//                           >
//                             <i className="icofont-ui-delete"></i>
//                           </button>
//                         )}


//                       </td>

//                     </tr>
//                   })}

// </>: <>  
//  {rows.map((row, index) => {
//                     // console.log("props.isss", props.isRegularisedData.length)
//                     // console.log("props.isssSTATUS", props.isRegularisedData.filter((d)=>d.status === "PENDING").map((i)=>i.status))
//                     // console.log("r", props.isRegularisedData.filter((d)=>d.status != "REJECTED").map((i)=>i.status ))

//                     return <tr key={index}>


//                       <td>{index + 1}</td>
//                       <td>

//                         <input
//                           type="date"
//                           className="form-control form-control-sm"
//                           name={`from_date[${index}]`}
//                           defaultValue={props.isRegularisedData.map((i)=>i.from_date)}
//                           max={formattedDate}
//                           onChange={(e) => handleRowInputChange(e, index)}
//                           required
//                           disabled={true}
// // disabled={props.isRegularisedData.length == 0 ||  props.isRegularisedData.length == 1 && props.isRegularisedData.filter((d)=>d.status === "PENDING").map((i)=>i.status === []) || props.isRegularisedData.filter((d)=>d.status === "REJECTED").map((i)=>i.status === []) || props.isRegularisedData.filter((d)=>d.status === ["PENDING"]).map((i)=>i.status === ["PENDING"]) || props.isRegularisedData.filter((d)=>d.status === "REJECTED").map((i)=>i.status === []) || props.isRegularisedData.filter((d)=>d.status === "REJECTED").map((i)=>i.status === "REJECTED") ? false : true}

//                           // disabled=
//                            // Change this to true if you want to disable when status is not "REJECTED"
//                         />
//                       </td>


//                       <td>
//                         <input
//                           type="date"
//                           className="form-control form-control-sm"
//                           name={`to_date[${index}]`}
//                           disabled={true}

//                           defaultValue={props.isRegularisedData.map((i)=>i.to_date)}
//                           min={date}
//                           max={formattedDate}
//                           onChange={(e) => handleRowInputChange(e, index)}
//                           required
//                           // disabled={props.data.is_regularized === "YES" ? true : false}
//                         // disabled={props.data.is_regularized === "YES" && props.isRegularised.filter((d)=>d.ticket_task_id == props.data.id).map((i)=>i.status) != "REJECTED"  ? true : false}

//                         />
//                       </td>
//                       <td>
//                         <input
//                           type="time"
//                           className="form-control form-control-sm"
//                           name="from_time[]"
//                           defaultValue={props.isRegularisedData.map((i)=>i.from_time)}
//                           onChange={(e) => handleActualTimeChange(index, e.target.value, row.to_time)}
//                           required
//                           // disabled={props.data.is_regularized === "YES" ? true : false}
//                           disabled={true}

//                         />
//                         <i className="icofont-clock"></i>

//                       </td>
//                       <td>
//                         <input
//                           type="time"
//                           className="form-control form-control-sm"
//                           name="to_time[]"
//                           defaultValue={props.isRegularisedData.map((i)=>i.to_time)}
//                           onChange={(e) => handleActualTimeChange(index, row.from_time, e.target.value)}
//                           required
//                           // disabled={props.data.is_regularized === "YES" ? true : false}
//                           disabled={true}

//                         />
//                       </td>
//                       <td>
//                         <input
//                           type="text"
//                           className="form-control form-control-sm-2"
//                           name="actual_time[]"
//                           style={{ width: "5rem", height: 32 }}
//                           value={row.actual_time}
//                           required
//                           // disabled={props.data.is_regularized === "YES" ? true : false}
//                           disabled={true}

//                         />
//                       </td>




//                       <td >
//                         <input
//                           title={remark && remark ? remark : ""}
//                           type="text"
//                           className="form-control form-control-sm"
//                           name="remark[]"
//                           onChange={e => handleAddClick(e)}
//                           defaultValue={ props.isRegularisedData.map((i)=>i.remark)}
//                           required

//                           // disabled={props.data.is_regularized === "YES" ? true : false}
//                         // disabled={props.data.is_regularized === "YES" && props.isRegularised.filter((d)=>d.ticket_task_id == props.data.id).map((i)=>i.status) != "REJECTED"  ? true : false}
//                         disabled={true}


//                         />
//                       </td>
//                       <td>

//                         {index + 1 == 1 && (
//                           <button
//                             onClick={addRow}
//                             className="btn btn-primary"
//                             style={{ backgroundColor: "#484C7F" }}
//                           disabled={true}

//                             // disabled={props.data.is_regularized === "YES" ? true : false}
//                           // disabled={props.data.is_regularized === "YES" && props.isRegularised.filter((d)=>d.ticket_task_id == props.data.id).map((i)=>i.status) != "REJECTED"  ? true : false}


//                           >
//                             <i className="icofont-plus-circle"></i>
//                           </button>
//                         )}

//                         {index + 1 > 1 && (
//                           <button
//                             className="mr10 mr-1 btn btn-danger"
//                             onClick={() => handleRemoveClick()}
//                           >
//                             <i className="icofont-ui-delete"></i>
//                           </button>
//                         )}


//                       </td>

//                     </tr>
//                   })}
//                   </>}


//                 </tbody>
//               </table>
//             </div>
//           </Modal.Body>
//           <Modal.Footer>
//             <button
//               type="submit"
//               className="btn btn-sm btn-primary"
//               style={{ backgroundColor: "#484C7F" }}
//               disabled={props.data.regularized_data.length <= 0 || statusValue === "REJECT"  ? false :true }

//               // disabled={props.data.is_regularized === "YES" ? true : false}
//               // disabled={props.data.is_regularized === "YES" && props.isRegularised.filter((d)=>d.ticket_task_id == props.data.id).map((i)=>i.status) != "REJECTED"  ? true : false}


//             >
//               Submit
//             </button>
//           </Modal.Footer>
//         </form>
//       </Modal>
//     </div>
//   );
// };

// export default RequestModal;