import { useState } from 'react';
import { Card, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
 
export default function IceDeliveryApp() {
  const [orders, setOrders] = useState([]);
  const [form, setForm] = useState({
    customer: '',
    location: '',
    quantity: '',
    note: '',
  });
 
  const handleChange = (e) => {
    setForm({ ...form, [e.target.name]: e.target.value });
  };
 
  const handleSubmit = () => {
    if (form.customer && form.location && form.quantity) {
      setOrders([...orders, { ...form, id: Date.now() }]);
      setForm({ customer: '', location: '', quantity: '', note: '' });
    }
  };
 
  return (
    <div className="max-w-2xl mx-auto p-4 space-y-6">
      <h1 className="text-2xl font-bold">ระบบจัดการออเดอร์ส่งน้ำแข็ง (เชียงใหม่)</h1>
 
      <Card>
        <CardContent className="space-y-4 p-4">
          <Input
            placeholder="ชื่อลูกค้า"
            name="customer"
            value={form.customer}
            onChange={handleChange}
          />
          <Input
            placeholder="สถานที่จัดส่ง"
            name="location"
            value={form.location}
            onChange={handleChange}
          />
          <Input
            placeholder="จำนวนกระสอบน้ำแข็ง"
            name="quantity"
            type="number"
            value={form.quantity}
            onChange={handleChange}
          />
          <Textarea
            placeholder="หมายเหตุเพิ่มเติม (ถ้ามี)"
            name="note"
            value={form.note}
            onChange={handleChange}
          />
          <Button onClick={handleSubmit} className="w-full">
            เพิ่มออเดอร์
          </Button>
        </CardContent>
      </Card>
 
      <div className="space-y-4">
        {orders.map((order) => (
          <Card key={order.id}>
            <CardContent className="p-4">
              <p><strong>ลูกค้า:</strong> {order.customer}</p>
              <p><strong>สถานที่:</strong> {order.location}</p>
              <p><strong>จำนวน:</strong> {order.quantity} กระสอบ</p>
              {order.note && <p><strong>หมายเหตุ:</strong> {order.note}</p>}
            </CardContent>
          </Card>
        ))}

aW1wb3J0IHsgdXNlU3RhdGUgfSBmcm9tICdyZWFjdCc7CmltcG9ydCB7IENhcmQsIENhcmRDb250ZW50IH0gZnJvbSAnQC9jb21wb25lbnRzL3VpL2NhcmQnOwppbXBvcnQgeyBCdXR0b24gfSBmcm9tICdAL2NvbXBvbmVudHMvdWkvYnV0dG9uJzsKaW1wb3J0IHsgSW5wdXQgfSBmcm9tICdAL2NvbXBvbmVudHMvdWkvaW5wdXQnOwppbXBvcnQgeyBUZXh0YXJlYSB9IGZyb20gJ0AvY29tcG9uZW50cy91aS90ZXh0YXJlYSc7CgpleHBvcnQgZGVmYXVsdCBmdW5jdGlvbiBJY2VEZWxpdmVyeUFwcCgpIHsKICBjb25zdCBbb3JkZXJzLCBzZXRPcmRlcnNdID0gdXNlU3RhdGUoW10pOwogIGNvbnN0IFtmb3JtLCBzZXRGb3JtXSA9IHVzZVN0YXRlKHsKICAgIGN1c3RvbWVyOiAnJywKICAgIGxvY2F0aW9uOiAnJywKICAgIHF1YW50aXR5OiAnJywKICAgIG5vdGU6ICcnLAogIH0pOwoKICBjb25zdCBoYW5kbGVDaGFuZ2UgPSAoZSkgPT4gewogICAgc2V0Rm9ybSh7IC4uLmZvcm0sIFtlLnRhcmdldC5uYW1lXTogZS50YXJnZXQudmFsdWUgfSk7CiAgfTsKCiAgY29uc3QgaGFuZGxlU3VibWl0ID0gKCkgPT4gewogICAgaWYgKGZvcm0uY3VzdG9tZXIgJiYgZm9ybS5sb2NhdGlvbiAmJiBmb3JtLnF1YW50aXR5KSB7CiAgICAgIHNldE9yZGVycyhbLi4ub3JkZXJzLCB7IC4uLmZvcm0sIGlkOiBEYXRlLm5vdygpIH1dKTsKICAgICAgc2V0Rm9ybSh7IGN1c3RvbWVyOiAnJywgbG9jYXRpb246ICcnLCBxdWFudGl0eTogJycsIG5vdGU6ICcnIH0pOwogICAgfQogIH07CgogIHJldHVybiAoCiAgICA8ZGl2IGNsYXNzTmFtZT0ibWF4LXctMnhsIG14LWF1dG8gcC00IHNwYWNlLXktNiI+CiAgICAgIDxoMSBjbGFzc05hbWU9InRleHQtMnhsIGZvbnQtYm9sZCI+4Lij4Liw4Lia4Lia4LiI4Lix4LiU4LiB4Liy4Lij4Lit4Lit4LmA4LiU4Lit4Lij4LmM4Liq4LmI4LiH4LiZ4LmJ4Liz4LmB4LiC4LmH4LiHICjguYDguIrguLXguKLguIfguYPguKvguKHguYgpPC9oMT4KCiAgICAgIDxDYXJkPgogICAgICAgIDxDYXJkQ29udGVudCBjbGFzc05hbWU9InNwYWNlLXktNCBwLTQiPgogICAgICAgICAgPElucHV0CiAgICAgICAgICAgIHBsYWNlaG9sZGVyPSLguIrguLfguYjguK3guKXguLnguIHguITguYnguLIiCiAgICAgICAgICAgIG5hbWU9ImN1c3RvbWVyIgogICAgICAgICAgICB2YWx1ZT17Zm9ybS5jdXN0b21lcn0KICAgICAgICAgICAgb25DaGFuZ2U9e2hhbmRsZUNoYW5nZX0KICAgICAgICAgIC8+CiAgICAgICAgICA8SW5wdXQKICAgICAgICAgICAgcGxhY2Vob2xkZXI9IuC4quC4luC4suC4meC4l+C4teC5iOC4iOC4seC4lOC4quC5iOC4hyIKICAgICAgICAgICAgbmFtZT0ibG9jYXRpb24iCiAgICAgICAgICAgIHZhbHVlPXtmb3JtLmxvY2F0aW9ufQogICAgICAgICAgICBvbkNoYW5nZT17aGFuZGxlQ2hhbmdlfQogICAgICAgICAgLz4KICAgICAgICAgIDxJbnB1dAogICAgICAgICAgICBwbGFjZWhvbGRlcj0i4LiI4Liz4LiZ4Lin4LiZ4LiB4Lij4Liw4Liq4Lit4Lia4LiZ4LmJ4Liz4LmB4LiC4LmH4LiHIgogICAgICAgICAgICBuYW1lPSJxdWFudGl0eSIKICAgICAgICAgICAgdHlwZT0ibnVtYmVyIgogICAgICAgICAgICB2YWx1ZT17Zm9ybS5xdWFudGl0eX0KICAgICAgICAgICAgb25DaGFuZ2U9e2hhbmRsZUNoYW5nZX0KICAgICAgICAgIC8+CiAgICAgICAgICA8VGV4dGFyZWEKICAgICAgICAgICAgcGxhY2Vob2xkZXI9IuC4q+C4oeC4suC4ouC5gOC4q+C4leC4uOC5gOC4nuC4tOC5iOC4oeC5gOC4leC4tOC4oSAo4LiW4LmJ4Liy4Lih4Li1KSIKICAgICAgICAgICAgbmFtZT0ibm90ZSIKICAgICAgICAgICAgdmFsdWU9e2Zvcm0ubm90ZX0KICAgICAgICAgICAgb25DaGFuZ2U9e2hhbmRsZUNoYW5nZX0KICAgICAgICAgIC8+CiAgICAgICAgICA8QnV0dG9uIG9uQ2xpY2s9e2hhbmRsZVN1Ym1pdH0gY2xhc3NOYW1lPSJ3LWZ1bGwiPgogICAgICAgICAgICDguYDguJ7guLTguYjguKHguK3guK3guYDguJTguK3guKPguYwKICAgICAgICAgIDwvQnV0dG9uPgogICAgICAgIDwvQ2FyZENvbnRlbnQ+CiAgICAgIDwvQ2FyZD4KCiAgICAgIDxkaXYgY2xhc3NOYW1lPSJzcGFjZS15LTQiPgogICAgICAgIHtvcmRlcnMubWFwKChvcmRlcikgPT4gKAogICAgICAgICAgPENhcmQga2V5PXtvcmRlci5pZH0+CiAgICAgICAgICAgIDxDYXJkQ29udGVudCBjbGFzc05hbWU9InAtNCI+CiAgICAgICAgICAgICAgPHA+PHN0cm9uZz7guKXguLnguIHguITguYnguLI6PC9zdHJvbmc+IHtvcmRlci5jdXN0b21lcn08L3A+CiAgICAgICAgICAgICAgPHA+PHN0cm9uZz7guKrguJbguLLguJnguJfguLXguYg6PC9zdHJvbmc+IHtvcmRlci5sb2NhdGlvbn08L3A+CiAgICAgICAgICAgICAgPHA+PHN0cm9uZz7guIjguLPguJnguKfguJk6PC9zdHJvbmc+IHtvcmRlci5xdWFudGl0eX0g4LiB4Lij4Liw4Liq4Lit4LiaPC9wPgogICAgICAgICAgICAgIHtvcmRlci5ub3RlICYmIDxwPjxzdHJvbmc+4Lir4Lih4Liy4Lii4LmA4Lir4LiV4Li4Ojwvc3Ryb25nPiB7b3JkZXIubm90ZX08L3A+fQogICAgICAgICAgICA8L0NhcmRDb250ZW50PgogICAgICAgICAgPC9DYXJkPgogICAgICAgICkpfQ==