<script setup lang="ts">
import DatePicker from 'src/components/shared/DatePicker.vue';

const passportNo = defineModel<string>('passportNo');
const documentExpireDate = defineModel<Date>('documentExpireDate');

defineProps<{
  noAction?: boolean;
  title?: string;
  dense?: boolean;
  outlined?: boolean;
  readonly?: boolean;
  typeCustomer?: string;
  employee?: boolean;
  prefixId: string;
  showBtnSave?: boolean;
}>();
</script>

<template>
  <div class="row col-12">
    <div
      class="col-12 items-center row justify-between q-pb-sm text-weight-bold text-body1"
    >
      <div>
        <q-icon
          flat
          size="xs"
          class="q-pa-sm rounded q-mr-xs"
          color="info"
          name="mdi-office-building-outline"
          style="background-color: var(--surface-3)"
        />
        {{ $t(`${title}`) }}
      </div>
      <!-- v-if="!readonly" -->
    </div>

    <div class="col-12 row" style="gap: var(--size-2)">
      <q-input
        :for="`${prefixId}-input-passport-no`"
        :dense="dense"
        outlined
        hide-bottom-space
        :readonly="readonly"
        class="col-4"
        :label="$t('customerEmployee.form.passportNo')"
        v-model="passportNo"
      />

      <DatePicker
        v-model="documentExpireDate"
        class="col-4"
        :id="`${prefixId}-input-document-expire-date`"
        :label="$t('quotation.documentExpireDate')"
        :readonly="readonly"
        clearable
      />
    </div>
  </div>
</template>

<style scoped lang="scss">
.clear-btn {
  opacity: 50%;
  transition: opacity 0.2s ease-in-out;
  &:hover {
    opacity: 100%;
  }
}
</style>
