<template>
  <PageLayout title="Pop-up Trigger Rule" description="Set the Pop-up Trigger Rule for registration, which allows you to customize exactly when the forced registration pop-up will appear on your IDX website to capture lead information.">
    <template #button>
      <button class="btn-save" @click.prevent="onSave">{{saving ? 'Saving..' : 'Save'}}</button>
    </template>
    <div class="form-groups">
      <div class="form-group">
        <label>TRIGGER REGISTRATION ON</label>
        <div>
            <span style="font-size: 13px">
              <input v-model="triggerRule.place" type="radio" name="place" value="detail">Listing Detail Pages
            </span>
            <span style="margin-left: 30px;font-size: 13px">
              <input v-model="triggerRule.place" type="radio" name="place" value="page">Selected Pages
            </span>
            <span style="margin-left: 30px;font-size: 13px">
                <input v-model="triggerRule.place" type="radio" name="place" value="none">Never Trigger Registration Pop-up
            </span>
        </div>
      </div>
      <div v-show="triggerRule.place === 'page'" class="form-group">
        <label>SELECT PAGES</label>
        <CheckboxGroup v-model="triggerRule.selectPages" :groups="pages"></CheckboxGroup>
      </div>
      <template v-if="triggerRule.place !== 'none'">
        <div class="form-group">
          <label>HOW TO TRIGGER</label>
          <div>
          <span style="font-size: 13px">
              <input v-model="triggerRule.type" type="radio" name="triggerType" value="count">Trigger Registration Pop-up based on {{ triggerRule.place === 'page'? 'Page':'Listing' }} Views
          </span>
            <span style="margin-left: 30px;font-size: 13px">
              <input v-model="triggerRule.type" type="radio" name="triggerType" value="time">Trigger Registration Pop-up based on Browsing Time
          </span>
            <span>
            <Tooltip>
              <template #trigger>
                <span class="lofty_iconfont lofty-icon-help"></span>
              </template>
              <template #content>
                <span class="help-tip">
                  Refers to the time spent on each page
                </span>
              </template>
          </Tooltip>
          </span>
          </div>
        </div>
        <div v-show="triggerRule.type==='count'" class="form-group">
          <label>POP UP AFTER (NUMBER OF {{ triggerRule.place === 'page'? 'PAGE':'LISTING' }} VIEWS)</label>
          <InputNumber v-model="triggerRule.count" :min="1"/>
        </div>
        <div v-show="triggerRule.type==='time'" class="form-group">
          <label>POP UP AFTER BROWSING FOR (SECONDS)</label>
          <InputNumber v-model="triggerRule.time" :min="1"/>
        </div>
        <div class="form-group">
          <label>ALLOW FOR POP-UP TO BE CLOSED PRIOR TO REGISTRATION
            <Tooltip>
              <template #trigger>
                <span class="lofty_iconfont lofty-icon-help"></span>
              </template>
              <template #content>
                <span class="help-tip">
                  Is this allowed to close when pop-up is triggered according to the rule?
                </span>
              </template>
            </Tooltip>
          </label>
          <div>
          <span style="font-size: 13px">
              <input v-model="triggerRule.allowClose" type="radio" name="allowClose" :value="true">YES
          </span>
            <span style="margin-left: 30px;font-size: 13px">
              <input v-model="triggerRule.allowClose" type="radio" name="allowClose" :value="false">NO
          </span>
          </div>
        </div>
      </template>
      <Loading :loading="loading"/>
    </div>
  </PageLayout>
</template>

<script setup>
import PageLayout from "@/admin/common/PageLayout.vue";
import CheckboxGroup from "@/components/checkbox/group.vue";
import InputNumber from "@/admin/common/components/inputNumber.vue";
import http from "@/api/index.js";
import { showToast } from "@/admin/ui/constant.js";
import getDefaultRule from './defaultRule.js';
import Loading from "@/admin/ui/loading.vue";
import Tooltip from "@/admin/ui/tooltip.vue";
const triggerRule = reactive(getDefaultRule())
const saving = ref(false);
const pages = [
  {label: 'Search', value: 'search'},
  {label: 'Featured Listings', value: 'featured_listing'},
  {label: 'Listing Detail', value: 'listing_detail'},
  {label: 'Sold Listings', value: 'sold_listing'},
  {label: 'Sold Listings Detail', value: 'sold_listing_detail'},
]
getTriggerRule()
async function onSave() {
  saving.value = true
  const data = {
    triggerRule
  }
  const res = await http.post('/save-data/data/update', {data});
  saving.value = false
  if(res.data) {
    showToast("Saved Successfully");
  } else {
    showToast("Save failed. Please try again.", { duration: 3000, err: true });
  }
}
const loading = ref(true);
async function getTriggerRule() {
  const res = await http.get('/save-data/common-info');
  loading.value = false
  if(res.data.commonData) {
    const data = res.data.commonData.triggerRule || {};
    for(let key in data) {
      triggerRule[key] = data[key];
    }
  }
}
</script>
<style scoped lang="scss">
.lofty-icon-help {
  font-size: 15px;
  color: rgb(204, 204, 204);
  margin-left: 6px;
  position: relative;
  top: 2px;
}
</style>