<script setup>
import { date } from 'alga-js'
import { toast } from 'bulma-toast'

const router = useRouter()
const printPreview = usePrintPreview()
const printParam = usePrintParam()
const quickView = useQuickView()
const quickViewParam = useQuickViewParam()

const props = defineProps({
  modelName: String 
})

const showQuickViewContent = ref(false)
const handleQuickViewContent = () => {
  if(quickView.value === 'invoice') {
    setTimeout(() => {
      showQuickViewContent.value = true
    }, 400)
  }
}
onMounted(handleQuickViewContent)
watch(quickView, handleQuickViewContent)

const viewHandler = () => {
  router.push(`/sales/invoices/${quickViewParam.value.id}/view`)
  setTimeout(() => {
    quickView.value = ''
    quickViewParam.value = {}
  }, 400)
}
const closeQuickView = () => {
  showQuickViewContent.value = false
  setTimeout(() => {
    quickView.value = ''
    quickViewParam.value = {}
  }, 400)
}
const printHandler = () => {
  printParam.value = quickViewParam.value
  printPreview.value = true
  closeQuickView()
}

const setDocumentAction = async (docAction) => {
  if(quickViewParam.value?.id) {
    const res = await $fetch('/api/invoices/'+quickViewParam.value.id+'/document-action', {
      method: 'POST',
      headers: useRequestHeaders(['cookie']),
      body: {
        documentAction: docAction
      }
    })
    if(res) {
      toast({
        message: 'Document has been successfully set to '+docAction+' status.',
        type: 'is-success',
        duration: 2000
      })
      location.reload()
    } else {
      toast({
        message: 'Document failed to set to '+docAction+' status.',
        type: 'is-danger',
        duration: 2000
      })
    }
  }
}
</script>

<template>
  <div class="offCanvas right" :class="{'active': quickView === 'invoice'}" :style="{display: quickView === 'invoice' ? 'block' : 'none'}">
    <div class="offCanvasBackdrop" @click.self="closeQuickView"></div>
    <Transition name="slideRight">
    <div v-if="showQuickViewContent" class="offCanvasContent">
      <div class="offCanvasHeader">
        <h3 class="offCanvasTitle">Invoice Details</h3>
        <div class="cursor-pointer" @click="closeQuickView">
          <span class="tf-icon ti ti-x ti-sm me-1"></span>
        </div>
      </div>
      <div class="offCanvasBody">
        <div class="mb-2 d-flex justify-between gap-10px">
          <strong>Tenant</strong>
          <div class="textAlign-right">{{ quickViewParam.client }}</div>
        </div>
        <div class="mb-2 d-flex justify-between gap-10px">
          <strong>Organization</strong>
          <div class="textAlign-right">{{ quickViewParam.organization }}</div>
        </div>
        <div class="mb-2 d-flex justify-between gap-10px">
          <strong>Document Number</strong>
          <div class="textAlign-right">{{ quickViewParam.documentNo }}</div>
        </div>
        <div class="mb-2 d-flex justify-between gap-10px">
          <strong>Date Ordered</strong>
          <div class="textAlign-right">{{ quickViewParam.dateOrdered }}</div>
        </div>
        <div class="mb-2 d-flex justify-between gap-10px">
          <strong>Date Invoiced</strong>
          <div class="textAlign-right">{{ quickViewParam.dateInvoiced }}</div>
        </div>
        <div class="mb-2 d-flex justify-between gap-10px">
          <strong>Date Account</strong>
          <div class="textAlign-right">{{ quickViewParam.dateAcct }}</div>
        </div>
        <div class="mb-2 d-flex justify-between gap-10px">
          <strong>Freight Amount</strong>
          <div class="textAlign-right">{{ quickViewParam.freightAmt }}</div>
        </div>
        <div class="mb-2 d-flex justify-between gap-10px">
          <strong>Total Lines</strong>
          <div class="textAlign-right">{{ quickViewParam.totalLines }}</div>
        </div>
        <div class="mb-2 d-flex justify-between gap-10px">
          <strong>Grand Total</strong>
          <div class="textAlign-right">{{ quickViewParam.grandTotal }}</div>
        </div>
        <div class="mb-2 d-flex justify-between gap-10px">
          <strong>Charge Amount</strong>
          <div class="textAlign-right">{{ quickViewParam.chargeAmt }}</div>
        </div>
        <div class="mb-2 d-flex justify-between gap-10px">
          <strong>Processed On</strong>
          <div class="textAlign-right">{{ quickViewParam.processedOn }}</div>
        </div>
        <div class="mb-2 d-flex justify-between gap-10px">
          <strong>Document Status</strong>
          <div class="textAlign-right">{{ quickViewParam.docStatus }}</div>
        </div>
        <div class="mb-2 d-flex justify-between gap-10px">
          <strong>Document Type</strong>
          <div class="textAlign-right">{{ quickViewParam.docType }}</div>
        </div>
        <div class="mb-2 d-flex justify-between gap-10px">
          <strong>Document Type Target</strong>
          <div class="textAlign-right">{{ quickViewParam.docTypeTarget }}</div>
        </div>
        <div class="mb-2 d-flex justify-between gap-10px">
          <strong>Document Base Type</strong>
          <div class="textAlign-right">{{ quickViewParam.docBaseType }}</div>
        </div>
        <div class="mb-2 d-flex justify-between gap-10px">
          <strong>Sales Representative</strong>
          <div class="textAlign-right">{{ quickViewParam.salesRep }}</div>
        </div>
        <div class="mb-2 d-flex justify-between gap-10px">
          <strong>User</strong>
          <div class="textAlign-right">{{ quickViewParam.user }}</div>
        </div>
        <div class="d-flex justify-between gap-10px">
          <strong>Payment Term</strong>
          <div class="textAlign-right">{{ quickViewParam.paymentTerm }}</div>
        </div>
        <div class="mb-2 d-flex justify-between gap-10px">
          <strong>Currency</strong>
          <div class="textAlign-right">{{ quickViewParam.currency }}</div>
        </div>
        <div class="mb-2 d-flex justify-between gap-10px">
          <strong>Invoice Rule</strong>
          <div class="textAlign-right">{{ quickViewParam.invoiceRule }}</div>
        </div>
        <div class="mb-2 d-flex justify-between gap-10px">
          <strong>Delivery Via Rule</strong>
          <div class="textAlign-right">{{ quickViewParam.deliveryViaRule }}</div>
        </div>
        <div class="mb-2 d-flex justify-between gap-10px">
          <strong>Delivery Rule</strong>
          <div class="textAlign-right">{{ quickViewParam.deliveryRule }}</div>
        </div>
        <div class="mb-2 d-flex justify-between gap-10px">
          <strong>Priority Rule</strong>
          <div class="textAlign-right">{{ quickViewParam.priorityRule }}</div>
        </div>
        <div class="mb-2 d-flex justify-between gap-10px">
          <strong>Freight Cost Rule</strong>
          <div class="textAlign-right">{{ quickViewParam.freightCostRule }}</div>
        </div>
        <div class="mb-2 d-flex justify-between gap-10px">
          <strong>Payment Rule</strong>
          <div class="textAlign-right">{{ quickViewParam.paymentRule }}</div>
        </div>
        <div class="mb-2 d-flex justify-between gap-10px">
          <strong>Warehouse</strong>
          <div class="textAlign-right">{{ quickViewParam.warehouse }}</div>
        </div>
        <div class="mb-2 d-flex justify-between gap-10px">
          <strong>Price List</strong>
          <div class="textAlign-right">{{ quickViewParam.priceList }}</div>
        </div>
        <div class="mb-2 d-flex justify-between gap-10px">
          <strong>Partner</strong>
          <div class="textAlign-right">{{ quickViewParam.partner }}</div>
        </div>
        <div class="mb-2 d-flex justify-between gap-10px">
          <strong>Partner Location</strong>
          <div class="textAlign-right">{{ quickViewParam.partnerLocation }}</div>
        </div>
        <div class="mb-2 d-flex justify-between gap-10px">
          <strong>Cash Line</strong>
          <div class="textAlign-right">{{ quickViewParam.cashLine }}</div>
        </div>
        <div class="mb-2 d-flex justify-between gap-10px">
          <strong>Order</strong>
          <div class="textAlign-right">{{ quickViewParam.order }}</div>
        </div>
        <div class="mb-2 d-flex justify-between gap-10px">
          <strong>Description</strong>
          <div class="textAlign-right">{{ quickViewParam.description }}</div>
        </div>
      </div>
      <div class="offCanvasFooter">
        <div></div>
        <div class="d-flex justify-flexEnd gap-5px">
          <button type="button" class="button" @click="viewHandler">More</button>
          <button type="button" class="button" @click="printHandler">Print Preview</button>
          <button v-if="quickViewParam.docStatusId !== 'VO'" type="button" class="button" @click="setDocumentAction('VO')">Void</button>
          <button type="button" class="button" @click="closeQuickView">Close</button>
        </div>
      </div>
    </div>
    </Transition>
  </div>
</template>

<style scoped>

</style>