Logo update

components/common/Careerform.jsx

@@ -12,6 +12,8 @@ export default function Careerform() {
     resume: null
   });
   const [uploadStatus, setUploadStatus] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [submitStatus, setSubmitStatus] = useState(null);
 
   const handleInputChange = (e) => {
     const { id, value } = e.target;
@@ -39,15 +41,25 @@ export default function Careerform() {
         return;
       }
 
-      setFormData(prev => ({
-        ...prev,
-        resume: file
-      }));
-      setUploadStatus(`${file.name} uploaded successfully`);
+      // 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 = (e) => {
+  const handleSubmit = async (e) => {
     e.preventDefault();
     
     // Basic form validation
@@ -61,40 +73,47 @@ export default function Careerform() {
       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);
+    setIsSubmitting(true);
+    setSubmitStatus(null);
 
-    // Replace with your actual API endpoint
-    // fetch('/api/submit-application', {
-    //   method: 'POST',
-    //   body: submitData
-    // }).then(response => {
-    //   // Handle response
-    // });
+    try {
+      const response = await fetch('/api/contact', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          type: 'career',
+          ...formData,
+        }),
+      });
 
-    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 = '';
+      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 (
@@ -120,6 +139,20 @@ export default function Careerform() {
               </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">
@@ -200,22 +233,22 @@ export default function Careerform() {
                   </small>
                 </div>
 
-                <button type="submit" className="tf-btn btn-primary2 mt_22">
-                  <span>Submit Application</span>
+                <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 className="shape position-absolute">
-          <Image
-            alt="item"
-            src="/images/item/shape-5.png"
-            width={1105}
-            height={720}
-          />
-        </div> */}
       </div>
     </div>
   );