<script setup>
import { date, string } from 'alga-js'
import { DatePicker } from 'tedir-calendar'
import { SelectBox } from 'tedir-select'
import { toast } from 'bulma-toast'

const route = useRoute()
const organizationId = useCookie('logship_organization_id')

const props = defineProps({
  action: String,
  info: Object
})

const entries = ref([])
const form = ref({
  id: '',
  client: props.info?.client || '',
  clientId: props.info?.clientId || '',
  organization: props.info?.organization || '',
  organizationId: props.info?.organizationId || organizationId.value || '',
  promotion: props.info?.name || '',
  promotionId: props.info?.id || '',
  isActive: true,
  seqNo: 20,
  amount: 0,
  qty: 0,
  isForAllDistribution: false,
  isSameDistribution: false,
  promotionDistribution: '',
  promotionDistributionId: '',
  targetDistribution: '',
  targetDistributionId: '',
  rewardType: '',
  rewardTypeId: '',
  distributionSorting: '',
  distributionSortingId: '',
  charge: '',
  chargeId: '',
  alert: {
    status: '',
    message: '',
    processing: false,
  }
})

watch(() => props.info, () => {
  form.value.client = props.info?.client || ''
  form.value.clientId = props.info?.clientId || ''
  form.value.organization = props.info?.organization || ''
  form.value.organizationId = props.info?.organizationId || organizationId.value || ''
  form.value.promotion = props.info?.name || ''
  form.value.promotionId = props.info?.id || ''
})

const showDetailRecordModal = ref(false)
const showAddressModal = ref(false)
const closeDetailRecordModal = () => {
  showDetailRecordModal.value = false

  form.value = {
    id: '',
    client: props.info?.client || '',
    clientId: props.info?.clientId || '',
    organization: props.info?.organization || '',
    organizationId: props.info?.organizationId || organizationId.value || '',
    promotion: props.info?.name || '',
    promotionId: props.info?.id || '',
    isActive: true,
    seqNo: 20,
    amount: 0,
    qty: 0,
    isForAllDistribution: false,
    isSameDistribution: false,
    promotionDistribution: '',
    promotionDistributionId: '',
    targetDistribution: '',
    targetDistributionId: '',
    rewardType: '',
    rewardTypeId: '',
    distributionSorting: '',
    distributionSortingId: '',
    charge: '',
    chargeId: '',
    alert: {
      status: '',
      message: '',
      processing: false,
    }
  }
}

const loading = ref({})
const filtering = ref({})
const getOptions = ref({})
const setOptions = async (url, key) => {
  loading.value[key] = true
  const res = await $fetch('/api/'+url, {
    headers: useRequestHeaders(['cookie'])
  })
  if(res) {
    getOptions.value[key] = res
  }
  loading.value[key] = false
}

const filterOptions = async (model, key, filter = '') => {
  if(filter) {
    await setOptions('filters/'+model+'/'+filter, key)
    filtering.value[key] = filter
  } else {
    if(!filtering.value?.[key] || filtering.value?.[key] === '') {
      await setOptions('models/'+model, key)
    }
  }
}

const retrieve = async () => {
  if(route.params?.id) {
    const res = await $fetch('/api/materials/promotions/'+route.params.id+'/reward', {
      headers: useRequestHeaders(['cookie'])
    })
    if(res) {
      entries.value = res.records.map(item => {
        return {
          id: item?.id || item?.uid || '',
          client: item?.AD_Client_ID?.identifier || '',
          clientId: item?.AD_Client_ID?.id || '',
          organization: item?.AD_Org_ID?.identifier || '',
          organizationId: item?.AD_Org_ID?.id || '',
          promotion: item?.M_Promotion_ID?.identifier || '',
          promotionId: item?.M_Promotion_ID?.id || '',
          isActive: item?.IsActive ?? true,
          seqNo: item?.SeqNo || 20,
          amount: item?.Amount || 0,
          qty: item?.Qty || 0,
          isForAllDistribution: item?.IsForAllDistribution ?? false,
          isSameDistribution: item?.IsSameDistribution ?? false,
          promotionDistribution: item?.M_PromotionDistribution_ID?.identifier || '',
          promotionDistributionId: item?.M_PromotionDistribution_ID?.id || '',
          targetDistribution: item?.M_TargetDistribution_ID?.identifier || '',
          targetDistributionId: item?.M_TargetDistribution_ID?.id || '',
          rewardType: item?.RewardType?.identifier || '',
          rewardTypeId: item?.RewardType?.id || '',
          distributionSorting: item?.DistributionSorting?.identifier || '',
          distributionSortingId: item?.DistributionSorting?.id || '',
          charge: item?.C_Charge_ID?.identifier || '',
          chargeId: item?.C_Charge_ID?.id || '',
          alert: {
            status: '',
            message: '',
            processing: false,
          }
        }
      })
    }
  }
}
onMounted(retrieve)

const destroy = async (entry, index) => {
  //entries.value.splice(index, 1)

  if(entry.id) {
    const res = await $fetch('/api/materials/promotions/'+entry.id+'/reward', {
      method: 'DELETE',
      headers: useRequestHeaders(['cookie'])
    })
    if(res) {
      retrieve()
    }
  }
}

const save = async () => {
  if(form.value.id !== '') {
    const res = await $fetch('/api/materials/promotions/'+route.params.id+'/reward', {
      method: 'PUT',
      headers: useRequestHeaders(['cookie']),
      body: {
        id: form.value.id,
        isActive: form.value.isActive,
        seqNo: form.value.seqNo,
        amount: form.value.amount,
        qty: form.value.qty,
        isForAllDistribution: form.value.isForAllDistribution,
        isSameDistribution: form.value.isSameDistribution,
        promotionDistributionId: form.value.promotionDistributionId,
        targetDistributionId: form.value.targetDistributionId,
        rewardTypeId: form.value.rewardTypeId,
        distributionSortingId: form.value.distributionSortingId,
        chargeId: form.value.chargeId,
      }
    })
    if(Number(res.status) === 200) {
      closeDetailRecordModal()
      retrieve()
      toast({
        message: 'Record saved!',
        type: 'is-success',
        duration: 7500,
        position: 'bottom-right'
      })
    } else {
      //form.value.alert.status = res.status
      //form.value.alert.message = res.message
      form.value.alert.processing = false
      toast({
        message: res.message || 'Save error',
        type: 'is-danger',
        duration: 7500,
        position: 'bottom-right'
      })
    }
  } else {
    const res = await $fetch('/api/materials/promotions/'+route.params.id+'/reward', {
      method: 'POST',
      headers: useRequestHeaders(['cookie']),
      body: {
        organizationId: form.value.organizationId || organizationId.value,
        isActive: form.value.isActive,
        seqNo: form.value.seqNo,
        amount: form.value.amount,
        qty: form.value.qty,
        isForAllDistribution: form.value.isForAllDistribution,
        isSameDistribution: form.value.isSameDistribution,
        promotionDistributionId: form.value.promotionDistributionId,
        targetDistributionId: form.value.targetDistributionId,
        rewardTypeId: form.value.rewardTypeId,
        distributionSortingId: form.value.distributionSortingId,
        chargeId: form.value.chargeId,
        promotionId: form.value.promotionId,
      }
    })
    if(Number(res.status) === 200) {
      closeDetailRecordModal()
      retrieve()
      toast({
        message: 'Record created!',
        type: 'is-success',
        duration: 7500,
        position: 'bottom-right'
      })
    } else {
      //form.value.alert.status = res.status
      //form.value.alert.message = res.message
      form.value.alert.processing = false
      toast({
        message: res.message || 'Save error',
        type: 'is-danger',
        duration: 7500,
        position: 'bottom-right'
      })
    }
  }
}
</script>

<template>
  <div class="detailRecordResponsive">
    <div class="tableResponsive">
      <table class="table tableList tableFlush">
        <thead>
          <tr> 
            <th>Sequence</th>
            <th>Amount</th>
            <th>Quantity</th>
            <th>Reward Type</th>
            <th>Charge</th>
            <th class="w-100px">Active</th>
            <th v-if="action !== 'view'" class="w-100px">Action</th>
          </tr>
        </thead>
        <tbody>
          <tr v-if="Number(entries.length) === 0">
            <td :colspan="action !== 'view' ? 8 : 7" class="align-center">No detail record yet, please add a new one.</td>
          </tr>
          <tr v-for="(entry, index) in entries" :key="index">
            <td>{{ entry.seqNo }}</td>
            <td>{{ entry.amount }}</td>
            <td>{{ entry.qty }}</td>
            <td>{{ entry.rewardType }}</td>
            <td>{{ entry.charge }}</td>
            <td class="textAlignCenter">
              <div class="check">
                <input type="checkbox" v-model="entry.isActive" class="checkInput" :id="'isActive_'+index" :checked="entry.isActive" disabled>
                <!--<label class="checkLabel" :for="'isActive_'+index">Active</label>-->
              </div>
            </td>
            <td v-if="action !== 'view'">
              <div class="d-flex justify-flexEnd gap-5px">
                <span @click="form = entry; showDetailRecordModal = true;" class="cursor-pointer fg-warning">
                  <i class="menu-icon tf-icons ti ti-pencil"></i>
                </span>
                <span @click="destroy(entry, index)" class="cursor-pointer fg-danger">
                  <i class="menu-icon tf-icons ti ti-trash"></i>
                </span>
              </div>
            </td>
          </tr>
          <tr v-if="action !== 'view'">
            <td colspan="5">
              <button type="button" @click="showDetailRecordModal = true;" class="button">Add Record</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <Teleport to="body">
    <div class="modal" :class="{'active': showDetailRecordModal}" :style="{display: showDetailRecordModal ? 'block' : 'none'}">
      <div class="modalDialog modalCenter modalPrintPreview" @click.self="closeDetailRecordModal">
        <div class="modalContent">
          <div class="modalHeader">
            <h3 class="modalTitle">Reward</h3>
            <div class="cursor-pointer" @click="closeDetailRecordModal">
              <span class="tf-icon ti ti-x ti-sm me-1"></span>
            </div>
          </div>
          <div class="modalBody">
            <div class="my-5 mx-5">
              <AlertAction v-model='form.alert.status' :alert="form.alert" />
              <div class="columns">
                <div class="column is-two-thirds">
                  <div class="columns">
                    <div class="column is-half">
                      <label class="label d-block">Reward Type *</label>
                      <select v-model="form.rewardTypeId" class="select">
                        <option value="A">Absolute Amount</option>
                        <option value="F">Flat Discount</option>
                        <option value="P">Percentage</option>
                      </select>
                    </div>
                    <div class="column is-half">
                      <label class="label d-block">Charge *</label>
                      <ClientOnly>
                        <SelectBox v-model="form.chargeId" :options="getOptions?.['charges']?.records || [{id: form.chargeId, Name: form.charge}]" prop="Name" dataprop="id" datatype="string" :size="5" @click="filterOptions('c_charge', 'charges')" @search="(val) => filterOptions('c_charge', 'charges', string.urlEncode(`isActive eq true AND contains(Name,'${val}')`))" :loading="loading?.['charges'] ?? true" />
                      </ClientOnly>
                    </div>
                  </div>

                  <template v-if="form.isForAllDistribution === false">
                    <label class="label d-block mt-2">Promotion Distribution *</label>
                    <ClientOnly>
                      <SelectBox v-model="form.promotionDistributionId" :options="getOptions?.['promotion_distributions']?.records?.map(i => {i.Name = i.M_Promotion_ID.identifier+'_'+i.Qty+'_'+i.SeqNo; return i;}) || [{id: form.promotionDistributionId, Name: form.promotionDistribution}]" prop="Name" dataprop="id" datatype="string" :size="5" @click="filterOptions('m_promotiondistribution', 'promotion_distributions')" @search="(val) => filterOptions('m_promotiondistribution', 'promotion_distributions', string.urlEncode(`isActive eq true AND contains(Name,'${val}')`))" :loading="loading?.['promotion_distributions'] ?? true" />
                    </ClientOnly>
                  </template>

                  <template v-if="form.isForAllDistribution === false && form.isSameDistribution === false">
                    <label class="label d-block mt-2">Target distribution *</label>
                    <ClientOnly>
                      <SelectBox v-model="form.targetDistributionId" :options="getOptions?.['target_distributions']?.records?.map(i => {i.Name = i.M_Promotion_ID.identifier+'_'+i.Qty+'_'+i.SeqNo; return i;}) || [{id: form.targetDistributionId, Name: form.targetDistribution}]" prop="Name" dataprop="id" datatype="string" :size="5" @click="filterOptions('m_promotiondistribution', 'target_distributions')" @search="(val) => filterOptions('m_promotiondistribution', 'target_distributions', string.urlEncode(`isActive eq true AND contains(Name,'${val}')`))" :loading="loading?.['target_distributions'] ?? true" />
                    </ClientOnly>
                  </template>

                  <div class="columns">
                    <div class="column is-half">
                      <label class="label d-block mt-2">Sequence *</label>
                      <input type="text" v-model="form.seqNo" class="input" />
                      
                      <label class="label d-block mt-2">Amount</label>
                      <input type="text" v-model="form.amount" class="input" />
                    </div>
                    <div class="column is-half">
                      <label class="label d-block mt-2">Quantity</label>
                      <input type="text" v-model="form.qty" class="input" />

                      <label class="label d-block mt-2">Distribution Sorting</label>
                      <input v-if="form.qty === 0 || form.qty === ''" type="text" :value="form.distributionSorting" class="input" readonly />
                      <select v-else v-model="form.distributionSortingId" class="select">
                        <option value="A">Ascending</option>
                        <option value="D">Descending</option>
                      </select>
                    </div>
                  </div>
                </div>
                <div class="column is-one-third">
                  <label class="label d-block">Promotion *</label>
                  <input type="text" :value="form.promotion" class="input" readonly />
                  
                  <label class="label d-block mt-2">Organization *</label>
                  <input type="text" :value="form.organization" class="input" readonly />
                  
                  <label class="label d-block mt-2">Tenant *</label>
                  <input type="text" :value="form.client" class="input" readonly />
                  
                  <label class="label d-block">Status</label>
                  <div class="d-flex flexDirection-column">
                    <div class="check">
                      <input type="checkbox" v-model="form.isActive" class="checkInput" id="isActive" :checked="form.isActive">
                      <label class="checkLabel" for="isActive">Active</label>
                    </div>
                    <div class="check">
                      <input type="checkbox" v-model="form.isForAllDistribution" class="checkInput" id="isForAllDistribution" :checked="form.isForAllDistribution">
                      <label class="checkLabel" for="isForAllDistribution">For All Distribution</label>
                    </div>
                    <div class="check">
                      <input type="checkbox" v-model="form.isSameDistribution" class="checkInput" id="isSameDistribution" :checked="form.isSameDistribution">
                      <label class="checkLabel" for="isSameDistribution">Same as Target Distribution</label>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="modalFooter">
            <div></div>
            <div class="d-flex gap-10px">
              <button type="button" class="button" @click="closeDetailRecordModal">Close</button>
              <button type="button" class="button" @click="save" :class="(form.seqNo === '' || form.promotionId === '' || form.rewardTypeId === '' || form.chargeId === '' || (form.isForAllDistribution === false && form.promotionDistributionId === '') || (form.isForAllDistribution === false && form.isSameDistribution === false && form.targetDistributionId === '') || (form.qty >= 1 && form.distributionSortingId === '') || form.alert.processing) ? 'pointerEvents-none opacity-0.6' : ''">Submit</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </Teleport>
</template>