import { useForm } from '@inertiajs/react';
import { Head } from '@inertiajs/react';
import { TextInput } from '@/Components/Forms/TextInput';

export default function CompleteProfile() {
  const form = useForm({ mobile: '', national_code: '', father_mobile: '', mother_mobile: '', home_phone: '', address: '' });

  return (
    <main className="auth-page">
      <Head title="تکمیل اطلاعات">
        <meta name="description" content="تکمیل اطلاعات ضروری کاربر در اولین ورود به دانشیار من." />
      </Head>
      <section className="auth-card wide">
        <h1>تکمیل اطلاعات</h1>
        <p>برای ورود به پنل، اطلاعات ضروری را تکمیل کنید.</p>
        <form onSubmit={(event) => { event.preventDefault(); form.post('/complete-profile'); }}>
          <TextInput label="موبایل" value={form.data.mobile} onChange={(e) => form.setData('mobile', e.target.value)} error={form.errors.mobile} />
          <TextInput label="کد ملی" value={form.data.national_code} onChange={(e) => form.setData('national_code', e.target.value)} />
          <TextInput label="موبایل پدر" value={form.data.father_mobile} onChange={(e) => form.setData('father_mobile', e.target.value)} />
          <TextInput label="موبایل مادر" value={form.data.mother_mobile} onChange={(e) => form.setData('mother_mobile', e.target.value)} />
          <TextInput label="شماره خانه" value={form.data.home_phone} onChange={(e) => form.setData('home_phone', e.target.value)} />
          <TextInput label="آدرس" value={form.data.address} onChange={(e) => form.setData('address', e.target.value)} />
          <button className="btn btn-primary full" disabled={form.processing}>ذخیره و ورود</button>
        </form>
      </section>
    </main>
  );
}
