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

const windowFrom = useWindowFrom()

const props = defineProps({
  modelValue: Object,
  tab: String,
  lines: Array
})

const emit = defineEmits(['update:modelValue', 'update:tab', 'update:lines', 'save'])

const organizations = useCookie('logship_organizations')
const organization = useCookie('logship_organization')
const organizationId = useCookie('logship_organization_id')

const clientName = ref('')
onMounted(() => {
  const getClient = localStorage.getItem('logship_clients')
  if(getClient) {
    const clientObj = JSON.parse(getClient)
    clientName.value = clientObj[0].name
  }
})

const form = ref({
  id: props.modelValue.id || '',
  uid: props.modelValue?.uid || '',
  client: props.modelValue.client || '',
  clientId: props.modelValue.clientId || '',
  organization: props.modelValue.organization || organization.value?.Name || '',
  organizationId: props.modelValue.organizationId || organizationId.value || '',
  isActive: props.modelValue.isActive ?? true,
  documentNo: props.modelValue.documentNo || '',
  poReference: props.modelValue.poReference || '',
  isApproved: props.modelValue.isApproved ?? false,
  isPaid: props.modelValue.isPaid ?? false,
  isPrinted: props.modelValue.isPrinted ?? false,
  isTransferred: props.modelValue.isTransferred ?? false,
  dateOrdered: props.modelValue.dateOrdered || date.now('date'),
  dateAcct: props.modelValue.dateAcct || date.now('date'),
  totalLines: props.modelValue.totalLines || 1,
  grandTotal: props.modelValue.grandTotal || 0,
  chargeAmt: props.modelValue.chargeAmt || 0,
  processed: props.modelValue.processed ?? false,
  isSOTrx: props.modelValue.isSOTrx ?? true,
  isDiscountPrinted: props.modelValue.isDiscountPrinted ?? false,
  isTaxIncluded: props.modelValue.isTaxIncluded ?? false,
  sendEMail: props.modelValue.sendEMail ?? false,
  isSelfService: props.modelValue.isSelfService ?? false,
  processedOn: props.modelValue.processedOn || 0,
  isPayScheduleValid: props.modelValue.isPayScheduleValid ?? false,
  dateInvoiced: props.modelValue.dateInvoiced || date.now('date'),
  isInDispute: props.modelValue.isPriviledgedRate ?? false,
  isFixedAssetInvoice: props.modelValue.isFixedAssetInvoice ?? false,
  isOverrideCurrencyRate: props.modelValue.isOverrideCurrencyRate ?? false,
  docBaseType: props.modelValue.docBaseType || '',
  docBaseTypeId: props.modelValue.docBaseTypeId || '',
  user: props.modelValue.user || '',
  userId: props.modelValue.userId || '',
  order: props.modelValue.order || '',
  orderId: props.modelValue.orderId || '',
  docStatus: props.modelValue.docStatus || 'Draft',
  docStatusId: props.modelValue.docStatusId || 'DR',
  docType: props.modelValue.docType || '',
  docTypeId: props.modelValue.docTypeId || 0,
  docTypeTarget: props.modelValue.docTypeTarget || '',
  docTypeTargetId: props.modelValue.docTypeTargetId || '',
  salesRep: props.modelValue.salesRep || '',
  salesRepId: props.modelValue.salesRepId || '',
  paymentTerm: props.modelValue.paymentTerm || '',
  paymentTermId: props.modelValue.paymentTermId || '',
  currency: props.modelValue.currency || '',
  currencyId: props.modelValue.currencyId || '',
  invoiceRule: props.modelValue.invoiceRule || '',
  invoiceRuleId: props.modelValue.invoiceRuleId || '',
  paymentRule: props.modelValue.paymentRule || '',
  paymentRuleId: props.modelValue.paymentRuleId || '',
  priceList: props.modelValue.priceList || '',
  priceListId: props.modelValue.priceListId || '',
  partner: props.modelValue.partner || '',
  partnerId: props.modelValue.partnerId || '',
  partnerLocation: props.modelValue.partnerLocation || '',
  partnerLocationId: props.modelValue.partnerLocationId || '',
  cashLine: props.modelValue.cashLine || '',
  cashLineId: props.modelValue.cashLineId || '',
  project: props.modelValue.project || '',
  projectId: props.modelValue.projectId || '',
  campaign: props.modelValue.campaign || '',
  campaignId: props.modelValue.campaignId || '',
  processing: props.modelValue.processing ?? false,
  alert: {
    status: props.modelValue.alert.status || '',
    message: props.modelValue.alert.message || '',
    processing: props.modelValue.alert.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

    if(key === 'locations' && res?.records?.[0]) {
      form.value.partnerLocationId = String(res.records[0].id || '')
      form.value.partnerLocation = res.records[0].Name || ''
    }
    if(key === 'users' && res?.records?.[0]) {
      form.value.userId = String(res.records[0].id || '')
      form.value.user = res.records[0].Name || ''
    }
    if(key === 'orders' && Number(res?.records?.length) >= 1) {
      getOptions.value[key].records = res.records.map(item => {
        item.name = `${item.DocumentNo} - ${item.C_BPartner_ID.identifier} - ${item.DateAcct}`
        return item
      })
    }
  }
  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 salesOrderLines = ref([])
const filterProductGallery = (galleries, strapiProduct) => {
  let newGallery = galleries?.[0] ?? {}
  if(strapiProduct?.Main_Image && strapiProduct?.Main_Image != 0) {
    newGallery = galleries.filter(i => i.id == strapiProduct.Main_Image)?.[0] ?? {}
  }
  return newGallery
}
const takeSalesOrder = async (opt) => {
  form.value.client = opt?.AD_Client_ID?.identifier || ''
  form.value.clientId = opt?.AD_Client_ID?.id || ''
  form.value.organization = opt?.AD_Org_ID?.identifier || ''
  form.value.organizationId = opt?.AD_Org_ID?.id || ''
  form.value.poReference = opt?.DocumentNo || ''
  form.value.dateOrdered = opt?.DateOrdered || date.now('date')
  form.value.partner = opt?.C_BPartner_ID?.identifier  || ''
  form.value.partnerId = opt?.C_BPartner_ID?.id || ''
  form.value.partnerLocation = opt?.C_BPartner_Location_ID?.identifier || ''
  form.value.partnerLocationId = opt?.C_BPartner_Location_ID?.id || ''
  form.value.user = opt?.AD_User_ID?.identifier || ''
  form.value.userId = opt?.AD_User_ID?.id || ''
  form.value.salesRep = opt?.SalesRep_ID?.identifier || ''
  form.value.salesRepId = opt?.SalesRep_ID?.id || ''
  form.value.priceList = opt?.M_PriceList_ID?.identifier || ''
  form.value.priceListId = opt?.M_PriceList_ID?.id || ''
  form.value.paymentRule = opt?.PaymentRule?.identifier || ''
  form.value.paymentRuleId = opt?.PaymentRule?.id || ''
  if(opt?.c_orderline) {
    salesOrderLines.value = opt.c_orderline.map(item => {
      return {
        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 || '',
        invoice: '',
        invoiceId: '',
        product: item?.M_Product_ID?.Name || '',
        productId: item?.M_Product_ID?.id || '',
        galleries: [],
        isActive: item?.IsActive ?? true,
        line: item?.Line || '',
        isAutoProduce: item?.IsAutoProduce ?? false,
        qtyEntered: item?.QtyEntered || 1,
        qtyInvoiced: item?.QtyInvoiced || 0.0,
        priceActual: Number(Number(item?.PriceActual || 0).toFixed(2)),
        priceEntered: Number(Number(item?.PriceEntered || 0).toFixed(2)),
        priceList: Number(Number(item?.PriceList || 0).toFixed(2)),
        orderLine: item?.id ? `${opt?.DocumentNo || ''}_${opt?.DateAcct || ''}_${item?.QtyEntered || ''}_${item?.LineNetAmt || ''}` : '',
        orderLineId: item?.id || '',
        inOutLine: item?.M_InOutLine_ID?.identifier || '',
        inOutLineId: item?.M_InOutLine_ID?.id || '',
        uom: item?.C_UOM_ID?.identifier || '',
        uomId: item?.C_UOM_ID?.id || '',
        attributeSetInstance: item?.M_AttributeSetInstance_ID?.identifier || '',
        attributeSetInstanceId: item?.M_AttributeSetInstance_ID?.id || '',
        project: item?.C_Project_ID?.identifier || '',
        projectId: item?.C_Project_ID?.id || '',
        campaign: item?.C_Campaign_ID?.identifier || '',
        campaignId: item?.C_Campaign_ID?.id || '',
        charge: item?.C_Charge_ID?.identifier || '',
        chargeId: item?.C_Charge_ID?.id || '',
        show: false,
        alert: {
          status: '',
          message: '',
          processing: false,
        }
      }
    }).sort((a, b) => Number(a.line) - Number(b.line))
    emit('update:lines', salesOrderLines.value)
    
    const newEntries = []
    for(let item of salesOrderLines.value) {
      const response = await $fetch(`/api/materials/products/${item.productId}`)
      if(response?.Strapi_Product_documentId) {
        const resp = await $fetch(`/api/materials/products/${response.Strapi_Product_documentId}/galleries`)
        if(resp?.data) {
          item.galleries = resp.data?.image ?? []
          item.gallery = filterProductGallery(item.galleries, resp.data)
        }
      }
      newEntries.push(item)
    }
    salesOrderLines.value = newEntries
    emit('update:lines', salesOrderLines.value)
  }
}

const populateByPartner = (val, opt) => {
  form.value.partner = opt.Name || ''
  form.value.partnerId = opt.id || ''
  setOptions('partners/partners/'+opt.id+'/locations', 'locations')
  setOptions('partners/partners/'+opt.id+'/users', 'users')
}

watch(() => props.modelValue, () => {
  form.value = props.modelValue

  if(form.value.partnerId !== '' && form.value.docStatusId !== 'CO' && windowFrom.value === 'partners') {
    populateByPartner('', {id: form.value.partnerId, Name: form.value.partner})
  }
})

const debounce = (func, timeout = 300) => {
  let timer;
  return (...args) => {
    clearTimeout(timer)
    timer = setTimeout(() => { func.apply(this, args); }, timeout)
  }
}

const save = debounce(() => {
  emit('update:modelValue', form.value)
  emit('save', form.value)
})
</script>

<template>
  <div @mouseleave="save">
    <div class="my-5 mx-5">
      <!--<AlertAction v-model='form.alert.status' :alert="form.alert" />-->

      <template v-if="tab === 'basic'">
        <div class="columns is-desktop">
          <div class="column is-two-thirds">

            <div class="columns is-desktop">
              <div class="column is-one-third">
                <div class="legend">
                  <label class="label">Document Number</label>
                  <input type="text" v-model="form.documentNo" class="input" :readonly="form.docStatusId === 'CO' || form.docStatusId === 'VO'" @keyup="save" />
                </div>

                <div class="legend mt-2">
                  <label class="label">Target Document Type *</label>
                  <input v-if="form.docStatusId === 'CO' || form.docStatusId === 'VO'" type="text" :value="form.docTypeTarget" class="input" readonly />
                  <ClientOnly v-else>
                    <SelectBox v-model="form.docTypeTargetId" :options="getOptions?.['doc_type_targets']?.records || [{id: form.docTypeTargetId, Name: form.docTypeTarget}]" prop="Name" dataprop="id" datatype="string" :size="5" @click="setOptions('types/SIN', 'doc_type_targets')" @change="save" :loading="loading?.['doc_type_targets'] ?? true" />
                  </ClientOnly>
                </div>
                <!--<select v-model="form.docTypeTargetId" class="select">
                  <option :value="118">AR Credit Memo</option>
                  <option :value="116">AR Invoice</option>
                  <option :value="117">AR Invoice Indirect</option>
                </select>-->

                <div class="legend mt-2">
                  <label class="label">Description</label>
                  <textarea v-model="form.description" class="input" :disabled="form.docStatusId === 'CO' || form.docStatusId === 'VO'" @keyup="save"></textarea>
                </div>
              </div>
              <div class="column is-one-third">
                <div class="legend">
                  <label class="label">Order</label>
                  <input v-if="form.docStatusId === 'CO' || form.id !== ''" type="text" :value="form.order" class="input" readonly />
                  <ClientOnly v-else>
                    <SelectBox v-model="form.orderId" :options="getOptions?.['orders']?.records || [{id: form.orderId, name: form.order}]" prop="name" dataprop="id" datatype="string" :size="5" @click="filterOptions('c_order', 'orders', string.urlEncode(`isSOTrx eq true AND isActive eq true&$expand=c_orderline($expand=m_product_id)`))" @search="(val) => filterOptions('c_order', 'orders', string.urlEncode(`isSOTrx eq true AND isActive eq true AND contains(DocumentNo,'${val}')&$expand=c_orderline($expand=m_product_id)`))" @change="(val, opt) => {takeSalesOrder(opt); save();}" :loading="loading?.['orders'] ?? true" />
                  </ClientOnly>
                </div>

                <div class="legend mt-2">
                  <label class="label">Date Ordered *</label>
                  <input type="text" class="input" :value="form.dateOrdered" readonly />
                </div>

                <div class="legend mt-2">
                  <label class="label">Order Reference</label>
                  <input type="text" v-model="form.poReference" class="input" :readonly="form.docStatusId === 'CO' || form.docStatusId === 'VO'" @keyup="save" />
                </div>
              </div>
              <div class="column is-one-third">
                <div class="legend">
                  <label class="label">Business Partner *</label>
                  <input v-if="form.docStatusId === 'CO' || form.docStatusId === 'VO'" type="text" :value="form.partner" class="input" readonly />
                  <ClientOnly v-else>
                    <ComboBox v-model="form.partnerId" :options="getOptions?.['partners']?.records || [{id: form.partnerId, Name: form.partner}]" prop="Name" dataprop="id" datatype="string" :size="5" @click="setOptions(`partners/partners/select?org=${form.organizationId}&customer=true`, 'partners')" :loading="loading?.['partners'] ?? true" @change="(val, opt) => {populateByPartner(val, opt); save();}" :select="true" />
                  </ClientOnly>
                </div>

                <div class="legend mt-2">
                  <label class="label">Partner Location *</label>
                  <input v-if="form.docStatusId === 'CO' || form.docStatusId === 'VO'" type="text" :value="form.partnerLocation" class="input" readonly />
                  <ClientOnly v-else>
                    <ComboBox v-model="form.partnerLocationId" :options="getOptions?.['locations']?.records || [{id: form.partnerLocationId, Name: form.partnerLocation}]" prop="Name" dataprop="id" datatype="string" :size="5" :loading="false" @click="setOptions((form.partnerId ? 'partners/partners/'+form.partnerId+'/locations' : 'settings/locations'), 'locations')" @change="save" :select="true" />
                  </ClientOnly>
                </div>

                <div class="legend mt-2">
                  <label class="label">User Contact</label>
                  <input v-if="form.docStatusId === 'CO' || form.docStatusId === 'VO'" type="text" :value="form.user" class="input" readonly />
                  <ClientOnly v-else>
                    <ComboBox v-model="form.userId" :options="getOptions?.['users']?.records || [{id: form.userId, Name: form.user}]" @click="setOptions((form.partnerId ? 'partners/partners/'+form.partnerId+'/users' : 'models/ad_user'), 'users')" @change="save" prop="Name" dataprop="id" datatype="string" :size="5" :loading="loading?.['users'] ?? true" :select="true" />
                  </ClientOnly>
                </div>
              </div>
            </div>

          </div>
          <div class="column is-one-third">
            <div class="columns">
              <div class="column">
                <div class="legend">
                  <label class="label">Date Invoiced *</label>
                  <input v-if="form.docStatusId === 'CO' || form.docStatusId === 'VO'" type="text" :value="form.dateInvoiced" class="input" readonly />
                  <DatePicker v-else class="pickerEnd" v-model="form.dateInvoiced" @handler="save" />
                </div>
              </div>

              <div class="column">
                <div class="legend">
                  <label class="label">Date Accounted *</label>
                  <input v-if="form.docStatusId === 'CO' || form.docStatusId === 'VO'" type="text" :value="form.dateAcct" class="input" readonly />
                  <DatePicker v-else class="pickerEnd" v-model="form.dateAcct" :add="14" @handler="save" />
                </div>
              </div>
            </div>

            <div class="legend mt-2">
              <label class="label">Organization *</label>
              <input v-if="form.docStatusId === 'CO' || form.docStatusId === 'VO'" type="text" :value="form.organization" class="input" readonly />
              <SelectBox v-else v-model="form.organizationId" :options="getOptions?.['orgs']?.records || [{id: form.organizationId, Name: form.organization}]" prop="Name" dataprop="id" datatype="string" :size="5" @click="setOptions('models/ad_org', 'orgs')" @change="(val, opt) => {form.organization = opt.Name; save();}" :loading="loading?.['orgs'] ?? true" />
            </div>
              
            <div class="legend mt-2">
              <label class="label">Tenant *</label>
              <input type="text" :value="clientName" class="input" readonly />
            </div>

            <div class="mt-2">
              <div class="d-flex flexDirection-column">
                <div class="check">
                  <input type="checkbox" v-model="form.isActive" class="checkInput" id="isActive" :checked="form.isActive" :disabled="form.docStatusId === 'CO' || form.docStatusId === 'VO'" @change="save">
                  <label class="checkLabel" for="isActive">Active</label>
                </div>
                <div class="check">
                  <input type="checkbox" v-model="form.isSelfService" class="checkInput" id="isSelfService" :checked="form.isSelfService" :disabled="form.docStatusId === 'CO' || form.docStatusId === 'VO'" @change="save">
                  <label class="checkLabel" for="isSelfService">Self-Service</label>
                </div>
                <div class="check">
                  <input type="checkbox" v-model="form.isDiscountPrinted" class="checkInput" id="isDiscountPrinted" :checked="form.isDiscountPrinted" :disabled="form.docStatusId === 'CO' || form.docStatusId === 'VO'" @change="save">
                  <label class="checkLabel" for="isDiscountPrinted">Discount Printed</label>
                </div>
              </div>
            </div>

          </div>
        </div>
      </template>
      <template v-else-if="tab === 'invoice'">
        <div class="columns is-desktop">
          <div class="column is-half">
            <div class="legend">
              <label class="label">Price List *</label>
              <input v-if="form.docStatusId === 'CO' || form.docStatusId === 'VO'" type="text" :value="form.priceList" class="input" readonly />
              <ClientOnly v-else>
                <SelectBox v-model="form.priceListId" :options="getOptions?.['price_lists']?.records || [{id: form.priceListId, Name: form.priceList}]" prop="Name" dataprop="id" datatype="string" :size="5" @click="setOptions('materials/price-lists', 'price_lists')" @change="save" :loading="loading?.['price_lists'] ?? true" />
              </ClientOnly>
            </div>
            
            <div class="legend mt-2">
              <label class="label">Sales Representative *</label>
              <input v-if="form.docStatusId === 'CO' || form.docStatusId === 'VO'" type="text" :value="form.salesRep" class="input" readonly />
              <ClientOnly v-else>
                <SelectBox v-model="form.salesRepId" :options="getOptions?.['sales_reps']?.records || [{id: form.salesRepId, Name: form.salesRep}]" prop="Name" dataprop="id" datatype="string" :size="5" @click="setOptions('admin/users', 'sales_reps')" @change="save" :loading="loading?.['sales_reps'] ?? true" />
              </ClientOnly>
            </div>
          </div>
          <div class="column is-half">
            <div class="legend">
              <label class="label">Currency *</label>
              <input v-if="form.docStatusId === 'CO' || form.docStatusId === 'VO'" type="text" :value="form.currency" class="input" readonly />
              <ClientOnly v-else>
                <SelectBox v-model="form.currencyId" :options="getOptions?.['currencies']?.records || [{id: form.currencyId, ISO_Code: form.currency}]" prop="ISO_Code" dataprop="id" datatype="string" :size="5" @click="setOptions('settings/currencies', 'currencies')" @change="save" :loading="loading?.['currencies'] ?? true" />
              </ClientOnly>
            </div>
            
            <div class="legend mt-2">
              <label class="label">Payment Rule *</label>
              <!--<select v-model="form.paymentRuleId" class="select">
                <option value="B">Cash</option>
                <option value="S">Check</option>
                <option value="K">Credit Card</option>
                <option value="T">Direct Deposit</option>
                <option value="M">Mixed POS Payment</option>
                <option value="P">On Credit</option>
              </select>-->
              <input v-if="form.docStatusId === 'CO' || form.docStatusId === 'VO'" type="text" :value="form.priorityRule" class="input" readonly />
              <ClientOnly v-else>
                <SelectBox v-model="form.paymentRuleId" :options="getOptions?.['payment_rules']?.reflist || [{value: form.paymentRuleId, name: form.paymentRule}]" prop="name" dataprop="value" datatype="string" :size="5" @click="setOptions('references/payment_rule', 'payment_rules')" @change="save" :loading="loading?.['payment_rules'] ?? true" />
              </ClientOnly>
            </div>
          </div>
        </div>
      </template>
      <template v-else-if="tab === 'reference'">
        <div class="columns is-desktop">
          <div class="column is-half">
            <div class="legend">
              <label class="label">Project</label>
              <input v-if="form.docStatusId === 'CO' || form.docStatusId === 'VO'" type="text" :value="form.project" class="input" readonly />
              <ClientOnly v-else>
                <SelectBox v-model="form.projectId" :options="getOptions?.['projects']?.records || [{id: form.projectId, Name: form.project}]" prop="Name" dataprop="id" datatype="string" :size="5" @click="setOptions('projects', 'projects')" @change="save" :loading="loading?.['projects'] ?? true" />
              </ClientOnly>
            </div>
          </div>
          <div class="column is-half">
            <div class="legend">
              <label class="label">Campaign</label>
              <input v-if="form.docStatusId === 'CO' || form.docStatusId === 'VO'" type="text" :value="form.campaign" class="input" readonly />
              <ClientOnly v-else>
                <SelectBox v-model="form.campaignId" :options="getOptions?.['campaigns']?.records || [{id: form.campaignId, Name: form.campaign}]" prop="Name" dataprop="id" datatype="string" :size="5" @click="setOptions('marketings/campaigns', 'campaigns')" @change="save" :loading="loading?.['campaigns'] ?? true" />
              </ClientOnly>
            </div>
          </div>
        </div>
      </template>
      <template v-else-if="tab === 'status'">
        <div class="columns is-desktop">
          <div class="column is-half">
            <div class="legend">
              <label class="label">Document Status</label>
              <select v-model="form.docStatusId" class="select" disabled>
                <option value="CO">Completed</option>
                <option value="DR">Drafted</option>
                <option value="VO">Void</option>
              </select>
            </div>

            <div class="legend mt-2">
              <label class="label">Total Lines</label>
              <input type="text" :value="form.totalLines" class="input" readonly />
            </div>

            <div class="legend mt-2">
              <label class="label">Cash Plan Line</label>
              <input v-if="form.docStatusId === 'CO' || form.docStatusId === 'VO'" type="text" :value="form.cashLine" class="input" readonly />
              <ClientOnly v-else>
                <SelectBox v-model="form.cashLineId" :options="getOptions?.['cash_lines']?.records || [{id: form.cashLineId, Line: form.cashLine}]" prop="Line" dataprop="id" datatype="string" :size="5" @click="setOptions('models/c_cashline', 'cash_lines')" @change="save" :loading="loading?.['cash_lines'] ?? true" />
              </ClientOnly>
            </div>
          </div>
          <div class="column is-half">
            <div class="legend">
              <label class="label">Document Type</label>
              <select v-model="form.docTypeId" class="select" disabled>
                <option :value="0">** New **</option>
              </select>
            </div>

            <div class="legend mt-2">
              <label class="label">Grand Total</label>
              <input type="text" :value="form.grandTotal" class="input" readonly />
            </div>

            <label class="label d-block mt-2">Pay Schedule &amp; Fixed Asset</label>
            <div class="d-flex flexDirection-column px-3 gap-5px">
              <div class="check">
                <input type="checkbox" v-model="form.isPayScheduleValid" class="checkInput" id="isPayScheduleValid" :checked="form.isPayScheduleValid" :disabled="form.docStatusId === 'CO' || form.docStatusId === 'VO'" @change="save">
                <label class="checkLabel" for="isPayScheduleValid">Pay Schedule Valid</label>
              </div>
              <div class="check">
                <input type="checkbox" v-model="form.isFixedAssetInvoice" class="checkInput" id="isFixedAssetInvoice" :checked="form.isFixedAssetInvoice" :disabled="form.docStatusId === 'CO' || form.docStatusId === 'VO'" @change="save">
                <label class="checkLabel" for="isFixedAssetInvoice">Fixed Asset Invoice</label>
              </div>
            </div>
          </div>
        </div>

        <!--<div v-if="form.id !== '' && form.docStatusId !== 'CO'" class="mt-2">
          <button type="button" class="button" @click="showDocumentAction = true">Document Action</button>
        </div>-->
      </template>

    </div>
  </div>

  <!--<Teleport to="body">
    <SalesInvoiceDocumentAction v-model="showDocumentAction" :id="form.id" v-model:docId="form.docStatusId"/>
  </Teleport>-->
</template>