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

import { baseUrl } from 'src/stores/utils';
import useCustomerStore from 'stores/customer';
import useFlowStore from 'stores/flow';
import useOptionStore from 'stores/options';
import { dialog } from 'stores/utils';

import { Status } from 'stores/types';
import { Employee } from 'stores/employee/types';
import { CustomerBranch, CustomerType } from 'stores/customer/types';

import { columnsEmployee } from './constant';
import { useCustomerBranchForm, useEmployeeForm } from './form';

import EmployerFormAuthorized from './components/employer/EmployerFormAuthorized.vue';
import FloatingActionButton from 'components/FloatingActionButton.vue';
import SideMenu from 'components/SideMenu.vue';
import { DialogFormContainer, DialogHeader } from 'components/dialog';
import BranchCardCustomer from 'components/03_customer-management/BranchCardCustomer.vue';
import PaginationComponent from 'components/PaginationComponent.vue';
import NoData from 'components/NoData.vue';
import TableEmpoloyee from 'components/03_customer-management/TableEmpoloyee.vue';
import { AddressForm } from 'components/form';
import {
  SaveButton,
  CancelButton,
  UndoButton,
  EditButton,
  DeleteButton,
} from 'components/button';
import {
  EmployerFormAbout,
  EmployerFormBusiness,
  EmployerFormContact,
} from './components';
import { formatAddress } from 'src/utils/address';
import PaginationPageSize from 'src/components/PaginationPageSize.vue';

const flowStore = useFlowStore();
const customerStore = useCustomerStore();
const employeeFormStore = useEmployeeForm();
const customerBranchFormStore = useCustomerBranchForm();

const { t } = useI18n();
const { fetchListCustomerBranch, fetchBranchEmployee } = customerStore;
const {
  currentFormData: customerBranchFormData,
  state: customerBranchFormState,
} = storeToRefs(customerBranchFormStore);

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

const branch = defineModel<CustomerBranch[]>('branch');
const modeView = defineModel<boolean>('modeView');

const currentCustomerUrlImage = defineModel<string | null>(
  'currentCustomerUrlImage',
);

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

const currentStatus = ref<Status | 'All'>('All');
const currentBtnOpen = ref<boolean[]>([]);
const totalBranch = ref(0);

const currentPageBranch = ref<number>(1);
const maxPageBranch = ref<number>(1);
const pageSizeBranch = ref<number>(30);

const statusEmployeeCreate = defineModel<boolean>('statusEmployeeCreate');

const prop = withDefaults(
  defineProps<{
    index?: string | number;
    color?: 'purple' | 'green';
    currentCustomerName?: string;
    customerType: CustomerType;
    countEmployee?: number;
    gender: string;
    selectedImage: string;
  }>(),
  {
    color: 'green',
  },
);
const currentBranchEmployee = ref<string>('');
const listEmployee = ref<Employee[]>([]);

const customerId = defineModel<string>('customerId', { required: true });

defineEmits<{
  (e: 'addEmployee', currentBranch: CustomerBranch): void;
  (e: 'back'): void;
  (e: 'viewDetail', branch: CustomerBranch, index: number): void;
  (e: 'dialog'): void;
}>();

onMounted(async () => {
  const url = window.location.href;
  const parts = url.split('/');
  customerBranchFormState.value.currentCustomerId = parts[4];

  await fetchList();

  branch.value?.forEach((v) => {
    currentBtnOpen.value.push(false);
  });
});

const columns = [
  {
    name: 'branchName',
    align: 'left',
    label: 'general.name',
    field: 'name',
  },
  {
    name: 'address',
    align: 'left',
    label: 'general.address',
    field: 'name',
  },
  {
    name: 'telephone',
    align: 'left',
    label: 'general.telephone',
    field: 'name',
  },
  {
    name: 'businessType',
    align: 'left',
    label: 'customer.form.businessType',
    field: 'name',
  },
  {
    name: 'totalEmployee',
    align: 'left',
    label: 'customer.table.totalEmployee',
    field: 'name',
  },
] satisfies QTableProps['columns'];

const fieldDisplay = ref<
  (
    | 'branchName'
    | 'address'
    | 'telephone'
    | 'businessTypePure'
    | 'totalEmployee'
  )[]
>(['branchName', 'address', 'telephone', 'businessTypePure', 'totalEmployee']);
const branchFieldSelected = ref<
  (
    | 'branchName'
    | 'address'
    | 'telephone'
    | 'businessTypePure'
    | 'totalEmployee'
  )[]
>(fieldDisplay.value);

async function deleteBranchById(id: string) {
  return await new Promise((resolve) => {
    dialog({
      color: 'negative',
      icon: 'mdi-alert',
      title: t('dialog.title.confirmDelete'),
      actionText: t('general.delete'),
      persistent: true,
      message: t('dialog.message.confirmDelete'),
      action: async () => {
        await customerStore.deleteBranchById(id);
        await fetchList();
        flowStore.rotate();
        resolve(true);
        customerBranchFormState.value.dialogModal = false;
      },
      cancel: () => {
        resolve(false);
      },
    });
  });
}

async function fetchList() {
  if (!customerId.value) return;

  const result = await fetchListCustomerBranch({
    customerId: customerId.value,
    query: !!inputSearch.value ? inputSearch.value : undefined,
    page: currentPageBranch.value,
    pageSize: pageSizeBranch.value,
    includeCustomer: true,
    status:
      currentStatus.value === 'All'
        ? undefined
        : currentStatus.value === 'ACTIVE'
          ? 'ACTIVE'
          : 'INACTIVE',
  });
  if (result) {
    totalBranch.value = result.total;
    maxPageBranch.value = Math.ceil(result.total / pageSizeBranch.value);
    branch.value = result.result;
  }
}

function openEmployerBranchForm(formType: 'create' | 'edit' | 'info') {
  customerBranchFormState.value.dialogType = formType;
  customerBranchFormState.value.dialogModal = true;
}

async function fetchEmployee(opts: { branchId: string; pageSize?: number }) {
  const res = await fetchBranchEmployee(opts.branchId, {
    pageSize: opts.pageSize,
    passport: true,
    visa: true,
  });

  console.log(res);

  if (res) {
    listEmployee.value = res.data.result;
  }
}

onMounted(async () => {
  await fetchList();
});

watch([customerId, inputSearch, currentStatus, pageSizeBranch], async () => {
  await fetchList();
});
watch(
  () => statusEmployeeCreate.value,
  async () => {
    if (statusEmployeeCreate.value) {
      await fetchEmployee({
        branchId: currentBranchEmployee.value,
        pageSize: 999,
      });

      const br = branch.value?.find(
        (v) => v.id === currentBranchEmployee.value,
      );
      if (br) br._count.employee += 1;
    }
  },
);
</script>

<template>
  <FloatingActionButton
    style="z-index: 999"
    v-if="$route.name !== 'CustomerManagement'"
    @click="openEmployerBranchForm('create')"
    hide-icon
  ></FloatingActionButton>
  <div
    class="row justify-between bordered-b surface-3 full-width q-px-md"
    style="z-index: 1"
  >
    <div class="row items-center col-12 col-md">
      <q-card-section
        class="q-pa-sm q-pt-md q-mr-md q-mb-sm"
        :class="{
          color__purple: customerType === 'CORP',
          color__green: customerType === 'PERS',
        }"
        style="border-radius: 0 0 40px 40px; position: relative"
      >
        <q-avatar no-padding size="50px">
          <q-img
            :src="`${baseUrl}/customer/${customerId}/image/${selectedImage}`"
            class="full-height full-width"
          >
            <template #error>
              <q-img
                :src="`${customerType === 'CORP' ? `/images/customer-CORP-avartar-male.png` : `/images/customer-PERS-avartar-${gender}.png`}`"
              />
            </template>
          </q-img>

          <img :src="currentCustomerUrlImage ?? '/no-profile.png'" />
        </q-avatar>
      </q-card-section>
      <div>
        <div>{{ currentCustomerName }}</div>
        <div class="row items-center">
          <i
            class="isax isax-frame5"
            style="font-size: 1rem; color: var(--stone-6)"
          />
          <div class="q-px-sm">
            {{ countEmployee }}
          </div>
          <q-icon name="mdi-home" size="16px" style="color: var(--stone-6)" />
          <div class="q-px-sm">
            {{ totalBranch }}
          </div>
        </div>
      </div>
    </div>

    <div class="row items-center justify-end col-12 col-md q-py-sm no-wrap">
      <q-input
        outlined
        dense
        class="col-6"
        :label="$t('general.search')"
        :bg-color="$q.dark.isActive ? 'dark' : 'white'"
        v-model="inputSearch"
        debounce="500"
      >
        <template v-slot:prepend>
          <q-icon name="mdi-magnify" />
        </template>
      </q-input>

      <q-select
        id="select-status"
        for="select-status"
        v-model="currentStatus"
        outlined
        dense
        option-value="value"
        option-label="label"
        class="col q-pl-sm"
        map-options
        emit-value
        :hide-dropdown-icon="$q.screen.lt.sm"
        :options="[
          { label: $t('general.all'), value: 'All' },
          { label: $t('status.ACTIVE'), value: 'ACTIVE' },
          { label: $t('status.INACTIVE'), value: 'INACTIVE' },
        ]"
      ></q-select>

      <q-btn-toggle
        id="btn-mode"
        v-model="modeView"
        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
            id="icon-mode-grid"
            name="mdi-view-grid-outline"
            size="16px"
            class="q-px-sm q-py-sm rounded"
            :style="{
              color: $q.dark.isActive
                ? modeView
                  ? '#C9D3DB'
                  : '#787B7C'
                : modeView
                  ? '#787B7C'
                  : '#C9D3DB',
            }"
          />
        </template>
        <template v-slot:list>
          <q-icon
            id="icon-mode-list"
            name="mdi-format-list-bulleted"
            class="q-px-sm q-py-xs rounded"
            size="16px"
            :style="{
              color: $q.dark.isActive
                ? modeView === true
                  ? '#C9D3DB'
                  : '#787B7C'
                : modeView === false
                  ? '#787B7C'
                  : '#C9D3DB',
            }"
          />
        </template>
      </q-btn-toggle>
    </div>
  </div>
  <div
    class="row q-pa-md col scroll full-width surface-2"
    :class="{
      'justify-center': totalBranch === 0,
      'items-center': totalBranch === 0,
    }"
  >
    <NoData v-if="totalBranch === 0" :not-found="!!inputSearch" />

    <div style="width: 100%" v-else>
      <q-table
        v-if="branch"
        flat
        class="full-width"
        bordered
        :rows-per-page-options="[0]"
        :rows="branch"
        :columns="columns"
        :grid="modeView"
        card-container-class="row q-col-gutter-md"
        row-key="name"
        hide-pagination
      >
        <template #header="{ cols }">
          <q-tr style="background-color: hsla(var(--info-bg) / 0.07)">
            <q-th
              v-for="(v, i) in cols"
              :key="v"
              :class="{ 'text-left': i === 0 || i === 2 || i === 3 }"
            >
              {{ $t(v.label) }}
            </q-th>
            <q-th auto-width />
          </q-tr>
        </template>
        <template #body="props">
          <q-tr
            :class="{
              'app-text-muted': props.row.status === 'INACTIVE',
              'cursor-pointer': props.row._count?.branch !== 0,
            }"
            :props="props"
            @click="$emit('viewDetail', props.row, props.rowIndex)"
          >
            <q-td v-if="branchFieldSelected.includes('branchName')">
              <div class="row items-center no-wrap">
                <div
                  :class="{
                    'status-active': props.row.status !== 'INACTIVE',
                    'status-inactive': props.row.status === 'INACTIVE',
                  }"
                  class="q-mr-md"
                  style="display: flex; margin-bottom: var(--size-2)"
                >
                  <div
                    class="branch-card__icon"
                    :class="{ 'branch-card__dark': $q.dark.isActive }"
                  >
                    <q-icon
                      size="md"
                      style="scale: 0.8"
                      name="mdi-office-building-outline"
                    />
                  </div>
                </div>
                <div class="col" style="min-width: fit-content">
                  <div class="col">
                    {{
                      customerType === 'CORP'
                        ? $i18n.locale === 'eng'
                          ? props.row.registerNameEN || '-'
                          : props.row.registerName || '-'
                        : $i18n.locale === 'eng'
                          ? props.row.firstNameEN +
                              ' ' +
                              props.row.lastNameEN || '-'
                          : props.row.firstName + ' ' + props.row.lastName ||
                            '-'
                    }}
                  </div>
                  <div class="col app-text-muted">
                    {{ props.row.code }}
                  </div>
                </div>
              </div>
            </q-td>
            <q-td
              v-if="branchFieldSelected.includes('address')"
              class="text-left"
            >
              {{
                {
                  ['eng']: formatAddress({ ...props.row, en: true }),
                  ['tha']: formatAddress({ ...props.row, en: false }),
                }[$i18n.locale]
              }}
            </q-td>
            <q-td
              v-if="branchFieldSelected.includes('telephone')"
              class="text-left"
            >
              {{ props.row.telephoneNo || '-' }}
            </q-td>
            <q-td
              v-if="branchFieldSelected.includes('businessTypePure')"
              class="text-left"
            >
              {{ useOptionStore().mapOption(props.row.businessType) || '-' }}
            </q-td>
            <q-td
              v-if="branchFieldSelected.includes('totalEmployee')"
              class="text-center"
            >
              {{ props.row._count?.employee }}
            </q-td>
            <q-td>
              <q-btn
                dense
                flat
                @click.stop="
                  async () => {
                    currentBranchEmployee = props.row.id;
                    await fetchEmployee({
                      branchId: currentBranchEmployee,
                      pageSize: 999,
                      passport: true,
                      visa: true,
                    });

                    currentBtnOpen.map((v, i) => {
                      if (i !== props.rowIndex) {
                        currentBtnOpen[i] = false;
                      }
                    });

                    currentBtnOpen[props.rowIndex] =
                      !currentBtnOpen[props.rowIndex];
                  }
                "
              >
                <div class="row items-center">
                  <q-icon name="mdi-account-group-outline" />
                  <q-icon
                    class="btn-arrow-right"
                    :class="{
                      active: currentBtnOpen[props.rowIndex],
                    }"
                    size="xs"
                    name="mdi-chevron-right"
                  />
                </div>
              </q-btn>
              <q-btn
                icon="mdi-eye-outline"
                :id="`btn-eye-${props.row.customerName}`"
                size="sm"
                dense
                round
                flat
                @click="
                  () => {
                    customerBranchFormStore.initForm('info', props.row.id);
                    customerBranchFormState.dialogModal = true;
                  }
                "
              />
            </q-td>
          </q-tr>

          <q-tr v-show="currentBtnOpen[props.rowIndex]" :props="props">
            <q-td colspan="100%" style="padding: 16px">
              <div class="text-center">
                <TableEmpoloyee
                  add-button
                  in-table
                  :list-employee="listEmployee"
                  :columns-employee="columnsEmployee"
                  :field-selected="[
                    'orderNumber',
                    'firstName',
                    'general.age',
                    'formDialogInputNationality',
                    'formDialogInputPassportNo',
                    'passportExpiryDate',
                    'visaExpireDate',
                    'beDue',
                    'action',
                  ]"
                  @add="
                    () => {
                      statusEmployeeCreate = false;
                      $emit('addEmployee', props.row);
                    }
                  "
                  @history="(item) => {}"
                  @view="
                    (item) => {
                      employeeFormState.drawerModal = true;
                      //employeeFormState.isEmployeeEdit = true;
                      employeeFormStore.assignFormDataEmployee(item.id);
                    }
                  "
                />
              </div>
            </q-td>
          </q-tr>
        </template>
        <template #item="props">
          <div class="col-12 col-md-6">
            <BranchCardCustomer
              class="surface-1"
              :inactive="props.row.status === 'INACTIVE'"
              :color="customerType === 'CORP' ? 'corp' : 'pers'"
              :badgeField="['status']"
              :data="{
                customerBranchFormTab: props.row.branchNo,
                branchName: props.row.name,
                address:
                  $i18n.locale === 'eng'
                    ? `${props.row.addressEN || ''} ${props.row.subDistrict?.nameEN || ''} ${props.row.district?.nameEN || ''} ${props.row.province?.nameEN || ''}`
                    : `${props.row.address || ''} ${props.row.subDistrict?.name || ''} ${props.row.district?.name || ''} ${props.row.province?.name || ''}`,
                telephone: props.row.telephoneNo,
                businessTypePure: useOptionStore().mapOption(
                  props.row.businessType,
                ),
                totalEmployee: props.row._count?.employee,
              }"
              :visible-columns="branchFieldSelected"
              @view-detail="$emit('viewDetail', props.row, props.rowIndex)"
            />
          </div>
        </template>
      </q-table>
    </div>
  </div>

  <div class="row justify-between items-center q-px-md q-py-sm surface-2">
    <div class="row col-4 items-center">
      <div class="app-text-muted" style="width: 80px" v-if="$q.screen.gt.sm">
        {{ $t('general.recordPerPage') }}
      </div>

      <div><PaginationPageSize v-model="pageSizeBranch" /></div>
    </div>

    <div class="col-4 flex justify-center app-text-muted">
      {{
        $t('general.recordsPage', {
          resultcurrentPage: branch?.length,
          total: totalBranch,
        })
      }}
    </div>
    <div class="col-4 flex justify-end">
      <PaginationComponent
        v-model:current-page="currentPageBranch"
        v-model:max-page="maxPageBranch"
        :fetch-data="
          async () => {
            await fetchList();
            flowStore.rotate();
          }
        "
      />
    </div>
  </div>

  <DialogFormContainer
    :model-value="customerBranchFormState.dialogModal"
    :on-close="
      async () => {
        await fetchList();
        customerBranchFormState.dialogModal = false;
        flowStore.rotate();
      }
    "
    @submit="
      async () => {
        const res = await customerBranchFormStore.submitForm();

        if (res) {
          customerBranchFormStore.initForm('info', res?.id);
        }
      }
    "
  >
    <template #header>
      <DialogHeader
        :title="
          $t(`form.title.${customerBranchFormState.dialogType}`, {
            name: $t('customerBranch.form.title'),
          })
        "
      >
        <template #before>
          <EditButton
            icon-only
            v-if="customerBranchFormState.dialogType === 'info'"
            @click="customerBranchFormState.dialogType = 'edit'"
          />
          <DeleteButton
            icon-only
            v-if="customerBranchFormState.dialogType === 'info'"
            @click="
              () => {
                deleteBranchById(customerBranchFormData.id || '');
              }
            "
          />
          <UndoButton
            icon-only
            v-if="customerBranchFormState.dialogType === 'edit'"
            @click="customerBranchFormState.dialogType = 'info'"
          />
        </template>
      </DialogHeader>
    </template>

    <div
      style="flex: 1; width: 100%; overflow-y: auto"
      class="surface-2 q-pa-md"
      id="customer-form"
    >
      <div class="col surface-1 full-height rounded bordered row">
        <div
          class="col full-height"
          style="max-height: 100%; overflow-y: auto"
          v-if="$q.screen.gt.sm"
        >
          <div class="q-py-md q-pl-md q-pr-sm">
            <SideMenu
              :menu="[
                {
                  name: $t('customerBranch.tab.main'),
                  anchor: 'employer-branch-main',
                },
                {
                  name: $t('customerBranch.tab.address'),
                  anchor: 'employer-branch-address',
                },
                {
                  name: $t('customerBranch.tab.business'),
                  anchor: 'employer-branch-business',
                },
                {
                  name: $t('customerBranch.tab.contact'),
                  anchor: 'employer-branch-contact',
                },
              ]"
              background="transparent"
              :active="{
                background: 'hsla(var(--blue-6-hsl) / .2)',
                foreground: 'var(--blue-6)',
              }"
              scroll-element="#employer-branch-content"
            />
          </div>
        </div>

        <div
          id="employer-branch-content"
          class="col-12 col-md-10 q-py-md q-pr-md q-pl-sm full-height scroll"
        >
          <div class="row q-col-gutter-sm q-mb-sm" id="employer-branch-main">
            <div class="col-12 text-weight-bold text-body1 row items-center">
              <q-icon
                flat
                size="xs"
                class="q-pa-sm rounded q-mr-sm"
                color="info"
                name="mdi-office-building-outline"
                style="background-color: var(--surface-3)"
              />
              <span>{{ $t('customerBranch.tab.main') }}</span>
            </div>
          </div>
          <EmployerFormAbout
            prefixId="dialog"
            :readonly="customerBranchFormState.dialogType === 'info'"
            class="q-mb-xl"
            :index="
              (customerBranchFormData.code &&
                Number(
                  customerBranchFormData.code.split('-').pop(),
                ).toString()) ||
              ''
            "
            :customer-type="customerType"
            v-model:citizen-id="customerBranchFormData.citizenId"
            v-model:prefix-name="customerBranchFormData.namePrefix"
            v-model:first-name="customerBranchFormData.firstName"
            v-model:last-name="customerBranchFormData.lastName"
            v-model:first-name-en="customerBranchFormData.firstNameEN"
            v-model:last-name-en="customerBranchFormData.lastNameEN"
            v-model:gender="customerBranchFormData.gender"
            v-model:birth-date="customerBranchFormData.birthDate"
            v-model:customer-name="customerBranchFormData.customerName"
            v-model:legal-person-no="customerBranchFormData.legalPersonNo"
            v-model:branch-code="customerBranchFormData.code"
            v-model:register-name="customerBranchFormData.registerName"
            v-model:register-name-en="customerBranchFormData.registerNameEN"
            v-model:register-date="customerBranchFormData.registerDate"
            v-model:authorized-capital="
              customerBranchFormData.authorizedCapital
            "
            v-model:telephone-no="customerBranchFormData.telephoneNo"
            v-model:code-customer="customerBranchFormData.codeCustomer"
          />
          <div
            class="row q-col-gutter-sm q-mb-sm"
            id="employer-branch-business"
          >
            <div class="col-12 text-weight-bold text-body1 row items-center">
              <q-icon
                flat
                size="xs"
                class="q-pa-sm rounded q-mr-sm"
                color="info"
                name="mdi-office-building-outline"
                style="background-color: var(--surface-3)"
              />
              <span>{{ $t('customerBranch.tab.business') }}</span>
            </div>
          </div>
          <EmployerFormBusiness
            dense
            class="q-mb-xl"
            outlined
            prefix-id="employer-branch"
            :readonly="customerBranchFormState.dialogType === 'info'"
            v-model:bussiness-type="customerBranchFormData.businessType"
            v-model:job-position="customerBranchFormData.jobPosition"
            v-model:job-description="customerBranchFormData.jobDescription"
            v-model:pay-date="customerBranchFormData.payDate"
            v-model:pay-date-e-n="customerBranchFormData.payDateEN"
            v-model:wage-rate="customerBranchFormData.wageRate"
            v-model:wage-rate-text="customerBranchFormData.wageRateText"
          />
          <div class="row q-col-gutter-sm q-mb-sm" id="employer-branch-address">
            <div class="col-12 text-weight-bold text-body1 row items-center">
              <q-icon
                flat
                size="xs"
                class="q-pa-sm rounded q-mr-sm"
                color="info"
                name="mdi-office-building-outline"
                style="background-color: var(--surface-3)"
              />
              <span>{{ $t('customerBranch.tab.authorized') }}</span>
            </div>
          </div>
          <EmployerFormAuthorized
            class="q-mb-xl"
            prefix-id="employer-branch"
            :readonly="customerBranchFormState.dialogType === 'info'"
            v-model:authorized-name="customerBranchFormData.authorizedName"
            v-model:authorized-name-en="customerBranchFormData.authorizedNameEN"
          />
          <div class="row q-col-gutter-sm q-mb-sm" id="employer-branch-address">
            <div class="col-12 text-weight-bold text-body1 row items-center">
              <q-icon
                flat
                size="xs"
                class="q-pa-sm rounded q-mr-sm"
                color="info"
                name="mdi-office-building-outline"
                style="background-color: var(--surface-3)"
              />
              <span>{{ $t('customerBranch.tab.address') }}</span>
            </div>
          </div>
          <AddressForm
            prefix-id="employer-branch"
            class="q-mb-xl"
            hide-title
            use-employment
            dense
            :readonly="customerBranchFormState.dialogType === 'info'"
            outlined
            :title="$t('form.address')"
            v-model:homeCode="customerBranchFormData.homeCode"
            v-model:employmentOffice="customerBranchFormData.employmentOffice"
            v-model:employmentOfficeEN="
              customerBranchFormData.employmentOfficeEN
            "
            v-model:address="customerBranchFormData.address"
            v-model:addressEN="customerBranchFormData.addressEN"
            v-model:province-id="customerBranchFormData.provinceId"
            v-model:district-id="customerBranchFormData.districtId"
            v-model:sub-district-id="customerBranchFormData.subDistrictId"
            v-model:street="customerBranchFormData.street"
            v-model:streetEN="customerBranchFormData.streetEN"
            v-model:moo="customerBranchFormData.moo"
            v-model:mooEN="customerBranchFormData.mooEN"
            v-model:soi="customerBranchFormData.soi"
            v-model:soiEN="customerBranchFormData.soiEN"
            :addressTitle="$t('form.address')"
            :addressTitleEN="$t('form.address', { suffix: '(EN)' })"
          />
          <div class="row q-col-gutter-sm q-mb-sm" id="employer-branch-contact">
            <div class="col-12 text-weight-bold text-body1 row items-center">
              <q-icon
                flat
                size="xs"
                class="q-pa-sm rounded q-mr-sm"
                color="info"
                name="mdi-office-building-outline"
                style="background-color: var(--surface-3)"
              />
              <span>{{ $t('customerBranch.tab.contact') }}</span>
            </div>
          </div>
          <EmployerFormContact
            prefixId="dialog"
            class="q-mb-lg"
            :readonly="customerBranchFormState.dialogType === 'info'"
            v-model:contact-name="customerBranchFormData.contactName"
            v-model:email="customerBranchFormData.email"
            v-model:contact-tel="customerBranchFormData.contactTel"
            v-model:office-tel="customerBranchFormData.officeTel"
            v-model:agent="customerBranchFormData.agent"
          />
        </div>
      </div>
    </div>

    <template #footer>
      <CancelButton outlined class="q-ml-auto" v-close-popup />
      <SaveButton
        solid
        class="q-ml-sm"
        type="submit"
        v-if="customerBranchFormState.dialogType !== 'info'"
      />
    </template>
  </DialogFormContainer>
</template>

<style scoped>
.branch-card__icon {
  --_branch-card-bg: var(--pink-6-hsl);

  background-color: hsla(var(--_branch-card-bg) / 0.15);
  border-radius: 50%;
  padding: var(--size-1);
  position: relative;
  transform: rotate(45deg);

  &.branch-card__dark {
    --_branch-card-bg: var(--pink-5-hsl);
  }

  &::after {
    content: ' ';
    display: block;
    block-size: 0.5rem;
    aspect-ratio: 1;
    position: absolute;
    border-radius: 50%;
    right: -0.25rem;
    top: calc(50% - 0.25rem);
    bottom: calc(50% - 0.25rem);
    background-color: hsla(var(--_branch-status-color) / 1);
  }

  & :deep(.q-icon) {
    transform: rotate(-45deg);
    color: hsla(var(--_branch-card-bg) / 1);
  }
}

.btn-arrow-right {
  transform: rotate(0deg);
  transition: transform 0.3s ease;
}

.btn-arrow-right.active {
  transform: rotate(90deg);
  transition: transform 0.3s ease;
}
</style>
