<script setup lang="ts">
import Block from '~/components/pub/custom-ui/form/block.vue'
import FieldGroup from '~/components/pub/custom-ui/form/field-group.vue'
import Field from '~/components/pub/custom-ui/form/field.vue'
import Label from '~/components/pub/custom-ui/form/label.vue'

const props = defineProps<{ modelValue: any }>()
const emit = defineEmits(['update:modelValue', 'event'])

const data = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val),
})

const items = [
  { value: '1', label: 'item 1' },
  { value: '2', label: 'item 2' },
  { value: '3', label: 'item 3' },
  { value: '4', label: 'item 4' },
]
</script>

<template>
  <form id="entry-form">
    <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
      <div class="flex flex-col justify-between">
        <Block>
          <FieldGroup :column="2">
            <Label>Nama</Label>
            <Field>
              <Input type="text" name="identity_number" />
            </Field>
          </FieldGroup>
          <FieldGroup :column="2">
            <Label>Kode</Label>
            <Field name="sip_number">
              <Input type="text" name="sip_no" />
            </Field>
          </FieldGroup>
          <FieldGroup :column="2">
            <Label>Metode Pemberian</Label>
            <Field name="phone">
              <Select :items="items" />
            </Field>
          </FieldGroup>
          <FieldGroup :column="2">
            <Label>Bentuk Sediaan</Label>
            <Field>
              <Select :items="items" />
            </Field>
          </FieldGroup>
          <FieldGroup :column="2">
            <Label>Dosis</Label>
            <Field>
              <Input type="number" name="outPatient_rate" />
            </Field>
          </FieldGroup>
          <FieldGroup :column="2">
            <Label>Infra</Label>
            <Field>
              <Input />
            </Field>
          </FieldGroup>
          <FieldGroup :column="2">
            <Label>Stock</Label>
            <Field>
              <Input type="number" />
            </Field>
          </FieldGroup>
          <FieldGroup :column="2">
            <Label>Status</Label>
            <Field>
              <Input />
            </Field>
          </FieldGroup>
        </Block>
      </div>
    </div>
  </form>
</template>
