import { useForm } from "react-hook-form";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Select, SelectItem } from "@/components/ui/select";
import { Textarea } from "@/components/ui/textarea";
 
export default function RTVForm() {
  const { register, handleSubmit, watch, formState: { errors, isValid } } = useForm({ mode: "onChange" });
 
  const onSubmit = (data) => {
    console.log("Form Submitted", data);
  };
 
  return (
    <div className="max-w-2xl mx-auto p-6">
      <Card>
        <CardContent className="p-6 space-y-4">
          <h2 className="text-xl font-bold">สร้างเอกสาร RTV</h2>
 
          <form onSubmit={handleSubmit(onSubmit)}>
            <label>ซัพพลายเออร์</label>
            <Select {...register("supplier", { required: true })}>
              <SelectItem value="ABC Ltd">ABC Ltd</SelectItem>
              <SelectItem value="XYZ Corp">XYZ Corp</SelectItem>
            </Select>
            {errors.supplier && <p className="text-red-500">โปรดเลือกซัพพลายเออร์</p>}
 
            <label>หมายเลข PO</label>
            <Input {...register("poNumber", { required: true })} placeholder="ระบุหมายเลข PO" />
            {errors.poNumber && <p className="text-red-500">โปรดระบุหมายเลข PO</p>}
 
            <label>สินค้า</label>
            <Input {...register("product", { required: true })} placeholder="ชื่อสินค้า / รหัสสินค้า" />
            {errors.product && <p className="text-red-500">โปรดระบุสินค้า</p>}
 
            <label>จำนวนที่ต้องการคืน</label>
            <Input type="number" {...register("quantity", { required: true })} />
            {errors.quantity && <p className="text-red-500">โปรดระบุจำนวนที่ต้องการคืน</p>}
 
            <label>เหตุผลในการคืนสินค้า</label>
            <Select {...register("reason", { required: true })}>
              <SelectItem value="สินค้าชำรุด">สินค้าชำรุด</SelectItem>
              <SelectItem value="ไม่ตรงสเปค">ไม่ตรงสเปค</SelectItem>
            </Select>
            {errors.reason && <p className="text-red-500">โปรดเลือกเหตุผล</p>}
 
            <label>ที่อยู่ในการรับคืน</label>
            <Input {...register("returnLocation", { required: true })} placeholder="ที่อยู่รับคืน" />
            {errors.returnLocation && <p className="text-red-500">โปรดระบุที่อยู่รับคืน</p>}
 
            <label>วันที่ในการรับคืน</label>
            <Input type="date" {...register("returnDate", { required: true })} />
            {errors.returnDate && <p className="text-red-500">โปรดระบุวันที่รับคืน</p>}
 
            <label>ชื่อผู้ติดต่อ</label>
            <Input {...register("contactName", { required: true })} placeholder="ชื่อผู้ติดต่อ" />
            {errors.contactName && <p className="text-red-500">โปรดระบุชื่อผู้ติดต่อ</p>}
 
            <label>เบอร์โทรศัพท์</label>
            <Input {...register("contactPhone", { required: true })} placeholder="เบอร์โทรศัพท์" />
            {errors.contactPhone && <p className="text-red-500">โปรดระบุเบอร์โทรศัพท์</p>}
 
            <label>หมายเหตุเพิ่มเติม</label>
            <Textarea {...register("remarks")} placeholder="ระบุข้อมูลเพิ่มเติม (ถ้ามี)" />
 
            <Button className="w-full" type="submit" disabled={!isValid}>บันทึกเอกสาร RTV</Button>
          </form>
        </CardContent>
      </Card>
    </div>
  );
}
 

aW1wb3J0IHsgdXNlRm9ybSB9IGZyb20gInJlYWN0LWhvb2stZm9ybSI7CmltcG9ydCB7IENhcmQsIENhcmRDb250ZW50IH0gZnJvbSAiQC9jb21wb25lbnRzL3VpL2NhcmQiOwppbXBvcnQgeyBCdXR0b24gfSBmcm9tICJAL2NvbXBvbmVudHMvdWkvYnV0dG9uIjsKaW1wb3J0IHsgSW5wdXQgfSBmcm9tICJAL2NvbXBvbmVudHMvdWkvaW5wdXQiOwppbXBvcnQgeyBTZWxlY3QsIFNlbGVjdEl0ZW0gfSBmcm9tICJAL2NvbXBvbmVudHMvdWkvc2VsZWN0IjsKaW1wb3J0IHsgVGV4dGFyZWEgfSBmcm9tICJAL2NvbXBvbmVudHMvdWkvdGV4dGFyZWEiOwoKZXhwb3J0IGRlZmF1bHQgZnVuY3Rpb24gUlRWRm9ybSgpIHsKICBjb25zdCB7IHJlZ2lzdGVyLCBoYW5kbGVTdWJtaXQsIHdhdGNoLCBmb3JtU3RhdGU6IHsgZXJyb3JzLCBpc1ZhbGlkIH0gfSA9IHVzZUZvcm0oeyBtb2RlOiAib25DaGFuZ2UiIH0pOwoKICBjb25zdCBvblN1Ym1pdCA9IChkYXRhKSA9PiB7CiAgICBjb25zb2xlLmxvZygiRm9ybSBTdWJtaXR0ZWQiLCBkYXRhKTsKICB9OwoKICByZXR1cm4gKAogICAgPGRpdiBjbGFzc05hbWU9Im1heC13LTJ4bCBteC1hdXRvIHAtNiI+CiAgICAgIDxDYXJkPgogICAgICAgIDxDYXJkQ29udGVudCBjbGFzc05hbWU9InAtNiBzcGFjZS15LTQiPgogICAgICAgICAgPGgyIGNsYXNzTmFtZT0idGV4dC14bCBmb250LWJvbGQiPuC4quC4o+C5ieC4suC4h+C5gOC4reC4geC4quC4suC4oyBSVFY8L2gyPgogICAgICAgICAgCiAgICAgICAgICA8Zm9ybSBvblN1Ym1pdD17aGFuZGxlU3VibWl0KG9uU3VibWl0KX0+CiAgICAgICAgICAgIDxsYWJlbD7guIvguLHguJ7guJ7guKXguLLguKLguYDguK3guK3guKPguYw8L2xhYmVsPgogICAgICAgICAgICA8U2VsZWN0IHsuLi5yZWdpc3Rlcigic3VwcGxpZXIiLCB7IHJlcXVpcmVkOiB0cnVlIH0pfT4KICAgICAgICAgICAgICA8U2VsZWN0SXRlbSB2YWx1ZT0iQUJDIEx0ZCI+QUJDIEx0ZDwvU2VsZWN0SXRlbT4KICAgICAgICAgICAgICA8U2VsZWN0SXRlbSB2YWx1ZT0iWFlaIENvcnAiPlhZWiBDb3JwPC9TZWxlY3RJdGVtPgogICAgICAgICAgICA8L1NlbGVjdD4KICAgICAgICAgICAge2Vycm9ycy5zdXBwbGllciAmJiA8cCBjbGFzc05hbWU9InRleHQtcmVkLTUwMCI+4LmC4Lib4Lij4LiU4LmA4Lil4Li34Lit4LiB4LiL4Lix4Lie4Lie4Lil4Liy4Lii4LmA4Lit4Lit4Lij4LmMPC9wPn0KCiAgICAgICAgICAgIDxsYWJlbD7guKvguKHguLLguKLguYDguKXguIIgUE88L2xhYmVsPgogICAgICAgICAgICA8SW5wdXQgey4uLnJlZ2lzdGVyKCJwb051bWJlciIsIHsgcmVxdWlyZWQ6IHRydWUgfSl9IHBsYWNlaG9sZGVyPSLguKPguLDguJrguLjguKvguKHguLLguKLguYDguKXguIIgUE8iIC8+CiAgICAgICAgICAgIHtlcnJvcnMucG9OdW1iZXIgJiYgPHAgY2xhc3NOYW1lPSJ0ZXh0LXJlZC01MDAiPuC5guC4m+C4o+C4lOC4o+C4sOC4muC4uOC4q+C4oeC4suC4ouC5gOC4peC4giBQTzwvcD59CgogICAgICAgICAgICA8bGFiZWw+4Liq4Li04LiZ4LiE4LmJ4LiyPC9sYWJlbD4KICAgICAgICAgICAgPElucHV0IHsuLi5yZWdpc3RlcigicHJvZHVjdCIsIHsgcmVxdWlyZWQ6IHRydWUgfSl9IHBsYWNlaG9sZGVyPSLguIrguLfguYjguK3guKrguLTguJnguITguYnguLIgLyDguKPguKvguLHguKrguKrguLTguJnguITguYnguLIiIC8+CiAgICAgICAgICAgIHtlcnJvcnMucHJvZHVjdCAmJiA8cCBjbGFzc05hbWU9InRleHQtcmVkLTUwMCI+4LmC4Lib4Lij4LiU4Lij4Liw4Lia4Li44Liq4Li04LiZ4LiE4LmJ4LiyPC9wPn0KCiAgICAgICAgICAgIDxsYWJlbD7guIjguLPguJnguKfguJnguJfguLXguYjguJXguYnguK3guIfguIHguLLguKPguITguLfguJk8L2xhYmVsPgogICAgICAgICAgICA8SW5wdXQgdHlwZT0ibnVtYmVyIiB7Li4ucmVnaXN0ZXIoInF1YW50aXR5IiwgeyByZXF1aXJlZDogdHJ1ZSB9KX0gLz4KICAgICAgICAgICAge2Vycm9ycy5xdWFudGl0eSAmJiA8cCBjbGFzc05hbWU9InRleHQtcmVkLTUwMCI+4LmC4Lib4Lij4LiU4Lij4Liw4Lia4Li44LiI4Liz4LiZ4Lin4LiZ4LiX4Li14LmI4LiV4LmJ4Lit4LiH4LiB4Liy4Lij4LiE4Li34LiZPC9wPn0KCiAgICAgICAgICAgIDxsYWJlbD7guYDguKvguJXguLjguJzguKXguYPguJnguIHguLLguKPguITguLfguJnguKrguLTguJnguITguYnguLI8L2xhYmVsPgogICAgICAgICAgICA8U2VsZWN0IHsuLi5yZWdpc3RlcigicmVhc29uIiwgeyByZXF1aXJlZDogdHJ1ZSB9KX0+CiAgICAgICAgICAgICAgPFNlbGVjdEl0ZW0gdmFsdWU9IuC4quC4tOC4meC4hOC5ieC4suC4iuC4s+C4o+C4uOC4lCI+4Liq4Li04LiZ4LiE4LmJ4Liy4LiK4Liz4Lij4Li44LiUPC9TZWxlY3RJdGVtPgogICAgICAgICAgICAgIDxTZWxlY3RJdGVtIHZhbHVlPSLguYTguKHguYjguJXguKPguIfguKrguYDguJvguIQiPuC5hOC4oeC5iOC4leC4o+C4h+C4quC5gOC4m+C4hDwvU2VsZWN0SXRlbT4KICAgICAgICAgICAgPC9TZWxlY3Q+CiAgICAgICAgICAgIHtlcnJvcnMucmVhc29uICYmIDxwIGNsYXNzTmFtZT0idGV4dC1yZWQtNTAwIj7guYLguJvguKPguJTguYDguKXguLfguK3guIHguYDguKvguJXguLjguJzguKU8L3A+fQoKICAgICAgICAgICAgPGxhYmVsPuC4l+C4teC5iOC4reC4ouC4ueC5iOC5g+C4meC4geC4suC4o+C4o+C4seC4muC4hOC4t+C4mTwvbGFiZWw+CiAgICAgICAgICAgIDxJbnB1dCB7Li4ucmVnaXN0ZXIoInJldHVybkxvY2F0aW9uIiwgeyByZXF1aXJlZDogdHJ1ZSB9KX0gcGxhY2Vob2xkZXI9IuC4l+C4teC5iOC4reC4ouC4ueC5iOC4o+C4seC4muC4hOC4t+C4mSIgLz4KICAgICAgICAgICAge2Vycm9ycy5yZXR1cm5Mb2NhdGlvbiAmJiA8cCBjbGFzc05hbWU9InRleHQtcmVkLTUwMCI+4LmC4Lib4Lij4LiU4Lij4Liw4Lia4Li44LiX4Li14LmI4Lit4Lii4Li54LmI4Lij4Lix4Lia4LiE4Li34LiZPC9wPn0KCiAgICAgICAgICAgIDxsYWJlbD7guKfguLHguJnguJfguLXguYjguYPguJnguIHguLLguKPguKPguLHguJrguITguLfguJk8L2xhYmVsPgogICAgICAgICAgICA8SW5wdXQgdHlwZT0iZGF0ZSIgey4uLnJlZ2lzdGVyKCJyZXR1cm5EYXRlIiwgeyByZXF1aXJlZDogdHJ1ZSB9KX0gLz4KICAgICAgICAgICAge2Vycm9ycy5yZXR1cm5EYXRlICYmIDxwIGNsYXNzTmFtZT0idGV4dC1yZWQtNTAwIj7guYLguJvguKPguJTguKPguLDguJrguLjguKfguLHguJnguJfguLXguYjguKPguLHguJrguITguLfguJk8L3A+fQoKICAgICAgICAgICAgPGxhYmVsPuC4iuC4t+C5iOC4reC4nOC4ueC5ieC4leC4tOC4lOC4leC5iOC4rTwvbGFiZWw+CiAgICAgICAgICAgIDxJbnB1dCB7Li4ucmVnaXN0ZXIoImNvbnRhY3ROYW1lIiwgeyByZXF1aXJlZDogdHJ1ZSB9KX0gcGxhY2Vob2xkZXI9IuC4iuC4t+C5iOC4reC4nOC4ueC5ieC4leC4tOC4lOC4leC5iOC4rSIgLz4KICAgICAgICAgICAge2Vycm9ycy5jb250YWN0TmFtZSAmJiA8cCBjbGFzc05hbWU9InRleHQtcmVkLTUwMCI+4LmC4Lib4Lij4LiU4Lij4Liw4Lia4Li44LiK4Li34LmI4Lit4Lic4Li54LmJ4LiV4Li04LiU4LiV4LmI4LitPC9wPn0KCiAgICAgICAgICAgIDxsYWJlbD7guYDguJrguK3guKPguYzguYLguJfguKPguKjguLHguJ7guJfguYw8L2xhYmVsPgogICAgICAgICAgICA8SW5wdXQgey4uLnJlZ2lzdGVyKCJjb250YWN0UGhvbmUiLCB7IHJlcXVpcmVkOiB0cnVlIH0pfSBwbGFjZWhvbGRlcj0i4LmA4Lia4Lit4Lij4LmM4LmC4LiX4Lij4Lio4Lix4Lie4LiX4LmMIiAvPgogICAgICAgICAgICB7ZXJyb3JzLmNvbnRhY3RQaG9uZSAmJiA8cCBjbGFzc05hbWU9InRleHQtcmVkLTUwMCI+4LmC4Lib4Lij4LiU4Lij4Liw4Lia4Li44LmA4Lia4Lit4Lij4LmM4LmC4LiX4Lij4Lio4Lix4Lie4LiX4LmMPC9wPn0KCiAgICAgICAgICAgIDxsYWJlbD7guKvguKHguLLguKLguYDguKvguJXguLjguYDguJ7guLTguYjguKHguYDguJXguLTguKE8L2xhYmVsPgogICAgICAgICAgICA8VGV4dGFyZWEgey4uLnJlZ2lzdGVyKCJyZW1hcmtzIil9IHBsYWNlaG9sZGVyPSLguKPguLDguJrguLjguILguYnguK3guKHguLnguKXguYDguJ7guLTguYjguKHguYDguJXguLTguKEgKOC4luC5ieC4suC4oeC4tSkiIC8+CgogICAgICAgICAgICA8QnV0dG9uIGNsYXNzTmFtZT0idy1mdWxsIiB0eXBlPSJzdWJtaXQiIGRpc2FibGVkPXshaXNWYWxpZH0+4Lia4Lix4LiZ4LiX4Li24LiB4LmA4Lit4LiB4Liq4Liy4LijIFJUVjwvQnV0dG9uPgogICAgICAgICAgPC9mb3JtPgogICAgICAgIDwvQ2FyZENvbnRlbnQ+CiAgICAgIDwvQ2FyZD4KICAgIDwvZGl2PgogICk7Cn0K