<script setup lang="ts">
import { useI18n } from 'vue-i18n';
import { reactive, ref, watch } from 'vue';

// NOTE: Import stores
import { dialog } from 'stores/utils';
import useOptionStore from 'src/stores/options';
import useEmployeeStore from 'src/stores/employee';
import { useEmployeeForm } from 'src/pages/03_customer-management/form';
import { waitAll } from 'src/stores/utils';
import { calculateAge, dateFormatJS } from 'src/utils/datetime';
import { dialogCheckData } from 'stores/utils';
import { useQuotationForm } from 'pages/05_quotation/form';

// NOTE  Import Types
import { Employee } from 'src/stores/employee/types';
import { EmployeeWorker } from 'src/stores/quotations/types';
import { runOcr, parseResultMRZ } from 'src/utils/ocr';
import useOcrStore from 'stores/ocr';

// NOTE: Import Components
import {
  SaveButton,
  EditButton,
  UndoButton,
  DeleteButton,
  MainButton,
  CancelButton,
} from 'components/button';
import DialogContainer from 'components/dialog/DialogContainer.vue';
import DialogHeader from 'components/dialog/DialogHeader.vue';
import ImportWorker from './ImportWorker.vue';
import PersonCard from 'src/components/shared/PersonCard.vue';
import NewPersonCard from 'src/components/shared/NewPersonCard.vue';
import { Lang } from 'src/utils/ui';
import NoData from 'src/components/NoData.vue';
import FormEmployeePassport from 'components/03_customer-management/FormEmployeePassport.vue';
import FormEmployeeVisa from 'components/03_customer-management/FormEmployeeVisa.vue';
import FormReferDocument from 'src/components/05_quotation/FormReferDocument.vue';
import { UploadFileGroup, NoticeJobEmployment } from 'components/upload-file';
import FormPerson from 'components/02_personnel-management/FormPerson.vue';
import ProfileBanner from 'components/ProfileBanner.vue';
import DialogForm from 'components/DialogForm.vue';
import {
  uploadFileListEmployee,
  columnsAttachment,
} from 'src/pages/03_customer-management/constant';
import { storeToRefs } from 'pinia';
import ToggleView from 'src/components/shared/ToggleView.vue';
import TableWorker from 'src/components/shared/table/TableWorker.vue';

const API_BASE_URL = import.meta.env.VITE_API_BASE_URL;

const { t } = useI18n();
const employeeFormStore = useEmployeeForm();
const quotationForm = useQuotationForm();
const { locale } = useI18n();
const ocrStore = useOcrStore();

const viewMode = ref<boolean>(false);

const { state: employeeFormState, currentFromDataEmployee } =
  storeToRefs(employeeFormStore);

const mrz = ref<Awaited<ReturnType<typeof parseResultMRZ>>>();

const formDataEmployee = ref<
  EmployeeWorker & {
    attachment?: {
      name?: string;
      group?: string;
      url?: string;
      file?: File;
      _meta?: Record<string, any>;
    }[];
  }
>({
  passportNo: '',
  documentExpireDate: new Date(),
  lastNameEN: '',
  lastName: '',
  middleNameEN: '',
  middleName: '',
  firstNameEN: '',
  firstName: '',
  namePrefix: '',
  nationality: '',
  gender: '',
  dateOfBirth: new Date(),
  attachment: [],
});

const props = withDefaults(
  defineProps<{
    customerBranchId?: string;
    disabledWorkerId?: string[];
    preselectWorker?: Employee[];
  }>(),
  {},
);

const emits = defineEmits<{
  (e: 'triggerCreateEmployee'): void;
  (
    e: 'success',
    data: {
      worker: Employee[];
      newWorker: EmployeeWorker[];
    },
  ): void;
}>();

const optionStore = useOptionStore();
const employeeStore = useEmployeeStore();

const open = defineModel<boolean>('open', { default: false });
const newWorkerList = defineModel<
  (EmployeeWorker & {
    attachment?: {
      name?: string;
      group?: string;
      url?: string;
      file?: File;
      _meta?: Record<string, any>;
    }[];
  })[]
>('newWorkerList', { default: [] });
const workerSelected = ref<Employee[]>([]);
const workerList = ref<Employee[]>([]);
const importWorkerCriteria = ref<{
  passport: string[] | null;
  visa: string[] | null;
}>({
  passport: [],
  visa: [],
});

const state = reactive({
  importWorker: false,
  step: 1,
  search: '',
});

function removeNewWorker(index: number) {
  dialog({
    color: 'negative',
    icon: 'mdi-trash-can-outline',
    title: t('dialog.title.confirmDelete'),
    actionText: t('general.delete'),
    persistent: true,
    message: t('dialog.message.confirmDelete'),
    action: async () => {
      newWorkerList.value.splice(index, 1);
    },
    cancel: () => {},
  });
}

function triggerCreateEmployee() {
  employeeFormStore.resetFormDataEmployee(true);
  setDefaultFormEmployee();
  employeeFormState.value.dialogType = 'create';
  employeeFormState.value.dialogModal = true;
  employeeFormState.value.isEmployeeEdit = true;
}

function setDefaultFormEmployee() {
  formDataEmployee.value = {
    passportNo: '',
    documentExpireDate: new Date(),
    lastNameEN: '',
    lastName: '',
    middleNameEN: '',
    middleName: '',
    firstNameEN: '',
    firstName: '',
    namePrefix: '',
    nationality: '',
    gender: '',
    dateOfBirth: null,
    attachment: [],
  };

  employeeFormState.value.dialogModal = false;
}

function clean() {
  workerList.value = [];
  workerSelected.value = [];
  open.value = false;
}

function selectedIndex(item: Employee) {
  return workerSelected.value.findIndex((v) => v.id === item.id);
}

function toggleSelect(item: Employee) {
  if (props.disabledWorkerId?.some((id) => id === item.id)) return;

  const index = selectedIndex(item);

  if (index === -1) {
    workerSelected.value.push(item);
  } else {
    workerSelected.value.splice(index, 1);
  }
}

function getEmployeeImageUrl(item: Employee) {
  if (item.selectedImage) {
    return `${API_BASE_URL}/employee/${item.id}/image/${item.selectedImage}`;
  }
  // NOTE: static image
  return `/images/employee-avatar-${item.gender}.png`;
}

function init() {
  if (props.preselectWorker) {
    workerSelected.value = JSON.parse(JSON.stringify(props.preselectWorker));
  }
  getWorkerList();
}

async function getWorkerList() {
  const ret = await employeeStore.fetchList({
    pageSize: 100,
    query: state.search,
    passport: true,
    customerBranchId: props.customerBranchId,
    activeOnly: true,
  });

  if (!ret) return false;

  workerList.value = ret.result;
}

async function getWorkerFromCriteria(
  payload: typeof importWorkerCriteria.value,
) {
  const ret = await employeeStore.fetchList({
    payload: {
      passport: payload.passport || undefined,
    },
    pageSize: 99999, // must include all possible worker
    page: 1,
    passport: true,
    customerBranchId: props.customerBranchId,
    activeOnly: true,
  });

  if (!ret) return false; // error, do not close dialog

  workerSelected.value = ret.result.filter(
    (lhs) => !props.disabledWorkerId?.find((rhs) => lhs.id === rhs),
  );

  if (workerSelected.value.length > 0) state.step = 2;

  return true;
}

watch(() => state.search, getWorkerList);

watch(
  () => formDataEmployee.value.dateOfBirth,
  () => {
    const age = calculateAge(formDataEmployee.value.dateOfBirth, 'year');
    if (formDataEmployee.value.dateOfBirth && Number(age) < 15) {
      dialog({
        color: 'warning',
        icon: 'mdi-alert',
        title: t('dialog.title.youngWorker15'),
        cancelText: t('general.edit'),
        persistent: true,
        message: t('dialog.message.youngWorker15'),

        cancel: async () => {
          formDataEmployee.value.dateOfBirth = null;
          return;
        },
      });
    }

    if (
      formDataEmployee.value.dateOfBirth &&
      Number(age) > 15 &&
      Number(age) <= 18
    ) {
      dialog({
        color: 'warning',
        icon: 'mdi-alert',
        title: t('dialog.title.youngWorker18'),
        cancelText: t('general.cancel'),
        actionText: t('general.confirm'),
        persistent: true,
        message: t('dialog.message.youngWorker18'),
        action: () => {},
        cancel: async () => {
          formDataEmployee.value.dateOfBirth = null;
          return;
        },
      });
    }
  },
);
</script>

<template>
  <ImportWorker
    v-model:open="state.importWorker"
    v-model:data="importWorkerCriteria"
    :import-worker="getWorkerFromCriteria"
  />
  <DialogContainer v-model="open" @open="init" @close="clean">
    <template #header>
      <DialogHeader :title="$t('quotation.addWorker')">
        <template #title-before>
          <span class="q-mr-auto"></span>
        </template>
        <template #title-after>
          <q-btn
            class="q-ml-auto q-mr-xs"
            flat
            size="sm"
            icon="mdi-dots-horizontal"
            :id="`btn-kebab-action`"
            @click.stop
            :title="$t('general.additional')"
            style="max-width: 20px"
          >
            <q-menu class="bordered" ref="refMenu">
              <q-list>
                <q-item
                  id="trigger-create-employee"
                  v-close-popup
                  dense
                  clickable
                  class="row items-center"
                  style="white-space: nowrap"
                  @click.stop="() => triggerCreateEmployee()"
                >
                  <q-icon
                    size="xs"
                    class="q-mr-sm"
                    name="mdi-plus"
                    style="color: hsl(var(--info-bg))"
                  />
                  <span>
                    {{ $t('quotation.addWorker') }}
                  </span>
                </q-item>

                <q-item
                  id="import-worker"
                  v-close-popup
                  dense
                  clickable
                  style="white-space: nowrap"
                  class="row items-center"
                  @click.stop="() => (state.importWorker = true)"
                >
                  <q-icon
                    size="xs"
                    class="q-mr-sm"
                    name="mdi-import"
                    style="color: hsl(195 90% 50%)"
                  />
                  <span>{{ $t('quotation.importWorker') }}</span>
                </q-item>
              </q-list>
            </q-menu>
          </q-btn>
        </template>
      </DialogHeader>
    </template>

    <div class="column full-height no-wrap surface-2">
      <section class="row q-mb-md">
        <header
          class="row items-center q-py-sm q-px-md justify-end full-width surface-3 bordered-b no-wrap"
        >
          <ToggleView v-model="viewMode" class="q-mr-sm full-height" />

          <q-input
            for="input-search"
            outlined
            dense
            :label="$t('general.search')"
            :bg-color="$q.dark.isActive ? 'dark' : 'white'"
            v-model="state.search"
            debounce="500"
          >
            <template #prepend>
              <q-icon name="mdi-magnify" />
            </template>
          </q-input>
        </header>
      </section>
      <!-- wrapper -->
      <div class="col q-gutter-y-md scroll q-px-md">
        <q-expansion-item
          v-if="newWorkerList.length !== 0"
          for="item-up"
          id="item-up"
          dense
          class="overflow-hidden"
          switch-toggle-side
          style="border-radius: var(--radius-2)"
          expand-icon="mdi-chevron-down-circle"
          default-opened
        >
          <template v-slot:header>
            <section class="row items-center full-width">
              <div class="row items-center q-pr-md q-py-sm">
                <span
                  class="text-weight-medium q-mr-md"
                  style="font-size: 18px"
                >
                  {{ $t('quotation.newCustomer') }}
                </span>
              </div>
            </section>
          </template>

          <div class="full-width q-pt-md">
            <section
              :class="{ ['items-center']: workerList.length === 0 }"
              class="row q-col-gutter-md"
            >
              <div
                :key="emp.id"
                v-for="(emp, index) in newWorkerList.map((data) => ({
                  ...data,
                }))"
                class="col-2"
              >
                <button
                  class="selectable-item full-width selectable-item__selected"
                >
                  <NewPersonCard
                    @cancel="(i) => removeNewWorker(i)"
                    no-action
                    class="full-width"
                    :prefix-id="'employee-' + index"
                    :data="{
                      name:
                        locale === Lang.English
                          ? `${emp.firstNameEN} ${emp.lastNameEN}`
                          : `${emp.firstName} ${emp.lastName}`,
                      female: emp.gender === 'female',
                      male: emp.gender === 'male',
                      img: `/images/employee-avatar-${emp.gender}.png`,
                      index: index,
                      detail: [
                        {
                          icon: 'mdi-passport',
                          value: optionStore.mapOption(emp.nationality),
                        },
                        {
                          icon: 'mdi-clock-outline',
                          value: calculateAge(emp.dateOfBirth),
                        },
                      ],
                    }"
                  />
                </button>
              </div>
            </section>
          </div>
        </q-expansion-item>

        <q-expansion-item
          for="item-up"
          id="item-up"
          dense
          class="overflow-hidden"
          switch-toggle-side
          default-opened
          style="border-radius: var(--radius-2)"
          expand-icon="mdi-chevron-down-circle"
          header-class=""
        >
          <template v-slot:header>
            <section class="row items-center full-width">
              <div class="row items-center q-pr-md q-py-sm">
                <span
                  class="text-weight-medium q-mr-md"
                  style="font-size: 18px"
                >
                  {{ $t('quotation.employee') }}
                </span>
              </div>
            </section>
          </template>

          <div class="full-width q-pt-md">
            <section
              :class="{ ['items-center']: workerList.length === 0 }"
              class="row scroll"
            >
              <div
                style="display: inline-block; margin-inline: auto"
                v-if="workerList.length === 0"
              >
                <NoData :not-found="!!state.search" />
              </div>
              <TableWorker
                v-if="workerList.length !== 0"
                v-model:selected="workerSelected"
                :rows="workerList"
                :disabledWorkerId
                :grid="viewMode"
              >
                <template #grid="{ item: emp, index }">
                  <div :key="emp.id" class="col-md-2 col-sm-6 col-12">
                    <button
                      :id="`select-worker-${emp.firstName}`"
                      class="selectable-item full-width"
                      :class="{
                        ['selectable-item__selected']:
                          emp._selectedIndex !== -1,
                        ['selectable-item__disabled']: disabledWorkerId?.some(
                          (id) => id === emp.id,
                        ),
                      }"
                      @click="toggleSelect(emp)"
                    >
                      <span class="selectable-item__pos">
                        {{ (emp._selectedIndex || 0) + 1 }}
                      </span>
                      <PersonCard
                        no-action
                        class="full-width"
                        :prefix-id="'employee-' + index"
                        :data="{
                          name:
                            locale === Lang.English
                              ? `${emp.firstNameEN} ${emp.lastNameEN}`
                              : `${emp.firstName} ${emp.lastName}`,
                          code: emp.employeePassport?.at(0)?.number || '-',
                          female: emp.gender === 'female',
                          male: emp.gender === 'male',
                          img: getEmployeeImageUrl(emp),
                          fallbackImg: `/images/employee-avatar-${emp.gender}.png`,
                          detail: [
                            {
                              icon: 'mdi-passport',
                              value: optionStore.mapOption(emp.nationality),
                            },
                            {
                              icon: 'mdi-clock-outline',
                              value: calculateAge(emp.dateOfBirth),
                            },
                          ],
                        }"
                      />
                    </button>
                  </div>
                </template>
              </TableWorker>
            </section>
          </div>
        </q-expansion-item>
      </div>
    </div>
    <template #footer>
      <div class="q-gutter-x-xs q-ml-auto">
        <CancelButton id="btn-cancel" outlined @click="clean" />
        <MainButton
          icon="mdi-check"
          color="207 96% 32%"
          solid
          id="btn-success"
          @click="
            emits('success', {
              worker: workerSelected,
              newWorker: newWorkerList,
            }),
              (open = false)
          "
        >
          {{ $t('general.select', { msg: $t('quotation.employeeList') }) }}
        </MainButton>
      </div>
    </template>
  </DialogContainer>

  <!-- NOTE: START - Employee Add Form -->

  <DialogForm
    hide-footer
    ref="formDialogRef"
    v-model:modal="employeeFormState.dialogModal"
    :title="$t('form.title.create', { name: $t('customer.employee') })"
    :submit="
      () => {
        quotationForm.injectNewEmployee({ data: formDataEmployee }, () =>
          setDefaultFormEmployee(),
        );
      }
    "
    :close="
      () => {
        employeeFormState.dialogModal = false;
      }
    "
  >
    <div
      :class="{
        'q-mx-lg q-my-md': $q.screen.gt.sm,
        'q-mx-md q-my-sm': !$q.screen.gt.sm,
      }"
    >
      <ProfileBanner
        prefix="dialog"
        active
        useToggle
        color="white"
        icon="mdi-account-plus-outline"
        :bg-color="
          employeeFormState.profileUrl
            ? 'white'
            : 'linear-gradient(135deg, rgba(43,137,223,1) 0%, rgba(230,51,81,1) 100%)'
        "
        v-model:current-tab="employeeFormState.currentTab"
        v-model:toggle-status="currentFromDataEmployee.status"
        fallbackCover="/images/employee-banner.png"
        :img="
          employeeFormState.profileUrl ||
          `/images/employee-avatar-${currentFromDataEmployee.gender}.png`
        "
        :toggleTitle="$t('status.title')"
        hideFade
        @view="
          () => {
            employeeFormState.imageDialog = true;
            employeeFormState.isImageEdit = false;
          }
        "
        @edit="
          employeeFormState.imageDialog = employeeFormState.isImageEdit = true
        "
        @update:toggle-status="
          () => {
            currentFromDataEmployee.status =
              currentFromDataEmployee.status === 'CREATED'
                ? 'INACTIVE'
                : 'CREATED';
          }
        "
      />
    </div>
    <div
      class="col"
      :class="{
        'q-px-lg q-pb-lg': $q.screen.gt.sm,
        'q-px-md q-pb-sm': !$q.screen.gt.sm,
      }"
    >
      <div
        style="overflow-y: auto"
        class="row full-width full-height surface-1 rounded bordered relative-position"
      >
        <div
          :class="{
            'q-py-md q-px-lg': $q.screen.gt.sm,
            'q-py-sm q-px-lg': !$q.screen.gt.sm,
          }"
          style="position: absolute; z-index: 99999; top: 0; right: 0"
        >
          <div
            v-if="currentFromDataEmployee.status !== 'INACTIVE'"
            class="surface-1 row rounded"
          >
            <UndoButton
              v-if="
                employeeFormState.isEmployeeEdit &&
                employeeFormState.dialogType !== 'create'
              "
              id="btn-info-basic-undo"
              icon-only
              @click="
                () => {
                  employeeFormStore.resetFormDataEmployee();
                  employeeFormState.isEmployeeEdit = false;
                  employeeFormState.dialogType = 'info';
                }
              "
              type="button"
            />
            <SaveButton
              v-if="employeeFormState.isEmployeeEdit"
              id="btn-info-basic-save"
              icon-only
              type="submit"
            />
            <EditButton
              v-if="!employeeFormState.isEmployeeEdit"
              id="btn-info-basic-edit"
              icon-only
              @click="
                () => {
                  employeeFormState.isEmployeeEdit = true;
                  employeeFormState.dialogType = 'edit';
                }
              "
              type="button"
            />
            <DeleteButton
              v-if="!employeeFormState.isEmployeeEdit"
              id="btn-info-basic-delete"
              icon-only
            />
          </div>
        </div>

        <div
          class="col-12 full-height q-col-gutter-sm q-py-md q-pl-md q-pr-sm"
          :class="{
            'q-py-md q-pr-md ': $q.screen.gt.sm,
            'q-py-md q-px-lg': !$q.screen.gt.sm,
          }"
          id="branch-form"
          style="overflow-y: auto"
        >
          <FormReferDocument
            title="form.field.basicInformation"
            prefixId="dialog"
            dense
            v-model:passport-no="formDataEmployee.passportNo"
            v-model:document-expire-date="formDataEmployee.documentExpireDate"
            class="q-mb-md"
          />

          <FormPerson
            id="form-personal"
            prefix-id="form-employee"
            dense
            outlined
            employee
            separator
            hideNameEn
            title="personnel.form.personalInformation"
            class="q-mb-md"
            v-model:prefix-name="formDataEmployee.namePrefix"
            v-model:first-name="formDataEmployee.firstName"
            v-model:mid-name="formDataEmployee.middleName"
            v-model:last-name="formDataEmployee.lastName"
            v-model:birth-date="formDataEmployee.dateOfBirth"
            v-model:gender="formDataEmployee.gender"
            v-model:nationality="formDataEmployee.nationality"
          />

          <UploadFileGroup
            show-title
            v-model="formDataEmployee.attachment"
            hide-action
            @submit="
              async (group, allMeta) => {
                if (allMeta === undefined) return;

                if (group === 'passport') {
                  const fullName = allMeta['full_name'].split(' ');
                  let tempValue: {
                    oldData: { nameField: string; value: string }[];
                    newData: { nameField: string; value: string }[];
                  } = { oldData: [], newData: [] };

                  if (
                    formDataEmployee.gender !== '' &&
                    formDataEmployee.gender !== allMeta['sex']
                  ) {
                    tempValue.oldData.push({
                      nameField: $t('form.gender'),
                      value: $t(`general.${formDataEmployee.gender}`),
                    });
                    tempValue.newData.push({
                      nameField: $t('form.gender'),
                      value: $t(`general.${allMeta['sex']}`),
                    });
                  }

                  if (formDataEmployee.firstName !== '') {
                    tempValue.oldData.push({
                      nameField: $t('personnel.form.firstName'),
                      value: formDataEmployee.firstName,
                    });
                    tempValue.newData.push({
                      nameField: $t('personnel.form.firstName'),
                      value: fullName[0],
                    });
                  }

                  if (formDataEmployee.lastName !== '') {
                    tempValue.oldData.push({
                      nameField: $t('personnel.form.lastName'),
                      value: formDataEmployee.lastName,
                    });
                    tempValue.newData.push({
                      nameField: $t('personnel.form.lastName'),
                      value: fullName[1],
                    });
                  }

                  if (formDataEmployee.passportNo !== '') {
                    tempValue.oldData.push({
                      nameField: $t('customerEmployee.form.passportNo'),
                      value: formDataEmployee.passportNo || '',
                    });
                    tempValue.newData.push({
                      nameField: $t('customerEmployee.form.passportNo'),
                      value: allMeta['doc_number'],
                    });
                  }

                  if (formDataEmployee.nationality !== '') {
                    tempValue.oldData.push({
                      nameField: $t('general.nationality'),
                      value: formDataEmployee.nationality || '',
                    });
                    tempValue.newData.push({
                      nameField: $t('general.nationality'),
                      value: allMeta['nationality'],
                    });
                  }

                  dialogCheckData({
                    action: async () => {
                      formDataEmployee.gender = allMeta['sex'];
                      formDataEmployee.firstName = fullName[0];
                      formDataEmployee.lastName = fullName[1];
                      formDataEmployee.passportNo = allMeta['doc_number'];
                      formDataEmployee.nationality = allMeta['nationality'];
                    },
                    checkData: () => {
                      return tempValue;
                    },
                    cancel: () => {
                      if (!formDataEmployee.gender) {
                        formDataEmployee.gender = allMeta['gender'];
                      }
                      if (!formDataEmployee.firstName) {
                        formDataEmployee.firstName = fullName[0];
                      }
                      if (!formDataEmployee.firstName) {
                        formDataEmployee.firstName = fullName[0];
                      }
                      if (!formDataEmployee.lastName) {
                        formDataEmployee.lastName = fullName[1];
                      }
                      if (!formDataEmployee.passportNo) {
                        formDataEmployee.passportNo = allMeta['doc_number'];
                      }
                      if (!formDataEmployee.nationality) {
                        formDataEmployee.nationality = allMeta['nationality'];
                      }
                    },
                  });
                }
              }
            "
            :menu="uploadFileListEmployee"
            :columns="columnsAttachment"
            :ocr="
              async (group, file) => {
                if (group === 'passport') {
                  mrz = await runOcr(file, parseResultMRZ);

                  if (mrz !== null) {
                    const mapMrz = Object.entries(mrz.result || {}).map(
                      ([key, value]) => ({
                        name: key,
                        value: value,
                      }),
                    );
                    const tempValue = {
                      status: true,
                      group,
                      meta: mapMrz,
                    };

                    return tempValue;
                  }
                }
                if (group === 'visa') {
                  const res = await ocrStore.sendOcr({
                    file: file,
                    category: group,
                  });

                  if (res) {
                    const tempValue = {
                      status: true,
                      group,
                      meta: res.fields,
                    };

                    return tempValue;
                  }
                }

                return { status: true, group, meta: [] };
              }
            "
            :delete-item="
              async () => {
                return true;
              }
            "
            :get-file-list="
              async (group: 'passport' | 'visa' | 'attachment') => {
                if (!!currentFromDataEmployee.id && group !== 'attachment') {
                  const resMeta = await employeeStore.getMetaList({
                    parentId: currentFromDataEmployee.id,
                    group,
                  });

                  const tempValue = resMeta.map(async (i: any) => {
                    return {
                      _meta: { ...i },
                      name: `${group}-${dateFormatJS(i.expireDate)}` || '',
                      group: group,
                      url: await employeeStore.getFile({
                        parentId: currentFromDataEmployee.id || '',
                        group,
                        fileId: i.id,
                      }),
                      file: undefined,
                    };
                  });

                  return await waitAll(tempValue);
                } else {
                  const res = await employeeStore.listAttachment({
                    parentId: currentFromDataEmployee.id || '',
                  });

                  const tempValue = (res as string[]).map(async (i: any) => {
                    return {
                      _meta: { id: i, name: i },
                      name: i || '',
                      group: group,
                      url: await employeeStore.getAttachment({
                        parentId: currentFromDataEmployee.id || '',
                        name: i,
                      }),
                      file: undefined,
                    };
                  });

                  return await waitAll(tempValue);
                }
              }
            "
          >
            <template #form="{ mode, meta, isEdit }">
              <FormEmployeePassport
                v-if="mode === 'passport' && meta"
                prefix-id="drawer-info-employee"
                id="form-passport"
                dense
                outlined
                separator
                ocr
                :title="$t('customerEmployee.form.group.passport')"
                :readonly="!isEdit"
                v-model:birth-country="meta.birthCountry"
                v-model:previous-passportRef="meta.previousPassportRef"
                v-model:issue-place="meta.issuePlace"
                v-model:issue-country="meta.issueCountry"
                v-model:issue-date="meta.issueDate"
                v-model:type="meta.type"
                v-model:expire-date="meta.expireDate"
                v-model:birth-date="meta.birthDate"
                v-model:worker-status="meta.workerStatus"
                v-model:nationality="meta.nationality"
                v-model:gender="meta.gender"
                v-model:last-name-en="meta.lastNameEN"
                v-model:last-name="meta.lastName"
                v-model:middle-name-en="meta.middleNameEN"
                v-model:middle-name="meta.middleName"
                v-model:first-name-en="meta.firstNameEN"
                v-model:first-name="meta.firstName"
                v-model:name-prefix="meta.namePrefix"
                v-model:passport-number="meta.number"
              />
              <FormEmployeeVisa
                v-if="mode === 'visa' && meta"
                prefix-id="drawer-info-employee"
                id="form-visa"
                ocr
                dense
                outlined
                title="customerEmployee.form.group.visa"
                :readonly="!isEdit"
                v-model:arrival-at="meta.arrivalAt"
                v-model:arrival-tm-no="meta.arrivalTMNo"
                v-model:arrival-tm="meta.arrivalTM"
                v-model:mrz="meta.mrz"
                v-model:entry-count="meta.entryCount"
                v-model:issue-place="meta.issuePlace"
                v-model:issue-country="meta.issueCountry"
                v-model:issueDate="meta.issueDate"
                v-model:type="meta.type"
                v-model:expire-date="meta.expireDate"
                v-model:visa-issue-date="meta.issueDate"
                v-model:visa-expiry-date="meta.expireDate"
                v-model:remark="meta.remark"
                v-model:worker-type="meta.workerType"
                v-model:number="meta.number"
              />

              <NoticeJobEmployment v-if="mode === 'noticeJobEmployment'" />
            </template>
          </UploadFileGroup>
        </div>
      </div>
    </div>
  </DialogForm>

  <!-- NOTE: END - Employee Add Form -->
</template>

<style scoped>
:deep(i.q-icon.mdi.mdi-chevron-down-circle.q-expansion-item__toggle-icon) {
  color: hsl(var(--text-mute));
}

:deep(
    i.q-icon.mdi.mdi-chevron-down-circle.q-expansion-item__toggle-icon.q-expansion-item__toggle-icon--rotated
  ) {
  color: var(--brand-1);
}

:deep(.q-editor__toolbar-group):nth-child(2) {
  margin-left: auto !important;
}

:deep(.q-editor__toolbar.row.no-wrap.scroll-x) {
  background-color: var(--surface-2) !important;
}

:deep(.q-editor__toolbar) {
  border-color: var(--surface-3) !important;
}

:deep(
    .q-item.q-item-type.row.no-wrap.q-item--dense.q-item--clickable.q-link.cursor-pointer.q-focusable.q-hoverable.surface-1
      .q-focus-helper
  ) {
  visibility: hidden;
}

.selectable-item {
  padding: 0;
  appearance: none;
  border: none;
  background: transparent;
  position: relative;
  color: inherit;

  & > .selectable-item__pos {
    display: none;
  }
}

.selectable-item__selected {
  & > :deep(*) {
    border: 1px solid var(--_color, var(--brand-1)) !important;
  }

  & > .selectable-item__pos {
    display: block;
    position: absolute;
    margin: var(--size-2);
    right: 0;
    top: 0;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    color: var(--surface-1);
    background: var(--brand-1);
    color: white;
  }
}

.selectable-item__disabled {
  filter: grayscale(1);
  opacity: 0.5;

  & :deep(*) {
    cursor: not-allowed;
  }
}
</style>
