<script setup>
import { string, 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 config = useRuntimeConfig()
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 user = useCookie('logship_user')
const userId = useCookie('logship_user_id')

const clientName = ref('')
const { getMenuType } = useRoleMenu()
// This will be set using the composable method
const defaultSideBarMenu = ref('Menu')

onMounted(() => {
  defaultSideBarMenu.value = getMenuType()
  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,
  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 form2 = ref({
  id: '',
  uid: '',
  client: props.modelValue.client || '',
  clientId: props.modelValue.clientId || '',
  organization: props.modelValue.organization || organization.value?.Name || '',
  organizationId: props.modelValue.organizationId || organizationId.value || '',
  isActive: true,
  address1: '',
  address2: '',
  address3: '',
  address4: '',
  city: '',
  postal: '',
  phone: '',
  regionName: '',
  partnerLocationId: '',
  userId: '',
  isValid: true,
  country: config.public.countryvalue ?? 'Germany',
  countryId: config.public.countryid ?? '101',
  region: '',
  regionId: '',
  alert: {
    status: '',
    message: '',
    processing: false,
  }
})

const form3 = ref({
  id: '',
  uid: '',
  client: props.modelValue.client || '',
  clientId: props.modelValue.clientId || '',
  organization: props.modelValue.organization || organization.value?.Name || '',
  organizationId: props.modelValue.organizationId || organizationId.value || '',
  isDifferentAddress: false,
  isActive: true,
  address1: '',
  address2: '',
  address3: '',
  address4: '',
  city: '',
  postal: '',
  phone: '',
  regionName: '',
  partnerLocationId: '',
  userId: '',
  isValid: true,
  country: config.public.countryvalue ?? 'Germany',
  countryId: config.public.countryid ?? '101',
  region: '',
  regionId: '',
  alert: {
    status: '',
    message: '',
    processing: false,
  }
})

const form4 = ref({
  id: '',
  uid: '',
  client: props.modelValue.client || '',
  clientId: props.modelValue.clientId || '',
  organization: props.modelValue.organization || organization.value?.Name || '',
  organizationId: props.modelValue.organizationId || organizationId.value || '',
  docTypeTarget: config.public.doctypevalue ?? 'Standard Order',
  docTypeTargetId: config.public.doctypeid ?? '132',
  warehouse: '',
  warehouseId: '',
  priceList: config.public.pricelistvalue ?? 'Standard',
  priceListId: config.public.pricelistid ?? '101',
  currency: '',
  currencyId: '',
  user: user.value?.Name ?? '',
  userId: user.value?.id ?? userId.value ?? '',
  orderSource: '',
  orderSourceId:  '',
  deliveryViaRule: '',
  deliveryViaRuleId: '',
  shipper: '',
  shipperId: '',
})

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

    if(key === 'warehouses' && res?.records?.[0]) {
      form4.value.warehouseId = String(res.records[0].id || '')
      form4.value.warehouse = res.records[0].Name || ''
    }
  }
  loading.value[key] = false
}

const organizationHandler = (val, opt) => {
  form.value.client = opt?.AD_Client_ID?.identifier || ''
  form.value.clientId = opt?.AD_Client_ID?.id || ''
  form.value.organization = opt?.Name || organization.value?.Name || ''
  form.value.organizationId = opt?.id || organizationId.value || ''

  form2.value.client = form.value.client
  form2.value.clientId = form.value.clientId
  form2.value.organization = form.value.organization
  form2.value.organizationId = form.value.organizationId

  form3.value.client = form.value.client
  form3.value.clientId = form.value.clientId
  form3.value.organization = form.value.organization
  form3.value.organizationId = form.value.organizationId

  form4.value.client = form.value.client
  form4.value.clientId = form.value.clientId
  form4.value.organization = form.value.organization
  form4.value.organizationId = form.value.organizationId
}

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

watch(() => props.modelValue, () => {
  form.value = props.modelValue
})
onMounted(() => {
  if(form.value.organizationId || props.modelValue.organizationId || organizationId.value) {
    setOptions('filters/m_warehouse/'+string.urlEncode(`ad_org_id eq ${form.value.organizationId || props.modelValue.organizationId || organizationId.value}`), 'warehouses')
  }
})

const isEmailActive = ref(false)
const checkEmailPartner = async () => {
  const res = await $fetch(`/api/partners/partners/email?org=${form.value.organizationId || props.modelValue.organizationId || organizationId.value}&email=${form.value.EMail}`, {
    headers: useRequestHeaders(['cookie'])
  })
  if(res?.id) {
    form.value.id = res?.id || ''
    form.value.uid = res?.uid || ''
    form.value.client = res?.AD_Client_ID?.identifier || ''
    form.value.clientId = res?.AD_Client_ID?.id || ''
    form.value.organization = res?.AD_Org_ID?.identifier || ''
    form.value.organizationId = res?.AD_Org_ID?.id || ''
    form.value.name = res?.Name || ''
    form.value.name2 = res?.Name2 || ''
    form.value.value = res?.Value || ''
    form.value.description = res?.Description || ''
    form.value.salesVolume = res?.SalesVolume || 0
    form.value.numberEmployees = res?.NumberEmployees || 0
    form.value.isActive = res?.IsActive ?? true
    form.value.isSummary = res?.IsSummary ?? false
    form.value.isVendor = res?.IsVendor ?? false
    form.value.isCustomer = res?.IsCustomer ?? false
    form.value.isProspect = res?.IsProspect ?? false
    form.value.soCreditLimit = res?.SoCreditLimit || 0
    form.value.soCreditUsed = res?.SoCreditUsed || 0
    form.value.acqusitionCost = res?.AcqusitionCost || 0
    form.value.potentialLifeTimeValue = res?.PotentialLifeTimeValue || 0
    form.value.actualLifeTimeValue = res?.ActualLifeTimeValue || 0
    form.value.shareOfCustomer = res?.ShareOfCustomer || 0
    form.value.isEmployee = res?.IsEmployee ?? false
    form.value.isSalesRep = res?.IsSalesRep ?? false
    form.value.isOneTime = res?.IsOneTime ?? false
    form.value.isTaxExempt = res?.IsTaxExempt ?? false
    form.value.isDiscountPrinted = res?.IsDiscountPrinted ?? false
    form.value.sendEMail = res?.SendEMail ?? false
    form.value.EMail = res?.EMail || ''
    form.value.totalOpenBalance = res?.TotalOpenBalance || 0
    form.value.isPOTaxExempt = res?.IsPOTaxExempt ?? false
    form.value.isManufacturer = res?.IsManufacturer ?? false
    form.value.is1099Vendor = res?.Is1099Vendor ?? false
    form.value.firstSale = res?.FirstSale || date.now('date')
    form.value.poReference = res?.POReference || ''
    form.value.referenceNo = res?.ReferenceNo || ''
    form.value.rating = res?.Rating || ''
    form.value.taxID = res?.TaxID || ''
    form.value.URL = res?.URL || ''
    form.value.NAICS = res?.NAICS || ''
    form.value.DUNS = res?.DUNS || ''
    form.value.documentCopies = res?.DocumentCopies || 0
    form.value.soDescription = res?.SODescription || ''
    form.value.flatDiscount = res?.FlatDiscount || 0
    form.value.shelfLifeMinPct = res?.ShelfLifeMinPct || 0
    form.value.dunningGrace = res?.DunningGrace || date.now('date')
    form.value.isFulfillmentCustomer = res?.isFulfillmentCustomer ?? false
    form.value.fulfillmentOrderBaseprice = res?.fulfillment_order_baseprice ?? 0
    form.value.fulfillmentOrderPickprice = res?.fulfillment_order_pickprice ?? 0
    form.value.fulfillmentOrderQtyPickfree = res?.fulfillment_order_qty_pickfree ?? 0
    form.value.fulfillmentOrderBaseprice2 = res?.fulfillment_order_baseprice_2 ?? 0
    form.value.fulfillmentOrderBaseprice3 = res?.fulfillment_order_baseprice_3 ?? 0
    form.value.fulfillmentOrderReturnBaseprice = res?.fulfillment_order_return_baseprice ?? 0
    form.value.fulfillmentOrderReturnPickprice = res?.fulfillment_order_return_pickprice ?? 0
    form.value.deliveryRule = res?.DeliveryRule?.identifier || ''
    form.value.deliveryRuleId = res?.DeliveryRule?.id || ''
    form.value.deliveryViaRule = res?.DeliveryViaRule?.identifier || ''
    form.value.deliveryViaRuleId = res?.DeliveryViaRule?.id || ''
    form.value.invoiceSchedule = res?.C_InvoiceSchedule_ID?.identifier || ''
    form.value.invoiceScheduleId = res?.C_InvoiceSchedule_ID?.id || ''
    form.value.greeting = res?.C_Greeting_ID?.identifier || ''
    form.value.greetingId = res?.C_Greeting_ID?.id || ''
    form.value.printFormat = res?.Invoice_PrintFormat_ID?.identifier || ''
    form.value.printFormatId = res?.Invoice_PrintFormat_ID?.id || ''
    form.value.salesRep = res?.SalesRep_ID?.identifier || ''
    form.value.salesRepId = res?.SalesRep_ID?.id || ''
    form.value.invoiceRule = res?.InvoiceRule?.identifier || ''
    form.value.invoiceRuleId = res?.InvoiceRule?.id || ''
    form.value.paymentRule = res?.PaymentRule?.identifier || ''
    form.value.paymentRuleId = res?.PaymentRule?.id || ''
    form.value.paymentRulePO = res?.PaymentRulePO?.identifier || ''
    form.value.paymentRulePOId = res?.PaymentRulePO?.id || ''
    form.value.soCreditStatus = res?.SOCreditStatus?.identifier || ''
    form.value.soCreditStatusId = res?.SOCreditStatus?.id || ''
    form.value.partnerGroup = res?.C_BP_Group_ID?.identifier || ''
    form.value.partnerGroupId = res?.C_BP_Group_ID?.id || ''
    form.value.priceList = res?.M_PriceList_ID?.identifier || ''
    form.value.priceListId = res?.M_PriceList_ID?.id || ''
    form.value.paymentTerm = res?.C_PaymentTerm_ID?.identifier || ''
    form.value.paymentTermId = res?.C_PaymentTerm_ID?.id || ''
    form.value.languageId = res?.AD_Language?.id || res?.AD_Language?.identifier || 'en_US'

    form2.value.id = res?.ship_address?.id ?? ''
    form2.value.uid = res?.ship_address?.uid ?? ''
    form2.value.client = res?.ship_address?.AD_Client_ID?.identifier ??  ''
    form2.value.clientId = res?.ship_address?.AD_Client_ID?.id ?? ''
    form2.value.organization = res?.ship_address?.AD_Org_ID?.identifier ?? ''
    form2.value.organizationId = res?.ship_address?.AD_Org_ID?.id ?? ''
    form2.value.isActive = res?.ship_address?.IsActive ?? true
    form2.value.address1 = res?.ship_address?.Address1 ?? ''
    form2.value.address2 = res?.ship_address?.Address2 ?? ''
    form2.value.address3 = res?.ship_address?.Address3 ?? ''
    form2.value.address4 = res?.ship_address?.Address4 ?? ''
    form2.value.city = res?.ship_address?.City ?? ''
    form2.value.postal = res?.ship_address?.Postal ?? ''
    form2.value.phone = res?.ship_address?.Phone ?? ''
    form2.value.regionName = res?.ship_address?.C_Region_ID?.identifier ?? ''
    form2.value.partnerLocationId = res?.ship_partnerlocation_id ?? ''
    form2.value.userId = res?.ship_user_id ?? ''
    form2.value.isValid = res?.ship_address?.IsValid ?? true
    form2.value.country = res?.ship_address?.C_Country_ID?.identifier ?? 'Germany'
    form2.value.countryId = res?.ship_address?.C_Country_ID?.id ?? '101'
    form2.value.region = res?.ship_address?.C_Region_ID?.identifier ?? ''
    form2.value.regionId = res?.ship_address?.C_Region_ID?.id ?? ''

    form3.value.id = res?.bill_address?.id ?? ''
    form3.value.uid = res?.bill_address?.uid ?? ''
    form3.value.client = res?.bill_address?.AD_Client_ID?.identifier ?? ''
    form3.value.clientId = res?.bill_address?.AD_Client_ID?.id ?? ''
    form3.value.organization = res?.bill_address?.AD_Org_ID?.identifier ?? ''
    form3.value.organizationId = res?.bill_address?.AD_Org_ID?.id ?? ''
    form3.value.isDifferentAddress = true
    form3.value.isActive = res?.bill_address?.IsActive ?? true
    form3.value.address1 = res?.bill_address?.Address1 ?? ''
    form3.value.address2 = res?.bill_address?.Address2 ?? ''
    form3.value.address3 = res?.bill_address?.Address3 ?? ''
    form3.value.address4 = res?.bill_address?.Address4 ?? ''
    form3.value.city = res?.bill_address?.City ?? ''
    form3.value.postal = res?.bill_address?.Postal ?? ''
    form3.value.phone = res?.bill_address?.Phone ?? ''
    form3.value.regionName = res?.bill_address?.C_Region_ID?.identifier ?? ''
    form3.value.partnerLocationId = res?.bill_partnerlocation_id ?? ''
    form3.value.userId = res?.bill_user_id ?? ''
    form3.value.isValid = res?.bill_address?.IsValid ?? true
    form3.value.country = res?.bill_address?.C_Country_ID?.identifier ?? 'Germany'
    form3.value.countryId = res?.bill_address?.C_Country_ID?.id ?? '101'
    form3.value.region = res?.bill_address?.C_Region_ID?.identifier ?? ''
    form3.value.regionId = res?.bill_address?.C_Region_ID?.id ?? ''
  }
  isEmailActive.value = true
  save()
}

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', {
    partner: form.value,
    ship: form2.value,
    bill: form3.value,
    order: form4.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" />-->

      <h3 class="mb-2 fw-bold">Order Info</h3>
      <div class="columns is-desktop" v-if="defaultSideBarMenu !== 'c'">
        <div class="column is-two-thirds">
          <div class="legend mt-2">
            <label class="label">Organization *</label>
            <ClientOnly>
              <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) => {organizationHandler(val, opt); setOptions('filters/m_warehouse/'+string.urlEncode(`ad_org_id eq ${opt.id}`), 'warehouses'); save();}" :loading="loading?.['orgs'] ?? true" />
            </ClientOnly>
          </div>
        </div>
        <div class="column is-one-third">
          <div class="legend mt-2">
            <label class="label">Warehouse *</label>
            <ClientOnly>
              <SelectBox v-if="form.organizationId" v-model="form4.warehouseId" :options="getOptions?.['warehouses']?.records || [{id: form4.warehouseId, Name: form4.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="form4.warehouseId" :options="warehouses" @change="(val, opt) => {form4.warehouse = opt.name; save();}" prop="name" dataprop="id" datatype="string" :size="5" />
            </ClientOnly>
          </div>
        </div>
      </div>
      <div class="columns is-desktop">
        <div class="column is-half">
          <div class="legend mt-2">
            <label class="label">Target Document Type *</label>
            <ClientOnly>
              <SelectBox v-model="form4.docTypeTargetId" :options="getOptions?.['doc_type_targets']?.records || [{id: form4.docTypeTargetId, Name: form4.docTypeTarget}]" prop="Name" dataprop="id" datatype="string" :size="5" @click="setOptions('types/SOO', 'doc_type_targets')" @change="save" :loading="loading?.['doc_type_targets'] ?? true" />
            </ClientOnly>
          </div>
          <div class="legend mt-2">
            <label class="label">Delivery Via *</label>
            <ClientOnly>
              <SelectBox v-model="form4.deliveryViaRuleId" :options="getOptions?.['delivery_via_rules']?.reflist || [{value: form4.deliveryViaRuleId, name: form4.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>
          <div v-if="form4.deliveryViaRuleId === 'S'" class="legend mt-2">
            <label class="label">Shipper</label>
            <ClientOnly>
              <SelectBox v-model="form4.shipperId" :options="getOptions?.['shippers']?.records || [{id: form4.shipperId, Name: form4.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">Order Source</label>
            <ClientOnly>
              <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">Price List *</label>
            <ClientOnly>
              <SelectBox v-model="form4.priceListId" :options="getOptions?.['price_lists']?.records || [{id: form4.priceListId, Name: form4.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>
      </div>
      <div class="columns is-desktop mt-2">
        <div class="column is-one-third">
          <h3 class="mb-2 fw-bold">Partner Info</h3>
          <div class="legend mt-2">
            <label class="label">Email *</label>
            <div class="group w-100pct">
              <input type="text" v-model="form.EMail" class="input groupItem" @keyup.enter="checkEmailPartner" />
              <button type="button" class="button groupItem" @click="checkEmailPartner">Search</button>
            </div>
          </div>
          <div class="legend mt-2">
            <label class="label">Name *</label>
            <input type="text" v-model="form.name" class="input" @keyup="save" :readonly="isEmailActive === false" />
          </div>
          <div class="legend mt-2">
            <label class="label">Firma</label>
            <input type="text" v-model="form.name2" class="input" @keyup="save" :readonly="isEmailActive === false" />
          </div>
          <div v-if="defaultSideBarMenu !== 'c'">
          <label class="label d-block mt-2" >Business Partner Group</label>
          <input v-if="isEmailActive === false" type="text" v-model="form.partnerGroup" class="input" @keyup="save" readonly />
          <ClientOnly v-else>
            <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">Status</label>
          <div class="d-flex flexDirection-column px-3 gap-5px">
            <div class="check">
              <input type="checkbox" v-model="form.isCustomer" class="checkInput" id="isCustomer" :checked="form.isCustomer" @change="save" :disabled="isEmailActive === false">
              <label class="checkLabel" for="isCustomer">Customer</label>
            </div>
          </div>
          </div>
        </div>
        <div class="column is-one-third">
          <h3 class="mb-2 fw-bold">Address</h3>
          <div class="legend mt-2">
            <label class="label">Strasse *</label>
            <input type="text" v-model="form2.address1" class="input" @input="form3.address1 = form2.address1" :readonly="isEmailActive === false" />
          </div>

          <div class="legend mt-2">
            <label class="label d-block mt-2">City</label>
            <input type="text" v-model="form2.city" class="input" @input="form3.city = form2.city" :readonly="isEmailActive === false" />
          </div>
          <div class="legend mt-2">
            <label class="label">ZIP</label>
            <input type="text" v-model="form2.postal" class="input" @input="form3.postal = form2.postal" :readonly="isEmailActive === false" />
          </div>
<!--          <div class="legend mt-2">-->
<!--            <label class="label">Address 2</label>-->
<!--            <input type="text" v-model="form2.address2" class="input" @input="form3.address2 = form2.address2" :readonly="isEmailActive === false" />-->
<!--          </div>-->
          <div class="legend mt-2">
            <label class="label">Country *</label>
            <input v-if="isEmailActive === false" type="text" v-model="form2.country" class="input" @keyup="save" readonly />
            <ClientOnly v-else>
              <SelectBox v-model="form2.countryId" :options="getOptions?.['countries']?.records || [{id: form2.countryId, Name: form2.country}]" prop="Name" dataprop="id" datatype="string" :size="5" @click="setOptions('models/c_country', 'countries')" @change="(val, opt) => {setOptions('settings/regions/countries/'+opt.id, 'regions'); form2.country = opt.Name; form3.countryId = opt.id; form3.country = opt.Name;}" :loading="loading?.['countries'] ?? true" />
            </ClientOnly>
          </div>
          <div class="legend mt-2">
            <label class="label">Phone</label>
            <input type="text" v-model="form2.phone" class="input" @input="form3.phone = form2.phone" :readonly="isEmailActive === false" />
          </div>
        </div>
        <div v-if="form3.isDifferentAddress === false" class="column is-one-third">
          <div class="d-flex flexDirection-column px-3 gap-5px">
            <div class="check">
              <input type="checkbox" v-model="form3.isDifferentAddress" class="checkInput" id="isDifferentAddress" :checked="form3.isDifferentAddress" @change="save" :disabled="isEmailActive === false">
              <label class="checkLabel" for="isDifferentAddress">Different Ship-Address</label>
            </div>
          </div>
        </div>
        <div v-else class="column is-one-third">
          <h3 class="mb-2 fw-bold">Bill Address</h3>
          <div class="legend mt-2">
            <label class="label">Address 1 *</label>
            <input type="text" v-model="form3.address1" class="input" />
          </div>
          <div class="legend mt-2">
            <label class="label">Address 2</label>
            <input type="text" v-model="form3.address2" class="input" />
          </div>
          <div class="legend mt-2">
            <label class="label d-block mt-2">City</label>
            <input type="text" v-model="form3.city" class="input" />
          </div>
          <div class="legend mt-2">
            <label class="label">ZIP</label>
            <input type="text" v-model="form3.postal" class="input" />
          </div>
          <div class="legend mt-2">
            <label class="label">Country *</label>
            <ClientOnly>
              <SelectBox v-model="form3.countryId" :options="getOptions?.['countries']?.records || [{id: form3.countryId, Name: form3.country}]" prop="Name" dataprop="id" datatype="string" :size="5" @click="setOptions('models/c_country', 'countries')" @change="(val, opt) => {setOptions('settings/regions/countries/'+opt.id, 'regions'); form3.country = opt.Name;}" :loading="loading?.['countries'] ?? true" />
            </ClientOnly>
          </div>
          <div class="legend mt-2">
            <label class="label">Phone</label>
            <input type="text" v-model="form3.phone" class="input" />
          </div>
        </div>
      </div>

    </div>

  </div>
</template>