<script setup>
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 || '',
  rma: props.info?.documentNo || '',
  rmaId: props.info?.id || '',
  isActive: true,
  tax: '',
  taxId: '',
  taxBaseAmt: 0,
  taxAmt: 0,
  processed: false,
  isTaxIncluded: false,
  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.rma = props.info?.documentNo || ''
  form.value.rmaId = props.info?.id || ''
})*/

/*const showDetailRecordModal = 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 || '',
    rma: props.info?.documentNo || '',
    rmaId: props.info?.id || '',
    isActive: true,
    tax: '',
    taxId: '',
    taxBaseAmt: 0,
    taxAmt: 0,
    processed: false,
    isTaxIncluded: false,
    alert: {
      status: '',
      message: '',
      processing: false,
    }
  }
}*/

/*const loading = 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 retrieve = async () => {
  if(route.params?.id) {
    const res = await $fetch('/api/rma/'+route.params.id+'/rma-tax', {
      headers: useRequestHeaders(['cookie'])
    })
    if(res) {
      entries.value = res.records.map(item => {
        return {
          id: item?.id || '',
          client: item?.AD_Client_ID?.identifier || '',
          clientId: item?.AD_Client_ID?.id || '',
          organization: item?.AD_Org_ID?.identifier || '',
          organizationId: item?.AD_Org_ID?.id || '',
          rma: item?.M_RMA_ID?.identifier || '',
          rmaId: item?.M_RMA_ID?.id || '',
          isActive: item?.IsActive ?? true,
          tax: item?.C_Tax_ID?.identifier || '',
          taxId: item?.C_Tax_ID?.id || '',
          taxBaseAmt: item?.TaxBaseAmt || 0,
          taxAmt: item?.TaxAmt || 0,
          processed: item?.Processed ?? false,
          isTaxIncluded: item?.IsTaxIncluded ?? false,
          alert: {
            status: '',
            message: '',
            processing: false,
          }
        }
      })
    }
  }
}
onMounted(retrieve)
</script>

<template>
  <div class="detailRecordResponsive">
    <div class="tableResponsive">
      <table class="table tableList tableFlush">
        <thead>
          <tr> 
            <th>Tax</th>
            <th>Tax Amount</th>
            <th>Tax base Amount</th>
            <th>Price includes Tax</th>
            <th>Processed</th>
            <th class="w-100px">Active</th>
          </tr>
        </thead>
        <tbody>
          <tr v-if="Number(entries.length) === 0">
            <td colspan="6" class="align-center">No detail record yet.</td>
          </tr>
          <tr v-for="(entry, index) in entries" :key="index">
            <td>{{ entry.tax }}</td>
            <td>{{ entry.taxAmt }}</td>
            <td>{{ entry.taxBaseAmt }}</td>
            <td>
              <div class="check">
                <input type="checkbox" v-model="entry.isTaxIncluded" class="checkInput" :id="'isTaxIncluded_'+index" :checked="entry.isTaxIncluded" disabled>
                <label class="checkLabel" :for="'isTaxIncluded_'+index">Tax Included</label>
              </div>
            </td>
            <td>
              <div class="check">
                <input type="checkbox" v-model="entry.processed" class="checkInput" :id="'processed_'+index" :checked="entry.processed" disabled>
                <label class="checkLabel" :for="'processed_'+index">Processed</label>
              </div>
            </td>
            <td>
              <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>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>