<script setup>
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 retrieve = async () => {
  if(route.params?.id) {
    const res = await $fetch('/api/partners/partner-groups/'+route.params.id+'/assigned-partners', {
      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 || '',
          partner: item?.C_BPartner_ID?.identifier || '',
          partnerId: item?.C_BPartner_ID?.id || '',
          isActive: item?.IsActive ?? true,
          name: item?.Name || '',
          name2: item?.Name2 || '',
          value: item?.Value || '',
          salesVolume: item?.SalesVolume || 0,
          numberEmployees: item?.NumberEmployees || 0,
          isSummary: item?.IsSummary ?? false,
          isVendor: item?.IsVendor ?? false,
          isCustomer: item?.IsCustomer ?? false,
          isProspect: item?.IsProspect ?? false,
          soCreditLimit: item?.SO_CreditLimit || 0,
          soCreditUsed: item?.SO_CreditUsed || 0,
          acqusitionCost: item?.AcqusitionCost || 0,
          potentialLifeTimeValue: item?.PotentialLifeTimeValue || 0,
          actualLifeTimeValue: item?.ActualLifeTimeValue || 0,
          shareOfCustomer: item?.ShareOfCustomer || 0,
          isEmployee: item?.IsEmployee ?? false,
          isSalesRep: item?.IsSalesRep ?? false,
          isOneTime: item?.IsOneTime ?? false,
          isTaxExempt: item?.IsTaxExempt ?? false,
          isDiscountPrinted: item?.IsDiscountPrinted ?? false,
          sendEMail: item?.SendEMail ?? false,
          totalOpenBalance: item?.TotalOpenBalance || 0,
          isPOTaxExempt: item?.IsPOTaxExempt ?? false,
          isManufacturer: item?.IsManufacturer ?? false,
          is1099Vendor: item?.Is1099Vendor ?? false,
          invoiceRule: item?.InvoiceRule?.identifier || '',
          invoiceRuleId: item?.InvoiceRule?.id || '',
          deliveryRule: item?.DeliveryRule?.identifier || '',
          deliveryRuleId: item?.DeliveryRule?.id || '',
          paymentRule: item?.PaymentRule?.identifier || '',
          paymentRuleId: item?.PaymentRule?.id || '',
          paymentRulePO: item?.PaymentRulePO?.identifier || '',
          paymentRulePOId: item?.PaymentRulePO?.id || '',
          soCreditStatus: item?.SOCreditStatus?.identifier || '',
          soCreditStatusId: item?.SOCreditStatus?.id || '',
          partnerGroup: item?.C_BP_Group_ID?.identifier || '',
          partnerGroupId: item?.C_BP_Group_ID?.id || '',
          priceList: item?.M_PriceList_ID?.identifier || '',
          priceListId: item?.M_PriceList_ID?.id || '',
          poPriceList: item?.PO_PriceList_ID?.identifier || '',
          poPriceListId: item?.PO_PriceList_ID?.id || '',
          discountSchema: item?.M_DiscountSchema_ID?.identifier || '',
          discountSchemaId: item?.M_DiscountSchema_ID?.id || '',
          poDiscountSchema: item?.PO_DiscountSchema_ID?.identifier || '',
          poDiscountSchemaId: item?.PO_DiscountSchema_ID?.id || '',
          paymentTerm: item?.C_PaymentTerm_ID?.identifier || '',
          paymentTermId: item?.C_PaymentTerm_ID?.id || '',
          poPaymentTerm: item?.PO_PaymentTerm_ID?.identifier || '',
          poPaymentTermId: item?.PO_PaymentTerm_ID?.id || '',
          language: item?.AD_Language?.identifier || '',
          languageId: item?.AD_Language?.id || '',
          alert: {
            status: '',
            message: '',
            processing: false,
          }
        }
      })
    }
  }
}
onMounted(retrieve)

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

  if(entry.id && confirm('Are you sure want to remove this bp_group from bpartner data?')) {
    /*const res = await $fetch('/api/partners/partner-groups/'+entry.id+'/assigned-partners', {
      method: 'DELETE',
      headers: useRequestHeaders(['cookie'])
    })*/
    const res = await $fetch('/api/partners/partner-groups/'+route.params.id+'/assigned-partners', {
      method: 'PUT',
      headers: useRequestHeaders(['cookie']),
      body: {
        id: entry.id,
        partnerGroup: entry.partnerGroup,
        partnerGroupId: entry.partnerGroupId
      }
    })
    if(res) {
      retrieve()
    }
  }
}
</script>

<template>
  <div class="detailRecordResponsive">
    <div class="tableResponsive">
      <table class="table tableList tableFlush">
        <thead>
          <tr> 
            <th>Name</th>
            <th>Total Open Balance</th>
            <th class="w-100px">Active</th>
            <th class="w-100px">Vendor</th>
            <th class="w-100px">Customer</th>
            <th class="w-100px">Employee</th>
            <th class="w-100px">Sales Rep</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' ? 5 : 4" 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.name }}</td>
            <td>{{ entry.totalOpenBalance }}</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 class="textAlignCenter">
              <div class="check">
                <input type="checkbox" v-model="entry.isVendor" class="checkInput" :id="'isVendor_'+index" :checked="entry.isVendor" disabled>
                <!--<label class="checkLabel" :for="'isVendor_'+index">Vendor</label>-->
              </div>
            </td>
            <td class="textAlignCenter">
              <div class="check">
                <input type="checkbox" v-model="entry.isCustomer" class="checkInput" :id="'isCustomer_'+index" :checked="entry.isCustomer" disabled>
                <!--<label class="checkLabel" :for="'isCustomer_'+index">Customer</label>-->
              </div>
            </td>
            <td class="textAlignCenter">
              <div class="check">
                <input type="checkbox" v-model="entry.isEmployee" class="checkInput" :id="'isEmployee_'+index" :checked="entry.isEmployee" disabled>
                <!--<label class="checkLabel" :for="'isEmployee_'+index">Employee</label>-->
              </div>
            </td>
            <td class="textAlignCenter">
              <div class="check">
                <input type="checkbox" v-model="entry.isSalesRep" class="checkInput" :id="'isSalesRep_'+index" :checked="entry.isSalesRep" disabled>
                <!--<label class="checkLabel" :for="'isSalesRep_'+index">Sales Rep</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-info">
                  <i class="menu-icon tf-icons ti ti-eye"></i>
                </span>
                <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>
</template>