jws-frontend/src/pages/03_customer-management/MainPage.vue

<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { storeToRefs } from 'pinia';

import { Pagination } from 'src/stores/types';
import useCustomerStore from 'src/stores/customer';
import useEmployeeStore from 'src/stores/employee';

import { Status } from 'src/stores/types';

import ButtonAddComponent from 'src/components/ButtonAddCompoent.vue';
import PersonCard from 'components/home/PersonCard.vue';
import UsersDetailCardComponent from 'src/components/UsersDetailCardComponent.vue';
import SelectorList from 'components/SelectorList.vue';
import StatCardComponent from 'components/StatCardComponent.vue';
import TooltipComponent from 'components/TooltipComponent.vue';
import AddButton from 'components/AddButton.vue';
import AppBox from 'components/app/AppBox.vue';
import ItemCard from 'src/components/ItemCard.vue';
import FormDialog from 'src/components/FormDialog.vue';
import ProfileUpload from 'src/components/ProfileUpload.vue';
import BasicInformation from 'src/components/03_customer-management/BasicInformation.vue';
import TabComponent from 'src/components/TabComponent.vue';
import FormAddress from 'src/components/02_personnel-management/FormAddress.vue';
import AboutComponent from 'src/components/03_customer-management/AboutComponent.vue';
import ContactComponent from 'src/components/03_customer-management/ContactInformation.vue';
import OtherInformation from 'src/components/03_customer-management/OtherInformation.vue';
import FormBusiness from 'src/components/03_customer-management/FormBusiness.vue';
import DrawerInfo from 'src/components/DrawerInfo.vue';
import InfoForm from 'src/components/02_personnel-management/InfoForm.vue';
import CustomerInfoComponent from 'src/components/03_customer-management/CustomerInfoComponent.vue';
import NoData from 'components/NoData.vue';

import {
  CustomerCreate,
  CustomerStats,
  Customer,
  CustomerUpdate,
  CustomerBranch,
  CustomerBranchCreate,
  CustomerType,
} from 'stores/customer/types';
import {
  EmployeeCreate,
  Employee,
  EmployeeWork,
  EmployeeCheckup,
  EmployeeOther,
} from 'stores/employee/types';
import { onMounted } from 'vue';

import FormPerson from 'src/components/02_personnel-management/FormPerson.vue';
import FormEmployeeHealthCheck from 'src/components/03_customer-management/FormEmployeeHealthCheck.vue';
import FormEmployeeWorkHistory from 'src/components/03_customer-management/FormEmployeeWorkHistory.vue';
import FormEmployeeOther from 'src/components/03_customer-management/FormEmployeeOther.vue';
import FormEmployeePassport from 'src/components/03_customer-management/FormEmployeePassport.vue';
import FormEmployeeVisa from 'src/components/03_customer-management/FormEmployeeVisa.vue';
import { Icon } from '@iconify/vue';
import { dialog, calculateAge } from 'src/stores/utils';
import { useI18n } from 'vue-i18n';

const { t, locale } = useI18n();
const userCustomer = useCustomerStore();
const {
  create,
  getStatsCustomer,
  fetchList,
  editById,
  fetchListById,
  createBranch,
  deleteBranchById,
  editBranchById,
  fetchListBranch,
  fetchListBranchById,
} = userCustomer;
const employeeStore = useEmployeeStore();
const formData = ref<CustomerCreate>({
  status: 'CREATED',
  personName: '',
  customerType: 'CORP',
  customerName: '',
  customerNameEN: '',
  taxNo: '',
  customerBranch: [
    {
      address: '',
      addressEN: '',
      provinceId: '',
      districtId: '',
      subDistrictId: '',
      zipCode: '',
      email: '',
      telephoneNo: '',
      name: '',
      status: 'CREATED',
      taxNo: '',
      nameEN: '',
      legalPersonNo: '',
      registerName: '',
      registerDate: new Date(),
      authorizedCapital: '',
      employmentOffice: '',
      bussinessType: '',
      bussinessTypeEN: '',
      jobPosition: '',
      jobPositionEN: '',
      jobDescription: '',
      saleEmployee: '',
      payDate: new Date(),
      wageRate: 0,
    },
  ],
  image: null,
});

const inputSearch = ref<string>();
const fieldSelectedCustomer = ref<{ label: string; value: string }>({
  label: t('all'),
  value: 'all',
});

const currentEmployee = ref<Employee | undefined>();
const currentEmployeeCode = ref('');
const isEmployeeEdit = ref(false);
const formDataEmployeeSameAddr = ref(true);
const formDataEmployeeTab = ref('personalInfo');
const infoDrawerEmployee = ref(false);
const infoDrawerEmployeeEdit = ref(false);
const infoEmployeePersonCard = ref();
const statsEmployee = ref(0);
const statsEmployeeGender = ref<{ male: number; female: number }>();
const formDataEmployeeOwner = ref<{
  id: string;
  address: string;
  addressEN: string;
  provinceId: string;
  districtId: string;
  subDistrictId: string;
  zipCode: string;
}>();
const formDataEmployee = ref<EmployeeCreate>({
  image: null,
  customerBranchId: '',
  nrcNo: '',
  dateOfBirth: null,
  gender: '',
  nationality: '',

  firstName: '',
  firstNameEN: '',
  lastName: '',
  lastNameEN: '',

  addressEN: '',
  address: '',
  zipCode: '',

  passportType: '',
  passportNumber: '',
  passportIssueDate: null,
  passportExpiryDate: null,
  passportIssuingCountry: '',
  passportIssuingPlace: '',
  previousPassportReference: '',

  visaType: '',
  visaNumber: '',
  visaIssueDate: null,
  visaExpiryDate: null,
  visaIssuingPlace: '',
  visaStayUntilDate: null,
  tm6Number: '',
  entryDate: null,
  workerStatus: '',

  subDistrictId: '',
  districtId: '',
  provinceId: '',

  employeeWork: [
    {
      workEndDate: null,
      workPermitExpireDate: null,
      workPermitIssuDate: null,
      workPermitNo: '',
      workplace: '',
      jobType: '',
      positionName: '',
      ownerName: '',
      remark: '',
    },
  ],
  employeeCheckup: [
    {
      coverageExpireDate: null,
      coverageStartDate: null,
      insuranceCompany: '',
      medicalBenefitScheme: '',
      remark: '',
      hospitalName: '',
      provinceId: '',
      checkupResult: '',
      checkupType: '',
    },
  ],
  employeeOtherInfo: {
    citizenId: '',
    fatherFirstName: '',
    fatherLastName: '',
    fatherFirstNameEN: '',
    fatherLastNameEN: '',
    fatherBirthPlace: '',

    motherFirstName: '',
    motherLastName: '',
    motherFirstNameEN: '',
    motherLastNameEN: '',
    motherBirthPlace: '',
  },
});

const indexTab = ref<number>(0);
const statusToggle = ref<boolean>(false);
const profileSubmit = ref<boolean>(false);
const profileFile = ref<File | undefined>(undefined);
const profileUrl = ref<string | null>('');
const infoDrawer = ref(false);
const infoDrawerEdit = ref(false);
const isMainPage = ref<boolean>(true);
const statsCustomerType = ref<CustomerStats>();
const currentCustomerId = ref<string>('');
const dialogInputCustomerBranchForm = ref<boolean>(false);
const currentCustomer = ref<Customer>();

const currentBranch = ref<{ name: string; code: string }>({
  name: '',
  code: '',
});

const branch = ref<CustomerBranch[]>();

const currentPageCustomer = ref<number>(1);
const maxPageCustomer = ref<number>(1);
const pageSizeCustomer = ref<number>(30);

const currentPageEmployee = ref<number>(1);
const maxPageEmployee = ref<number>(1);
const pageSizeEmployee = ref<number>(30);

const currentBranchId = ref<string>('');
const currentCustomerName = ref<string>('');
const currentCustomerUrlImage = ref<string | null>(null);
const genderselector = ref<string>('');

const totalCustomer = ref<number>(0);

const currentStatus = ref<Status | 'All'>('All');

const inputFile = (() => {
  const element = document.createElement('input');
  element.type = 'file';
  element.accept = 'image/*';

  const reader = new FileReader();
  reader.addEventListener('load', () => {
    if (typeof reader.result === 'string') profileUrl.value = reader.result;
  });

  element.addEventListener('change', () => {
    profileFile.value = element.files?.[0];
    if (profileFile.value) {
      reader.readAsDataURL(profileFile.value);
    }
  });

  return element;
})();

const listCustomer = ref<(Customer & { branch: CustomerBranch[] })[]>();
const listEmployee = ref();

const itemCard = [
  {
    icon: 'mdi:office-building',
    text: 'customerLegalEntity',
    color: 'var(--purple-8)',
  },
  {
    icon: 'heroicons:user-solid',
    text: 'customerNaturalPerson',
    color: 'var(--green-9)',
  },
];

const customerStats = [
  {
    id: 1,
    count: 2,
    name: 'CORP',
  },

  {
    id: 2,
    count: 3,
    name: 'PERS',
  },
];

const employeeTab = [
  {
    name: 'personalInfo',
    label: 'personalInfo',
  },
  {
    name: 'healthCheck',
    label: 'healthCheck',
  },
  {
    name: 'workHistory',
    label: 'workHistory',
  },
  {
    name: 'other',
    label: 'other',
  },
];

const fieldCustomer = ref([
  'all',
  'customerLegalEntity',
  'customerNaturalPerson',
]);

const dialogCustomerType = ref<boolean>(false);
const dialogInputForm = ref<boolean>(false);
const dialogEmployee = ref<boolean>(false);

const infoDrawerBranch = ref<boolean>(false);

const selectorLabel = ref<string>('');
const selectorList = computed(() => [
  {
    label: 'EMPLOYER',
    count:
      (statsCustomerType.value?.CORP ?? 0) +
      (statsCustomerType.value?.PERS ?? 0),
  },
  {
    label: 'EMPLOYEE',
    count: statsEmployee.value ?? 0,
  },
]);

const customerType = ref<CustomerType>('CORP');

function triggerCreate(type: CustomerType) {
  customerType.value = type;
  openDialogInputForm();
  dialogCustomerType.value = false;
}

function openDialogCustomerType() {
  if (selectorLabel.value === 'EMPLOYER') {
    dialogCustomerType.value = true;
  }

  if (selectorLabel.value === 'EMPLOYEE') {
    dialogEmployee.value = true;
  }
}

async function openDialogInputForm(
  action: 'FORM' | 'INFO' = 'FORM',
  id?: string,
) {
  if (action === 'INFO') {
    if (!id) return;
    if (selectorLabel.value === 'EMPLOYER') infoDrawer.value = true;
    if (selectorLabel.value === 'EMPLOYEE') {
      await assignFormDataEmployee(id);
      infoDrawerEmployee.value = true;
      infoDrawerEmployeeEdit.value = false;
      const employee = currentEmployee.value;
      infoEmployeePersonCard.value = employee
        ? [
            {
              id: employee.id,
              img: `${employee.profileImageUrl}`,
              name:
                locale.value === 'en-US'
                  ? `${employee.firstNameEN} ${employee.lastNameEN}`
                  : `${employee.firstName} ${employee.lastName}`,
              male: employee.gender === 'male',
              female: employee.gender === 'female',
              badge: employee.code,
              disabled: employee.status === 'INACTIVE',
            },
          ]
        : [];

      const code = currentEmployee.value?.code.split('-')[0];
      const result = await fetchListBranch({
        includeCustomer: true,
        query: code,
        pageSize: 30,
      });
      if (result) employeeStore.ownerOption = result.result;
    }
  } else {
    if (selectorLabel.value === 'EMPLOYER') dialogInputForm.value = true;
    if (selectorLabel.value === 'EMPLOYEE') {
      if (!id) return;
      await assignFormDataEmployee(id);
      const code = currentEmployee.value?.code.split('-')[0];

      const result = await fetchListBranch({
        includeCustomer: true,
        query: code,
        pageSize: 30,
      });
      if (result) employeeStore.ownerOption = result.result;
      dialogEmployee.value = true;
    }
  }
}

function onClose() {
  infoDrawer.value = false;
  infoDrawerEdit.value = false;
  dialogInputForm.value = false;
  clearForm();
}

function onCloseBranch() {
  infoDrawerBranch.value = false;
  infoDrawerEdit.value = false;
  dialogInputForm.value = false;
  clearForm();
}

function clearForm() {
  dialogInputForm.value = false;
  formData.value = {
    status: 'CREATED',
    customerType: 'CORP',
    customerName: '',
    customerNameEN: '',
    personName: '',
    taxNo: '',
    customerBranch: [
      {
        address: '',
        addressEN: '',
        provinceId: '',
        districtId: '',
        subDistrictId: '',
        zipCode: '',
        email: '',
        telephoneNo: '',
        name: '',
        status: 'CREATED',
        taxNo: '',
        nameEN: '',
        legalPersonNo: '',
        registerName: '',
        registerDate: new Date(),
        authorizedCapital: '',
        employmentOffice: '',
        bussinessType: '',
        bussinessTypeEN: '',
        jobPosition: '',
        jobPositionEN: '',
        jobDescription: '',
        saleEmployee: '',
        payDate: new Date(),
        wageRate: 0,
      },
    ],
    image: null,
  };
}

function clearFormEmployee() {
  profileUrl.value = null;
  profileSubmit.value = false;
  dialogEmployee.value = false;
  isEmployeeEdit.value = false;
  infoDrawerEmployee.value = false;
  infoDrawerEmployeeEdit.value = false;
  formDataEmployeeSameAddr.value = true;
  currentEmployeeCode.value = '';

  currentEmployee.value = undefined;
  formDataEmployeeOwner.value = undefined;

  formDataEmployee.value = {
    image: null,
    customerBranchId: '',
    nrcNo: '',
    dateOfBirth: null,
    gender: '',
    nationality: '',
    firstName: '',
    firstNameEN: '',
    lastName: '',
    lastNameEN: '',
    addressEN: '',
    address: '',
    zipCode: '',
    passportType: '',
    passportNumber: '',
    passportIssueDate: null,
    passportExpiryDate: null,
    passportIssuingCountry: '',
    passportIssuingPlace: '',
    previousPassportReference: '',
    visaType: '',
    visaNumber: '',
    visaIssueDate: null,
    visaExpiryDate: null,
    visaIssuingPlace: '',
    visaStayUntilDate: null,
    tm6Number: '',
    entryDate: null,
    workerStatus: '',
    subDistrictId: '',
    districtId: '',
    provinceId: '',
    employeeWork: [
      {
        workEndDate: null,
        workPermitExpireDate: null,
        workPermitIssuDate: null,
        workPermitNo: '',
        workplace: '',
        jobType: '',
        positionName: '',
        ownerName: '',
        remark: '',
      },
    ],
    employeeCheckup: [
      {
        coverageExpireDate: null,
        coverageStartDate: null,
        insuranceCompany: '',
        medicalBenefitScheme: '',
        remark: '',
        hospitalName: '',
        provinceId: '',
        checkupResult: '',
        checkupType: '',
      },
    ],
    employeeOtherInfo: {
      citizenId: '',
      fatherFirstName: '',
      fatherLastName: '',
      fatherFirstNameEN: '',
      fatherLastNameEN: '',
      fatherBirthPlace: '',

      motherFirstName: '',
      motherLastName: '',
      motherFirstNameEN: '',
      motherLastNameEN: '',
      motherBirthPlace: '',
    },
  };
}

function deleteCustomerById(id: string) {
  dialog({
    color: 'negative',
    icon: 'mdi-alert',
    title: t('deleteConfirmTitle'),
    actionText: t('ok'),
    persistent: true,
    message: t('deleteConfirmMessage'),
    action: async () => {
      await userCustomer.deleteById(id);

      const resultList = await fetchList({ includeBranch: true });

      if (resultList) listCustomer.value = resultList.result;
      infoDrawer.value = false;
    },
    cancel: () => {},
  });
}

function deleteBranchId(id: string) {
  dialog({
    color: 'negative',
    icon: 'mdi-alert',
    title: t('deleteConfirmTitle'),
    actionText: t('ok'),
    persistent: true,
    message: t('deleteConfirmMessage'),
    action: async () => {
      await userCustomer.deleteBranchById(id);

      const result = await fetchListById(currentCustomerId.value);

      if (result) branch.value = result.branch;
      infoDrawerBranch.value = false;
    },
    cancel: () => {},
  });
}

async function onSubmit() {
  if (selectorLabel.value === 'EMPLOYER') {
    await create({
      ...formData.value,
      customerType: customerType.value === 'CORP' ? 'CORP' : 'PERS',
      image: profileSubmit.value ? profileFile.value ?? null : null,
    });
    clearForm();
    const resultList = await fetchList({ includeBranch: true });

    if (resultList) listCustomer.value = resultList.result;
  }

  if (selectorLabel.value === 'EMPLOYEE') {
    const isOk = await checkEmployeeForm();
    if (isOk) {
      await employeeStore.create({
        ...formDataEmployee.value,
        image: profileSubmit.value ? profileFile.value ?? null : null,
      });
      const resultList = await employeeStore.fetchList();
      if (resultList) listEmployee.value = resultList.result;

      const resultStatsEmployee = await employeeStore.getStatsEmployee();
      if (resultStatsEmployee) statsEmployee.value = resultStatsEmployee;

      clearFormEmployee();
    }
  }
}

async function onSubmitCustomerBranch() {
  dialogInputCustomerBranchForm.value = false;
  // await createBranch();

  for (const item of formData.value.customerBranch || []) {
    await createBranch({
      ...item,
      customerId: currentCustomerId.value,
    });
  }
  clearForm();
  const result = await fetchListById(currentCustomerId.value);
  if (result) {
    currentCustomerName.value = result.customerName;
    currentCustomerUrlImage.value = result.imageUrl;
    branch.value = result.branch;
  }
}

const resultSearch = ref<(Customer & { branch: CustomerBranch[] })[]>();
const resultSearchEmployee = ref();

async function searchCustomer() {
  const resultList = await fetchList({
    query: inputSearch.value,
    includeBranch: true,
  });

  if (resultList) {
    resultSearch.value = resultList.result;
  }
}

async function searchEmployee() {
  const resultList = await employeeStore.fetchList({
    query: inputSearch.value,
  });

  if (resultList) {
    resultSearchEmployee.value = resultList.result;
  }
}

async function fetchListCustomer() {
  const resultList = await fetchList({
    includeBranch: true,
    page: currentPageCustomer.value,
    pageSize: pageSizeCustomer.value,
    status:
      currentStatus.value === 'All'
        ? undefined
        : currentStatus.value === 'ACTIVE'
          ? 'ACTIVE'
          : 'INACTIVE',
  });

  if (resultList) {
    currentPageCustomer.value = resultList.page;
    maxPageCustomer.value = Math.ceil(
      resultList.total / pageSizeCustomer.value,
    );

    listCustomer.value = resultList.result;
  }
}

async function fetchListEmployee(param?: {
  gender?: string;
  status?: 'CREATED' | 'ACTIVE' | 'INACTIVE' | undefined;
}) {
  const resultListEmployee = await employeeStore.fetchList(param);
  if (resultListEmployee) {
    currentPageEmployee.value = resultListEmployee.page;
    maxPageEmployee.value = Math.ceil(
      resultListEmployee.total / pageSizeEmployee.value,
    );
    listEmployee.value = resultListEmployee.result;
  }
}

async function onSubmitEdit(id: string) {
  if (selectorLabel.value === 'EMPLOYER') {
    if (!formData.value) return;

    const tempValue: CustomerUpdate = {
      status: 'ACTIVE',
      customerType: formData.value.customerType,
      customerName: formData.value.customerName,
      customerNameEN: formData.value.customerNameEN,
      customerBranch: formData.value.customerBranch,
      taxNo: formData.value.taxNo,
      personName: formData.value.personName,
    };

    await editById(id, tempValue);
    infoDrawer.value = false;
    fetchListCustomer();
    clearForm();
  }

  if (selectorLabel.value === 'EMPLOYEE') {
    const isOk = await checkEmployeeForm();
    if (isOk) {
      if (!formDataEmployee.value) return;

      await employeeStore.editById(id, {
        ...formDataEmployee.value,
        image: profileSubmit.value ? profileFile.value ?? null : null,
      });

      const resultList = await employeeStore.fetchList();
      if (resultList) listEmployee.value = resultList.result;

      clearFormEmployee();
    }
  }
}

async function onDelete(id: string) {
  if (!id) return;
  dialog({
    color: 'negative',
    icon: 'mdi-alert',
    title: t('deleteConfirmTitle'),
    actionText: t('ok'),
    persistent: true,
    message: t('deleteConfirmMessage'),
    action: async () => {
      await employeeStore.deleteById(id);
      const resultList = await employeeStore.fetchList();
      if (resultList) listEmployee.value = resultList.result;
      clearFormEmployee();
    },
    cancel: () => {},
  });
}

async function submitBranch() {
  if (formData.value.customerBranch?.[0]) {
    delete formData.value.customerBranch[0]['id'];

    await editBranchById(currentBranchId.value, {
      ...formData.value.customerBranch[0],
      customerId: currentCustomerId.value,
    });

    const result = await fetchListById(currentCustomerId.value);

    if (result) {
      branch.value = result.branch;
    }
  }
  infoDrawerBranch.value = false;

  clearForm();
}

function undo() {
  if (selectorLabel.value === 'EMPLOYER') infoDrawerEdit.value = false;

  if (selectorLabel.value === 'EMPLOYEE') {
    if (!currentEmployee.value) return;
    infoDrawerEmployeeEdit.value = false;
    assignFormDataEmployee(currentEmployee.value.id);
  }
}

async function employeeFilterOwnerBranch(
  val: string,
  update: (...args: unknown[]) => void,
) {
  update(async () => {
    const result = await fetchListBranch({
      includeCustomer: true,
      query: val,
      pageSize: 30,
    });
    if (result) employeeStore.ownerOption = result.result;
  });
}

async function assignFormData(data: Customer & { branch: CustomerBranch[] }) {
  formData.value = {
    status: 'CREATED',
    customerType: data.customerType,
    customerName: data.customerName,
    customerNameEN: data.customerNameEN,
    personName: data.personName,
    taxNo: data.taxNo,
    customerBranch: [],
    image: null,
  };

  data.branch.forEach((v) => {
    formData.value.customerBranch?.push({
      id: v.id,
      address: v.address,
      addressEN: v.addressEN,
      provinceId: v.province.id,
      districtId: v.district.id,
      subDistrictId: v.subDistrict.id,
      zipCode: v.zipCode,
      email: v.email,
      telephoneNo: v.telephoneNo,
      name: v.name,
      status: undefined,
      taxNo: v.taxNo,
      nameEN: v.nameEN,
      legalPersonNo: v.legalPersonNo,
      registerName: v.registerName,
      registerDate: new Date(v.registerDate),
      authorizedCapital: v.authorizedCapital,
      employmentOffice: v.employmentOffice,
      bussinessType: v.bussinessType,
      bussinessTypeEN: v.bussinessTypeEN,
      jobPosition: v.jobPosition,
      jobPositionEN: v.jobPositionEN,
      jobDescription: v.jobDescription,
      saleEmployee: v.saleEmployee,
      payDate: new Date(v.payDate),
      wageRate: v.wageRate,
    });
  });
}

async function assignFormDataEmployee(id: string) {
  if (!listEmployee.value) return;
  const foundEmployee = listEmployee.value.find((x: Employee) => x.id === id);

  if (foundEmployee) {
    const fetchCheckup = await employeeStore.fetchCheckup(foundEmployee.id);
    const fetchWork = await employeeStore.fetchWork(foundEmployee.id);
    const fetchOther = await employeeStore.fetchOther(foundEmployee.id);

    const employeeCheckup =
      fetchCheckup &&
      fetchCheckup.map((i: EmployeeCheckup) => ({
        coverageExpireDate: i.coverageExpireDate,
        coverageStartDate: i.coverageStartDate,
        insuranceCompany: i.insuranceCompany,
        medicalBenefitScheme: i.medicalBenefitScheme,
        remark: i.remark,
        hospitalName: i.hospitalName,
        provinceId: i.provinceId,
        checkupResult: i.checkupResult,
        checkupType: i.checkupType,
      }));

    const employeeWork =
      fetchWork &&
      fetchWork.map((i: EmployeeWork) => ({
        workEndDate: i.workEndDate,
        workPermitExpireDate: i.workPermitExpireDate,
        workPermitIssuDate: i.workPermitIssuDate,
        workPermitNo: i.workPermitNo,
        workplace: i.workplace,
        jobType: i.jobType,
        positionName: i.positionName,
        ownerName: i.ownerName,
        remark: i.remark,
      }));

    const employeeOther = fetchOther && {
      motherBirthPlace: fetchOther.motherBirthPlace,
      motherLastNameEN: fetchOther.motherLastNameEN,
      motherFirstNameEN: fetchOther.motherFirstNameEN,
      fatherLastNameEN: fetchOther.fatherLastNameEN,
      fatherFirstNameEN: fetchOther.fatherFirstNameEN,
      motherLastName: fetchOther.motherLastName,
      motherFirstName: fetchOther.motherFirstName,
      fatherLastName: fetchOther.fatherLastName,
      fatherFirstName: fetchOther.fatherFirstName,
      fatherBirthPlace: fetchOther.fatherBirthPlace,
      citizenId: fetchOther.citizenId,
    };

    formDataEmployeeTab.value = 'personalInfo';
    currentEmployeeCode.value = foundEmployee.code;
    currentEmployee.value = foundEmployee;
    profileUrl.value = foundEmployee.profileImageUrl;

    foundEmployee.profileImageUrl
      ? (profileSubmit.value = true)
      : (profileSubmit.value = false);
    isEmployeeEdit.value = true;

    const foundBranch = await fetchListBranchById(
      foundEmployee.customerBranchId,
    );
    formDataEmployeeOwner.value = {
      id: foundBranch.id,
      address: foundBranch.address,
      addressEN: foundBranch.addressEN,
      provinceId: foundBranch.provinceId,
      districtId: foundBranch.districtId,
      subDistrictId: foundBranch.subDistrictId,
      zipCode: foundBranch.zipCode,
    };

    formDataEmployee.value = {
      image: foundEmployee.profileImageUrl,
      customerBranchId: foundEmployee.customerBranchId,
      nrcNo: foundEmployee.nrcNo,
      dateOfBirth: foundEmployee.dateOfBirth,
      gender: foundEmployee.gender,
      nationality: foundEmployee.nationality,
      firstName: foundEmployee.firstName,
      firstNameEN: foundEmployee.firstNameEN,
      lastName: foundEmployee.lastName,
      lastNameEN: foundEmployee.lastNameEN,
      addressEN: foundEmployee.addressEN,
      address: foundEmployee.address,
      zipCode: foundEmployee.zipCode,
      passportType: foundEmployee.passportType,
      passportNumber: foundEmployee.passportNumber,
      passportIssueDate: foundEmployee.passportIssueDate,
      passportExpiryDate: foundEmployee.passportExpiryDate,
      passportIssuingCountry: foundEmployee.passportIssuingCountry,
      passportIssuingPlace: foundEmployee.passportIssuingPlace,
      previousPassportReference: foundEmployee.previousPassportReference,
      visaType: foundEmployee.visaType,
      visaNumber: foundEmployee.visaNumber,
      visaIssueDate: foundEmployee.visaIssueDate,
      visaExpiryDate: foundEmployee.visaExpiryDate,
      visaIssuingPlace: foundEmployee.visaIssuingPlace,
      visaStayUntilDate: foundEmployee.visaStayUntilDate,
      tm6Number: foundEmployee.tm6Number,
      entryDate: foundEmployee.entryDate,
      workerStatus: foundEmployee.workerStatus,
      subDistrictId: foundEmployee.subDistrictId,
      districtId: foundEmployee.districtId,
      provinceId: foundEmployee.provinceId,

      employeeWork: employeeWork,
      employeeCheckup: employeeCheckup,
      employeeOtherInfo: employeeOther,
    };

    if (foundBranch.address === foundEmployee.address) {
      formDataEmployeeSameAddr.value = true;
    } else {
      formDataEmployeeSameAddr.value = false;
    }
  }
}

async function checkEmployeeForm() {
  const formData = formDataEmployee.value;
  let forget = false;

  for (const [key, val] of Object.entries(formData)) {
    if (key === 'workerStatus') continue;
    if (key === 'image') continue;

    if (val === '' || val === null) {
      forget = true;
    }
  }

  if (forget) {
    return await new Promise((resolve) => {
      dialog({
        color: 'warning',
        icon: 'mdi-alert',
        title: t('warning'),
        actionText: t('ok'),
        persistent: true,
        message: t('warningForgetInput'),
        action: () => {
          resolve(true);
        },
        cancel: () => {
          resolve(false);
        },
      });
    });
  } else return true;
}

onMounted(async () => {
  const resultStats = await getStatsCustomer();

  const resultList = await fetchList({
    includeBranch: true,
    page: 1,
    pageSize: pageSizeCustomer.value,
  });

  if (resultStats) {
    totalCustomer.value = resultStats.CORP + resultStats.PERS;

    statsCustomerType.value = resultStats;
  }

  if (resultList) listCustomer.value = resultList.result;

  if (
    (statsCustomerType.value?.CORP ?? 0) +
      (statsCustomerType.value?.PERS ?? 0) >
    0
  ) {
    selectorLabel.value = 'EMPLOYER';
  }

  if (resultList) {
    currentPageCustomer.value = resultList.page;
    maxPageCustomer.value = Math.ceil(
      resultList.total / pageSizeCustomer.value,
    );
    listCustomer.value = resultList.result;
  }

  const resultStatsEmployee = await employeeStore.getStatsEmployee();
  if (resultStatsEmployee) statsEmployee.value = resultStatsEmployee;

  const resultStatsEmployeeGender =
    await employeeStore.getStatsEmployeeGender();
  if (resultStatsEmployeeGender)
    statsEmployeeGender.value = resultStatsEmployeeGender;

  const resultListEmployee = await employeeStore.fetchList({
    page: 1,
    pageSize: pageSizeEmployee.value,
  });

  if (resultListEmployee) {
    maxPageEmployee.value = Math.ceil(
      resultListEmployee.total / pageSizeEmployee.value,
    );
    listEmployee.value = resultListEmployee.result;
  }

  const resultOption = await fetch('/option/option.json');
  employeeStore.globalOption = await resultOption.json();
});

watch(locale, () => {
  fieldSelectedCustomer.value = {
    label: `${fieldSelectedCustomer.value.label}`,
    value: fieldSelectedCustomer.value?.value,
  };
});

watch(currentPageCustomer, async () => {
  await fetchListCustomer();
});

watch(currentPageEmployee, async () => {
  await fetchListEmployee();
});

watch(fieldSelectedCustomer, async () => {
  let resultList;

  if (fieldSelectedCustomer.value.value === 'all') {
    resultList = await fetchList({ includeBranch: true });
  }

  if (fieldSelectedCustomer.value.value === 'customerLegalEntity') {
    resultList = await fetchList({ includeBranch: true, customerType: 'CORP' });
  }

  if (fieldSelectedCustomer.value.value === 'customerNaturalPerson') {
    resultList = await fetchList({ includeBranch: true, customerType: 'PERS' });
  }

  if (resultList) {
    listCustomer.value = resultList.result;
  }
});

watch(
  () => formDataEmployeeOwner.value,
  (e) => {
    if (!e) return;
    if (formDataEmployeeSameAddr.value) {
      formDataEmployee.value.address = e.address;
      formDataEmployee.value.addressEN = e.addressEN;
      formDataEmployee.value.provinceId = e.provinceId;
      formDataEmployee.value.districtId = e.districtId;
      formDataEmployee.value.subDistrictId = e.subDistrictId;
      formDataEmployee.value.zipCode = e.zipCode;
    }
    formDataEmployee.value.customerBranchId = e.id;
  },
);

watch(
  () => formDataEmployeeSameAddr.value,
  (isSame) => {
    if (!formDataEmployeeOwner.value) return;
    if (isSame) {
      formDataEmployee.value.address = formDataEmployeeOwner.value.address;
      formDataEmployee.value.addressEN = formDataEmployeeOwner.value.addressEN;
      formDataEmployee.value.provinceId =
        formDataEmployeeOwner.value.provinceId;
      formDataEmployee.value.districtId =
        formDataEmployeeOwner.value.districtId;
      formDataEmployee.value.subDistrictId =
        formDataEmployeeOwner.value.subDistrictId;
      formDataEmployee.value.zipCode = formDataEmployeeOwner.value.zipCode;
    }
    formDataEmployee.value.customerBranchId = formDataEmployeeOwner.value.id;
  },
);

watch(genderselector, async (gender) => {
  await fetchListEmployee({ gender: gender });
});

watch(currentStatus, async () => {
  if (selectorLabel.value === 'EMPLOYER') {
    await fetchListCustomer();
  } else {
    await fetchListEmployee({
      status:
        currentStatus.value === 'All'
          ? undefined
          : currentStatus.value === 'ACTIVE'
            ? 'ACTIVE'
            : 'INACTIVE',
    });
  }
});

watch(selectorLabel, async () => {
  if (inputSearch.value) {
    inputSearch.value = undefined;
    resultSearch.value = undefined;
    resultSearchEmployee.value = undefined;
  }
});
</script>

<template>
  <ButtonAddComponent style="z-index: 999" v-if="selectorLabel === 'EMPLOYER'">
    <q-fab-action
      id="add-customer-legal-entity"
      style="color: white; background-color: hsla(var(--purple-11-hsl))"
      @click="triggerCreate('CORP')"
      padding="xs"
      icon="mdi-office-building"
      :label="$t('add') + ' ' + $t('customerLegalEntity')"
      external-label
      label-position="left"
    />
    <q-fab-action
      id="add-customer-natural-person"
      :label="$t('add') + ' ' + $t('customerNaturalPerson')"
      external-label
      label-position="left"
      @click="triggerCreate('PERS')"
      style="color: white; background-color: hsla(var(--teal-9-hsl))"
      padding="xs"
      icon="mdi-account-plus"
    ></q-fab-action>
  </ButtonAddComponent>

  <ButtonAddComponent style="z-index: 999" v-if="selectorLabel === 'EMPLOYEE'">
    <q-fab-action
      :label="$t('add') + ' ' + $t('EMPLOYEE')"
      external-label
      label-position="left"
      @click="openDialogCustomerType()"
      color="primary"
      padding="xs"
      icon="mdi-account-plus"
    ></q-fab-action>
  </ButtonAddComponent>

  <div class="column q-pb-lg">
    <div class="text-h6 text-weight-bold q-mb-md">
      {{ $t('customerManagement') }}
    </div>

    <div v-if="isMainPage">
      <div class="row full-width q-mb-md no-wrap">
        <SelectorList
          clickable
          :list="selectorList"
          v-model:selector="selectorLabel"
          class="q-mr-md col-3"
        />

        <!-- stat -->
        <AppBox bordered class="column full-width">
          <div class="row q-pb-sm justify-between items-center">
            <div class="text-weight-bold text-subtitle1">
              {{
                selectorLabel === 'EMPLOYER'
                  ? $t('customerEmployerStatTitle')
                  : $t('customerEmployeeStatTitle')
              }}
            </div>
          </div>
          <div class="row full-width" style="overflow-x: auto">
            <StatCardComponent
              v-if="customerStats && selectorLabel === 'EMPLOYER'"
              labelI18n
              :branch="
                customerStats.map((v) => ({
                  count:
                    v.name === 'CORP'
                      ? statsCustomerType?.CORP ?? 0
                      : statsCustomerType?.PERS ?? 0,
                  label:
                    v.name === 'CORP'
                      ? 'customerLegalEntity'
                      : 'customerNaturalPerson',
                  color: v.name === 'CORP' ? 'purple' : 'green',
                }))
              "
              :dark="$q.dark.isActive"
              class="no-wrap"
            />

            <StatCardComponent
              v-if="customerStats && selectorLabel === 'EMPLOYEE'"
              labelI18n
              :branch="[
                {
                  label: 'EMPLOYEE',
                  count: statsEmployee,
                  color: 'pink',
                },
              ]"
              :dark="$q.dark.isActive"
              class="no-wrap"
            />
          </div>
        </AppBox>
      </div>

      <!-- main -->
      <AppBox bordered class="column" style="width: 100%; min-height: 70vh">
        <div class="row q-pb-md">
          <div class="col">
            <q-select
              id="select-userType"
              for="select-userType"
              v-if="selectorLabel === 'EMPLOYER'"
              v-model="fieldSelectedCustomer"
              style="width: 150px"
              outlined
              :options="fieldCustomer.map((v) => ({ label: $t(v), value: v }))"
              :label="$t('customerCardUserType')"
              dense
            />
            <q-btn-toggle
              v-else
              v-model="genderselector"
              id="btn-mode"
              class="no-shadow"
              padding="0px"
              toggle-color="grey-3"
              size="xs"
              :options="[
                { value: 'female', slot: 'female' },
                { value: 'male', slot: 'male' },
              ]"
            >
              <template v-slot:female>
                <div
                  class="bordered-t bordered-l bordered-b q-px-md q-py-sm app-text-female text-weight-medium text-body2 row items-center"
                  @click="
                    async () => {
                      if (genderselector === 'female') {
                        await fetchListEmployee();
                        genderselector = '';
                      }
                    }
                  "
                >
                  <q-icon
                    name="mdi-gender-female"
                    class="q-mr-sm"
                    size="18px"
                  />
                  <div v-if="statsEmployeeGender">
                    {{ statsEmployeeGender.female }} คน
                  </div>
                </div>
              </template>

              <template v-slot:male>
                <div
                  class="bordered q-px-md q-py-sm app-text-male text-weight-medium text-body2 row items-center"
                  @click="
                    async () => {
                      if (genderselector === 'male') {
                        await fetchListEmployee();
                        genderselector = '';
                      }
                    }
                  "
                >
                  <q-icon name="mdi-gender-male" class="q-mr-sm" size="18px" />
                  <div v-if="statsEmployeeGender">
                    {{ statsEmployeeGender.male }} คน
                  </div>
                </div>
              </template>
            </q-btn-toggle>
          </div>

          <q-input
            for="input-search"
            outlined
            dense
            style="width: 250px"
            :label="$t('search')"
            class="q-mr-lg"
            :bg-color="$q.dark.isActive ? 'dark' : 'white'"
            v-model="inputSearch"
            debounce="200"
            @update:model-value="
              selectorLabel === 'EMPLOYEE' ? searchEmployee() : searchCustomer()
            "
          />

          <q-btn
            id="btn-status"
            icon="mdi-tune-vertical-variant"
            size="sm"
            :color="$q.dark.isActive ? 'dark' : 'white'"
            :text-color="$q.dark.isActive ? 'white' : 'dark'"
            class="bordered rounded"
            unelevated
          >
            <q-menu class="bordered">
              <q-list v-close-popup dense>
                <q-item
                  id="btn-status-all"
                  clickable
                  class="flex items-center"
                  @click="currentStatus = 'All'"
                >
                  {{ $t('all') }}
                </q-item>
                <q-item
                  id="btn-status-active"
                  clickable
                  class="flex items-center"
                  @click="currentStatus = 'ACTIVE'"
                >
                  {{ $t('statusACTIVE') }}
                </q-item>
                <q-item
                  id="btn-status-inactive"
                  clickable
                  class="flex items-center"
                  @click="currentStatus = 'INACTIVE'"
                >
                  {{ $t('statusINACTIVE') }}
                </q-item>
              </q-list>
            </q-menu>
          </q-btn>
        </div>

        <template
          v-if="
            listCustomer && totalCustomer > 0 && selectorLabel === 'EMPLOYER'
          "
        >
          <div
            v-if="
              listCustomer.length === 0 ||
              (resultSearch?.length === 0 && inputSearch !== undefined)
            "
            class="row full-width items-center justify-center"
            style="min-height: 250px"
          >
            <NoData />
          </div>

          <div
            v-if="listCustomer.length !== 0 && resultSearch?.length !== 0"
            class="row full-width customer-row"
            :style="`grid-template-columns: repeat(${$q.screen.lt.sm ? '2' : $q.screen.lt.md ? '3' : $q.screen.lt.lg ? '5' : '6'}, 1fr)`"
            style="min-height: 250px"
          >
            <UsersDetailCardComponent
              v-for="i in inputSearch !== undefined
                ? resultSearch ?? []
                : listCustomer"
              :key="i.id"
              class="hover-card"
              :color="i.customerType === 'CORP' ? 'purple' : 'green'"
              :metadata="{ id: '1', disabled: false }"
              :badge="i.branch"
              :list="{
                id: i.id,
                imageUrl: i.imageUrl,
                type: i.customerType,
                name: i.customerName === '' ? '-' : i.customerName,
                code: i.code,

                detail: [
                  {
                    label: 'customerNameTh',
                    value: i.customerName,
                  },
                  {
                    label: 'customerNameEn',
                    value: i.customerNameEN,
                  },
                ],
              }"
              @enter-card="
                () => {
                  customerType = i.customerType;
                  currentCustomerUrlImage = i.imageUrl;
                  currentCustomerId = i.id;

                  const { branch, ...payload } = i;
                  currentCustomer = payload;
                  isMainPage = false;
                }
              "
              @update-card="
                () => {
                  if (!listCustomer) return;

                  customerType = i.customerType;
                  const { branch, ...payload } = i;
                  currentCustomer = payload;

                  currentCustomerId = i.id;

                  assignFormData(i);

                  infoDrawerEdit = true;
                  openDialogInputForm('INFO', i.id);
                }
              "
              @view-card="
                () => {
                  const { branch, ...payload } = i;
                  currentCustomer = payload;

                  currentCustomerId = i.id;
                  customerType = i.customerType;
                  assignFormData(i);
                  openDialogInputForm('INFO', i.id);
                }
              "
              @delete-card="deleteCustomerById(i.id)"
            />
          </div>

          <div v-if="listCustomer.length !== 0" class="row flex-center q-pt-md">
            <q-pagination
              claess="pagination"
              v-model="currentPageCustomer"
              :max="maxPageCustomer"
              direction-links
              active-color="primary"
              gutter="sm"
            />
          </div>
        </template>

        <template
          v-if="
            listEmployee && statsEmployee > 0 && selectorLabel === 'EMPLOYEE'
          "
        >
          <div
            v-if="
              listEmployee.length === 0 || resultSearchEmployee?.length === 0
            "
            class="row full-width items-center justify-center"
            style="min-height: 250px"
          >
            <NoData />
          </div>

          <div v-if="listEmployee.length !== 0">
            <PersonCard
              :list="
                (!!inputSearch ? resultSearchEmployee ?? [] : listEmployee).map(
                  (v: Employee) => ({
                    img: v.profileImageUrl,
                    id: v.id,
                    name:
                      $i18n.locale === 'en-US'
                        ? `${v.firstNameEN} ${v.lastNameEN}`
                        : `${v.firstName} ${v.lastName}`,
                    male: v.gender === 'male',
                    female: v.gender === 'female',
                    badge: v.code,
                    detail: [
                      {
                        label: $t('personnelCardNationality'),
                        value: v.nationality,
                      },
                      {
                        label: $t('personnelCardAge'),
                        value: calculateAge(v.dateOfBirth),
                      },
                    ],
                  }),
                ) || []
              "
              @update-card="openDialogInputForm"
              @enter-card="openDialogInputForm"
              @delete-card="onDelete"
            />

            <div class="row flex-center q-pt-md">
              <q-pagination
                claess="pagination"
                v-model="currentPageEmployee"
                :max="maxPageEmployee"
                direction-links
                active-color="primary"
                gutter="sm"
              />
            </div>
          </div>
        </template>

        <template
          v-if="
            (totalCustomer === 0 && selectorLabel === 'EMPLOYER') ||
            (statsEmployee === 0 && selectorLabel === 'EMPLOYEE')
          "
        >
          <TooltipComponent
            class="self-end"
            :title="
              selectorLabel === 'EMPLOYER'
                ? 'customerEmployerTooltipTitle'
                : 'customerEmployeeTooltipTitle'
            "
            :caption="
              selectorLabel === 'EMPLOYER'
                ? 'customerEmployerTooltipCaption'
                : 'customerEmployeeTooltipCaption'
            "
            imgSrc="personnel-table-"
          />

          <div class="row items-center justify-center" style="flex-grow: 1">
            <AddButton
              :label="
                selectorLabel === 'EMPLOYER'
                  ? 'customerEmployerAdd'
                  : 'customerEmployeeAdd'
              "
              @trigger="() => openDialogCustomerType()"
            />
          </div>
        </template>
      </AppBox>
    </div>
    <div v-else>
      <CustomerInfoComponent
        :customer-type="customerType"
        :customer-id="currentCustomerId"
        @back="
          () => {
            isMainPage = true;
            currentCustomerUrlImage = null;
            clearForm();
          }
        "
        @dialog="dialogInputCustomerBranchForm = true"
        @viewDetail="
          (v) => {
            currentBranchId = v[0].id;

            currentBranch = {
              name: v[0].name,
              code: v[0].code,
            };

            if (!!currentCustomer && !!v) {
              assignFormData({ ...currentCustomer, branch: v });
            }
            infoDrawerBranch = true;
          }
        "
        v-model:branch="branch"
        v-model:currentCustomerName="currentCustomerName"
        v-model:currentCustomerUrlImage="currentCustomerUrlImage"
      />
    </div>
  </div>

  <FormDialog
    v-model:modal="dialogCustomerType"
    :title="$t('customerCardUserType')"
    no-footer
    no-app-box
    max-width="80%"
  >
    <template #body>
      <div class="row q-gutter-xl q-pa-sm">
        <ItemCard
          class="col"
          v-for="i in itemCard"
          :key="i.text"
          :icon="i.icon"
          :text="i.text"
          :color="i.color"
          @trigger="
            () => {
              triggerCreate(i.text === 'customerLegalEntity' ? 'CORP' : 'PERS');
            }
          "
        />
      </div>
    </template>
  </FormDialog>

  <FormDialog
    v-model:modal="dialogInputForm"
    :title="$t('customerEmployerAdd')"
    :customer-label="customerType"
    :submit="
      () => {
        onSubmit();
      }
    "
    :close="() => {}"
  >
    <template #prepend>
      <ProfileUpload
        v-model:url-profile="profileUrl"
        v-model:status-toggle="statusToggle"
        v-model:profile-submit="profileSubmit"
        @input-file="inputFile.click()"
      />
    </template>

    <template #information>
      <BasicInformation
        dense
        outlined
        separator
        :type-customer="customerType"
        v-model:customer-name="formData.customerName"
        v-model:customer-name-en="formData.customerNameEN"
        v-model:person-name="formData.personName"
        v-model:tax-no="formData.taxNo"
      />
    </template>

    <template #address>
      <!-- <FormCustomerBranch separator dense outlined /> -->

      <div class="col-3 app-text-muted">
        • {{ $t('formDialogCustomerBranch') }}
      </div>

      <div class="col-12 row bordered q-pt-none rounded">
        <TabComponent
          v-model:customer-branch="formData.customerBranch"
          v-model:tab-index="indexTab"
        >
          <template #address>
            <FormAddress
              :id="indexTab"
              v-if="
                indexTab !== undefined && formData.customerBranch?.[indexTab]
              "
              v-model:address="formData.customerBranch[indexTab].address"
              v-model:address-e-n="formData.customerBranch[indexTab].addressEN"
              v-model:province-id="formData.customerBranch[indexTab].provinceId"
              v-model:district-id="formData.customerBranch[indexTab].districtId"
              v-model:sub-district-id="
                formData.customerBranch[indexTab].subDistrictId
              "
              v-model:zip-code="formData.customerBranch[indexTab].zipCode"
              separator
              dense
              outlined
            />
          </template>

          <template #businessInformation>
            <FormBusiness
              v-if="
                indexTab !== undefined && formData.customerBranch?.[indexTab]
              "
              v-model:employment-office="
                formData.customerBranch[indexTab].employmentOffice
              "
              v-model:bussiness-type="
                formData.customerBranch[indexTab].bussinessType
              "
              v-model:bussiness-type-en="
                formData.customerBranch[indexTab].bussinessTypeEN
              "
              v-model:job-position="
                formData.customerBranch[indexTab].jobPosition
              "
              v-model:job-position-en="
                formData.customerBranch[indexTab].jobPositionEN
              "
              v-model:job-description="
                formData.customerBranch[indexTab].jobDescription
              "
              v-model:sale-employee="
                formData.customerBranch[indexTab].saleEmployee
              "
              v-model:pay-date="formData.customerBranch[indexTab].payDate"
              v-model:wage-rate="formData.customerBranch[indexTab].wageRate"
              separator
              dense
              outlined
            />
          </template>
          <template #about>
            <AboutComponent
              v-if="
                indexTab !== undefined && formData.customerBranch?.[indexTab]
              "
              :type-customer="customerType"
              v-model:tax-no="formData.customerBranch[indexTab].taxNo"
              v-model:customer-name="formData.customerBranch[indexTab].name"
              v-model:customer-english-name="
                formData.customerBranch[indexTab].nameEN
              "
              v-model:authorized-capital="
                formData.customerBranch[indexTab].authorizedCapital
              "
              v-model:register-name="
                formData.customerBranch[indexTab].registerName
              "
              v-model:register-date="
                formData.customerBranch[indexTab].registerDate
              "
              dense
              outlined
              bordered
              separator
            />
          </template>
          <template #contactInformation>
            <ContactComponent
              v-if="
                indexTab !== undefined && formData.customerBranch?.[indexTab]
              "
              v-model:mail="formData.customerBranch[indexTab].email"
              v-model:telephone="formData.customerBranch[indexTab].telephoneNo"
              dense
              outlined
              separator
            />
          </template>
          <template #otherDocuments>
            <OtherInformation
              v-if="
                indexTab !== undefined && formData.customerBranch?.[indexTab]
              "
              dense
              outlined
            />
          </template>
        </TabComponent>
      </div>
    </template>
  </FormDialog>

  <!-- Employee Form -->
  <FormDialog
    employee
    disabledRule
    addressSeparator
    v-model:modal="dialogEmployee"
    :noAddress="formDataEmployeeTab !== 'personalInfo'"
    :noPaddingTab="
      formDataEmployeeTab === 'healthCheck' ||
      formDataEmployeeTab === 'workHistory'
    "
    v-model:tabs-list="employeeTab"
    v-model:current-tab="formDataEmployeeTab"
    v-model:same-with-employer="formDataEmployeeSameAddr"
    v-model:address="formDataEmployee.address"
    v-model:addressEN="formDataEmployee.addressEN"
    v-model:provinceId="formDataEmployee.provinceId"
    v-model:districtId="formDataEmployee.districtId"
    v-model:subDistrictId="formDataEmployee.subDistrictId"
    v-model:zipCode="formDataEmployee.zipCode"
    :title="$t('customerEmployeeAdd')"
    :submit="
      () => {
        isEmployeeEdit
          ? currentEmployee && onSubmitEdit(currentEmployee.id)
          : onSubmit();
      }
    "
    :close="
      () => {
        clearFormEmployee();
      }
    "
  >
    <template #prepend>
      <ProfileUpload
        v-model:url-profile="profileUrl"
        v-model:status-toggle="statusToggle"
        v-model:profile-submit="profileSubmit"
        @input-file="inputFile.click()"
      />
    </template>

    <template #information>
      <BasicInformation
        v-if="formDataEmployeeTab === 'personalInfo'"
        employee
        dense
        outlined
        separator
        :employee-owner-option="employeeStore.ownerOption"
        v-model:customer-branch="formDataEmployeeOwner"
        v-model:employee-id="currentEmployeeCode"
        v-model:nrc-no="formDataEmployee.nrcNo"
        v-model:person-name="formData.personName"
        @filter-owner-branch="employeeFilterOwnerBranch"
      />
    </template>

    <template #person>
      <FormPerson
        v-if="formDataEmployeeTab === 'personalInfo'"
        dense
        outlined
        employee
        separator
        v-model:firstName="formDataEmployee.firstName"
        v-model:lastName="formDataEmployee.lastName"
        v-model:firstNameEN="formDataEmployee.firstNameEN"
        v-model:lastNameEN="formDataEmployee.lastNameEN"
        v-model:gender="formDataEmployee.gender"
        v-model:birthDate="formDataEmployee.dateOfBirth"
        v-model:nationality="formDataEmployee.nationality"
      />

      <FormEmployeeHealthCheck
        v-if="
          formDataEmployeeTab === 'healthCheck' &&
          formDataEmployee.employeeCheckup
        "
        dense
        outlined
        v-model:employee-checkup="formDataEmployee.employeeCheckup"
        v-model:checkup-type-option="employeeStore.globalOption.tha.nationality"
        v-model:medical-benefit-option="
          employeeStore.globalOption.tha.typeInsurance
        "
        v-model:insurance-company-option="
          employeeStore.globalOption.tha.insurancePlace
        "
      />
      <FormEmployeeWorkHistory
        v-if="formDataEmployeeTab === 'workHistory'"
        dense
        outlined
        v-model:employee-work="formDataEmployee.employeeWork"
        v-model:position-name-option="employeeStore.globalOption.tha.position"
        v-model:job-type-option="employeeStore.globalOption.tha.businessType"
        v-model:workplace-option="employeeStore.globalOption.tha.area"
      />
      <FormEmployeeOther
        v-if="
          formDataEmployeeTab === 'other' && formDataEmployee.employeeOtherInfo
        "
        dense
        outlined
        v-model:employee-other="formDataEmployee.employeeOtherInfo"
      />
    </template>
    <template #by-type>
      <FormEmployeePassport
        v-if="formDataEmployeeTab === 'personalInfo'"
        dense
        outlined
        employee
        separator
        v-model:passport-type="formDataEmployee.passportType"
        v-model:passport-number="formDataEmployee.passportNumber"
        v-model:passport-issue-date="formDataEmployee.passportIssueDate"
        v-model:passport-expiry-date="formDataEmployee.passportExpiryDate"
        v-model:passport-issuing-place="formDataEmployee.passportIssuingPlace"
        v-model:passport-issuing-country="
          formDataEmployee.passportIssuingCountry
        "
        v-model:previous-passport-reference="
          formDataEmployee.previousPassportReference
        "
        v-model:passport-type-option="
          employeeStore.globalOption.tha.nationality
        "
        v-model:passport-issuing-country-option="
          employeeStore.globalOption.tha.nationality
        "
      />
      <FormEmployeeVisa
        v-if="formDataEmployeeTab === 'personalInfo'"
        dense
        outlined
        employee
        v-model:visa-type="formDataEmployee.visaType"
        v-model:visa-number="formDataEmployee.visaNumber"
        v-model:visa-issue-date="formDataEmployee.visaIssueDate"
        v-model:visa-expiry-date="formDataEmployee.visaExpiryDate"
        v-model:visa-issuing-place="formDataEmployee.visaIssuingPlace"
        v-model:visa-stay-until-date="formDataEmployee.visaStayUntilDate"
        v-model:tm6-number="formDataEmployee.tm6Number"
        v-model:entry-date="formDataEmployee.entryDate"
        v-model:visa-type-option="employeeStore.globalOption.tha.nationality"
      />
    </template>
  </FormDialog>

  <FormDialog
    v-model:modal="dialogInputCustomerBranchForm"
    :title="$t('formDialogTitleCreateSubBranch')"
    :submit="
      () => {
        onSubmitCustomerBranch();
      }
    "
    :close="() => {}"
  >
    <template #address>
      <!-- <FormCustomerBranch separator dense outlined /> -->

      <div class="col-3 app-text-muted">
        • {{ $t('formDialogCustomerBranch') }}
      </div>

      <div class="col-12 row bordered q-pt-none rounded">
        <TabComponent
          v-model:customer-branch="formData.customerBranch"
          v-model:tab-index="indexTab"
        >
          <template #address>
            <FormAddress
              :id="indexTab"
              v-if="
                indexTab !== undefined && formData.customerBranch?.[indexTab]
              "
              v-model:address="formData.customerBranch[indexTab].address"
              v-model:address-e-n="formData.customerBranch[indexTab].addressEN"
              v-model:province-id="formData.customerBranch[indexTab].provinceId"
              v-model:district-id="formData.customerBranch[indexTab].districtId"
              v-model:sub-district-id="
                formData.customerBranch[indexTab].subDistrictId
              "
              v-model:zip-code="formData.customerBranch[indexTab].zipCode"
              separator
              dense
              outlined
            />
          </template>

          <template #businessInformation>
            <FormBusiness
              v-if="
                indexTab !== undefined && formData.customerBranch?.[indexTab]
              "
              v-model:employment-office="
                formData.customerBranch[indexTab].employmentOffice
              "
              v-model:bussiness-type="
                formData.customerBranch[indexTab].bussinessType
              "
              v-model:bussiness-type-en="
                formData.customerBranch[indexTab].bussinessTypeEN
              "
              v-model:job-position="
                formData.customerBranch[indexTab].jobPosition
              "
              v-model:job-position-en="
                formData.customerBranch[indexTab].jobPositionEN
              "
              v-model:job-description="
                formData.customerBranch[indexTab].jobDescription
              "
              v-model:sale-employee="
                formData.customerBranch[indexTab].saleEmployee
              "
              v-model:pay-date="formData.customerBranch[indexTab].payDate"
              v-model:wage-rate="formData.customerBranch[indexTab].wageRate"
              separator
              dense
              outlined
            />
          </template>
          <template #about>
            <AboutComponent
              v-if="
                indexTab !== undefined && formData.customerBranch?.[indexTab]
              "
              :type-customer="customerType"
              v-model:tax-no="formData.customerBranch[indexTab].taxNo"
              v-model:customer-name="formData.customerBranch[indexTab].name"
              v-model:customer-english-name="
                formData.customerBranch[indexTab].nameEN
              "
              v-model:authorized-capital="
                formData.customerBranch[indexTab].authorizedCapital
              "
              v-model:register-name="
                formData.customerBranch[indexTab].registerName
              "
              v-model:register-date="
                formData.customerBranch[indexTab].registerDate
              "
              dense
              outlined
              bordered
              separator
            />
          </template>
          <template #contactInformation>
            <ContactComponent
              v-if="
                indexTab !== undefined && formData.customerBranch?.[indexTab]
              "
              v-model:mail="formData.customerBranch[indexTab].email"
              v-model:telephone="formData.customerBranch[indexTab].telephoneNo"
              dense
              outlined
              separator
            />
          </template>
          <template #otherDocuments>
            <OtherInformation
              v-if="
                indexTab !== undefined && formData.customerBranch?.[indexTab]
              "
              dense
              outlined
            />
          </template>
        </TabComponent>
      </div>
    </template>
  </FormDialog>

  <FormDialog
    v-model:modal="dialogInputCustomerBranchForm"
    :title="$t('formDialogTitleCreateSubBranch')"
    :submit="
      () => {
        onSubmitCustomerBranch();
      }
    "
    :close="() => {}"
  >
    <template #address>
      <!-- <FormCustomerBranch separator dense outlined /> -->

      <div class="col-3 app-text-muted">
        • {{ $t('formDialogCustomerBranch') }}
      </div>

      <div class="col-12 row bordered q-pt-none rounded">
        <TabComponent
          v-model:customer-branch="formData.customerBranch"
          v-model:tab-index="indexTab"
        >
          <template #address>
            <FormAddress
              :id="indexTab"
              v-if="
                indexTab !== undefined && formData.customerBranch?.[indexTab]
              "
              v-model:address="formData.customerBranch[indexTab].address"
              v-model:address-e-n="formData.customerBranch[indexTab].addressEN"
              v-model:province-id="formData.customerBranch[indexTab].provinceId"
              v-model:district-id="formData.customerBranch[indexTab].districtId"
              v-model:sub-district-id="
                formData.customerBranch[indexTab].subDistrictId
              "
              v-model:zip-code="formData.customerBranch[indexTab].zipCode"
              separator
              dense
              outlined
            />
          </template>

          <template #businessInformation>
            <FormBusiness
              v-if="
                indexTab !== undefined && formData.customerBranch?.[indexTab]
              "
              v-model:employment-office="
                formData.customerBranch[indexTab].employmentOffice
              "
              v-model:bussiness-type="
                formData.customerBranch[indexTab].bussinessType
              "
              v-model:bussiness-type-en="
                formData.customerBranch[indexTab].bussinessTypeEN
              "
              v-model:job-position="
                formData.customerBranch[indexTab].jobPosition
              "
              v-model:job-position-en="
                formData.customerBranch[indexTab].jobPositionEN
              "
              v-model:job-description="
                formData.customerBranch[indexTab].jobDescription
              "
              v-model:sale-employee="
                formData.customerBranch[indexTab].saleEmployee
              "
              v-model:pay-date="formData.customerBranch[indexTab].payDate"
              v-model:wage-rate="formData.customerBranch[indexTab].wageRate"
              separator
              dense
              outlined
            />
          </template>
          <template #about>
            <AboutComponent
              v-if="
                indexTab !== undefined && formData.customerBranch?.[indexTab]
              "
              :type-customer="customerType"
              v-model:tax-no="formData.customerBranch[indexTab].taxNo"
              v-model:customer-name="formData.customerBranch[indexTab].name"
              v-model:customer-english-name="
                formData.customerBranch[indexTab].nameEN
              "
              v-model:authorized-capital="
                formData.customerBranch[indexTab].authorizedCapital
              "
              v-model:register-name="
                formData.customerBranch[indexTab].registerName
              "
              v-model:register-date="
                formData.customerBranch[indexTab].registerDate
              "
              dense
              outlined
              bordered
              separator
            />
          </template>
          <template #contactInformation>
            <ContactComponent
              v-if="
                indexTab !== undefined && formData.customerBranch?.[indexTab]
              "
              v-model:mail="formData.customerBranch[indexTab].email"
              v-model:telephone="formData.customerBranch[indexTab].telephoneNo"
              dense
              outlined
              separator
            />
          </template>
          <template #otherDocuments>
            <OtherInformation
              v-if="
                indexTab !== undefined && formData.customerBranch?.[indexTab]
              "
              dense
              outlined
            />
          </template>
        </TabComponent>
      </div>
    </template>
  </FormDialog>

  <!-- DRAWER INFO ของ นายจ้าง -->
  <DrawerInfo
    :title="
      $t(
        currentCustomer?.customerType === 'CORP'
          ? 'formTitleCustomer'
          : 'formTitleCustomerNaturalPerson',
        { msg: currentCustomer?.customerName },
      )
    "
    v-model:drawer-open="infoDrawer"
    :badgeLabel="currentCustomer?.code"
    :undo="() => undo()"
    :isEdit="infoDrawerEdit"
    :close="() => onClose()"
    :editData="() => (infoDrawerEdit = true)"
    :submit="() => onSubmitEdit(currentCustomerId)"
    :deleteData="
      () => {
        deleteCustomerById(currentCustomerId);
      }
    "
  >
    <template #info>
      <InfoForm>
        <template #person-card>
          <div class="q-ma-md">
            <AppBox class="surface-1" style="padding: 0">
              <UsersDetailCardComponent
                :hideButton="true"
                v-if="!!currentCustomer"
                no-bg
                no-detail
                no-hover
                :color="
                  currentCustomer.customerType === 'CORP' ? 'purple' : 'green'
                "
                :metadata="{ id: '1', disabled: false }"
                :list="{
                  id: '1',
                  type: currentCustomer.customerType,
                  name: currentCustomer.customerName,
                  imageUrl: currentCustomer.imageUrl,
                  code: 'HQ006',
                }"
              />
            </AppBox>
          </div>
        </template>
        <template #information>
          <BasicInformation
            dense
            outlined
            separator
            :readonly="!infoDrawerEdit"
            :type-customer="customerType"
            v-model:customer-name="formData.customerName"
            v-model:customer-name-en="formData.customerNameEN"
            v-model:person-name="formData.personName"
            v-model:tax-no="formData.taxNo"
          />
        </template>

        <template #address>
          <div class="col-3 app-text-muted">
            • {{ $t('formDialogCustomerBranch') }}
          </div>

          <div class="col-12 row bordered q-pt-none rounded">
            <TabComponent
              :readonly="!infoDrawerEdit"
              v-model:customer-branch="formData.customerBranch"
              v-model:tab-index="indexTab"
            >
              <template #address>
                <FormAddress
                  :id="indexTab"
                  v-if="
                    indexTab !== undefined &&
                    formData.customerBranch?.[indexTab]
                  "
                  v-model:address="formData.customerBranch[indexTab].address"
                  v-model:address-e-n="
                    formData.customerBranch[indexTab].addressEN
                  "
                  v-model:province-id="
                    formData.customerBranch[indexTab].provinceId
                  "
                  v-model:district-id="
                    formData.customerBranch[indexTab].districtId
                  "
                  v-model:sub-district-id="
                    formData.customerBranch[indexTab].subDistrictId
                  "
                  v-model:zip-code="formData.customerBranch[indexTab].zipCode"
                  separator
                  dense
                  outlined
                  :readonly="!infoDrawerEdit"
                />
              </template>

              <template #businessInformation>
                <FormBusiness
                  v-if="
                    indexTab !== undefined &&
                    formData.customerBranch?.[indexTab]
                  "
                  v-model:employment-office="
                    formData.customerBranch[indexTab].employmentOffice
                  "
                  v-model:bussiness-type="
                    formData.customerBranch[indexTab].bussinessType
                  "
                  v-model:bussiness-type-en="
                    formData.customerBranch[indexTab].bussinessTypeEN
                  "
                  v-model:job-position="
                    formData.customerBranch[indexTab].jobPosition
                  "
                  v-model:job-position-en="
                    formData.customerBranch[indexTab].jobPositionEN
                  "
                  v-model:job-description="
                    formData.customerBranch[indexTab].jobDescription
                  "
                  v-model:sale-employee="
                    formData.customerBranch[indexTab].saleEmployee
                  "
                  v-model:pay-date="formData.customerBranch[indexTab].payDate"
                  v-model:wage-rate="formData.customerBranch[indexTab].wageRate"
                  separator
                  dense
                  outlined
                  :readonly="!infoDrawerEdit"
                />
              </template>
              <template #about>
                <AboutComponent
                  v-if="
                    indexTab !== undefined &&
                    formData.customerBranch?.[indexTab]
                  "
                  :type-customer="customerType"
                  v-model:customer-name="formData.customerBranch[indexTab].name"
                  v-model:customer-english-name="
                    formData.customerBranch[indexTab].nameEN
                  "
                  v-model:authorized-capital="
                    formData.customerBranch[indexTab].authorizedCapital
                  "
                  v-model:register-name="
                    formData.customerBranch[indexTab].registerName
                  "
                  v-model:register-date="
                    formData.customerBranch[indexTab].registerDate
                  "
                  dense
                  outlined
                  bordered
                  separator
                  :readonly="!infoDrawerEdit"
                />
              </template>
              <template #contactInformation>
                <ContactComponent
                  v-if="
                    indexTab !== undefined &&
                    formData.customerBranch?.[indexTab]
                  "
                  v-model:mail="formData.customerBranch[indexTab].email"
                  v-model:telephone="
                    formData.customerBranch[indexTab].telephoneNo
                  "
                  dense
                  outlined
                  separator
                  :readonly="!infoDrawerEdit"
                />
              </template>
              <template #otherDocuments>
                <OtherInformation
                  v-if="
                    indexTab !== undefined &&
                    formData.customerBranch?.[indexTab]
                  "
                  dense
                  outlined
                  :readonly="!infoDrawerEdit"
                />
              </template>
            </TabComponent>
          </div>
        </template>
      </InfoForm>
    </template>
  </DrawerInfo>

  <!-- DRAWER INFO ของ สาขา -->
  <DrawerInfo
    :title="$t('formTitleBranch', { msg: currentBranch.name })"
    v-model:drawer-open="infoDrawerBranch"
    :badgeLabel="currentBranch.code"
    badgeClass="app-bg-pers"
    :undo="() => undo()"
    :isEdit="infoDrawerEdit"
    :close="() => onCloseBranch()"
    :editData="() => (infoDrawerEdit = true)"
    :deleteData="() => deleteBranchId(currentBranchId)"
    :submit="
      () => {
        submitBranch();
      }
    "
  >
    <template #info>
      <InfoForm>
        <template #person-card>
          <div class="q-ma-md">
            <AppBox class="surface-1" style="padding: 0">
              <UsersDetailCardComponent
                :hideButton="true"
                v-if="!!currentCustomer"
                no-bg
                no-detail
                no-hover
                :color="
                  currentCustomer.customerType === 'CORP' ? 'purple' : 'green'
                "
                :metadata="{ id: '1', disabled: false }"
                :list="{
                  id: '1',
                  type: currentCustomer.customerType,
                  name: currentCustomer.customerName,
                  imageUrl: currentCustomer.imageUrl,
                  code: 'HQ006',
                }"
              />
            </AppBox>
          </div>
        </template>
        <template #information>
          <BasicInformation
            dense
            outlined
            separator
            :readonly="true"
            :type-customer="customerType"
            v-model:customer-name="formData.customerName"
            v-model:customer-name-en="formData.customerNameEN"
            v-model:person-name="formData.personName"
            v-model:tax-no="formData.taxNo"
          />
        </template>

        <template #address>
          <div class="col-3 app-text-muted">
            • {{ $t('formDialogCustomerBranch') }}
          </div>

          <div class="col-12 row bordered q-pt-none rounded">
            <TabComponent
              :readonly="true"
              v-model:customer-branch="formData.customerBranch"
              v-model:tab-index="indexTab"
            >
              <template #address>
                <FormAddress
                  :id="indexTab"
                  v-if="
                    indexTab !== undefined &&
                    formData.customerBranch?.[indexTab]
                  "
                  v-model:address="formData.customerBranch[indexTab].address"
                  v-model:address-e-n="
                    formData.customerBranch[indexTab].addressEN
                  "
                  v-model:province-id="
                    formData.customerBranch[indexTab].provinceId
                  "
                  v-model:district-id="
                    formData.customerBranch[indexTab].districtId
                  "
                  v-model:sub-district-id="
                    formData.customerBranch[indexTab].subDistrictId
                  "
                  v-model:zip-code="formData.customerBranch[indexTab].zipCode"
                  separator
                  dense
                  outlined
                  :readonly="!infoDrawerEdit"
                />
              </template>

              <template #businessInformation>
                <FormBusiness
                  v-if="
                    indexTab !== undefined &&
                    formData.customerBranch?.[indexTab]
                  "
                  v-model:employment-office="
                    formData.customerBranch[indexTab].employmentOffice
                  "
                  v-model:bussiness-type="
                    formData.customerBranch[indexTab].bussinessType
                  "
                  v-model:bussiness-type-en="
                    formData.customerBranch[indexTab].bussinessTypeEN
                  "
                  v-model:job-position="
                    formData.customerBranch[indexTab].jobPosition
                  "
                  v-model:job-position-en="
                    formData.customerBranch[indexTab].jobPositionEN
                  "
                  v-model:job-description="
                    formData.customerBranch[indexTab].jobDescription
                  "
                  v-model:sale-employee="
                    formData.customerBranch[indexTab].saleEmployee
                  "
                  v-model:pay-date="formData.customerBranch[indexTab].payDate"
                  v-model:wage-rate="formData.customerBranch[indexTab].wageRate"
                  separator
                  dense
                  outlined
                  :readonly="!infoDrawerEdit"
                />
              </template>
              <template #about>
                <AboutComponent
                  v-if="formData.customerBranch?.[0]"
                  :type-customer="customerType"
                  v-model:customer-name="formData.customerBranch[indexTab].name"
                  v-model:customer-english-name="
                    formData.customerBranch[indexTab].nameEN
                  "
                  v-model:authorized-capital="
                    formData.customerBranch[indexTab].authorizedCapital
                  "
                  v-model:register-name="
                    formData.customerBranch[indexTab].registerName
                  "
                  v-model:register-date="
                    formData.customerBranch[indexTab].registerDate
                  "
                  dense
                  outlined
                  bordered
                  separator
                  :readonly="!infoDrawerEdit"
                />
              </template>
              <template #contactInformation>
                <ContactComponent
                  v-if="
                    indexTab !== undefined &&
                    formData.customerBranch?.[indexTab]
                  "
                  v-model:mail="formData.customerBranch[indexTab].email"
                  v-model:telephone="
                    formData.customerBranch[indexTab].telephoneNo
                  "
                  dense
                  outlined
                  separator
                  :readonly="!infoDrawerEdit"
                />
              </template>
              <template #otherDocuments>
                <OtherInformation
                  v-if="
                    indexTab !== undefined &&
                    formData.customerBranch?.[indexTab]
                  "
                  dense
                  outlined
                  :readonly="!infoDrawerEdit"
                />
              </template>
            </TabComponent>
          </div>
        </template>
      </InfoForm>
    </template>
  </DrawerInfo>

  <!-- Employee Info -->
  <DrawerInfo
    :title="
      currentEmployee
        ? $i18n.locale === 'en-US'
          ? `${currentEmployee.firstNameEN} ${currentEmployee.lastNameEN}`
          : `${currentEmployee.firstName} ${currentEmployee.lastName}`
        : '-'
    "
    v-model:drawer-open="infoDrawerEmployee"
    :is-edit="infoDrawerEmployeeEdit"
    :editData="() => (infoDrawerEmployeeEdit = true)"
    :undo="undo"
    :close="clearFormEmployee"
    :deleteData="
      () => {
        currentEmployee && onDelete(currentEmployee.id);
      }
    "
    :submit="
      () => {
        currentEmployee && onSubmitEdit(currentEmployee.id);
      }
    "
    bg-color="surface-tab"
  >
    <InfoForm
      v-if="employeeStore.globalOption"
      :readonly="!infoDrawerEmployeeEdit"
      :noAddress="formDataEmployeeTab !== 'personalInfo'"
      :noPaddingTab="
        formDataEmployeeTab === 'healthCheck' ||
        formDataEmployeeTab === 'workHistory'
      "
      v-model:same-with-employer="formDataEmployeeSameAddr"
      v-model:tabs-list="employeeTab"
      v-model:employee-tab="formDataEmployeeTab"
      v-model:address="formDataEmployee.address"
      v-model:addressEN="formDataEmployee.addressEN"
      v-model:provinceId="formDataEmployee.provinceId"
      v-model:districtId="formDataEmployee.districtId"
      v-model:subDistrictId="formDataEmployee.subDistrictId"
      v-model:zipCode="formDataEmployee.zipCode"
      disabledRule
      employee
    >
      <template #person-card>
        <div class="q-ma-md">
          <AppBox class="surface-1" style="padding: 0">
            <PersonCard
              no-hover
              no-action
              no-detail
              no-bg
              :list="infoEmployeePersonCard"
              :gridColumns="1"
            />
          </AppBox>
        </div>
      </template>
      <template #information>
        <BasicInformation
          v-if="formDataEmployeeTab === 'personalInfo'"
          employee
          dense
          outlined
          separator
          :readonly="!infoDrawerEmployeeEdit"
          :employee-owner-option="employeeStore.ownerOption"
          v-model:customer-branch="formDataEmployeeOwner"
          v-model:employee-id="currentEmployeeCode"
          v-model:nrc-no="formDataEmployee.nrcNo"
          v-model:person-name="formData.personName"
          @filter-owner-branch="employeeFilterOwnerBranch"
        />
      </template>

      <template #person>
        <FormPerson
          v-if="formDataEmployeeTab === 'personalInfo'"
          dense
          outlined
          employee
          separator
          :readonly="!infoDrawerEmployeeEdit"
          v-model:firstName="formDataEmployee.firstName"
          v-model:lastName="formDataEmployee.lastName"
          v-model:firstNameEN="formDataEmployee.firstNameEN"
          v-model:lastNameEN="formDataEmployee.lastNameEN"
          v-model:gender="formDataEmployee.gender"
          v-model:birthDate="formDataEmployee.dateOfBirth"
          v-model:nationality="formDataEmployee.nationality"
        />

        <FormEmployeeHealthCheck
          v-if="
            formDataEmployeeTab === 'healthCheck' &&
            formDataEmployee.employeeCheckup
          "
          :readonly="!infoDrawerEmployeeEdit"
          dense
          outlined
          v-model:employee-checkup="formDataEmployee.employeeCheckup"
          v-model:checkup-type-option="
            employeeStore.globalOption.tha.nationality
          "
          v-model:medical-benefit-option="
            employeeStore.globalOption.tha.typeInsurance
          "
          v-model:insurance-company-option="
            employeeStore.globalOption.tha.insurancePlace
          "
        />
        <FormEmployeeWorkHistory
          v-if="formDataEmployeeTab === 'workHistory'"
          dense
          outlined
          :readonly="!infoDrawerEmployeeEdit"
          v-model:employee-work="formDataEmployee.employeeWork"
          v-model:position-name-option="employeeStore.globalOption.tha.position"
          v-model:job-type-option="employeeStore.globalOption.tha.businessType"
          v-model:workplace-option="employeeStore.globalOption.tha.area"
        />
        <FormEmployeeOther
          v-if="
            formDataEmployeeTab === 'other' &&
            formDataEmployee.employeeOtherInfo
          "
          :readonly="!infoDrawerEmployeeEdit"
          dense
          outlined
          v-model:employee-other="formDataEmployee.employeeOtherInfo"
        />
      </template>
      <template #by-type>
        <FormEmployeePassport
          v-if="formDataEmployeeTab === 'personalInfo'"
          dense
          outlined
          employee
          separator
          :readonly="!infoDrawerEmployeeEdit"
          v-model:passport-type="formDataEmployee.passportType"
          v-model:passport-number="formDataEmployee.passportNumber"
          v-model:passport-issue-date="formDataEmployee.passportIssueDate"
          v-model:passport-expiry-date="formDataEmployee.passportExpiryDate"
          v-model:passport-issuing-place="formDataEmployee.passportIssuingPlace"
          v-model:passport-issuing-country="
            formDataEmployee.passportIssuingCountry
          "
          v-model:previous-passport-reference="
            formDataEmployee.previousPassportReference
          "
          v-model:passport-type-option="
            employeeStore.globalOption.tha.nationality
          "
          v-model:passport-issuing-country-option="
            employeeStore.globalOption.tha.nationality
          "
        />
        <FormEmployeeVisa
          v-if="formDataEmployeeTab === 'personalInfo'"
          dense
          outlined
          employee
          :readonly="!infoDrawerEmployeeEdit"
          v-model:visa-type="formDataEmployee.visaType"
          v-model:visa-number="formDataEmployee.visaNumber"
          v-model:visa-issue-date="formDataEmployee.visaIssueDate"
          v-model:visa-expiry-date="formDataEmployee.visaExpiryDate"
          v-model:visa-issuing-place="formDataEmployee.visaIssuingPlace"
          v-model:visa-stay-until-date="formDataEmployee.visaStayUntilDate"
          v-model:tm6-number="formDataEmployee.tm6Number"
          v-model:entry-date="formDataEmployee.entryDate"
          v-model:visa-type-option="employeeStore.globalOption.tha.nationality"
        />
      </template>
    </InfoForm>
  </DrawerInfo>
</template>

<style scoped>
.customer-row {
  display: grid;
  gap: var(--size-6);
  transition: 0.3s ease-in-out;
}

.hover-card:hover {
  cursor: pointer;
  border-radius: 10px;
  box-shadow: var(--shadow-3);
}
</style>