<script setup lang="ts">
import DatePicker from '../shared/DatePicker.vue';
import { AddressForm } from 'components/form';

const transportation = defineModel<string>('transportation', { default: '' });
const travelDate = defineModel<string>('travelDate', { default: '' });
const entryCheckpoint = defineModel<string>('entryCheckpoint', { default: '' });
const entryCardNumber = defineModel<string>('entryCardNumber', { default: '' });

const address = defineModel<string>('address');
const street = defineModel('street', { default: '' });
const moo = defineModel('moo', { default: '' });
const soi = defineModel('soi', { default: '' });
const provinceId = defineModel<string | null | undefined>('provinceId');
const districtId = defineModel<string | null | undefined>('districtId');
const subDistrictId = defineModel<string | null | undefined>('subDistrictId');
const homeCode = defineModel<string | null | undefined>('homeCode');
const employmentOffice = defineModel<string | null | undefined>(
  'employmentOffice',
);

defineProps<{
  prefixId?: string;
  outlined?: boolean;
  readonly?: boolean;
}>();
</script>

<template>
  <div class="row q-mb-sm" style="gap: 10px">
    <div class="col-12 text-subtitle1 text-weight-bold">
      <p>Document Properties</p>
    </div>

    <div class="col-12 row q-col-gutter-sm">
      <q-input
        dense
        outlined
        :readonly="readonly"
        hide-bottom-space
        class="col-6"
        :label="$t('form.tm6.transportation')"
        for="input-citizen-id"
        v-model="transportation"
      />

      <DatePicker
        :label="$t('form.tm6.travelDate')"
        v-model="travelDate"
        class="col-4"
        :id="`${prefixId}-input-birth-date`"
        :readonly="readonly"
        clearable
      />
    </div>

    <AddressForm
      prefixId="form-tm6"
      hide-icon
      hide-title
      hide-input-en
      dense
      v-model:homeCode="homeCode"
      v-model:employmentOffice="employmentOffice"
      v-model:address="address"
      v-model:street="street"
      v-model:moo="moo"
      v-model:soi="soi"
      v-model:province-id="provinceId"
      v-model:district-id="districtId"
      v-model:sub-district-id="subDistrictId"
    />

    <div class="col-12 row q-col-gutter-sm">
      <q-input
        dense
        outlined
        :readonly="readonly"
        hide-bottom-space
        class="col"
        :label="$t('form.tm6.entryCheckpoint')"
        for="input-citizen-id"
        v-model="entryCheckpoint"
      />
      <q-input
        dense
        outlined
        :readonly="readonly"
        hide-bottom-space
        class="col"
        :label="$t('form.tm6.entryCardNumber')"
        for="input-citizen-id"
        v-model="entryCardNumber"
      />
    </div>
  </div>
</template>

<style lang="scss" scoped></style>
