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 });
//         }
//       }

//     });
//   };





//   // 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) {
//     // Convert date strings to Date objects
//     const fromDateObj = new Date(fromDate);
//     const toDateObj = new Date(toDate);

//     // Calculate the time difference in milliseconds
//     const timeDiffMs = toDateObj - fromDateObj;

//     // Convert time strings to hours and minutes
//     const [fromHours, fromMinutes] = fromTime.split(':').map(Number);
//     const [toHours, toMinutes] = toTime.split(':').map(Number);

//     // Calculate the time difference in minutes
//     const timeDiffMinutes = timeDiffMs / (1000 * 60);

//     // Calculate the time difference in hours and minutes
//     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
//     }

//     // Calculate the total time difference
//     const totalMinutes = timeDiffMinutes + hours * 60 + minutes;

//     // Format the total time as hours and minutes
//     const formattedHours = Math.floor(totalMinutes / 60);
//     const formattedMinutes = totalMinutes % 60;

//     return `${formattedHours} hours ${formattedMinutes} minutes`;
//   }

//   return '';
// };


// const calculateTimeDifference = (fromDate, toDate, fromTime, toTime) => {
//   if (fromDate && toDate && fromTime && toTime) {
//     // Convert date strings to Date objects
//     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]);

//     // Set fromDate time to match fromTime
//     fromDateObj.setHours(fromHours);
//     fromDateObj.setMinutes(fromMinutes);

//     // Set toDate time to match toTime
//     toDateObj.setHours(toHours);
//     toDateObj.setMinutes(toMinutes);

//     // Calculate the time difference in milliseconds
//     const timeDiffMs = toDateObj - fromDateObj;

//     // Calculate hours and minutes from timeDiffMs
//     const timeDiffMinutes = Math.floor(timeDiffMs / (1000 * 60));
//     const hours = Math.floor(timeDiffMinutes / 60);
//     const minutes = timeDiffMinutes % 60;

//     return `${hours} hours ${minutes} minutes`;
//   }

//   return '';
// };




// 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 handleInputChange = (e, index) => {
//   const { name, value } = e.target;
//   setRows((prev) =>
//     prev.map((data, rowIndex) =>
//       rowIndex === index ? { ...data, [name]: value } : data
//     )
//   );
// };


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);
    
    const timeDiffMs = toDateObj - fromDateObj;
    const timeDiffMinutes = Math.floor(timeDiffMs / (1000 * 60));
    const hours = Math.floor(timeDiffMinutes / 60);
    const minutes = timeDiffMinutes % 60;
    
    return `${hours} hours ${minutes} minutes`;
  }
  
  return '';
};

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
    )
  );
};



  // 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>
      <table>
        <thead>
          <tr>
            <th>From Date</th>
            <th>To Date</th>
            <th>From Time</th>
            <th>To Time</th>
            <th>Actual Time</th>
          </tr>
        </thead>
        <tbody>
          {rows.map((row, index) => (
            <tr key={index}>
              <td>
                <input
                  type="date"
                  name="from_date"
                  value={row.from_date}
                  onChange={(e) => handleDateChange(index, 'from_date', e.target.value)}
                />
              </td>
              <td>
                <input
                  type="date"
                  name="to_date"
                  value={row.to_date}
                  onChange={(e) => handleDateChange(index, 'to_date', e.target.value)}
                />
              </td>
              <td>
                <input
                  type="time"
                  name="from_time"
                  value={row.from_time}
                  onChange={(e) => handleActualTimeChange(index, e.target.value, row.to_time)}
                />
              </td>
              <td>
                <input
                  type="time"
                  name="to_time"
                  value={row.to_time}
                  onChange={(e) => handleActualTimeChange(index, row.from_time, e.target.value)}
                />
              </td>
              <td>
                <input type="text" value={row.actual_time} disabled />
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>

          </Modal.Body>

          {/* <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;