"use client";

import React, { useEffect, useRef, useState } from 'react'
import countryData from "@/data/countryData";
import Swal from 'sweetalert2';

import { userCareerAPI, userCareerQuestionAPI } from "@/lib/api";
// import { getServerSideProps } from 'next/dist/build/templates/pages';
import moment from 'moment';
import Image from 'next/image';
const ContactFrom = ({ careerType: careerTypeProp, skills, questionsRole }: { careerType: string; skills: string[]; questionsRole: string }) => {



    const formRef = useRef<HTMLFormElement>(null);

    // Mobile 10 digit validation Start
        const handleMobileChange = (e: { target: { value: string } }) => {
            const value = e.target.value;
    
            // Allow only digits, max 10 digits, and starting digit 6-9 (only if value has at least 1 digit)
            if (/^$|^[6-9]\d{0,9}$/.test(value)) {
                setMobile(value);
            }
        };
        // Mobile 10 digit validation End
    
        // Birthday 18 years validation start
        const [error, setError] = useState("");
    
        const handleDOBChange = (e: React.ChangeEvent<HTMLInputElement>) => {
            const value = e.target.value;
            setDateOfBirthday(value);
    
            const age = moment().diff(moment(value), "years");
            setError(age < 18 ? "You must be at least 18 years old" : "");
        };
    // Birthday 18 years validation start

    const [questions, setQuestions] = useState([] as { id: string | number; question: string }[]);
    const [careerType] = useState(careerTypeProp);

    useEffect(() => {
        const fetchQuestions = async () => {
        try {
            const response = await userCareerQuestionAPI(careerType);

            console.log("API Response:", response.data);
            if (response.data && Array.isArray(response.data.data)) {
            setQuestions(response.data.data);
            } else {
            console.warn("No questions found!");
            }
        } catch (error) {
            console.error("Error fetching data:", error);
        }
    };

    fetchQuestions();
  }, []);


    const [isShrunk, setIsShrunk] = useState(false);
    const [isExpanded, setIsExpanded] = useState(false);
    const [hideText, setHideText] = useState(false);
    const [showButton, setShowButton] = useState(false);
  
    const handleFocus = () => {
      if (!isShrunk) {
        setIsShrunk(true);
        setIsExpanded(true);
        setHideText(true);
        setShowButton(true);
      }
    };
  
    const handleReset = () => {
      setIsShrunk(false);
      setIsExpanded(false);
      setHideText(false);
      setShowButton(false);
    };
  
      const [selectedCountry, setSelectedCountry] = useState("India"); // Country Name
      const [selectedCountryCode, setSelectedCountryCode] = useState("91"); // Country Code
      const [isDropdownOpen, setIsDropdownOpen] = useState(false);
      const [searchQuery, setSearchQuery] = useState("");
    //   const [careerType, setCareerType] = useState("Laravel Developer");
  
  
      const handleFocusdrop = () => {
          setIsDropdownOpen(true);
      };
  
      interface CountryOption {
        label: string;
        value: string;
      }
      
      const handleSelectCountry = (country: CountryOption) => {
        setSelectedCountry(country.label);
        setSelectedCountryCode(country.value);
      
        //  Also update countryName and countryCode state
        setCountryName(country.label);
        setCountryCode(country.value);
      
        setIsDropdownOpen(false);
        setSearchQuery("");
      };
      
  
      const handleSkillChange = (e: React.ChangeEvent<HTMLInputElement>) => {
              const { value } = e.target;
          
              setSkill((prev) =>
                  prev.includes(value) ? prev.filter((item) => item !== value) : [...prev, value]
              );
          };
  
      // Filter countries based on search query
      const filteredCountries = countryData.filter((country) =>
          country.label.toLowerCase().includes(searchQuery.toLowerCase())
      );


      const handleAnswerChange = (id: string | number, value: string) => {
        setAnswers((prev) => ({
            ...prev,
            [id]: value, // Store answer with ID as key
        }));
    };
  
  
  //   API Code Start 
  
      //   PERFECT API CODE START 
  
      const [name,setName] = useState("");
      const [email,setEmail] = useState("");
      const [countryName,setCountryName] = useState("India");
      const [countryCode,setCountryCode] = useState("91");
      const [mobile,setMobile] = useState("");
      const [dateOfBirthday,setDateOfBirthday] = useState("");
      const [gender,setGender] = useState("");
      const [qualification,setQualification] = useState("");
      const [joinAs, setJoinAs] = useState('');
      const [experience,setExperience] = useState("");
      const [currentSalary,setCurrentSalary] = useState("");
      const [skill, setSkill] = useState<string[]>([]);
      const [atAhmedabad,setAtAhmedabad] = useState("");
      const [city,setCity] = useState("");
      const [answers, setAnswers] = useState<Record<string, string>>({});
  
      const [errName,setErrName] = useState("");
      const [errEmail,setErrEmail] = useState("");
      const [errCountryName,setErrCountryName] = useState("");
    //   const [errCountryCode,setErrCountryCode] = useState("");
      const [errMobile,setErrMobile] = useState("");
      const [errDateOfBirthday,setErrDateOfBirthday] = useState("");
      const [errGender,setErrGender] = useState("");
      const [errQualification,setErrQualification] = useState("");
      const [errJoinAs, setErrJoinAs] = useState('');
      const [errExperience,setErrExperience] = useState("");
      const [errCurrentSalary,setErrCurrentSalary] = useState("");
      const [errSkill,setErrSkill] = useState("");
      const [errAtAhmedabad,setErrAtAhmedabad] = useState("");
      const [errCity,setErrCity] = useState("");
    //   const [errIncreate,setIncreate] = useState("");
  
    //   const [response, setResponse] = useState(null);
      const [loading, setLoading] = useState(false);
      
      const Validation=()=>{
          let isValid = true;
          setErrName("");
          setErrEmail("");
          setErrCountryName("");
        //   setErrCountryCode("");
          setErrMobile("");
          setErrDateOfBirthday("");
          setErrGender("");
          setErrQualification("");
          setErrExperience("");
          setErrCurrentSalary("");
          setErrSkill("");
          setErrAtAhmedabad("");
          setErrCity("");
        //   setIncreate(""); 

        // console.log("🔍 Starting Validation...");
        // console.log("👤 Name:", name);
        // console.log("📧 Email:", email);
        // console.log("🌍 Country Name:", countryName);
        // console.log("📞 Country Code:", countryCode);
        // console.log("📱 Mobile:", mobile);
        // console.log("🎂 Date of Birth:", dateOfBirthday);
        // console.log("🎓 Qualification:", qualification);
        // console.log("💼 Experience:", experience);
        // console.log("💰 Current Salary:", currentSalary);
        // console.log("🛠️ Skill:", skill);
        // console.log("📍 At Ahmedabad:", atAhmedabad);
  
          if(name == "")
          {
              isValid = false;
              setErrName("Please Enter Name");
          }
          if(email == "")
          {
              isValid = false;
              setErrEmail("Please Enter Email");
          }
          if(countryName == "")
          {
              isValid = false;
              setErrCountryName("Please Enter Your Country");
          }
        //   if(countryCode == "")
        //   {
        //       isValid = false;
        //       setErrCountryCode("Please Enter Country Code");
        //   }
        //   if(mobile == "")
        //   {
        //       isValid = false;
        //       setErrMobile("Please Enter Mobile Number");
        //   }
            if (mobile.trim() === "") {
                isValid = false;
                setErrMobile("Please enter your mobile number");
                } else if (!/^\d{10}$/.test(mobile)) {
                isValid = false;
                setErrMobile("Mobile number must be exactly 10 digits");
                } else {
                setErrMobile(""); // Clear error if valid
            }
          if(dateOfBirthday == "")
          {
              isValid = false;
              setErrDateOfBirthday("Please Enter Date Of Birthday");
          }
          if(gender == "")
          {
              isValid = false;
              setErrGender("Please Enter Gender");
          }
          if(qualification == "")
          {
              isValid = false;
              setErrQualification("Please Enter Your Qualification");
          }
        //   if(experience == "")
        //   {
        //       isValid = false;
        //       setErrExperience("Please Enter Your Experience");
        //   }
        //   if(currentSalary == "")
        //   {
        //       isValid = false;
        //       setErrCurrentSalary("Please Enter Your Current Salary");
        //   }
            if (joinAs === '') {
                isValid = false;
                setErrJoinAs("Please select Intern or Experienced");
            }

            if (joinAs === 'Experienced') {
                if (experience.trim() === '') {
                    isValid = false;
                    setErrExperience("Please enter your experience");
                }
                if (currentSalary.trim() === '') {
                    isValid = false;
                    setErrCurrentSalary("Please enter your current salary");
                }
            }

          if (skill.length === 0) {
              isValid = false;
              setErrSkill("Please select at least one Skill");
            }
           // ✅ Ahmedabad validation
            if (atAhmedabad === "") {
                isValid = false;
                setErrAtAhmedabad("Please Select Your Location");
            }

            // ✅ City validation only if No is selected
            if (atAhmedabad === "No" && city.trim() === "") {
                isValid = false;
                setErrCity("Please Enter Your City");
            }
          return isValid
      }
      
  
      const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault();
        //   console.log("Validation result: ", Validation()); // Debugging
        //   console.log("Validation result: ", skill); // Debugging
        //   return false;
        if(Validation())
            {
                setLoading(true);
                const formData = {
                    name,
                    email,
                    countryName,  // Now correctly updated
                    countryCode,
                    mobile,
                    dateOfBirthday: moment(dateOfBirthday).format("DD-MM-YYYY"),
                    gender,
                    qualification,
                    joinAs: joinAs === "Intern" ? "1" : "0",
                    experience,
                    currentSalary,
                    skill: skill, 
                    atAhmedabad: atAhmedabad === "Yes" ? "1" : "0",
                    city,
                    careerType: careerType,
                    // question: JSON.stringify([
                    //     { id: "1", ans: "aaa" },
                    //     { id: "2", ans: "bbb" }
                    // ]).replace(/"/g, "'"),
        
                    question: JSON.stringify(
                        Object.entries(answers).map(([id, ans]) => ({ id, ans }))
                    ).replace(/"/g, "'"),  // Convert JSON to required format
                };
                
                // console.log("📡 Sending Data to API:", formData); // 🔍 Debugging ke liye
                //   return false;
                // console.log("Submitted Data:", formData);
        
                userCareerAPI(formData).then((data) => {
                    if(data.data.status)
                    {
                        // setResponse(data.data.massage);
                         // Success popup
                        Swal.fire({
                            title: "Success!",
                            text: "Thanks for contacting us! Our team will reach out to you very soon.",
                            icon: "success",
                            confirmButtonText: "OK"
                        }).then(() => {
                            formRef.current?.reset(); 
                            
                            // window.location.reload(); // This will reload the page
                            // window.location.href = "/graphic-designer-career-form";
                        });
        
                       
                    }
                    else{
                        // setResponse(data.data.massage);
                        // Error popup
                        Swal.fire({
                            title: "Error!",
                            text: "Failed to send data!",
                            icon: "error",
                            confirmButtonText: "Try Again"
                        });
                    }
                    setLoading(false);
                })
          }
      }
      const Name = (e: React.ChangeEvent<HTMLInputElement>) => {
              setName(e.target.value);
          };
          const Email = (e: React.ChangeEvent<HTMLInputElement>) => {
              setEmail(e.target.value);
          };
        //   const Mobile = (e: React.ChangeEvent<HTMLInputElement>) => {
        //       setMobile(e.target.value);
        //   };
        //   const DateOfBirthday = (e: React.ChangeEvent<HTMLInputElement>) => {
        //       setDateOfBirthday(e.target.value);
        //   };
          const Gender = (e: React.ChangeEvent<HTMLInputElement>) => {
              setGender(e.target.value);
          };
          const Qualification = (e: React.ChangeEvent<HTMLInputElement>) => {
              setQualification(e.target.value);
          };
        //   const Experience = (e: React.ChangeEvent<HTMLInputElement>) => {
        //       setExperience(e.target.value);
        //   };
        //   const CurrentSalary = (e: React.ChangeEvent<HTMLInputElement>) => {
        //       setCurrentSalary(e.target.value);
        //   };
        //   const AtAhmedabad = (e: React.ChangeEvent<HTMLInputElement>) => {
        //       setAtAhmedabad(e.target.value);
        //   };
        //   const City = (e: React.ChangeEvent<HTMLInputElement>) => {
        //       setCity(e.target.value);
        //   };
        const AtAhmedabad = (e: React.ChangeEvent<HTMLInputElement>) => {
            const value = e.target.value;
            setAtAhmedabad(value);
            setErrAtAhmedabad('');
            if (value === 'Yes') {
                setCity('');
                setErrCity('');
            }
        };
        const handleJoinAs = (e: React.ChangeEvent<HTMLInputElement>) => {
            const value = e.target.value;
            setJoinAs(value);
            setErrJoinAs('');
            if (value === 'Intern') {
                setExperience('');
                setCurrentSalary('');
                setErrExperience('');
                setErrCurrentSalary('');
            }
        };
        const handleExperience = (e: React.ChangeEvent<HTMLInputElement>) => {
            setExperience(e.target.value);
            setErrExperience('');
        };

        const handleCurrentSalary = (e: React.ChangeEvent<HTMLInputElement>) => {
            setCurrentSalary(e.target.value);
            setErrCurrentSalary('');
        };
        const City = (e: React.ChangeEvent<HTMLInputElement>) => {
            setCity(e.target.value);
            setErrCity('');
        };
      //   PERFECT API CODE END 



  return (
    <div className='ContactFormPage py-20'>
      <div className='max-w-[1200px] mx-auto  px-3'>
        <div className='mb-10'>
            <div>
                <svg height="20" width="30" className={`backAnima ${showButton ? "show-btn" : ""}`} onClick={handleReset} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z"/></svg>
            </div>
            <h1 className={`LetsTalk ${hideText ? "hide-text" : ""}`}>Grow With Us</h1>
        </div>
        <div className='grid gap-4 sm:grid-cols-12'>
            <div className='sm:col-span-7'>
                <div className={`Custome_form_animation ${isShrunk ? "shrinked" : ""} ${isExpanded ? "expanded" : ""}`}>
                    <form action="" ref={formRef} onSubmit={handleSubmit}>
                        <div className='py-3'>
                            <label htmlFor="" className='label_text mb-0'>Full Name</label>
                            <input type="text" name="name" className='input_fild ms-0 md:ms-3 text-[24px]' onChange={Name} placeholder='eg. Priti Zala' onFocus={handleFocus} />
                        </div>
                            <p className='w-full ml-44 mt-2 text-red-700 text-sm'>{errName}</p>
                        <div className='py-3'>
                            <label htmlFor="" className='label_text mb-0'>Email</label>
                            <input type="email" name="email" className='input_fild ms-0 md:ms-3 text-[24px]' onChange={Email} placeholder='eg. pritizala@gmail.com' onFocus={handleFocus} />
                        </div>
                        <p className='w-full ml-44 mt-2 text-red-700 text-sm'>{errEmail}</p>
                        <div className='py-3 country-dropdown-container hidden'>
                            <label htmlFor="" className='label_text mb-0'>Country</label>
                            {/* <input type="text" className='input_fild ms-0 md:ms-3 text-[24px]' placeholder='eg. India' onFocus={handleFocus} /> */}
                            <input
                                type="text"
                                className="input_fild ms-0 md:ms-3 text-[24px]"
                                placeholder="eg. India"
                                value={selectedCountry}
                                // onFocus={handleChange}
                                onClick={handleFocusdrop}
                                onChange={(e) => {
                                    setSelectedCountry(e.target.value);
                                    setSearchQuery(e.target.value);
                                }}
                                disabled
                            />
                            <p className='w-full ml-44 mt-2 text-red-700 text-sm'>{errCountryName}</p>

                            {/* Dropdown List */}
                            {isDropdownOpen && (
                                <ul className="dropdown-menu">
                                    {filteredCountries.length > 0 ? (
                                        filteredCountries.map((country, index) => (
                                            <li key={index} onClick={() => handleSelectCountry(country)}>
                                                <Image src={`https://flagcdn.com/w40/${country.code.toLowerCase()}.png`} alt={country.label} style={{ width: 20, marginRight: 10 }} width={1200} height={600} />
                                                {country.label} (+{country.value}) {/* Use 'value' for code */}
                                            </li>
                                        ))
                                    ) : (
                                        <li>No country found</li>
                                    )}
                                </ul>
                            )}
                        </div>
                        <div className='py-3 md:flex'>
                            <label htmlFor="" className='label_text mb-0'>Mobile No.</label>
                            <div>
                                <input
                                    type="text"
                                    className="input_fild cuntriw ms-0 md:ms-3 text-[24px] w-[70px]" // Adjust width as needed
                                    placeholder="+ Code"
                                    value={selectedCountryCode ? `+${selectedCountryCode}` : ""}
                                    readOnly // Country code is not editable
                                />

                                {/* Actual Mobile Number Input */}
                                <input
                                    type="number"
                                    name="mobile"
                                    // onChange={Mobile}
                                    className="input_fild numberw text-[24px] flex-1"
                                    placeholder="Enter Mobile Number"
                                    value={mobile}
                                    onChange={handleMobileChange}
                                />
                            </div>
                            {/* <input type="text" className='input_fild ms-0 md:ms-3 text-[24px]' placeholder='98984 12890' /> */}
                        </div>
                            <p className='w-full ml-44 mt-2 text-red-700 text-sm'>{errMobile}</p>
                        <div className='py-3'>
                            <label htmlFor="" className='label_text mb-0'>Birthdate</label>
                            {/* <input type="date" name="dateOfBirthday" onChange={DateOfBirthday} className='input_fild ms-0 md:ms-3 text-[24px]' placeholder='Fruxinfo' /> */}
                            <input type="date" 
                                name="dateOfBirthday" 
                                onChange={handleDOBChange} 
                                className='input_fild ms-0 md:ms-3 text-[24px]' 
                                placeholder='Enter your Date of Birth'
                                value={dateOfBirthday}
                                max={moment().subtract(18, "years").format("YYYY-MM-DD")}
                            />
                            {error && <p className="text-red-500 text-sm mt-1">{error}</p>}
                        </div>
                        <p className='w-full ml-44 mt-2 text-red-700 text-sm'>{errDateOfBirthday}</p>
                        <div className='py-3'>
                            <div className='flex flex-wrap gap-4 py-3'>
                            <label htmlFor="" className='label_text'>Gender :-</label>
                                <div>
                                    <label className="checkbox-container">
                                        <input type="radio" name="gender" value="Female" onChange={Gender} id="customCheck"/>
                                        <span className="checkbox-text">Female</span>
                                    </label>
                                </div>
                                <div>
                                    <label className="checkbox-container">
                                        <input type="radio" name="gender" value="Male" onChange={Gender} id="customCheck" />
                                        <span className="checkbox-text">Male</span>
                                    </label>
                                </div>
                            </div>
                            <p className='w-full ml-44 mt-2 text-red-700 text-sm'>{errGender}</p>
                        </div>
                        <div className='py-3'>
                            <label htmlFor="" className='label_text mb-0'>Qualification</label>
                            <input type="text" name="qualification" onChange={Qualification} className='input_fild w-full ms-0 mt-2 text-[24px]' placeholder='Enter Qualification' />
                        </div>
                        <p className='w-full ml-44 mt-2 text-red-700 text-sm'>{errQualification}</p>
                        {/* <div className='py-3'>
                            <label htmlFor="" className='label_text mb-0'>Experience</label>
                            <input type="number" name="experience" onChange={Experience} className='input_fild ms-0 md:ms-3 text-[24px]' placeholder='Years of Experience' />
                        </div>
                        <p className='w-full ml-44 mt-2 text-red-700 text-sm'>{errExperience}</p>
                        <div className='py-3'>
                            <label htmlFor="" className='label_text mb-0'>Current Salary</label>
                            <input type="text" name="currentSalary" onChange={CurrentSalary} className='input_fild ms-0 md:ms-3 text-[24px]' placeholder='Enter Your Current Salary' />
                        </div>
                        <p className='w-full ml-44 mt-2 text-red-700 text-sm'>{errCurrentSalary}</p> */}

                        <div className='py-3'>
                            <div className='flex flex-wrap gap-4 py-3'>
                                <label htmlFor="" className='label_text'>Do you want to join as an ? </label>
                                <div>
                                    <label className="checkbox-container">
                                        <input type="radio" name="joinAs" value="Intern" onChange={handleJoinAs} />
                                        <span className="checkbox-text">Intern / Fresher</span>
                                    </label>
                                </div>
                                <div>
                                    <label className="checkbox-container">
                                        <input type="radio" name="joinAs" value="Experienced" onChange={handleJoinAs} />
                                        <span className="checkbox-text">Experienced</span>
                                    </label>
                                </div>
                            </div>
                            <p className='w-full ml-44 mt-2 text-red-700 text-sm'>{errJoinAs}</p>
                        </div>

                        {joinAs === 'Experienced' && (
                            <>
                                <div className='pb-3'>
                                    <label className='label_text mb-0'>Experience (in years)</label>
                                    <input
                                        type="text"
                                        name="experience"
                                        value={experience}
                                        onChange={handleExperience}  // ✅ direct call without validation
                                        className='input_fild ms-0 md:ms-3 text-[24px]'
                                        placeholder='Enter Your Experience'
                                    />
                                    {/* <input
                                        type="text"
                                        name="experience"
                                        value={experience}
                                        onChange={(e) => {
                                            const value = e.target.value;
                                            if (/^\d{0,2}$/.test(value)) {
                                                handleExperience(e);
                                            }
                                        }}
                                        className='input_fild ms-0 md:ms-3 text-[24px]'
                                        placeholder='Enter Your Experience'
                                    /> */}
                                    <p className='w-full ml-44 mt-2 text-red-700 text-sm'>{errExperience}</p>
                                </div>

                                <div className='py-3'>
                                    <label className='label_text mb-0'>Current Salary</label>
                                    <input
                                        type="text"
                                        name="currentSalary"
                                        value={currentSalary}
                                        onChange={handleCurrentSalary}  // ✅ direct call without validation
                                        className='input_fild ms-0 md:ms-3 text-[24px]'
                                        placeholder='Enter Your Current Salary'
                                    />
                                    {/* <input
                                        type="text"
                                        name="currentSalary"
                                        value={currentSalary}
                                        onChange={(e) => {
                                            const value = e.target.value;
                                            if (/^\d{0,7}$/.test(value)) {
                                                handleCurrentSalary(e);
                                            }
                                        }}
                                        className='input_fild ms-0 md:ms-3 text-[24px]'
                                        placeholder='Enter Your Current Salary'
                                    /> */}
                                    <p className='w-full ml-44 mt-2 text-red-700 text-sm'>{errCurrentSalary}</p>
                                </div>
                            </>
                        )}

                        <div className='flex flex-wrap gap-4 py-3'>
                            <label htmlFor="" className='label_text mb-0'>Skills :-</label>
                            {skills.map((skillOption) => (
                                <div key={skillOption}>
                                    <label className="checkbox-container">
                                        <input type="checkbox"  value={skillOption} onChange={handleSkillChange} id="customCheck" />
                                        <span className="checkbox-text">{skillOption}</span>
                                    </label>
                                </div>
                            ))}

                        </div>
                        <p className='w-full ml-44 mt-2 text-red-700 text-sm'>{errSkill}</p>
                        <div className='py-3'>
                            <div className='flex flex-wrap gap-4 py-3'>
                            <label htmlFor="" className='label_text'>Are you from Ahmedabad ? :-</label>
                                <div>
                                    <label className="checkbox-container">
                                        <input type="radio" name="atAhmedabad" value="Yes" onChange={AtAhmedabad} id="customCheck" />
                                        <span className="checkbox-text">Yes</span>
                                    </label>
                                </div>
                                <div>
                                    <label className="checkbox-container">
                                        <input type="radio" name="atAhmedabad" value="No" onChange={AtAhmedabad} id="customCheck" />
                                        <span className="checkbox-text">No</span>
                                    </label>
                                </div>
                            </div>
                            <p className='w-full ml-44 mt-2 text-red-700 text-sm'>{errAtAhmedabad}</p>
                        </div>
                        {atAhmedabad === 'No' && (
                            <div className='py-3'>
                                <label className='label_text mb-0'>City</label>
                                <input
                                    type="text"
                                    name="city"
                                    value={city}
                                    // onChange={City}
                                    onChange={(e) => {
                                        const value = e.target.value;
                                        if (/^[a-zA-Z\s]*$/.test(value)) {
                                        City(e); // call your existing function only if valid
                                        }
                                    }}
                                    className='input_fild ms-0 md:ms-3 text-[24px]'
                                    placeholder='Enter Your City'
                                />
                                <p className='w-full ml-44 mt-2 text-red-700 text-sm'>{errCity}</p>
                            </div>
                        )}
                        <div className='text-[18px] md:text-[20px] font-bold text-[#000] py-4'>{`Mandatory Questions for a ${questionsRole}`}</div>
                        {/* <div className='py-3'>
                            <label htmlFor="" className='Q_label_text'>1. What are the key features of Laravel?</label>
                            <input type="text" className='input_fild Q_input_fild w-full mt-2 ms-0  text-[24px]' placeholder='Give your answer' />
                        </div>
                        <div className='py-3'>
                            <label htmlFor="" className='Q_label_text'>2. Explain the MVC architecture in Laravel.</label>
                            <input type="text" className='input_fild Q_input_fild w-full mt-2 ms-0  text-[24px]' placeholder='Give your answer' />
                        </div>
                        <div className='py-3'>
                            <label htmlFor="" className='Q_label_text'>3. How does Eloquent ORM work in Laravel?</label>
                            <input type="text" className='input_fild Q_input_fild w-full mt-2 ms-0  text-[24px]' placeholder='Give your answer' />
                        </div>
                        <div className='py-3'>
                            <label htmlFor="" className='Q_label_text'>4. What is middleware in Laravel, and how does it work?</label>
                            <input type="text" className='input_fild Q_input_fild w-full mt-2 ms-0  text-[24px]' placeholder='Give your answer' />
                        </div>
                        <div className='py-3'>
                            <label htmlFor="" className='Q_label_text'>5. How do you handle authentication and authorization in Laravel?</label>
                            <input type="text" className='input_fild Q_input_fild w-full mt-2 ms-0  text-[24px]' placeholder='Give your answer' />
                        </div> */}
                        <div>
                            {questions.length > 0 ? (
                                questions.map((item, index) => (
                                    <div key={item.id} className="py-3">
                                    <label className="Q_label_text">
                                        {index + 1}. {item.question}
                                    </label>
                                    <input
                                        type="text"
                                        className="input_fild Q_input_fild w-full mt-2 ms-0 text-[24px]"
                                        placeholder="Give your answer"
                                        value={answers[item.id] || ""}
                                        onChange={(e) => handleAnswerChange(String(item.id), e.target.value)}
                                    />
                                    </div>
                                ))
                                ) : (
                                <p></p>
                            )}
                        </div>

                        <div className='flex mt-8'>
                            <a href="">
                                <button type="submit"  className='Custome_Orange_button submit_btn' disabled={loading}>{loading ? "Sending..." : "Submit"}</button>
                            </a>
                            {/* {response && <p>{response}</p>} */}
                        </div>
                        
                    </form>
                </div>
            </div>
            <div className='sm:col-span-5'>
                <div>
                    <Image src="/images/greate_idea_img.webp" className='w-full mt-10 md:mt-0' width={1200} height={600} alt="Have a great project idea? Discuss with Fruxinfo" />
                    <div className='text-center md:text-end mt-20'>
                        <h4 className='text-[#E77025] text-[22px] py-2'><a href="mailto:hr@fruxinfo.com">hr@fruxinfo.com</a></h4>
                        <h4 className='text-[18px] py-2'><span className='text-[#999999] me-4'>IND:</span><a href="tel:+916352410459">+91 63524 10459</a></h4>
                        <h4 className='text-[18px] py-2'><span className='text-[#999999] me-4'></span><a href="tel:+919898412890">+91 98984 12890</a></h4>
                    </div>
                </div>
            </div>
        </div>
      </div>
    </div>
  );
}

export default ContactFrom