import React, { useState } from 'react'; import { Head, Link, router } from '@inertiajs/react'; import EmployerLayout from '@/Layouts/EmployerLayout'; import { ArrowLeft, Calendar, MapPin, DollarSign, Send, CheckCircle2, ShieldCheck, Clock } from 'lucide-react'; export default function Confirm({ worker }) { const [startDate, setStartDate] = useState(''); const [location, setLocation] = useState(''); const [offeredSalary, setOfferedSalary] = useState(worker.salary); const handleSubmit = (e) => { e.preventDefault(); // Perform a real POST submission to create the Job Offer in DB router.post(`/employer/workers/${worker.id}/hire`, { work_date: startDate, location: location, salary: offeredSalary, notes: 'Hiring offer dispatched from employer panel.' }); }; return (
Back to Profile
{/* Worker Summary Card */}
{worker.name.charAt(0)}

{worker.name}

Expected Salary {worker.salary} AED
Nationality {worker.nationality}
Documents Verified
{/* Offer Form */}

Step 1: Customize Your Offer

Enter the employment details below

{/* Start Date */}
setStartDate(e.target.value)} className="w-full px-4 py-3 bg-slate-50 border border-slate-100 rounded-xl text-sm font-bold text-slate-900 focus:ring-4 focus:ring-blue-500/10 focus:border-[#185FA5] outline-none transition-all" />
{/* Location */}
setLocation(e.target.value)} className="w-full px-4 py-3 bg-slate-50 border border-slate-100 rounded-xl text-sm font-bold text-slate-900 focus:ring-4 focus:ring-blue-500/10 focus:border-[#185FA5] outline-none transition-all" />
{/* Salary */}
setOfferedSalary(e.target.value)} className="w-full pl-10 pr-4 py-3 bg-slate-50 border border-slate-100 rounded-xl text-sm font-bold text-slate-900 focus:ring-4 focus:ring-blue-500/10 focus:border-[#185FA5] outline-none transition-all" />
$

Once you send this offer, the worker will be notified immediately. You can track the status in your Hired Workers page.

); }