<template>
  <v-row no-gutters>
    <!-- TOGGLES AND INPUTS -->
    <v-col cols="12" md="6" lg="6" class="pr-10">
      <!-- REFUND -->
      <section class="border-b">
        <p class="header-style">Refund</p>
        <div class="mt-4">
          <v-number-input
            v-model="facility.bookingFeeRefundPercentage"
            :reverse="false"
            controlVariant="stacked"
            variant="outlined"
            label="Booking Fee Cancellation Refund (%)"
            :hideInput="false"
            :inset="false"
            :disabled="!facility.isBookingFeeEnabled || !facility.bookingAmount"
            type="number"
            hide-details
            :precision="null"
            suffix="%"
            :min="0"
            :max="100"
          />
        </div>
        <v-row no-gutters align="center" class="my-4">
          <v-col
            cols="12"
            md="6"
            lg="6"
            :class="`pr-${$vuetify.display.xs ? 0 : 4} pb-${
              $vuetify.display.xs ? 4 : 0
            }`"
          >
            <v-number-input
              v-model="facility.refundFrom"
              :reverse="false"
              controlVariant="stacked"
              variant="outlined"
              label="Refund From"
              :hideInput="false"
              :inset="false"
              :disabled="
                !(facility.isBookingFeeEnabled || facility.isDepositEnabled)
              "
              type="number"
              hide-details
              :precision="null"
              :min="0"
            />
          </v-col>
          <v-col cols="12" md="6" lg="6">
            <v-number-input
              v-model="facility.refundTo"
              :reverse="false"
              controlVariant="stacked"
              variant="outlined"
              label="Refund To"
              :hideInput="false"
              :inset="false"
              :disabled="
                !(facility.isBookingFeeEnabled || facility.isDepositEnabled)
              "
              type="number"
              hide-details
              :precision="null"
              :min="0"
            />
          </v-col>
        </v-row>
      </section>
      <!-- BOOKING FEE -->
      <section class="border-b pb-7 mt-6">
        <p class="header-style">Booking Fee</p>
        <div
          class="d-flex align-center rounded px-5 border-md"
          style="list-feature-toggle"
        >
          <p class="flex-grow-1">Booking Fee</p>
          <v-switch
            v-model="facility.isBookingFeeEnabled"
            color="success"
            hide-details
            @update:modelValue="onChangeIsBookingFeeEnabled"
          ></v-switch>
        </div>

        <div class="mt-4" v-if="bookingFeeTaxPercentage != null">
          <v-number-input
            v-model="bookingFeeTaxValue"
            :value="`${bookingFeeTaxPercentage}%`"
            :label="`Booking Fee ${bookingCurrencyType}`"
            readonly
            class="border-sm"
            hide-details
            controlVariant="hidden"
            :disabled="facility.bookingAmount == null"
            :precision="2"
          />
        </div>
      </section>

      <!-- member -->
      <section class="border-b pb-7 mt-5">
        <p v-if="facility.isGuestEnabled" class="flex-grow-1">Member</p>
        <v-row class="mt-4" no-gutters justify="space-between">
          <v-col cols="12">
            <v-number-input
              v-model="facility.bookingAmount"
              :reverse="false"
              controlVariant="stacked"
              label="Booking Fee Amount"
              :hideInput="false"
              :inset="false"
              :placeholder="`${bookingCurrencySymbol}0.00`"
              :disabled="!facility.isBookingFeeEnabled"
              clearable
              hide-details
              class="border-sm"
              :prefix="bookingCurrencySymbol"
              :precision="2"
            />
          </v-col>
          <v-col cols="12" class="mt-4">
            <v-number-input
              v-model="facility.peakBookingFeeAmount"
              :reverse="false"
              controlVariant="stacked"
              label="Peak Booking Fee Amount"
              :hideInput="false"
              :inset="false"
              :placeholder="`${bookingCurrencySymbol}0.00`"
              :disabled="!facility.isBookingFeeEnabled"
              clearable
              hide-details
              class="border-sm"
              :prefix="bookingCurrencySymbol"
              :precision="2"
            />
          </v-col>
          <v-col cols="12" class="mt-4">
            <v-card class="mx-auto border-sm pa-2" color="grey-lighten-4" tile>
              <v-row no-gutters align="center">
                <v-col cols="" class="text-caption"> Total Booking Fee </v-col>
                <v-col cols="" class="text-right text-caption">
                  {{
                    `(${bookingCurrencySymbol}${(
                      Number(totalBookingFeeRefundPercentageValue) || 0
                    ).toFixed(2)} cancellation)`
                  }}
                </v-col>
              </v-row>
              <v-row no-gutters align="baseline">
                <v-col>
                  {{
                    `${bookingCurrencySymbol}${(
                      Number(totalBookingFeeValue) || 0
                    ).toFixed(2)}`
                  }}
                </v-col>
                <v-col class="text-right text-caption">
                  {{
                    `(with (${bookingCurrencySymbol}${(
                      Number(bookingFeeTaxValue) || 0
                    ).toFixed(2)} ${bookingCurrencyType}))`
                  }}
                </v-col>
              </v-row>
            </v-card>
          </v-col>
          <v-col cols="12" class="mt-4">
            <v-card class="mx-auto border-sm pa-2" color="grey-lighten-4" tile>
              <v-row no-gutters align="center">
                <v-col class="text-caption"> Peak Total Booking Fee </v-col>
                <v-col class="text-right text-caption">
                  {{
                    `(${bookingCurrencySymbol}${(
                      Number(totalPeakBookingFeeRefundPercentageValue) || 0
                    ).toFixed(2)} cancellation)`
                  }}
                </v-col>
              </v-row>
              <v-row no-gutters align="baseline">
                <v-col>
                  {{
                    `${bookingCurrencySymbol}${(
                      Number(totalPeakBookingFeeValue) || 0
                    ).toFixed(2)}`
                  }}
                </v-col>
                <v-col class="text-right text-caption">
                  {{
                    `(with (${bookingCurrencySymbol}${(
                      Number(peakBookingFeeTaxValue) || 0
                    ).toFixed(2)} ${bookingCurrencyType}))`
                  }}
                </v-col>
              </v-row>
            </v-card>
          </v-col>
        </v-row>
      </section>

      <!-- guest -->
      <section class="border-b pb-7 mt-5">
        <div
          class="d-flex align-center rounded px-5 border-md"
          style="list-feature-toggle"
        >
          <p class="flex-grow-1">Guest</p>
          <v-switch
            v-model="facility.isGuestEnabled"
            color="success"
            hide-details
            :disabled="!facility.isBookingFeeEnabled"
          />
        </div>
        <v-row
          v-if="facility.isBookingFeeEnabled && facility.isGuestEnabled"
          class="mt-4"
          no-gutters
          justify="space-between"
        >
          <v-col cols="12">
            <v-number-input
              v-model="facility.bookingFeeGuestAmount"
              :reverse="false"
              controlVariant="stacked"
              label="Booking Fee Guest Amount"
              :hideInput="false"
              :inset="false"
              :placeholder="`${bookingCurrencySymbol}0.00`"
              :disabled="!facility.isBookingFeeEnabled"
              clearable
              hide-details
              class="border-sm"
              :prefix="bookingCurrencySymbol"
              :precision="2"
            />
          </v-col>
          <v-col cols="12" class="mt-4">
            <v-number-input
              v-model="facility.peakBookingFeeGuestAmount"
              :reverse="false"
              controlVariant="stacked"
              label="Peak Booking Fee Guest Amount"
              :hideInput="false"
              :inset="false"
              :placeholder="`${bookingCurrencySymbol}0.00`"
              :disabled="!facility.isBookingFeeEnabled"
              clearable
              hide-details
              class="border-sm"
              :prefix="bookingCurrencySymbol"
              :precision="2"
            />
          </v-col>
          <v-col cols="12" class="mt-4">
            <v-card class="mx-auto border-sm pa-2" color="grey-lighten-4" tile>
              <v-row no-gutters align="center">
                <v-col class="text-caption">
                  Total Booking Fee for Guest
                </v-col>
                <v-col class="text-right text-caption">
                  {{
                    `(${bookingCurrencySymbol}${(
                      Number(totalGuestBookingFeeRefundPercentageValue) || 0
                    ).toFixed(2)} cancellation)`
                  }}
                </v-col>
              </v-row>
              <v-row no-gutters align="baseline">
                <v-col>
                  {{
                    `${bookingCurrencySymbol}${(
                      Number(totalGuestBookingFeeValue) || 0
                    ).toFixed(2)}`
                  }}
                </v-col>
                <v-col class="text-right text-caption">
                  {{
                    `(with (${bookingCurrencySymbol}${(
                      Number(guestBookingFeeTaxValue) || 0
                    ).toFixed(2)} ${bookingCurrencyType}))`
                  }}
                </v-col>
              </v-row>
            </v-card>
          </v-col>
          <v-col cols="12" class="mt-4">
            <v-card class="mx-auto border-sm pa-2" color="grey-lighten-4" tile>
              <v-row no-gutters align="center">
                <v-col class="text-caption">
                  Peak Total Booking Fee for Guest
                </v-col>
                <v-col class="text-right text-caption">
                  {{
                    `(${bookingCurrencySymbol}${(
                      Number(totalPeakGuestBookingFeeRefundPercentageValue) || 0
                    ).toFixed(2)} cancellation)`
                  }}
                </v-col>
              </v-row>
              <v-row no-gutters align="baseline">
                <v-col>
                  {{
                    `${bookingCurrencySymbol}${(
                      Number(totalPeakGuestBookingFeeValue) || 0
                    ).toFixed(2)}`
                  }}
                </v-col>
                <v-col class="text-right text-caption">
                  {{
                    `(with (${bookingCurrencySymbol}${(
                      Number(peakGuestBookingFeeTaxValue) || 0
                    ).toFixed(2)} ${bookingCurrencyType}))`
                  }}
                </v-col>
              </v-row>
            </v-card>
          </v-col>
        </v-row>
      </section>

      <!-- DEPOSIT -->
      <section class="border-b pb-7 mt-5">
        <p class="header-style">Deposit Fee</p>
        <div
          class="d-flex align-center rounded px-5 border-md"
          style="list-feature-toggle "
        >
          <p class="flex-grow-1">Deposit</p>
          <v-switch
            v-model="facility.isDepositEnabled"
            color="success"
            hide-details
            @update:modelValue="onChangeIsDepositFeeEnabled"
          ></v-switch>
        </div>

        <div class="mt-4">
          <v-number-input
            v-model="facility.depositAmount"
            :reverse="false"
            controlVariant="stacked"
            :label="`Deposit Amount`"
            :hideInput="false"
            :inset="false"
            clearable
            hide-details
            :disabled="!facility.isDepositEnabled"
            :precision="2"
            class="border-sm"
            :prefix="`${bookingCurrencySymbol}`"
          ></v-number-input>
        </div>
      </section>

      <!-- BOOKING POLICY -->
      <section class="pb-7 mt-5">
        <p class="header-style">Booking Policy</p>
        <div
          class="d-flex align-center rounded px-5 border-md"
          style="list-feature-toggle"
        >
          <p class="flex-grow-1">Booking Policy</p>
          <v-switch
            v-model="facility.isBookingPolicyEnabled"
            color="success"
            hide-details
          />
        </div>
        <tiptap-editor
          v-if="facility.isBookingPolicyEnabled"
          class="mt-4"
          :initialContent="facility.bookingPolicy"
          @content-updated="handlePolicy"
        />
      </section>
    </v-col>

    <v-divider :thickness="1" vertical></v-divider>

    <!-- SECURITY CHECKLIST -->
    <v-col cols="12" md="6" lg="6">
      <!-- INPUTS -->
      <section class="px-0 px-md-8">
        <p class="header-style mt-5 mt-md-0">Security Checklist</p>
        <v-row
          no-gutters
          class="mt-4 d-flex align-center justify-space-between"
        >
          <v-col cols="12" md="7" class="pa-1">
            <v-text-field
              v-model="sampleData.description"
              label="Checklist"
              density="comfortable"
              :persistent-hint="false"
              clearable
              hide-details
            ></v-text-field>
          </v-col>

          <v-col cols="12" md="3" class="pa-1">
            <v-number-input
              v-model="sampleData.count"
              :reverse="false"
              controlVariant="stacked"
              label="Count"
              :hideInput="false"
              :inset="false"
              placeholder="0"
              clearable
              type="number"
              hide-details
              variant="outlined"
              density="comfortable"
              :min="0"
            ></v-number-input>
          </v-col>
          <v-col cols="12" md="2" class="pa-1">
            <v-btn
              :disabled="!sampleData.description && !sampleData.count"
              type="submit"
              color="primary"
              @click="upsertChecklist()"
              block
              size="large"
            >
              {{ !isEditing ? "Add" : "Edit" }}
            </v-btn>
          </v-col>
        </v-row>
      </section>

      <section class="mt-4 border-t">
        <draggable :list="facility.securityCheckList" class="drag-area">
          <v-list-item
            v-for="(item, index) in facility.securityCheckList"
            :key="index"
            class="mt-1 border-b pa-4"
            min-height="64"
          >
            <template #prepend>
              <v-icon
                icon="mdi-drag"
                class="drag-handle cursor-move mr-2"
                color="grey-lighten-1"
              />
            </template>

            <v-list-item-title class="text-wrap text-body-2">
              {{ item.description }}
            </v-list-item-title>

            <template #append>
              <div class="d-flex align-center">
                <span class="text-subtitle-2 font-weight-bold mx-4">
                  {{ item.count }}
                </span>

                <v-btn
                  :icon="
                    item.permanentRemarks
                      ? 'mdi-message'
                      : 'mdi-message-outline'
                  "
                  :color="item.permanentRemarks ? 'primary' : 'grey-darken-1'"
                  variant="text"
                  density="comfortable"
                  @click="remarksDialog(true, item?.permanentRemarks, index)"
                />

                <v-btn
                  icon="mdi-delete-outline"
                  color="error"
                  variant="text"
                  density="comfortable"
                  @click="deleteChecklist(index)"
                />
              </div>
            </template>
          </v-list-item>
        </draggable>
      </section>

      <v-col cols="12" class="mt-10">
        <p class="header-style font-weight-bold mb-5 mt-md-0 ml-md-4">
          Other Settings
        </p>
        <v-row align="center" class="border pa-md-4" no-gutters>
          <v-col cols="9" class="d-flex align-center text-body-2">
            <v-row no-gutters>
              <v-col cols="12" class="header-style mt-5 mt-md-0">
                Monthly Booking limit per unit
              </v-col>
              <v-col cols="12" class="text-body-2 text-medium-emphasis">
                Sets the maximum number of bookings per unit
              </v-col>
            </v-row>
          </v-col>
          <v-col cols="3" class="d-flex align-center justify-end">
            <v-switch
              v-model="facility.isBookingUnitLimitEnabled"
              class="d-flex align-center"
              color="primary"
              hide-details
              @update:model-value="onToggleBookingUnitLimit"
            />
          </v-col>
          <v-col cols="12" class="mt-4">
            <v-number-input
              v-model="facility.bookingUnitLimit"
              :reverse="false"
              controlVariant="default"
              label="Monthly booking limit per unit"
              :hideInput="false"
              :inset="false"
              :min="1"
              :max="500"
              hide-details
              :disabled="!facility.isBookingUnitLimitEnabled"
            />
          </v-col>
        </v-row>

        <v-row align="center" class="border pa-md-4 mt-4" no-gutters>
          <v-col cols="9" class="d-flex align-center text-body-2">
            <v-row no-gutters>
              <v-col cols="12" class="header-style mt-5 mt-md-0">
                Maximum No. of Guest
              </v-col>
              <v-col cols="12" class="text-body-2 text-medium-emphasis">
                The maximum number of guests refers to the highest allowable
                capacity a venue can safely and comfortably accommodate for an
                event.
              </v-col>
            </v-row>
          </v-col>
          <v-col cols="3" class="d-flex align-center justify-end">
            <v-switch
              v-model="facility.isMaxNumberGuestLimitEnabled"
              class="d-flex align-center"
              color="primary"
              hide-details
              @update:model-value="onToggleMaxNumberGuestLimit"
            />
          </v-col>
          <v-col cols="12" class="mt-4">
            <v-number-input
              v-model="facility.maxNumberGuestLimit"
              :reverse="false"
              controlVariant="default"
              label="Maximum no. of guests"
              :hideInput="false"
              :inset="false"
              :min="1"
              :max="500"
              hide-details
              :disabled="!facility.isMaxNumberGuestLimitEnabled"
            />
          </v-col>
        </v-row>

        <v-row align="center" class="border pa-md-4 mt-4" no-gutters>
          <v-col cols="9" class="d-flex align-center text-body-2">
            <v-row no-gutters>
              <v-col cols="12" class="header-style mt-5 mt-md-0">
                Cancel allowed up to (Days prior)
              </v-col>
              <v-col cols="12" class="text-body-2 text-medium-emphasis">
                Number of days before a scheduled booking that a user is allowed
                to cancel.
              </v-col>
            </v-row>
          </v-col>
          <v-col cols="3" class="d-flex align-center justify-end">
            <v-switch
              v-model="facility.isCancelAllowedLimitEnabled"
              class="d-flex align-center"
              color="primary"
              hide-details
              @update:model-value="onToggleCancelAllowedLimit"
            />
          </v-col>
          <v-col cols="12" class="mt-4">
            <v-number-input
              v-model="facility.daysAllowedCancel"
              :reverse="false"
              controlVariant="default"
              label="Cancel allowed up to (Days prior)"
              :hideInput="false"
              :inset="false"
              :min="1"
              :max="500"
              hide-details
              :disabled="!facility.isCancelAllowedLimitEnabled"
            />
          </v-col>
        </v-row>
      </v-col>
    </v-col>

    <!-- remarks -->
    <v-dialog
      v-model="checkListItemPermanentRemarksDialog"
      width="300"
      persistent
    >
      <v-card class="rounded-lg">
        <v-toolbar class="border-b">
          <span class="pl-6 font-weight-bold">Permanent Remarks</span>
          <v-spacer />
          <v-icon
            icon="mdi-close"
            size="30"
            class="pr-6"
            @click="remarksDialog(false)"
          />
        </v-toolbar>

        <v-row no-gutters class="pa-4">
          <!-- remarks -->
          <v-col cols="12">
            <v-textarea
              v-model="checkListItemPermanentRemarks"
              label="Remarks"
              rows="4"
              no-resize
              hide-details
              clearable
            />
          </v-col>

          <!-- clear/confirm buttons-->
          <v-col cols="12" class="mt-4">
            <v-row no-gutters>
              <v-btn
                block
                text="confirm"
                color="primary"
                flat
                @click="confirmRemarks()"
              />
            </v-row>
          </v-col>
        </v-row>
      </v-card>
    </v-dialog>

    <!-- delete -->
    <v-dialog v-model="isDeleteItem" width="500" persistent class="text-center">
      <v-card class="rounded-xl">
        <!-- HEADER -->
        <v-toolbar class="border-b pb-2 pr-4">
          <v-spacer />
          <v-icon
            icon="mdi-close"
            size="x-large"
            @click="isDeleteItem = false"
          />
        </v-toolbar>

        <v-card-text class="d-flex flex-column align-center">
          <img
            src="/icons/delete-dialog-icon.svg"
            alt="delete-dialog-icon"
            width="230"
            height="130"
            class="mb-10"
          />
          Are you sure you want to delete this?
        </v-card-text>
        <v-col>
          <v-btn
            text="yes"
            type="submit"
            color="primary"
            @click="confirmDelete()"
            width="50%"
            elevation="0"
          />
        </v-col>
      </v-card>
    </v-dialog>
  </v-row>
  <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
</template>

<script setup lang="ts">
const {
  facility,
  bookingFeeTaxPercentage,
  bookingCurrencySymbol,
  bookingCurrencyType,
} = useFacility();

const isEditing = ref(false);
const isDeleteItem = ref(false);
const selectedIndex = ref<any>();

const sampleData = reactive({
  description: "",
  count: 0,
  permanentRemarks: "",
});

const bookingFeeTaxValue = computed(() => {
  if (facility?.value?.bookingAmount != null) {
    let value = Number(
      calculatePercentageValue(
        facility?.value?.bookingAmount,
        bookingFeeTaxPercentage?.value
      )
    );
    if (isNaN(value)) {
      value = 0;
    }
    return value;
  } else {
    return null;
  }
});
const totalBookingFeeValue = computed(() => {
  if (facility?.value?.bookingAmount != null) {
    let bookingAmount = Number(facility?.value?.bookingAmount ?? 0);
    if (isNaN(bookingAmount)) {
      bookingAmount = 0;
    }
    let bookingFeeTax = Number(bookingFeeTaxValue?.value ?? 0);
    if (isNaN(bookingFeeTax)) {
      bookingFeeTax = 0;
    }
    const value = bookingAmount + bookingFeeTax;
    return value;
  } else {
    return null;
  }
});
// booking fee refund percentage value
const totalBookingFeeRefundPercentageValue = computed(() => {
  if (facility.value.bookingFeeRefundPercentage) {
    if (totalBookingFeeValue.value && totalBookingFeeValue.value > 0) {
      return (Math.round(
        totalBookingFeeValue.value *
          (facility.value.bookingFeeRefundPercentage / 100) *
          100
      ) / 100) as any;
    }
    return 0;
  }
  return 0;
});

// PEAK
const peakBookingFeeTaxValue = computed(() => {
  if (facility?.value?.peakBookingFeeAmount != null) {
    let value = Number(
      calculatePercentageValue(
        facility?.value?.peakBookingFeeAmount,
        bookingFeeTaxPercentage?.value
      )
    );
    if (isNaN(value)) {
      value = 0;
    }
    return value;
  } else {
    return null;
  }
});
const totalPeakBookingFeeValue = computed(() => {
  if (facility?.value?.peakBookingFeeAmount != null) {
    let peakBookingFeeAmount = Number(
      facility?.value?.peakBookingFeeAmount ?? 0
    );
    if (isNaN(peakBookingFeeAmount)) {
      peakBookingFeeAmount = 0;
    }
    let peakBookingFeeTax = Number(peakBookingFeeTaxValue?.value ?? 0);
    if (isNaN(peakBookingFeeTax)) {
      peakBookingFeeTax = 0;
    }
    const value = peakBookingFeeAmount + peakBookingFeeTax;
    return value;
  } else {
    return null;
  }
});
// total peak booking fee refund percentage value
const totalPeakBookingFeeRefundPercentageValue = computed(() => {
  if (facility.value.bookingFeeRefundPercentage) {
    if (totalPeakBookingFeeValue.value && totalPeakBookingFeeValue.value > 0) {
      return (Math.round(
        totalPeakBookingFeeValue.value *
          (facility.value.bookingFeeRefundPercentage / 100) *
          100
      ) / 100) as any;
    }
    return 0;
  }
  return 0;
});

// GUEST
const guestBookingFeeTaxValue = computed(() => {
  if (facility?.value?.bookingFeeGuestAmount != null) {
    let value = Number(
      calculatePercentageValue(
        facility?.value?.bookingFeeGuestAmount,
        bookingFeeTaxPercentage?.value
      )
    );
    if (isNaN(value)) {
      value = 0;
    }
    return value;
  } else {
    return null;
  }
});
const totalGuestBookingFeeValue = computed(() => {
  if (facility?.value?.bookingFeeGuestAmount != null) {
    let bookingFeeGuestAmount = Number(
      facility?.value?.bookingFeeGuestAmount ?? 0
    );
    if (isNaN(bookingFeeGuestAmount)) {
      bookingFeeGuestAmount = 0;
    }
    let guestBookingFeeTax = Number(guestBookingFeeTaxValue?.value ?? 0);
    if (isNaN(guestBookingFeeTax)) {
      guestBookingFeeTax = 0;
    }
    const value = bookingFeeGuestAmount + guestBookingFeeTax;
    return value;
  } else {
    return null;
  }
});
// total guest booking fee refund percentage value
const totalGuestBookingFeeRefundPercentageValue = computed(() => {
  if (facility.value.bookingFeeRefundPercentage) {
    if (
      totalGuestBookingFeeValue.value &&
      totalGuestBookingFeeValue.value > 0
    ) {
      return (Math.round(
        totalGuestBookingFeeValue.value *
          (facility.value.bookingFeeRefundPercentage / 100) *
          100
      ) / 100) as any;
    }
    return 0;
  }
  return 0;
});

const peakGuestBookingFeeTaxValue = computed(() => {
  if (facility?.value?.bookingFeeGuestAmount != null) {
    let value = Number(
      calculatePercentageValue(
        facility?.value?.peakBookingFeeGuestAmount,
        bookingFeeTaxPercentage?.value
      )
    );
    if (isNaN(value)) {
      value = 0;
    }
    return value;
  } else {
    return null;
  }
});
const totalPeakGuestBookingFeeValue = computed(() => {
  if (facility?.value?.peakBookingFeeGuestAmount != null) {
    let peakBookingFeeGuestAmount = Number(
      facility?.value?.peakBookingFeeGuestAmount ?? 0
    );
    if (isNaN(peakBookingFeeGuestAmount)) {
      peakBookingFeeGuestAmount = 0;
    }
    let peakGuestBookingFeeTax = Number(
      peakGuestBookingFeeTaxValue?.value ?? 0
    );
    if (isNaN(peakGuestBookingFeeTax)) {
      peakGuestBookingFeeTax = 0;
    }
    const value = peakBookingFeeGuestAmount + peakGuestBookingFeeTax;
    return value;
  } else {
    return null;
  }
});
const totalPeakGuestBookingFeeRefundPercentageValue = computed(() => {
  if (facility.value.bookingFeeRefundPercentage) {
    if (
      totalPeakGuestBookingFeeValue.value &&
      totalPeakGuestBookingFeeValue.value > 0
    ) {
      return (Math.round(
        totalPeakGuestBookingFeeValue.value *
          (facility.value.bookingFeeRefundPercentage / 100) *
          100
      ) / 100) as any;
    }
    return 0;
  }
  return 0;
});

const bookingFeeRefundPercentageValue = ref<number | null>(0);

function onChangeIsBookingFeeEnabled(val: any) {
  if (val === true) {
    facility.value.bookingAmount = 0;
    bookingFeeRefundPercentageValue.value = 0;
    facility.value.bookingFeeRefundPercentage = 0;
  } else {
    facility.value.bookingAmount = null;
    bookingFeeRefundPercentageValue.value = 0;
    facility.value.bookingFeeRefundPercentage = 0;

    facility.value.isGuestEnabled = false;
  }
}

function onChangeIsDepositFeeEnabled(val: any) {
  if (val === true) {
    facility.value.depositAmount = 0;
  } else {
    facility.value.depositAmount = null;
  }
}

watchEffect(() => {
  if (facility.value.bookingFeeRefundPercentage) {
    if (facility.value.bookingAmount) {
      bookingFeeRefundPercentageValue.value = (Math.round(
        facility.value.bookingAmount *
          (facility.value.bookingFeeRefundPercentage / 100) *
          100
      ) / 100) as any;
    }
  }
});

const upsertChecklist = () => {
  if (!isEditing.value) {
    const newItem = {
      ...sampleData,
    };

    if (!facility.value.securityCheckList) {
      facility.value.securityCheckList = [newItem];
    } else if (Array.isArray(facility.value.securityCheckList)) {
      facility.value.securityCheckList.push(newItem);
    } else {
      console.log("Error in adding security checklist");
    }
  } else {
    isEditing.value = false;
  }

  sampleData.description = "";
  sampleData.count = 0;
};

const checkListItemPermanentRemarksDialog = ref<boolean>(false);
const checkListItemPermanentRemarks = ref<string>("");

function remarksDialog(isOpen?: boolean, remarks?: string, index?: number) {
  if (isOpen) {
    if (remarks) {
      checkListItemPermanentRemarks.value = remarks;
    }
    checkListItemPermanentRemarksDialog.value = true;
    selectedIndex.value = index;
  } else {
    checkListItemPermanentRemarks.value = "";
    checkListItemPermanentRemarksDialog.value = false;
    selectedIndex.value = "";
  }
}

const confirmRemarks = () => {
  if (
    facility.value.securityCheckList &&
    selectedIndex.value !== null &&
    selectedIndex.value !== "" &&
    facility.value.securityCheckList[selectedIndex.value]
  ) {
    facility.value.securityCheckList[selectedIndex.value].permanentRemarks =
      checkListItemPermanentRemarks.value;
  }
  checkListItemPermanentRemarks.value = "";
  checkListItemPermanentRemarksDialog.value = false;
};

const deleteChecklist = (index: string) => {
  console.log("delete checklist", index);
  selectedIndex.value = index;
  isDeleteItem.value = true;
};

const confirmDelete = () => {
  if (!facility.value.securityCheckList || selectedIndex.value === null) return;

  facility.value.securityCheckList.splice(Number(selectedIndex.value), 1);
  isDeleteItem.value = false;
};

const handlePolicy = (newContent: string) => {
  facility.value.bookingPolicy = newContent;
};

function onToggleBookingUnitLimit(val: any) {
  if (val) {
    facility.value.isBookingUnitLimitEnabled = true;
    facility.value.bookingUnitLimit = 1;
  } else {
    facility.value.isBookingUnitLimitEnabled = false;
    facility.value.bookingUnitLimit = null;
  }
}

function onToggleMaxNumberGuestLimit(val: any) {
  if (val) {
    facility.value.isMaxNumberGuestLimitEnabled = true;
    facility.value.maxNumberGuestLimit = 1;
  } else {
    facility.value.isMaxNumberGuestLimitEnabled = false;
    facility.value.maxNumberGuestLimit = null;
  }
}

function onToggleCancelAllowedLimit(val: any) {
  if (val) {
    facility.value.isCancelAllowedLimitEnabled = true;
    facility.value.daysAllowedCancel = 1;
  } else {
    facility.value.isCancelAllowedLimitEnabled = false;
    facility.value.daysAllowedCancel = null;
  }
}
</script>

<style scoped>
.header-style {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 15px;
}
.header-style-no-margin {
  font-size: 16px;
  font-weight: 600;
}

.list-feature-toggle {
  border: 1px solid #bbbaba;
  height: 50px;
}

.drag-area {
  cursor: grab;
}
</style>
