import React, { useEffect, useState , useRef } from "react";
import QRCode from "qrcode.react";
import Barcode from "react-barcode";
import html2canvas from "html2canvas";
import Select from "react-select";
import ReCAPTCHA from "react-google-recaptcha";
import axios from "axios";
import { FaTrash } from "react-icons/fa";
import { Modal, Button, Form, Pagination,Container, Row, Col, Image , ProgressBar , } from "react-bootstrap";
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import { getToken } from '../../../../utils/tokenService';import Table from "react-bootstrap/Table";
const FILE_API_URL = `${process.env.REACT_APP_API_URL}FileUpload/Uploadeddocs`; 
const API_URL = `${process.env.REACT_APP_API_URL}Basicp3/Basicp3`;
const REACT_APP_API_TOKEN = localStorage.getItem("authToken")

const EntityTable = () => {
  const [data, setData] = useState([]);
  const [filteredData, setFilteredData] = useState([]);
  const [newEntity, setNewEntity] = useState({
    toggle_switch: "",

    toggle_switch2: "",

    url_field: "",

    url_field2: "",

    decimal_field: "",

    decimal_field2: "",

    percentage_field: "",

    percentage_field2: "",

    documentsequenc: "",

    recaptcha: "",

    recaptcha2: "",

  });
  const [editEntity, setEditEntity] = useState(null);
  const [showEditModal, setShowEditModal] = useState(false);
  const [showAddModal, setShowAddModal] = useState(false);
  const [showDeleteModal, setShowDeleteModal] = useState(false);
  const [deleteEntityId, setDeleteEntityId] = useState(null);
  const [currentPage, setCurrentPage] = useState(1);
  const [itemsPerPage] = useState(5); // Adjust this value as needed
  const [searchQuery, setSearchQuery] = useState("");
  const [loading, setLoading] = useState(true);
  const [options, setOptions] = useState([]);
  const [filteredOptions, setFilteredOptions] = useState([]);
  const [error, setError] = useState(null);
 const [uploadProgress, setUploadProgress] = useState(0);
 const [showModal, setShowModal] = useState(false);
  const [showValulistModal, setShowValulistModal] = useState(false);
 const barcodeRef = useRef(null);
  const [serverData, setServerData] = useState([]);
  const recaptchaRef = useRef(null);
 const editBarcodeRef = useRef(null);
  useEffect(() => {
    fetchData();






















  }, []);

  useEffect(() => {
    handleSearch();
  }, [searchQuery, data]);
  const fetchData = async () => {
    try {
const token = getToken();
      const response = await axios.get(API_URL, {
        headers: { Authorization: `Bearer ${token}` },
      });
      setData(response.data);
    } catch (error) {
      console.error("Error fetching data:", error);
    }
  };

  const handleDelete = async () => {
    try {
 const token = getToken();
      await axios.delete(`${API_URL}/${deleteEntityId}`, {
        headers: { Authorization: `Bearer ${token}` },
      });
      fetchData();
      toast.success("Successfully deleted!");
      setShowDeleteModal(false);
    } catch (error) {
      console.error("Error deleting data:", error);
    }
  };

  const handleAdd = async () => {


















if (!captchaValid) {
      toast.error("Please validate the CAPTCHA before adding the entity.");
      return; // Prevent adding the entity if CAPTCHA is not valid
    }

if (!captchaValid) {
      toast.error("Please validate the CAPTCHA before adding the entity.");
      return; // Prevent adding the entity if CAPTCHA is not valid
    }

    try {
 const token = getToken();
      await axios.post(API_URL, newEntity, {






















        headers: { Authorization: `Bearer ${token}` },
      });
      fetchData();
      setNewEntity({
    toggle_switch: "",

    toggle_switch2: "",

    url_field: "",

    url_field2: "",

    decimal_field: "",

    decimal_field2: "",

    percentage_field: "",

    percentage_field2: "",

    documentsequenc: "",

    recaptcha: "",

    recaptcha2: "",

      });
      setShowAddModal(false);
      toast.success("Successfully added!");
    } catch (error) {
      console.error("Error adding data:", error);
    }
  };

  const handleChange = (e) => {
    const { name, value } = e.target;
    setNewEntity({ ...newEntity, [name]: value });
  };

  const handleEditChange = (e) => {
    const { name, value } = e.target;
    setEditEntity({ ...editEntity, [name]: value });
  };

  const handleEdit = (entity) => {
    setEditEntity(entity);























    setShowEditModal(true);
  };

  const formatCurrency = (value) => {
   if (value && !value.startsWith('₹')) {
    return `₹${value}`;
  }
  return value;
};

  const handlesChange = (e) => {
    const { name, checked } = e.target;  
    setNewEntity({ ...newEntity, [name]: checked });  
  };
const handlesEditChange = (e) => {
  const { name, checked } = e.target;  
  setEditEntity({ ...editEntity, [name]: checked });  
};


  const handlesChange = (e) => {
    const { name, checked } = e.target;  
    setNewEntity({ ...newEntity, [name]: checked });  
  };
const handlesEditChange = (e) => {
  const { name, checked } = e.target;  
  setEditEntity({ ...editEntity, [name]: checked });  
};
















const [randomCaptcha, setRandomCaptcha] = useState("");
const [captchaInput, setCaptchaInput] = useState("");
const [captchaValid, setCaptchaValid] = useState(false);

 const generateRandomString = (length) => {
    const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
    let result = "";
    for (let i = 0; i < length; i++) {
      result += characters.charAt(Math.floor(Math.random() * characters.length));
    }
    return result;
  };

  useEffect(() => {
    setRandomCaptcha(generateRandomString(7));
  }, []);

  const handleCaptchaInput = (e) => {
    setCaptchaInput(e.target.value);
  };

  const validateCaptcha = () => {
    if (captchaInput === randomCaptcha) {
      toast.success("CAPTCHA validated successfully!"); // Success toast
      setCaptchaValid(true);


   if (showAddModal) {
        setNewEntity({
          ...newEntity,
          recaptcha: randomCaptcha,  // Set the validated CAPTCHA to the recaptchas field
        });
      }
      if (showEditModal && editEntity) {
        setEditEntity({
          ...editEntity,
          recaptcha: randomCaptcha,  // Set the validated CAPTCHA to the recaptchas field
        });
      }
 setCaptchaInput("");
      setRandomCaptcha(generateRandomString(7));
    } else {
      toast.error("CAPTCHA validation failed, try again!"); // Error toast
      setCaptchaValid(false);
      setRandomCaptcha(generateRandomString(7)); // Regenerate CAPTCHA if it fails
    }
  };

const [randomCaptcha, setRandomCaptcha] = useState("");
const [captchaInput, setCaptchaInput] = useState("");
const [captchaValid, setCaptchaValid] = useState(false);

 const generateRandomString = (length) => {
    const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
    let result = "";
    for (let i = 0; i < length; i++) {
      result += characters.charAt(Math.floor(Math.random() * characters.length));
    }
    return result;
  };

  useEffect(() => {
    setRandomCaptcha(generateRandomString(7));
  }, []);

  const handleCaptchaInput = (e) => {
    setCaptchaInput(e.target.value);
  };

  const validateCaptcha = () => {
    if (captchaInput === randomCaptcha) {
      toast.success("CAPTCHA validated successfully!"); // Success toast
      setCaptchaValid(true);


   if (showAddModal) {
        setNewEntity({
          ...newEntity,
          recaptcha2: randomCaptcha,  // Set the validated CAPTCHA to the recaptchas field
        });
      }
      if (showEditModal && editEntity) {
        setEditEntity({
          ...editEntity,
          recaptcha2: randomCaptcha,  // Set the validated CAPTCHA to the recaptchas field
        });
      }
 setCaptchaInput("");
      setRandomCaptcha(generateRandomString(7));
    } else {
      toast.error("CAPTCHA validation failed, try again!"); // Error toast
      setCaptchaValid(false);
      setRandomCaptcha(generateRandomString(7)); // Regenerate CAPTCHA if it fails
    }
  };


   const handleUpdate = async () => {


















 if (!captchaValid) {
    toast.error("Please validate the CAPTCHA before updating the entity.");
    return; // Prevent updating the entity if CAPTCHA is not valid
  }

 if (!captchaValid) {
    toast.error("Please validate the CAPTCHA before updating the entity.");
    return; // Prevent updating the entity if CAPTCHA is not valid
  }

    try {
const token = getToken();
      await axios.put(`${API_URL}/${editEntity.id}`, editEntity, {






















        headers: { Authorization: `Bearer ${token}` },
      });
      fetchData();
      setShowEditModal(false);
      toast.success("Successfully updated!");
    } catch (error) {
      console.error("Error updating data:", error);
    }
  };

  const handleSearch = () => {
    const filtered = data.filter(
      (entity) =>

      entity.toggle_switch.toLowerCase().includes(searchQuery.toLowerCase()) ||



      entity.toggle_switch2.toLowerCase().includes(searchQuery.toLowerCase()) ||



      entity.url_field.toLowerCase().includes(searchQuery.toLowerCase()) ||



      entity.url_field2.toLowerCase().includes(searchQuery.toLowerCase()) ||


{

        const decimal_fieldString = String(entity.decimal_field || '');
        return decimal_fieldString.toLowerCase().includes(searchQuery.toLowerCase());
      }

{

        const decimal_field2String = String(entity.decimal_field2 || '');
        return decimal_field2String.toLowerCase().includes(searchQuery.toLowerCase());
      }


      entity.percentage_field.toLowerCase().includes(searchQuery.toLowerCase()) ||



      entity.percentage_field2.toLowerCase().includes(searchQuery.toLowerCase()) ||



      entity.documentsequenc.toLowerCase().includes(searchQuery.toLowerCase()) ||



      entity.recaptcha.toLowerCase().includes(searchQuery.toLowerCase()) ||



      entity.recaptcha2.toLowerCase().includes(searchQuery.toLowerCase())     );
    setFilteredData(filtered);
  };

  const handlePageChange = (pageNumber) => {
    setCurrentPage(pageNumber);
  };

  const generateBarcodeImage = async (ref) => {
    if (ref.current) {
      const canvas = await html2canvas(ref.current);
      const imgData = canvas.toDataURL("image/png");
      const link = document.createElement("a");
      link.href = imgData;
      link.download = "barcode.png";
      link.click();
    }
  };

  // Calculate items for current page
  const indexOfLastItem = currentPage * itemsPerPage;
  const indexOfFirstItem = indexOfLastItem - itemsPerPage;
  const currentItems = filteredData.slice(indexOfFirstItem, indexOfLastItem);

  return (
    <div className="container mt-5">
      <ToastContainer />
      <h1 className="mb-4">Entity Table</h1>
      <div className="d-flex justify-content-between mb-3">
        <Button variant="primary" onClick={() => setShowAddModal(true)}>
          Add Entity
        </Button>






















 
        <Form.Control
          type="text"
          className="w-25"
          placeholder="Search..."
          value={searchQuery}
          onChange={(e) => setSearchQuery(e.target.value)}
        />
      </div>
      <Table striped bordered hover responsive variant="grey">
        <thead>
          <tr>
  <th>toggle_switch</th>

  <th>toggle_switch2</th>

  <th>url_field</th>

  <th>url_field2</th>

  <th>decimal_field</th>

  <th>decimal_field2</th>

  <th>percentage_field</th>

  <th>percentage_field2</th>

  <th>documentsequenc</th>

  <th>recaptcha</th>

  <th>recaptcha2</th>

<th>Action</th>
          </tr>
        </thead>
        <tbody >
          {currentItems.map((entity) => (
            <tr key={entity.id}>
 <td>{entity.toggle_switch ? "Yes" : "No"}</td>

 <td>{entity.toggle_switch2 ? "Yes" : "No"}</td>


              <td>{entity.url_field}</td>



              <td>{entity.url_field2}</td>



              <td>{entity.decimal_field}</td>



              <td>{entity.decimal_field2}</td>



              <td>{entity.percentage_field}</td>



              <td>{entity.percentage_field2}</td>



              <td>{entity.documentsequenc}</td>



              <td>{entity.recaptcha}</td>



              <td>{entity.recaptcha2}</td>


              <td>
                <Button
                  variant="warning"
                  size="sm"
                  className="me-2"
                  onClick={() => handleEdit(entity)}
                >
                  Update
                </Button>






















  	
                <Button
                  variant="danger"
                  size="sm"
                  onClick={() => {
                    setDeleteEntityId(entity.id);
                    setShowDeleteModal(true);
                  }}
                >
                  Delete
                </Button>
              </td>
            </tr>
          ))}
        </tbody>
      </Table>
      <Pagination className="d-flex justify-content-center mt-4">
        {Array.from(
          { length: Math.ceil(filteredData.length / itemsPerPage) },
          (_, index) => (
            <Pagination.Item
              key={index + 1}
              active={index + 1 === currentPage}
              onClick={() => handlePageChange(index + 1)}
            >
              {index + 1}
            </Pagination.Item>
          )
        )}
      </Pagination>






















       <Modal show={showEditModal} onHide={() => setShowEditModal(false)}>
        <Modal.Header closeButton>
          <Modal.Title>Edit Entity</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          {editEntity && (
            <Form>
<div className="form-group">
  <div className="container mt-4" style={{ width: '100%' }}>
    <div className="card p-4 shadow-sm rounded">
      <div className="row align-items-center">
        <div className="col-md-3">
        </div>
 <div className="form-group form-check">
          <input
            type="checkbox"
            className="form-check-input"
            id="toggle_switch"
            name="toggle_switch"
            value={editEntity.toggle_switch}
            onChange={handleEditChange}
            required

          />
          <label className="form-check-label" htmlFor="toggle_switch">
           Toggle Switch
          </label>
        </div>

 <div className="form-group form-check">
          <input
            type="checkbox"
            className="form-check-input"
            id="toggle_switch2"
            name="toggle_switch2"
            value={editEntity.toggle_switch2}
            onChange={handleEditChange}
            required

          />
          <label className="form-check-label" htmlFor="toggle_switch2">
           Toggle Switch2
          </label>
        </div>

 <div className="form-group">
          <label htmlFor="url_field">Url Field</label>
          <input
            type="url"
            className="form-control"
            id="url_field"
            name="url_field"
            value={editEntity.url_field}
            onChange={handleEditChange}
            required
style={{
              backgroundColor: '#f7f9fc',
              border: '1px solid #ced4da',
              borderRadius: '8px',
              padding: '10px',
              transition: 'border-color 0.3s ease, box-shadow 0.3s ease',
            }}
            onFocus={(e) => {
              e.target.style.borderColor = '#007bff';
              e.target.style.boxShadow = '0 0 8px rgba(0, 123, 255, 0.25)';
            }}
            onBlur={(e) => {
              e.target.style.borderColor = '#ced4da';
              e.target.style.boxShadow = 'none';
            }}
          />
        </div>

 <div className="form-group">
          <label htmlFor="url_field2">Url Field2</label>
          <input
            type="url"
            className="form-control"
            id="url_field2"
            name="url_field2"
            value={editEntity.url_field2}
            onChange={handleEditChange}
            required
style={{
              backgroundColor: '#f7f9fc',
              border: '1px solid #ced4da',
              borderRadius: '8px',
              padding: '10px',
              transition: 'border-color 0.3s ease, box-shadow 0.3s ease',
            }}
            onFocus={(e) => {
              e.target.style.borderColor = '#007bff';
              e.target.style.boxShadow = '0 0 8px rgba(0, 123, 255, 0.25)';
            }}
            onBlur={(e) => {
              e.target.style.borderColor = '#ced4da';
              e.target.style.boxShadow = 'none';
            }}
          />
        </div>

 <div className="form-group">
          <label htmlFor="decimal_field">Decimal Field</label>
          <input
            type="number"
            step="0.01"
            className="form-control"
            id="decimal_field"
            name="decimal_field"
            value={editEntity.decimal_field}
            onChange={handleChange}
            required
style={{
              backgroundColor: '#f7f9fc',
              border: '1px solid #ced4da',
              borderRadius: '8px',
              padding: '10px',
              transition: 'border-color 0.3s ease, box-shadow 0.3s ease',
            }}
            onFocus={(e) => {
              e.target.style.borderColor = '#007bff';
              e.target.style.boxShadow = '0 0 8px rgba(0, 123, 255, 0.25)';
            }}
            onBlur={(e) => {
              e.target.style.borderColor = '#ced4da';
              e.target.style.boxShadow = 'none';
            }}
          />
        </div>

 <div className="form-group">
          <label htmlFor="decimal_field2">Decimal Field2</label>
          <input
            type="number"
            step="0.01"
            className="form-control"
            id="decimal_field2"
            name="decimal_field2"
            value={editEntity.decimal_field2}
            onChange={handleChange}
            required
style={{
              backgroundColor: '#f7f9fc',
              border: '1px solid #ced4da',
              borderRadius: '8px',
              padding: '10px',
              transition: 'border-color 0.3s ease, box-shadow 0.3s ease',
            }}
            onFocus={(e) => {
              e.target.style.borderColor = '#007bff';
              e.target.style.boxShadow = '0 0 8px rgba(0, 123, 255, 0.25)';
            }}
            onBlur={(e) => {
              e.target.style.borderColor = '#ced4da';
              e.target.style.boxShadow = 'none';
            }}
          />
        </div>

<Form.Group className="mb-3">
          <Form.Label>Percentage Field</Form.Label>
          <Form.Control
            type="number"
            name="percentage_field"
            value={editEntity.percentage_field}
            onChange={handleEditChange}
            placeholder="Enter a percentage_field"
style={{
              backgroundColor: '#f7f9fc',
              border: '1px solid #ced4da',
              borderRadius: '8px',
              padding: '10px',
              transition: 'border-color 0.3s ease, box-shadow 0.3s ease',
            }}
            onFocus={(e) => {
              e.target.style.borderColor = '#007bff';
              e.target.style.boxShadow = '0 0 8px rgba(0, 123, 255, 0.25)';
            }}
            onBlur={(e) => {
              e.target.style.borderColor = '#ced4da';
              e.target.style.boxShadow = 'none';
            }}
          />
        </Form.Group>

<Form.Group className="mb-3">
          <Form.Label>Percentage Field2</Form.Label>
          <Form.Control
            type="number"
            name="percentage_field2"
            value={editEntity.percentage_field2}
            onChange={handleEditChange}
            placeholder="Enter a percentage_field2"
style={{
              backgroundColor: '#f7f9fc',
              border: '1px solid #ced4da',
              borderRadius: '8px',
              padding: '10px',
              transition: 'border-color 0.3s ease, box-shadow 0.3s ease',
            }}
            onFocus={(e) => {
              e.target.style.borderColor = '#007bff';
              e.target.style.boxShadow = '0 0 8px rgba(0, 123, 255, 0.25)';
            }}
            onBlur={(e) => {
              e.target.style.borderColor = '#ced4da';
              e.target.style.boxShadow = 'none';
            }}
          />
        </Form.Group>

<label htmlFor="documentsequenc" className="form-label">documentsequenc</label>
       
        <div className="col-md-9">
          <input
            type="text"
            className="form-control"
            id="documentsequenc"
            name="documentsequenc"
            value={editEntity.documentsequenc}
            onChange={handleEditChange}
            required
            style={{
              backgroundColor: '#f7f9fc',
              border: '1px solid #ced4da',
              borderRadius: '8px',
              padding: '10px',
              transition: 'border-color 0.3s ease, box-shadow 0.3s ease',
            }}
            onFocus={(e) => {
              e.target.style.borderColor = '#007bff';
              e.target.style.boxShadow = '0 0 8px rgba(0, 123, 255, 0.25)';
            }}
            onBlur={(e) => {
              e.target.style.borderColor = '#ced4da';
              e.target.style.boxShadow = 'none';
            }}
          />
        </div>

 <Form.Group controlId="captchaInput">
          <Form.Label>Enter CAPTCHA: {randomCaptcha}</Form.Label>
          <Form.Control 
            type="text" 
            value={captchaInput} 
            onChange={handleCaptchaInput} 
            placeholder="Enter CAPTCHA"
          />
        </Form.Group>
        <Button onClick={validateCaptcha} variant="primary">
          Validate CAPTCHA
        </Button>


 <Form.Group controlId="captchaInput">
          <Form.Label>Enter CAPTCHA: {randomCaptcha}</Form.Label>
          <Form.Control 
            type="text" 
            value={captchaInput} 
            onChange={handleCaptchaInput} 
            placeholder="Enter CAPTCHA"
          />
        </Form.Group>
        <Button onClick={validateCaptcha} variant="primary">
          Validate CAPTCHA
        </Button>


    
      </div>
    </div>
  </div>
</div>
          </Form>
          
          )}
        </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={() => setShowEditModal(false)}>
            Close
          </Button>
          <Button variant="primary" onClick={handleUpdate}>
            Save changes
          </Button>
        </Modal.Footer>
      </Modal>
      <Modal show={showAddModal} onHide={() => setShowAddModal(false)}>
        <Modal.Header closeButton>
          <Modal.Title>Add New Entity</Modal.Title>
        </Modal.Header>
        <Modal.Body>
        <Form>
      <div className="form-group">
  <div className="container mt-4" style={{ width: '100%' }}>
    <div className="card p-4 shadow-sm rounded">
      <div className="row align-items-center">
        <div className="col-md-3">
        </div>
 <div className="form-group form-check">
          <input
            type="checkbox"
            className="form-check-input"
            id="toggle_switch"
            name="toggle_switch"
            value={newEntity.toggle_switch}
            onChange={handlesChange}
            required

  
          />
          <label className="form-check-label" htmlFor="toggle_switch">
           Toggle Switch
          </label>
        </div>

 <div className="form-group form-check">
          <input
            type="checkbox"
            className="form-check-input"
            id="toggle_switch2"
            name="toggle_switch2"
            value={newEntity.toggle_switch2}
            onChange={handlesChange}
            required

  
          />
          <label className="form-check-label" htmlFor="toggle_switch2">
           Toggle Switch2
          </label>
        </div>

 <div className="form-group">
          <label htmlFor="url_field">Url Field</label>
          <input
            type="url"
            className="form-control"
            id="url_field"
            name="url_field"
            value={newEntity.url_field}
            onChange={handleChange}
            required
style={{
              backgroundColor: '#f7f9fc',
              border: '1px solid #ced4da',
              borderRadius: '8px',
              padding: '10px',
              transition: 'border-color 0.3s ease, box-shadow 0.3s ease',
            }}
            onFocus={(e) => {
              e.target.style.borderColor = '#007bff';
              e.target.style.boxShadow = '0 0 8px rgba(0, 123, 255, 0.25)';
            }}
            onBlur={(e) => {
              e.target.style.borderColor = '#ced4da';
              e.target.style.boxShadow = 'none';
            }}
          />
        </div>

 <div className="form-group">
          <label htmlFor="url_field2">Url Field2</label>
          <input
            type="url"
            className="form-control"
            id="url_field2"
            name="url_field2"
            value={newEntity.url_field2}
            onChange={handleChange}
            required
style={{
              backgroundColor: '#f7f9fc',
              border: '1px solid #ced4da',
              borderRadius: '8px',
              padding: '10px',
              transition: 'border-color 0.3s ease, box-shadow 0.3s ease',
            }}
            onFocus={(e) => {
              e.target.style.borderColor = '#007bff';
              e.target.style.boxShadow = '0 0 8px rgba(0, 123, 255, 0.25)';
            }}
            onBlur={(e) => {
              e.target.style.borderColor = '#ced4da';
              e.target.style.boxShadow = 'none';
            }}
          />
        </div>

 <div className="form-group">
          <label htmlFor="decimal_field">Decimal Field</label>
          <input
            type="number"
            step="0.01"
            className="form-control"
            id="decimal_field"
            name="decimal_field"
            value={newEntity.decimal_field}
            onChange={handleChange}
            required
style={{
              backgroundColor: '#f7f9fc',
              border: '1px solid #ced4da',
              borderRadius: '8px',
              padding: '10px',
              transition: 'border-color 0.3s ease, box-shadow 0.3s ease',
            }}
            onFocus={(e) => {
              e.target.style.borderColor = '#007bff';
              e.target.style.boxShadow = '0 0 8px rgba(0, 123, 255, 0.25)';
            }}
            onBlur={(e) => {
              e.target.style.borderColor = '#ced4da';
              e.target.style.boxShadow = 'none';
            }}
          />
        </div>

 <div className="form-group">
          <label htmlFor="decimal_field2">Decimal Field2</label>
          <input
            type="number"
            step="0.01"
            className="form-control"
            id="decimal_field2"
            name="decimal_field2"
            value={newEntity.decimal_field2}
            onChange={handleChange}
            required
style={{
              backgroundColor: '#f7f9fc',
              border: '1px solid #ced4da',
              borderRadius: '8px',
              padding: '10px',
              transition: 'border-color 0.3s ease, box-shadow 0.3s ease',
            }}
            onFocus={(e) => {
              e.target.style.borderColor = '#007bff';
              e.target.style.boxShadow = '0 0 8px rgba(0, 123, 255, 0.25)';
            }}
            onBlur={(e) => {
              e.target.style.borderColor = '#ced4da';
              e.target.style.boxShadow = 'none';
            }}
          />
        </div>

<div className="form-group">
          <label htmlFor="percentage_field">Percentage Field</label>
          <input
            type="number"
            className="form-control"
            id="percentage_field"
            name="percentage_field"
            value={newEntity.percentage_field}
            onChange={handleChange}
            required
style={{
              backgroundColor: '#f7f9fc',
              border: '1px solid #ced4da',
              borderRadius: '8px',
              padding: '10px',
              transition: 'border-color 0.3s ease, box-shadow 0.3s ease',
            }}
            onFocus={(e) => {
              e.target.style.borderColor = '#007bff';
              e.target.style.boxShadow = '0 0 8px rgba(0, 123, 255, 0.25)';
            }}
            onBlur={(e) => {
              e.target.style.borderColor = '#ced4da';
              e.target.style.boxShadow = 'none';
            }}
          />
        </div>

<div className="form-group">
          <label htmlFor="percentage_field2">Percentage Field2</label>
          <input
            type="number"
            className="form-control"
            id="percentage_field2"
            name="percentage_field2"
            value={newEntity.percentage_field2}
            onChange={handleChange}
            required
style={{
              backgroundColor: '#f7f9fc',
              border: '1px solid #ced4da',
              borderRadius: '8px',
              padding: '10px',
              transition: 'border-color 0.3s ease, box-shadow 0.3s ease',
            }}
            onFocus={(e) => {
              e.target.style.borderColor = '#007bff';
              e.target.style.boxShadow = '0 0 8px rgba(0, 123, 255, 0.25)';
            }}
            onBlur={(e) => {
              e.target.style.borderColor = '#ced4da';
              e.target.style.boxShadow = 'none';
            }}
          />
        </div>

<label htmlFor="documentsequenc" className="form-label">documentsequenc</label>
         
        <div className="col-md-9">
          <input
            type="text"
            className="form-control"
            id="documentsequenc"
            name="documentsequenc"
            value={newEntity.documentsequenc}
            onChange={handleChange}
            required
            style={{
              backgroundColor: '#f7f9fc',
              border: '1px solid #ced4da',
              borderRadius: '8px',
              padding: '10px',
              transition: 'border-color 0.3s ease, box-shadow 0.3s ease',
            }}
            onFocus={(e) => {
              e.target.style.borderColor = '#007bff';
              e.target.style.boxShadow = '0 0 8px rgba(0, 123, 255, 0.25)';
            }}
            onBlur={(e) => {
              e.target.style.borderColor = '#ced4da';
              e.target.style.boxShadow = 'none';
            }}
          />
        </div>

 <Form.Group controlId="captchaInput">
          <Form.Label>Enter CAPTCHA: {randomCaptcha}</Form.Label>
          <Form.Control 
            type="text" 
            value={captchaInput} 
            onChange={handleCaptchaInput} 
            placeholder="Enter CAPTCHA"
          />
        </Form.Group>
        <Button onClick={validateCaptcha} variant="primary">
          Validate CAPTCHA
        </Button>


 <Form.Group controlId="captchaInput">
          <Form.Label>Enter CAPTCHA: {randomCaptcha}</Form.Label>
          <Form.Control 
            type="text" 
            value={captchaInput} 
            onChange={handleCaptchaInput} 
            placeholder="Enter CAPTCHA"
          />
        </Form.Group>
        <Button onClick={validateCaptcha} variant="primary">
          Validate CAPTCHA
        </Button>


 </div>
    </div>
  </div>
</div>
</Form>

        </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={() => setShowAddModal(false)}>
            Close
          </Button>
          <Button variant="primary" onClick={handleAdd





















}>
            Add Entity
          </Button>






















        </Modal.Footer>
      </Modal>
      <Modal show={showDeleteModal} onHide={() => setShowDeleteModal(false)}>
        <Modal.Header closeButton>
          <Modal.Title>Confirm Delete</Modal.Title>
        </Modal.Header>
        <Modal.Body>Are you sure you want to delete this entity?</Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={() => setShowDeleteModal(false)}>
            Cancel
          </Button>
          <Button variant="danger" onClick={handleDelete}>
            Delete
          </Button>
        </Modal.Footer>
      </Modal>
    </div>
  );
};

export default EntityTable;
