// import React, { useState } from 'react';
// import 'bootstrap/dist/css/bootstrap.min.css';
// import "../Dashboard/CSS/CSS/CommonStyle.css";

// function DataType6() {
//   const [firstName, setFirstName] = useState('');
//   const [additionalEntries, setAdditionalEntries] = useState([]);

//   const handleFirstNameChange = (e) => {
//     setFirstName(e.target.value);
//   };

//   const handleAddFields = () => {
//     setAdditionalEntries([...additionalEntries, { name: '', description: '' }]);
//   };

//   const handleNameChange = (index, e) => {
//     const updatedEntries = [...additionalEntries];
//     updatedEntries[index].name = e.target.value;
//     setAdditionalEntries(updatedEntries);
//   };

//   const handleDescriptionChange = (index, e) => {
//     const updatedEntries = [...additionalEntries];
//     updatedEntries[index].description = e.target.value;
//     setAdditionalEntries(updatedEntries);
//   };

//   const handleSubmit = (e) => {
//     e.preventDefault();
//     const formData = {
//       Name: firstName,
//       test2: additionalEntries
//     };
//     console.log(JSON.stringify(formData));  
//   };

//   return (

//       <div className="container mt-4" style={{ width: '50%' }}>
//          <div className='card p-4 shadow-sm rounded'>
//          <form onSubmit={handleSubmit}>
//           <div className="form-group">
//             <label htmlFor="first-name" className="form-label">Name:</label>
//             <input
//               type="text"
//               id="first-name"
//               name="First-name"
//               className="form-control"
//               value={firstName}
//               onChange={handleFirstNameChange}
//             />
//           </div>
//           <h2 className="title_main mt-3 text-primary">Test 2</h2>
//           {additionalEntries.map((entry, index) => (
//             <div className="form_content" key={index}>
//               <div className="form-group">
//                 <label htmlFor={`additional-name-${index}`} className="form-label">Name:</label>
//                 <input
//                   type="text"
//                   id={`additional-name-${index}`}
//                   name={`additional-name-${index}`}
//                   className="form-control"
//                   value={entry.name}
//                   onChange={(e) => handleNameChange(index, e)}
//                 />
//               </div>
//               <div className="form-group">
//                 <label htmlFor={`additional-description-${index}`} className="form-label">Description:</label>
//                 <textarea
//                   id={`additional-description-${index}`}
//                   name={`additional-description-${index}`}
//                   className="form-control"
//                   rows="4"
//                   value={entry.description}
//                   onChange={(e) => handleDescriptionChange(index, e)}
//                 ></textarea>
//               </div>
//             </div>
//           ))}
//           <div className="btn-group mt-3">
//             <button type="submit" className="btn btn-primary me-3">Submit</button>
//             <button type="button" className="btn btn-primary" onClick={handleAddFields}>Add Test2</button>
//           </div>
//         </form>
//          </div>
        
//       </div>
    
//   );
// }

// export default DataType6;


import React, { useState,useEffect } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import "../Dashboard/CSS/CSS/CommonStyle.css";
import Spinner from '../../UIComponants/Spinner';

function DataType6() {
  const [firstName, setFirstName] = useState('');
  const [additionalEntries, setAdditionalEntries] = useState([]);
  const [loading, setLoading] = useState(true);

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

  const handleFirstNameChange = (e) => {
    setFirstName(e.target.value);
  };

  const handleAddFields = () => {
    setAdditionalEntries([...additionalEntries, { name: '', description: '' }]);
  };

  const handleNameChange = (index, e) => {
    const updatedEntries = [...additionalEntries];
    updatedEntries[index].name = e.target.value;
    setAdditionalEntries(updatedEntries);
  };

  const handleDescriptionChange = (index, e) => {
    const updatedEntries = [...additionalEntries];
    updatedEntries[index].description = e.target.value;
    setAdditionalEntries(updatedEntries);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    const formData = {
      Name: firstName,
      test2: additionalEntries,
    };
    console.log(JSON.stringify(formData));
  };

  return (
    <div style={{marginTop:"11rem"}}>
      {loading ? (
        <Spinner/>
      ):(
        <div className="container mt-5" style={{ maxWidth: '700px' }}>
      <div className="card p-4 shadow-lg border-0 rounded">
        <h2 className="text-center mb-4 title_main" style={{ fontWeight: 'bold' }}>
          Test 2
        </h2>
        <form onSubmit={handleSubmit}>
          {/* First Name Field */}
          <div className="form-group mb-3">
            <label htmlFor="first-name" className="form-label fw-semibold">
              First Name:
            </label>
            <input
              type="text"
              id="first-name"
              name="first-name"
              className="form-control shadow-sm custom-hover-border"
              value={firstName}
              onChange={handleFirstNameChange}
              placeholder="Enter your name"
              required
            />
          </div>

          {/* Section Header */}
          <h3 className="mt-4 mb-3 title_main" style={{ fontWeight: 'bold' }}>
            Add Test
          </h3>

          {/* Dynamic Fields */}
          {additionalEntries.map((entry, index) => (
            <div className="p-3 mb-3 border rounded shadow-sm" key={index}>
              <div className="form-group mb-3">
                <label htmlFor={`additional-name-${index}`} className="form-label fw-semibold">
                  Name:
                </label>
                <input
                  type="text"
                  id={`additional-name-${index}`}
                  name={`additional-name-${index}`}
                  className="form-control shadow-sm custom-hover-border"
                  value={entry.name}
                  onChange={(e) => handleNameChange(index, e)}
                  placeholder="Enter additional name"
                  required
                />
              </div>
              <div className="form-group mb-3">
                <label htmlFor={`additional-description-${index}`} className="form-label fw-semibold">
                  Description:
                </label>
                <textarea
                  id={`additional-description-${index}`}
                  name={`additional-description-${index}`}
                  className="form-control shadow-sm custom-hover-border"
                  rows="3"
                  value={entry.description}
                  onChange={(e) => handleDescriptionChange(index, e)}
                  placeholder="Enter a description"
                  required
                ></textarea>
              </div>
            </div>
          ))}

          {/* Buttons */}
          <div className="d-flex justify-content-between mt-4">
            <button
              type="submit"
              className="btn btn-primary btn-lg shadow-sm"
              style={{
                background: 'linear-gradient(90deg, #0E6591, #0B4C6A)',
                border: 'none',
                color: '#fff',
              }}
            >
              Submit
            </button>
            <button
              type="button"
              className="btn btn-outline btn-lg shadow-sm custom_manage_column_button"
              onClick={handleAddFields}
            >
              Add Entry
            </button>
          </div>
        </form>
      </div>
    </div>
      )}
    </div>
    
  );
}

export default DataType6;
