<script setup>
import { date, string } from 'alga-js'
import { toast } from 'bulma-toast'
import { DatePicker, DateTimePicker } from 'tedir-calendar'
import { SelectBox } from 'tedir-select'
import shared from '@/assets/langs/shared.js'

const lang = ref('en-US')
const getLang = computed(() => {
  return shared(lang.value)
})

const windowFrom = useWindowFrom()

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

const { getMenuType } = useRoleMenu()

// This will be set using the composable method
const defaultSideBarMenu = ref('Menu')
// Use a computed property that will be reactive
const isFulCustomer = computed(() => getMenuType())

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 warehouses = useCookie('logship_warehouses')
const warehouse = useCookie('logship_warehouse')
const warehouseId = useCookie('logship_warehouse_id')

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

const showDocumentAction = ref(false)
const showStornoModal = ref(false)

const closeStornoModal = () => {
  showStornoModal.value = 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 || '',
  warehouse: props.modelValue.warehouse || warehouse.value?.Name || '',
  warehouseId: props.modelValue.warehouseId || warehouseId.value || '',
  isActive: props.modelValue.isActive ?? true,
  documentNo: props.modelValue.documentNo || '',
  poReference: props.modelValue.poReference || '',
  isApproved: props.modelValue.isApproved ?? false,
  isCreditApproved: props.modelValue.isCreditApproved ?? false,
  isDelivered: props.modelValue.isDelivered ?? false,
  isInvoiced: props.modelValue.isInvoiced ?? false,
  isPrinted: props.modelValue.isPrinted ?? false,
  isTransferred: props.modelValue.isTransferred ?? false,
  dateOrdered: props.modelValue.dateOrdered || date.now('date'),
  datePromised: props.modelValue.datePromised || date.now('date'),
  dateAcct: props.modelValue.dateAcct || date.now('date'),
  freightAmt: props.modelValue.freightAmt || 0,
  totalLines: props.modelValue.totalLines || 0,
  grandTotal: props.modelValue.grandTotal || 0,
  chargeAmt: props.modelValue.chargeAmt || 0,
  processed: props.modelValue.processed ?? false,
  isSOTrx: props.modelValue.isSOTrx || true,
  isDiscountPrinted: props.modelValue.isDiscountPrinted ?? false,
  isTaxIncluded: props.modelValue.isTaxIncluded ?? false,
  isSelected: props.modelValue.isSelected ?? false,
  sendEMail: props.modelValue.sendEMail ?? false,
  isSelfService: props.modelValue.isSelfService ?? false,
  isDropShip: props.modelValue.isDropShip ?? false,
  processedOn: props.modelValue.processedOn || 0,
  isPayScheduleValid: props.modelValue.isPayScheduleValid ?? false,
  isPriviledgedRate: props.modelValue.isPriviledgedRate ?? false,
  docStatus: props.modelValue.docStatus || '',
  docStatusId: props.modelValue.docStatusId || 'DR',
  docType: props.modelValue.docType || 0,
  docTypeId: props.modelValue.docTypeId || 0,
  docTypeTarget: props.modelValue.docTypeTarget || '',
  docTypeTargetId: props.modelValue.docTypeTargetId || '',
  salesRep: props.modelValue.salesRep || '',
  salesRepId: props.modelValue.salesRepId || '',
  paymentTerm: props.modelValue.paymentTerm || '',
  paymentTermId: props.modelValue.paymentTermId || '',
  currency: props.modelValue.currency || '',
  currencyId: props.modelValue.currencyId || '',
  invoiceRule: props.modelValue.invoiceRule || '',
  invoiceRuleId: props.modelValue.invoiceRuleId || '',
  deliveryViaRule: props.modelValue.deliveryViaRule || '',
  deliveryViaRuleId: props.modelValue.deliveryViaRuleId || '',
  deliveryRule: props.modelValue.deliveryRule || '',
  deliveryRuleId: props.modelValue.deliveryRuleId || '',
  priorityRule: props.modelValue.priorityRule || '',
  priorityRuleId: props.modelValue.priorityRuleId || '',
  freightCostRule: props.modelValue.freightCostRule || '',
  freightCostRuleId: props.modelValue.freightCostRuleId || '',
  paymentRule: props.modelValue.paymentRule || '',
  paymentRuleId: props.modelValue.paymentRuleId || '',
  priceList: props.modelValue.priceList || '',
  priceListId: props.modelValue.priceListId || '',
  partner: props.modelValue.partner || '',
  partnerId: props.modelValue.partnerId || '',
  partnerLocation: props.modelValue.partnerLocation || '',
  partnerLocationId: props.modelValue.partnerLocationId || '',
  partnerLocationStreet: props.modelValue.partnerLocationStreet || '',
  partnerLocationStreet2: props.modelValue.partnerLocationStreet2 || '',
  partnerLocationZip: props.modelValue.partnerLocationZip || '',
  partnerLocationCity: props.modelValue.partnerLocationCity || '',
  partnerLocationCountry: props.modelValue.partnerLocationCountry || '',
  cashLine: props.modelValue.cashLine || '',
  cashLineId: props.modelValue.cashLineId || '',
  billPartner: props.modelValue.billPartner || '',
  billPartnerId: props.modelValue.billPartnerId || '',
  billPartnerLocation: props.modelValue.billPartnerLocation || '',
  billPartnerLocationId: props.modelValue.billPartnerLocationId || '',
  project: props.modelValue.project || '',
  projectId: props.modelValue.projectId || '',
  campaign: props.modelValue.campaign || '',
  campaignId: props.modelValue.campaignId || '',
  shipper: props.modelValue.shipper || '',
  shipperId: props.modelValue.shipperId || '',
  freightCategory: props.modelValue.freightCategory || '',
  freightCategoryId: props.modelValue.freightCategoryId || '',
  user: props.modelValue.user || '',
  userId:  props.modelValue.userId || '',
  billUser: props.modelValue.billUser || '',
  billUserId:  props.modelValue.billUserId || '',
  promotionCode: props.modelValue.promotionCode || '',
  dropShipPartner: props.modelValue.dropShipPartner || '',
  dropShipPartnerId: props.modelValue.dropShipPartnerId || '',
  dropShipPartnerLocation: props.modelValue.dropShipPartnerLocation || '',
  dropShipPartnerLocationId: props.modelValue.dropShipPartnerLocationId || '',
  dropShipUser: props.modelValue.dropShipUser || '',
  dropShipUserId:  props.modelValue.dropShipUserId || '',
  conversionType: props.modelValue.conversionType || '',
  conversionTypeId:  props.modelValue.conversionTypeId || '',
  orderSource: props.modelValue.orderSource || '',
  orderSourceId:  props.modelValue.orderSourceId || '',
  shopware6OrderId: props.modelValue.shopware6OrderId || '',
  shopifyOrderId: props.modelValue.shopifyOrderId || '',
  xentralOrderId: props.modelValue.xentralOrderId || '',
  externalOrderId: props.modelValue.externalOrderId || '',
  amazonOrderId: props.modelValue.amazonOrderId || '',
  plentyOneOrderId: props.modelValue.plentyOneOrderId || '',
  inouts: props.modelValue.inouts ?? [],
  processing: props.modelValue.processing ?? false,
  alert: {
    status: props.modelValue.alert.status || '',
    message: props.modelValue.alert.message || '',
    processing: props.modelValue.alert.processing ?? false
  }
})

const formInOut = ref({
  id: props.modelValue.inouts?.[0]?.id ?? '',
  trackingNo: props.modelValue.inouts?.[0]?.TrackingNo ?? '',
  isCommissioned: props.modelValue.inouts?.[0]?.IsCommissioned ?? false,
  shippingDate: new Date(props.modelValue.inouts?.[0]?.shipping_date ?? null),
  paketType: props.modelValue.inouts?.[0]?.M_Paket_Type_ID?.identifier ?? 'CODETEST',
  paketTypeId: Number(props.modelValue.inouts?.[0]?.M_Paket_Type_ID?.id ?? '1000001'),
})

watch(() => props.modelValue.inouts, () => {
  formInOut.value.id = props.modelValue.inouts?.[0]?.id ?? ''
  formInOut.value.trackingNo = props.modelValue.inouts?.[0]?.TrackingNo ?? ''
  formInOut.value.isCommissioned = props.modelValue.inouts?.[0]?.IsCommissioned ?? false
  formInOut.value.shippingDate = new Date(props.modelValue.inouts?.[0]?.shipping_date ?? null)
  formInOut.value.paketType = props.modelValue.inouts?.[0]?.M_Paket_Type_ID?.identifier ?? 'CODETEST'
  formInOut.value.paketTypeId = Number(props.modelValue.inouts?.[0]?.M_Paket_Type_ID?.id ?? '1000001')
}, { deep: true })

const switchInOut = (val, opt) => {
  formInOut.value.trackingNo = opt?.TrackingNo ?? ''
  formInOut.value.isCommissioned = opt?.IsCommissioned ?? false
  formInOut.value.shippingDate = new Date(opt?.shipping_date ?? null)
  formInOut.value.paketType = opt?.M_Paket_Type_ID?.identifier ?? 'CODETEST'
  formInOut.value.paketTypeId = Number(opt?.M_Paket_Type_ID?.id ?? '1000001')
}

const saveInOut = async () => {
  const res = await $fetch('/api/inouts/tracking', {
    method: 'PUT',
    headers: useRequestHeaders(['cookie']),
    body: {
      id: formInOut.value.id,
      trackingNo: formInOut.value.trackingNo,
      isCommissioned: formInOut.value.isCommissioned,
      shippingDate: new Date(formInOut.value.shippingDate ?? null).toJSON().replace('.000', ''),
      paketTypeId: formInOut.value.paketTypeId
    }
  })
  if(Number(res.status) === 200) {
    toast({
      message: 'Shipment has been saved!',
      type: 'is-success',
      duration: 2000
    })
  } else {
    toast({
      message: res.message || 'Shipment error when saving',
      type: 'is-danger',
      duration: 2000
    })
  }
}

const copyToClipboard = async (text, label) => {
  if (!text) {
    toast({
      message: `No ${label} to copy`,
      type: 'is-warning',
      duration: 2000
    })
    return
  }

  try {
    await navigator.clipboard.writeText(text)
    toast({
      message: `${label} copied to clipboard!`,
      type: 'is-success',
      duration: 2000
    })
  } catch (err) {
    toast({
      message: 'Failed to copy to clipboard',
      type: 'is-danger',
      duration: 2000
    })
  }
}

const googleMapsUrl = computed(() => {
  const addressParts = [
    form.value.partnerLocationStreet,
    form.value.partnerLocationStreet2,
    form.value.partnerLocationZip,
    form.value.partnerLocationCity,
    form.value.partnerLocationCountry
  ].filter(part => part && part.trim() !== '')

  if (addressParts.length === 0) return null

  const address = addressParts.join(', ')
  return `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(address)}`
})

const loading = ref({})
const getOptions = ref({})
const setOptions = async (url, key) => {
  loading.value[key] = true
  let newUrl = url
  if(form.value.organizationId && newUrl.endsWith('/select')) {
    newUrl = `${url}?org=${form.value.organizationId}`
  }
  const res = await $fetch('/api/'+newUrl, {
    headers: useRequestHeaders(['cookie'])
  })
  if(res) {
    getOptions.value[key] = res
    
    if(key === 'locations' && res?.records?.[0]) {
      //getOptions.value['bill_locations'] = getOptions.value['locations']
      getOptions.value['drop_shipment_locations'] = getOptions.value['locations']
      form.value.partnerLocationId = String(res.records[0].id || '')
      form.value.partnerLocation = res.records[0].Name || ''
      //form.value.billPartnerLocation = res.records?.[1]?.Name || form.value.partnerLocation || ''
      //form.value.billPartnerLocationId = String(res.records?.[1]?.id || form.value.partnerLocationId || '')
      form.value.dropShipPartnerLocation = form.value.partnerLocation || ''
      form.value.dropShipPartnerLocationId = form.value.partnerLocationId || ''
    }
    if(key === 'bill_locations' && res?.records?.[0]) {
      form.value.billPartnerLocationId = String(res.records[0].id || '')
      form.value.billPartnerLocation = res.records[0].Name || ''
    }
    if(key === 'drop_shipment_locations' && res?.records?.[0]) {
      form.value.dropShipPartnerLocationId = String(res.records[0].id || '')
      form.value.dropShipPartnerLocation = res.records[0].Name || ''
    }
    if(key === 'users' && res?.records?.[0]) {
      getOptions.value['bill_users'] = getOptions.value['users']
      getOptions.value['drop_shipment_users'] = getOptions.value['users']
      form.value.userId = String(res.records[0].id || '')
      form.value.user = res.records[0].Name || ''
      form.value.billUserId = form.value.userId || ''
      form.value.billUser = form.value.user || ''
      form.value.dropShipUserId = form.value.userId || ''
      form.value.dropShipUser = form.value.user || ''
    }
    if(key === 'bill_users' && res?.records?.[0]) {
      form.value.billUserId = String(res.records[0].id || '')
      form.value.billUser = res.records[0].Name || ''
    }
    if(key === 'drop_shipment_users' && res?.records?.[0]) {
      form.value.dropShipUserId = String(res.records[0].id || '')
      form.value.dropShipUser = res.records[0].Name || ''
    }
    if(key === 'locations' && form.value.partnerId && url !== 'partners/partners/'+form.value.partnerId+'/locations' && Number(res?.records?.length || 0) === 0) {
      setOptions('partners/partners/'+form.value.partnerId+'/locations', 'locations')
    }
    if(key === 'bill_locations' && form.value.billPartnerId && url !== 'partners/partners/'+form.value.billPartnerId+'/locations' && Number(res?.records?.length || 0) === 0) {
      setOptions('partners/partners/'+form.value.billPartnerId+'/locations', 'bill_locations')
    }
    if(key === 'drop_shipment_locations' && form.value.dropShipPartnerId && url !== 'partners/partners/'+form.value.dropShipPartnerId+'/locations' && Number(res?.records?.length || 0) === 0) {
      setOptions('partners/partners/'+form.value.dropShipPartnerId+'/locations', 'drop_shipment_locations')
    }
    if(key === 'warehouses' && res?.records?.[0]) {
      form.value.warehouseId = String(res.records[0].id || '')
      form.value.warehouse = res.records[0].Name || ''
    }
  }
  loading.value[key] = false
}

const populateByPartner = (val, opt) => {
  form.value.partner = opt.Name || ''
  form.value.partnerId = opt.id || ''
  form.value.billPartner = opt.Name || ''
  form.value.billPartnerId = opt.id || ''
  form.value.dropShipPartner = opt.Name || ''
  form.value.dropShipPartnerId = opt.id || ''
  setOptions('partners/partners/'+opt.id+'/locations/ship', 'locations')
  setOptions('partners/partners/'+opt.id+'/locations/bill', 'bill_locations')
  setOptions('partners/partners/'+opt.id+'/users', 'users')
  //setOptions('partners/partners/'+opt.id+'/users/ship', 'users')
  //setOptions('partners/partners/'+opt.id+'/users/bill', 'bill_users')
  form.value.isDropShip = true
}

const populateByBillPartner = (val, opt) => {
  form.value.billPartner = opt.Name || ''
  form.value.billPartnerId = opt.id || ''
  setOptions('partners/partners/'+opt.id+'/locations/bill', 'bill_locations')
  setOptions('partners/partners/'+opt.id+'/users', 'bill_users')
  //setOptions('partners/partners/'+opt.id+'/users/bill', 'bill_users')
}

const populateByDropShipPartner = (val, opt) => {
  form.value.dropShipPartner = opt.Name || ''
  form.value.dropShipPartnerId = opt.id || ''
  setOptions('partners/partners/'+opt.id+'/locations', 'drop_shipment_locations')
  setOptions('partners/partners/'+opt.id+'/users', 'drop_shipment_users')
  //setOptions('partners/partners/'+opt.id+'/users/ship', 'drop_shipment_users')
}

const populateByLocation = (val, opt) => {
  /*if(form.value.partnerId == form.value.billPartnerId) {
    form.value.billPartnerLocation = opt.Name || ''
    form.value.billPartnerLocationId = opt.id || ''
  }*/
  if(form.value.partnerId == form.value.dropShipPartnerId) {
    form.value.dropShipPartnerLocation = opt.Name || ''
    form.value.dropShipPartnerLocationId = opt.id || ''
  }
}

const populateByUser = (val, opt) => {
  if(form.value.partnerId == form.value.billPartnerId) {
    form.value.billUser = opt.Name || ''
    form.value.billUserId = opt.id || ''
  }
  if(form.value.partnerId == form.value.dropShipPartnerId) {
    form.value.dropShipUser = opt.Name || ''
    form.value.dropShipUserId = opt.id || ''
  }
}

const priceListHandler = (val, opt) => {
  form.value.currency = opt?.C_Currency_ID?.identifier || ''
  form.value.currencyId = opt?.C_Currency_ID?.id || ''
}

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

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

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

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

const changeOrganization = (val, opt) => {
  form.value.organization = opt.name
  form.value.partner = ''
  form.value.partnerId = ''
  form.value.billPartner = ''
  form.value.billPartnerId = ''
  form.value.dropShipPartner = ''
  form.value.dropShipPartnerId = ''
  form.value.partnerLocation = ''
  form.value.partnerLocationId = ''
  form.value.partnerLocationStreet = ''
  form.value.partnerLocationStreet2 = ''
  form.value.partnerLocationZip = ''
  form.value.partnerLocationCity = ''
  form.value.partnerLocationCountry = ''
  form.value.billPartnerLocation = ''
  form.value.billPartnerLocationId = ''
  form.value.dropShipPartnerLocation = ''
  form.value.dropShipPartnerLocationId = ''
  form.value.user = ''
  form.value.userId = ''
  form.value.billUser = ''
  form.value.billUserId = ''
  form.value.dropShipUser = ''
  form.value.dropShipUserId = ''
  setOptions('filters/m_warehouse/'+string.urlEncode(`ad_org_id eq ${opt.id}`), 'warehouses')
  save()
}
</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 === 'order'">
        <div class="columns is-one-thirds">

          <div class="column">
            <ContextMenu v-model="form.documentNo" :items="['clear']" :info="{}">
              <div class="legend">
                <label class="label">{{ getLang['documentordernumber'] }}</label>
                <input type="text" v-model="form.documentNo" class="input" placeholder="<Automatically Generated>" :readonly="form.docStatusId === 'CO' || form.docStatusId === 'VO'" @keyup="save" />
              </div>
            </ContextMenu>
            <br>
            <ContextMenu v-model="form.documentordernumber" :items="['clear']" :info="{}">
              <div class="legend">
                <label class="label">{{ getLang['documentexternnumber'] }}</label>
                <input type="text" v-model="form.externalOrderId" class="input" placeholder="<Automatically Generated>" :readonly="form.docStatusId === 'CO' || form.docStatusId === 'VO'" @keyup="save" />
              </div>
            </ContextMenu>
            <ContextMenu v-model="form.docTypeTargetId" :items="['zoom']" :info="{windowFrom: 'sales-orders-zoom', toPath: '/windows/documents-types-edit/'+form.docTypeTargetId, pathName: 'Edit Document Type'}">
              <div class="legend mt-2">
                <label class="label">{{getLang['orderdocumenttype']}} *</label>
                <input v-if="form.docStatusId === 'CO' || form.docStatusId === 'VO'" type="text" :value="form.docTypeTarget" class="input" readonly />
                <SelectBox v-else v-model="form.docTypeTargetId" :options="getOptions?.['doc_type_targets']?.records || [{id: form.docTypeTargetId, Name: form.docTypeTarget}]" prop="Name" dataprop="id" datatype="string" :size="5" @click="setOptions('types/SOO', 'doc_type_targets')" @change="save" :loading="loading?.['doc_type_targets'] ?? true" />
              </div>
            </ContextMenu>

            <ContextMenu v-model="form.poReference" :items="['clear']" :info="{}">
              <div class="legend mt-2">
                <label class="label">Order Reference</label>
                <input type="text" v-model="form.poReference" class="input" :readonly="form.docStatusId === 'CO' || form.docStatusId === 'VO'" @keyup="save" />
              </div>
            </ContextMenu>

            <ContextMenu v-model="form.description" :items="['clear']" :info="{}">
              <div class="legend mt-2">
                <label class="label">Description</label>
                <textarea v-model="form.description" class="input" :disabled="form.docStatusId === 'CO' || form.docStatusId === 'VO'" @keyup="save"></textarea>
              </div>
            </ContextMenu>
          </div>

          <div class="is-divider-vertical" data-content="+"></div>
          <div v-if="form.docStatusId === 'CO'" class="column spclcolumn">
            <div v-if="form.partnerLocationStreet" class="mt-2 bpartnerdetailshipaddress">
              <p style="display: flex; align-items: center; gap: 8px;">
                <strong>Lieferanschrift</strong>
                <a v-if="googleMapsUrl" :href="googleMapsUrl" target="_blank" class="button is-small is-link is-outlined" style="padding: 2px 6px; min-height: auto;" title="Open address in Google Maps">
                  🗺️ Maps  <span class="tf-icon ti ti-external-link ti-xs me-1 color-inherit"></span>
                </a>
              </p>
              <br>         
              <p style="display: flex; align-items: center; gap: 8px;">
                <span class="delivernamedata">Name:</span> {{ form.partner }}
               <button type="button" @click="copyToClipboard(form.partner, 'Partner name')" class="button trackingcopy smallcpbt"><span class="tf-icon ti ti-copy ti-xs me-1 color-inherit"></span></button>
              </p>
              <p style="display: flex; align-items: center; gap: 8px;">
                <span class="delivernamedata">Straße</span>{{ form.partnerLocationStreet || '' }}
                <button type="button" @click="copyToClipboard(form.partnerLocationStreet, 'Partner name')" class="button trackingcopy smallcpbt"><span class="tf-icon ti ti-copy ti-xs me-1 color-inherit"></span></button>
              </p>
              <p style="display: flex; align-items: center; gap: 8px;">
                <span class="delivernamedata">Name 2</span>{{ form.partnerLocationStreet2 || '' }}
              <button v-if="form.partnerLocationStreet2" type="button" @click="copyToClipboard(form.partnerLocationStreet, 'Partner name')" class="button trackingcopy smallcpbt"><span class="tf-icon ti ti-copy ti-xs me-1 color-inherit"></span></button>
              </p>
              <p style="display: flex; align-items: center; gap: 8px;">
                <span class="delivernamedata">PLZ</span>{{ form.partnerLocationZip || '' }}
                <button type="button" @click="copyToClipboard(form.partnerLocationZip, 'Partner name')" class="button trackingcopy smallcpbt"><span class="tf-icon ti ti-copy ti-xs me-1 color-inherit"></span></button>
              </p>
              <p style="display: flex; align-items: center; gap: 8px;">
                <span class="delivernamedata">Stadt</span>{{ form.partnerLocationCity || ''}}
                <button type="button" @click="copyToClipboard(form.partnerLocationCity, 'Partner name')" class="button trackingcopy smallcpbt"><span class="tf-icon ti ti-copy ti-xs me-1 color-inherit"></span></button>
              </p>
              <p style="display: flex; align-items: center; gap: 8px;">
                <span class="delivernamedata">Land</span>{{ form.partnerLocationCountry || '' }}
                <button type="button" @click="copyToClipboard(form.partnerLocationCountry, 'Partner name')" class="button trackingcopy smallcpbt"><span class="tf-icon ti ti-copy ti-xs me-1 color-inherit"></span></button>
              </p>
            </div>
          </div>

          <div v-if="form.docStatusId !== 'CO' && defaultSideBarMenu !== 'c'" class="column">
<!--      <div class="column importantwrapper">-->
            <ContextMenu v-model="form.partnerId" :items="['zoom']" :info="{windowFrom: 'sales-orders-zoom', toPath: '/windows/partners-partners-edit/'+form.partnerId, pathName: 'Edit Partner'}">
              <div class="legend">
                <label class="label d-block">Business Partner *</label>
                <input v-if="form.docStatusId === 'CO' || form.docStatusId === 'VO'" type="text" :value="form.partner" class="input" readonly />
                <ComboBox v-else v-model="form.partnerId" :options="getOptions?.['partners']?.records || [{id: form.partnerId, Name: form.partner}]" prop="Name" dataprop="id" datatype="string" :size="5" @load="setOptions(`partners/partners/select?org=${form.organizationId}&customer=true`, 'partners')" :loading="loading?.['partners'] ?? true" @change="(val, opt) => {populateByPartner(val, opt); save();}" :select="true" />
              </div>
            </ContextMenu>

            <ContextMenu v-model="form.partnerLocationId" :items="['zoom']" :info="{windowFrom: 'sales-orders-zoom', toPath: '/windows/partners-partners-edit/'+form.partnerId, pathName: 'Edit Partner', id: form.partnerLocationId, detail: 'locations'}">
              <div class="legend mt-2">
                <label class="label">Partner Location *</label>
                <input v-if="form.docStatusId === 'CO' || form.docStatusId === 'VO'" type="text" :value="form.partnerLocation" class="input" readonly />
                <ComboBox v-else v-model="form.partnerLocationId" :options="getOptions?.['locations']?.records || [{id: form.partnerLocationId, Name: form.partnerLocation}]" prop="Name" dataprop="id" datatype="string" :size="5" :loading="false" @load="setOptions((form.partnerId ? 'partners/partners/'+form.partnerId+'/locations/ship' : 'settings/locations'), 'locations')" @change="(val, opt) => {populateByLocation(val, opt); save();}" :select="true" />
              </div>
            </ContextMenu>

            <ContextMenu v-model="form.userId" :items="['zoom']" :info="{windowFrom: 'sales-orders-zoom', toPath: '/windows/partners-partners-edit/'+form.partnerId, pathName: 'Edit Partner', id: form.userId, detail: 'users'}">
              <div class="legend mt-2">
                <label class="label">User Contact</label>
                <input v-if="form.docStatusId === 'CO' || form.docStatusId === 'VO'" type="text" :value="form.user" class="input" readonly />
                <ComboBox v-else v-model="form.userId" :options="getOptions?.['users']?.records || [{id: form.userId, Name: form.user}]" @load="setOptions((form.partnerId ? 'partners/partners/'+form.partnerId+'/users' : 'models/ad_user'), 'users')" prop="Name" dataprop="id" datatype="string" :size="5" :loading="loading?.['users'] ?? true" @change="(val, opt) => {populateByUser(val, opt); save();}" :select="true" />
              </div>
            </ContextMenu>
          </div>


          <div v-if="form.docStatusId === '!CO' && defaultSideBarMenu !== 'c'" class="column">
            <ContextMenu v-model="form.billPartnerId" :items="['zoom']" :info="{windowFrom: 'sales-orders-zoom', toPath: '/windows/partners-partners-edit/'+form.billPartnerId, pathName: 'Edit Partner'}">
              <div class="legend">
                <label class="label">Bill Partner</label>
                <input v-if="form.docStatusId === 'CO' || form.docStatusId === 'VO'" type="text" :value="form.billPartner" class="input" readonly />
                <ComboBox v-else v-model="form.billPartnerId" :options="getOptions?.['bill_partners']?.records || [{id: form.billPartnerId, Name: form.billPartner}]" prop="Name" dataprop="id" datatype="string" :size="5" @load="setOptions(`partners/partners/select?org=${form.organizationId}&customer=true`, 'bill_partners')" :loading="loading?.['bill_partners'] ?? true" @change="(val, opt) => {populateByBillPartner(val, opt); save();}" :select="true" />
              </div>
            </ContextMenu>

            <ContextMenu v-model="form.billPartnerLocationId" :items="['zoom']" :info="{windowFrom: 'sales-orders-zoom', toPath: '/windows/partners-partners-edit/'+form.billPartnerId, pathName: 'Edit Partner', id: form.billPartnerLocationId, detail: 'locations'}">
              <div class="legend mt-2">
                <label class="label">Bill Location</label>
                <input v-if="form.docStatusId === 'CO' || form.docStatusId === 'VO'" type="text" :value="form.billPartnerLocation" class="input" readonly />
                <ComboBox v-else v-model="form.billPartnerLocationId" :options="getOptions?.['bill_locations']?.records || [{id: form.billPartnerLocationId, Name: form.billPartnerLocation}]" prop="Name" dataprop="id" datatype="string" :size="5" :loading="false" @load="setOptions((form.billPartnerId ? 'partners/partners/'+form.billPartnerId+'/locations/bill' : 'settings/locations'), 'bill_locations')" @change="save" :select="true" />
              </div>
            </ContextMenu>

            <ContextMenu v-model="form.billUserId" :items="['zoom']" :info="{windowFrom: 'sales-orders-zoom', toPath: '/windows/partners-partners-edit/'+form.billPartnerId, pathName: 'Edit Partner', id: form.billUserId, detail: 'users'}">
              <div class="legend mt-2">
                <label class="label">Bill Contact</label>
                <input v-if="form.docStatusId === 'CO' || form.docStatusId === 'VO'" type="text" :value="form.billUser" class="input" readonly />
                <ComboBox v-else v-model="form.billUserId" :options="getOptions?.['bill_users']?.records || [{id: form.billUserId, Name: form.billUser}]" @load="setOptions((form.billPartnerId ? 'partners/partners/'+form.billPartnerId+'/users' : 'models/ad_user'), 'bill_users')" @change="save" prop="Name" dataprop="id" datatype="string" :size="5" :loading="loading?.['bill_users'] ?? true" :select="true" />
              </div>
            </ContextMenu>
          </div>

          <div class="is-divider-vertical" data-content="General"></div>

          <div class="column is-one-third">

            <div class="columns">
              <div class="column">
                <div class="legend">
                  <label class="label d-block">Date Ordered *</label>
                  <input v-if="form.docStatusId === 'CO' || form.docStatusId === 'VO'" type="text" :value="form.dateOrdered" class="input" readonly />
                  <DatePicker v-else class="pickerEnd" v-model="form.dateOrdered" :max="form.datePromised" @handler="save" />
                </div>
              </div>

              <div  v-if="defaultSideBarMenu !== 'c'"  class="column">
                <div class="legend">
                  <label class="label d-block">Date Promised *</label>
                  <input v-if="form.docStatusId === 'CO' || form.docStatusId === 'VO'" type="text" :value="form.datePromised" class="input" readonly />
                  <DatePicker v-else class="pickerEnd" v-model="form.datePromised" :min="form.dateOrdered" :add="form.id ? 0 : 14" @handler="save" />
                </div>
              </div>
            </div>

            <div class="legend">
              <label class="label">Organization *</label>
              <input v-if="form.docStatusId === 'CO' || form.docStatusId === 'VO'" type="text" :value="form.organization" class="input" readonly />
              <SelectBox v-else v-model="form.organizationId" :options="getOptions?.['orgs']?.records?.filter(i => (i.id !== 0 || i.Name !== '*')) || [{id: form.organizationId, Name: form.organization}]" prop="Name" dataprop="id" datatype="string" :size="5" @click="setOptions('models/ad_org', 'orgs')" @change="changeOrganization" :loading="loading?.['orgs'] ?? true" /> <!-- && isFulCustomer === 'c'-->
            </div>

            <div v-if="defaultSideBarMenu !== 'c'" class="legend mt-2">
              <label class="label">Tenant *</label>
              <input type="text" :value="clientName" class="input" readonly />
            </div>

            <div v-if="defaultSideBarMenu !== 'c'" class="mt-2">
              <div class="d-flex flexDirection-column" style="padding-left: 0.5rem; gap: 3px;">
                <div class="check">
                  <input type="checkbox" v-model="form.isActive" class="checkInput" id="isActive" :checked="form.isActive" :disabled="form.docStatusId === 'CO' || form.docStatusId === 'VO'" @change="save">
                  <label class="checkLabel" for="isActive">Active</label>
                </div>
                <div class="check">
                  <input type="checkbox" v-model="form.isSelfService" class="checkInput" id="isSelfService" :checked="form.isSelfService" :disabled="form.docStatusId === 'CO' || form.docStatusId === 'VO'" @change="save">
                  <label class="checkLabel" for="isSelfService">Self-Service</label>
                </div>
                <div class="check">
                  <input type="checkbox" v-model="form.isDiscountPrinted" class="checkInput" id="isDiscountPrinted" :checked="form.isDiscountPrinted" :disabled="form.docStatusId === 'CO' || form.docStatusId === 'VO'" @change="save">
                  <label class="checkLabel" for="isDiscountPrinted">Discount Printed</label>
                </div>
              </div>
            </div>

            <div class="legend mt-2">
              <label class="label">Versanddienstleister</label>
              <input v-if="form.docStatusId === 'CO' || form.docStatusId === 'VO'" type="text" :value="form.shipper" class="input" readonly />
              <ClientOnly v-else>
                <SelectBox v-model="form.shipperId" :options="getOptions?.['shippers']?.records || [{id: form.shipperId, Name: form.shipper}]" prop="Name" dataprop="id" datatype="string" :size="5" @click="setOptions('models/m_shipper?$select=name', 'shippers')" @change="save" :loading="loading?.['shippers'] ?? true" />
              </ClientOnly>
            </div>


          </div>
        </div>
      </template>
      <template v-else-if="tab === 'delivery'">
        <div class="columns is-desktop">
          <div class="column is-half">
            <div class="legend">
              <label class="label">Warehouse *</label>
              <input v-if="form.docStatusId === 'CO' || form.docStatusId === 'VO'" type="text" :value="form.warehouse" class="input" readonly />
              <ClientOnly v-else>
                <SelectBox v-if="form.organizationId" v-model="form.warehouseId" :options="getOptions?.['warehouses']?.records || [{id: form.warehouseId, Name: form.warehouse}]" prop="Name" dataprop="id" datatype="string" :size="5" @load="setOptions('filters/m_warehouse/'+string.urlEncode(`ad_org_id eq ${form.organizationId}`), 'warehouses')" @change="save" :loading="loading?.['warehouses'] ?? true" />
                <SelectBox v-else v-model="form.warehouseId" :options="warehouses" @change="(val, opt) => {form.warehouse = opt.name; save();}" prop="name" dataprop="id" datatype="string" :size="5" />
              </ClientOnly>
            </div>

            <div class="legend mt-2">
              <label class="label">Delivery Via *</label>
              <input v-if="form.docStatusId === 'CO' || form.docStatusId === 'VO'" type="text" :value="form.deliveryViaRule" class="input" readonly />
              <ClientOnly v-else>
                <SelectBox v-model="form.deliveryViaRuleId" :options="getOptions?.['delivery_via_rules']?.reflist || [{value: form.deliveryViaRuleId, name: form.deliveryViaRule}]" prop="name" dataprop="value" datatype="string" :size="5" @click="setOptions('references/delivery_via_rule', 'delivery_via_rules')" @change="save" :loading="loading?.['delivery_via_rules'] ?? true" />
              </ClientOnly>
            </div>
            
            <label class="label d-block mt-2">Delivery Status</label>
            <div class="d-flex flexDirection-column" style="padding-left: 0.5rem; gap: 3px;">
              <div class="check">
                <input type="checkbox" v-model="form.isDropShip" class="checkInput" id="isDropShip" :checked="form.isDropShip" :disabled="form.docStatusId === 'CO' || form.docStatusId === 'VO'" @change="save">
                <label class="checkLabel" for="isDropShip">Drop Shipment</label>
              </div>
            </div>
          </div>
          <div class="column is-half">
            <div class="legend">
              <label class="label">Priority *</label>
              <input v-if="form.docStatusId === 'CO' || form.docStatusId === 'VO'" type="text" :value="form.priorityRule" class="input" readonly />
              <ClientOnly v-else>
                <SelectBox v-model="form.priorityRuleId" :options="getOptions?.['priority_rules']?.reflist || [{value: form.priorityRuleId, name: form.priorityRule}]" prop="name" dataprop="value" datatype="string" :size="5" @click="setOptions('references/priority_rule', 'priority_rules')" @change="save" :loading="loading?.['priority_rules'] ?? true" />
              </ClientOnly>
            </div>
            
            <div class="legend mt-2">
              <label class="label">Delivery Rule *</label>
              <input v-if="form.docStatusId === 'CO' || form.docStatusId === 'VO'" type="text" :value="form.deliveryRule" class="input" readonly />
              <ClientOnly v-else>
                <SelectBox v-model="form.deliveryRuleId" :options="getOptions?.['delivery_rules']?.reflist || [{value: form.deliveryRuleId, name: form.deliveryRule}]" prop="name" dataprop="value" datatype="string" :size="5" @load="setOptions('references/delivery_rule', 'delivery_rules')" @change="save" :loading="loading?.['delivery_rules'] ?? true" />
              </ClientOnly>
            </div>
          </div>
        </div>
        <div v-if="form.deliveryViaRuleId === 'S'" class="columns is-desktop">
          <div class="column is-half">
            <div class="legend mt-2">
              <label class="label">Shipper</label>
              <input v-if="form.docStatusId === 'CO' || form.docStatusId === 'VO'" type="text" :value="form.shipper" class="input" readonly />
              <ClientOnly v-else>
                <SelectBox v-model="form.shipperId" :options="getOptions?.['shippers']?.records || [{id: form.shipperId, Name: form.shipper}]" prop="Name" dataprop="id" datatype="string" :size="5" @click="setOptions('models/m_shipper?$select=name', 'shippers')" @change="save" :loading="loading?.['shippers'] ?? true" />
              </ClientOnly>
            </div>
          </div>
          <div class="column is-half">
            <div class="legend mt-2">
              <label class="label">Freight Category</label>
              <input v-if="form.docStatusId === 'CO' || form.docStatusId === 'VO'" type="text" :value="form.freightCategory" class="input" readonly />
              <ClientOnly v-else>
                <SelectBox v-model="form.freightCategoryId" :options="getOptions?.['freight_categories']?.records || [{id: form.freightCategoryId, Name: form.freightCategory}]" prop="Name" dataprop="id" datatype="string" :size="5" @click="setOptions('models/m_freightcategory', 'freight_categories')" @change="save" :loading="loading?.['freight_categories'] ?? true" />
              </ClientOnly>
            </div>
          </div>
        </div>
        <div v-if="form.isDropShip" class="columns is-desktop">
          <div class="column is-one-third">
            <div class="legend mt-2">
              <label class="label">Drop Shipment Partner *</label>
              <input v-if="form.docStatusId === 'CO' || form.docStatusId === 'VO'" type="text" :value="form.dropShipPartner" class="input" readonly />
              <ClientOnly v-else>
                <SelectBox v-model="form.dropShipPartnerId" :options="getOptions?.['drop_shipment_partners']?.records || [{id: form.dropShipPartnerId, Name: form.dropShipPartner}]" prop="Name" dataprop="id" datatype="string" :size="5" @click="setOptions('partners/partners', 'drop_shipment_partners')" :loading="loading?.['drop_shipment_partners'] ?? true" @change="(val, opt) => {populateByDropShipPartner(val, opt); save();}" />
              </ClientOnly>
            </div>
          </div>
          <div class="column is-one-third">
            <div class="legend mt-2">
              <label class="label">Drop Shipment Location *</label>
              <input v-if="form.docStatusId === 'CO' || form.docStatusId === 'VO'" type="text" :value="form.dropShipPartnerLocation" class="input" readonly />
              <ClientOnly v-else>
                <SelectBox v-model="form.dropShipPartnerLocationId" :options="getOptions?.['drop_shipment_locations']?.records || [{id: form.dropShipPartnerLocationId, Name: form.dropShipPartnerLocation}]" prop="Name" dataprop="id" datatype="string" :size="5" :loading="false" @click="setOptions((form.dropShipPartnerId ? 'partners/partners/'+form.dropShipPartnerId+'/locations' : 'settings/locations'), 'drop_shipment_locations')" @change="save" />
              </ClientOnly>
            </div>
          </div>
          <div class="column is-one-third">
            <div class="legend mt-2">
              <label class="label">Drop Shipment Contact</label>
              <input v-if="form.docStatusId === 'CO' || form.docStatusId === 'VO'" type="text" :value="form.dropShipUser" class="input" readonly />
              <ClientOnly v-else>
                <SelectBox v-model="form.dropShipUserId" :options="getOptions?.['drop_shipment_users']?.records || [{id: form.dropShipUserId, Name: form.dropShipUser}]" @click="setOptions((form.dropShipPartnerId ? 'partners/partners/'+form.dropShipPartnerId+'/users' : 'models/ad_user'), 'drop_shipment_users')" @change="save" prop="Name" dataprop="id" datatype="string" :size="5" :loading="loading?.['drop_shipment_users'] ?? true" />
              </ClientOnly>
            </div>
          </div>
        </div>
      </template>
      <template v-else-if="tab === 'invoicing'">
        <div class="columns is-desktop">
          <div class="column is-half">
            <div class="legend">
              <label class="label">Price List *</label>
              <input v-if="form.docStatusId === 'CO' || form.docStatusId === 'VO'" type="text" :value="form.priceList" class="input" readonly />
              <ClientOnly v-else>
                <SelectBox v-model="form.priceListId" :options="getOptions?.['price_lists']?.records || [{id: form.priceListId, Name: form.priceList}]" prop="Name" dataprop="id" datatype="string" :size="5" @click="setOptions('materials/price-lists', 'price_lists')" @change="(val, opt) => {priceListHandler(val, opt); save();}" :loading="loading?.['price_lists'] ?? true" />
              </ClientOnly>
            </div>

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

            <div class="legend mt-2">
              <label class="label">Sales Representative *</label>
              <input v-if="form.docStatusId === 'CO' || form.docStatusId === 'VO'" type="text" :value="form.salesRep" class="input" readonly />
              <ClientOnly v-else>
                <SelectBox v-model="form.salesRepId" :options="getOptions?.['sales_reps']?.records || [{id: form.salesRepId, Name: form.salesRep}]" prop="Name" dataprop="id" datatype="string" :size="5" @click="setOptions('admin/users', 'sales_reps')" @change="save" :loading="loading?.['sales_reps'] ?? true" />
              </ClientOnly>
            </div>

            <div class="legend mt-2">
              <label class="label">Payment Rule *</label>
              <!--<select v-model="form.paymentRuleId" class="select" :disabled="form.docStatusId === 'CO' || form.docStatusId === 'VO'">
                <option value="B">Cash</option>
                <option value="S">Check</option>
                <option value="K">Credit Card</option>
                <option value="T">Direct Deposit</option>
                <option value="M">Mixed POS Payment</option>
                <option value="P">On Credit</option>
              </select>-->
              <input v-if="form.docStatusId === 'CO' || form.docStatusId === 'VO'" type="text" :value="form.priorityRule" class="input" readonly />
              <ClientOnly v-else>
                <SelectBox v-model="form.paymentRuleId" :options="getOptions?.['payment_rules']?.reflist || [{value: form.paymentRuleId, name: form.paymentRule}]" prop="name" dataprop="value" datatype="string" :size="5" @click="setOptions('references/payment_rule', 'payment_rules')" @change="save" :loading="loading?.['payment_rules'] ?? true" />
              </ClientOnly>
            </div>
          </div>
          <div class="column is-half">
            <div class="legend">
              <label class="label">Currency *</label>
              <input v-if="form.docStatusId === 'CO' || form.docStatusId === 'VO'" type="text" :value="form.currency" class="input" readonly />
              <ClientOnly v-else>
                <SelectBox v-model="form.currencyId" :options="getOptions?.['currencies']?.records || [{id: form.currencyId, ISO_Code: form.currency}]" prop="ISO_Code" dataprop="id" datatype="string" :size="5" @click="setOptions('settings/currencies', 'currencies')" @change="save" :loading="loading?.['currencies'] ?? true" />
              </ClientOnly>
            </div>

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

            <div class="legend mt-2">
              <label class="label">Payment Term *</label>
              <input v-if="form.docStatusId === 'CO' || form.docStatusId === 'VO'" type="text" :value="form.paymentTerm" class="input" readonly />
              <ClientOnly v-else>
                <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('partners/payment-terms', 'payment_terms')" @change="save" :loading="loading?.['payment_terms'] ?? true" />
              </ClientOnly>
            </div>
            
            <div class="legend mt-2">
              <label class="label">Promotion Code</label>
              <input type="text" v-model="form.promotionCode" class="input" :readonly="form.docStatusId === 'CO' || form.docStatusId === 'VO'" @keyup="save" />
            </div>
          </div>
        </div>
      </template>
      <template v-else-if="tab === 'reference'">
        <div class="columns is-desktop">
          <div class="column is-half">
            <div class="legend">
              <label class="label">Project</label>
              <input v-if="form.docStatusId === 'CO' || form.docStatusId === 'VO'" type="text" :value="form.project" class="input" readonly />
              <ClientOnly v-else>
                <SelectBox v-model="form.projectId" :options="getOptions?.['projects']?.records || [{id: form.projectId, Name: form.project}]" prop="Name" dataprop="id" datatype="string" :size="5" @click="setOptions('projects', 'projects')" @change="save" :loading="loading?.['projects'] ?? true" />
              </ClientOnly>
            </div>
          </div>
          <div class="column is-half">
            <div class="legend">
              <label class="label">Campaign</label>
              <input v-if="form.docStatusId === 'CO' || form.docStatusId === 'VO'" type="text" :value="form.campaign" class="input" readonly />
              <ClientOnly v-else>
                <SelectBox v-model="form.campaignId" :options="getOptions?.['campaigns']?.records || [{id: form.campaignId, Name: form.campaign}]" prop="Name" dataprop="id" datatype="string" :size="5" @click="setOptions('marketings/campaigns', 'campaigns')" @change="save" :loading="loading?.['campaigns'] ?? true" />
              </ClientOnly>
            </div>
          </div>
        </div>
      </template>
      <template v-else-if="tab === 'integration'">
        <h3 style="font-weight: bold; font-size: 12pt; opacity: 0.4;">Order Integrations</h3>
        <div class="columns is-desktop">
          <div class="column is-half">
            <div class="legend mt-2">
              <label class="label">Shopware 6 Order ID</label>
              <input type="text" v-model="form.shopware6OrderId" class="input" :readonly="form.docStatusId === 'CO' || form.docStatusId === 'VO'" @keyup="save" />
            </div>
            <div class="legend mt-2">
              <label class="label">Shopify Order ID</label>
              <input type="text" v-model="form.shopifyOrderId" class="input" :readonly="form.docStatusId === 'CO' || form.docStatusId === 'VO'" @keyup="save" />
            </div>
            <div class="legend mt-2">
              <label class="label">Amazon Order ID</label>
              <input type="text" v-model="form.amazonOrderId" class="input" :readonly="form.docStatusId === 'CO' || form.docStatusId === 'VO'" @keyup="save" />
            </div>
          </div>
          <div class="column is-half">
            <div class="legend mt-2">
              <label class="label">Xentral Order ID</label>
              <input type="text" v-model="form.xentralOrderId" class="input" :readonly="form.docStatusId === 'CO' || form.docStatusId === 'VO'" @keyup="save" />
            </div>
            <div class="legend mt-2">
              <label class="label">PlentyONE Order ID</label>
              <input type="text" v-model="form.plentyOneOrderId" class="input" :readonly="form.docStatusId === 'CO' || form.docStatusId === 'VO'" @keyup="save" />
            </div>
            <div class="legend mt-2">
              <label class="label">External Order ID</label>
              <input type="text" v-model="form.externalOrderId" class="input" :readonly="form.docStatusId === 'CO' || form.docStatusId === 'VO'" @keyup="save" />
            </div>
          </div>
        </div>
        <h3 class="mt-2" style="font-weight: bold; font-size: 12pt; opacity: 0.4;">Shipment Information</h3>
        <div v-if="Number(form.inouts?.length ?? 0) <= 0" class="columns is-desktop">
          <div class="column is-full">
            <h3 class="mt-2" style="font-style: italic;">Currently no single Shipment being created for this Sales Order, please create a new Shipment first in order to display this Shipment Information like Tracking No, Paket Type, Shipping Date, .etc.</h3>
          </div>
        </div>
        <template v-else>
          <div v-if="Number(form.inouts?.length ?? 0) >= 2">
            <div class="legend mt-2">
              <label class="label">Pick Shipment</label>
              <!--<select v-model="formInOut.id" class="select" @change="switchInOut">
                <option v-for="(inout, ioIndex) in form.inouts" :key="ioIndex" :value="inout.id">{{ inout.DocumentNo }} - {{ inout.DateAcct }} - {{ inout.IsCommissioned ? 'Yes' : 'No' }}</option>
              </select>-->
              <ClientOnly>
                <SelectBox v-model="formInOut.id" :options="form.inouts" prop="DocumentNo" dataprop="id" datatype="string" :size="5" @change="switchInOut" type="slot">
                  <template v-slot="{ option, selected }">
                    <span>{{ option.DocumentNo }} - {{ option.DateAcct }} - {{ option.IsCommissioned ? 'Yes' : 'No' }}</span>
                  </template>
                </SelectBox>
              </ClientOnly>
            </div>
          </div>
          <div class="columns is-desktop" style="margin-bottom: 0px;">
            <div class="column is-half">
              <div class="legend mt-2">
                <label class="label">Tracking No</label>
                <input type="text" v-model="formInOut.trackingNo" class="input" />
              </div>

              <div class="legend mt-2">
                <label class="label">Paket Type</label>
                <select v-model="formInOut.paketTypeId" class="select">
                  <option :value="1000204">CODE1</option>
                  <option :value="1000205">CODE2</option>
                  <option :value="1000206">CODE3</option>
                  <option :value="1000213">CODE4</option>
                  <option :value="1000857">CODE5</option>
                  <option :value="1000911">CODE6</option>
                  <option :value="1000001">CODETEST</option>
                </select>
              </div>
            </div>
            <div class="column is-half">
              <div class="legend mt-2">
                <label class="label">Shipping Date</label>
                <DateTimePicker v-model="formInOut.shippingDate" />
              </div>

              <div class="mt-5">
                <div class="d-flex flexDirection-column" style="padding-left: 0.5rem; gap: 3px;">
                  <div class="check">
                    <input type="checkbox" v-model="formInOut.isCommissioned" class="checkInput" id="isCommissioned" :checked="formInOut.isCommissioned">
                    <label class="checkLabel" for="isCommissioned">Commissioned</label>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div>
            <button type="button" class="button" @click="saveInOut">Save</button>
          </div>
        </template>
      </template>
      <template v-else-if="tab === 'status'">
        <div class="columns is-desktop">
          <div class="column is-half">
            <!--<ContextMenu v-model="form.docStatusId" :items="['zoom']" :disabled="form.docStatusId === 'CO' || form.docStatusId === 'VO'" :info="{windowFrom: 'sales-orders-zoom', toPath: '/windows/documents-status-edit/'+form.docStatusId, pathName: 'Edit Document Status'}">-->
              <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>
            <!--</ContextMenu>-->

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

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

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

            <div class="legend mt-2">
              <label class="label">Pay Schedule</label>
              <div class="check">
                <input type="checkbox" v-model="form.isPayScheduleValid" class="checkInput" id="isPayScheduleValid" :checked="form.isPayScheduleValid" :disabled="form.docStatusId === 'CO' || form.docStatusId === 'VO'" @change="save">
                <label class="checkLabel" for="isPayScheduleValid">Pay Schedule Valid</label>
              </div>
            </div>
          </div>
        </div>

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

    </div>
  </div>

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

<style>
.bpartnerdetailshipaddress p  {
  font-size: 16px !important;
}
button.button.trackingcopy.smallcpbt {
height: 18px;
width: 29px;
}

span.delivernamedata {
  width: 76px;
  color: #8f8f8f;
}

.spclcolumn {       
  padding-left: 0;  
}                   
</style>