import { useForm } from '@inertiajs/react';
import { AppLayout } from '@/Components/Layout/AppLayout';

type Props = { enabledGrades: number[] };

export default function GlobalEteraz({ enabledGrades }: Props) {
  const form = useForm({ enabled_grades: enabledGrades });
  function toggle(n: number) {
    form.setData('enabled_grades', form.data.enabled_grades.includes(n) ? form.data.enabled_grades.filter((x) => x !== n) : [...form.data.enabled_grades, n]);
  }
  return (
    <AppLayout title="سیاست سراسری اعتراض">
      <div className="page-stack">
        <section className="section-header"><div><h2>تنظیم سیاست eteraz سراسری</h2><p>مدارس می‌توانند این پیش‌فرض را Override کنند.</p></div></section>
        <form className="panel-card" onSubmit={(e) => { e.preventDefault(); form.put('/super-admin/global-eteraz'); }}>
          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>{Array.from({ length: 12 }, (_, i) => i + 1).map((n) => (
            <label key={n} className="badge" style={{ cursor: 'pointer' }}><input type="checkbox" checked={form.data.enabled_grades.includes(n)} onChange={() => toggle(n)} /> پایه {n}</label>
          ))}</div>
          <div className="action-row" style={{ marginTop: 12 }}><button className="btn btn-primary" disabled={form.processing} type="submit">ذخیره</button></div>
        </form>
      </div>
    </AppLayout>
  );
}