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

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

const emit = defineEmits(['update:modelValue', 'update:tab', '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 showDocumentAction = ref(false)
const form = ref({
  id: props.modelValue.id || '',
  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 || '',
  isApproved: props.modelValue.isApproved ?? false,
  processed: props.modelValue.processed ?? false,
  creditCardNumber: props.modelValue.creditCardNumber || 0,
  creditCardExpMM: props.modelValue.creditCardExpMM || Number(new Date().getMonth()) + 1,
  creditCardExpYY: props.modelValue.creditCardExpYY || new Date().getFullYear(),
  creditCardVV: props.modelValue.creditCardVV || '',
  isReconciled: props.modelValue.isReconciled ?? false,
  taxAmt: props.modelValue.taxAmt || 0,
  discountAmt: props.modelValue.discountAmt || 0,
  payAmt: props.modelValue.payAmt || 0,
  dateTrx: props.modelValue.dateTrx || date.now('date'),
  isAllocated: props.modelValue.isAllocated ?? false,
  isOnline: props.modelValue.isOnline ?? false,
  isReceipt: props.modelValue.isReceipt ?? true,
  writeOffAmt: props.modelValue.writeOffAmt || 0,
  overUnderAmt: props.modelValue.overUnderAmt || 0,
  isOverUnderPayment: props.modelValue.isOverUnderPayment ?? false,
  isSelfService: props.modelValue.isSelfService ?? false,
  isDelayedCapture: props.modelValue.isDelayedCapture ?? false,
  chargeAmt: props.modelValue.chargeAmt || 0,
  R_CVV2Match: props.modelValue.R_CVV2Match || 0,
  dateAcct: props.modelValue.dateAcct || date.now('date'),
  isPrepayment: props.modelValue.isPrepayment ?? false,
  processedOn: props.modelValue.processedOn || 0,
  isVoided: props.modelValue.isVoided ?? false,
  isOverrideCurrencyRate: props.modelValue.isOverrideCurrencyRate ?? false,
  routingNo: props.modelValue.routingNo || '',
  accountNo: props.modelValue.accountNo || '',
  A_Zip: props.modelValue.A_Zip || '',
  A_Ident_DL: props.modelValue.A_Ident_DL || '',
  A_Ident_SSN: props.modelValue.A_Ident_SSN || '',
  A_EMail: props.modelValue.A_EMail || '',
  voiceAuthCode: props.modelValue.voiceAuthCode || '',
  orig_TrxID: props.modelValue.orig_TrxID || '',
  micr: props.modelValue.micr || '',
  checkNo: props.modelValue.checkNo || '',
  A_Name: props.modelValue.A_Name || '',
  A_Street: props.modelValue.A_Street || '',
  A_City: props.modelValue.A_City || '',
  A_State: props.modelValue.A_State || '',
  A_Country: props.modelValue.A_Country || '',
  swiftCode: props.modelValue.swiftCode || '',
  creditCardType: props.modelValue.creditCardType || '',
  creditCardTypeId: props.modelValue.creditCardTypeId || '',
  bankAccount: props.modelValue.bankAccount || '',
  bankAccountId: props.modelValue.bankAccountId || '',
  trxType: props.modelValue.trxType || '',
  trxTypeId: props.modelValue.trxTypeId || '',
  tenderType: props.modelValue.tenderType || '',
  tenderTypeId: props.modelValue.tenderTypeId || '',
  currency: props.modelValue.currency || '',
  currencyId: props.modelValue.currencyId || '',
  docType: props.modelValue.docType || 'AR Receipt',
  docTypeId: props.modelValue.docTypeId || '119',
  order: props.modelValue.order || '',
  orderId: props.modelValue.orderId || '',
  invoice: props.modelValue.invoice || '',
  invoiceId: props.modelValue.invoiceId || '',
  docStatus: props.modelValue.docStatus || 'Draft',
  docStatusId: props.modelValue.docStatusId || 'DR',
  partner: props.modelValue.partner || '',
  partnerId: props.modelValue.partnerId || '',
  charge: props.modelValue.charge || '',
  chargeId: props.modelValue.chargeId || '',
  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((res?.records?.length || 0) >= 1) {
      getOptions.value[key]['records'] = res?.records?.map(item => {
        if(key === 'bankaccounts') {
          item['Name'] = `${item.Value || item.AccountNo || item.Name}_${item?.C_Bank_ID?.identifier ?? ''}`
        }
        return item
      }) || []
    }

    /*if(key === 'locators' && Number(getOptions.value[key]?.records?.length || 0) >= 1) {
      form.value.locator = getOptions.value[key]?.records?.[0]?.Value || ''
      form.value.locatorId = getOptions.value[key]?.records?.[0]?.id || ''
    }*/
  }
  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)
    }
  }
}

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

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.self="save">
    <div class="my-5 mx-5">
      <!--<AlertAction v-model='form.alert.status' :alert="form.alert" />-->

      <template v-if="tab === 'payment'">
        <div class="columns is-desktop">
          <div class="column is-two-thirds">
            <div class="columns is-desktop">
              <div class="column is-half">
                <div class="legend">
                  <label class="label">Document Number</label>
                  <input type="text" v-model="form.documentNo" class="input" :readonly="form.docStatusId === 'CO'" @keyup="save" />
                </div>

                <div class="legend mt-2">
                  <label class="label">Date Transaction *</label>
                  <input v-if="form.docStatusId === 'CO'" type="text" :value="form.dateTrx" class="input" readonly />
                  <DatePicker v-else v-model="form.dateTrx" @handler="save" />
                </div>
              </div>
              <div class="column is-half">
                <div class="legend">
                  <label class="label">Bank Account *</label>
                  <input v-if="form.docStatusId === 'CO'" type="text" :value="form.bankAccount" class="input" readonly />
                  <ClientOnly v-else>
                    <SelectBox v-model="form.bankAccountId" :options="getOptions?.['bankaccounts']?.records || [{id: form.bankAccountId, Name: form.bankAccount}]" prop="Name" dataprop="id" datatype="string" :size="5" @click="filterOptions('c_bankaccount', 'bankaccounts')" @search="(val) => filterOptions('c_bankaccount', 'bankaccounts', string.urlEncode(`isActive eq true AND contains(Name,'${val}')`))" @change="save" :loading="loading?.['bankaccounts'] ?? true" />
                  </ClientOnly>
                </div>

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

            <div class="legend mt-2">
              <label class="label">Description</label>
              <textarea v-model="form.description" class="input" :disabled="form.docStatusId === 'CO'" @keyup="save"></textarea>
            </div>
          </div>
          <div class="column is-one-third">
            <div class="legend">
              <label class="label">Document Type *</label>
              <input v-if="form.docStatusId === 'CO'" type="text" :value="form.docType" class="input" readonly />
              <ClientOnly v-else>
                <SelectBox v-model="form.docTypeId" :options="getOptions?.['doc_type_targets']?.records || [{id: form.docTypeId, Name: form.docType}]" prop="Name" dataprop="id" datatype="string" :size="5" @click="setOptions('types/SPR', 'doc_type_targets')" :loading="loading?.['doc_type_targets'] ?? true" @change="(val, opt) => {form.isReceipt = opt.Name === 'AR Receipt' ? true : false; save();}" />
              </ClientOnly>
            </div>
            <!--<select v-model="form.docTypeId" class="select" @change="form.isReceipt = form.docTypeId === 119 ? true : false">
              <option :value="125">AP Payment</option>
              <option :value="119">AR Receipt</option>
            </select>-->
            
            <div class="legend mt-2">
              <label class="label">Organization *</label>
              <input v-if="form.docStatusId === 'CO'" 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>

            <label class="label d-block mt-2">Status</label>
            <div class="d-flex flexDirection-column px-3 gap-5px">
              <div class="check">
                <input type="checkbox" v-model="form.isActive" class="checkInput" id="isActive" :checked="form.isActive" @change="save">
                <label class="checkLabel" for="isActive">Active</label>
              </div>
              <div class="check">
                <input type="checkbox" v-model="form.isReceipt" class="checkInput" id="isReceipt" :checked="form.isReceipt" disabled>
                <label class="checkLabel" for="isReceipt">Receipt</label>
              </div>
            </div>
          </div>
        </div>
      </template>
      <template v-if="tab === 'reference'">
        <div class="columns is-desktop">
          <div class="column is-two-thirds">
            <div class="columns is-desktop">
              <div class="column is-half">
                <div class="legend">
                  <label class="label">Business Partner *</label>
                  <input v-if="form.docStatusId === 'CO'" type="text" :value="form.partner" class="input" readonly />
                  <ClientOnly v-else>
                    <SelectBox 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', 'partners')" @change="save" :loading="loading?.['partners'] ?? true" />
                  </ClientOnly>
                </div>

                <div class="legend mt-2">
                  <label class="label">Invoice</label>
                  <input v-if="form.docStatusId === 'CO'" type="text" :value="form.invoice" class="input" readonly />
                  <ClientOnly v-else>
                    <SelectBox v-model="form.invoiceId" :options="getOptions?.['invoices']?.records || [{id: form.invoiceId, DocumentNo: form.invoice}]" prop="DocumentNo" dataprop="id" datatype="string" :size="5" @click="setOptions('models/c_invoice', 'invoices')" @change="save" :loading="loading?.['invoices'] ?? true" />
                  </ClientOnly>
                </div>

                <div class="legend mt-2">
                  <label class="label">Project</label>
                  <input v-if="form.docStatusId === 'CO'" type="text" :value="form.invoice" 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">Charge</label>
                  <input v-if="form.docStatusId === 'CO'" type="text" :value="form.charge" class="input" readonly />
                  <ClientOnly v-else>
                    <SelectBox v-model="form.chargeId" :options="getOptions?.['charges']?.records || [{id: form.chargeId, Name: form.charge}]" prop="Name" dataprop="id" datatype="string" :size="5" @click="setOptions('models/c_charge', 'charges')" @change="save" :loading="loading?.['charges'] ?? true" />
                  </ClientOnly>
                </div>

                <div class="legend mt-2">
                  <label class="label">Order</label>
                  <input v-if="form.docStatusId === 'CO'" type="text" :value="form.order" class="input" readonly />
                  <ClientOnly v-else>
                    <SelectBox v-model="form.orderId" :options="getOptions?.['orders']?.records || [{id: form.orderId, DocumentNo: form.order}]" prop="DocumentNo" dataprop="id" datatype="string" :size="5" @click="setOptions('models/c_order', 'orders')" @change="save" :loading="loading?.['orders'] ?? true" />
                  </ClientOnly>
                </div>

                <div class="legend mt-2">
                  <label class="label">Campaign</label>
                  <input v-if="form.docStatusId === 'CO'" 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>
          </div>
          <div class="column is-one-third">
            <label class="label d-block">Status</label>
            <div class="d-flex flexDirection-column px-3 gap-5px">
              <div class="check">
                <input type="checkbox" v-model="form.isPrepayment" class="checkInput" id="isPrepayment" :checked="form.isPrepayment" :disabled="form.docStatusId === 'CO'" @change="save">
                <label class="checkLabel" for="isPrepayment">Prepayment</label>
              </div>
            </div>
          </div>
        </div>
      </template>
      <template v-if="tab === 'amounts'">
        <div class="columns is-desktop">
          <div class="column is-half">
            <div class="legend">
              <label class="label">Payment Amount *</label>
              <input type="text" v-model="form.payAmt" class="input" :readonly="form.docStatusId === 'CO'" @keyup="save" />
            </div>

            <div class="legend mt-2">
              <label class="label">Discount Amount</label>
              <input type="text" v-model="form.discountAmt" class="input" :readonly="form.docStatusId === 'CO'" @keyup="save" />
            </div>

            <label class="label d-block mt-2">Over/Under Payment Status</label>
            <div class="check">
              <input type="checkbox" v-model="form.isOverUnderPayment" class="checkInput" id="isOverUnderPayment" :checked="form.isOverUnderPayment" :disabled="form.docStatusId === 'CO'" @change="save">
              <label class="checkLabel" for="isOverUnderPayment">Over/Under Payment</label>
            </div>
          </div>
          <div class="column is-half">
            <div class="legend">
            <label class="label">Currency *</label>
              <input v-if="form.docStatusId === 'CO'" 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">Write-off Amount</label>
              <input type="text" v-model="form.writeOffAmt" class="input" :readonly="form.docStatusId === 'CO'" @keyup="save" />
            </div>

            <template v-if="form.isOverUnderPayment">
              <div class="legend mt-2">
                <label class="label">Over/Under Amount</label>
                <input type="text" v-model="form.overUnderAmt" class="input" :readonly="form.docStatusId === 'CO'" @keyup="save" />
              </div>
            </template>
          </div>
        </div>
      </template>
      <template v-if="tab === 'document'">
        <div class="columns is-desktop">
          <div class="column is-two-thirds">
            <div class="columns is-desktop">
              <div class="column is-half">
                <div class="legend">
                  <label class="label">Tender Type *</label>
                  <select v-model="form.tenderTypeId" :disabled="form.docStatusId === 'CO'" @change="save" class="select">
                    <option value="T">Account</option>
                    <option value="X">Cash</option>
                    <option value="K">Check</option>
                    <option value="C">Credit Card</option>
                    <option value="D">Direct Debit</option>
                    <option value="A">Direct Deposit</option>
                  </select>
                </div>
              </div>
              <div class="column is-half">
                <div class="legend">
                  <label class="label">POS Tender Type</label>
                  <input type="text" class="input" readonly @keyup="save" />
                </div>
              </div>
            </div>

            <div v-if="['C'].includes(form.tenderTypeId)" class="columns is-desktop">
              <div class="column is-half">
                <div class="legend mt-2">
                  <label class="label">Credit Card</label>
                  <select v-model="form.creditCardTypeId" :disabled="form.docStatusId === 'CO'" @change="save" class="select">
                    <option value="A">Amex</option>
                    <option value="D">Diners</option>
                    <option value="N">Discover</option>
                    <option value="M">MasterCard</option>
                    <option value="P">Purchase Card</option>
                    <option value="V">Visa</option>
                  </select>
                </div>

                <div class="legend mt-2">
                  <label class="label">Number</label>
                  <input type="text" v-model="form.creditCardNumber" class="input" :readonly="form.docStatusId === 'CO'" @keyup="save" />
                </div>

                <div class="legend mt-2">
                  <label class="label">Exp. Month</label>
                  <input type="text" v-model="form.creditCardExpMM" class="input" :readonly="form.docStatusId === 'CO'" @keyup="save" />
                </div>
              </div>
              <div class="column is-half">
                <div class="legend mt-2">
                  <label class="label">Transaction Type</label>
                  <select v-model="form.trxTypeId" class="select" :disabled="form.docStatusId === 'CO'" @change="save">
                    <option value="C">Credit (Payment)</option>
                    <option value="D">Delayed Capture</option>
                    <option value="S">Sales</option>
                    <option value="V">Void</option>
                  </select>
                </div>

                <div class="legend mt-2">
                  <label class="label">Verification Code</label>
                  <input type="text" v-model="form.creditCardVV" class="input" :readonly="form.docStatusId === 'CO'" @keyup="save" />
                </div>

                <div class="legend mt-2">
                  <label class="label">Exp. Year</label>
                  <input type="text" v-model="form.creditCardExpYY" class="input" :readonly="form.docStatusId === 'CO'" @keyup="save" />
                </div>
              </div>
            </div>

            <div v-if="['A', 'K'].includes(form.tenderTypeId)" class="columns is-desktop">
              <div class="column is-half">
                <div class="legend mt-2">
                  <label class="label">Routing No</label>
                  <input type="text" v-model="form.routingNo" class="input" :readonly="form.docStatusId === 'CO'" @keyup="save" />
                </div>

                <div class="legend mt-2">
                  <label class="label">IBAN</label>
                  <input type="text" class="input" :readonly="form.docStatusId === 'CO'" @keyup="save" />
                </div>
              </div>
              <div class="column is-half">
                <div class="legend mt-2">
                  <label class="label">Account No</label>
                  <input type="text" v-model="form.accountNo" class="input" :readonly="form.docStatusId === 'CO'" @keyup="save" />
                </div>

                <div class="legend mt-2">
                  <label class="label">Swift code</label>
                  <input type="text" v-model="form.swiftCode" class="input" :readonly="form.docStatusId === 'CO'" @keyup="save" />
                </div>
              </div>
            </div>

            <div v-if="['K'].includes(form.tenderTypeId)" class="columns is-desktop">
              <div class="column is-half">
                <div class="legend mt-2">
                  <label class="label">Check No</label>
                  <input type="text" v-model="form.checkNo" class="input" :readonly="form.docStatusId === 'CO'" @keyup="save" />
                </div>
              </div>
              <div class="column is-half">
                <div class="legend mt-2">
                  <label class="label">Micr</label>
                  <input type="text" v-model="form.micr" class="input" :readonly="form.docStatusId === 'CO'" @keyup="save" />
                </div>
              </div>
            </div>

            <div class="columns is-desktop">
              <div class="column is-half">
                <template v-if="['K', 'C'].includes(form.tenderTypeId)">
                  <div class="legend mt-2">
                    <label class="label">Account Name</label>
                    <input type="text" v-model="form.A_Name" class="input" :readonly="form.docStatusId === 'CO'" @keyup="save" />
                  </div>
                </template>

                <template v-if="form.isOnline && ['K', 'C'].includes(form.tenderTypeId)">
                  <div class="legend mt-2">
                    <label class="label">Account City</label>
                    <input type="text" v-model="form.A_City" class="input" :readonly="form.docStatusId === 'CO'" @keyup="save" />
                  </div>

                  <div class="legend mt-2">
                    <label class="label">Account State</label>
                    <input type="text" v-model="form.A_State" class="input" :readonly="form.docStatusId === 'CO'" @keyup="save" />
                  </div>
                </template>

                <template v-if="form.isOnline && ['K'].includes(form.tenderTypeId)">
                  <div class="legend mt-2">
                    <label class="label">Driver License</label>
                    <input type="text" v-model="form.A_Ident_DL" class="input" :readonly="form.docStatusId === 'CO'" @keyup="save" />
                  </div>

                  <div class="legend mt-2">
                    <label class="label">Account EMail</label>
                    <input type="text" v-model="form.A_EMail" class="input" :readonly="form.docStatusId === 'CO'" @keyup="save" />
                  </div>
                </template>

                <template v-if="form.isOnline && ['A', 'D', 'T', 'X', 'K', 'C'].includes(form.tenderTypeId)">
                  <div class="legend mt-2">
                    <label class="label">Voice authorization code</label>
                    <input type="text" v-model="form.voiceAuthCode" class="input" :readonly="form.docStatusId === 'CO'" @keyup="save" />
                  </div>
                </template>
              </div>
              <div class="column is-half">
                <template v-if="form.isOnline && ['K', 'C'].includes(form.tenderTypeId)">
                  <div class="legend mt-2">
                    <label class="label">Account Street</label>
                    <input type="text" v-model="form.A_Street" class="input" :readonly="form.docStatusId === 'CO'" @keyup="save" />
                  </div>

                  <div class="legend mt-2">
                    <label class="label">Account Zip/Postal</label>
                    <input type="text" v-model="form.A_Zip" class="input" :readonly="form.docStatusId === 'CO'" @keyup="save" />
                  </div>

                  <div class="legend mt-2">
                    <label class="label">Account Country</label>
                    <input type="text" v-model="form.A_Country" class="input" :readonly="form.docStatusId === 'CO'" @keyup="save" />
                  </div>
                </template>

                <template v-if="form.isOnline && ['K'].includes(form.tenderTypeId)">
                  <div class="legend mt-2">
                    <label class="label">Social Security No</label>
                    <input type="text" v-model="form.A_Ident_SSN" class="input" :readonly="form.docStatusId === 'CO'" @keyup="save" />
                  </div>
                </template>

                <template v-if="form.isOnline && ['A', 'D', 'T', 'X', 'K', 'C'].includes(form.tenderTypeId)">
                  <div class="legend mt-2">
                    <label class="label">Original Transaction ID</label>
                    <input type="text" v-model="form.orig_TrxID" class="input" :readonly="form.docStatusId === 'CO'" @keyup="save" />
                  </div>
                </template>
              </div>
            </div>
          </div>
          <div class="column is-one-third">
            <label class="label d-block">Status</label>
            <div class="d-flex flexDirection-column px-3 gap-5px">
              <div class="check">
                <input type="checkbox" v-model="form.isOnline" class="checkInput" id="isOnline" :checked="form.isOnline" :disabled="form.docStatusId === 'CO'" @change="save">
                <label class="checkLabel" for="isOnline">Online Access</label>
              </div>
            </div>
          </div>
        </div>
      </template>
      <template v-if="tab === 'status'">
        <div class="columns is-desktop">
          <div class="column is-two-thirds">
            <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>
              <div class="column is-half">
                <div class="legend">
                  <label class="label">Payment Processor</label>
                  <input type="text" class="input" readonly />
                </div>
              </div>
            </div>

            <div v-if="form.isOnline" class="columns is-desktop">
              <div class="column is-half">
                <div class="legend mt-2">
                  <label class="label">Result</label>
                  <input type="text" class="input" readonly />
                </div>

                <div class="legend mt-2">
                  <label class="label">Reference</label>
                  <input type="text" class="input" readonly />
                </div>

                <div class="legend mt-2">
                  <label class="label">Zip verified</label>
                  <select class="select" disabled>
                    <option selected>** New **</option>
                  </select>
                </div>

                <div class="legend mt-2">
                  <label class="label">Customer Payment Profile ID</label>
                  <input type="text" class="input" readonly />
                </div>

                <div class="legend mt-2">
                  <label class="label">Customer Address ID</label>
                  <input type="text" class="input" readonly />
                </div>
              </div>
              <div class="column is-half">
                <div class="legend mt-2">
                  <label class="label">Response Message</label>
                  <input type="text" class="input" readonly />
                </div>

                <div class="legend mt-2">
                  <label class="label">Authorization Code</label>
                  <input type="text" class="input" readonly />
                </div>

                <div class="legend mt-2">
                  <label class="label">Address verified</label>
                  <select class="select" disabled>
                    <option selected>** New **</option>
                  </select>
                </div>

                <div class="legend mt-2">
                  <label class="label">Customer Profile ID</label>
                  <input type="text" class="input" readonly />
                </div>
              </div>
            </div>
          </div>
          <div class="column is-one-third">
            <label class="label d-block">Status</label>
            <div class="d-flex flexDirection-column px-3 gap-5px">
              <div class="check">
                <input type="checkbox" v-model="form.isSelfService" class="checkInput" id="isSelfService" :checked="form.isSelfService" :disabled="form.docStatusId === 'CO'" @change="save">
                <label class="checkLabel" for="isSelfService">Self Service</label>
              </div>
              <div v-if="form.isOnline" class="check">
                <input type="checkbox" v-model="form.isApproved" class="checkInput" id="isApproved" :checked="form.isApproved" :disabled="form.docStatusId === 'CO'" @change="save">
                <label class="checkLabel" for="isApproved">Approved</label>
              </div>
            </div>
          </div>
        </div>
      </template>

    </div>
  </div>
</template>