keystone/components/common/Careerform.jsx

"use client";
import React, { useState } from "react";
import Link from "next/link";
import Image from "next/image";

export default function Careerform() {
  const [formData, setFormData] = useState({
    fullName: '',
    email: '',
    phone: '',
    roles: '',
    resume: null
  });
  const [uploadStatus, setUploadStatus] = useState('');

  const handleInputChange = (e) => {
    const { id, value } = e.target;
    setFormData(prev => ({
      ...prev,
      [id]: value
    }));
  };

  const handleFileUpload = (e) => {
    const file = e.target.files[0];
    if (file) {
      // Validate file type
      const allowedTypes = ['.pdf', '.doc', '.docx'];
      const fileExtension = '.' + file.name.split('.').pop().toLowerCase();
      
      if (!allowedTypes.includes(fileExtension)) {
        setUploadStatus('Please upload a PDF, DOC, or DOCX file');
        return;
      }

      // Validate file size (5MB limit)
      if (file.size > 5 * 1024 * 1024) {
        setUploadStatus('File size must be less than 5MB');
        return;
      }

      setFormData(prev => ({
        ...prev,
        resume: file
      }));
      setUploadStatus(`${file.name} uploaded successfully`);
    }
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    
    // Basic form validation
    if (!formData.fullName || !formData.email || !formData.phone || !formData.roles) {
      alert('Please fill in all required fields');
      return;
    }

    if (!formData.resume) {
      alert('Please upload your resume');
      return;
    }

    // Here you would typically send the form data to your backend
    console.log('Form submitted:', formData);
    
    // Example of how you might handle the form submission
    const submitData = new FormData();
    submitData.append('fullName', formData.fullName);
    submitData.append('email', formData.email);
    submitData.append('phone', formData.phone);
    submitData.append('roles', formData.roles);
    submitData.append('resume', formData.resume);

    // Replace with your actual API endpoint
    // fetch('/api/submit-application', {
    //   method: 'POST',
    //   body: submitData
    // }).then(response => {
    //   // Handle response
    // });

    alert('Application submitted successfully!');
    
    // Reset form
    setFormData({
      fullName: '',
      email: '',
      phone: '',
      roles: '',
      resume: null
    });
    setUploadStatus('');
    
    // Reset file input
    const fileInput = document.getElementById('resume-upload');
    if (fileInput) fileInput.value = '';
  };

  return (
    <div className="page-title style-default -mb_11">
      <div className="section-contact style-default position-relative py-0">
        <div className="tf-container">
          <div className="row">
            <div className="col-lg-6">
              <div className="left">
                <div className="heading">
                  <h2 className="mb_21 text_primary">
                    Ready to join our team? Let's build something amazing together!
                  </h2>
                </div>
                <div className="bot">
                  <div className="content mb-0 ">
                    <h6 className="text_primary">+91 90954 50005</h6>
                    <p className="text-body-2 text_primary">
                      Call us for career inquiries
                    </p>
                  </div>
                </div>
              </div>
            </div>
            <div className="col-lg-6">
              <form className="form-contact" onSubmit={handleSubmit}>
                <fieldset>
                  <label className="mb_15" htmlFor="fullName">
                    Full Name*
                  </label>
                  <input
                    type="text"
                    placeholder="Full Name"
                    id="fullName"
                    value={formData.fullName}
                    onChange={handleInputChange}
                    required
                  />
                </fieldset>
                <div className="grid-2 gap_24">
                  <fieldset>
                    <label className="mb_15" htmlFor="email">
                      Email Address*
                    </label>
                    <input
                      type="email"
                      placeholder="Your email address*"
                      id="email"
                      value={formData.email}
                      onChange={handleInputChange}
                      required
                    />
                  </fieldset>
                  <fieldset>
                    <label className="mb_15" htmlFor="phone">
                      Phone Number*
                    </label>
                    <input
                      type="text"
                      placeholder="Your phone number"
                      id="phone"
                      value={formData.phone}
                      onChange={handleInputChange}
                      required
                    />
                  </fieldset>
                </div>
                <fieldset className="">
                  <label className="mb_15" htmlFor="roles">
                    Roles of Interest*
                  </label>
                  <input
                    type="text"
                    placeholder="e.g., Frontend Developer, UI/UX Designer, Project Manager"
                    id="roles"
                    value={formData.roles}
                    onChange={handleInputChange}
                    required
                  />
                </fieldset>
                
                {/* File Upload Section */}
                <div className="file-upload-section mt_20">
                  <label className="link attachment" htmlFor="resume-upload" style={{ cursor: 'pointer' }}>
                    <i className="icon-paperclip-solid" />
                    {formData.resume ? `Selected: ${formData.resume.name}` : 'Upload CV*'}
                  </label>
                  <input
                    type="file"
                    id="resume-upload"
                    accept=".pdf,.doc,.docx"
                    onChange={handleFileUpload}
                    style={{ display: 'none' }}
                    required
                  />
                  {uploadStatus && (
                    <p className={`upload-status mt_10 ${uploadStatus.includes('successfully') ? 'text-success' : 'text-danger'}`}>
                      {uploadStatus}
                    </p>
                  )}
                  <small className="text-muted d-block mt_5">
                    Accepted formats: PDF, DOC, DOCX (Max size: 5MB)
                  </small>
                </div>

                <button type="submit" className="tf-btn btn-primary2 mt_22">
                  <span>Submit Application</span>
                  <span className="bg-effect" />
                </button>
              </form>
            </div>
          </div>
        </div>
        {/* <div className="shape position-absolute">
          <Image
            alt="item"
            src="/images/item/shape-5.png"
            width={1105}
            height={720}
          />
        </div> */}
      </div>
    </div>
  );
}