<script lang="ts" setup>
import { useI18n } from 'vue-i18n';
import { storeToRefs } from 'pinia';
import { useQuasar } from 'quasar';
import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue';
import {
  dialogCheckData,
  dialogWarningClose,
  formatNumberDecimal,
} from 'stores/utils';
import { ProductTree, quotationProductTree } from './utils';

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

// NOTE  Import Types
import { View } from './types.ts';
import {
  PayCondition,
  PaySplit,
  ProductServiceList,
  QuotationPayload,
} from 'src/stores/quotations/types';
import { EmployeeWorker } from 'src/stores/quotations/types';
import { Employee } from 'src/stores/employee/types';
import { Receipt } from 'src/stores/payment/types';
import {
  ProductGroup,
  Product,
  Service,
} from 'src/stores/product-service/types';

// NOTE: Import Components
import SelectInput from 'components/shared/SelectInput.vue';
import SwitchItem from 'components/shared/SwitchItem.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 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 ImportWorker from './ImportWorker.vue';
import {
  AddButton,
  SaveButton,
  EditButton,
  UndoButton,
  DeleteButton,
  CloseButton,
  MainButton,
} from 'components/button';
import QuotationFormReceipt from './QuotationFormReceipt.vue';
import QuotationFormProductSelect from './QuotationFormProductSelect.vue';
import QuotationFormInfo from './QuotationFormInfo.vue';
import QuotationFormWorkerAddDialog from './QuotationFormWorkerAddDialog.vue';
import ProfileBanner from 'components/ProfileBanner.vue';
import DialogForm from 'components/DialogForm.vue';
import {
  uploadFileListEmployee,
  columnsAttachment,
} from 'src/pages/03_customer-management/constant';
import UploadFileSection from 'src/components/upload-file/UploadFileSection.vue';

import { columnPaySplit } from './constants';
import { precisionRound } from 'src/utils/arithmetic';
import { useConfigStore } from 'src/stores/config';
import QuotationFormMetadata from './QuotationFormMetadata.vue';
import BadgeComponent from 'src/components/BadgeComponent.vue';
import PaymentForm from './PaymentForm.vue';
import { api } from 'src/boot/axios';
import { RouterLink, useRoute } from 'vue-router';
import { initLang, initTheme } from 'src/utils/ui';
import { convertTemplate } from 'src/utils/string-template';

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

type ProductGroupId = string;

const employeeStore = useEmployeeStore();
const route = useRoute();
const useReceiptStore = useReceipt();
const configStore = useConfigStore();
const productServiceStore = useProductServiceStore();
const employeeFormStore = useEmployeeForm();
const customerStore = useCustomerStore();
const quotationForm = useQuotationForm();
const quotationStore = useQuotationStore();
const invoiceStore = useInvoice();
const optionStore = useOptionStore();
const { t, locale } = useI18n();
const ocrStore = useOcrStore();
const $q = useQuasar();
const openQuotation = ref<boolean>(false);

const {
  currentFormData: quotationFormData,
  currentFormState: quotationFormState,

  invoicePayload: invoiceFormData,

  newWorkerList,
  fileItemNewWorker,
  quotationFull,
} = storeToRefs(quotationForm);

const { data: config } = storeToRefs(configStore);

const receiptList = ref<Receipt[]>([]);

const templateForm = ref<string>('');
const templateFormOption = ref<{ label: string; value: string }[]>([]);

const refSelectZoneEmployee = ref<InstanceType<typeof SelectZone>>();
const mrz = ref<Awaited<ReturnType<typeof parseResultMRZ>>>();
const toggleWorker = ref(true);
const tempTableProduct = ref<ProductServiceList[]>([]);
const tempPaySplitCount = ref(0);
const tempPaySplit = ref<
  { no: number; amount: number; name?: string; invoice?: boolean }[]
>([]);
const currentQuotationId = ref<string | undefined>(undefined);
const date = ref();
const preSelectedWorker = ref<Employee[]>([]);
const readonly = computed(() => {
  return !(
    quotationFormState.value.mode === 'create' ||
    quotationFormState.value.mode === 'edit'
  );
});

const selectedWorker = ref<
  (Employee & {
    attachment?: {
      name?: string;
      group?: string;
      url?: string;
      file?: File;
      _meta?: Record<string, any>;
    }[];
  })[]
>([]);
const workerList = ref<Employee[]>([]);

const selectedProductGroup = ref('');
const selectedInstallmentNo = ref<number[]>([]);
const installmentAmount = ref<number>(0);
const selectedInstallment = ref();
const agentPrice = ref(false);
const attachmentData = ref<
  {
    name: string;
    progress: number;
    loaded: number;
    total: number;
    url?: string;
  }[]
>([]);

const getToolbarConfig = computed(() => {
  const toolbar = [['left', 'center', 'justify'], ['toggle'], ['clip']];
  if (readonly.value) {
    return toolbar.filter((item) => !item.includes('toggle'));
  }

  return toolbar;
});

function getPrice(
  list: typeof productServiceList.value,
  filterHook?: (
    item: (typeof productServiceList.value)[number],
    index?: number,
  ) => boolean,
) {
  if (filterHook) list = list.filter(filterHook);

  return list.reduce(
    (a, c) => {
      if (
        selectedInstallmentNo.value.length > 0 &&
        c.installmentNo &&
        !selectedInstallmentNo.value.includes(c.installmentNo)
      ) {
        return a;
      }

      const price = precisionRound(c.pricePerUnit * c.amount);
      const vat =
        precisionRound(
          (c.pricePerUnit * (c.discount ? c.amount : 1) - c.discount) *
            (config.value?.vat || 0.07),
        ) * (!c.discount ? c.amount : 1);

      a.totalPrice = precisionRound(a.totalPrice + price);
      a.totalDiscount = precisionRound(a.totalDiscount + Number(c.discount));
      a.vat = c.product.calcVat ? precisionRound(a.vat + vat) : a.vat;
      a.vatExcluded = c.product.calcVat
        ? a.vatExcluded
        : precisionRound(a.vat + vat);
      a.finalPrice = precisionRound(
        a.totalPrice -
          a.totalDiscount +
          a.vat -
          Number(quotationFormData.value.discount || 0),
      );

      return a;
    },
    {
      totalPrice: 0,
      totalDiscount: 0,
      vat: 0,
      vatExcluded: 0,
      finalPrice: 0,
    },
  );
}

const summaryPrice = computed(() => getPrice(productServiceList.value));

const payBank = ref('');

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

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

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 selectedGroupSub = ref<'product' | 'service' | null>(null);
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 productServiceList = ref<
  Required<QuotationPayload['productServiceList'][number]>[]
>([]);
const productService = computed(() => {
  return selectedInstallmentNo.value.length > 0
    ? productServiceList.value.filter((v) => {
        return (
          v.installmentNo &&
          selectedInstallmentNo.value.includes(v.installmentNo)
        );
      })
    : productServiceList.value;
});

function isIssueInvoice() {
  return quotationFormData.value.paySplit.some(
    (value) =>
      selectedInstallmentNo.value.includes(value.no) &&
      value.invoiceId !== undefined,
  );
}

async function fetchStatus() {
  statusQuotationForm.value = [
    {
      title: 'Issued',
      status: getStatus(quotationFormData.value.quotationStatus, 0, -1),
      active: () => view.value === View.Quotation,
      handler: () => (
        (view.value = View.Quotation),
        (code.value = ''),
        (selectedInstallmentNo.value = []),
        (selectedInstallment.value = [])
      ),
    },
    {
      title: 'Accepted',
      status: getStatus(quotationFormData.value.quotationStatus, 1, 0),
      active: () => view.value === View.Accepted,
      handler: () => ((view.value = View.Accepted), (code.value = '')),
    },
    {
      title: 'Invoice',
      status:
        quotationFormData.value.payCondition === 'Full'
          ? getStatus(quotationFormData.value.quotationStatus, 3, 1)
          : getStatus(quotationFormData.value.quotationStatus, 4, 1),
      active: () =>
        view.value === View.Invoice || view.value === View.InvoicePre,
      handler: () => {
        selectedInstallmentNo.value = [];
        selectedInstallment.value = [];
        view.value =
          quotationFormData.value.payCondition === 'Full' ||
          quotationFormData.value.payCondition === 'BillFull'
            ? View.Invoice
            : View.InvoicePre;

        if (
          quotationFormData.value.payCondition === 'Full' ||
          quotationFormData.value.payCondition === 'BillFull'
        ) {
          getInvoiceCodeFullPay();
        }
      },
    },
    {
      title: 'PaymentInProcess',
      status: getStatus(quotationFormData.value.quotationStatus, 4, 1),
      active: () =>
        view.value === View.Payment || view.value === View.PaymentPre,
      handler: () => {
        view.value =
          quotationFormData.value.payCondition === 'Full' ||
          quotationFormData.value.payCondition === 'BillFull'
            ? View.Payment
            : View.PaymentPre;
      },
    },
    {
      title: 'Receipt',
      status: getStatus(quotationFormData.value.quotationStatus, 4, 1),
      active: () => view.value === View.Receipt,
      handler: () => {
        fetchReceipt();
        view.value = View.Receipt;
        code.value = '';
      },
    },
    {
      title: 'ProcessComplete',
      status: getStatus(quotationFormData.value.quotationStatus, 5, 4),
      active: () => view.value === View.Complete,
      handler: () => {
        view.value = View.Complete;
      },
    },
  ];
}

async function fetchQuotation() {
  if (
    (!!currentQuotationId.value || !!quotationFormData.value.id) &&
    quotationFormState.value.mode &&
    quotationFormState.value.mode !== 'create'
  ) {
    const id = currentQuotationId.value || quotationFormData.value.id || '';

    await quotationForm.assignFormData(id, quotationFormState.value.mode);
    tempPaySplitCount.value = quotationFormData.value.paySplitCount || 0;
    tempPaySplit.value = JSON.parse(
      JSON.stringify(quotationFormData.value.paySplit),
    );
  }

  assignWorkerToSelectedWorker();

  await assignToProductServiceList();

  await fetchStatus();
}

async function fetchReceipt() {
  const res = await useReceiptStore.getReceiptList({
    quotationId: quotationFormData.value.id,
  });

  if (res) {
    receiptList.value = res.result;
  }
}

async function closeTab() {
  if (quotationFormState.value.mode === 'edit') {
    quotationForm.resetForm();
    await assignToProductServiceList();
  } else {
    dialogWarningClose(t, {
      message: t('dialog.message.close'),
      action: () => {
        window.close();
      },
      cancel: () => {},
    });
  }
}

function closeAble() {
  return window.opener !== null;
}

async function assignToProductServiceList() {
  const ret = await productServiceStore.fetchProductGroup({
    page: 1,
    pageSize: 9999,
  });

  if (ret) {
    productGroup.value = ret.result;

    productServiceList.value = quotationFormData.value.productServiceList.map(
      (v) => ({
        installmentNo: v.installmentNo || 0,
        workerIndex: v.workerIndex || [0],
        vat: v.vat || 0,
        pricePerUnit: v.pricePerUnit || 0,
        discount: v.discount || 0,
        amount: v.amount || 0,
        product: v.product,
        work: v.work || null,
        service: v.service || null,
      }),
    );
    selectedProductGroup.value =
      quotationFormData.value.productServiceList[0]?.product.productGroup?.id ||
      '';
  }
}

async function submitAccepted() {
  dialog({
    color: 'info',
    icon: 'mdi-account-check',
    title: t('dialog.title.confirmQuotationAccept'),
    actionText: t('general.confirm'),
    persistent: true,
    message: t('dialog.message.quotationAccept'),
    action: async () => {
      if (!quotationFormData.value.id) return;

      const res = await quotationForm.accepted(quotationFormData.value.id);
      if (res) {
        await fetchQuotation();
      }
    },
    cancel: () => {},
  });
}

async function convertInvoiceToSubmit() {
  if (quotationFormData.value.id) {
    invoiceFormData.value = {
      installmentNo: selectedInstallmentNo.value,
      amount:
        quotationFormData.value.payCondition === 'SplitCustom'
          ? installmentAmount.value
          : summaryPrice.value.finalPrice,
      quotationId: quotationFormData.value.id,
    };

    const res = await quotationForm.submitInvoice();
    if (res) {
      await fetchQuotation();
      view.value = View.Payment;
    }
  }
}

async function convertDataToFormSubmit() {
  quotationFormData.value.productServiceList = JSON.parse(
    JSON.stringify(
      productServiceList.value.map((v) => ({
        installmentNo: v.installmentNo,
        workerIndex: v.workerIndex,
        discount: v.discount,
        amount: v.amount,
        product: v.product,
        work: v.work,
        service: v.service,
      })),
    ),
  );

  selectedWorker.value.forEach((v, i) => {
    if (v.attachment !== undefined) {
      v.attachment.forEach((value) => {
        fileItemNewWorker.value.push({
          employeeIndex: i,
          name: value.name,
          group: value.group as 'passport' | 'visa' | 'in-country-notice',
          url: value.url,
          file: value.file,
          _meta: value._meta,
        });
      });
    }
  });

  quotationFormData.value.worker = JSON.parse(
    JSON.stringify(
      selectedWorker.value.map((v) => {
        if (v.id === undefined) {
          const { attachment, ...payload } = v;
          return payload;
        } else {
          return v.id;
        }
      }),
    ),
  );

  quotationFormData.value.paySplit = JSON.parse(
    JSON.stringify(
      quotationFormData.value.paySplit.map((p) => ({ ...p, no: undefined })),
    ),
  );

  quotationFormData.value = {
    id: quotationFormData.value.id,
    workerMax: quotationFormData.value.workerMax,
    productServiceList: quotationFormData.value.productServiceList,
    urgent: quotationFormData.value.urgent,
    customerBranchId: quotationFormData.value.customerBranchId,
    registeredBranchId: quotationFormData.value.registeredBranchId,
    worker: quotationFormData.value.worker,
    payBillDate: quotationFormData.value.payBillDate,
    paySplit: quotationFormData.value.paySplit,
    paySplitCount: quotationFormData.value.paySplitCount,
    payCondition: quotationFormData.value.payCondition,
    dueDate: quotationFormData.value.dueDate,
    contactTel: quotationFormData.value.contactTel,
    contactName: quotationFormData.value.contactName,
    workName: quotationFormData.value.workName,
    _count: quotationFormData.value._count,
    status: quotationFormData.value.status,
    discount: quotationFormData.value.discount,
    remark: quotationFormData.value.remark || '',
  };

  const res = await quotationForm.submitQuotation();

  if (res === true) {
    quotationFormState.value.mode = 'info';
    localStorage.setItem(
      'new-quotation',
      JSON.stringify({
        quotationId: quotationFormData.value.id,
        customerBranchId: quotationFormData.value.customerBranchId,
        branchId: quotationFormData.value.registeredBranchId,
        agentPrice: agentPrice.value,
        statusDialog: 'info',
      }),
    );
    await fetchQuotation();
  }
}

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

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

  employeeFormState.value.dialogModal = false;
}

async function getAllService(
  groupId: string,
  opts?: { force?: boolean; page?: number; pageSize?: number; query?: string },
) {
  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,
    query: opts?.query,

    fullDetail: true,
  });
  if (ret) serviceList.value[groupId] = ret.result;
}

function triggerCreateEmployee() {
  employeeFormStore.resetFormDataEmployee(true);
  setDefaultFormEmployee();
  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 handleChangePayType(type: PayCondition) {
  if (
    type === 'Split' &&
    tempPaySplitCount.value &&
    tempPaySplit.value &&
    tempTableProduct.value
  ) {
    quotationFormData.value.paySplitCount = tempPaySplitCount.value;
    quotationFormData.value.paySplit = JSON.parse(
      JSON.stringify(tempPaySplit.value),
    );
    productServiceList.value = productServiceList.value.map((item, index) => ({
      ...item,
      installmentNo: tempTableProduct.value[index].installmentNo || 0,
    }));
  }
}

function handleUpdateProductTable(
  data: QuotationPayload['productServiceList'][number],
  opt?: {
    newInstallmentNo: number;
  },
) {
  // calc price
  const calc = (c: QuotationPayload['productServiceList'][number]) => {
    const pricePerUnit = c.pricePerUnit || 0;
    const discount = c.discount || 0;

    return precisionRound(
      pricePerUnit * c.amount -
        discount +
        (c.product.calcVat
          ? (pricePerUnit * c.amount - discount) * (config.value?.vat || 0.07)
          : 0),
    );
  };

  // installment
  if (opt && opt.newInstallmentNo) {
    const oldInstallmentNo = JSON.parse(JSON.stringify(data.installmentNo));
    const oldPaySplit = quotationFormData.value.paySplit.find(
      (v) => v.no === oldInstallmentNo,
    );
    const newPaySplit = quotationFormData.value.paySplit.find(
      (v) => v.no === opt.newInstallmentNo,
    );

    if (oldPaySplit) oldPaySplit.amount = oldPaySplit.amount - calc(data);
    if (newPaySplit) newPaySplit.amount = newPaySplit.amount + calc(data);

    return;
  }

  // re calc price
  const currTempPaySplit = tempPaySplit.value.find(
    (v) => v.no === data.installmentNo,
  );
  const currPaySplit = quotationFormData.value.paySplit.find(
    (v) => v.no === data.installmentNo,
  );
  const targetPaySplit = productService.value.filter(
    (v) => v.installmentNo === data.installmentNo,
  );
  let targetPaySplitAmount: number[] = [];

  targetPaySplitAmount = targetPaySplit.map((c) => {
    return calc(c);
  });

  const totalSum = targetPaySplitAmount.reduce((sum, value) => sum + value, 0);
  if (currTempPaySplit && currPaySplit) {
    currTempPaySplit.amount = totalSum;
    currPaySplit.amount = totalSum;
  }
}

function toggleDeleteProduct(index: number) {
  const currProduct = productServiceList.value[index];
  let currPaySplit = quotationFormData.value.paySplit.find(
    (v) => v.no === currProduct.installmentNo,
  );
  let currTempPaySplit = tempPaySplit.value.find(
    (v) => v.no === currProduct.installmentNo,
  );

  // cal curr amount
  if (currPaySplit && currTempPaySplit) {
    const price = agentPrice.value
      ? currProduct.product.agentPrice
      : currProduct.product.price;
    const pricePerUnit = currProduct.product.vatIncluded
      ? precisionRound(price / (1 + (config.value?.vat || 0.07)))
      : price;
    const vat = precisionRound(
      (pricePerUnit * currProduct.amount - currProduct.discount) *
        (config.value?.vat || 0.07),
    );
    const finalPrice = precisionRound(
      pricePerUnit * currProduct.amount +
        vat -
        Number(currProduct.discount || 0),
    );

    currTempPaySplit.amount = currPaySplit.amount - finalPrice;
    currPaySplit.amount = currTempPaySplit.amount;
  }

  // product display
  productServiceList.value.splice(index, 1);
  productServiceList.value = [...productServiceList.value];

  // find split count
  tempPaySplitCount.value = Math.max(
    ...productServiceList.value.map((v) => v.installmentNo || 0),
  );
  quotationFormData.value.paySplitCount = tempPaySplitCount.value;

  // make split.length === split count
  tempPaySplit.value.splice(quotationFormData.value.paySplitCount);
  quotationFormData.value.paySplit.splice(
    quotationFormData.value.paySplitCount,
  );
}

async function assignWorkerToSelectedWorker() {
  selectedWorker.value = quotationFormData.value.worker;
}

function convertToTable(nodes: Node[]) {
  // TODO:
  const _recursive = (v: Node): Node | Node[] => {
    if (v.checked && v.children) return v.children.flatMap(_recursive);
    if (v.checked) return v;
    return [];
  };
  const list = nodes.flatMap(_recursive).map((v) => v.value);

  quotationFormData.value.paySplitCount = Math.max(
    ...list.map((v) => v.installmentNo || 0),
  );
  tempPaySplitCount.value = quotationFormData.value.paySplitCount;

  list.forEach((v) => {
    v.amount = Math.max(selectedWorker.value.length, 1);
    if (!v.workerIndex) v.workerIndex = [];
    for (let i = 0; i < selectedWorker.value.length; i++) {
      v.workerIndex.push(i);
    }

    if (!v.installmentNo) {
      v.installmentNo = quotationFormData.value.paySplitCount;
    }
  });

  productServiceList.value = list;
  tempTableProduct.value = JSON.parse(JSON.stringify(list));

  quotationFormData.value.paySplit = Array.apply(
    null,
    new Array(quotationFormData.value.paySplitCount),
  ).map((_, i) => ({
    no: i + 1,
    amount: getPrice(list, (v) => {
      return (
        v.installmentNo === i + 1 ||
        (i + 1 === quotationFormData.value.paySplitCount && !v.installmentNo)
      );
    }).finalPrice,
  }));

  tempPaySplit.value = JSON.parse(
    JSON.stringify(quotationFormData.value.paySplit),
  );
  pageState.productServiceModal = false;
}

function convertEmployeeToTable() {
  productServiceList.value.forEach((v) => {
    if (selectedWorker.value.length === 0 && v.amount === 1) v.amount -= 1;

    v.amount = Math.max(
      v.amount + preSelectedWorker.value.length - selectedWorker.value.length,
      1,
    );

    const oldWorkerId: string[] = [];
    const newWorkerIndex: number[] = [];

    selectedWorker.value.forEach((item, i) => {
      if (v.workerIndex.includes(i)) oldWorkerId.push(item.id);
    });
    preSelectedWorker.value.forEach((item, i) => {
      if (selectedWorker.value.find((n) => item.id === n.id)) return;
      newWorkerIndex.push(i);
    });

    v.workerIndex = oldWorkerId
      .map((id) => preSelectedWorker.value.findIndex((item) => item.id === id))
      .filter((idx) => idx !== -1)
      .concat(newWorkerIndex);
  });

  refSelectZoneEmployee.value?.assignSelect(
    selectedWorker.value,
    preSelectedWorker.value,
  );
  pageState.employeeModal = false;
  quotationFormData.value.workerMax = Math.max(
    quotationFormData.value.workerMax || 1,
    selectedWorker.value.length,
  );
}

async function triggerDelete(name: string) {
  await quotationStore.delAttachment({
    parentId: quotationFormData.value.id || '',
    name,
  });
  await getAttachment();
}

async function getAttachment() {
  const attachment = await quotationStore.listAttachment({
    parentId: quotationFormData.value.id || '',
  });

  if (attachment && attachment.length > 0) {
    attachmentData.value = attachmentData.value.filter((item) =>
      attachment.includes(item.name),
    );

    attachment.forEach((v) => {
      const exists = attachmentData.value.some((item) => item.name === v);

      if (!exists) {
        attachmentData.value.push({
          name: v,
          progress: 1,
          loaded: 0,
          total: 0,
          url: `quotation/${quotationFormData.value.id || ''}/attachment/${v}`,
        });
      }
    });
  } else attachmentData.value = [];
}

async function uploadAttachment(file?: File) {
  if (!file) return;
  if (!quotationFormData.value) return;
  attachmentData.value.push({
    name: file.name,
    progress: 0,
    loaded: 0,
    total: 0,
  });

  const ret = await quotationStore.putAttachment({
    parentId: quotationFormData.value.id || '',
    name: file.name,
    file: file,
    onUploadProgress: (e) => {
      attachmentData.value[attachmentData.value.length - 1] = {
        name: file.name,
        progress: e.progress || 0,
        loaded: e.loaded,
        total: e.total || 0,
        url: `quotation/${quotationFormData.value.id || ''}/attachment/${file.name}`,
      };
    },
  });
  if (ret) await getAttachment();
}

const sessionData = ref<Record<string, any>>();

onMounted(async () => {
  initTheme();
  initLang();

  await configStore.getConfig();

  sessionStorage.setItem(
    'new-quotation',
    localStorage.getItem('new-quotation') ||
      sessionStorage.getItem('new-quotation') ||
      '',
  );

  localStorage.removeItem('new-quotation');
  const payload = sessionStorage.getItem('new-quotation');

  if (!!payload) {
    const parsed = JSON.parse(payload);
    date.value = Date.now();
    quotationFormState.value.mode = parsed.statusDialog;
    quotationFormData.value.registeredBranchId = parsed.branchId;
    quotationFormData.value.customerBranchId = parsed.customerBranchId;
    currentQuotationId.value = parsed.quotationId;
    agentPrice.value = parsed.agentPrice;
    await fetchQuotation();
    await assignWorkerToSelectedWorker();
    sessionData.value = parsed;
  }

  await fetchStatus();

  if (quotationFormState.value.mode !== 'create') {
    await getAttachment();
  }

  pageState.isLoaded = true;

  if (route.query['tab'] === 'invoice') {
    view.value =
      quotationFormData.value.payCondition === 'Full' ||
      quotationFormData.value.payCondition === 'BillFull'
        ? View.Invoice
        : View.InvoicePre;
  }
  if (route.query['tab'] === 'receipt') {
    view.value = View.Receipt;
  }
});

watch(
  () => quotationFormData.value.quotationStatus,
  () => {
    fetchStatus();
  },
);

watch(
  () => quotationFormData.value.customerBranchId,
  async (v) => {
    if (!v) return;

    const retEmp = await customerStore.fetchBranchEmployee(v, {
      passport: true,
    });

    if (retEmp) workerList.value = retEmp.data.result;
  },
);

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

const productServiceNodes = ref<ProductTree>([]);

watch(
  () => productServiceList.value,
  () => {
    productServiceNodes.value = quotationProductTree(
      productServiceList.value,
      agentPrice.value,
      config.value?.vat,
    );
  },
);

async function searchEmployee(text: string) {
  let query: string | undefined = text;
  let pageSize = 50;

  if (!text) {
    query = undefined;
    pageSize = 9999;
  }

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

function storeDataLocal() {
  quotationFormData.value.productServiceList = productServiceList.value;

  localStorage.setItem(
    'quotation-preview',
    JSON.stringify({
      data: {
        ...quotationFormData.value,
        productServiceList: productService.value,
      },
      meta: {
        source: {
          ...quotationFormState.value.source,
          code:
            quotationFormState.value.mode === 'create'
              ? '-'
              : quotationFormState.value?.source?.code,
          createAt:
            quotationFormState.value.mode === 'create'
              ? Date.now()
              : quotationFormState.value?.source?.createdAt,
          createBy: quotationFormState.value?.source?.createdBy,
          payCondition: quotationFormData.value.payCondition,
          contactName: quotationFormData.value.contactName,
          contactTel: quotationFormData.value.contactTel,
          workName: quotationFormData.value.workName,
          dueDate: quotationFormData.value.dueDate,
        },
        selectedWorker: selectedWorker.value,
        createdBy: quotationFormState.value.createdBy('tha'),
      },
    }),
  );

  const url = new URL('/quotation/document-view', window.location.origin);

  url.searchParams.append('type', view.value);

  window.open(url, '_blank');
}
const QUOTATION_STATUS = [
  'Issued',
  'Accepted',
  'PaymentPending',
  'PaymentInProcess',
  'PaymentSuccess',
  'ProcessComplete',
  'Canceled',
];

function getStatus(
  status: typeof quotationFormData.value.quotationStatus,
  doneIndex: number,
  doingIndex: number,
) {
  return QUOTATION_STATUS.findIndex((v) => v === status) >= doneIndex
    ? 'done'
    : QUOTATION_STATUS.findIndex((v) => v === status) >= doingIndex
      ? 'doing'
      : 'waiting';
}

const statusQuotationForm = ref<
  {
    title: string;
    status: 'done' | 'doing' | 'waiting';
    handler: () => void;
    active?: () => boolean;
  }[]
>([]);

const view = ref<View>(View.Quotation);

const code = ref<string>('');

async function getInvoiceCode(invoiceId: string) {
  const ret = await invoiceStore.getInvoice(invoiceId);
  if (ret) code.value = ret.code;
}

async function getInvoiceCodeFullPay() {
  const ret = await invoiceStore.getInvoiceList({
    quotationId: quotationFormData.value.id,
  });
  if (ret) code.value = ret.result.at(0)?.code || '';
}

const importWorkerCriteria = ref<{
  passport: string[] | null;
  visa: string[] | null;
}>({
  passport: [],
  visa: [],
});

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: quotationFormData.value.customerBranchId,
  });

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

  const deduplicate = ret.result.filter(
    (a) => !selectedWorker.value.find((b) => a.id === b.id),
  );

  preSelectedWorker.value = [...deduplicate, ...selectedWorker.value];

  convertEmployeeToTable();

  return true;
}
</script>

<template>
  <ImportWorker
    v-model:open="pageState.importWorker"
    v-model:data="importWorkerCriteria"
    :import-worker="getWorkerFromCriteria"
  />

  <div class="column surface-0 fullscreen">
    <div class="color-bar" :class="{ dark: $q.dark.isActive }">
      <div class="orange-segment"></div>
      <div class="yellow-segment"></div>
      <div class="gray-segment"></div>
    </div>

    <header
      class="row q-px-md q-py-sm items-center justify-between relative-position"
    >
      <section class="banner" :class="{ dark: $q.dark.isActive }"></section>
      <div style="flex: 1" class="row items-center">
        <RouterLink to="/quotation">
          <q-img src="/icons/favicon-512x512.png" width="3rem" />
        </RouterLink>
        <span class="column text-h6 text-bold q-ml-md">
          {{ $t('quotation.title') }}
          {{ code || quotationFormState.source?.code || '' }}
          <span class="text-caption text-regular app-text-muted">
            {{
              $t('quotation.processOn', {
                msg:
                  quotationFormState.mode === 'create'
                    ? `${dateFormat(date, true)} ${dateFormat(date, true, true)}`
                    : `${dateFormat(quotationFull?.createdAt, true)} ${dateFormat(quotationFull?.createdAt, true, true)}`,
              })
            }}
          </span>
        </span>
      </div>

      <div
        v-if="quotationFormState.mode !== 'create'"
        class="column col-2 q-ml-auto"
        style="gap: 10px"
      >
        <div class="row justify-end">
          <BadgeComponent :title-i18n="$t('general.laborIdentified')" />
        </div>
        <div
          class="row items-center justify-between surface-1 rounded q-pa-xs"
          style="height: 40px; border-radius: 40px"
          v-if="quotationFormData.quotationStatus === 'Issued'"
        >
          <div class="full-height full-width row">
            <div
              class="col-6 flex flex-center"
              style="
                color: white;
                background: linear-gradient(to right, #035aa1 0%, #14ab35 100%);
                border-radius: 20px;
                gap: 10px;
              "
            >
              <q-icon name="mdi-calendar-range" />
              {{ $t('quotation.receiptDialog.remain') }}
            </div>
            <div class="col-6 flex flex-center">
              <span
                v-if="calculateDaysUntilExpire(quotationFormData.dueDate) <= 0"
              >
                {{
                  $t(
                    `general.${
                      calculateDaysUntilExpire(quotationFormData.dueDate) > 0
                        ? 'beDue'
                        : calculateDaysUntilExpire(
                              quotationFormData.dueDate,
                            ) === 0
                          ? 'due'
                          : 'overDue'
                    }`,
                  )
                }}
              </span>

              <span v-else>
                {{ calculateDaysUntilExpire(quotationFormData.dueDate) }}
                {{ $t('general.day') }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </header>

    <article
      class="col full-width q-pa-md"
      style="flex-grow: 1; overflow-y: auto"
    >
      <section class="col-sm col-12">
        <div class="col q-gutter-y-md">
          <div
            class="surface-1 q-pa-sm row no-wrap full-width scroll rounded"
            style="gap: 10px"
          >
            <button
              v-for="value in statusQuotationForm"
              :key="value.title"
              class="q-pa-sm bordered status-color row items-center"
              :class="{
                [`status-color-${value.status}`]: true,
                'quotation-status-active': value.active?.(),
              }"
              @click="value.status !== 'waiting' && value.handler()"
              style="min-width: 120px; cursor: pointer; text-wrap: nowrap"
            >
              <div class="q-px-sm">
                <q-icon
                  class="icon-color quotation-status"
                  style="border-radius: 50%"
                  :name="`${value.status === 'done' ? 'mdi-check-circle' : 'mdi-checkbox-blank-circle-outline'}`"
                />
              </div>
              <div class="col text-left">
                {{ $t(`quotation.status.${value.title}`) }}
              </div>
            </button>
          </div>

          <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('general.document') }}
                  </span>
                </div>

                <q-checkbox
                  v-model="quotationFormData.urgent"
                  class="q-ml-auto"
                  size="xs"
                  :label="$t('general.urgent')"
                  :disable="readonly"
                />
              </section>
            </template>

            <div class="surface-1 q-pa-md full-width">
              <QuotationFormMetadata
                class="q-mb-md"
                :readonly
                :actor="quotationFormState.createdBy?.($i18n.locale) || ''"
                :quotation-no="(quotationFull && quotationFull.code) || ''"
                v-model:urgent="quotationFormData.urgent"
                v-model:work-name="quotationFormData.workName"
                v-model:contactor="quotationFormData.contactName"
                v-model:telephone="quotationFormData.contactTel"
                v-model:due-date="quotationFormData.dueDate"
              >
                <template #issue-info>
                  <FormAbout
                    hide-add
                    class="col-12 col-md-8"
                    input-only
                    v-model:branch-id="quotationFormData.registeredBranchId"
                    v-model:customer-branch-id="
                      quotationFormData.customerBranchId
                    "
                    :readonly="readonly"
                  />
                </template>
              </QuotationFormMetadata>
            </div>
          </q-expansion-item>

          <template
            v-if="
              view === View.Quotation ||
              view === View.Accepted ||
              view === View.Invoice
            "
          >
            <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>
                    <template v-if="!readonly">
                      <ToggleButton class="q-mr-sm" v-model="toggleWorker" />
                      {{
                        toggleWorker
                          ? $t('general.specify')
                          : $t('general.noSpecify')
                      }}
                    </template>
                  </div>
                  <nav class="q-ml-auto">
                    <AddButton
                      v-if="
                        !readonly &&
                        (!quotationFormState.source ||
                          quotationFormState.source?.quotationStatus ===
                            'Issued' ||
                          quotationFormState.source?.quotationStatus ===
                            'Expired')
                      "
                      icon-only
                      @click.stop="triggerSelectEmployeeDialog"
                    />
                    <AddButton
                      v-if="
                        !!quotationFormState.source &&
                        quotationFormState.source.quotationStatus !==
                          'Issued' &&
                        quotationFormState.source?.quotationStatus !== 'Expired'
                      "
                      @click.stop="openQuotation = !openQuotation"
                      icon-only
                      class="q-ml-auto"
                    />
                  </nav>
                </section>
              </template>

              <div class="surface-1 q-pa-md full-width">
                <WorkerItem
                  @update:employee-amount="
                    (v) =>
                      (quotationFormData.workerMax = Math.max(
                        v,
                        selectedWorker.length,
                      ))
                  "
                  :employee-amount="
                    quotationFormData.workerMax || selectedWorker.length
                  "
                  :readonly="readonly"
                  fallback-img="/images/employee-avatar.png"
                  :rows="
                    selectedWorker.map((e: Employee) => ({
                      foreignRefNo: e.employeePassport
                        ? e.employeePassport[0]?.number || '-'
                        : '-',
                      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:
                        e.employeePassport !== undefined &&
                        e.employeePassport[0]?.expireDate !== undefined
                          ? dateFormat(e.employeePassport[0]?.expireDate)
                          : '-',
                      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
                      v-if="!readonly"
                      icon-only
                      class="q-ml-auto"
                      @click.stop="triggerProductServiceDialog"
                    />
                  </nav>
                </section>
              </template>
              <div class="surface-1 q-pa-md full-width">
                <ProductItem
                  :installment-input="
                    quotationFormData.payCondition === 'SplitCustom'
                  "
                  :max-installment="quotationFormData.paySplitCount"
                  :readonly="readonly"
                  :agent-price="agentPrice"
                  :employee-rows="
                    selectedWorker.map((e: Employee) => ({
                      foreignRefNo:
                        e.employeePassport !== undefined
                          ? e.employeePassport[0]?.number || '-'
                          : '-',
                      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:
                        e.employeePassport !== undefined &&
                        e.employeePassport[0]?.expireDate !== undefined
                          ? dateFormat(e.employeePassport[0]?.expireDate) || '-'
                          : '-',
                      imgUrl: `${baseUrl}/customer/${e.id}/image/${e.selectedImage}`,
                      status: e.status,
                    }))
                  "
                  @delete="toggleDeleteProduct"
                  :rows="productService"
                  @update:rows="
                    (v) => {
                      view === View.Quotation && (productServiceList = v);
                    }
                  "
                  @update-table="handleUpdateProductTable"
                />
              </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 q-mr-md"
                      style="font-size: 18px"
                    >
                      {{ $t('general.payment') }}
                    </span>
                  </div>
                </section>
              </template>

              <div class="surface-1 q-pa-md full-width">
                <template v-if="true">
                  <QuotationFormInfo
                    :view="view"
                    :installment-amount="installmentAmount"
                    :installment-no="selectedInstallmentNo"
                    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:final-discount="quotationFormData.discount"
                    v-model:pay-bill-date="quotationFormData.payBillDate"
                    v-model:summary-price="summaryPrice"
                    class="q-mb-md"
                    @change-pay-type="handleChangePayType"
                  />
                </template>
              </div>
            </q-expansion-item>

            <q-expansion-item
              v-if="quotationFormState.mode !== 'create'"
              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.additionalFile') }}
                    </span>
                  </div>
                </section>
              </template>

              <div class="surface-1 q-pa-md full-width">
                <UploadFileSection
                  :readonly="
                    {
                      quotation: quotationFormState.mode !== 'edit',
                      invoice: false,
                      accepted: true,
                    }[view]
                  "
                  v-model:file-data="attachmentData"
                  :label="
                    $t('general.upload', { msg: $t('general.attachment') })
                  "
                  :transform-url="
                    async (url: string) => {
                      const result = await api.get<string>(url);
                      return result.data;
                    }
                  "
                  @update:file="(f) => uploadAttachment(f)"
                  @close="(v) => triggerDelete(v)"
                />
              </div>
            </q-expansion-item>
            <q-expansion-item
              v-if="view === View.Accepted"
              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.letterOfAcceptance') }}
                    </span>
                  </div>
                </section>
              </template>

              <div class="surface-1 q-pa-md flex" style="gap: var(--size-2)">
                <SelectInput
                  style="max-width: 250px"
                  class=""
                  incremental
                  v-model="templateForm"
                  id="quotation-branch"
                  :option="templateFormOption"
                  :label="$t('quotation.templateForm')"
                  :option-label="locale === 'eng' ? 'labelEN' : 'label'"
                />
                <MainButton
                  outlined
                  icon="mdi-play-box-outline"
                  color="207 96% 32%"
                  @click="() => {}"
                >
                  {{ $t('general.view', { msg: $t('general.example') }) }}
                </MainButton>
                <MainButton
                  solid
                  icon="mdi-pencil-outline"
                  color="207 96% 32%"
                  @click="() => {}"
                >
                  {{ $t('general.designForm') }}
                </MainButton>
              </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-ceenhancement nter 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('general.remark') }}
                    </span>
                  </div>
                </section>
              </template>

              <div class="surface-1 q-pa-md full-width">
                <q-editor
                  dense
                  :readonly="readonly || !pageState.remarkWrite"
                  :model-value="
                    !pageState.remarkWrite || readonly
                      ? convertTemplate(quotationFormData.remark || '', {
                          'quotation-payment': {
                            paymentType: quotationFormData.payCondition,
                            amount: getPrice(productServiceList).finalPrice,
                            installments: quotationFormData.paySplit,
                          },
                          'quotation-labor': {
                            name: selectedWorker.map(
                              (v, i) =>
                                `${i + 1}. ` +
                                `${v.namePrefix}. ${v.firstNameEN} ${v.lastNameEN}`.toUpperCase(),
                            ),
                          },
                        })
                      : quotationFormData.remark || ''
                  "
                  min-height="5rem"
                  class="full-width"
                  :content-class="{
                    'q-my-sm rounded': true,
                    bordered: !readonly && pageState.remarkWrite,
                  }"
                  toolbar-bg="input-border"
                  style="cursor: auto; color: var(--foreground)"
                  :flat="!readonly"
                  :style="`width: ${$q.screen.gt.xs ? '100%' : '63vw'}`"
                  :toolbar="getToolbarConfig"
                  :toolbar-toggle-color="readonly ? 'disabled' : 'primary'"
                  :toolbar-color="
                    readonly ? 'disabled' : $q.dark.isActive ? 'white' : ''
                  "
                  :definitions="{
                    clip: {
                      icon: 'mdi-paperclip',
                      tip: 'Upload',
                      disable: readonly,
                      handler: () => console.log('upload'),
                    },
                  }"
                  @update:model-value="
                    (v) => {
                      quotationFormData.remark = v;
                    }
                  "
                >
                  <template v-if="!readonly" v-slot:toggle>
                    <div class="text-caption row no-wrap q-px-sm">
                      <MainButton
                        :disabled="readonly"
                        :solid="!pageState.remarkWrite"
                        icon="mdi-eye-outline"
                        color="0 0% 40%"
                        @click="pageState.remarkWrite = false"
                        style="padding: 0 var(--size-2)"
                        :style="{
                          color: pageState.remarkWrite
                            ? 'hsl(0 0% 40%)'
                            : undefined,
                        }"
                      >
                        {{ $t('general.view', { msg: $t('general.example') }) }}
                      </MainButton>
                      <MainButton
                        :disabled="readonly"
                        :solid="pageState.remarkWrite"
                        icon="mdi-pencil-outline"
                        color="0 0% 40%"
                        @click="pageState.remarkWrite = true"
                        style="padding: 0 var(--size-2)"
                        :style="{
                          color: !pageState.remarkWrite
                            ? 'hsl(0 0% 40%)'
                            : undefined,
                        }"
                      >
                        {{ $t('general.edit') }}
                      </MainButton>
                    </div>
                  </template>
                </q-editor>
              </div>
            </q-expansion-item>
          </template>

          <template v-else>
            <PaymentForm
              v-if="view !== View.InvoicePre && view !== View.Receipt"
              :data="quotationFormState.source"
              @fetch-status="
                () => {
                  fetchQuotation();
                }
              "
            />
            <q-expansion-item
              v-if="view === View.InvoicePre"
              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"
            >
              <div class="surface-1 q-pa-md full-width">
                <SwitchItem :value="view">
                  <template #[View.InvoicePre]>
                    <q-table
                      flat
                      bordered
                      :columns="columnPaySplit"
                      :rows="quotationFormData.paySplit"
                      selection="multiple"
                      v-model:selected="selectedInstallment"
                      @update:selected="
                        (v) => {
                          selectedInstallment = v.filter(
                            (value) => !value.invoiceId,
                          );

                          selectedInstallmentNo = selectedInstallment.map(
                            (value: any) => value.no,
                          );

                          installmentAmount = selectedInstallment.reduce(
                            (total: number, value: any) => total + value.amount,
                            0,
                          );
                        }
                      "
                      row-key="no"
                      :no-data-label="$t('general.noDataTable')"
                      :rows-per-page-options="[0]"
                      hide-pagination
                      :selected-rows-label="
                        (n) =>
                          $t('general.selected', {
                            number: n,
                            msg: $t('productService.product.product'),
                          })
                      "
                    >
                      <template v-slot:header="props">
                        <q-tr
                          :props="props"
                          :style="`background-color:hsla(var(--info-bg) / 0.07)`"
                        >
                          <q-th auto-width>
                            <q-checkbox v-model="props.selected" />
                          </q-th>
                          <q-th
                            v-for="col in props.cols"
                            :key="col.name"
                            :props="props"
                          >
                            {{ $t(col.label) }}
                          </q-th>
                        </q-tr>
                      </template>
                      <template v-slot:body="props">
                        <q-tr
                          :class="{ 'cursor-pointer': props.row.invoiceId }"
                          :props="props"
                          @click="
                            async () => {
                              if (props.row.invoiceId) {
                                await getInvoiceCode(props.row.invoiceId);

                                selectedInstallmentNo =
                                  quotationFormState.source?.paySplit
                                    .filter(
                                      (v) =>
                                        v.invoiceId === props.row.invoiceId,
                                    )
                                    .map((v) => v.no) || [];

                                installmentAmount = props.row.amount;
                                view = View.Invoice;
                              }
                            }
                          "
                        >
                          <q-td auto-width>
                            <q-checkbox
                              v-model="props.selected"
                              v-if="!props.row.invoiceId"
                            />
                          </q-td>
                          <q-td
                            v-for="col in props.cols"
                            :key="col.name"
                            :props="props"
                          >
                            <template v-if="col.name === 'installmentNo'">
                              {{ col.value }}
                            </template>

                            <template v-if="col.name === 'amount'">
                              {{ formatNumberDecimal(col.value, 2) }}
                            </template>

                            <template v-if="col.name === 'status'">
                              <BadgeComponent
                                :title="
                                  !!col.value
                                    ? 'สร้างใบแจ้งหนี้เเล้ว'
                                    : 'ยังไม่สร้างใบแจ้งหนี้'
                                "
                                :hsla-color="!!col.value ? '' : '--red-7-hsl'"
                              />
                            </template>
                          </q-td>
                        </q-tr>
                      </template>
                    </q-table>
                  </template>
                </SwitchItem>
              </div>
            </q-expansion-item>
          </template>

          <template v-if="view === View.Quotation || view === View.Payment">
            <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('general.form') }}
                    </span>
                  </div>
                </section>
              </template>

              <div class="surface-1 q-pa-md flex" style="gap: var(--size-2)">
                <SelectInput
                  style="max-width: 250px"
                  class="q-mr-xl"
                  incremental
                  v-model="templateForm"
                  id="quotation-branch"
                  :option="templateFormOption"
                  :label="$t('quotation.templateForm')"
                  :option-label="locale === 'eng' ? 'labelEN' : 'label'"
                />
                <MainButton
                  outlined
                  icon="mdi-play-box-outline"
                  color="207 96% 32%"
                  @click="storeDataLocal"
                >
                  {{ $t('general.view', { msg: $t('general.example') }) }}
                </MainButton>
                <MainButton
                  solid
                  icon="mdi-pencil-outline"
                  color="207 96% 32%"
                  @click="storeDataLocal"
                >
                  {{ $t('general.designForm') }}
                </MainButton>
              </div>
            </q-expansion-item>
          </template>

          <template v-if="view === View.Receipt">
            <QuotationFormReceipt
              v-for="(v, i) in receiptList"
              :key="i"
              :amount="v.amount"
              :date="v.date"
              :pay-type="quotationFormData.payCondition"
              :index="i"
              :pay-split-count="quotationFormData.paySplitCount || 0"
            />
          </template>
        </div>
      </section>
    </article>

    <footer class="surface-1 q-pa-md full-width">
      <div
        class="row full-width"
        :class="{
          'justify-between': view !== View.InvoicePre,
          'justify-end': view === View.InvoicePre,
        }"
      >
        <MainButton
          v-if="view !== View.InvoicePre && view !== View.PaymentPre"
          outlined
          icon="mdi-play-box-outline"
          color="207 96% 32%"
          @click="storeDataLocal"
        >
          {{ $t('general.view', { msg: $t('general.example') }) }}
        </MainButton>

        <div
          v-if="
            view === View.Accepted &&
            quotationFormData.quotationStatus === 'Issued'
          "
        >
          <MainButton
            solid
            icon="mdi-account-multiple-check-outline"
            color="207 96% 32%"
            @click="
              () => {
                submitAccepted();
              }
            "
          >
            {{ $t('quotation.customerAcceptance') }}
          </MainButton>
        </div>

        <template v-if="view === View.InvoicePre">
          <MainButton
            solid
            icon="mdi-account-multiple-check-outline"
            color="207 96% 32%"
            @click="
              () => {
                view = View.Invoice;
              }
            "
          >
            {{ $t('quotation.selectInvoice') }}
          </MainButton>
        </template>

        <div
          v-if="
            view === View.Invoice &&
            ((quotationFormData.quotationStatus !== 'PaymentPending' &&
              quotationFormData.payCondition !== 'Full') ||
              quotationFormData.quotationStatus === 'Accepted') &&
            !isIssueInvoice()
          "
        >
          <MainButton
            solid
            icon="mdi-account-multiple-check-outline"
            color="207 96% 32%"
            @click="
              () => {
                convertInvoiceToSubmit();
              }
            "
          >
            {{ $t('quotation.approveInvoice') }}
          </MainButton>
        </div>

        <div
          class="row"
          style="gap: var(--size-2)"
          v-if="
            (view === View.Quotation &&
              (quotationFormData.quotationStatus === 'Issued' ||
                quotationFormData.quotationStatus === 'Expired')) ||
            !quotationFormData.quotationStatus
          "
        >
          <UndoButton
            outlined
            @click="closeTab()"
            v-if="quotationFormState.mode === 'edit'"
          />
          <CloseButton
            outlined
            @click="closeTab()"
            v-if="quotationFormState.mode === 'info' && closeAble()"
          />
          <SaveButton
            v-if="
              quotationFormState.mode === 'create' ||
              quotationFormState.mode === 'edit'
            "
            @click="
              () => {
                convertDataToFormSubmit();
              }
            "
            solid
          />
          <EditButton
            v-else
            class="no-print"
            @click="quotationFormState.mode = 'edit'"
            solid
          />
        </div>
      </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);
        }
      "
    >
      <template #top-append>
        <q-btn
          class="q-mr-sm"
          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
                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
                v-close-popup
                dense
                clickable
                style="white-space: nowrap"
                class="row items-center"
                @click.stop="() => (pageState.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>

      <section class="col row scroll">
        <SelectZone
          ref="refSelectZoneEmployee"
          v-model:selected-item="preSelectedWorker"
          @search="
            (v) => {
              searchEmployee(v);
            }
          "
          :items="workerList"
          :new-items="newWorkerList"
        >
          <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.employeePassport?.at(0)?.number,
                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 -->

    <QuotationFormProductSelect
      v-model="pageState.productServiceModal"
      v-model:nodes="productServiceNodes"
      v-model:product-group="productGroup"
      v-model:product-list="productList"
      v-model:service-list="serviceList"
      v-model:selected-product-group="selectedProductGroup"
      :agent-price="agentPrice"
      @submit="convertToTable"
      @select-group="
        async (id) => {
          await getAllService(id);
          await getAllProduct(id);
        }
      "
      @search="
        (id, text, mode) => {
          if (mode === 'service') {
            getAllService(id, { force: true, query: text, pageSize: 50 });
          }
          if (mode === 'product') {
            getAllProduct(id, { force: true, query: text, pageSize: 50 });
          }
        }
      "
    ></QuotationFormProductSelect>
  </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="
      () => {
        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.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}-${dateFormat(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 -->

  <QuotationFormWorkerAddDialog
    v-if="quotationFormState.source"
    :disabled-worker-id="selectedWorker.map((v) => v.id)"
    :productServiceList="quotationFormState.source.productServiceList"
    :quotation-id="quotationFormState.source.id"
    v-model:open="openQuotation"
    @success="
      openQuotation = !openQuotation;
      fetchQuotation();
    "
  />
</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;
}

.color-bar.dark {
  opacity: 0.7;
}

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

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

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

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

: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;
}

.status-color {
  --_color: var(--gray-0);
  border-color: hsla(var(--_color));
  background: hsla(var(--_color) / 0.05);
  border-radius: 4px;

  .icon-color {
    color: hsla(var(--_color));
  }

  &.status-color-done {
    --_color: var(--green-5-hsl);
    color: var(--foreground);
  }
  &.status-color-doing {
    --_color: var(--blue-5-hsl);
    color: var(--foreground);
  }
  &.status-color-waiting {
    --_color: var(--gray-4-hsl);
    color: var(--foreground);
  }
}

.quotation-status-active {
  opacity: 1;
  font-weight: 600;
  transition: 1s box-shadow ease-in-out;
  animation: status 1s infinite;
}

@keyframes status {
  0% {
    box-shadow: 0x 0px 0px hsla(var(--_color) / 0.5);
  }
  50% {
    box-shadow: 0px 0px 1px 4px hsla(var(--_color) / 0.2);
  }
  100% {
    box-shadow: 0px 0px 4px 7px hsla(var(--_color) / 0);
  }
}

.banner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('/images/building-banner.png');
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1;

  &.dark {
    filter: invert(100%);
  }
}
</style>
