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 [isSubmitting, setIsSubmitting] = useState(false);
  const [submitStatus, setSubmitStatus] = useState(null);

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

      // Convert file to base64
      const reader = new FileReader();
      reader.onload = () => {
        const base64 = reader.result.split(',')[1]; // Remove data:mime;base64, prefix
        setFormData(prev => ({
          ...prev,
          resume: {
            name: file.name,
            data: base64,
            type: file.type
          }
        }));
        setUploadStatus(`${file.name} uploaded successfully`);
      };
      reader.readAsDataURL(file);
    }
  };

  const handleSubmit = async (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;
    }

    setIsSubmitting(true);
    setSubmitStatus(null);

    try {
      const response = await fetch('/api/contact', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          type: 'career',
          ...formData,
        }),
      });

      if (response.ok) {
        setSubmitStatus('success');
        
        // Reset form
        setFormData({
          fullName: '',
          email: '',
          phone: '',
          roles: '',
          resume: null
        });
        setUploadStatus('');
        
        // Reset file input
        const fileInput = document.getElementById('resume-upload');
        if (fileInput) fileInput.value = '';
      } else {
        setSubmitStatus('error');
      }
    } catch (error) {
      console.error('Error:', error);
      setSubmitStatus('error');
    } finally {
      setIsSubmitting(false);
      setTimeout(() => setSubmitStatus(null), 5000);
    }
  };

  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">
              {submitStatus && (
                <div className={`alert mb-3 ${submitStatus === 'success' ? 'alert-success' : 'alert-danger'}`} style={{
                  padding: '10px 15px',
                  borderRadius: '5px',
                  marginBottom: '20px',
                  backgroundColor: submitStatus === 'success' ? '#d4edda' : '#f8d7da',
                  color: submitStatus === 'success' ? '#155724' : '#721c24',
                  border: `1px solid ${submitStatus === 'success' ? '#c3e6cb' : '#f5c6cb'}`
                }}>
                  {submitStatus === 'success' 
                    ? 'Application submitted successfully! We will review your application and get back to you soon.'
                    : 'Failed to submit application. Please try again.'}
                </div>
              )}
              <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"
                  disabled={isSubmitting}
                  style={{
                    opacity: isSubmitting ? 0.7 : 1,
                    cursor: isSubmitting ? 'not-allowed' : 'pointer'
                  }}
                >
                  <span>{isSubmitting ? 'Submitting...' : 'Submit Application'}</span>
                  <span className="bg-effect" />
                </button>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}