<script setup>
import { date } from 'alga-js'
const router = useRouter()
const route = useRoute()

definePageMeta({
  middleware: ['auth', 'org']
})

const form = ref({
  id: '',
  client: '',
  clientId: '',
  organization: '',
  organizationId: '',
  isActive: true,
  documentNo: '',
  description: '',
  isApproved: false,
  processed: false,
  creditCardNumber: 0,
  creditCardExpMM: Number(new Date().getMonth()) + 1,
  creditCardExpYY: new Date().getFullYear(),
  creditCardVV: '',
  isReconciled: false,
  taxAmt: 0,
  discountAmt: 0,
  payAmt: 0,
  dateTrx: date.now('date'),
  isAllocated: false,
  isOnline: false,
  isReceipt: false,
  writeOffAmt: 0,
  overUnderAmt: 0,
  isOverUnderPayment: false,
  isSelfService: false,
  isDelayedCapture: false,
  chargeAmt: 0,
  R_CVV2Match: 0,
  dateAcct: date.now('date'),
  isPrepayment: false,
  processedOn: 0,
  isVoided: false,
  isOverrideCurrencyRate: false,
  routingNo: '',
  accountNo: '',
  A_Zip: '',
  A_Ident_DL: '',
  A_Ident_SSN: '',
  A_EMail: '',
  voiceAuthCode: '',
  orig_TrxID: '',
  micr: '',
  checkNo: '',
  A_Name: '',
  A_Street: '',
  A_City: '',
  A_State: '',
  A_Country: '',
  swiftCode: '',
  creditCardType: '',
  creditCardTypeId: '',
  bankAccount: '',
  bankAccountId: '',
  trxType: '',
  trxTypeId: '',
  tenderType: '',
  tenderTypeId: '',
  currency: '',
  currencyId: '',
  docType: 'AP Payment',
  docTypeId: '125',
  order: '',
  orderId: '',
  invoice: '',
  invoiceId: '',
  docStatus: 'DR',
  docStatusId: 'DR',
  partner: '',
  partnerId: '',
  charge: '',
  chargeId: '',
  project: '',
  projectId: '',
  campaign: '',
  campaignId: '',
  processing: false,
  alert: {
    status: '',
    message: '',
    processing: false
  }
})

const retrieve = async () => {
  const res = await $fetch('/api/payments/'+route.params.id, {
    headers: useRequestHeaders(['cookie'])
  })
  if(res) {
    form.value = {
      id: route.params.id,
      client: res?.AD_Client_ID?.identifier || '',
      clientId: res?.AD_Client_ID?.id || '',
      organization: res?.AD_Org_ID?.identifier || '',
      organizationId: res?.AD_Org_ID?.id || '',
      isActive: res?.IsActive ?? true,
      documentNo: res?.DocumentNo || '',
      description: res?.Description || '',
      isApproved: res?.IsApproved ?? false,
      processed: res?.Processed ?? false,
      creditCardNumber: res?.CreditCardNumber || 0,
      creditCardExpMM: res?.CreditCardExpMM || Number(new Date().getMonth()) + 1,
      creditCardExpYY: res?.CreditCardExpYY || new Date().getFullYear(),
      creditCardVV: res?.CreditCardVV || '',
      isReconciled: res?.IsReconciled ?? false,
      taxAmt: res?.TaxAmt || 0,
      discountAmt: res?.DiscountAmt || 0,
      payAmt: res?.PayAmt || 0,
      dateTrx: res?.DateTrx || date.now('date'),
      isAllocated: res?.IsAllocated ?? false,
      isOnline: res?.IsOnline ?? false,
      isReceipt: res?.IsReceipt ?? false,
      writeOffAmt: res?.WriteOffAmt || 0,
      overUnderAmt: res?.OverUnderAmt || 0,
      isOverUnderPayment: res?.IsOverUnderPayment ?? false,
      isSelfService: res?.IsSelfService ?? false,
      isDelayedCapture: res?.IsDelayedCapture ?? false,
      chargeAmt: res?.ChargeAmt || 0,
      R_CVV2Match: res?.R_CVV2Match || 0,
      dateAcct: res?.DateAcct || date.now('date'),
      isPrepayment: res?.IsPrepayment ?? false,
      processedOn: res?.ProcessedOn || 0,
      isVoided: res?.IsVoided ?? false,
      isOverrideCurrencyRate: res?.IsOverrideCurrencyRate ?? false,
      routingNo: res?.RoutingNo || '',
      accountNo: res?.AccountNo || '',
      A_Zip: res?.A_Zip || '',
      A_Ident_DL: res?.A_Ident_DL || '',
      A_Ident_SSN: res?.A_Ident_SSN || '',
      A_EMail: res?.A_EMail || '',
      voiceAuthCode: res?.VoiceAuthCode || '',
      orig_TrxID: res?.Orig_TrxID || '',
      micr: res?.Micr || '',
      checkNo: res?.CheckNo || '',
      A_Name: res?.A_Name || '',
      A_Street: res?.A_Street || '',
      A_City: res?.A_City || '',
      A_State: res?.A_State || '',
      A_Country: res?.A_Country || '',
      swiftCode: res?.SwiftCode || '',
      creditCardType: res?.CreditCardType?.identifier || '',
      creditCardTypeId: res?.CreditCardType?.id || '',
      bankAccount: res?.C_BankAccount_ID?.identifier || '',
      bankAccountId: res?.C_BankAccount_ID?.id || '',
      trxType: res?.TrxType?.identifier || '',
      trxTypeId: res?.TrxType?.id || '',
      tenderType: res?.TenderType?.identifier || '',
      tenderTypeId: res?.TenderType?.id || '',
      currency: res?.C_Currency_ID?.identifier || '',
      currencyId: res?.C_Currency_ID?.id || '',
      docType: res?.C_DocType_ID?.identifier || '',
      docTypeId: res?.C_DocType_ID?.id || '',
      order: res?.C_Order_ID?.identifier || '',
      orderId: res?.C_Order_ID?.id || '',
      invoice: res?.C_Invoice_ID?.identifier || '',
      invoiceId: res?.C_Invoice_ID?.id || '',
      docStatus: res?.DocStatus?.identifier || 'Draft',
      docStatusId: res?.DocStatus?.id || 'DR',
      partner: res?.C_BPartner_ID?.identifier || '',
      partnerId: res?.C_BPartner_ID?.id || '',
      charge: res?.C_Charge_ID?.identifier || '',
      chargeId: res?.C_Charge_ID?.id || '',
      project: res?.C_Project_ID?.identifier || '',
      projectId: res?.C_Project_ID?.id || '',
      campaign: res?.C_Campaign_ID?.identifier || '',
      campaignId: res?.C_Campaign_ID?.id || '',
      processing: false,
      alert: {
        status: '',
        message: '',
        processing: false
      }
    }
  }
}
onMounted(retrieve)

const printReport = async (fileType) => {
  const response = await $fetch('/api/payments/'+route.params.id+'/print/'+fileType, {
    headers: useRequestHeaders(['cookie'])
  })
  if(response) {
    let mimeType = ''
    let blob = new Blob([])
    if(fileType === 'PDF') {
      mimeType = 'application/pdf'
      const base64Response = await fetch(`data:${mimeType};base64,${response.reportFile}`);
      blob = await base64Response.blob();
    } else if(fileType === 'HTML') {
      mimeType = 'text/html'
      blob = new Blob([atob(response.exportFile)], {type: mimeType})
    } else if(fileType === 'CSV') {
      mimeType = 'text/csv'
      blob = new Blob([atob(response.exportFile)], {type: mimeType})
    } else if(fileType === 'XLSX') {
      mimeType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
      blob = new Blob([atob(response.exportFile)], {type: mimeType})
    } else if(fileType === 'XLS') {
      mimeType = 'application/vnd.ms-excel'//data:application/octet-stream;base64
      blob = new Blob([atob(response.exportFile)], {type: mimeType})
    }
    const blobUrl = URL.createObjectURL(blob)
    open(blobUrl, '_blank')
  }
}

const back = () => {
  router.push('/sales/payments')
}
const print = () => {
  router.push('/sales/payments/'+route.params.id+'/print')
}
const edit = () => {
  router.push(`/sales/payments/${route.params.id}/edit`)
}
const destroy = async () => {
  const confirmation = confirm('Are you sure want to delete this record?')
  if(confirmation) {
    await $fetch('/api/payments/'+route.params.id, {
      method: 'DELETE',
      headers: useRequestHeaders(['cookie'])
    })
    router.push(`/sales/payments`)
  }
}

const dropDownHandler = (e) => {
  if(e.target.parentElement.classList.contains('show')) {
    e.target.parentElement.classList.remove('show')
  } else {
    e.target.parentElement.classList.add('show')
  }
}

const dropItemHandler = (e) => {
  if(e.target.parentElement.parentElement.classList.contains('show')) {
    e.target.parentElement.parentElement.classList.remove('show')
  } else {
    e.target.parentElement.parentElement.classList.add('show')
  }
}

const breadCrumb = computed(() => ([
  { link: '#', text: 'Sales'},
  { link: '/sales/payments', text: 'Payments'},
  { link: '#', text: 'View Payment Details', active: true}
]))
</script>

<template>
  <Head>
    <Title>View Payment Details</Title>
  </Head>

  <NuxtLayout name="new-dash">
    <NewBreadCrumb :items="breadCrumb" />
    <div>
      <div class="banner">
        <div class="d-flex justify-between mb-3">
          <h4></h4>
          <div class="d-flex gap-0.75rem">
            <div>
              <button type="button" @click="back" class="button">
                <span class="tf-icon ti ti-chevron-left ti-xs me-1 color-inherit"></span> Back
              </button>
            </div>
            <div class="dropDown">
              <button type="button" class="button dropDownToggler" @click="dropDownHandler">
                <span class="tf-icon ti ti-settings ti-xs me-1 color-inherit"></span> Action
              </button>
              <div class="dropDownBackdrop" @click="dropDownHandler"></div>
              <div class="dropDownMenu dropDownRight mnw-80px">
                <span class="dropDownItem" @click="dropItemHandler($event); edit();">Edit</span>
                <span class="dropDownItem" @click="dropItemHandler($event); destroy();">Delete</span>
              </div>
            </div>
            <div>
              <button type="button" @click="print" class="button">
                <span class="tf-icon ti ti-file-invoice ti-xs me-1 color-inherit"></span> Print Preview
              </button>
            </div>
            <div class="dropDown">
              <button type="button" class="button dropDownToggler" @click="dropDownHandler">
                <span class="tf-icon ti ti-file-export ti-xs me-1 color-inherit"></span> Print Report
              </button>
              <div class="dropDownBackdrop" @click="dropDownHandler"></div>
              <div class="dropDownMenu dropDownRight">
                <span class="dropDownItem" @click="dropItemHandler($event); printReport('PDF');">Print Report in PDF</span>
                <span class="dropDownItem" @click="dropItemHandler($event); printReport('HTML');">Print Report in HTML</span>
                <span class="dropDownItem" @click="dropItemHandler($event); printReport('CSV');">Print Report in CSV</span>
                <span class="dropDownItem" @click="dropItemHandler($event); printReport('XLSX');">Print Report in XLSX</span>
                <span class="dropDownItem" @click="dropItemHandler($event); printReport('XLS');">Print Report in XLS</span>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div class="columns is-desktop">
            <div class="column is-half d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Tenant</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.client }}</div>
            </div>
            <div class="column is-half d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Organization</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.organization }}</div>
            </div>
          </div>
          <div class="columns is-desktop">
            <div class="column is-half d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Document Number</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.documentNo }}</div>
            </div>
            <div class="column is-half d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Bank Account</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.bankAccount }}</div>
            </div>
          </div>
          <div class="columns is-desktop">
            <div class="column is-half d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Date Transaction</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.dateTrx }}</div>
            </div>
            <div class="column is-half d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Date Account</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.dateAcct }}</div>
            </div>
          </div>
          <div class="columns is-desktop">
            <div class="column is-half d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Tender Type</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.tenderType }}</div>
            </div>
            <div class="column is-half d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Document Type</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.docType }}</div>
            </div>
          </div>
          <div class="columns is-desktop">
            <!--<div class="column is-half d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Document Type</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.docType }}</div>
            </div>-->
            <div class="column is-half d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Business Partner</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.partner }}</div>
            </div>
          </div>
          <div class="columns is-desktop">
            <div class="column is-half d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Order</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.order }}</div>
            </div>
            <div class="column is-half d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Invoice</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.invoice }}</div>
            </div>
          </div>
          <div class="columns is-desktop">
            <div class="column is-half d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Currency</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.currency }}</div>
            </div>
            <div class="column is-half d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Charge</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.charge }}</div>
            </div>
          </div>
          <div class="columns is-desktop">
            <div class="column is-half d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Project</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.project }}</div>
            </div>
            <div class="column is-half d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Campaign</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.campaign }}</div>
            </div>
          </div>
          <div class="columns is-desktop">
            <div class="column is-half d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Credit Card Number</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.creditCardNumber }}</div>
            </div>
            <div class="column is-half d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>CVV</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.creditCardVV }}</div>
            </div>
          </div>
          <div class="columns is-desktop">
            <div class="column is-half d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>CC Month Expiration</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.creditCardExpMM }}</div>
            </div>
            <div class="column is-half d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>CC Year Expiration</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.creditCardExpYY }}</div>
            </div>
          </div>
          <div class="columns is-desktop">
            <div class="column is-half d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Tax Amount</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.taxAmt }}</div>
            </div>
            <div class="column is-half d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Discount Amount</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.discountAmt }}</div>
            </div>
          </div>
          <div class="columns is-desktop">
            <div class="column is-half d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Pay Amount</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.payAmt }}</div>
            </div>
            <div class="column is-half d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Write Off Amount</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.writeOffAmt }}</div>
            </div>
          </div>
          <div class="columns is-desktop">
            <div class="column is-half d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Over Under Amount</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.overUnderAmt }}</div>
            </div>
            <div class="column is-half d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Charge Amount</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.chargeAmt }}</div>
            </div>
          </div>
          <div class="columns is-desktop">
            <div class="column is-half d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>R CVV2 Match</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.R_CVV2Match }}</div>
            </div>
            <div class="column is-half d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Processed On</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.processedOn }}</div>
            </div>
          </div>
          <div class="columns is-desktop">
            <div class="column is-half d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Routing No</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.routingNo }}</div>
            </div>
            <div class="column is-half d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Account No</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.accountNo }}</div>
            </div>
          </div>
          <div class="columns is-desktop">
            <div class="column is-half d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Account Name</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.A_Name }}</div>
            </div>
            <div class="column is-half d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Account EMail</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.A_EMail }}</div>
            </div>
          </div>
          <div class="columns is-desktop">
            <div class="column is-half d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Account Street</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.A_Street }}</div>
            </div>
            <div class="column is-half d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Account City</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.A_City }}</div>
            </div>
          </div>
          <div class="columns is-desktop">
            <div class="column is-half d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Account State</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.A_State }}</div>
            </div>
            <div class="column is-half d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Account Country</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.A_Country }}</div>
            </div>
          </div>
          <div class="columns is-desktop">
            <div class="column is-half d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Account Zip</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.A_Zip }}</div>
            </div>
            <div class="column is-half d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Micr</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.micr }}</div>
            </div>
          </div>
          <div class="columns is-desktop">
            <div class="column is-half d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Account Ident DL</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.A_Ident_DL }}</div>
            </div>
            <div class="column is-half d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Account Ident SSN</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.A_Ident_SSN }}</div>
            </div>
          </div>
          <div class="columns is-desktop">
            <div class="column is-half d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Voice Auth Code</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.voiceAuthCode }}</div>
            </div>
            <div class="column is-half d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Original Transaction ID</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.orig_TrxID }}</div>
            </div>
          </div>
          <div class="columns is-desktop">
            <div class="column is-half d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Check No</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.checkNo }}</div>
            </div>
            <div class="column is-half d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Swift Code</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.swiftCode }}</div>
            </div>
          </div>
          <div class="columns is-desktop">
            <div class="column is-half d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Document Status</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.docStatus }}</div>
            </div>
            <div class="column is-half d-flex gap-10px">
              <div class="w-150px d-inlineFlex justify-between gap-10px mb-2">
                <strong>Status</strong>
                <strong>:</strong>
              </div>
              <div class="d-flex flexWrap-wrap gap-10px">
                <div class="check">
                  <input type="checkbox" v-model="form.isActive" class="checkInput" id="isActive" :checked="form.isActive" disabled>
                  <label class="checkLabel" for="isActive">Active</label>
                </div>
                <div class="check">
                  <input type="checkbox" v-model="form.isApproved" class="checkInput" id="isApproved" :checked="form.isApproved" disabled>
                  <label class="checkLabel" for="isApproved">Approved</label>
                </div>
                <div class="check">
                  <input type="checkbox" v-model="form.processed" class="checkInput" id="processed" :checked="form.processed" disabled>
                  <label class="checkLabel" for="processed">Processed</label>
                </div>
                <div class="check">
                  <input type="checkbox" v-model="form.isReconciled" class="checkInput" id="isReconciled" :checked="form.isReconciled" disabled>
                  <label class="checkLabel" for="isReconciled">Reconciled</label>
                </div>
                <div class="check">
                  <input type="checkbox" v-model="form.isAllocated" class="checkInput" id="isAllocated" :checked="form.isAllocated" disabled>
                  <label class="checkLabel" for="isAllocated">Allocated</label>
                </div>
                <div class="check">
                  <input type="checkbox" v-model="form.isOnline" class="checkInput" id="isOnline" :checked="form.isOnline" disabled>
                  <label class="checkLabel" for="isOnline">Online</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 class="check">
                  <input type="checkbox" v-model="form.isOverUnderPayment" class="checkInput" id="isOverUnderPayment" :checked="form.isOverUnderPayment" disabled>
                  <label class="checkLabel" for="isOverUnderPayment">Over Under Payment</label>
                </div>
                <div class="check">
                  <input type="checkbox" v-model="form.isSelfService" class="checkInput" id="isSelfService" :checked="form.isSelfService" disabled>
                  <label class="checkLabel" for="isSelfService">Self Service</label>
                </div>
                <div class="check">
                  <input type="checkbox" v-model="form.isDelayedCapture" class="checkInput" id="isDelayedCapture" :checked="form.isDelayedCapture" disabled>
                  <label class="checkLabel" for="isDelayedCapture">Delayed Capture</label>
                </div>
                <div class="check">
                  <input type="checkbox" v-model="form.isPrepayment" class="checkInput" id="isPrepayment" :checked="form.isPrepayment" disabled>
                  <label class="checkLabel" for="isPrepayment">Prepayment</label>
                </div>
                <div class="check">
                  <input type="checkbox" v-model="form.isVoided" class="checkInput" id="isVoided" :checked="form.isVoided" disabled>
                  <label class="checkLabel" for="isVoided">Voided</label>
                </div>
                <div class="check">
                  <input type="checkbox" v-model="form.isOverrideCurrencyRate" class="checkInput" id="isOverrideCurrencyRate" :checked="form.isOverrideCurrencyRate" disabled>
                  <label class="checkLabel" for="isOverrideCurrencyRate">Override Currency Rate</label>
                </div>
              </div>
            </div>
          </div>
          <div class="columns is-desktop">
            <div class="column is-half">
              <div class="w-150px d-flex justify-between gap-10px mb-2">
                <strong>Description</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.description }}</div>
            </div>
          </div>
          
          <div class="m-3">
            <div>
              <SalesPaymentDetailRecord action="view" :info="form" tab="allocate" />
            </div>
          </div>

        </div>
      </div>

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