import React, { useState } from 'react'; import { Head, Link, useForm } from '@inertiajs/react'; import EmployerLayout from '@/Layouts/EmployerLayout'; import { Plus, ArrowLeft, Briefcase, MapPin, DollarSign, LayoutGrid, Users, FileText, Sparkles, ShieldCheck, Save, X } from 'lucide-react'; import { toast } from 'sonner'; export default function Edit({ job, professions, availableSkills }) { const categoryList = professions || [ 'Housekeeper', 'Nanny', 'Maid', 'Electrician', 'Mason', 'Plumber', 'Cleaner', 'Driver', 'Caregiver', 'Cook' ]; const skillList = availableSkills || []; const { data, setData, post, processing, errors } = useForm({ title: job.title || '', main_profession: job.main_profession || '', skills: job.skills ? job.skills.map(s => s.name) : [], workers_needed: job.workers_needed || 1, location: job.location || '', salary: job.salary ? Math.round(job.salary) : '', job_type: job.job_type || 'Full Time', start_date: job.start_date || new Date().toISOString().split('T')[0], description: job.description || '', status: job.status || 'active' }); const [clientErrors, setClientErrors] = useState({}); const handleSubmit = (e) => { e.preventDefault(); // Client-side validation const newErrors = {}; if (!data.title.trim()) { newErrors.title = 'Job title is required.'; } if (!data.main_profession) { newErrors.main_profession = 'Main profession is required.'; } if (!data.skills || data.skills.length === 0) { newErrors.skills = 'At least one skill is required.'; } if (!data.workers_needed || data.workers_needed < 1) { newErrors.workers_needed = 'Workers needed must be at least 1.'; } if (!data.location.trim()) { newErrors.location = 'Job location is required.'; } if (!data.salary || data.salary < 0) { newErrors.salary = 'Monthly salary must be a positive number.'; } if (!data.start_date) { newErrors.start_date = 'Start date is required.'; } if (!data.description.trim()) { newErrors.description = 'Job description is required.'; } if (!data.status) { newErrors.status = 'Status is required.'; } if (Object.keys(newErrors).length > 0) { setClientErrors(newErrors); toast.error('Validation failed. Please correct the fields in red.'); return; } setClientErrors({}); post(`/employer/jobs/${job.id}/edit`, { onSuccess: () => { toast.success('Job updated successfully.'); }, onError: () => { toast.error('Failed to update job. Please check the inputs.'); } }); }; return (
Back to My Jobs

Edit Job Posting

Update details for "{job.title}"

{/* Section 1: Basic Info */}

Basic Information

setData('title', e.target.value)} />
{(clientErrors.title || errors.title) && (

{clientErrors.title || errors.title}

)}
{(clientErrors.main_profession || errors.main_profession) && (

{clientErrors.main_profession || errors.main_profession}

)}
setData('workers_needed', e.target.value)} />
{(clientErrors.workers_needed || errors.workers_needed) && (

{clientErrors.workers_needed || errors.workers_needed}

)}
setData('location', e.target.value)} />
{(clientErrors.location || errors.location) && (

{clientErrors.location || errors.location}

)}
setData('salary', e.target.value)} />
{(clientErrors.salary || errors.salary) && (

{clientErrors.salary || errors.salary}

)}
{['Full Time', 'Part Time'].map(type => ( ))}
{[ { key: 'active', label: 'Active' }, { key: 'closed', label: 'Closed' }, { key: 'draft', label: 'Draft' } ].map(s => ( ))}
{/* Section 2: Detailed Requirements */}

Detailed Requirements

{/* Selected skills pills */} {data.skills.length > 0 && (
{data.skills.map(skill => ( {skill} ))}
)}
{(clientErrors.skills || errors.skills) && (

{clientErrors.skills || errors.skills}

)}