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

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 user = useCookie('logship_user')
const userId = useCookie('logship_user_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 || '',
  name: props.modelValue.name || '',
  name2: props.modelValue.name2 || '',
  value: props.modelValue.value || '',
  description: props.modelValue.description || '',
  salesVolume: props.modelValue.salesVolume || 0,
  numberEmployees: props.modelValue.numberEmployees || 0,
  isActive: props.modelValue.isActive ?? true,
  isSummary: props.modelValue.isSummary ?? false,
  isVendor: props.modelValue.isVendor ?? false,
  isCustomer: props.modelValue.isCustomer ?? false,
  isProspect: props.modelValue.isProspect ?? false,
  soCreditLimit: props.modelValue.soCreditLimit || 0,
  soCreditUsed: props.modelValue.soCreditUsed || 0,
  acqusitionCost: props.modelValue.acqusitionCost || 0,
  potentialLifeTimeValue: props.modelValue.potentialLifeTimeValue || 0,
  actualLifeTimeValue: props.modelValue.actualLifeTimeValue || 0,
  shareOfCustomer: props.modelValue.shareOfCustomer || 0,
  isEmployee: props.modelValue.isEmployee ?? false,
  isSalesRep: props.modelValue.isSalesRep ?? false,
  isOneTime: props.modelValue.isOneTime ?? false,
  isTaxExempt: props.modelValue.isTaxExempt ?? false,
  isDiscountPrinted: props.modelValue.isDiscountPrinted ?? false,
  sendEMail: props.modelValue.sendEMail ?? false,
  EMail: props.modelValue.EMail || '',
  totalOpenBalance: props.modelValue.totalOpenBalance || 0,
  isPOTaxExempt: props.modelValue.isPOTaxExempt ?? false,
  isManufacturer: props.modelValue.isManufacturer ?? false,
  is1099Vendor: props.modelValue.is1099Vendor ?? false,
  firstSale: props.modelValue.firstSale || date.now('date'),
  poReference: props.modelValue.poReference || '',
  referenceNo: props.modelValue.referenceNo || '',
  rating: props.modelValue.rating || '',
  taxID: props.modelValue.taxID || '',
  URL: props.modelValue.URL || '',
  NAICS: props.modelValue.NAICS || '',
  DUNS: props.modelValue.DUNS || '',
  documentCopies: props.modelValue.documentCopies || 0,
  soDescription: props.modelValue.soDescription || '',
  flatDiscount: props.modelValue.flatDiscount || 0,
  shelfLifeMinPct: props.modelValue.shelfLifeMinPct || 0,
  dunningGrace: props.modelValue.dunningGrace || date.now('date'),
  isFulfillmentCustomer: props.modelValue.isFulfillmentCustomer ?? false,
  isAccountLogShip: props.modelValue.isAccountLogShip ?? false,
  isAccountingWarehouseVolume: props.modelValue.isAccountingWarehouseVolume ?? false,
  logshipmonthlyfee: props.modelValue.logshipmonthlyfee || 0,
  volumeqm3price: props.modelValue.volumeqm3price || 0,
  accoutingwarehouserentstarts: props.modelValue.accoutingwarehouserentstarts || '',
  fulfillmentOrderBaseprice: props.modelValue.fulfillmentOrderBaseprice ?? 0,
  fulfillmentOrderPickprice: props.modelValue.fulfillmentOrderPickprice ?? 0,
  fulfillmentOrderQtyPickfree: props.modelValue.fulfillmentOrderQtyPickfree ?? 0,
  fulfillmentOrderBaseprice2: props.modelValue.fulfillmentOrderBaseprice2 ?? 0,
  fulfillmentOrderBaseprice3: props.modelValue.fulfillmentOrderBaseprice3 ?? 0,
  fulfillmentOrderReturnBaseprice: props.modelValue.fulfillmentOrderReturnBaseprice ?? 0,
  fulfillmentOrderReturnPickprice: props.modelValue.fulfillmentOrderReturnPickprice ?? 0,
  deliveryRule: props.modelValue.deliveryRule || '',
  deliveryRuleId: props.modelValue.deliveryRuleId || '',
  deliveryViaRule: props.modelValue.deliveryViaRule || '',
  deliveryViaRuleId: props.modelValue.deliveryViaRuleId || '',
  invoiceSchedule: props.modelValue.invoiceSchedule || '',
  invoiceScheduleId: props.modelValue.invoiceScheduleId || '',
  greeting: props.modelValue.greeting || '',
  greetingId: props.modelValue.greetingId || '',
  printFormat: props.modelValue.printFormat || '',
  printFormatId: props.modelValue.printFormatId || '',
  salesRep: props.modelValue.salesRep || user.value?.Name || '',
  salesRepId: props.modelValue.salesRepId || user.value?.id || userId.value || '',
  paymentRulePO: props.modelValue.paymentRulePO || '',
  paymentRulePOId: props.modelValue.paymentRulePOId || '',
  soCreditStatus: props.modelValue.soCreditStatus || '',
  soCreditStatusId: props.modelValue.soCreditStatusId || '',
  partnerGroup: props.modelValue.partnerGroup || '',
  partnerGroupId: props.modelValue.partnerGroupId || '',
  poPriceList: props.modelValue.poPriceList || '',
  poPriceListId: props.modelValue.poPriceListId || '',
  poPaymentTerm: props.modelValue.poPaymentTerm || '',
  poPaymentTermId: props.modelValue.poPaymentTermId || '',
  languageId: props.modelValue.languageId || '',
  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 getOptions = ref({})
const setOptions = async (url, key) => {
  loading.value[key] = true
  const res = await $fetch('/api/'+url, {
    headers: useRequestHeaders(['cookie'])
  })
  if(res) {
    /*if(key === 'locations' && res?.records?.[0]) {
      form.value.partnerLocationId = String(res.records[0].id || '')
      form.value.partnerLocation = res.records[0].Name || ''
    }*/
    
    getOptions.value[key] = res
  }
  loading.value[key] = false
}

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(() => { //saveType = ''
  //form.value.alert.processing = true
  emit('update:modelValue', form.value)
  emit('save', form.value)
  /*if(props.modelValue.id) {
    emit('save', form.value, props.modelValue.id, saveType)
  } else {
    emit('save', form.value, '', saveType)
  }*/
})
</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 === 'partner'">
        <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">Name *</label>
                  <input type="text" v-model="form.name" class="input" @keyup="save" />
                </div>

                <label class="label d-block mt-2">Business Partner Group</label>
                <ClientOnly>
                  <SelectBox v-model="form.partnerGroupId" :options="getOptions?.['partner_groups']?.records || [{id: form.partnerGroupId, Name: form.partnerGroup}]" prop="Name" dataprop="id" datatype="string" :size="5" @click="setOptions('models/c_bp_group', 'partner_groups')" @change="save" :loading="loading?.['partner_groups'] ?? true" />
                </ClientOnly>

                <label class="label d-block mt-2">Reference No</label>
                <input type="text" v-model="form.referenceNo" class="input" @keyup="save" />

                <label class="label d-block mt-2">Credit Status</label>
                <select v-model="form.soCreditStatusId" class="select" @change="save">
                  <option value="H">Credit Hold</option>
                  <option value="O">Credit OK</option>
                  <option value="S">Credit Stop</option>
                  <option value="W">Credit Watch</option>
                  <option value="X">No Credit Check</option>
                </select>

                <label class="label d-block mt-2">Credit Limit *</label>
                <input type="text" v-model="form.soCreditLimit" class="input" @keyup="save" />

                <label class="label d-block mt-2">Tax ID</label>
                <input type="text" v-model="form.taxID" class="input" @keyup="save" />
              </div>
              <div class="column is-half">
                <div class="legend">
                  <label class="label">2nd Name</label>
                  <input type="text" v-model="form.name2" class="input" @keyup="save" />
                </div>

                <label class="label d-block mt-2">Search Key</label>
                <input type="text" v-model="form.value" class="input" @keyup="save" />

                <label class="label d-block mt-2">Representative/Agent</label>
                <ClientOnly>
                  <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('models/ad_user', 'sales_reps')" @change="save" :loading="loading?.['sales_reps'] ?? true" />
                </ClientOnly>

                <label class="label d-block mt-2">Open Balance</label>
                <input type="text" v-model="form.totalOpenBalance" class="input" readonly />

                <label class="label d-block mt-2">Rating</label>
                <input type="text" v-model="form.rating" class="input" @keyup="save" />

                <label class="label d-block mt-2">URL</label>
                <input type="text" v-model="form.URL" class="input" @keyup="save" />
              </div>
            </div>

            <label class="label d-block mt-2">Description</label>
            <textarea v-model="form.description" class="input" @keyup="save"></textarea>
          </div>
          <div class="column is-one-third">
            <div class="legend">
              <label class="label">Organization *</label>
              <input v-if="form.id !== ''" type="text" :value="form.organization" class="input" readonly />
              <ClientOnly v-else>
                <SelectBox 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" />
              </ClientOnly>
            </div>

            <div class="legend mt-2">
              <label class="label">Tenant *</label>
              <input type="text" :value="clientName" class="input" readonly />
            </div>

            <div class="legend mt-2">
              <label class="label">Email *</label>
              <input type="text" v-model="form.EMail" class="input" @change="save" />
            </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.isSummary" class="checkInput" id="isSummary" :checked="form.isSummary" @change="save">
                <label class="checkLabel" for="isSummary">Summary Level</label>
              </div>
              <div class="check">
                <input type="checkbox" v-model="form.isEmployee" class="checkInput" id="isEmployee" :checked="form.isEmployee" @change="save">
                <label class="checkLabel" for="isEmployee">Employee</label>
              </div>
              <div class="check">
                <input type="checkbox" v-model="form.isProspect" class="checkInput" id="isProspect" :checked="form.isProspect" @change="save">
                <label class="checkLabel" for="isProspect">Prospect</label>
              </div>
              <div class="check">
                <input type="checkbox" v-model="form.isSalesRep" class="checkInput" id="isSalesRep" :checked="form.isSalesRep" @change="save">
                <label class="checkLabel" for="isSalesRep">Sales Representative</label>
              </div>
              <div class="check">
                <input type="checkbox" v-model="form.isTaxExempt" class="checkInput" id="isTaxExempt" :checked="form.isTaxExempt" @change="save">
                <label class="checkLabel" for="isTaxExempt">SO Tax Exempt</label>
              </div>
              <div class="check">
                <input type="checkbox" v-model="form.isPOTaxExempt" class="checkInput" id="isPOTaxExempt" :checked="form.isPOTaxExempt" @change="save">
                <label class="checkLabel" for="isPOTaxExempt">PO Tax Exempt</label>
              </div>
              <div class="check">
                <input type="checkbox" v-model="form.isCustomer" class="checkInput" id="isCustomer" :checked="form.isCustomer" @change="save">
                <label class="checkLabel" for="isCustomer">Customer</label>
              </div>
              <div class="check">
                <input type="checkbox" v-model="form.isVendor" class="checkInput" id="isVendor" :checked="form.isVendor" @change="save">
                <label class="checkLabel" for="isVendor">Vendor</label>
              </div>
              <div class="check">
                <input type="checkbox" v-model="form.isFulfillmentCustomer" class="checkInput" id="isFulfillmentCustomer" :checked="form.isFulfillmentCustomer" @change="save">
                <label class="checkLabel" for="isFulfillmentCustomer">Fulfillment Customer</label>
              </div>
              <div class="check">
                <input type="checkbox" v-model="form.isAccountLogShip" class="checkInput" id="isAccountLogShip" :checked="form.isAccountLogShip" @change="save">
                <label class="checkLabel" for="isAccountLogShip">Account LogShip</label>
              </div>
              <div class="check">
                <input type="checkbox" v-model="form.isAccountingWarehouseVolume" class="checkInput" id="isAccountingWarehouseVolume" :checked="form.isAccountingWarehouseVolume" @change="save">
                <label class="checkLabel" for="isAccountingWarehouseVolume">Accounting Warehouse Volume</label>
              </div>
            </div>
          </div>
        </div>
      </template>
      <template v-else-if="tab === 'customer'">
        <template v-if="form.isCustomer">
          <div class="columns is-desktop">
            <div class="column is-one-third">
              <label class="label d-block mt-2">Invoice Rule</label>
              <select v-model="form.invoiceRuleId" class="select" @change="save">
                <option value="D">After Delivery</option>
                <option value="O">After Order delivered</option>
                <option value="S">Customer Schedule after Delivery</option>
                <option value="I">Immediate</option>
              </select>

              <label class="label d-block mt-2">Invoice Schedule</label>
              <ClientOnly>
                <SelectBox v-model="form.invoiceScheduleId" :options="getOptions?.['invoice_schedules']?.records || [{id: form.invoiceScheduleId, Name: form.invoiceSchedule}]" prop="Name" dataprop="id" datatype="string" :size="5" @click="setOptions('models/c_invoiceschedule', 'invoice_schedules')" @change="save" :loading="loading?.['invoice_schedules'] ?? true" />
              </ClientOnly>

              <label class="label d-block mt-2">Price List</label>
              <ClientOnly>
                <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('models/m_pricelist', 'price_lists')" @change="save" :loading="loading?.['price_lists'] ?? true" />
              </ClientOnly>

              <label class="label d-block mt-2">Flat Discount %</label>
              <input type="text" v-model="form.flatDiscount" class="input" @keyup="save" />
            </div>
            <div class="column is-one-third">
              <label class="label d-block mt-2">Payment Rule</label>
              <select v-model="form.paymentRuleId" class="select" @change="save">
                <option value="B">Cash</option>
                <option value="S">Check</option>
                <option value="K">Credit Card</option>
                <option value="D">Direct Debit</option>
                <option value="I">Direct Deposit</option>
                <option value="P">On Credit</option>
              </select>

              <label class="label d-block mt-2">Delivery Rule</label>
              <select v-model="form.deliveryRuleId" class="select" @change="save">
                <option value="R">After Payment</option>
                <option value="A">Availability</option>
                <option value="L">Complete Line</option>
                <option value="O">Complete Order</option>
                <option value="F">Force</option>
                <option value="M">Manual</option>
              </select>

              <label class="label d-block mt-2">Discount Schema</label>
              <ClientOnly>
                <SelectBox v-model="form.discountSchemaId" :options="getOptions?.['discount_schemas']?.records || [{id: form.discountSchemaId, Name: form.discountSchema}]" prop="Name" dataprop="id" datatype="string" :size="5" @click="setOptions('models/m_discountschema', 'discount_schemas')" @change="save" :loading="loading?.['discount_schemas'] ?? true" />
              </ClientOnly>

              <label class="label d-block mt-2">Dunning Grace Date</label>
              <DatePicker v-model="form.dunningGrace" />
            </div>
            <div class="column is-one-third">
              <label class="label d-block mt-2">Payment Term</label>
              <ClientOnly>
                <SelectBox v-model="form.paymentTermId" :options="getOptions?.['payment_terms']?.records || [{id: form.paymentTermId, Name: form.paymentTerm}]" prop="Name" dataprop="id" datatype="string" :size="5" @click="setOptions('models/c_paymentterm', 'payment_terms')" @change="save" :loading="loading?.['payment_terms'] ?? true" />
              </ClientOnly>

              <label class="label d-block mt-2">Delivery Via</label>
              <select v-model="form.deliveryViaRuleId" class="select" @change="save">
                <option value="D">Delivery</option>
                <option value="P">Pickup</option>
                <option value="S">Shipper</option>
              </select>

              <label class="label d-block mt-2">Dunning</label>
              <ClientOnly>
                <SelectBox v-model="form.dunningId" :options="getOptions?.['dunnings']?.records || [{id: form.dunningId, Name: form.dunning}]" prop="Name" dataprop="id" datatype="string" :size="5" @click="setOptions('models/c_dunning', 'dunnings')" @change="save" :loading="loading?.['dunnings'] ?? true" />
              </ClientOnly>

              <label class="label d-block mt-2">Min Shelf Life %</label>
              <input type="text" v-model="form.shelfLifeMinPct" class="input" @keyup="save" />
            </div>
          </div>
        </template>
      </template>
      <template v-else-if="tab === 'vendor'">
        <template v-if="form.isVendor">
          <div class="columns is-desktop">
            <div class="column is-one-third">
              <label class="label d-block mt-2">Payment Rule</label>
              <select v-model="form.paymentRulePOId" class="select" @change="save">
                <option value="B">Cash</option>
                <option value="S">Check</option>
                <option value="K">Credit Card</option>
                <option value="D">Direct Debit</option>
                <option value="I">Direct Deposit</option>
                <option value="P">On Credit</option>
              </select>

              <label class="label d-block mt-2">PO Discount Schema</label>
              <ClientOnly>
                <SelectBox v-model="form.poDiscountSchemaId" :options="getOptions?.['po_discount_schemas']?.records || [{id: form.poDiscountSchemaId, Name: form.poDiscountSchema}]" prop="Name" dataprop="id" datatype="string" :size="5" @click="setOptions('models/m_discountschema', 'po_discount_schemas')" @change="save" :loading="loading?.['po_discount_schemas'] ?? true" />
              </ClientOnly>
            </div>
            <div class="column is-one-third">
              <label class="label d-block mt-2">Payment Term</label>
              <ClientOnly>
                <SelectBox v-model="form.poPaymentTermId" :options="getOptions?.['po_payment_terms']?.records || [{id: form.poPaymentTermId, Name: form.poPaymentTerm}]" prop="Name" dataprop="id" datatype="string" :size="5" @click="setOptions('models/c_paymentterm', 'po_payment_terms')" @change="save" :loading="loading?.['po_payment_terms'] ?? true" />
              </ClientOnly>

              <label class="label d-block mt-2">PO Price List</label>
              <ClientOnly>
                <SelectBox v-model="form.poPriceListId" :options="getOptions?.['po_price_lists']?.records || [{id: form.poPriceListId, Name: form.poPriceList}]" prop="Name" dataprop="id" datatype="string" :size="5" @click="setOptions('models/m_pricelist', 'po_price_lists')" @change="save" :loading="loading?.['po_price_lists'] ?? true" />
              </ClientOnly>
            </div>
            <div class="column is-one-third">
              <label class="label d-block mb-2">Vendor Status</label>
              <div class="check">
                <input type="checkbox" v-model="form.isManufacturer" class="checkInput" id="isManufacturer" :checked="form.isManufacturer" @change="save">
                <label class="checkLabel" for="isManufacturer">Manufacturer</label>
              </div>
              <div class="check">
                <input type="checkbox" v-model="form.is1099Vendor" class="checkInput" id="is1099Vendor" :checked="form.is1099Vendor" @change="save">
                <label class="checkLabel" for="is1099Vendor">1099 Vendor</label>
              </div>
            </div>
          </div>
        </template>
      </template>
      <template v-else-if="tab === 'fulfillment-customer'">
        <template v-if="form.isFulfillmentCustomer">
          <div class="columns is-desktop">
            <div class="column is-half">
              <div class="legend">
                <UTooltip text="Base price charged for fulfillment order processing">
                  <template #default>
                    <label class="label cursor-help">Fulfillment Order Baseprice ℹ️</label>
                  </template>
                </UTooltip>
                <input type="text" v-model="form.fulfillmentOrderBaseprice" class="input" @keyup="save" />
              </div>

              <div class="legend mt-2">
                <UTooltip text="Base price charged for processing returned fulfillment orders">
                  <template #default>
                    <label class="label cursor-help">Fulfillment Order Return Baseprice ℹ️</label>
                  </template>
                </UTooltip>
                <input type="text" v-model="form.fulfillmentOrderReturnBaseprice" class="input" @keyup="save" />
              </div>

              <div class="legend mt-2">
                <UTooltip text="Secondary base price tier for fulfillment order processing">
                  <template #default>
                    <label class="label cursor-help">Fulfillment Order Baseprice 2 ℹ️</label>
                  </template>
                </UTooltip>
                <input type="text" v-model="form.fulfillmentOrderBaseprice2" class="input" @keyup="save" />
              </div>

              <div class="legend mt-2">
                <UTooltip text="Quantity threshold for free picking services on fulfillment orders">
                  <template #default>
                    <label class="label cursor-help">Fulfillment Order Qty Pickfree ℹ️</label>
                  </template>
                </UTooltip>
                <input type="text" v-model="form.fulfillmentOrderQtyPickfree" class="input" @keyup="save" />
              </div>
            </div>
            <div class="column is-half">
              <div class="legend">
                <UTooltip text="Price charged per item picked for fulfillment orders">
                  <template #default>
                    <label class="label cursor-help">Fulfillment Order Pickprice ℹ️</label>
                  </template>
                </UTooltip>
                <input type="text" v-model="form.fulfillmentOrderPickprice" class="input" @keyup="save" />
              </div>

              <div class="legend mt-2">
                <UTooltip text="Price charged per item picked for returned fulfillment orders">
                  <template #default>
                    <label class="label cursor-help">Fulfillment Order Return Pickprice ℹ️</label>
                  </template>
                </UTooltip>
                <input type="text" v-model="form.fulfillmentOrderReturnPickprice" class="input" @keyup="save" />
              </div>

              <div class="legend mt-2">
                <UTooltip text="Third tier base price for fulfillment order processing">
                  <template #default>
                    <label class="label cursor-help">Fulfillment Order Baseprice 3 ℹ️</label>
                  </template>
                </UTooltip>
                <input type="text" v-model="form.fulfillmentOrderBaseprice3" class="input" @keyup="save" />
              </div>

              <div class="legend mt-2">
                <UTooltip text="Monthly fee charged for LogShip services">
                  <template #default>
                    <label class="label cursor-help">LogShip Monthly Fee ℹ️</label>
                  </template>
                </UTooltip>
                <input type="number" v-model="form.logshipmonthlyfee" class="input" @keyup="save" />
              </div>

              <div class="legend mt-2">
                <UTooltip text="Price per cubic meter for volume-based warehouse storage">
                  <template #default>
                    <label class="label cursor-help">Volume QM3 Price ℹ️</label>
                  </template>
                </UTooltip>
                <input type="number" v-model="form.volumeqm3price" class="input" @keyup="save" />
              </div>

              <div class="legend mt-2">
                <UTooltip text="Start date for accounting warehouse rent charges">
                  <template #default>
                    <label class="label cursor-help">Accounting Warehouse Rent Starts ℹ️</label>
                  </template>
                </UTooltip>
                <DatePicker v-model="form.accoutingwarehouserentstarts" @handler="save" />
              </div>
            </div>
          </div>
        </template>
      </template>
      <template v-else-if="tab === 'preferences'">
        <div class="columns is-desktop">
          <div class="column is-one-third">
            <label class="label d-block">Order Reference</label>
            <input type="text" v-model="form.poReference" class="input" @keyup="save" />
          </div>
          <div class="column is-one-third">
            <label class="label d-block">Document Copies</label>
            <input type="text" v-model="form.documentCopies" class="input" @keyup="save" />
          </div>
          <div class="column is-one-third">
            <label class="label d-block">Printed</label>
            <div class="check">
              <input type="checkbox" v-model="form.isDiscountPrinted" class="checkInput" id="isDiscountPrinted" :checked="form.isDiscountPrinted" @change="save">
              <label class="checkLabel" for="isDiscountPrinted">Discount Printed</label>
            </div>
          </div>
        </div>

        <div class="columns is-desktop">
          <div class="column is-one-third">
            <label class="label d-block mb-2">Greeting</label>
            <ClientOnly>
              <SelectBox v-model="form.greetingId" :options="getOptions?.['greetings']?.records || [{id: form.greetingId, Name: form.greeting}]" prop="Name" dataprop="id" datatype="string" :size="5" @click="setOptions('models/c_greeting', 'greetings')" @change="save" :loading="loading?.['greetings'] ?? true" />
            </ClientOnly>
          </div>
          <div class="column is-one-third">
            <label class="label d-block mb-2">Invoice Print Format</label>
            <ClientOnly>
              <SelectBox v-model="form.printFormatId" :options="getOptions?.['print_formats']?.records || [{id: form.printFormatId, Name: form.printFormat}]" prop="Name" dataprop="id" datatype="string" :size="5" @click="setOptions('models/ad_printformat', 'print_formats')" @change="save" :loading="loading?.['print_formats'] ?? true" />
            </ClientOnly>
          </div>
          <div class="column is-one-third">
            <label class="label d-block mb-2">Language</label>
            <select v-model="form.languageId" class="select" @change="save">
              <option value="en_US">English (US)</option>
              <option value="es_CO">Spanish (Colombia)</option>
            </select>
          </div>
        </div>
        
        <label class="label d-block mb-2">Order Description</label>
        <textarea v-model="form.soDescription" class="input" @keyup="save"></textarea>
      </template>
      <template v-else-if="tab === 'sales'">
        <div class="columns is-desktop">
          <div class="column is-one-third">
            <label class="label d-block">Share</label>
            <input type="text" v-model="form.shareOfCustomer" class="input" @keyup="save" />

            <label class="label d-block mb-2">Sales Volume in</label>
            <input type="text" v-model="form.salesVolume" class="input" @keyup="save" />

            <label class="label d-block mb-2">Employees</label>
            <input type="text" v-model="form.numberEmployees" class="input" @keyup="save" />
          </div>
          <div class="column is-one-third">
            <label class="label d-block">Acquisition Cost</label>
            <input type="text" v-model="form.acqusitionCost" class="input" @keyup="save" />

            <label class="label d-block mb-2">First Sale</label>
            <DatePicker v-model="form.firstSale" @handler="save" />

            <label class="label d-block mb-2">NAICS</label>
            <input type="text" v-model="form.NAICS" class="input" @keyup="save" />
          </div>
          <div class="column is-one-third">
            <label class="label d-block">Potential Life Time Value</label>
            <input type="text" v-model="form.potentialLifeTimeValue" class="input" @keyup="save" />

            <label class="label d-block mb-2">Actual Life Time Value</label>
            <input type="text" v-model="form.actualLifeTimeValue" class="input" @keyup="save" />

            <label class="label d-block mb-2">D-U-N-S</label>
            <input type="text" v-model="form.DUNS" class="input" @keyup="save" />
          </div>
        </div>
      </template>

    </div>

  </div>
</template>