<script lang="ts" setup>
import { useI18n } from 'vue-i18n';
import { storeToRefs } from 'pinia';
import { useQuasar } from 'quasar';
import { nextTick, onBeforeMount, onMounted, reactive, ref, watch } from 'vue';

// NOTE: Import stores
import { setLocale, dateFormat, calculateAge } from 'src/utils/datetime';
import { useEmployeeForm } from 'src/pages/03_customer-management/form';
import useProductServiceStore from 'stores/product-service';
import { baseUrl, waitAll } from 'src/stores/utils';
import useCustomerStore from 'stores/customer';
import useEmployeeStore from 'stores/employee';
import useOptionStore from 'stores/options';
import { useQuotationForm } from './form';
import useOcrStore from 'stores/ocr';
import { deleteItem } from 'stores/utils';

// NOTE  Import Types
import { QuotationPayload } from 'src/stores/quotations/types';
import { EmployeeWorker } from 'src/stores/quotations/types';
import { Employee } from 'src/stores/employee/types';
import {
  ProductGroup,
  Product,
  Service,
} from 'src/stores/product-service/types';

// NOTE: Import Components
import FormEmployeePassport from 'components/03_customer-management/FormEmployeePassport.vue';
import BasicInformation from 'components/03_customer-management/employee/BasicInformation.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 ProductItem from 'components/05_quotation/ProductItem.vue';
import WorkerItem from 'components/05_quotation/WorkerItem.vue';
import ToggleButton from 'components/button/ToggleButton.vue';
import FormAbout from 'components/05_quotation/FormAbout.vue';
import SelectZone from 'components/shared/SelectZone.vue';
import PersonCard from 'components/shared/PersonCard.vue';
import { AddButton, SaveButton } from 'components/button';
import ProductServiceForm from './ProductServiceForm.vue';
import QuotationFormInfo from './QuotationFormInfo.vue';
import ProfileBanner from 'components/ProfileBanner.vue';
import DialogForm from 'components/DialogForm.vue';
import SideMenu from 'components/SideMenu.vue';
import {
  uploadFileListEmployee,
  columnsAttachment,
} from 'src/pages/03_customer-management/constant';

defineProps<{
  readonly?: boolean;
}>();

type Node = {
  [key: string]: any;
  opened?: boolean;
  checked?: boolean;
  bg?: string;
  fg?: string;
  icon?: string;
  children?: Node[];
};

type ProductGroupId = string;
type Id = string;

const productServiceStore = useProductServiceStore();
const employeeFormStore = useEmployeeForm();
const customerStore = useCustomerStore();
const quotationForm = useQuotationForm();
const employeeStore = useEmployeeStore();
const optionStore = useOptionStore();
const ocrStore = useOcrStore();
const { locale } = useI18n();
const $q = useQuasar();

const { currentFormData: quotationFormData } = storeToRefs(quotationForm);

const refSelectZoneEmployee = ref<InstanceType<typeof SelectZone>>();
const selectedBranchIssuer = ref('');
const selectedCustomer = ref('');
const toggleWorker = ref(true);
const rows = ref<Node[]>([]);
const branchId = ref('');
const date = ref();

const preSelectedWorker = ref<Employee[]>([]);
const selectedWorker = ref<Employee[]>([]);
const workerList = ref<Employee[]>([]);
const newWorkerList = ref<EmployeeWorker[]>([]);

const agentPrice = ref(false);
const summaryPrice = ref<{
  totalPrice: number;
  totalDiscount: number;
  vat: number;
  finalPrice: number;
}>({
  totalPrice: 0,
  totalDiscount: 0,
  vat: 0,
  finalPrice: 0,
});

const quotationNo = ref('');
const payBank = ref('');

const pageState = reactive({
  hideStat: false,
  inputSearch: '',
  statusFilter: 'all',
  fieldSelected: [],
  gridView: false,
  isLoaded: false,

  currentTab: 'all',
  addModal: false,
  quotationModal: false,
  employeeModal: false,
  productServiceModal: false,
});

const productList = ref<Partial<Record<ProductGroupId, Product[]>>>({});
const serviceList = ref<Partial<Record<ProductGroupId, Service[]>>>({});
const productGroup = ref<ProductGroup[]>([]);

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

const product = ref<Record<Id, Product>>({});
const service = ref<Record<Id, Service>>({});

const selectedGroupSub = ref<'product' | 'service' | null>(null);
const selectedGroup = ref<ProductGroup | null>(null);

const selectedProductServiceId = ref('');

const formDataEmployee = ref<EmployeeWorker>({
  alienReferencNumber: '',
  documentExpireDate: new Date(),
  lastNameEN: '',
  lastName: '',
  middleNameEN: '',
  middleName: '',
  firstNameEN: '',
  firstName: '',
  namePrefix: '',
  nationality: '',
  gender: '',
  dateOfBirth: new Date(),
});

const productServiceList = ref<
  Required<QuotationPayload['productServiceList'][number]>[]
>([]);

async function getAllProduct(
  groupId: string,
  opts?: { force?: false; page?: number; pageSize?: number },
) {
  selectedGroupSub.value = 'product';
  if (!opts?.force && productList.value[groupId] !== undefined) return;
  const ret = await productServiceStore.fetchListProduct({
    page: opts?.page ?? 1,
    pageSize: opts?.pageSize ?? 9999,
    productGroupId: groupId,
  });
  if (ret) productList.value[groupId] = ret.result;
}

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

  employeeFormState.value.dialogModal = false;
}

async function getAllService(
  groupId: string,
  opts?: { force?: false; page?: number; pageSize?: number },
) {
  selectedGroupSub.value = 'service';
  if (!opts?.force && serviceList.value[groupId] !== undefined) return;
  const ret = await productServiceStore.fetchListService({
    page: opts?.page ?? 1,
    pageSize: opts?.pageSize ?? 9999,
    productGroupId: groupId,
    fullDetail: true,
  });
  if (ret) serviceList.value[groupId] = ret.result;
}

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

async function triggerSelectEmployeeDialog() {
  pageState.employeeModal = true;
  await nextTick();
  refSelectZoneEmployee.value?.assignSelect(
    preSelectedWorker.value,
    selectedWorker.value,
  );
}

function triggerProductServiceDialog() {
  pageState.productServiceModal = true;
}

function toggleDeleteProduct(index: number) {
  deleteItem(productServiceList.value, index);
  console.log(index);
}

function convertToTable(nodes: Node[]) {
  const _recursive = (v: Node): Node | Node[] => {
    if (v.checked && v.children) return v.children.flatMap(_recursive);
    if (v.checked) return v;
    return [];
  };
  pageState.productServiceModal = false;
  productServiceList.value = nodes.flatMap(_recursive).map((v) => v.value);
}

function convertEmployeeToTable() {
  refSelectZoneEmployee.value?.assignSelect(
    selectedWorker.value,
    preSelectedWorker.value,
  );
  pageState.employeeModal = false;
}

function changeMode(mode: string) {
  if (mode === 'light') {
    localStorage.setItem('currentTheme', 'light');
    $q.dark.set(false);
    return;
  }

  if (mode === 'dark') {
    localStorage.setItem('currentTheme', 'dark');
    $q.dark.set(true);
    return;
  }

  if (mode === 'baseOnDevice') {
    localStorage.setItem('currentTheme', 'baseOnDevice');
    if (
      window.matchMedia &&
      window.matchMedia('(prefers-color-scheme: dark)').matches
    ) {
      $q.dark.set(true);
    } else {
      $q.dark.set(false);
    }
    return;
  }
}

onMounted(async () => {
  // get language
  const getCurLang = localStorage.getItem('currentLanguage');
  if (getCurLang === 'English') {
    locale.value = 'eng';
    setLocale('en-gb');
  }
  if (getCurLang === 'ไทย') {
    locale.value = 'tha';
    setLocale('th');
  }

  // get theme
  const getCurTheme = localStorage.getItem('currentTheme');
  if (
    getCurTheme === 'light' ||
    getCurTheme === 'dark' ||
    getCurTheme === 'baseOnDevice'
  ) {
    changeMode(getCurTheme);
  } else {
    changeMode('light');
  }

  // get query string
  const urlParams = new URLSearchParams(window.location.search);
  branchId.value = urlParams.get('branchId') || '';

  const price = urlParams.get('agentPrice');
  agentPrice.value = price === 'true' ? true : false;

  date.value = Date.now();

  quotationFormData.value.customerBranchId =
    urlParams.get('customerBranchId') || '';

  // fetch option
  const resultOption = await fetch('/option/option.json');
  const rawOption = await resultOption.json();
  if (locale.value === 'eng') optionStore.globalOption = rawOption.eng;
  if (locale.value === 'tha') optionStore.globalOption = rawOption.tha;

  const ret = await productServiceStore.fetchListProductService({
    page: 1,
    pageSize: 9999,
  });
  if (ret) productGroup.value = ret.result;

  if (quotationFormData.value.customerBranchId) {
    const retEmp = await customerStore.fetchBranchEmployee(
      quotationFormData.value.customerBranchId,
    );
    if (retEmp) workerList.value = workerList.value = retEmp.data.result;
  }

  pageState.isLoaded = true;
});

watch(
  () => quotationFormData.value.customerBranchId,
  async (v) => {
    const url = new URL(window.location.href);
    url.searchParams.set('customerBranchId', v);
    history.pushState({}, '', url.toString());

    if (!v) return;
    const retEmp = await customerStore.fetchBranchEmployee(v);
    if (retEmp) {
      workerList.value = workerList.value = retEmp.data.result;
    }
  },
);

watch(
  () => branchId.value,
  async (v) => {
    if (!pageState.isLoaded) return;
    const url = new URL(window.location.href);
    url.searchParams.set('branchId', v);
    history.pushState({}, '', url.toString());
    quotationFormData.value.customerBranchId = '';
  },
);
</script>

<template>
  <div class="fullscreen column surface-0">
    <div class="color-bar">
      <div class="blue-segment"></div>
      <div class="orange-segment"></div>
      <div class="gray-segment"></div>
    </div>

    <header class="row q-pa-md items-center">
      <div style="flex: 1" class="row items-center">
        <q-img src="/icons/favicon-512x512.png" width="4rem" />
        <span class="column text-h6 text-bold q-ml-md">
          {{ $t('quotation.title') }}
          <span class="text-caption text-regular app-text-muted">
            {{
              $t('quotation.processOn', {
                msg: `${dateFormat(date, true)} ${dateFormat(date, true, true)}`,
              })
            }}
          </span>
        </span>
      </div>
      <FormAbout
        class="col-4"
        input-only
        v-model:branch-id="branchId"
        v-model:customer-branch-id="quotationFormData.customerBranchId"
        @add-customer="triggerSelectTypeCustomerd()"
      />
    </header>

    <article
      class="row col"
      style="flex-grow: 1; overflow-y: hidden"
      :style="{
        overflowY: $q.screen.gt.sm ? 'hidden' : 'auto',
      }"
    >
      <section
        class="col-12 col-sm-9 row"
        style="padding: var(--size-3); overflow-y: auto"
        :style="{
          paddingRight: $q.screen.gt.sm ? 'var(--size-2)' : 'var(--size-3)',
          maxHeight: $q.screen.gt.sm ? '100%' : undefined,
        }"
      >
        <div class="col q-gutter-y-md">
          <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="surface-1"
          >
            <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.employeeList') }}
                  </span>
                  <ToggleButton class="q-mr-sm" v-model="toggleWorker" />
                  {{
                    toggleWorker
                      ? $t('general.specify')
                      : $t('general.noSpecify')
                  }}
                </div>
                <nav class="q-ml-auto">
                  <AddButton
                    icon-only
                    @click.stop="triggerSelectEmployeeDialog"
                  />
                </nav>
              </section>
            </template>

            <div class="surface-1 q-pa-md full-width">
              <WorkerItem
                :employee-amount="selectedWorker.length"
                fallback-img="/images/employee-avatar.png"
                :rows="
                  selectedWorker.map((e: Employee) => ({
                    foreignRefNo: '123456789',
                    employeeName:
                      $i18n.locale === 'eng'
                        ? `${e.firstNameEN} ${e.lastNameEN}`
                        : `${e.firstName} ${e.lastName}`,
                    birthDate: dateFormat(e.dateOfBirth),
                    gender: e.gender,
                    age: calculateAge(e.dateOfBirth),
                    nationality: optionStore.mapOption(e.nationality),
                    documentExpireDate: '1234',
                    imgUrl: `${baseUrl}/customer/${e.id}/image/${e.selectedImage}`,
                    status: e.status,
                  }))
                "
                @delete="(i) => deleteItem(selectedWorker, i)"
              />
            </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="surface-1"
          >
            <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" style="font-size: 18px">
                    {{ $t('quotation.productList') }}
                  </span>
                </div>
                <nav class="q-ml-auto">
                  <AddButton
                    icon-only
                    class="q-ml-auto"
                    @click.stop="triggerProductServiceDialog"
                  />
                </nav>
              </section>
            </template>
            <div class="surface-1 q-pa-md full-width">
              <ProductItem
                :agent-price="agentPrice"
                @delete="toggleDeleteProduct"
                v-model:rows="productServiceList"
                v-model:summary-price="summaryPrice"
              />
            </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="surface-1"
          >
            <template v-slot:header>
              <div class="row full-width items-center q-pr-md q-py-sm">
                <span class="text-weight-medium" style="font-size: 18px">
                  {{ $t('general.remark') }}
                </span>
              </div>
            </template>
            <div class="surface-1 q-pa-md full-width">
              <q-editor
                dense
                :model-value="''"
                min-height="5rem"
                class="full-width"
                toolbar-bg="input-border"
                style="cursor: auto; color: var(--foreground)"
                :flat="!readonly"
                :readonly="readonly"
                :style="`width: ${$q.screen.gt.xs ? '100%' : '63vw'}`"
                :toolbar="[['left', 'center', 'justify'], ['clip']]"
                :toolbar-toggle-color="readonly ? 'disabled' : 'primary'"
                :toolbar-color="
                  readonly ? 'disabled' : $q.dark.isActive ? 'white' : ''
                "
                :definitions="{
                  clip: {
                    icon: 'mdi-paperclip',
                    tip: 'Upload',
                    handler: () => console.log('upload'),
                  },
                }"
              />
            </div>
          </q-expansion-item>
        </div>
      </section>

      <div
        class="col-12 col-sm-3"
        style="padding: var(--size-3); overflow-y: auto"
        :style="{
          paddingLeft: $q.screen.gt.sm ? 'var(--size-1)' : 'var(--size-3)',
          maxHeight: $q.screen.gt.sm ? '100%' : undefined,
        }"
      >
        <QuotationFormInfo
          v-model:urgent="quotationFormData.urgent"
          v-model:quotation-no="quotationNo"
          v-model:actor="quotationFormData.actorName"
          v-model:work-name="quotationFormData.workName"
          v-model:contactor="quotationFormData.contactName"
          v-model:telephone="quotationFormData.contactTel"
          v-model:document-receive-point="
            quotationFormData.documentReceivePoint
          "
          v-model:due-date="quotationFormData.dueDate"
          v-model:pay-type="quotationFormData.payCondition"
          v-model:pay-bank="payBank"
          v-model:pay-split-count="quotationFormData.paySplitCount"
          v-model:pay-split="quotationFormData.paySplit"
          :readonly
          v-model:summary-price="summaryPrice"
        />
      </div>
    </article>

    <footer class="surface-1 q-pa-md">
      <div class="row full-width justify-between">
        <q-btn dense outline color="primary" class="rounded" padding="2px 8px">
          <q-icon name="mdi-play-box-outline" size="xs" class="q-mr-xs" />
          {{ $t('general.view', { msg: $t('general.example') }) }}
        </q-btn>
        <SaveButton solid />
      </div>
    </footer>

    <!-- SEC: Dialog -->
    <!-- add employee quotation -->
    <DialogForm
      :title="$t('general.select', { msg: $t('quotation.employeeList') })"
      v-model:modal="pageState.employeeModal"
      :submit-label="$t('general.select', { msg: $t('quotation.employee') })"
      submit-icon="mdi-check"
      height="75vh"
      :submit="() => convertEmployeeToTable()"
      :close="
        () => {
          (preSelectedWorker = []), (pageState.employeeModal = false);
        }
      "
    >
      <section class="col row scroll">
        <SelectZone
          ref="refSelectZoneEmployee"
          v-model:selected-item="preSelectedWorker"
          :items="workerList"
          :new-items="newWorkerList"
        >
          <template #top>
            <AddButton
              icon-only
              @click="
                () => {
                  triggerCreateEmployee();
                }
              "
            />
          </template>
          <template #data="{ item }">
            <PersonCard
              noAction
              prefixId="asda"
              class="full-width"
              :data="{
                name:
                  $i18n.locale === 'eng'
                    ? `${item.firstNameEN} ${item.lastNameEN}`
                    : `${item.firstName} ${item.lastName}`,
                code: item.code,
                female: item.gender === 'female',
                male: item.gender === 'male',
                img: `${baseUrl}/customer/${item.id}/image/${item.selectedImage}`,
                fallbackImg: '/images/employee-avatar.png',
                detail: [
                  {
                    icon: 'mdi-passport',
                    value: optionStore.mapOption(item.nationality),
                  },
                  {
                    icon: 'mdi-clock-outline',
                    value: calculateAge(item.dateOfBirth),
                  },
                ],
              }"
            ></PersonCard>
          </template>

          <template #newData="{ item }">
            <PersonCard
              noAction
              prefixId="asda"
              class="full-width"
              :data="{
                name:
                  $i18n.locale === 'eng'
                    ? `${item.firstNameEN} ${item.lastNameEN}`
                    : `${item.firstName} ${item.lastName}`,
                code: item.code,
                female: item.gender === 'female',
                male: item.gender === 'male',
                img: `${baseUrl}/customer/${item.id}/image/${item.selectedImage}`,
                fallbackImg: '/images/employee-avatar.png',
                detail: [
                  {
                    icon: 'mdi-passport',
                    value: optionStore.mapOption(item.nationality),
                  },
                  {
                    icon: 'mdi-clock-outline',
                    value: calculateAge(item.dateOfBirth),
                  },
                ],
              }"
            ></PersonCard>
          </template>
        </SelectZone>
      </section>
    </DialogForm>

    <!-- add product service -->
    <ProductServiceForm
      v-model="pageState.productServiceModal"
      v-model:product-group="productGroup"
      v-model:product-list="productList"
      v-model:service-list="serviceList"
      :agent-price="agentPrice"
      @submit="convertToTable"
      @select-group="
        async (id) => {
          await getAllService(id);
          await getAllProduct(id);
        }
      "
    ></ProductServiceForm>
  </div>

  <!-- 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="
      () => {
        newWorkerList.push(formDataEmployee);
        quotationForm.injectNewEmployee(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
        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.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:alien-reference-number="
              formDataEmployee.alienReferencNumber
            "
            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:current-id="currentFromDataEmployee.id"
            v-model="currentFromDataEmployee.file"
            hide-action
            :group-list="uploadFileListEmployee"
            :menu="uploadFileListEmployee"
            :columns="columnsAttachment"
            :ocr="
              async (group, file) => {
                const res = await ocrStore.sendOcr({
                  file: file,
                  category: group,
                });

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

                  return tempValue;
                }
                return { status: false, group, meta: [] };
              }
            "
            :auto-save="currentFromDataEmployee.id !== ''"
            :download="
              (obj) => {
                employeeStore.getFile({
                  parentId: currentFromDataEmployee.id || '',
                  group: obj.group,
                  fileId: obj._meta.id,
                });
              }
            "
            :delete-item="
              async (obj) => {
                const res = await employeeStore.delMeta({
                  parentId: currentFromDataEmployee.id || '',
                  group: obj.group,
                  metaId: obj._meta.id,
                });

                if (res) {
                  return true;
                }
                return false;
              }
            "
            :save="
              async (
                group: 'passport' | 'visa',
                _meta: any,
                file: File | undefined,
              ) => {
                if (file !== undefined && currentFromDataEmployee.id) {
                  const res = await employeeStore.postMeta({
                    parentId: currentFromDataEmployee.id || '',
                    group,
                    meta: _meta,
                    file,
                  });

                  if (res) {
                    return true;
                  }
                } else {
                  const { id, employeeId, createdAt, updatedAt, ...payload } =
                    _meta;
                  const res = await employeeStore.putMeta({
                    parentId: currentFromDataEmployee.id || '',
                    group,
                    metaId: _meta.id,
                    meta: payload,
                    file,
                  });
                  if (res) {
                    return true;
                  }
                }

                return false;
              }
            "
            :get-file-list="
              async (group: 'passport' | 'visa') => {
                if (!!currentFromDataEmployee.id) {
                  const resMeta = await employeeStore.getMetaList({
                    parentId: currentFromDataEmployee.id,
                    group,
                  });

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

                  return await waitAll(tempValue);
                }
                return [];
              }
            "
          >
            <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:passport-type="meta.type"
                v-model:passport-number="meta.number"
                v-model:passport-issue-date="meta.issueDate"
                v-model:passport-expiry-date="meta.expireDate"
                v-model:passport-issuing-place="meta.issuePlace"
                v-model:passport-issuing-country="meta.issueCountry"
              />
              <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:visa-type="meta.type"
                v-model:visa-number="meta.number"
                v-model:visa-issue-date="meta.issueDate"
                v-model:visa-expiry-date="meta.expireDate"
                v-model:visa-issuing-place="meta.issuePlace"
              />

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

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

<style scoped>
.worker-list > :deep(*:not(:last-child)) {
  margin-bottom: var(--size-2);
}

.icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1/1;
  font-size: 1.5rem;
  padding: var(--size-1);
  border-radius: var(--radius-2);
}

.bg-color-orange {
  --_color: var(--yellow-7-hsl);
  color: white;
  background: hsla(var(--_color));
}

.dark .bg-color-orange {
  --_color: var(--orange-6-hsl);
}

.bg-color-orange-light {
  --_color: var(--yellow-7-hsl);
  background: hsla(var(--_color) / 0.2);
}
.dark .bg-color-orange {
  --_color: var(--orange-6-hsl / 0.2);
}

.color-bar {
  width: 100%;
  height: 1vh;
  background: linear-gradient(
    90deg,
    rgba(245, 159, 0, 1) 0%,
    rgba(255, 255, 255, 1) 77%,
    rgba(204, 204, 204, 1) 100%
  );
  display: flex;
  overflow: hidden;
}

.blue-segment {
  background-color: var(--yellow-7);
  flex-grow: 4;
}

.orange-segment {
  background-color: hsla(var(--yellow-7-hsl) / 0.2);
  flex-grow: 0.5;
}

.gray-segment {
  background-color: #ccc;
  flex-grow: 1;
}

.blue-segment,
.orange-segment,
.gray-segment {
  transform: skewX(-60deg);
}

:deep(i.q-icon.mdi.mdi-chevron-down-circle.q-expansion-item__toggle-icon) {
  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;
}
</style>
