<template>
  <Content
    v-if="!structuralEmpty"
    ref="contentRef"
    :wrapper-class="`am-fcil ${pageWidth < 481 ? 'am-mobile' : ''}`"
    :form-class="`am-fcil__main ${pageWidth < 481 ? 'am-mobile' : ''}`"
    :content-class="`am-fcil__wrapper ${pageWidth < 481 ? 'am-mobile' : ''} ${scrollVisibility ? '' : 'no-scroll'}`"
    :style="cssVars"
  >
    <template #header>
      <span class="am-fcil__filter-buttons">
        <Header
          v-if="
            preselectedCategories !== 1 &&
            !shortcodeData.categories_hidden &&
            availableCategories.length !== 1
          "
          :btn-size="filterWidth < 481 ? 'medium' : 'mini'"
          :btn-string="amLabels.back_btn"
          :btn-type="customizedOptions.backBtn.buttonType"
          :cart-btn-visibility="cartBtnVisibility"
          :cart-items-number="cartItemsNumber"
          @go-back="goBack"
          @go-to-cart="goToCart"
        ></Header>
        <AmButton
          v-if="filterWidth < 481"
          id="am-fcil-filter-menu-btn"
          size="medium"
          category="secondary"
          :type="customizedOptions.filterMenuBtn.buttonType"
          custom-class="am-fcil__filter-buttons__menu"
          :icon-only="true"
          :icon="iconSearchMenu"
          :aria-label="amLabels.filter_input"
          :aria-expanded="filterMobileMenu"
          aria-controls="am-fcil-filter-panel"
          @click="() => (filterMobileMenu = !filterMobileMenu)"
        ></AmButton>
      </span>
      <div id="am-fcil-filter-panel" class="am-fcil__filter">
        <div
          v-if="customizedOptions.searchInput.visibility"
          role="search"
          :aria-label="amLabels.filter_input"
          class="am-fcil__filter-item"
          :class="filterClassWidth.search"
        >
          <AmInput
            v-model="searchFilter"
            :placeholder="amLabels.filter_input"
            :prefix-icon="iconSearch"
          />
        </div>
        <Transition name="slide-fade">
          <div
            v-if="
              shortcodeData.employee.length !== 1 &&
              amEntities.employees.length > 1 &&
              customizedOptions.filterEmployee.visibility &&
              filterMobileMenu &&
              !licence.isLite
            "
            class="am-fcil__filter-item"
            role="search"
            :aria-label="amLabels.filter_employee"
            :class="filterClassWidth.employee"
          >
            <AmSelect
              v-model="employeeFilter"
              clearable
              filterable
              :placeholder="amLabels.filter_employee"
              :aria-label="amLabels.filter_employee"
              :filter-method="filterEmployee"
              :fit-input-width="true"
            >
              <AmOption
                v-for="employee in filteredEmployees"
                :key="employee.id"
                :value="employee.id"
                :label="`${employee.firstName} ${employee.lastName}`"
              >
              </AmOption>
            </AmSelect>
          </div>
        </Transition>
        <Transition name="slide-fade">
          <div
            v-if="
              shortcodeData.location.length !== 1 &&
              amEntities.locations.length > 1 &&
              customizedOptions.filterLocation.visibility &&
              filterMobileMenu &&
              !licence.isLite &&
              !licence.isStarter
            "
            class="am-fcil__filter-item"
            role="search"
            :aria-label="amLabels.filter_location"
            :class="filterClassWidth.location"
          >
            <AmSelect
              v-model="locationFilter"
              clearable
              filterable
              :placeholder="amLabels.filter_location"
              :aria-label="amLabels.filter_location"
              :fit-input-width="true"
              :filter-method="filterLocation"
            >
              <AmOption
                v-for="location in filteredLocations"
                :key="location.id"
                :value="location.id"
                :label="location.name"
              >
              </AmOption>
            </AmSelect>
          </div>
        </Transition>
        <Transition name="slide-fade">
          <div
            v-if="
              availableCategories.length !== 1 &&
              preselectedCategories !== 1 &&
              customizedOptions.sidebar.visibility &&
              !sideMenuVisibility &&
              filterMobileMenu
            "
            class="am-fcil__filter-item am-w100"
            :class="filterClassWidth.category"
          >
            <AmSelect
              v-model="categorySelected"
              :clearable="false"
              :filterable="false"
              :placeholder="''"
              :fit-input-width="true"
            >
              <AmOption
                v-for="cat in categoriesMenu"
                :key="cat.id"
                :value="cat.id"
                :label="cat.name"
              >
              </AmOption>
            </AmSelect>
          </div>
        </Transition>
        <div
          v-if="
            !preselected.show &&
            customizedOptions.filterButtons.visibility &&
            categoryPackages.length !== 0 &&
            categoryServices.length !== 0 &&
            !useCartHasItems(store)
          "
          role="group"
          :aria-label="amLabels.filter_input"
          class="am-fcil__filter-item"
          :class="filterClassWidth.buttons"
        >
          <div class="am-fcil__filter-item__btn-wrapper">
            <AmButton
              native-type="button"
              class="am-fcil__filter-item__btn"
              category="secondary"
              type="text"
              size="mini"
              :aria-pressed="displayCategoryPackages && displayCategoryServices"
              :class="{ 'am-active': displayCategoryPackages && displayCategoryServices }"
              @click="changeCategoryItemsVisibility('all')"
            >
              <span>
                {{ amLabels.filter_all }}
              </span>
            </AmButton>
            <AmButton
              native-type="button"
              class="am-fcil__filter-item__btn"
              category="secondary"
              type="text"
              size="mini"
              :aria-pressed="displayCategoryPackages && !displayCategoryServices"
              :class="{ 'am-active': displayCategoryPackages && !displayCategoryServices }"
              @click="changeCategoryItemsVisibility('packages')"
            >
              <span>
                {{ amLabels.filter_packages }}
              </span>
            </AmButton>
            <AmButton
              native-type="button"
              class="am-fcil__filter-item__btn"
              category="secondary"
              type="text"
              size="mini"
              :aria-pressed="!displayCategoryPackages && displayCategoryServices"
              :class="{ 'am-active': !displayCategoryPackages && displayCategoryServices }"
              @click="changeCategoryItemsVisibility('services')"
            >
              <span>
                {{ amLabels.filter_services }}
              </span>
            </AmButton>
          </div>
        </div>
      </div>
    </template>
    <template
      v-if="
        availableCategories.length !== 1 &&
        preselectedCategories !== 1 &&
        customizedOptions.sidebar.visibility &&
        sideMenuVisibility
      "
      #side
    >
      <SideMenu
        :menu-items="categoriesMenu"
        :init-selection="categorySelected"
        identifier="id"
        name-identifier="name"
        :footer-string="amLabels.get_in_touch"
        :company-email="amSettings.company.email"
        @click="selectCategory"
      ></SideMenu>
    </template>
    <template #heading>
      <div role="heading" aria-level="2" class="am-fcil__heading">
        {{ headingStringRender }}
      </div>
    </template>
    <template #content>
      <div class="am-fcil__items-list" role="list" :aria-label="headingStringRender">
        <!-- Packages -->
        <template v-if="displayCategoryPackages && !useCartHasItems(store)">
          <div
            v-for="item in categoryPackages"
            :key="item.id"
            role="listitem"
            class="am-fcil__item"
            :class="{ 'am-mobile': containerWidth < 481 }"
          >
            <div
              class="am-fcil__item-inner"
              role="group"
              :aria-labelledby="getPackageTitleId(item)"
              :class="{ 'am-mobile': containerWidth < 481 }"
            >
              <div
                class="am-fcil__item-content"
                :style="
                  customizedOptions.cardColor && customizedOptions.cardColor.visibility
                    ? { backgroundColor: useColorTransparency(item.color, 0.1) }
                    : {}
                "
              >
                <!-- Card Badge -->
                <div
                  v-if="customizedOptions.packageBadge.visibility"
                  class="am-fcil__item-badge__wrapper"
                >
                  <div class="am-fcil__item-badge am-package">
                    <span class="am-icon-shipment" aria-hidden="true"></span>
                    <span>
                      {{ amLabels.package }}
                    </span>
                  </div>
                </div>

                <!-- Card Hero Image -->
                <div
                  v-if="item.pictureFullPath"
                  class="am-fcil__item-hero"
                  :style="{ backgroundImage: `url(${item.pictureFullPath})` }"
                  tabindex="0"
                  @click="selectPackage(item)"
                  @keydown.enter="selectPackage(item)"
                />

                <!-- Card Heading -->
                <div class="am-fcil__item-heading">
                  <div
                    :id="getPackageTitleId(item)"
                    class="am-fcil__item-name"
                    tabindex="0"
                    @click="selectPackage(item)"
                    @keydown.enter="selectPackage(item)"
                  >
                    {{ item.name }}
                  </div>
                  <div v-if="customizedOptions.packagePrice.visibility" class="am-fcil__item-cost">
                    <span v-if="item.discount" class="am-fcil__item-discount">
                      {{ `${amLabels.save} ${item.discount}%` }}
                    </span>
                    <span class="am-fcil__item-price">
                      {{ item.price ? useFormattedPrice(usePackageAmount(item)) : amLabels.free }}
                    </span>
                    <span
                      v-if="
                        item.price &&
                        (customizedOptions.tax?.visibility ?? true) &&
                        useTaxVisibility(store, item.id, 'package')
                      "
                      class="am-fcil__item-price"
                    >
                      <template v-if="amSettings.payments.taxes.excluded">
                        {{ `+${amLabels.total_tax_colon}` }}
                      </template>
                      <template v-else>
                        {{ amLabels.incl_tax }}
                      </template>
                    </span>
                  </div>
                </div>

                <!-- Card Info -->
                <div class="am-fcil__item-info">
                  <div
                    v-if="customizedOptions.packageCategory.visibility && categorySelected"
                    class="am-fcil__item-info__inner"
                  >
                    <span class="am-icon-folder" aria-hidden="true"></span>
                    <span>{{
                      availableCategories.find((a) => a.id === categorySelected).name
                    }}</span>
                  </div>
                  <div
                    v-if="customizedOptions.packageDuration.visibility"
                    class="am-fcil__item-info__inner"
                  >
                    <span class="am-icon-clock" aria-hidden="true"></span>
                    <span v-if="item.endDate">
                      {{ `${amLabels.expires_at} ${item.endDate.split(' ')[0]}` }}
                    </span>
                    <span v-else-if="item.durationCount">
                      {{
                        `${amLabels.expires_after} ${item.durationCount} ${packageDurationLabel(item.durationCount, item.durationType)}`
                      }}
                    </span>
                    <span v-else>
                      {{ amLabels.without_expiration }}
                    </span>
                  </div>
                  <div
                    v-if="customizedOptions.packageCapacity.visibility"
                    class="am-fcil__item-info__inner"
                  >
                    <span class="am-icon-user" aria-hidden="true"></span>
                    <span>1/1</span>
                  </div>
                  <div
                    v-if="
                      usePackageLocations(amEntities, item, shortcodeData).length &&
                      customizedOptions.packageLocation.visibility
                    "
                    class="am-fcil__item-info__inner"
                  >
                    <span class="am-icon-locations" aria-hidden="true"></span>
                    <span>
                      {{ displayPackageLocationLabel(amEntities, item) }}
                    </span>
                  </div>
                </div>

                <div
                  v-if="customizedOptions.packageServices.visibility"
                  class="am-fcil__item-services"
                >
                  <span>
                    {{ `${amLabels.in_package}:` }}
                  </span>
                  <span v-for="obj in item.bookable" :key="obj.id">
                    {{ obj.service.name }}
                  </span>
                </div>
              </div>

              <!-- Card Footer -->
              <div
                class="am-fcil__item-footer"
                :class="[
                  { 'am-mobile': containerWidth < 481 },
                  { 'am-micro': containerWidth < 320 },
                ]"
              >
                <AmButton
                  v-if="customizedOptions.cardEmployeeBtn.visibility"
                  :class="{ 'am-w100': containerWidth < 320 }"
                  size="small"
                  :type="customizedOptions.cardEmployeeBtn.buttonType"
                  :aria-label="getEmployeesButtonLabel(item)"
                  @click="getDialogPackageEmployees(item)"
                >
                  {{ amLabels.view_employees }}
                </AmButton>
                <AmButton
                  :class="[
                    { 'am-w100': !customizedOptions.cardEmployeeBtn.visibility },
                    { 'am-micro am-w100': containerWidth < 320 },
                  ]"
                  size="small"
                  :type="customizedOptions.cardContinueBtn.buttonType"
                  :aria-label="getContinueButtonLabel(item)"
                  @click="selectPackage(item)"
                >
                  {{ amLabels.continue }}
                </AmButton>
              </div>
            </div>
          </div>
        </template>
        <!-- /Packages -->

        <!-- Services -->
        <template v-if="displayCategoryServices">
          <div
            v-for="item in categoryServices"
            :key="item.id"
            role="listitem"
            class="am-fcil__item"
            :class="{ 'am-mobile': containerWidth < 481 }"
          >
            <div
              class="am-fcil__item-inner"
              role="group"
              :aria-labelledby="getServiceTitleId(item)"
              :class="{ 'am-mobile': containerWidth < 481 }"
            >
              <div
                class="am-fcil__item-content"
                :style="
                  customizedOptions.cardColor && customizedOptions.cardColor.visibility
                    ? { backgroundColor: useColorTransparency(item.color, 0.1) }
                    : {}
                "
              >
                <!-- Card Badge -->
                <div
                  v-if="customizedOptions.serviceBadge.visibility"
                  class="am-fcil__item-badge__wrapper"
                >
                  <div class="am-fcil__item-badge am-service">
                    <span class="am-icon-service" aria-hidden="true"></span>
                    <span>
                      {{ amLabels.heading_service }}
                    </span>
                  </div>
                </div>
                <!-- /Card Badge -->

                <!-- Card Hero Image -->
                <div
                  v-if="item.pictureFullPath"
                  class="am-fcil__item-hero"
                  :style="{ backgroundImage: `url(${item.pictureFullPath})` }"
                  tabindex="0"
                  @click="selectService(item.id)"
                  @keydown.enter="selectService(item.id)"
                />
                <!-- /Card Hero Image -->

                <!-- Card Heading -->
                <div class="am-fcil__item-heading">
                  <div
                    :id="getServiceTitleId(item)"
                    class="am-fcil__item-name"
                    tabindex="0"
                    @click="selectService(item.id)"
                    @keydown.enter="selectService(item.id)"
                  >
                    {{ item.name }}
                  </div>
                  <div v-if="customizedOptions.servicePrice.visibility" class="am-fcil__item-cost">
                    <span
                      v-if="
                        useServicePrice(amEntities, item.id).min ||
                        useServicePrice(amEntities, item.id).max
                      "
                      class="am-fcil__item-price"
                    >
                      {{ useServicePrice(amEntities, item.id).price }}
                    </span>
                    <span
                      v-if="
                        (customizedOptions.tax?.visibility ?? true) &&
                        useTaxVisibility(store, item.id, 'service')
                      "
                      class="am-fcil__item-price"
                    >
                      <template v-if="amSettings.payments.taxes.excluded">
                        {{ `+${amLabels.total_tax_colon}` }}
                      </template>
                      <template v-else>
                        {{ amLabels.incl_tax }}
                      </template>
                    </span>
                  </div>
                </div>
                <!-- /Card Heading -->

                <!-- Card Info -->
                <div class="am-fcil__item-info">
                  <div
                    v-if="customizedOptions.serviceCategory.visibility && categorySelected"
                    class="am-fcil__item-info__inner"
                  >
                    <span class="am-icon-folder" aria-hidden="true"></span>
                    <span>{{
                      availableCategories.find((a) => a.id === categorySelected).name
                    }}</span>
                  </div>
                  <div
                    v-if="customizedOptions.serviceDuration.visibility"
                    class="am-fcil__item-info__inner"
                  >
                    <span class="am-icon-clock" aria-hidden="true"></span>
                    <span>{{ useServiceDuration(item.duration) }}</span>
                  </div>
                  <div
                    v-if="customizedOptions.serviceCapacity.visibility && !licence.isLite"
                    class="am-fcil__item-info__inner"
                  >
                    <span class="am-icon-user" aria-hidden="true"></span>
                    <span>{{ useEmployeesServiceCapacity(amEntities, item.id) }}</span>
                  </div>
                  <div
                    v-if="
                      useServiceLocation(amEntities, item.id).length &&
                      customizedOptions.serviceLocation.visibility
                    "
                    class="am-fcil__item-info__inner"
                  >
                    <span class="am-icon-locations" aria-hidden="true"></span>
                    <span>
                      {{ displayServiceLocationLabel(amEntities, item.id) }}
                    </span>
                  </div>
                </div>
                <!-- /Card Info -->
              </div>

              <!-- Card Footer -->
              <div
                class="am-fcil__item-footer"
                :class="[
                  { 'am-mobile': containerWidth < 481 },
                  { 'am-micro': containerWidth < 320 },
                ]"
              >
                <AmButton
                  v-if="customizedOptions.cardEmployeeBtn.visibility && !licence.isLite"
                  :class="{ 'am-w100': containerWidth < 320 }"
                  size="small"
                  :type="customizedOptions.cardEmployeeBtn.buttonType"
                  :aria-label="getEmployeesButtonLabel(item)"
                  @click="getDialogServiceEmployees(item.id)"
                >
                  {{ amLabels.view_employees }}
                </AmButton>
                <AmButton
                  :class="[
                    { 'am-w100': !customizedOptions.cardEmployeeBtn.visibility },
                    { 'am-micro am-w100': containerWidth < 320 },
                  ]"
                  size="small"
                  :type="customizedOptions.cardContinueBtn.buttonType"
                  :aria-label="getContinueButtonLabel(item)"
                  @click="selectService(item.id)"
                >
                  {{ amLabels.continue }}
                </AmButton>
              </div>
              <!-- /Card Footer -->
            </div>
          </div>
        </template>
        <!-- /Services -->
      </div>

      <!-- Employees Dialog -->
      <AmDialog
        v-model="dialogEmployees"
        :append-to-body="true"
        :modal-class="'am-fcil-employee'"
        :destroy-on-close="true"
        :lock-scroll="true"
        :custom-styles="popupCssVars"
        width="648px"
        @close="closeEmployeeDialog"
      >
        <template #title>
          <div class="am-fcil-employee__header">
            {{ amLabels.employee_info }}
          </div>
        </template>
        <template #default>
          <div class="am-fcil-employee__content">
            <AmCollapse>
              <AmCollapseItem v-for="(employee, index) in dialogEmployeesArray" :key="index" side>
                <template #heading>
                  <div class="am-fcil-employee__heading">
                    <div class="am-fcil-employee__heading-left">
                      <AmImagePlaceholder
                        item-class="am-fcil-employee__img"
                        :item-data="employee"
                        :trim-string="2"
                      ></AmImagePlaceholder>
                      <div class="am-fcil-employee__name">
                        {{ `${employee.firstName} ${employee.lastName}` }}
                        <span
                          v-if="employee.badge"
                          :style="{ background: employee.badge.color }"
                          class="am-fcil-employee__badge"
                        >
                          {{ employee.badge.content }}
                        </span>
                      </div>
                    </div>
                    <div
                      v-if="dialogEmployeesType === 'service' && employeePrice(employee) !== 0"
                      class="am-fcil-employee__heading-right"
                    >
                      <div class="am-fcil-employee__price">
                        {{ employeePrice(employee) }}
                      </div>
                    </div>
                  </div>
                </template>
                <template #default>
                  <div
                    v-if="useDescriptionVisibility(employee.description)"
                    class="am-fcil-employee__text ql-description"
                    v-html="employee.description"
                  ></div>
                </template>
              </AmCollapseItem>
            </AmCollapse>
          </div>
        </template>
        <template #footer>
          <AmButton
            v-if="customizedOptions.dialogEmployeeBtn.visibility"
            :type="customizedOptions.dialogEmployeeBtn.buttonType"
            category="primary"
            @click="dialogBooking()"
          >
            {{ dialogEmployeesType === 'service' ? amLabels.book_service : amLabels.book_package }}
          </AmButton>
        </template>
      </AmDialog>
      <!-- /Employees Dialog -->

      <AmDialog
        v-model="openBooking"
        :append-to-body="true"
        :modal-class="'amelia-v2-booking amelia-v2-booking-dialog'"
        :destroy-on-close="true"
        :center="true"
        :lock-scroll="false"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :width="bookingDialogWidth"
        @closed="onDialogClosing"
      >
        <CategoryBooking :show-cart="showCart"></CategoryBooking>
      </AmDialog>
    </template>
  </Content>
  <div v-else ref="ameliaContainer" class="am-empty" role="status" aria-live="polite">
    <img
      :src="baseUrls.wpAmeliaPluginURL + '/v3/src/assets/img/am-empty-booking.svg'"
      alt=""
      aria-hidden="true"
    />
    <div class="am-empty__heading">
      {{ amLabels.oops }}
    </div>
    <div class="am-empty__subheading">
      {{
        preselected.show !== 'packages'
          ? amLabels.no_services_employees
          : amLabels.no_package_services
      }}
    </div>
    <div class="am-empty__text">
      <span v-if="preselected.show !== 'packages'">
        {{ amLabels.add_services_employees }}&nbsp;
      </span>
      <a href="https://wpamelia.com/services-and-categories/" rel="nofollow">
        {{ amLabels.add_services_url }}&nbsp;
      </a>
      <span v-if="preselected.show !== 'packages'"> {{ amLabels.and }}&nbsp; </span>
      <a
        v-if="preselected.show !== 'packages'"
        href="https://wpamelia.com/employees/"
        rel="nofollow"
      >
        {{ amLabels.add_employees_url }}
      </a>
    </div>
  </div>
</template>

<script setup>
import AmInput from '../../../_components/input/AmInput.vue'
import AmSelect from '../../../_components/select/AmSelect.vue'
import AmOption from '../../../_components/select/AmOption.vue'
import AmButton from '../../../_components/button/AmButton.vue'
import IconComponent from '../../../_components/icons/IconComponent.vue'
import Header from '../../../common/CatalogFormConstruction/Header/Header.vue'
import SideMenu from '../../../common/CatalogFormConstruction/SideMenu/SideMenu.vue'
import Content from '../../../common/CatalogFormConstruction/Content/Content.vue'
import AmDialog from '../../../_components/dialog/AmDialog.vue'
import AmCollapse from '../../../_components/collapse/AmCollapse.vue'
import AmCollapseItem from '../../../_components/collapse/AmCollapseItem.vue'
import AmImagePlaceholder from '../../../_components/image-placeholder/AmImagePlaceholder.vue'
import CategoryBooking from '../CategoryBooking/CategoryBooking.vue'

import {
  inject,
  ref,
  reactive,
  nextTick,
  computed,
  onBeforeMount,
  onMounted,
  onBeforeUnmount,
  provide,
} from 'vue'

import { useStore } from 'vuex'

// * Composables
import {
  useAvailableCategories,
  useEmployeesServiceCapacity,
  useServiceDuration,
  useServicePrice,
  useServiceLocation,
  usePackageEmployees,
  usePackageLocations,
} from '../../../../assets/js/public/catalog.js'
import {
  useCartHasItems,
  useRemoveLastCartItem,
  useCartStep,
} from '../../../../assets/js/public/cart'
import { useFormattedPrice } from '../../../../assets/js/common/formatting.js'
import { useColorTransparency } from '../../../../assets/js/common/colorManipulation.js'
import { useBuildPackage, usePackageAmount } from '../../../../assets/js/public/package'
import useAction from '../../../../assets/js/public/actions'
import { useDescriptionVisibility } from '../../../../assets/js/common/helper'
import { useTaxVisibility } from '../../../../assets/js/common/pricing'

// * Plugin Licence
let licence = inject('licence')

let { nextPage, previousPage } = inject('changingPageFunctions', {
  nextPage: () => {},
  previousPage: () => {},
})

// * Root Urls
const baseUrls = inject('baseUrls')

// * Booking Dialog
let openBooking = ref(false)

let bookingDialogWidth = ref('760px')
provide('bookingDialogWidth', bookingDialogWidth)

function onDialogClosing() {
  bookingDialogWidth.value = '760px'
}

let showCart = ref(false)

// * Page Width and Reference
let contentRef = ref()
let pageWidth = inject('containerWidth')

// * Customized data
let customizedDataForm = inject('customizedDataForm')

// * Customized options
let customizedOptions = computed(() => {
  return customizedDataForm.value.categoryItemsList.options
})

let scrollVisibility = computed(() => {
  if (!('pageScroll' in customizedOptions.value)) return true

  return customizedOptions.value.pageScroll.visibility
})

// * Root Settings
const amSettings = inject('settings')

// * Store
let store = useStore()

// * Shortcode
const shortcodeData = inject('shortcodeData')
const preselected = computed(() => store.getters['entities/getPreselected'])

let preselectedCategories = computed(() => {
  let categoryArray = Array.isArray(shortcodeData.value.category)
    ? shortcodeData.value.category
    : shortcodeData.value.category.split(',')
  categoryArray = categoryArray.filter((c) => c)
  return categoryArray.length
})

// * Sidebar Menu Visibility
let sideMenuVisibility = computed(() => {
  let sidebarByContainer =
    contentRef.value && contentRef.value.catContainerWidth
      ? contentRef.value.catContainerWidth > 768
      : true
  return (
    preselectedCategories.value !== 1 &&
    customizedOptions.value.sidebar.visibility &&
    sidebarByContainer
  )
})

// * Entities
let amEntities = inject('amEntities')

// * Filtered employees
let queryEmployeeLower = ref('')
function filterEmployee(query) {
  queryEmployeeLower.value = query.toLowerCase()
}
let filteredEmployees = computed(() => {
  if (queryEmployeeLower.value) {
    return amEntities.value.employees.filter((item) => {
      const fullName = `${item.firstName} ${item.lastName}`.toLowerCase()
      return fullName.includes(queryEmployeeLower.value)
    })
  }

  return amEntities.value.employees
})

// * Filtered Locations
let queryLocationLower = ref('')
function filterLocation(query) {
  queryLocationLower.value = query.toLowerCase()
}
let filteredLocations = computed(() => {
  if (queryLocationLower.value) {
    return amEntities.value.locations.filter((item) => {
      return item.name.toLowerCase().includes(queryLocationLower.value)
    })
  }

  return amEntities.value.locations
})

// * Cart button
let cartBtnVisibility = computed(() => useCartStep(store) && useCartHasItems(store) > 0)
let cartItemsNumber = computed(() => useCartHasItems(store))

// * labels
const labels = inject('labels')

// * local language short code
const localLanguage = inject('localLanguage')

// * if local lang is in settings lang
let langDetection = computed(() => amSettings.general.usedLanguages.includes(localLanguage.value))

// * Computed labels
let amLabels = computed(() => {
  let computedLabels = reactive({ ...labels })

  if (amSettings.customizedData?.cbf?.categoryItemsList?.translations) {
    let customizedLabels = amSettings.customizedData.cbf.categoryItemsList.translations
    Object.keys(customizedLabels).forEach((labelKey) => {
      if (customizedLabels[labelKey][localLanguage.value] && langDetection.value) {
        computedLabels[labelKey] = customizedLabels[labelKey][localLanguage.value]
      } else if (customizedLabels[labelKey].default) {
        computedLabels[labelKey] = customizedLabels[labelKey].default
      }
    })
  }
  return computedLabels
})

function getLabel(key, fallback) {
  return amLabels.value[key] || fallback
}

function getPackageTitleId(item) {
  return `am-package-${item.id}-title`
}

function getServiceTitleId(item) {
  return `am-service-${item.id}-title`
}

function getEmployeesButtonLabel(item) {
  return `${getLabel('view_employees', 'View employees')} ${item.name}`
}

function getContinueButtonLabel(item) {
  return `${getLabel('continue', 'Continue')} ${item.name}`
}

// * FILTERS
let searchFilter = ref('')

let iconSearch = {
  components: { IconComponent },
  template: `<IconComponent icon="search"/>`,
}

let filterMobileMenu = ref(true)

let iconSearchMenu = {
  components: { IconComponent },
  template: `<IconComponent icon="filter"/>`,
}

let filterWidth = computed(() => {
  return contentRef.value && contentRef.value.catHeaderWidth ? contentRef.value.catHeaderWidth : 0
})

// * resize function
function resize() {
  if (filterWidth.value > 480 && !filterMobileMenu.value) {
    filterMobileMenu.value = true
  }
}

onMounted(() => {
  window.addEventListener('resize', resize)
  resize()
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', resize)
})

function searchingStrings(name) {
  let arr = []
  searchFilter.value
    .toLowerCase()
    .split(' ')
    .forEach((item) => {
      arr.push(name.toLowerCase().includes(item))
    })

  return arr.filter((a) => a === false).length <= 0
}

// * Categories menu
let availableCategories = inject('availableCategories')

let categoriesMenu = computed(() => {
  let arr = [...availableCategories.value]
  let arrMenu = []
  arr.forEach((item) => {
    arrMenu.push({
      id: item.id,
      name: item.name,
    })
  })

  arrMenu.unshift({
    id: 0,
    name: amLabels.value.filter_all,
  })

  return arrMenu
})

// * Selected category
let categorySelected = inject('categorySelected')
let categoriesForFiltering = computed(() => {
  return {
    ...amEntities.value,
    categories: amEntities.value.categories.map((category) => ({ ...category })),
  }
})

let categoriesFiltered = computed(() => {
  return useAvailableCategories(
    categoriesForFiltering.value,
    shortcodeData.value,
    employeeFilter.value,
    locationFilter.value,
  )
})

let categoriesStructural = computed(() => {
  const e = amEntities.value
  return useAvailableCategories(
    {
      ...e,
      categories: JSON.parse(JSON.stringify(e.categories)),
    },
    shortcodeData.value,
    null,
    null,
  )
})

let categoryPackages = computed(() => {
  let arr = []
  if (categoriesFiltered.value.find((cat) => cat.id === categorySelected.value)) {
    amEntities.value.packages.forEach((pack) => {
      categoriesFiltered.value
        .find((cat) => cat.id === categorySelected.value)
        .packageList.forEach((packId) => {
          if (pack.id === packId && (searchFilter.value ? searchingStrings(pack.name) : true)) {
            arr.push(pack)
          }
        })
    })
  } else {
    amEntities.value.packages.forEach((pack) => {
      categoriesFiltered.value.forEach((cat) => {
        cat.packageList.forEach((packId) => {
          if (
            pack.id === packId &&
            !arr.find((p) => p.id === packId) &&
            (searchFilter.value ? searchingStrings(pack.name) : true)
          ) {
            arr.push(pack)
          }
        })
      })
    })
  }

  return arr
})
let categoryServices = computed(() => {
  let arr = []

  if (
    categorySelected.value &&
    categoriesFiltered.value.find((cat) => cat.id === categorySelected.value)
  ) {
    amEntities.value.services.forEach((service) => {
      categoriesFiltered.value
        .find((cat) => cat.id === categorySelected.value)
        .serviceIdList.forEach((serviceId) => {
          if (
            service.id === serviceId &&
            (searchFilter.value ? searchingStrings(service.name) : true)
          ) {
            arr.push(service)
          }
        })
    })
  } else {
    amEntities.value.services.forEach((service) => {
      categoriesFiltered.value.forEach((cat) => {
        cat.serviceIdList.forEach((serviceId) => {
          if (
            service.id === serviceId &&
            (searchFilter.value ? searchingStrings(service.name) : true)
          ) {
            arr.push(service)
          }
        })
      })
    })
  }

  return arr
})

let categoryPackagesStructural = computed(() => {
  let arr = []
  if (categoriesStructural.value.find((cat) => cat.id === categorySelected.value)) {
    amEntities.value.packages.forEach((pack) => {
      categoriesStructural.value
        .find((cat) => cat.id === categorySelected.value)
        .packageList.forEach((packId) => {
          if (pack.id === packId) {
            arr.push(pack)
          }
        })
    })
  } else {
    amEntities.value.packages.forEach((pack) => {
      categoriesStructural.value.forEach((cat) => {
        cat.packageList.forEach((packId) => {
          if (pack.id === packId && !arr.find((p) => p.id === packId)) {
            arr.push(pack)
          }
        })
      })
    })
  }

  return arr
})

let categoryServicesStructural = computed(() => {
  let arr = []

  if (
    categorySelected.value &&
    categoriesStructural.value.find((cat) => cat.id === categorySelected.value)
  ) {
    amEntities.value.services.forEach((service) => {
      categoriesStructural.value
        .find((cat) => cat.id === categorySelected.value)
        .serviceIdList.forEach((serviceId) => {
          if (service.id === serviceId) {
            arr.push(service)
          }
        })
    })
  } else {
    amEntities.value.services.forEach((service) => {
      categoriesStructural.value.forEach((cat) => {
        cat.serviceIdList.forEach((serviceId) => {
          if (service.id === serviceId) {
            arr.push(service)
          }
        })
      })
    })
  }

  return arr
})

let employeeFilter = ref(null)

let locationFilter = ref(null)

// * Category items (packages, services) visibility
let displayCategoryPackages = ref(true)
let displayCategoryServices = ref(true)

function changeCategoryItemsVisibility(key) {
  if (key === 'all') {
    displayCategoryPackages.value = true
    displayCategoryServices.value = true
  }

  if (key === 'packages') {
    displayCategoryPackages.value = true
    displayCategoryServices.value = false
  }

  if (key === 'services') {
    displayCategoryPackages.value = false
    displayCategoryServices.value = true
  }
}

onBeforeMount(() => {
  if (preselected.value.show) changeCategoryItemsVisibility(preselected.value.show)
})

// * Full-page empty: unfiltered entity lists only (not search / employee / location filters)
const structuralEmpty = computed(() => {
  const hasPackagesStructural =
    displayCategoryPackages.value &&
    !useCartHasItems(store) &&
    categoryPackagesStructural.value.length > 0
  const hasServicesStructural =
    displayCategoryServices.value && categoryServicesStructural.value.length > 0
  return !hasPackagesStructural && !hasServicesStructural
})

let filterClassWidth = computed(() => {
  // p - preselected
  // a - array
  let pEmployee = shortcodeData.value.employee
  let aEmployee = amEntities.value.employees.length
  let pLocation = shortcodeData.value.location
  let aLocation = amEntities.value.locations.length

  let searchVisibility = customizedOptions.value.searchInput.visibility
  let employeeVisibility =
    customizedOptions.value.filterEmployee.visibility &&
    pEmployee.length !== 1 &&
    aEmployee > 1 &&
    !licence.isLite
  let locationVisibility =
    customizedOptions.value.filterLocation.visibility &&
    pLocation.length !== 1 &&
    aLocation > 1 &&
    !licence.isLite &&
    !licence.isStarter
  let buttonsVisibility =
    customizedOptions.value.filterButtons.visibility &&
    preselected.value.show !== 'packages' &&
    preselected.value.show !== 'services' &&
    categoryPackages.value.length !== 0 &&
    categoryServices.value.length !== 0 &&
    !useCartHasItems(store)

  let classFilter = {
    search: 'am-w30',
    employee: 'am-w20',
    location: 'am-w20',
    buttons: 'am-w30',
    category: 'am-w100',
  }

  if (filterWidth.value > 992) {
    if (!searchVisibility || !buttonsVisibility) {
      classFilter.employee = !searchVisibility && !buttonsVisibility ? 'am-w50' : 'am-w35'
      classFilter.location = !searchVisibility && !buttonsVisibility ? 'am-w50' : 'am-w35'
      classFilter.search =
        !buttonsVisibility && !locationVisibility && !employeeVisibility ? 'am-w100' : 'am-w30'

      if (!employeeVisibility) {
        classFilter.location = !searchVisibility && !buttonsVisibility ? 'am-w100' : 'am-w70'
      }

      if (!locationVisibility) {
        classFilter.employee = !searchVisibility && !buttonsVisibility ? 'am-w100' : 'am-w70'
      }
    } else {
      if (!employeeVisibility) {
        classFilter.location = 'am-w40'
      }

      if (!locationVisibility) {
        classFilter.employee = 'am-w40'
      }

      if (!employeeVisibility && !locationVisibility) {
        classFilter.search = 'am-w70'
      }
    }
  } else if (filterWidth.value > 768) {
    classFilter.search = buttonsVisibility
      ? 'am-w50 am-tablet am-order1'
      : 'am-w100 am-tablet am-order1'
    classFilter.buttons = searchVisibility
      ? 'am-w50 am-tablet am-order2'
      : 'am-w100 tablet am-order2'
    classFilter.employee = locationVisibility
      ? 'am-w50 am-tablet am-order3'
      : 'am-w100 am-tablet am-order3'
    classFilter.location = employeeVisibility
      ? 'am-w50 am-tablet am-order4'
      : 'am-w100 am-tablet am-order4'
    classFilter.category = 'am-w100 am-tablet am-order5'
  } else if (filterWidth.value > 480) {
    classFilter.search = buttonsVisibility
      ? 'am-w50 am-tablet am-order1'
      : 'am-w100 am-tablet am-order1'
    classFilter.buttons = searchVisibility
      ? 'am-w50 am-tablet am-order2'
      : 'am-w100 tablet am-order2'
    classFilter.employee = locationVisibility
      ? 'am-w50 am-tablet am-order3'
      : 'am-w100 am-tablet am-order3'
    classFilter.location = employeeVisibility
      ? 'am-w50 am-tablet am-order4'
      : 'am-w100 am-tablet am-order4'
    classFilter.category = 'am-w100 am-tablet am-order5'
  } else {
    classFilter.employee = 'am-w100 am-mobile'
    classFilter.location = 'am-w100 am-mobile'
    classFilter.search = 'am-w100 am-mobile'
    classFilter.buttons = 'am-w100 am-mobile'
    classFilter.category = 'am-w100 am-mobile'
  }

  return classFilter
})

// * Container width
let containerWidth = computed(() => {
  return contentRef.value && contentRef.value.catContainerWidth
    ? contentRef.value.catContainerWidth
    : 0
})

let headingStringRender = computed(() => {
  let packagesLength =
    categoryPackages.value.length && !useCartHasItems(store) ? categoryPackages.value.length : 0

  let serviceString =
    categoryServices.value.length > 1
      ? amLabels.value.heading_services
      : amLabels.value.heading_service
  let packageString = packagesLength
    ? packagesLength > 1
      ? amLabels.value.packages
      : amLabels.value.package
    : ''

  if (!categoryServices.value.length && !packagesLength) {
    return amLabels.value.no_search_data
  }

  if (displayCategoryServices.value && (!displayCategoryPackages.value || !packagesLength)) {
    return `${amLabels.value.available} - ${categoryServices.value.length} ${serviceString}`
  }

  if (
    (!displayCategoryServices.value || !categoryServices.value.length) &&
    displayCategoryPackages.value
  ) {
    return `${amLabels.value.available} - ${packagesLength} ${packageString}`
  }

  let connective = packagesLength ? '/' : ''

  return `${amLabels.value.available} - ${categoryServices.value.length} ${serviceString} ${connective} ${packagesLength} ${packageString}`
})

// * Choose category from categories menu
function selectCategory(category) {
  const categoryId = category.id === 0 ? null : category.id
  categorySelected.value = categoryId
  store.commit('booking/setCategoryId', categoryId)
}

let itemType = inject('itemType')

// * Select Service
function selectService(id) {
  store.commit('booking/setServiceId', parseInt(id))
  store.commit('booking/setBookableType', 'appointment')

  itemType.value = 'appointment'

  useAction(store, {}, 'SelectService', 'appointment', null, null)

  nextTick(() => {
    nextPage()
  })
}

// * Select Package
function selectPackage(pack) {
  store.commit('booking/setServiceId', null)
  store.commit('booking/setPackageId', pack.id)
  store.commit('booking/setBookableType', 'package')
  store.commit('booking/setMultipleAppointments', useBuildPackage(0, pack))
  store.commit('booking/setCartItemIndex', 0)

  itemType.value = 'package'

  useAction(store, {}, 'SelectPackage', 'package', null, null)

  nextTick(() => {
    nextPage()
  })
}

function goBack() {
  categorySelected.value = null
  store.commit('booking/setCategoryId', null)
  previousPage()
}

function goToCart() {
  useRemoveLastCartItem(store)

  showCart.value = true

  openBooking.value = true
}

// * Dialog Employees
let dialogEmployees = ref(false)
let dialogEmployeesType = ref('')
let dialogEmployeesArray = ref([])
let dialogPackage = ref({})
let dialogServiceId = ref(null)

function closeEmployeeDialog() {
  dialogEmployeesType.value = ''
  dialogEmployeesArray.value = []
  dialogPackage.value = {}
  dialogServiceId.value = null
}

function getDialogPackageEmployees(pack) {
  dialogEmployeesArray.value = usePackageEmployees(amEntities.value, pack, shortcodeData.value)
  dialogPackage.value = pack
  dialogEmployees.value = true
}

function getDialogServiceEmployees(serviceId) {
  let arr = []
  let employeesIds = Object.keys(amEntities.value.entitiesRelations)

  employeesIds.forEach((employeeId) => {
    if (
      employeeId in amEntities.value.entitiesRelations &&
      serviceId in amEntities.value.entitiesRelations[employeeId] &&
      amEntities.value.employees.find((a) => a.id === parseInt(employeeId))
    ) {
      arr.push(amEntities.value.employees.find((a) => a.id === parseInt(employeeId)))
    }
  })

  dialogEmployeesArray.value = arr
  dialogEmployeesType.value = 'service'
  dialogEmployees.value = true

  dialogServiceId.value = serviceId
}

function employeePrice(employee) {
  let servicePrice = amEntities.value.services.find((a) => a.id === dialogServiceId.value).price
  let employeeServicePrice = employee.serviceList.find((a) => a.id === dialogServiceId.value).price

  return employeeServicePrice !== servicePrice
    ? `${employeeServicePrice - servicePrice > 0 ? (servicePrice > 0 ? '+' : '') : '-'} ${useFormattedPrice(employeeServicePrice - servicePrice)}`
    : 0
}

function dialogBooking() {
  if (dialogEmployeesType.value === 'service') {
    selectService(dialogServiceId.value)
  } else {
    selectPackage(dialogPackage.value)
  }

  closeEmployeeDialog()
}

function packageDurationLabel(duration, type) {
  let string = ''
  if (duration > 1) {
    if (type === 'day') string = amLabels.value.expires_days
    if (type === 'week') string = amLabels.value.expires_weeks
    if (type === 'month') string = amLabels.value.expires_months
  } else {
    if (type === 'day') string = amLabels.value.expires_day
    if (type === 'week') string = amLabels.value.expires_week
    if (type === 'month') string = amLabels.value.expires_month
  }
  return string
}

function displayPackageLocationLabel(entities, item) {
  let locations = usePackageLocations(entities, item)
  if (
    locations.length === 1 ||
    (locations.length && locations.every((location) => location.id === locations[0].id))
  ) {
    return locations[0].address ? locations[0].address : locations[0].name
  }
  return amLabels.value.multiple_locations
}

function displayServiceLocationLabel(entities, id) {
  let locations = useServiceLocation(entities, id)
  if (
    locations.length === 1 ||
    (locations.length && locations.every((location) => location.id === locations[0].id))
  ) {
    return locations[0].address ? locations[0].address : locations[0].name
  }
  return amLabels.value.multiple_locations
}

// * Fonts
let amFonts = inject(
  'amFonts',
  ref({
    fontFamily: 'Amelia Roboto, sans-serif',
    fontUrl: '',
    customFontFamily: '',
    fontFormat: '',
    customFontSelected: false,
  }),
)

// * Colors
let amColors = inject('amColors')

let cssVars = computed(() => {
  return {
    '--am-c-fcil-text-op-10': useColorTransparency(amColors.value.colorSbText, 0.1),
    '--am-c-fcil-main-text-op15': useColorTransparency(amColors.value.colorMainText, 0.15),
    '--am-c-fcil-card-text-op15': useColorTransparency(amColors.value.colorCardText, 0.15),
    '--am-c-fcil-card-text-op80': useColorTransparency(amColors.value.colorCardText, 0.8),
    '--am-c-fcil-primary-op20': useColorTransparency(amColors.value.colorPrimary, 0.2),
    '--am-c-fcil-success-op20': useColorTransparency(amColors.value.colorSuccess, 0.2),
    '--am-c-fcil-filter-text-op10': useColorTransparency(amColors.value.colorInpText, 0.1),
    '--am-w-fcil-main':
      availableCategories.value.length !== 1 &&
      preselectedCategories.value !== 1 &&
      customizedOptions.value.sidebar.visibility &&
      sideMenuVisibility.value
        ? 'calc(100% - 220px)'
        : '100%',
    '--am-w-fcil-card': contentRef.value && contentRef.value.catFormWidth < 580 ? '100%' : '50%',
  }
})

let popupCssVars = computed(() => {
  return {
    '--am-f-fcil-employee-f': amFonts.value.fontFamily,
    '--am-c-fcil-employee-bgr': amColors.value.colorMainBgr,
    '--am-c-fcil-employee-heading': amColors.value.colorMainHeadingText,
    '--am-c-fcil-employee-text': amColors.value.colorMainText,
    '--am-c-fcil-employee-text-op80': useColorTransparency(amColors.value.colorMainText, 0.8),
    '--am-c-fcil-employee-text-op15': useColorTransparency(amColors.value.colorMainText, 0.15),
    '--am-c-fcil-employee-primary': amColors.value.colorPrimary,
    '--am-c-fcil-employee-primary-op10': useColorTransparency(amColors.value.colorPrimary, 0.1),
    '--am-c-inp-border': amColors.value.colorInpBorder,
    '--am-c-main-text': amColors.value.colorMainText,
  }
})
</script>

<script>
export default {
  name: 'CategoryItemsList',
  key: 'categoryItemsList',
}
</script>

<style lang="scss">
@import '../../../../../src/assets/scss/common/quill/_quill-mixin.scss';

.amelia-v2-booking #amelia-container {
  // am-    amelia
  // -c-    color
  // -fcil- form category items list
  // -sb-   sidebar
  // -bgr   background
  .am-fcil {
    --am-c-fcil-filter-text: var(--am-c-inp-text);
    --am-c-fcil-filter-placeholder: var(--am-c-inp-placeholder);
    --am-c-fcil-filter-inp-bgr: var(--am-c-inp-bgr);
    --am-c-fcil-main-bgr: var(--am-c-main-bgr);
    --am-c-fcil-main-heading: var(--am-c-main-heading-text);
    --am-c-fcil-main-text: var(--am-c-main-text);
    --am-c-fcil-card-bgr: var(--am-c-card-bgr);
    --am-c-fcil-card-text: var(--am-c-card-text);
    --am-c-fcil-card-border: var(--am-c-card-border);
    --am-c-fcil-primary: var(--am-c-primary);
    --am-c-fcil-success: var(--am-c-success);
    width: 100%;
    padding: 24px;
    border-radius: 10px;

    &.am-mobile {
      padding: 8px;
    }

    &__filter {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      margin: 12px 0;

      &-buttons {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;

        &__menu {
          font-size: 24px;
          flex: 0 0 auto;
          margin: 0 0 0 8px;
        }
      }

      &-item {
        width: 100%;
        padding: 0 8px;
        margin: 12px 0;

        &:first-child {
          padding-left: 0;
        }

        &:last-child {
          padding-right: 0;
        }

        &.am-tablet {
          &.am-order {
            &1 {
              order: 1;
            }
            &2 {
              order: 2;
            }
            &3 {
              order: 3;
              padding-left: 0;
            }
            &4 {
              order: 4;
              padding-right: 0;
            }
            &5 {
              order: 5;
            }
          }
        }

        &__btn {
          &.am-button {
            width: 100%;
            max-width: 30%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 15px;
            font-weight: 500;
            line-height: 1.6;
            padding: 2px 8px;
            border-radius: 6px;
            transition: all 0.2s ease-in-out;
            cursor: pointer;
            color: var(--am-c-fcil-filter-placeholder);
            background: transparent;
            border: 0;
            font-family: inherit;

            &:hover,
            &.am-active {
              color: var(--am-c-fcil-filter-text);
              background-color: var(--am-c-fcil-filter-inp-bgr);
            }

            &:focus-visible {
              color: var(--am-c-fcil-filter-text);
              background-color: var(--am-c-fcil-filter-inp-bgr);
            }
          }

          & span {
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
          }

          &-wrapper {
            width: 100%;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-items: center;
            justify-content: space-between;
            background-color: var(--am-c-fcil-filter-text-op10);
            border-radius: 6px;
            padding: 6px;
          }
        }

        &.am- {
          &w20 {
            max-width: 20%;
          }

          &w30 {
            max-width: 30%;
          }

          &w35 {
            max-width: 35%;
          }

          &w40 {
            max-width: 40%;
          }

          &w50 {
            max-width: 50%;
          }

          &w60 {
            max-width: 60%;
          }

          &w70 {
            max-width: 70%;
          }

          &w100 {
            max-width: 100%;
            padding: 0;
          }
        }
      }

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

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

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

    &__main {
      width: 100%;
      max-width: var(--am-w-fcil-main);
      border: 1px solid var(--am-c-fcil-main-text-op15);
      border-radius: 6px;

      &.am-mobile {
        border: none;
      }
    }

    &__heading {
      font-size: 18px;
      font-weight: 500;
      line-height: 1.555555;
      color: var(--am-c-fcil-main-heading);
      padding: 16px 24px 16px;
    }

    &__wrapper {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      padding: 0 16px 16px;

      &.am-mobile {
        padding: 0;
      }

      &.no-scroll {
        max-height: unset;
        overflow-x: unset;
      }
    }

    &__items-list {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      width: 100%;
    }

    &__item {
      max-width: var(--am-w-fcil-card);
      width: 100%;
      display: flex;
      padding: 8px;
      background-color: transparent;

      &-inner {
        display: flex;
        flex-direction: column;
        position: relative;
        width: 100%;
        padding: 0 0 56px;
        border-radius: 6px;
        background-color: var(--am-c-fcil-card-bgr);
        box-shadow: 0 0 6px 2px var(--am-c-fcil-main-text-op15);

        &.am-mobile {
          padding: 12px;
        }
      }

      &-content {
        height: 100%;
        padding: 12px 12px 0;
      }

      &-badge {
        display: inline-flex;
        align-items: center;
        padding: 0 8px 0 4px;
        border-radius: 12px;

        &.am-package {
          background: linear-gradient(
            95.75deg,
            var(--am-c-fcil-card-bgr) -110.8%,
            var(--am-c-warning) 114.33%
          );
          span {
            color: var(--am-c-fcil-card-bgr);
          }
        }

        &.am-service {
          background-color: var(--am-c-fcil-success-op20);
          span {
            color: var(--am-c-fcil-success);
          }
        }

        &__wrapper {
          height: 24px;
          margin: 0 0 12px;
        }

        span {
          display: block;
          font-size: 14px;
          font-weight: 400;
          line-height: 1;

          &[class*='am-icon'] {
            font-size: 24px;
          }
        }
      }

      &-hero {
        padding: 56.25% 0 0;
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: center;
        border: 1px solid var(--am-c-fcil-main-text-op15);
        border-radius: 4px;
        transition: background-size 0.2s ease-in-out;

        & {
          transition: background-size 0.3s ease-in-out;
        }
        &:hover {
          cursor: pointer;
          background-size: 105% !important;
        }
      }

      &-heading {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        margin: 12px 0;
      }

      &-name {
        flex: 1 1 30%;
        font-size: 18px;
        font-weight: 500;
        line-height: 1.55556;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        color: var(--am-c-fcil-card-text);
        margin: 0 4px 0 0;
        cursor: pointer;
      }

      &-cost {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;

        & > span {
          display: inline-flex;
          font-size: 14px;
          font-weight: 500;
          line-height: 20px;
          padding: 2px 8px;
          border-radius: 24px;
          margin: 0 8px 8px 0;
          flex: 0 1 auto;

          &:last-child {
            margin-right: 0;
          }
        }
      }

      &-price {
        color: var(--am-c-fcil-primary);
        background-color: var(--am-c-fcil-primary-op20);
      }

      &-discount {
        color: var(--am-c-fcil-success);
        background-color: var(--am-c-fcil-success-op20);
      }

      &-info {
        display: flex;
        flex-wrap: wrap;
        align-items: center;

        &__inner {
          height: 18px;
          display: inline-flex;
          align-items: center;
          max-width: 100%;
          padding: 0 8px 0 0;
          margin: 0 0 8px;

          &:last-child {
            padding: 0;
          }

          span {
            font-size: 13px;
            font-weight: 400;
            color: var(--am-c-fcil-card-text-op80);
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;

            &[class*='am-icon'] {
              flex: 0 0 auto;
              font-size: 24px;
              color: var(--am-c-fcil-primary);
            }
          }
        }
      }

      &-services {
        margin: 0 0 12px;

        span {
          position: relative;
          display: inline-flex;
          font-size: 13px;
          font-weight: 400;
          line-height: 1.384615;
          word-break: break-word;
          color: var(--am-c-fcil-card-text-op80);
          padding: 0 8px 0 0;

          &:after {
            content: '';
            position: absolute;
            top: 50%;
            right: 2px;
            transform: translateY(-50%);
            border: 2px solid var(--am-c-fcil-card-text-op80);
            border-radius: 50%;
          }

          &:first-child {
            padding-right: 2px;
          }

          &:first-child,
          &:last-child {
            &:after {
              display: none;
            }
          }
        }
      }

      &-footer {
        position: absolute;
        bottom: 12px;
        left: 12px;
        width: calc(100% - 24px);
        display: flex;
        align-items: center;
        justify-content: space-between;

        &.am-mobile {
          position: relative;
          bottom: 0;
          left: 0;
          width: 100%;
          flex-wrap: wrap;
        }

        .am-button {
          &.am-micro {
            margin-top: 8px;
          }
        }
      }
    }
  }
}

.am-dialog-popup {
  &.am-fcil-employee {
    z-index: 9999999 !important;

    * {
      font-family: var(--am-f-fcil-employee-f), sans-serif;
    }

    .el-dialog {
      background-color: var(--am-c-fcil-employee-bgr, $am-white);
    }

    .am-collapse-item {
      $count: 100;
      @for $i from 0 through $count {
        &:nth-child(#{$i + 1}) {
          animation: 600ms cubic-bezier(0.45, 1, 0.4, 1.2) #{$i * 100}ms am-animation-slide-up;
          animation-fill-mode: both;
        }
      }

      &__heading {
        padding: 8px;
        transition-delay: 0.5s;

        &-side {
          transition-delay: 0s;
        }
      }
    }

    .am-fcil-employee {
      &__header {
        font-size: 18px;
        font-weight: 500;
        line-height: 1.55555;
        color: var(--am-c-fcil-employee-heading);
      }

      &__content {
        padding: 16px 24px 24px;
      }

      &__heading {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        &-left {
          display: flex;
          align-items: center;
          justify-content: flex-start;
        }
      }

      &__img {
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        width: 54px;
        height: 54px;
        border-radius: 4px;
        border: 1px solid var(--am-c-inp-border);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        font-size: 18px;
        font-weight: 500;
        color: var(--am-c-fcil-employee-bgr);
        margin-right: 12px;
      }

      &__name {
        font-size: 15px;
        font-weight: 500;
        line-height: 1.33333;
        color: var(--am-c-fcil-employee-text);
      }

      &__badge {
        color: #fff;
        border-radius: 4px;
        padding: 0 4px;
        font-size: 13px;
        line-height: 19px;
      }

      &__text {
        font-size: 15px;
        font-weight: 400;
        line-height: 1.6;
        color: var(--am-c-fcil-employee-text-op80);

        &.ql-description {
          @include quill-styles;
        }
      }

      &__price {
        display: inline-flex;
        flex: 0 0 auto;
        font-size: 14px;
        font-weight: 500;
        color: var(--am-c-fcil-employee-primary);
        background-color: var(--am-c-fcil-employee-primary-op10);
        border-radius: 20px;
        padding: 2px 8px;
      }
    }
  }
}
</style>
