<script lang="ts" setup>
import { pageTabs, fieldSelectedOption } from './constants';

import { onMounted, reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import { storeToRefs } from 'pinia';

// NOTE: Import stores
import useProductServiceStore from 'src/stores/product-service';
import { useQuotationStore } from 'src/stores/quotations';
import { baseUrl, waitAll } from 'src/stores/utils';
import useCustomerStore from 'stores/customer';
import useEmployeeStore from 'stores/employee';
import useFlowStore from 'src/stores/flow';
import useOcrStore from 'stores/ocr';
import useMyBranch from 'stores/my-branch';
import { useQuotationForm } from './form';

// NOTE  Import Types
import { CustomerBranchCreate } from 'stores/customer/types';
import { Employee } from 'src/stores/employee/types';

// NOTE: Import Components
import BasicInformation from 'components/03_customer-management/employee/BasicInformation.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 QuotationCard from 'src/components/05_quotation/QuotationCard.vue';
import PaginationComponent from 'src/components/PaginationComponent.vue';
import StatCardComponent from 'src/components/StatCardComponent.vue';
import FormAbout from 'src/components/05_quotation/FormAbout.vue';
import SelectZone from 'src/components/shared/SelectZone.vue';
import PersonCard from 'src/components/shared/PersonCard.vue';
import ProductServiceForm from './ProductServiceForm.vue';
import CreateButton from 'src/components/AddButton.vue';
import ItemCard from 'src/components/ItemCard.vue';
import DialogForm from 'components/DialogForm.vue';
import { AddButton } from 'src/components/button';
import SideMenu from 'components/SideMenu.vue';
import ButtonAddComponent from 'components/ButtonAddCompoent.vue';

import {
  uploadFileListEmployee,
  columnsAttachment,
  dialogCreateCustomerItem,
} from 'src/pages/03_customer-management/constant';
import {
  ProductGroup,
  ProductList,
  Service,
} from 'src/stores/product-service/types';

import { EmployeeWorker } from 'src/stores/quotations/types';

import {
  EditButton,
  DeleteButton,
  SaveButton,
  UndoButton,
} from 'components/button';

import ProfileBanner from 'components/ProfileBanner.vue';
import { AddressForm } from 'components/form';
import {
  EmployerFormBusiness,
  EmployerFormContact,
  EmployerFormAbout,
} from 'src/pages/03_customer-management/components';

import {
  useCustomerForm,
  useEmployeeForm,
} from 'src/pages/03_customer-management/form';
import QuotationView from './QuotationView.vue';
import { watch } from 'vue';

const quotationFormStore = useQuotationForm();
const customerFormStore = useCustomerForm();
const employeeFormStore = useEmployeeForm();
const employeeStore = useEmployeeStore();
const customerStore = useCustomerStore();
const flowStore = useFlowStore();
const userBranch = useMyBranch();
const ocrStore = useOcrStore();

const { currentFormData: quotationFormData } = storeToRefs(quotationFormStore);
const { state: customerFormState, currentFormData: customerFormData } =
  storeToRefs(customerFormStore);
const { state: employeeFormState, currentFromDataEmployee } =
  storeToRefs(employeeFormStore);
const { currentMyBranch } = storeToRefs(userBranch);

const branchId = ref('');
const currentCustomerId = ref<string | undefined>();
const refreshImageState = ref(false);
const emptyCreateDialog = ref(false);
const onCreateImageList = ref<{
  selectedImage: string;
  list: { url: string; imgFile: File | null; name: string }[];
}>({ selectedImage: '', list: [] });

const tabFieldRequired = ref<{ [key: string]: (keyof CustomerBranchCreate)[] }>(
  {
    main: [],
    business: ['businessType', 'jobPosition'],
    address: [
      'homeCode',
      'address',
      'addressEN',
      'provinceId',
      'districtId',
      'subDistrictId',
    ],
    contact: [],
  },
);

const productServiceStore = useProductServiceStore();
const router = useRouter();

type ProductGroupId = string;

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

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

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

const selectedEmployee = ref<Employee[]>([]);

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

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

const statData = ref<
  {
    icon: string;
    count: number;
    label: string;
    color:
      | 'pink'
      | 'purple'
      | 'green'
      | 'orange'
      | 'cyan'
      | 'yellow'
      | 'red'
      | 'magenta'
      | 'blue'
      | 'lime'
      | 'light-purple';
  }[]
>([
  {
    icon: 'mdi-cash',
    count: 0,
    label: 'quotation.type.fullAmountCash',
    color: 'red',
  },
  {
    icon: 'mdi-hand-coin-outline',
    count: 0,
    label: 'quotation.type.installmentsCash',
    color: 'blue',
  },
  {
    icon: 'mdi-receipt-text-outline',
    count: 0,
    label: 'quotation.type.fullAmountBill',
    color: 'lime',
  },
  {
    icon: 'mdi-receipt-text-send-outline',
    count: 0,
    label: 'quotation.type.installmentsBill',
    color: 'light-purple',
  },
]);

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

const formDataCustomerBranch = ref<
  CustomerBranchCreate & {
    id?: string;
    branchCode?: string;
    codeCustomer?: string;
  }
>({
  customerCode: '',
  customerId: '',
  legalPersonNo: '',
  citizenId: '',
  namePrefix: '',
  firstName: '',
  lastName: '',
  firstNameEN: '',
  lastNameEN: '',
  telephoneNo: '',
  gender: '',
  birthDate: new Date().toString(),
  businessType: '',
  jobPosition: '',
  jobDescription: '',
  payDate: '',
  payDateEN: '',
  wageRate: 0,
  wageRateText: '',
  homeCode: '',
  employmentOffice: '',
  employmentOfficeEN: '',
  address: '',
  addressEN: '',
  street: '',
  streetEN: '',
  moo: '',
  mooEN: '',
  soi: '',
  soiEN: '',
  provinceId: '',
  districtId: '',
  subDistrictId: '',
  contactName: '',
  email: '',
  contactTel: '',
  officeTel: '',
  agent: '',
  status: 'CREATED',
  customerName: '',
  registerName: '',
  registerNameEN: '',
  registerDate: new Date(),
  authorizedCapital: '',
  authorizedName: '',
  authorizedNameEN: '',
  code: '',
});

function setDefaultCustomerd() {
  customerFormData.value.customerBranch = [
    {
      customerCode: '',
      customerId: '',
      legalPersonNo: '',
      citizenId: '',
      namePrefix: '',
      firstName: '',
      lastName: '',
      firstNameEN: '',
      lastNameEN: '',
      telephoneNo: '',
      gender: '',
      birthDate: new Date().toString(),
      businessType: '',
      jobPosition: '',
      jobDescription: '',
      payDate: '',
      payDateEN: '',
      wageRate: 0,
      wageRateText: '',
      homeCode: '',
      employmentOffice: '',
      employmentOfficeEN: '',
      address: '',
      addressEN: '',
      street: '',
      streetEN: '',
      moo: '',
      mooEN: '',
      soi: '',
      soiEN: '',
      provinceId: '',
      districtId: '',
      subDistrictId: '',
      contactName: '',
      email: '',
      contactTel: '',
      officeTel: '',
      agent: '',
      status: 'CREATED',
      customerName: '',
      registerName: '',
      registerNameEN: '',
      registerDate: new Date(),
      authorizedCapital: '',
      authorizedName: '',
      authorizedNameEN: '',
      code: '',
    },
  ];
}

function submitCustomer() {
  if (currentMyBranch.value === undefined) return;

  const { code, customerCode, birthDate, ...payload } =
    formDataCustomerBranch.value;

  customerFormData.value.customerBranch = [{ ...payload }];
  customerFormData.value.registeredBranchId = currentMyBranch.value.id;
  customerFormStore.submitFormCustomer();
  customerFormState.value.dialogType = 'info';
  customerFormState.value.editCustomerId = '218554';
}

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

function triggerCreateCustomerd(opts: { type: 'CORP' | 'PERS' }) {
  setDefaultCustomerd();
  customerFormState.value.dialogType = 'create';
  customerFormData.value.customerType = opts?.type;
  customerFormState.value.dialogModal = true;
}

function triggerSelectTypeCustomerd() {
  emptyCreateDialog.value = true;
}

function triggerAddQuotationDialog() {
  pageState.addModal = true;
  // TODO: form and state controll
}

function triggerQuotationDialog() {
  window.open(
    `/quotation/add-quotation?branchId=${branchId.value}&customerBranchId=${quotationFormData.value.customerBranchId}&date=${Date.now()}`,
    '_blank',
  );
  // TODO: form and state controll
}

function triggerSelectEmployeeDialog() {
  pageState.employeeModal = true;
  // TODO: form and state controll
}

function triggerProductServiceDialog() {
  pageState.productServiceModal = true;
  // TODO: form and state controll
}

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

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

async function getProduct(id: string, force = false) {
  selectedGroupSub.value = 'product';
  selectedProductServiceId.value = id;
  if (!force && product.value[id] !== undefined) return;
  const ret = await productServiceStore.fetchListProductById(id);
  if (ret) product.value[id] = ret;
}

async function getService(id: string, force = false) {
  selectedGroupSub.value = 'service';
  selectedProductServiceId.value = id;
  if (!force && service.value[id] !== undefined) return;
  const ret = await productServiceStore.fetchListServiceById(id);
  if (ret) service.value[id] = ret;
}

function convertToTree() {
  // TODO: convert quotation product service data to tree
}

const quotationStore = useQuotationStore();
const {
  data: quotationData,
  page: quotationPage,
  pageSize: quotationPageSize,
  pageMax: quotationPageMax,
} = storeToRefs(quotationStore);

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

  {
    const ret = await quotationStore.getQuotationList({
      page: quotationPage.value,
      pageSize: quotationPageSize.value,
    });

    if (ret) {
      quotationData.value = ret.result;
      quotationPageMax.value = Math.ceil(ret.total / quotationPageSize.value);
    }
  }

  flowStore.rotate();
});

async function fetchQuotationList() {
  const ret = await quotationStore.getQuotationList({
    page: quotationPage.value,
    pageSize: quotationPageSize.value,
    payCondition:
      pageState.currentTab !== 'all'
        ? (
            {
              fullAmountCash: 'Full',
              installmentsCash: 'Split',
              fullAmountBill: 'BillFull',
              installmentsBill: 'BillSplit',
            } as const
          )[pageState.currentTab]
        : undefined,
  });

  if (ret) {
    quotationData.value = ret.result;
    quotationPageMax.value = Math.ceil(ret.total / quotationPageSize.value);
  }

  flowStore.rotate();
}

watch(() => pageState.currentTab, fetchQuotationList);
</script>

<template>
  <ButtonAddComponent
    hide-icon
    style="z-index: 999"
    @click.stop="triggerAddQuotationDialog"
  />

  <div class="column full-height no-wrap">
    <!-- SEC: stat -->
    <section class="text-body-2 q-mb-xs flex items-center">
      {{ $t('general.dataSum') }}
      <q-badge
        rounded
        class="q-ml-sm"
        style="
          background-color: hsla(var(--info-bg) / 0.15);
          color: hsl(var(--info-bg));
        "
      >
        {{ '0' }}
      </q-badge>
      <q-btn
        class="q-ml-sm"
        icon="mdi-pin-outline"
        color="primary"
        size="sm"
        flat
        dense
        rounded
        @click="pageState.hideStat = !pageState.hideStat"
        :style="pageState.hideStat ? 'rotate: 90deg' : ''"
        style="transition: 0.1s ease-in-out"
      />
      <q-btn
        class="q-ml-sm"
        label="add"
        color="primary"
        size="sm"
        flat
        dense
        @click="triggerSelectEmployeeDialog"
        :style="pageState.hideStat ? 'rotate: 90deg' : ''"
        style="transition: 0.1s ease-in-out"
      />
      <q-btn
        class="q-ml-sm"
        label="quo"
        color="primary"
        size="sm"
        flat
        dense
        @click="triggerQuotationDialog"
        :style="pageState.hideStat ? 'rotate: 90deg' : ''"
        style="transition: 0.1s ease-in-out"
      />
      <q-btn
        class="q-ml-sm"
        label="proserv"
        color="primary"
        size="sm"
        flat
        dense
        @click="triggerProductServiceDialog"
        :style="pageState.hideStat ? 'rotate: 90deg' : ''"
        style="transition: 0.1s ease-in-out"
      />
    </section>

    <transition name="slide">
      <div v-if="!pageState.hideStat" class="scroll q-mb-md">
        <div style="display: inline-block">
          <StatCardComponent
            labelI18n
            :branch="
              pageState.currentTab === 'all'
                ? statData
                : statData.filter((i) =>
                    i.label.split('.').pop()?.includes(pageState.currentTab),
                  )
            "
            :dark="$q.dark.isActive"
          />
        </div>
      </div>
    </transition>

    <!-- SEC: header content -->
    <header class="col surface-1 rounded">
      <div class="column full-height">
        <section
          class="row surface-3 justify-between full-width items-center bordered-b"
          style="z-index: 1"
        >
          <div class="row q-py-sm q-px-md justify-between full-width">
            <q-input
              for="input-search"
              outlined
              dense
              :label="$t('general.search')"
              class="q-mr-md col-12 col-md-3"
              :bg-color="$q.dark.isActive ? 'dark' : 'white'"
              v-model="pageState.inputSearch"
              debounce="200"
            >
              <template #prepend>
                <q-icon name="mdi-magnify" />
              </template>
            </q-input>

            <div
              class="row col-12 col-md-5"
              :class="{ 'q-pt-xs': $q.screen.lt.md }"
              style="white-space: nowrap"
            >
              <q-select
                v-model="pageState.statusFilter"
                outlined
                dense
                option-value="value"
                option-label="label"
                class="col"
                :class="{ 'offset-md-5': pageState.gridView }"
                map-options
                emit-value
                :for="'field-select-status'"
                :hide-dropdown-icon="$q.screen.lt.sm"
                :options="[
                  { label: $t('general.all'), value: 'all' },
                  { label: $t('general.active'), value: 'active' },
                  { label: $t('general.inactive'), value: 'inactive' },
                ]"
              ></q-select>

              <q-select
                v-if="!pageState.gridView"
                id="select-field"
                for="select-field"
                class="col q-ml-sm"
                :options="
                  fieldSelectedOption.map((v) => ({
                    ...v,
                    label: $t(v.label),
                  }))
                "
                :display-value="$t('general.displayField')"
                :hide-dropdown-icon="$q.screen.lt.sm"
                v-model="pageState.fieldSelected"
                option-label="label"
                option-value="value"
                map-options
                emit-value
                outlined
                multiple
                dense
              />

              <q-btn-toggle
                id="btn-mode"
                v-model="pageState.gridView"
                dense
                class="no-shadow bordered rounded surface-1 q-ml-sm"
                :toggle-color="$q.dark.isActive ? 'grey-9' : 'grey-2'"
                size="xs"
                :options="[
                  { value: true, slot: 'folder' },
                  { value: false, slot: 'list' },
                ]"
              >
                <template v-slot:folder>
                  <q-icon
                    name="mdi-view-grid-outline"
                    size="16px"
                    class="q-px-sm q-py-xs rounded"
                    :style="{
                      color: $q.dark.isActive
                        ? pageState.gridView
                          ? '#C9D3DB '
                          : '#787B7C'
                        : pageState.gridView
                          ? '#787B7C'
                          : '#C9D3DB',
                    }"
                  />
                </template>
                <template v-slot:list>
                  <q-icon
                    name="mdi-format-list-bulleted"
                    class="q-px-sm q-py-xs rounded"
                    size="16px"
                    :style="{
                      color: $q.dark.isActive
                        ? pageState.gridView === false
                          ? '#C9D3DB'
                          : '#787B7C'
                        : pageState.gridView === false
                          ? '#787B7C'
                          : '#C9D3DB',
                    }"
                  />
                </template>
              </q-btn-toggle>
            </div>
          </div>
        </section>

        <nav class="surface-2 bordered-b q-px-md full-width">
          <q-tabs
            inline-label
            mobile-arrows
            dense
            v-model="pageState.currentTab"
            align="left"
            class="full-width"
            active-color="info"
          >
            <q-tab
              v-for="tab in pageTabs"
              :name="tab"
              :key="tab"
              @click="
                () => {
                  quotationPage = 1;

                  pageState.currentTab = tab;
                  pageState.inputSearch = '';
                  pageState.statusFilter = 'all';

                  flowStore.rotate();
                }
              "
            >
              <div
                class="row text-capitalize"
                :class="
                  pageState.currentTab === tab ? 'text-bold' : 'app-text-muted'
                "
              >
                {{ $t(`quotation.type.${tab}`) }}
              </div>
            </q-tab>
          </q-tabs>
        </nav>
        <!-- SEC: body content -->
        <article
          v-if="!quotationData || quotationData.length === 0"
          class="col surface-2 flex items-center justify-center"
        >
          <CreateButton
            @click="triggerAddQuotationDialog"
            label="general.add"
            :i18n-args="{ text: $t('quotation.title') }"
          />
        </article>
        <article v-else class="col q-pa-md surface-2 scroll">
          <div class="row q-col-gutter-md">
            <div v-for="v in quotationData" :key="v.id" class="col-md-4 col-12">
              <QuotationCard
                :type="
                  pageState.currentTab !== 'all'
                    ? pageState.currentTab
                    : {
                        Full: 'fullAmountCash',
                        Split: 'installmentsCash',
                        BillFull: 'fullAmountBill',
                        BillSplit: 'installmentsBill',
                      }[v.payCondition]
                "
                :code="v.code"
                :title="v.workName"
                :date="new Date(v.createdAt).toLocaleString()"
                :amount="v.workerCount"
                :customer-name="
                  v.customerBranch.registerName ||
                  `${v.customerBranch.firstName || '-'} ${v.customerBranch.lastName || ''}`
                "
                :reporter="v.actorName"
                :total-price="v.totalPrice"
                @view="quotationFormStore.assignFormData(v.id)"
                @edit="quotationFormStore.assignFormData(v.id, 'edit')"
                @link="console.log('link')"
                @upload="console.log('upload')"
                @delete="console.log('delete')"
                @change-status="console.log('change')"
              />
            </div>
          </div>
        </article>

        <!-- SEC: footer content -->
        <footer
          class="row justify-between items-center q-px-md q-py-sm surface-2"
          v-if="quotationPageMax > 0"
        >
          <div class="col-4">
            <div class="row items-center no-wrap">
              <div class="app-text-muted q-mr-sm" v-if="$q.screen.gt.sm">
                {{ $t('general.recordPerPage') }}
              </div>
              <div>
                <q-btn-dropdown
                  dense
                  unelevated
                  :label="quotationPageSize"
                  class="bordered q-pl-md"
                >
                  <q-list>
                    <q-item
                      v-for="v in [10, 30, 50, 100, 500, 1000]"
                      :key="v"
                      clickable
                      v-close-popup
                      @click="quotationPageSize = v"
                    >
                      <q-item-section>
                        <q-item-label>{{ v }}</q-item-label>
                      </q-item-section>
                    </q-item>
                  </q-list>
                </q-btn-dropdown>
              </div>
            </div>
          </div>
          <div class="col-4 row justify-center app-text-muted">
            {{
              $t('general.recordsPage', {
                resultcurrentPage: 0,
                total: 0,
              })
            }}
          </div>
          <nav class="col-4 row justify-end">
            <PaginationComponent
              v-model:current-page="quotationPage"
              v-model:max-page="quotationPageMax"
              :fetch-data="fetchQuotationList"
            />
          </nav>
        </footer>
      </div>
    </header>
  </div>

  <!-- NOTE: SEC START - Dialog -->

  <!-- NOTE: START - Quotation Form -->

  <DialogForm
    :title="$t('general.add', { text: $t('quotation.title') })"
    v-model:modal="pageState.addModal"
    :submit-label="$t('general.add', { text: $t('quotation.title') })"
    submit-icon="mdi-check"
    height="auto"
    width="60vw"
    :submit="() => triggerQuotationDialog()"
    :close="
      () => {
        branchId = '';
        quotationFormData.customerBranchId = '';
      }
    "
  >
    <header class="q-mx-lg q-mt-lg">
      <ProfileBanner
        img="/images/quotation-bg-avatar.png"
        fallback-cover="/images/quotation-banner.png"
        bg-color="var(--surface-1)"
        :title="$t('general.itemNo', { msg: $t('quotation.title') })"
        hideActive
        readonly
        noImageAction
        hideFade
      />
    </header>
    <section class="col surface-1 q-ma-lg rounded bordered row scroll">
      <div
        class="col-12 q-px-md q-py-lg"
        id="customer-form-content"
        style="height: 100%; max-height: 100%; overflow-y: auto"
      >
        <FormAbout
          v-model:branch-id="branchId"
          v-model:customer-branch-id="quotationFormData.customerBranchId"
          @add-customer="triggerSelectTypeCustomerd()"
        />
      </div>
    </section>
  </DialogForm>

  <!-- NOTE: END - Quotation Form -->

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

  <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"
  >
    <section class="col row scroll">
      <SelectZone
        v-model:selected-item="selectedEmployee"
        :items="[
          {
            name: 'มิเคล่า สุวรรณดี',
            gender: 'female',
            telephoneNo: '0621249602',
            code: 'CORP000000-1-01-240001',
            birthDate: '16 ปี 11 เดือน 5 วัน',
          },
          {
            name: 'มิลิเซนต์ สุวรรณดี',
            gender: 'female',
            telephoneNo: '0621249666',
            code: 'CORP000000-1-01-240002',
            birthDate: '19 ปี 2 เดือน 2 วัน',
          },
          {
            name: 'ไรคาร์ด พวงศรี',
            gender: 'male',
            telephoneNo: '0621249777',
            code: 'CORP000000-1-01-240003',
            birthDate: '39 ปี 5 เดือน 2 วัน',
          },
        ]"
      >
        <template #top>
          <AddButton
            icon-only
            @click="
              () => {
                triggerCreateEmployee();
              }
            "
          />
        </template>
        <template #data="{ item }">
          <PersonCard
            noAction
            prefixId="asda"
            class="full-width"
            :data="{
              name: item.name,
              code: item.code,
              female: item.gender === 'female',
              male: item.gender === 'male',
              img: 'images/employee-avatar.png',
              detail: [
                { icon: 'mdi-phone-outline', value: item.telephoneNo },
                { icon: 'mdi-clock-outline', value: item.birthDate },
              ],
            }"
          ></PersonCard>
        </template>
      </SelectZone>
    </section>
  </DialogForm>

  <!-- NOTE: END - Employee Select Form -->

  <!-- NOTE: START - Customer / Employer Type Select Form -->

  <DialogForm
    v-model:modal="emptyCreateDialog"
    :title="$t('customer.employerType')"
    hide-footer
    no-app-box
    width="40vw"
    height="250px"
    :close="
      () => {
        emptyCreateDialog = false;
        onCreateImageList = { selectedImage: '', list: [] };
      }
    "
  >
    <div class="full-height row q-pa-md">
      <ItemCard
        class="col q-mx-sm full-height"
        v-for="value in dialogCreateCustomerItem"
        :key="value.text"
        :icon="value.icon"
        :text="value.text"
        :icon-color="value.iconColor"
        :bg-color="value.color"
        @trigger="
          () => {
            triggerCreateCustomerd({
              type:
                value.text === 'customer.employerLegalEntity' ? 'CORP' : 'PERS',
            });
            emptyCreateDialog = false;
          }
        "
      />
    </div>
  </DialogForm>

  <!-- NOTE: END - Customer / Employer Type Form -->

  <!-- NOTE: START - Customer / Employer Form -->

  <DialogForm
    hide-footer
    ref="formDialogRef"
    v-model:modal="customerFormState.dialogModal"
    :title="
      customerFormState.dialogType === 'create'
        ? $t(`general.add`, {
            text: `${$t('customer.employer')} `,
          })
        : `${$t('customer.employer')} `
    "
    :submit="
      () => {
        submitCustomer();
      }
    "
    :close="
      () => {
        customerFormState.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
        v-if="customerFormData.customerBranch !== undefined"
        active
        hide-fade
        :fallback-cover="`/images/customer-${customerFormData.customerType}-banner-bg.jpg`"
        :img="
          customerFormState.customerImageUrl ||
          `/images/customer-${customerFormData.customerType}-avartar-${customerFormData.customerType === 'PERS' ? customerFormData.customerBranch[0]?.gender : 'male'}.png`
        "
        :fallbackImg="`/images/customer-${customerFormData.customerType}-avartar-${customerFormData.customerType === 'PERS' ? customerFormData.customerBranch[0]?.gender : 'male'}.png`"
        :color="`hsla(var(--${customerFormData.customerType === 'PERS' ? 'teal-10-hsl' : 'violet-11-hsl'})/1)`"
        :bg-color="`hsla(var(--${customerFormData.customerType === 'PERS' ? 'teal-10-hsl' : 'violet-11-hsl'})/0.1)`"
        :icon="
          customerFormData.customerType === 'PERS'
            ? 'mdi-account-plus-outline'
            : 'mdi-office-building-outline'
        "
        :title="
          customerFormData.customerType === 'PERS'
            ? `${customerFormData.customerBranch[0]?.firstName || ''} ${customerFormData.customerBranch[0]?.lastName || ''}`
            : customerFormData.customerBranch[0]?.registerName || ''
        "
        :caption="
          customerFormData.customerType === 'PERS'
            ? `${customerFormData.customerBranch[0]?.firstNameEN || ''} ${customerFormData.customerBranch[0]?.lastNameEN || ''}`
            : customerFormData.customerBranch[0]?.registerNameEN || ''
        "
        @view="
          () => {
            customerFormState.imageDialog = true;
            customerFormState.isImageEdit = false;
          }
        "
        @edit="
          customerFormState.imageDialog = customerFormState.isImageEdit = true
        "
      />
    </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="customerFormData.status !== 'INACTIVE'"
            class="surface-1 row rounded"
          >
            <UndoButton
              v-if="
                customerFormState.dialogType === 'edit' &&
                customerFormState.editCustomerId !== undefined
              "
              icon-only
              @click="() => {}"
              type="button"
            />
            <SaveButton
              v-if="
                customerFormState.dialogType === 'edit' ||
                customerFormState.dialogType === 'create'
              "
              id="btn-info-basic-save"
              icon-only
              type="submit"
            />

            <EditButton
              v-if="
                customerFormState.dialogType !== 'edit' &&
                customerFormState.editCustomerId !== undefined
              "
              id="btn-info-basic-edit"
              icon-only
              @click="() => {}"
              type="button"
            />

            <DeleteButton
              v-if="
                customerFormState.dialogType !== 'edit' &&
                customerFormState.editCustomerId !== undefined
              "
              id="btn-info-basic-delete"
              icon-only
              @click="
                () => {
                  //triggerDelete
                }
              "
              type="button"
            />
          </div>
        </div>
        <div
          class="col full-height rounded scroll row q-py-md q-pl-md q-pr-sm"
          v-if="$q.screen.gt.sm"
        >
          <SideMenu
            :menu="[
              {
                name: $t('form.customerInformation'),
                anchor: 'form-information',
              },
              {
                name: $t('customerBranch.tab.business'),
                anchor: 'form-business',
              },
              {
                name: $t('form.address'),
                anchor: 'form-address',
              },
            ]"
            background="transparent"
            :active="{
              background: 'hsla(var(--blue-6-hsl) / .2)',
              foreground: 'var(--blue-6)',
            }"
            scroll-element="#branch-form"
          />
        </div>

        <div
          class="col-12 col-md-10 full-height q-col-gutter-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"
        >
          <EmployerFormAbout
            id="form-information"
            show-title
            :index="(0).toString()"
            :customerType="customerFormData.customerType"
            v-model:citizen-id="formDataCustomerBranch.citizenId"
            v-model:prefix-name="formDataCustomerBranch.namePrefix"
            v-model:first-name="formDataCustomerBranch.firstName"
            v-model:last-name="formDataCustomerBranch.lastName"
            v-model:first-name-en="formDataCustomerBranch.firstNameEN"
            v-model:last-name-en="formDataCustomerBranch.lastNameEN"
            v-model:gender="formDataCustomerBranch.gender"
            v-model:birth-date="formDataCustomerBranch.birthDate"
            v-model:customer-name="formDataCustomerBranch.customerName"
            v-model:legal-person-no="formDataCustomerBranch.legalPersonNo"
            v-model:register-name="formDataCustomerBranch.registerName"
            v-model:register-name-en="formDataCustomerBranch.registerNameEN"
            v-model:register-date="formDataCustomerBranch.registerDate"
            v-model:authorized-capital="
              formDataCustomerBranch.authorizedCapital
            "
            v-model:telephone-no="formDataCustomerBranch.telephoneNo"
          />

          <EmployerFormBusiness
            id="form-business"
            show-title
            prefixId="dialog"
            dense
            outlined
            v-model:bussiness-type="formDataCustomerBranch.businessType"
            v-model:job-position="formDataCustomerBranch.jobPosition"
            v-model:job-description="formDataCustomerBranch.jobDescription"
            v-model:pay-date="formDataCustomerBranch.payDate"
            v-model:pay-date-en="formDataCustomerBranch.payDateEN"
            v-model:wage-rate="formDataCustomerBranch.wageRate"
            v-model:wage-rate-text="formDataCustomerBranch.wageRateText"
          />
          <AddressForm
            id="form-address"
            prefix-id="employer"
            dense
            outlined
            use-employment
            :title="$t('form.address')"
            :addressTitle="$t('form.address')"
            :addressTitleEN="$t('form.address', { suffix: '(EN)' })"
            v-model:address="formDataCustomerBranch.address"
            v-model:address-en="formDataCustomerBranch.addressEN"
            v-model:street="formDataCustomerBranch.street"
            v-model:street-en="formDataCustomerBranch.streetEN"
            v-model:moo="formDataCustomerBranch.moo"
            v-model:moo-en="formDataCustomerBranch.mooEN"
            v-model:soi="formDataCustomerBranch.soi"
            v-model:soi-en="formDataCustomerBranch.soiEN"
            v-model:province-id="formDataCustomerBranch.provinceId"
            v-model:district-id="formDataCustomerBranch.districtId"
            v-model:sub-district-id="formDataCustomerBranch.subDistrictId"
            v-model:home-code="formDataCustomerBranch.homeCode"
          />
        </div>
      </div>
    </div>
  </DialogForm>

  <!-- NOTE: END - Customer / Employer Add Form -->

  <!-- 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="() => {}"
    :close="
      () => {
        customerFormState.dialogModal = false;
      }
    "
  >
    <div
      :class="{
        'q-mx-lg q-my-md': $q.screen.gt.sm,
        'q-mx-md q-my-sm': !$q.screen.gt.sm,
      }"
    >
      <ProfileBanner
        active
        useToggle
        color="white"
        icon="mdi-account-plus-outline"
        :bg-color="
          employeeFormState.profileUrl
            ? 'white'
            : 'linear-gradient(135deg, rgba(43,137,223,1) 0%, rgba(230,51,81,1) 100%)'
        "
        v-model:current-tab="employeeFormState.currentTab"
        v-model:toggle-status="currentFromDataEmployee.status"
        fallbackCover="/images/employee-banner.png"
        :img="employeeFormState.profileUrl || `/images/employee-avatar.png`"
        :toggleTitle="$t('status.title')"
        hideFade
        @view="
          () => {
            employeeFormState.imageDialog = true;
            employeeFormState.isImageEdit = false;
          }
        "
        @edit="
          employeeFormState.imageDialog = employeeFormState.isImageEdit = true
        "
        @update:toggle-status="
          () => {
            currentFromDataEmployee.status =
              currentFromDataEmployee.status === 'CREATED'
                ? 'INACTIVE'
                : 'CREATED';
          }
        "
      />
    </div>
    <div
      class="col"
      :class="{
        'q-px-lg q-pb-lg': $q.screen.gt.sm,
        'q-px-md q-pb-sm': !$q.screen.gt.sm,
      }"
    >
      <div
        style="overflow-y: auto"
        class="row full-width full-height surface-1 rounded bordered relative-position"
      >
        <div
          :class="{
            'q-py-md q-px-lg': $q.screen.gt.sm,
            'q-py-sm q-px-lg': !$q.screen.gt.sm,
          }"
          style="position: absolute; z-index: 99999; top: 0; right: 0"
        >
          <div
            v-if="customerFormData.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 full-height rounded scroll row q-py-md q-pl-md q-pr-sm"
          v-if="$q.screen.gt.sm"
        >
          <SideMenu
            :menu="[
              {
                name: $t('form.customerInformation'),
                anchor: 'form-information',
              },
              {
                name: $t('customerBranch.tab.business'),
                anchor: 'form-business',
              },
              {
                name: $t('form.address'),
                anchor: 'form-address',
              },
            ]"
            background="transparent"
            :active="{
              background: 'hsla(var(--blue-6-hsl) / .2)',
              foreground: 'var(--blue-6)',
            }"
            scroll-element="#branch-form"
          />
        </div>

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

          <FormPerson
            id="form-personal"
            prefix-id="form-employee"
            dense
            outlined
            employee
            separator
            hideNameEn
            title="personnel.form.personalInformation"
            class="q-mb-xl"
            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
            v-model:current-id="currentFromDataEmployee.id"
            v-model="currentFromDataEmployee.file"
            hide-action
            :group-list="uploadFileListEmployee"
            :menu="uploadFileListEmployee"
            :columns="columnsAttachment"
            :ocr="
              async (group, file) => {
                const res = await ocrStore.sendOcr({
                  file: file,
                  category: group,
                });

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

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

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

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

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

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

                  return await waitAll(tempValue);
                }
                return [];
              }
            "
          >
            <template #form="{ mode, meta, isEdit }">
              <FormCitizen
                v-if="mode === 'citizen' && meta"
                orc
                ra
                :readonly="!isEdit"
                v-model:citizen-id="meta.citizenId"
                v-model:birth-date="meta.birthDate"
                v-model:first-name="meta.firstName"
                v-model:first-name-en="meta.firstNameEN"
                v-model:last-name="meta.lastName"
                v-model:last-name-en="meta.lastNameEN"
                v-model:address="meta.address"
              />
              <FormEmployeePassport
                v-if="mode === 'passport' && meta"
                prefix-id="drawer-info-employee"
                id="form-passport"
                dense
                outlined
                separator
                ocr
                :title="$t('customerEmployee.form.group.passport')"
                :readonly="!isEdit"
                v-model:passport-type="meta.type"
                v-model:passport-number="meta.number"
                v-model:passport-issue-date="meta.issueDate"
                v-model:passport-expiry-date="meta.expireDate"
                v-model:passport-issuing-place="meta.issuePlace"
                v-model:passport-issuing-country="meta.issueCountry"
              />
              <FormEmployeeVisa
                v-if="mode === 'visa' && meta"
                prefix-id="drawer-info-employee"
                id="form-visa"
                ocr
                dense
                outlined
                title="customerEmployee.form.group.visa"
                :readonly="!isEdit"
                v-model:visa-type="meta.type"
                v-model:visa-number="meta.number"
                v-model:visa-issue-date="meta.issueDate"
                v-model:visa-expiry-date="meta.expireDate"
                v-model:visa-issuing-place="meta.issuePlace"
              />

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

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

  <ProductServiceForm
    v-model="pageState.productServiceModal"
    v-model:product-group="productGroup"
    v-model:product-list="productList"
    v-model:service-list="serviceList"
    @select-group="
      async (id) => {
        await getAllService(id);
        await getAllProduct(id);
      }
    "
  ></ProductServiceForm>
</template>

<style scoped></style>
