<script setup lang="ts">
import { storeToRefs } from 'pinia';
import { ref, onMounted, computed, watch } from 'vue';
import { Icon } from '@iconify/vue';
import { BranchContact } from 'stores/branch-contact/types';
import { useQuasar } from 'quasar';
import { useI18n } from 'vue-i18n';
import type { QTableProps } from 'quasar';

import useBranchStore from 'stores/branch';
import useFlowStore from 'stores/flow';
import {
  BranchWithChildren,
  BranchCreate,
  Branch,
  BankBook,
} from 'stores/branch/types';

import useUtilsStore, { dialog, baseUrl } from 'stores/utils';
import EmptyAddButton from 'components/AddButton.vue';
import TooltipComponent from 'components/TooltipComponent.vue';
import StatCard from 'components/StatCardComponent.vue';
import BranchCard from 'components/01_branch-management/BranchCard.vue';
import { AddressForm } from 'components/form';
import DialogForm from 'components/DialogForm.vue';
import FormBranchInformation from 'components/01_branch-management/FormBranchInformation.vue';
import FormLocation from 'components/01_branch-management/FormLocation.vue';
import FormQr from 'components/01_branch-management/FormQr.vue';
import FormBranchContact from 'components/01_branch-management/FormBranchContact.vue';
import DrawerInfo from 'components/DrawerInfo.vue';
import InfoForm from 'components/02_personnel-management/InfoForm.vue';
import TreeComponent from 'components/TreeComponent.vue';
import ProfileBanner from 'components/ProfileBanner.vue';
import SideMenu from 'components/SideMenu.vue';
import ImageUploadDialog from 'components/ImageUploadDialog.vue';
import FormBank from 'components/01_branch-management/FormBank.vue';
import ToggleButton from 'src/components/button/ToggleButton.vue';
import FormBranchAdmin from 'src/components/01_branch-management/FormBranchAdmin.vue';
import KebabAction from 'src/components/shared/KebabAction.vue';
import { User } from 'src/stores/user/types';
import {
  EditButton,
  DeleteButton,
  SaveButton,
  UndoButton,
} from 'components/button';

const $q = useQuasar();
const { t } = useI18n();
const utilsStore = useUtilsStore();

const holdDialog = ref(false);
const isSubCreate = ref(false);
const columns = [
  {
    name: 'orderNumber',
    align: 'center',
    label: 'general.orderNumber',
    field: 'branchNo',
  },

  {
    name: 'branchLabelName',
    align: 'left',
    label: 'branch.office',
    field: 'name',
    sortable: true,
  },
  {
    name: 'branchLabelAddress',
    align: 'left',
    label: 'general.address',
    field: 'address',
    sortable: true,
  },
  {
    name: 'branchLabelTel',
    align: 'left',
    label: 'general.telephone',
    field: 'telephoneNo',
  },
  {
    name: 'branchLabelType',
    align: 'left',
    label: 'general.type',
    field: 'isHeadOffice',
  },
] satisfies QTableProps['columns'];

const modal = ref<boolean>(false);
const hideStat = ref(false);
const currentId = ref<string>('');
const expandedTree = ref<string[]>([]);
const formMenuIcon = ref<{ icon: string; color: string; bgColor: string }[]>([
  {
    icon: 'mdi-phone-outline',
    color: 'hsl(var(--info-bg))',
    bgColor: 'var(--surface-1)',
  },
  {
    icon: 'mdi-map-marker-radius-outline',
    color: 'hsl(var(--info-bg))',
    bgColor: 'var(--surface-1)',
  },
  {
    icon: 'mdi-map-legend',
    color: 'hsl(var(--info-bg))',
    bgColor: 'var(--surface-1)',
  },
]);

const formBankBook = ref<BankBook[]>([
  {
    bankName: '',
    accountNumber: '',
    bankBranch: '',
    accountName: '',
    accountType: '',
    currentlyUse: true,
  },
]);

const refImageUpload = ref();
const isImageEdit = ref(false);
const profileFileImg = ref<File | undefined>(undefined);
const imageUrl = ref<string>('');
const prevImageUrl = ref<string>('');
const currentNode = ref<BranchWithChildren>();
const imageDialog = ref(false);

const profileFile = ref<File | undefined>(undefined);
const qrCodeimageUrl = ref<string | null>('');

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') qrCodeimageUrl.value = reader.result;
  });

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

  return element;
})();

const branchStore = useBranchStore();
const flowStore = useFlowStore();
const { locale } = useI18n();

const { data: branchData } = storeToRefs(branchStore);

const treeData = computed(() => {
  const map: Record<string, BranchWithChildren> = {};
  const children: Branch[] = [];

  branchData.value?.result.forEach((v) => {
    if (v.isHeadOffice) map[v.id] = Object.assign(v, { branch: [] });
    else children.push(v);
  });

  children.forEach((v) => {
    if (v.headOfficeId && map[v.headOfficeId]) {
      map[v.headOfficeId].branch.push(v);
    }
  });

  return Object.values(map);
});

async function calculateStats() {
  const _stats = await branchStore.stats();

  if (_stats) {
    stats.value = [
      {
        icon: 'mdi-office-building-outline',
        count: _stats.hq,
        label: 'branch.card.branchHQLabel',
        color: 'pink',
      },
      {
        icon: 'mdi-home-group',
        count: _stats.br,
        label: 'branch.card.branchLabel',
        color: 'purple',
      },
    ];
  }
}

onMounted(async () => {
  utilsStore.currentTitle.title = 'menu.branch';
  utilsStore.currentTitle.path = [
    {
      text: 'branch.page.captionManage',
      i18n: true,
      handler: () => {
        fieldSelectedBranch.value.value = 'branchHQLabel';
        currentHq.value = {
          id: '',
          code: '',
        };
      },
    },
    // track of the currently selected HQ branch, so when we reset it to an empty
    // object, we are effectively unselecting any HQ branch.
  ];

  await branchStore.fetchList({ pageSize: 99999 });
  await calculateStats();

  modeView.value = $q.screen.lt.md ? true : false;

  flowStore.rotate();
});

const statusFilter = ref<'all' | 'statusACTIVE' | 'statusINACTIVE'>('all');

const beforeBranch = ref<{ id: string; code: string }>({
  id: '',
  code: '',
});

const inputSearch = ref<string>('');
const fieldDisplay = ref<
  (
    | 'branchLabelName'
    | 'branchLabelAddress'
    | 'branchLabelTel'
    | 'branchLabelType'
    | 'orderNumber'
  )[]
>([
  'orderNumber',
  'branchLabelName',
  'branchLabelTel',
  'branchLabelAddress',
  'branchLabelType',
]);
const fieldSelected = ref<
  (
    | 'orderNumber'
    | 'branchLabelName'
    | 'branchLabelAddress'
    | 'branchLabelTel'
    | 'branchLabelType'
  )[]
>(fieldDisplay.value);
const fieldSelectedBranch = ref<{
  label: string;
  value: string;
}>({
  label: t('branch.form.title.branchHQLabel'),
  value: 'branchHQLabel',
});

const stats = ref<
  { icon: string; count: number; label: string; color: 'pink' | 'purple' }[]
>([]);

const modeView = ref<boolean>(false);

const splitterModel = ref(25);

const defaultFormData = {
  headOfficeId: null,
  code: '',
  taxNo: '',
  nameEN: '',
  name: '',
  addressEN: '',
  address: '',
  zipCode: '',
  email: '',
  contactName: '',
  contact: '',
  telephoneNo: '',
  longitude: '',
  latitude: '',
  subDistrictId: '',
  districtId: '',
  provinceId: '',
  lineId: '',
};

const formDialogRef = ref();

const formType = ref<'create' | 'edit' | 'delete' | 'view'>('create');
const formTypeBranch = ref<'headOffice' | 'subBranch'>('headOffice');
const currentHq = ref<{ id: string; code: string }>({ id: '', code: '' });
const currentEdit = ref<{ id: string; code: string }>({ id: '', code: '' });
const formData = ref<
  Omit<BranchCreate & { codeHeadOffice?: string }, 'qrCodeImage' | 'imageUrl'>
>(structuredClone(defaultFormData));

const prevFormData = ref<
  Omit<BranchCreate & { codeHeadOffice?: string }, 'qrCodeImage' | 'imageUrl'>
>(structuredClone(defaultFormData));

const modalDrawer = ref<boolean>(false);

function openDrawer() {
  modalDrawer.value = true;
}

function openDialog() {
  modal.value = true;
}

async function fetchBranchById(id: string) {
  const res = await branchStore.fetchById(id, { includeContact: true });

  if (res) {
    qrCodeimageUrl.value = res.qrCodeImageUrl;
    imageUrl.value = res.imageUrl;
    prevImageUrl.value = res.imageUrl;

    const updatedBank = res.bank.map((item) => {
      const { id: _id, branchId: _branchId, ...rest } = item;
      return rest;
    });
    formBankBook.value = updatedBank;

    formData.value = {
      code: res.code,
      headOfficeId: res.headOfficeId,
      taxNo: res.taxNo,
      nameEN: res.nameEN,
      name: res.name,
      addressEN: res.addressEN,
      address: res.address,
      zipCode: res.zipCode,
      email: res.email,
      contactName: res.contactName,
      contact: res.contact.length > 0 ? res.contact[0].telephoneNo : '',
      telephoneNo: res.telephoneNo,
      longitude: res.longitude,
      latitude: res.latitude,
      subDistrictId: res.subDistrictId,
      districtId: res.districtId,
      provinceId: res.provinceId,
      lineId: res.lineId,
      status: res.status,
    };
  }
}

function clearData() {
  formData.value = structuredClone(defaultFormData);
  imageUrl.value = '';
  qrCodeimageUrl.value = null;
  currentEdit.value = {
    id: '',
    code: '',
  };
  profileFile.value = undefined;

  formBankBook.value = [
    {
      bankName: '',
      accountNumber: '',
      bankBranch: '',
      accountName: '',
      accountType: '',
      currentlyUse: true,
    },
  ];
}

async function undo() {
  isImageEdit.value = false;
  formType.value = 'view';
  imageUrl.value = prevImageUrl.value;
  formData.value = prevFormData.value;
}

function triggerCreate(
  type: 'headOffice' | 'subBranch',
  id?: string,
  code?: string,
) {
  clearData();

  formTypeBranch.value = type;

  if (type === 'headOffice') {
    currentHq.value = {
      id: id ?? '',
      code: code ?? '',
    };
  }

  if (type === 'subBranch' && id && code) {
    isSubCreate.value = true;
    formData.value.headOfficeId = id;
    formData.value.code = code;
    formData.value.codeHeadOffice = code;
  }

  formType.value = 'create';
  openDialog();
}

function drawerEdit() {
  isImageEdit.value = true;
  formType.value = 'edit';
  prevFormData.value = {
    ...formData.value,
  };
}

const currentBranchAdmin = ref<User | null>(null);
async function triggerEdit(
  openFormType: string,
  id: string,
  typeBranch: 'headOffice' | 'subBranch',
  code?: string,
) {
  await fetchBranchById(id);
  if (openFormType === 'form') {
    formType.value = 'edit';
    openDialog();
  }
  if (openFormType === 'drawer') {
    formType.value = 'view';
    openDrawer();
  }

  if (typeBranch === 'headOffice') {
    formData.value.codeHeadOffice = code;
  }

  currentId.value = id;

  const currentRecord = branchData.value.result.find((x) => x.id === id);

  if (!currentRecord) return;

  currentEdit.value = {
    id: currentRecord.id,
    code: currentRecord.code,
  };

  if (typeBranch === 'subBranch') {
    const currentRecordHead = branchData.value.result.find(
      (x) => x.id === currentRecord.headOfficeId,
    );

    formData.value.codeHeadOffice = currentRecordHead?.code;

    if (currentRecordHead) {
      currentHq.value.id = currentRecordHead.id;
      currentHq.value.code = currentRecordHead.code;
    } else {
      currentHq.value = currentEdit.value;
    }
  }
  formTypeBranch.value = typeBranch;

  const branchAdmin = await branchStore.getAdmin(id);

  if (!branchAdmin) {
    currentBranchAdmin.value = null;
    return;
  }

  currentBranchAdmin.value = branchAdmin;
}

function triggerDelete(id: string) {
  if (id) {
    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 branchStore.deleteById(id);
        await branchStore.fetchList({ pageSize: 99999 });
        modalDrawer.value = false;
        await calculateStats();

        const branchLength = treeData.value.find(
          (node) => node.id === expandedTree.value[0],
        )?.branch.length;
        if (branchLength === 0) {
          expandedTree.value = [];
          fieldSelectedBranch.value.value = 'branchHQLabel';
          currentHq.value = {
            id: '',
            code: '',
          };
        }
        flowStore.rotate();
      },
      cancel: () => {},
    });
  }
}

async function triggerChangeStatus(
  id: string,
  status: string,
): Promise<Branch & { qrCodeImageUploadUrl: string; imageUploadUrl: string }> {
  return await new Promise((resolve) => {
    dialog({
      color: status !== 'INACTIVE' ? 'warning' : 'info',
      icon:
        status !== 'INACTIVE' ? 'mdi-alert' : 'mdi-message-processing-outline',
      title: t('dialog.title.confirmChangeStatus'),
      actionText:
        status !== 'INACTIVE' ? t('general.close') : t('general.open'),
      message:
        status !== 'INACTIVE'
          ? t('dialog.message.confirmChangeStatusOff')
          : t('dialog.message.confirmChangeStatusOn'),
      action: async () => {
        const res = await branchStore.editById(id, {
          status: status !== 'INACTIVE' ? 'INACTIVE' : 'ACTIVE',
        });
        if (res) resolve(res);
      },
      cancel: () => {},
    });
  });
}

async function onSubmit() {
  if (formType.value === 'edit') {
    delete formData.value['codeHeadOffice'];
    delete formData.value['code'];

    await branchStore.editById(
      currentEdit.value.id,
      {
        ...formData.value,
        status: undefined,
      },
      profileFile.value,
      profileFileImg.value,
      formBankBook.value,
    );

    await branchStore.fetchList({ pageSize: 99999 });
    if (!imageDialog.value) modalDrawer.value = false;
    modal.value = false;
  }

  if (formType.value === 'create') {
    const createBranch = async () => {
      await branchStore.create(
        {
          ...formData.value,
          qrCodeImage: profileFile.value,
          imageUrl: profileFileImg.value,
        },
        formBankBook.value,
      );

      await branchStore.fetchList({ pageSize: 99999 });
      modal.value = false;
    };

    if (formTypeBranch.value === 'subBranch') {
      const currentRecord = branchData.value.result.find(
        (x) => x.id === formData.value.headOfficeId,
      );

      formData.value.headOfficeId = currentRecord?.id;
      formData.value.code = formData.value.code?.slice(0, -6);
      delete formData.value['codeHeadOffice'];
      await createBranch();
    } else {
      dialog({
        color: 'info',
        icon: 'mdi-message-processing-outline',
        message: t('form.info.cantChange', {
          field: t('formDialogHqAbbreviation'),
          name: formData.value.code,
        }),
        actionText: t('agree'),
        persistent: true,
        title: t('form.warning.title'),
        cancel: () => {},
        action: async () => {
          await createBranch();
        },
      });
    }
  }

  const _stats = await branchStore.stats();

  if (_stats) {
    stats.value = [
      {
        icon: 'mdi-home',
        count: _stats.hq,
        label: 'branchHQLabel',
        color: 'pink',
      },
      {
        icon: 'mdi-domain',
        count: _stats.br,
        label: 'branchLabel',
        color: 'purple',
      },
    ];
  }
  flowStore.rotate();
}

function changeTitle(
  formType: 'edit' | 'create' | 'delete' | 'view',
  typeBranch: 'headOffice' | 'subBranch',
) {
  const _type =
    typeBranch === 'headOffice'
      ? 'branch.card.branchHQLabel'
      : 'branch.card.branchLabel';

  return formType === 'create'
    ? t('form.title.create', { name: t(_type) })
    : formType === 'view'
      ? t(_type)
      : t('general.edit');
}

function handleHold(node: BranchWithChildren) {
  if ($q.screen.gt.xs) return;
  holdDialog.value = true;
  currentNode.value = node;
  // return function () {
  // };
}

watch(
  () => profileFileImg.value,
  () => {
    if (profileFileImg.value !== null) isImageEdit.value = true;
  },
);

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

watch(
  () => $q.screen.lt.md,
  (v) => {
    if (v) modeView.value = true;
  },
);

watch(currentHq, () => {
  const tmp: typeof utilsStore.currentTitle.path = [
    {
      text: 'branch.page.captionManage',
      i18n: true,
      handler: () => {
        expandedTree.value = expandedTree.value.filter(
          (i) => currentHq.value.id !== i,
        );

        fieldSelectedBranch.value.value = 'branchHQLabel';
        currentHq.value = {
          id: '',
          code: '',
        };
      },
    },
  ];

  if (currentHq.value.id !== '') {
    tmp.push({
      text: currentHq.value.code,
    });
  }

  utilsStore.currentTitle.path = tmp;
});
</script>

<template>
  <div class="column full-height no-wrap">
    <div class="text-body-2 q-mb-xs flex items-center">
      {{ $t('general.dataSum') }}
      <q-btn
        class="q-ml-xs"
        icon="mdi-pin-outline"
        color="primary"
        size="sm"
        flat
        dense
        rounded
        @click="hideStat = !hideStat"
        :style="hideStat ? 'rotate: 90deg' : ''"
        style="transition: 0.1s ease-in-out"
      />
    </div>
    <transition name="slide">
      <StatCard
        v-if="!hideStat"
        class="q-pb-md"
        label-i18n
        :branch="
          expandedTree[0]
            ? [
                {
                  ...stats[1],
                  count: (() => {
                    const foundItem = treeData.find(
                      (i) => i.id === expandedTree[0],
                    );
                    return foundItem ? foundItem._count.branch : 0;
                  })(),
                },
              ]
            : stats
        "
        :dark="$q.dark.isActive"
      />
    </transition>

    <div class="col surface-2 rounded" :no-padding="!!branchData.total">
      <template v-if="!branchData.total">
        <div class="full-width full-height column">
          <div class="self-end q-ma-md">
            <TooltipComponent
              class="self-end"
              title="general.noData"
              caption="general.clickToCreate"
              imgSrc="personnel-table-"
            />
          </div>

          <div class="col flex items-center justify-center">
            <EmptyAddButton
              label="general.add"
              :i18nArgs="{ text: $t('branch.form.title.branchLabel') }"
              @trigger="() => triggerCreate('headOffice')"
            />
          </div>
        </div>
      </template>

      <template v-else>
        <div class="full-height column" style="flex-grow: 1; flex-wrap: nowrap">
          <q-splitter
            v-model="splitterModel"
            :limits="[0, 100]"
            class="col"
            before-class="overflow-hidden"
            after-class="overflow-hidden"
          >
            <template v-slot:before>
              <div class="surface-1 column full-height">
                <div
                  class="row no-wrap full-width bordered-b text-weight-bold surface-3 items-center q-px-md q-py-sm"
                  :style="`min-height: ${$q.screen.gt.sm ? '57px' : '100.8px'}`"
                >
                  <div class="col ellipsis-2-lines">จัดการสาขาทั้งหมด</div>
                  <q-btn
                    round
                    flat
                    size="md"
                    dense
                    id="hq-add-btn"
                    class="q-mr-sm"
                    @click="
                      () => {
                        if (!currentHq.id) {
                          triggerCreate('headOffice');
                        } else {
                          triggerCreate(
                            'subBranch',
                            currentHq.id,
                            currentHq.code,
                          );
                        }
                      }
                    "
                  >
                    <Icon
                      icon="pixelarticons:plus"
                      class="cursor-pointer"
                      style="color: var(--foreground); scale: 1.5"
                    />
                  </q-btn>
                </div>

                <div class="col full-width scroll">
                  <div class="q-pa-md">
                    <TreeComponent
                      v-model:nodes="treeData"
                      v-model:expanded-tree="expandedTree"
                      node-key="id"
                      label-key="name"
                      children-key="branch"
                      type-tree="branch"
                      @handle-hold="(v) => handleHold(v)"
                      @select="
                        (v) => {
                          if (
                            v.isHeadOffice &&
                            v._count.branch !== 0 &&
                            currentHq.id === v.id
                          ) {
                            expandedTree = expandedTree.filter(
                              (i) => v.id !== i,
                            );
                            fieldSelectedBranch.value = 'branchHQLabel';

                            currentHq = {
                              id: '',
                              code: '',
                            };
                            return;
                          }

                          if (
                            v.isHeadOffice &&
                            v._count.branch !== 0 &&
                            currentHq.id !== v.id
                          ) {
                            expandedTree = [];
                            expandedTree.push(v.id);
                            fieldSelectedBranch.value = '';
                            inputSearch = '';
                            currentHq = {
                              id: v.id,
                              code: v.code,
                            };
                            beforeBranch = {
                              id: '',
                              code: '',
                            };
                          }
                        }
                      "
                      @create="(v) => triggerCreate('subBranch', v.id, v.code)"
                      @view="
                        (v) => {
                          if (v.isHeadOffice) {
                            triggerEdit('drawer', v.id, 'headOffice', v.code);
                          } else {
                            triggerEdit('drawer', v.id, 'subBranch');
                          }
                        }
                      "
                      @edit="
                        (v) => {
                          if (v.isHeadOffice) {
                            triggerEdit('drawer', v.id, 'headOffice', v.code);
                          } else {
                            triggerEdit('drawer', v.id, 'subBranch');
                          }
                          formType = 'edit';
                        }
                      "
                      @delete="
                        (v) => {
                          triggerDelete(v.id);
                        }
                      "
                      @change-status="
                        async (v) => {
                          const res = await triggerChangeStatus(v.id, v.status);
                          if (res) v.status = res.status;
                        }
                      "
                    />
                  </div>
                </div>
              </div>
            </template>

            <template v-slot:after>
              <div class="column full-height no-wrap">
                <div
                  class="row q-py-sm q-px-md justify-between full-width surface-3 bordered-b"
                >
                  <q-input
                    lazy-rules="ondemand"
                    for="input-search"
                    outlined
                    dense
                    :label="$t('general.search')"
                    class="q-mr-md col-12 col-md-4"
                    :bg-color="$q.dark.isActive ? 'dark' : 'white'"
                    v-model="inputSearch"
                    debounce="200"
                  >
                    <template v-slot:prepend>
                      <q-icon name="mdi-magnify" />
                    </template>
                  </q-input>

                  <div
                    class="row col-12 col-md-6"
                    :class="{ 'q-pt-xs': $q.screen.lt.md }"
                  >
                    <q-select
                      lazy-rules="ondemand"
                      v-model="statusFilter"
                      outlined
                      dense
                      option-value="value"
                      :hide-dropdown-icon="$q.screen.lt.sm"
                      option-label="label"
                      class="col"
                      map-options
                      :for="'field-select-status'"
                      emit-value
                      :options="[
                        { label: $t('general.all'), value: 'all' },
                        { label: $t('status.ACTIVE'), value: 'statusACTIVE' },
                        {
                          label: $t('status.INACTIVE'),
                          value: 'statusINACTIVE',
                        },
                      ]"
                    ></q-select>

                    <q-select
                      lazy-rules="ondemand"
                      id="select-field"
                      for="select-field"
                      :options="
                        fieldDisplay.map((v) => ({
                          label: $t(`branch.card.${v}`),
                          value: v,
                        }))
                      "
                      :display-value="$t('general.displayField')"
                      :hide-dropdown-icon="$q.screen.lt.sm"
                      class="col q-mx-sm"
                      v-model="fieldSelected"
                      option-label="label"
                      option-value="value"
                      map-options
                      emit-value
                      outlined
                      multiple
                      dense
                    />

                    <q-btn-toggle
                      id="btn-mode"
                      v-model="modeView"
                      dense
                      class="no-shadow bordered rounded surface-1"
                      :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
                              ? modeView
                                ? '#C9D3DB '
                                : '#787B7C'
                              : modeView
                                ? '#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
                              ? modeView === false
                                ? '#C9D3DB'
                                : '#787B7C'
                              : modeView === false
                                ? '#787B7C'
                                : '#C9D3DB',
                          }"
                        />
                      </template>
                    </q-btn-toggle>
                  </div>
                </div>

                <div class="surface-2 q-pa-md scroll full-width">
                  <q-table
                    flat
                    bordered
                    class="full-width"
                    :rows-per-page-options="[0]"
                    :rows="
                      treeData
                        .flatMap((v) => [v, ...v.branch])
                        .filter((v) => {
                          if (
                            statusFilter === 'statusACTIVE' &&
                            v.status !== 'ACTIVE'
                          ) {
                            return false;
                          }
                          if (
                            statusFilter === 'statusINACTIVE' &&
                            v.status !== 'INACTIVE'
                          ) {
                            return false;
                          }

                          const terms = `${v.code} ${$i18n.locale === 'eng' ? v.nameEN : v.name} ${v.telephoneNo}`;
                          if (inputSearch && !terms.includes(inputSearch)) {
                            return false;
                          }

                          if (
                            !!currentHq.id &&
                            currentHq.id === v.headOfficeId
                          ) {
                            return true;
                          }
                          if (fieldSelectedBranch.value === 'all') return true;
                          if (fieldSelectedBranch.value === 'branchHQLabel')
                            return v.isHeadOffice;
                          if (fieldSelectedBranch.value === 'branchLabel')
                            return !v.isHeadOffice;

                          return false;
                        })
                    "
                    :columns="columns"
                    :grid="modeView"
                    card-container-class="row q-col-gutter-md"
                    row-key="name"
                    hide-pagination
                    :visible-columns="fieldSelected"
                  >
                    <template v-slot:header="props">
                      <q-tr
                        style="background-color: hsla(var(--info-bg) / 0.07)"
                        :props="props"
                      >
                        <q-th
                          v-for="col in props.cols"
                          :key="col.name"
                          :props="props"
                          :class="{
                            'q-pl-sm': col.label === 'orderNumber',
                          }"
                        >
                          {{ $t(col.label) }}
                        </q-th>
                        <q-th auto-width />
                      </q-tr>
                    </template>

                    <template v-slot:body="props">
                      <q-tr
                        :class="{
                          'app-text-muted': props.row.status === 'INACTIVE',
                          'cursor-pointer': props.row._count.branch !== 0,
                        }"
                        :style="
                          props.rowIndex % 2 !== 0
                            ? $q.dark.isActive
                              ? 'background: hsl(var(--gray-11-hsl)/0.2)'
                              : `background: #f9fafc`
                            : ''
                        "
                        :props="props"
                        @click="
                          () => {
                            if (
                              props.row.isHeadOffice &&
                              props.row._count.branch !== 0
                            ) {
                              fieldSelectedBranch.value = '';
                              inputSearch = '';
                              currentHq = {
                                id: props.row.id,
                                code: props.row.code,
                              };
                              beforeBranch = {
                                id: '',
                                code: '',
                              };
                              expandedTree = [];
                              expandedTree.push(props.row.id);
                            }
                          }
                        "
                      >
                        <q-td
                          class="text-center"
                          v-if="fieldSelected.includes('orderNumber')"
                        >
                          {{ props.rowIndex + 1 }}
                        </q-td>

                        <q-td v-if="fieldSelected.includes('branchLabelName')">
                          <div class="row items-center no-wrap">
                            <div
                              :class="{
                                'q-mr-sm': true,
                                'status-active':
                                  props.row.status !== 'INACTIVE',
                                'status-inactive':
                                  props.row.status === 'INACTIVE',
                                'branch-card__hq': props.row.isHeadOffice,
                                'branch-card__br': !props.row.isHeadOffice,
                              }"
                              style="
                                display: flex;
                                margin-bottom: var(--size-2);
                              "
                            >
                              <div class="">
                                <q-img
                                  :src="
                                    baseUrl +
                                    `/branch/${props.row.id}/branch-image?ts=${Date.now()}`
                                  "
                                  style="
                                    height: 3rem;
                                    width: 3rem;
                                    border-radius: 50%;
                                    aspect-ratio: 1;
                                    overflow: visible;
                                  "
                                >
                                  <template #error>
                                    <div class="branch-card__icon">
                                      <q-icon
                                        size="sm"
                                        name="mdi-office-building-outline"
                                      />
                                    </div>
                                  </template>
                                </q-img>

                                <!-- <q-icon
                                  size="md"
                                  style="scale: 0.8"
                                  name="mdi-office-building-outline"
                                /> -->
                              </div>
                            </div>
                            <div class="col">
                              <div class="col">{{ props.row.name }}</div>
                              <div class="col app-text-muted">
                                {{ props.row.code }}
                              </div>
                            </div>
                          </div>
                        </q-td>
                        <q-td
                          v-if="fieldSelected.includes('branchLabelAddress')"
                        >
                          {{ props.row.address }}
                        </q-td>
                        <q-td v-if="fieldSelected.includes('branchLabelTel')">
                          {{ props.row.contact[0]?.telephoneNo || '-' }}
                        </q-td>
                        <q-td v-if="fieldSelected.includes('branchLabelType')">
                          {{
                            props.row.isHeadOffice
                              ? $t('branch.card.branchHQLabel')
                              : $t('branch.card.branchLabel')
                          }}
                        </q-td>
                        <q-td>
                          <KebabAction
                            :status="props.row.status"
                            :idName="props.row.code"
                            @view="
                              if (props.row.isHeadOffice) {
                                triggerEdit(
                                  'drawer',
                                  props.row.id,
                                  'headOffice',
                                  props.row.code,
                                );
                              } else {
                                triggerEdit(
                                  'drawer',
                                  props.row.id,
                                  'subBranch',
                                );
                              }
                            "
                            @edit="
                              async () => {
                                if (props.row.isHeadOffice) {
                                  await triggerEdit(
                                    'drawer',
                                    props.row.id,
                                    'headOffice',
                                    props.row.code,
                                  );
                                } else {
                                  await triggerEdit(
                                    'drawer',
                                    props.row.id,
                                    'subBranch',
                                  );
                                }
                                formType = 'edit';
                              }
                            "
                            @delete="triggerDelete(props.row.id)"
                            @changeStatus="
                              async () => {
                                const res = await triggerChangeStatus(
                                  props.row.id,
                                  props.row.status,
                                );

                                if (res) props.row.status = res.status;
                              }
                            "
                          />
                        </q-td>
                      </q-tr>
                    </template>

                    <template v-slot:item="props">
                      <div class="col-12 col-md-6">
                        <BranchCard
                          class="surface-1"
                          :id="`branch-card-${props.row.name}`"
                          :class="{
                            'cursor-pointer': props.row._count.branch !== 0,
                          }"
                          @click="
                            () => {
                              if (
                                props.row.isHeadOffice &&
                                props.row._count.branch !== 0
                              ) {
                                fieldSelectedBranch.value = '';
                                inputSearch = '';
                                currentHq = {
                                  id: props.row.id,
                                  code: props.row.code,
                                };
                                beforeBranch = {
                                  id: '',
                                  code: '',
                                };
                                expandedTree = [];
                                expandedTree.push(props.row.id);
                              }
                            }
                          "
                          :metadata="props.row"
                          :color="props.row.isHeadOffice ? 'hq' : 'br'"
                          :key="props.row.id"
                          :data="{
                            branchLabelCode: props.row.code,
                            branchLabelName:
                              $i18n.locale === 'eng'
                                ? props.row.nameEN
                                : props.row.name,
                            branchLabelTel: props.row.contact
                              .map((c: BranchContact) => c.telephoneNo)
                              .join(','),
                            branchLabelAddress:
                              $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 || ''}`,
                            branchLabelType: $t(
                              props.row.isHeadOffice
                                ? 'branch.card.branchHQLabel'
                                : 'branch.card.branchLabel',
                            ),
                            branchImgUrl: `/branch/${props.row.id}/branch-image`,
                          }"
                          :field-selected="fieldSelected"
                          :badge-field="['branchLabelStatus']"
                          :inactive="props.row.status === 'INACTIVE'"
                          @view-detail="
                            (v) => {
                              triggerEdit(
                                'drawer',
                                v.id,
                                v.isHeadOffice ? 'headOffice' : 'subBranch',
                                v.code,
                              );
                            }
                          "
                        >
                          <template v-slot:action>
                            <KebabAction
                              :status="props.row.status"
                              :idName="props.row.code"
                              @view="
                                if (props.row.isHeadOffice) {
                                  triggerEdit(
                                    'drawer',
                                    props.row.id,
                                    'headOffice',
                                    props.row.code,
                                  );
                                } else {
                                  triggerEdit(
                                    'drawer',
                                    props.row.id,
                                    'subBranch',
                                  );
                                }
                              "
                              @edit="
                                async () => {
                                  if (props.row.isHeadOffice) {
                                    await triggerEdit(
                                      'drawer',
                                      props.row.id,
                                      'headOffice',
                                      props.row.code,
                                    );
                                  } else {
                                    await triggerEdit(
                                      'drawer',
                                      props.row.id,
                                      'subBranch',
                                    );
                                  }
                                  formType = 'edit';
                                }
                              "
                              @delete="triggerDelete(props.row.id)"
                              @change-status="
                                async () => {
                                  const res = await triggerChangeStatus(
                                    props.row.id,
                                    props.row.status,
                                  );

                                  if (res) props.row.status = res.status;
                                }
                              "
                            />
                          </template>
                        </BranchCard>
                      </div>
                    </template>
                  </q-table>
                </div>
              </div>
            </template>
          </q-splitter>
        </div>
      </template>
    </div>
  </div>

  <DialogForm
    ref="formDialogRef"
    v-model:modal="modal"
    :title="changeTitle(formType, formTypeBranch) + ' ' + currentEdit.code"
    :submit="
      () => {
        onSubmit();
      }
    "
    :close="
      () => (
        (modal = false),
        (profileFileImg = undefined),
        (isImageEdit = false),
        (isSubCreate = false)
      )
    "
  >
    <div class="q-mx-lg q-mt-lg">
      <!-- title="บริษัทจ๊อบส์ เวิร์คเกอร์ เซอร์วิส จำกัด"
      caption="Jobs Worker Service Co., Ltd." -->
      <ProfileBanner
        active
        useToggle
        :title="formData.name"
        :caption="formData.codeHeadOffice"
        v-model:toggle-status="formData.status"
        v-model:cover-url="imageUrl"
        :hideFade="imageUrl === '' || imageUrl === null"
        :img="imageUrl || null"
        icon="mdi-office-building-outline"
        :color="`hsla(var(${
          formTypeBranch === 'headOffice'
            ? '--pink-6'
            : $q.dark.isActive
              ? '--violet-10'
              : '--violet-11'
        }-hsl)/1)`"
        :bg-color="`hsla(var(${
          formTypeBranch === 'headOffice'
            ? '--pink-6'
            : $q.dark.isActive
              ? '--violet-10'
              : '--violet-11'
        }-hsl)/0.15)`"
        :menu="formMenuIcon"
        @view="imageDialog = true"
        @edit="refImageUpload && refImageUpload.browse()"
        @update:toggle-status="
          () => {
            formData.status =
              formData.status === 'CREATED' ? 'INACTIVE' : 'CREATED';
          }
        "
      />
    </div>
    <div
      class="col surface-1 q-ma-lg rounded bordered scroll row"
      id="branch-form"
    >
      <div class="col" v-if="$q.screen.gt.sm">
        <div style="position: sticky; top: 0" class="q-pa-sm">
          <SideMenu
            :menu="[
              {
                name: $t('form.field.basicInformation'),
                anchor: 'form-information',
              },
              {
                name: $t('branch.form.group.contact'),
                anchor: 'form-contact',
              },
              {
                name: $t('form.address'),
                anchor: 'form-address',
              },
              {
                name: $t('branch.form.group.location'),
                anchor: 'form-location',
              },
              {
                name: 'QR Code',
                anchor: 'form-qr',
              },
              {
                name: $t('branch.form.group.bankAccount'),
                anchor: 'form-bank',
              },
            ]"
            background="transparent"
            :active="{
              background: 'hsla(var(--blue-6-hsl) / .2)',
              foreground: 'var(--blue-6)',
            }"
            scroll-element="#branch-form"
          />
        </div>
      </div>

      <div class="col-md-10 col-12 q-pa-md q-gutter-y-xl">
        <FormBranchInformation
          id="form-information"
          v-model:abbreviation="formData.code"
          v-model:code="formData.codeHeadOffice"
          v-model:code-sub-branch="currentEdit.code"
          v-model:taxNo="formData.taxNo"
          v-model:name="formData.name"
          v-model:nameEN="formData.nameEN"
          v-model:type-branch="formTypeBranch"
          :dense="true"
          :outlined="true"
          :readonly="formType === 'view'"
          :view="isSubCreate"
          title="form.field.basicInformation"
        />
        <FormBranchContact
          id="form-contact"
          v-model:type-branch="formTypeBranch"
          v-model:telephone-no="formData.telephoneNo"
          v-model:contact="formData.contact"
          v-model:email="formData.email"
          v-model:contact-name="formData.contactName"
          v-model:line-id="formData.lineId"
          :separator="true"
          title="branch.form.group.contact"
          :dense="true"
          :outlined="true"
        />

        <AddressForm
          id="form-address"
          dense
          outlined
          separator
          prefix-id="default"
          :title="'form.address'"
          v-model:address="formData.address"
          v-model:addressEN="formData.addressEN"
          v-model:province-id="formData.provinceId"
          v-model:district-id="formData.districtId"
          v-model:sub-district-id="formData.subDistrictId"
          v-model:zip-code="formData.zipCode"
        />
        <FormLocation
          id="form-location"
          :readonly="formType === 'view'"
          :separator="true"
          v-model:latitude="formData.latitude"
          v-model:longitude="formData.longitude"
          title="branch.form.group.location"
        />
        <FormQr
          id="form-qr"
          title="QR Code"
          :separator="true"
          :qr="qrCodeimageUrl"
          :readonly="formType === 'view'"
          @upload="
            () => {
              inputFile.click();
            }
          "
        />
        <FormBank
          id="form-bank"
          title="branch.form.group.bankAccount"
          dense
          v-model:bank-book-list="formBankBook"
        />
        <!-- <FormImage
          :readonly="formType === 'view'"
          v-model:image="imageUrl"
          @upload="
            () => {
              inputFileImg.click();
            }
          "
          :title="$t('formDialogTitleImg')"
        /> -->
      </div>
    </div>
  </DialogForm>

  <DrawerInfo
    ref="formDialogRef"
    v-model:drawerOpen="modalDrawer"
    :category="changeTitle(formType, formTypeBranch)"
    :title="$i18n.locale === 'eng' ? formData.nameEN : formData.name"
    :addressSeparator="true"
    :undo="() => undo()"
    :isEdit="formType === 'edit'"
    :editData="() => drawerEdit()"
    :submit="() => onSubmit()"
    :delete-data="() => triggerDelete(currentEdit.id)"
    :close="
      () => ((modalDrawer = false), flowStore.rotate(), (isImageEdit = false))
    "
    :statusBranch="formData.status"
    hide-action
  >
    <InfoForm>
      <div class="q-mx-lg q-mt-lg">
        <ProfileBanner
          :active="formData.status !== 'INACTIVE'"
          useToggle
          v-model:cover-url="imageUrl"
          :hideFade="imageUrl === '' || imageUrl === null"
          :img="imageUrl || null"
          :cover="imageUrl || null"
          :title="formData.name"
          :caption="formData.code"
          icon="mdi-office-building-outline"
          :color="`hsla(var(${
            formTypeBranch === 'headOffice'
              ? '--pink-6'
              : $q.dark.isActive
                ? '--violet-10'
                : '--violet-11'
          }-hsl)/1)`"
          :bg-color="`hsla(var(${
            formTypeBranch === 'headOffice'
              ? '--pink-6'
              : $q.dark.isActive
                ? '--violet-10'
                : '--violet-11'
          }-hsl)/0.15)`"
          v-model:toggle-status="formData.status"
          @view="imageDialog = true"
          @edit="refImageUpload && refImageUpload.browse()"
          @update:toggle-status="
            async (v) => {
              const res = await triggerChangeStatus(currentId, v);
              if (res) formData.status = res.status;
              await branchStore.fetchList({ pageSize: 99999 });
            }
          "
          :readonly="formType === 'view'"
          :menu="formMenuIcon"
        />
      </div>

      <div class="col q-pa-lg">
        <div
          style="overflow-y: auto"
          class="row full-width full-height surface-1 rounded relative-position"
        >
          <div
            class="q-py-md q-px-lg"
            style="position: absolute; z-index: 99999; top: 0; right: 0"
          >
            <div class="surface-1 row rounded">
              <UndoButton
                v-if="formType === 'edit'"
                icon-only
                @click="undo()"
                type="button"
              />
              <SaveButton
                v-if="formType === 'edit'"
                id="btn-info-basic-save"
                icon-only
                type="submit"
              />
              <EditButton
                v-if="formType !== 'edit'"
                id="btn-info-basic-edit"
                icon-only
                @click="drawerEdit()"
                type="button"
              />
              <DeleteButton
                v-if="formType !== 'edit'"
                id="btn-info-basic-delete"
                icon-only
                @click="triggerDelete(currentEdit.id)"
                type="button"
              />
            </div>
          </div>
          <div
            v-if="$q.screen.gt.sm"
            class="col full-height rounded scroll row q-py-md q-pl-md q-pr-sm"
          >
            <SideMenu
              :menu="[
                {
                  name: $t('form.field.basicInformation'),
                  anchor: 'info-information',
                },
                {
                  name: $t('branch.form.group.contact'),
                  anchor: 'info-contact',
                },
                {
                  name: $t('form.address'),
                  anchor: 'info-address',
                },
                {
                  name: $t('branch.form.group.location'),
                  anchor: 'info-location',
                },
                {
                  name: 'QR Code',
                  anchor: 'info-qr',
                },
                {
                  name: $t('branch.form.group.bankAccount'),
                  anchor: 'info-bank',
                },
              ]"
              background="transparent"
              :active="{
                background: 'hsla(var(--blue-6-hsl) / .2)',
                foreground: 'var(--blue-6)',
              }"
              scroll-element="#branch-info"
            />
          </div>
          <div
            class="col-12 col-md-10 q-py-md q-pr-md full-height"
            :class="$q.screen.xs ? 'q-pl-md' : 'q-pl-sm'"
            id="branch-info"
            style="overflow-y: auto"
          >
            <FormBranchInformation
              id="info-information"
              v-model:abbreviation="formData.code"
              v-model:code="formData.codeHeadOffice"
              v-model:code-sub-branch="currentEdit.code"
              v-model:taxNo="formData.taxNo"
              v-model:name="formData.name"
              v-model:nameEN="formData.nameEN"
              v-model:type-branch="formTypeBranch"
              :separator="true"
              :dense="true"
              :outlined="true"
              :readonly="formType === 'view'"
              view
              title="form.field.basicInformation"
              class="q-mb-xl"
            />
            <FormBranchContact
              id="info-contact"
              title="branch.form.group.contact"
              v-model:telephone-no="formData.telephoneNo"
              v-model:contact="formData.contact"
              v-model:email="formData.email"
              v-model:contact-name="formData.contactName"
              v-model:line-id="formData.lineId"
              :readonly="formType === 'view'"
              :view="formType === 'view'"
              :separator="true"
              :dense="true"
              :outlined="true"
              class="q-mb-xl"
            />
            <AddressForm
              id="info-address"
              dense
              outlined
              separator
              prefix-id="default"
              :title="'form.address'"
              :readonly="formType === 'view'"
              v-model:address="formData.address"
              v-model:addressEN="formData.addressEN"
              v-model:province-id="formData.provinceId"
              v-model:district-id="formData.districtId"
              v-model:sub-district-id="formData.subDistrictId"
              v-model:zip-code="formData.zipCode"
              class="q-mb-xl"
            />
            <FormLocation
              id="info-location"
              title="branch.form.group.location"
              v-model:latitude="formData.latitude"
              v-model:longitude="formData.longitude"
              :readonly="formType === 'view'"
              :separator="true"
              class="q-mb-xl"
            />
            <FormQr
              id="info-qr"
              :readonly="formType === 'view'"
              title="QR Code"
              :separator="true"
              :qr="qrCodeimageUrl"
              @upload="
                () => {
                  inputFile.click();
                }
              "
              class="q-mb-xl"
            />
            <FormBank
              id="info-bank"
              :readonly="formType === 'view'"
              title="branch.form.group.bankAccount"
              dense
              v-model:bank-book-list="formBankBook"
              class="q-mb-xl"
            />
            <FormBranchAdmin
              id="info-branch-admin-view"
              :admin="currentBranchAdmin"
            />
          </div>
        </div>
      </div>
    </InfoForm>
  </DrawerInfo>

  <q-dialog v-model="holdDialog" position="bottom">
    <div class="surface-1 full-width rounded column q-pb-md">
      <div class="flex q-py-sm justify-center full-width">
        <div
          class="rounded"
          style="
            width: 8%;
            height: 4px;
            background-color: hsla(0, 0%, 50%, 0.75);
          "
        ></div>
      </div>

      <q-list v-if="currentNode">
        <q-item
          clickable
          v-ripple
          v-close-popup
          @click.stop="
            triggerCreate('subBranch', currentNode.id, currentNode.code)
          "
        >
          <q-item-section avatar>
            <q-icon name="mdi-file-plus-outline" class="app-text-muted-2" />
          </q-item-section>
          <q-item-section>
            {{
              $t('form.title.create', { name: $t('branch.card.branchLabel') })
            }}
          </q-item-section>
        </q-item>

        <q-item
          clickable
          v-ripple
          v-close-popup
          @click.stop="
            if (currentNode.isHeadOffice) {
              triggerEdit(
                'drawer',
                currentNode.id,
                'headOffice',
                currentNode.code,
              );
            } else {
              triggerEdit('drawer', currentNode.id, 'subBranch');
            }
          "
        >
          <q-item-section avatar>
            <q-icon
              name="mdi-eye-outline"
              style="color: hsl(var(--green-6-hsl))"
            />
          </q-item-section>
          <q-item-section>{{ $t('general.viewDetail') }}</q-item-section>
        </q-item>

        <q-item
          clickable
          v-ripple
          v-close-popup
          @click="
            async () => {
              if (currentNode && currentNode.isHeadOffice) {
                await triggerEdit(
                  'drawer',
                  currentNode.id,
                  'headOffice',
                  currentNode.code,
                );
              } else {
                currentNode &&
                  triggerEdit('drawer', currentNode.id, 'subBranch');
              }
              formType = 'edit';
            }
          "
        >
          <q-item-section avatar>
            <q-icon
              name="mdi-pencil-outline"
              style="color: hsl(var(--cyan-6-hsl))"
            />
          </q-item-section>
          <q-item-section>{{ $t('general.edit') }}</q-item-section>
        </q-item>

        <q-item
          clickable
          v-ripple
          v-close-popup
          @click="triggerDelete(currentNode.id)"
        >
          <q-item-section avatar>
            <q-icon name="mdi-trash-can-outline" class="app-text-negative" />
          </q-item-section>
          <q-item-section>{{ $t('general.delete') }}</q-item-section>
        </q-item>

        <q-item clickable v-ripple>
          <q-item-section avatar>
            <ToggleButton
              two-way
              :id="`view-detail-btn-${currentNode.name}-status`"
              @click="
                async () => {
                  if (!currentNode) return;
                  const res = await triggerChangeStatus(
                    currentNode.id,
                    currentNode.status,
                  );
                  if (res) currentNode.status = res.status;
                }
              "
              :model-value="
                currentNode.status === 'CREATED' ||
                currentNode.status === 'ACTIVE'
              "
            />
          </q-item-section>
          <q-item-section>
            {{
              currentNode.status !== 'INACTIVE'
                ? $t('general.open')
                : $t('general.close')
            }}
          </q-item-section>
        </q-item>
      </q-list>
    </div>
  </q-dialog>

  <ImageUploadDialog
    ref="refImageUpload"
    v-model:dialogState="imageDialog"
    v-model:file="profileFileImg as File"
    v-model:image-url="imageUrl"
    :hiddenFooter="!isImageEdit"
    :changeDisabled="!isImageEdit"
    @save="imageDialog = false"
    clearButton
  >
    <template #error>
      <div class="full-height full-width" style="background: white">
        <div
          class="full-height full-width flex justify-center items-center"
          :style="`background: hsla(var(${
            formTypeBranch === 'headOffice'
              ? '--pink-6'
              : $q.dark.isActive
                ? '--violet-10'
                : '--violet-11'
          }-hsl)/0.15)`"
        >
          <q-icon
            size="15rem"
            name="mdi-office-building-outline"
            :style="`color: hsla(var(${
              formTypeBranch === 'headOffice'
                ? '--pink-6'
                : $q.dark.isActive
                  ? '--violet-10'
                  : '--violet-11'
            }-hsl)/1)`"
          ></q-icon>
        </div>
      </div>
    </template>
  </ImageUploadDialog>
</template>

<style scoped>
.color-icon-arrow {
  color: var(--gray-3);
}

.color-icon-plus {
  color: var(--cyan-6);
}

.tree-container {
  width: 100%;
  min-width: 300px;
  max-width: 25%;
  max-height: 100%;
}

.branch-wrapper {
  flex-grow: 1;

  & > .branch-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: unset;
    gap: var(--size-4);
  }
}

.branch-card__hq {
  --_branch-card-bg: var(--pink-6-hsl);
}

.branch-card__br {
  --_branch-card-bg: var(--violet-11-hsl);

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

.status-active {
  --_branch-status-color: var(--green-6-hsl);
}

.status-inactive {
  --_branch-status-color: var(--red-4-hsl);
  --_branch-badge-bg: var(--red-4-hsl);
  filter: grayscale(1);
  opacity: 0.5;
}

.branch-card__icon {
  background-color: hsla(var(--_branch-card-bg) / 0.15);
  border-radius: 50%;
  padding: var(--size-2);
  position: relative;
  width: 3rem;
  transform: rotate(45deg);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;

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

.slide-enter-active {
  transition: all 0.1s ease-out;
}

.slide-leave-active {
  transition: all 0.1s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-enter-from,
.slide-leave-to {
  transform: translateY(-20px);
  opacity: 0;
}

* :deep(.q-icon.mdi-play) {
  display: none;
}
</style>
