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

const props = defineProps({
  modelValue: Object
})

const emit = defineEmits(['update:modelValue', '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
  }
})

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 || '',
  name: props.modelValue.name || '',
  value: props.modelValue.value || '',
  description: props.modelValue.description || '',
  help: props.modelValue.help || '',
  isActive: props.modelValue.isActive ?? true,
  marketplaceId: props.modelValue.marketplaceId || '',
  marketplaceUrl: props.modelValue.marketplaceUrl || '',
  marketplaceKey: props.modelValue.marketplaceKey || '',
  marketplaceSecret: props.modelValue.marketplaceSecret || '',
  marketplaceToken: props.modelValue.marketplaceToken || '',
  startingOrderId: props.modelValue.startingOrderId || '',
  startingOrderDate: props.modelValue.startingOrderDate || date.now('date'),
  priceList: props.modelValue.priceList || '',
  priceListId: props.modelValue.priceListId || '',
  priceListVersion: props.modelValue.priceListVersion || '',
  priceListVersionId: props.modelValue.priceListVersionId || '',
  syncProductToIdempiere: props.modelValue.syncProductToIdempiere ?? false,
  syncProductFromIdempiere: props.modelValue.syncProductFromIdempiere ?? false,
  syncOrderToIdempiere: props.modelValue.syncOrderToIdempiere ?? false,
  syncOrderFromIdempiere: props.modelValue.syncOrderFromIdempiere ?? false,
  syncShipmentToIdempiere: props.modelValue.syncShipmentToIdempiere ?? false,
  syncShipmentFromIdempiere: props.modelValue.syncShipmentFromIdempiere ?? false,
  isExcludetrackingmail: props.modelValue.isExcludetrackingmail ?? false,
  isCustomTrackingMail: props.modelValue.isCustomTrackingMail ?? false,
  isSentCustomTrackingMail: props.modelValue.isSentCustomTrackingMail ?? false,
  isBoMConvert: props.modelValue.isBoMConvert ?? false,
  isTaxIncluded: props.modelValue.isTaxIncluded ?? true,
  processing: props.modelValue.processing ?? false,
  plentyOneOrderFilterCode: props.modelValue.plentyOneOrderFilterCode ?? 5.1,
  plentyOneOrderImportCode: props.modelValue.plentyOneOrderImportCode ?? 8,
  plentyOneOrderCommissionCode: props.modelValue.plentyOneOrderCommissionCode ?? 6,
  plentyOneWarehouseId: props.modelValue.plentyOneWarehouseId ?? 102,
  DHLURL: props.modelValue.DHLURL ?? '',
  DHLKey: props.modelValue.DHLKey ?? '',
  DHLSecret: props.modelValue.DHLSecret ?? '',
  DHLUser: props.modelValue.DHLUser ?? '',
  DHLPass: props.modelValue.DHLPass ?? '',
  DHLUseCustom: props.modelValue.DHLUseCustom ?? false,
  DHLBillingNumberDE: props.modelValue.DHLBillingNumberDE ?? '',
  DHLBillingNumberINT: props.modelValue.DHLBillingNumberINT ?? '',
  shipperCustom1: props.modelValue.shipperCustom1 || '',
  shipperCustom1Id: props.modelValue.shipperCustom1Id || '',
  shipperCustom2: props.modelValue.shipperCustom2 || '',
  shipperCustom2Id: props.modelValue.shipperCustom2Id || '',
  externalShippingProfile1: props.modelValue.externalShippingProfile1 ?? '',
  externalShippingProfile2: props.modelValue.externalShippingProfile2 ?? '',
  removeArticleString: props.modelValue.removeArticleString ?? '',
  jtlMerchantId: props.modelValue.jtlMerchantId ?? '',
  alert: {
    status: props.modelValue.alert.status || '',
    message: props.modelValue.alert.message || '',
    processing: props.modelValue.alert.processing ?? false,
  }
})

const passwordSwitchers = ref({})
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) {
    getOptions.value[key] = res
    
    if(key === 'warehouses' && res?.records?.[0]) {
      form.value.warehouseId = String(res.records[0].id || '')
      form.value.warehouse = res.records[0].Name || ''
    }
    if(key === 'price_list_versions' && res?.records?.[0]) {
      form.value.priceListVersionId = String(res.records[0].id || '')
      form.value.priceListVersion = res.records[0].Name || ''
    }
    /*if(getOptions.value?.['marketplaces']?.reflist) {
      getOptions.value['marketplaces'].reflist.push({value: '7', name: 'jtl'})
    }*/  
  }
  loading.value[key] = false
}

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

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

<template>
  <div @mouseleave="save">
    <div class="my-5 mx-5">
      <AlertAction v-model="form.alert.status" :alert="form.alert" />

      <div class="columns is-desktop">
        <div class="column is-two-thirds">

          <div class="columns is-desktop">
            <div class="column is-half">
              <label class="label d-block">Name *</label>
              <input type="text" v-model="form.name" class="input" />
            </div>
            <div class="column is-half">
              <label class="label d-block">Marketplace *</label>
              <!--<select v-model="form.marketplaceId" class="select">
                <option value="1">Shopware 6</option>
                <option value="2">Shopify</option>
                <option value="3">Xentral</option>
                <option value="4">Amazon</option>
                <option value="5">eBay</option>
              </select>-->
              <ClientOnly>
                <SelectBox v-model="form.marketplaceId" :options="getOptions?.['marketplaces']?.reflist || [{value: form.marketplaceId, name: form.marketplace}]" prop="name" dataprop="value" datatype="string" :size="5" @click="setOptions('references/marketplace', 'marketplaces')" @change="save" :loading="loading?.['marketplaces'] ?? true" />
              </ClientOnly>
            </div>
          </div>

          <div v-if="form.marketplaceId !== ''" class="columns is-desktop">
            <div class="column is-full">
              <label class="label d-block" for="marketplaceUrl">Marketplace URL *</label>
              <input type="text" v-model="form.marketplaceUrl" id="marketplaceUrl" class="input" />
            </div>
          </div>

          <div class="columns is-desktop" style="flex-wrap: wrap;">
            <template v-if="['1', '4', '5', '6'].includes(form.marketplaceId ?? '')">
              <div class="column is-half">
                <label class="label d-block" for="marketplaceKey">Client/Public Key *</label>
                <input type="text" v-model="form.marketplaceKey" id="marketplaceKey" class="input" />
              </div>
              <div class="column is-half">
                <label class="label d-block" for="marketplaceSecret">Private/Secret Key *</label>
                <div class="group w-100pct gap-5px">
                  <input :type="passwordSwitchers?.['marketplaceSecret'] ? 'text' : 'password'" v-model="form.marketplaceSecret" id="marketplaceSecret" class="input flexGrow-1" />
                  <button type="button" class="button groupItem" @click="passwordSwitchers['marketplaceSecret'] = !passwordSwitchers['marketplaceSecret']">
                    <svg v-if="passwordSwitchers?.['marketplaceSecret']" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye-slash" viewBox="0 0 16 16">
                      <path d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7 7 0 0 0-2.79.588l.77.771A6 6 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755q-.247.248-.517.486z"/>
                      <path d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829"/>
                      <path d="M3.35 5.47q-.27.24-.518.487A13 13 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7 7 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12z"/>
                    </svg>
                    <svg v-else xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye" viewBox="0 0 16 16">
                      <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8M1.173 8a13 13 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5s3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5s-3.879-1.168-5.168-2.457A13 13 0 0 1 1.172 8z"/>
                      <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5M4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0"/>
                    </svg>
                  </button>
                </div>
              </div>
            </template>
            <template v-if="['2', '3', '4', '7'].includes(form.marketplaceId ?? '')">
              <div class="column is-half">
                <label class="label d-block" for="marketplaceToken">Permanent Access Token *</label>
                <input type="text" v-model="form.marketplaceToken" id="marketplaceToken" class="input" />
              </div>
              <div v-if="form.marketplaceId === '2'" class="column is-half">
                Shopify app needs to be installed first by Human (System or Robot is not accepted) in order to get the permanent access token by manually running a script that contains the client id and secret key for Human authentication via browser window and it auto redirected with permanent access token data attached on it (or developing a custom app).
              </div>
            </template>
          </div>

          <div v-if="form.marketplaceId == '7'" class="columns is-desktop">
            <div class="column is-full">
              <label class="label d-block">JTL Merchant ID</label>
              <input type="text" v-model="form.jtlMerchantId" class="input" />
            </div>
          </div>

          <div class="columns is-desktop">
            <div class="column is-half">
              <label class="label d-block">Starting Order ID</label>
              <input type="text" v-model="form.startingOrderId" class="input" />
            </div>
            <div class="column is-half">
              <label class="label d-block">Starting Order Date</label>
              <DatePicker v-model="form.startingOrderDate" />
            </div>
          </div>

          <div class="columns is-desktop">
            <div class="column is-half">
              <label class="label d-block">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="(val, opt) => {form.priceList = opt.Name; setOptions('filters/m_pricelist_version/'+string.urlEncode(`m_pricelist_id eq ${opt.id}`), 'price_list_versions'); save();}" :loading="loading?.['price_lists'] ?? true" />
              </ClientOnly>
            </div>
            <div class="column is-half">
              <label class="label d-block">Price List Version</label>
              <ClientOnly>
                <SelectBox v-if="form.priceListId" v-model="form.priceListVersionId" :options="getOptions?.['price_list_versions']?.records || [{id: form.priceListVersionId, Name: form.priceListVersion}]" prop="Name" dataprop="id" datatype="string" :size="5" @load="setOptions('filters/m_pricelist_version/'+string.urlEncode(`m_pricelist_id eq ${form.priceListId}`), 'price_list_versions')" @change="(val, opt) => {form.priceListVersion = opt.Name; save();}" :loading="loading?.['price_list_versions'] ?? true" />
                <input v-else :value="form.priceListVersion" class="input" readonly />
              </ClientOnly>
            </div>
          </div>

          <div v-if="form.marketplaceId == '6'" class="columns is-desktop">
            <div class="column is-one-fourth">
              <label class="label d-block">Filter Code</label>
              <input type="text" v-model="form.plentyOneOrderFilterCode" class="input" />
            </div>
            <div class="column is-one-fourth">
              <label class="label d-block">Import Code</label>
              <input type="text" v-model="form.plentyOneOrderImportCode" class="input" />
            </div>
            <div class="column is-one-fourth">
              <label class="label d-block">Commission Code</label>
              <input type="text" v-model="form.plentyOneOrderCommissionCode" class="input" />
            </div>
            <div class="column is-one-fourth">
              <label class="label d-block">Warehouse ID</label>
              <input type="text" v-model="form.plentyOneWarehouseId" class="input" />
            </div>
          </div>

          <template v-if="['6'].includes(form.marketplaceId)">
            <div class="columns is-desktop">
              <div class="column is-one-third">
                <label class="label d-block">External Shipping Profile 1</label>
                <input type="text" v-model="form.externalShippingProfile1" class="input" />
              </div>
              <div v-if="form.externalShippingProfile1" class="column is-two-thirds">
                <label class="label d-block">Shipper Custom 1</label>
                <ClientOnly>
                  <SelectBox v-model="form.shipperCustom1Id" :options="getOptions?.['shipper_custom_1']?.records || [{id: form.shipperCustom1Id, Name: form.shipperCustom1}]" prop="Name" dataprop="id" datatype="string" :size="5" @click="setOptions('models/m_shipper', 'shipper_custom_1')" @change="save" :loading="loading?.['shipper_custom_1'] ?? true" />
                </ClientOnly>
              </div>
            </div>
            <div class="columns is-desktop">
              <div class="column is-one-third">
                <label class="label d-block">External Shipping Profile 2</label>
                <input type="text" v-model="form.externalShippingProfile2" class="input" />
              </div>
              <div v-if="form.externalShippingProfile2" class="column is-two-thirds">
                <label class="label d-block">Shipper Custom 2</label>
                <ClientOnly>
                  <SelectBox v-model="form.shipperCustom2Id" :options="getOptions?.['shipper_custom_2']?.records || [{id: form.shipperCustom2Id, Name: form.shipperCustom2}]" prop="Name" dataprop="id" datatype="string" :size="5" @click="setOptions('models/m_shipper', 'shipper_custom_2')" @change="save" :loading="loading?.['shipper_custom_2'] ?? true" />
                </ClientOnly>
              </div>
            </div>
          </template>

          <template v-if="form.DHLUseCustom == true">
            <div class="columns is-desktop">
              <div class="column is-full">
                <label class="label d-block">DHL URL</label>
                <input type="text" v-model="form.DHLURL" class="input" />
              </div>
            </div>
            <div class="columns is-desktop">
              <div class="column is-half">
                <label class="label d-block">DHL Key</label>
                <input type="text" v-model="form.DHLKey" class="input" />
              </div>
              <div class="column is-half">
                <label class="label d-block">DHL Secret</label>
                <div class="group w-100pct gap-5px">
                  <input :type="passwordSwitchers?.['DHLSecret'] ? 'text' : 'password'" v-model="form.DHLSecret" class="input flexGrow-1" />
                  <button type="button" class="button groupItem" @click="passwordSwitchers['DHLSecret'] = !passwordSwitchers['DHLSecret']">
                    <svg v-if="passwordSwitchers?.['DHLSecret']" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye-slash" viewBox="0 0 16 16">
                      <path d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7 7 0 0 0-2.79.588l.77.771A6 6 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755q-.247.248-.517.486z"/>
                      <path d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829"/>
                      <path d="M3.35 5.47q-.27.24-.518.487A13 13 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7 7 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12z"/>
                    </svg>
                    <svg v-else xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye" viewBox="0 0 16 16">
                      <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8M1.173 8a13 13 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5s3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5s-3.879-1.168-5.168-2.457A13 13 0 0 1 1.172 8z"/>
                      <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5M4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0"/>
                    </svg>
                  </button>
                </div>
              </div>
            </div>
            <div class="columns is-desktop">
              <div class="column is-half">
                <label class="label d-block">DHL User</label>
                <input type="text" v-model="form.DHLUser" class="input" />
              </div>
              <div class="column is-half">
                <label class="label d-block">DHLPassword</label>
                <div class="group w-100pct gap-5px">
                  <input :type="passwordSwitchers?.['DHLPass'] ? 'text' : 'password'" v-model="form.DHLPass" class="input flexGrow-1" />
                  <button type="button" class="button groupItem" @click="passwordSwitchers['DHLPass'] = !passwordSwitchers['DHLPass']">
                    <svg v-if="passwordSwitchers?.['DHLPass']" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye-slash" viewBox="0 0 16 16">
                      <path d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7 7 0 0 0-2.79.588l.77.771A6 6 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755q-.247.248-.517.486z"/>
                      <path d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829"/>
                      <path d="M3.35 5.47q-.27.24-.518.487A13 13 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7 7 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12z"/>
                    </svg>
                    <svg v-else xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye" viewBox="0 0 16 16">
                      <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8M1.173 8a13 13 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5s3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5s-3.879-1.168-5.168-2.457A13 13 0 0 1 1.172 8z"/>
                      <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5M4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0"/>
                    </svg>
                  </button>
                </div>
              </div>
            </div>
            <div class="columns is-desktop">
              <div class="column is-half">
                <label class="label d-block">DHL Billing Number Germany</label>
                <input type="text" v-model="form.DHLBillingNumberDE" class="input" />
              </div>
              <div class="column is-half">
                <label class="label d-block">DHL Billing Number International</label>
                <input type="text" v-model="form.DHLBillingNumberINT" class="input" />
              </div>
            </div>
          </template>

          <div class="columns is-desktop">
            <div class="column is-half">
              <label class="label d-block mt-2">Search Key</label>
              <input type="text" v-model="form.value" class="input" readonly />
            </div>
            <div class="column is-half">
              <label class="label d-block mt-2">Remove Article String</label>
              <input type="text" v-model="form.removeArticleString" class="input" />
            </div>
          </div>
          
          <label class="label d-block mt-2">Description</label>
          <textarea v-model="form.description" class="input"></textarea>

          <label class="label d-block mt-2">Comment/Help</label>
          <textarea v-model="form.help" class="input"></textarea>
        </div>
        <div class="column is-one-third">
          <label class="label d-block">Tenant *</label>
          <input type="text" :value="clientName" class="input" readonly />

          <label class="label d-block mt-2">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) => {form.organization = opt.Name; setOptions('filters/m_warehouse/'+string.urlEncode(`ad_org_id eq ${opt.id}`), 'warehouses'); save();}" :loading="loading?.['orgs'] ?? true" />
          </ClientOnly>

          <label class="label d-block mt-2">Warehouse *</label>
          <ClientOnly>
            <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>

          <label class="label d-block mt-2">Import Status</label>
          <div class="d-flex flexDirection-column" style="padding-left: 8px;">
            <div class="check">
              <input type="checkbox" v-model="form.isActive" class="checkInput" id="isActive" :checked="form.isActive">
              <label class="checkLabel" for="isActive">Active</label>
            </div>
            <div class="check">
              <input type="checkbox" v-model="form.isExcludetrackingmail" class="checkInput" id="isExcludetrackingmail" :checked="form.isExcludetrackingmail">
              <label class="checkLabel" for="isExcludetrackingmail">Exclude Tracking Mail</label>
            </div>
            <div class="check">
              <input type="checkbox" v-model="form.isCustomTrackingMail" class="checkInput" id="isCustomTrackingMail" :checked="form.isCustomTrackingMail">
              <label class="checkLabel" for="isCustomTrackingMail">Custom Tracking Mail</label>
            </div>
            <div class="check">
              <input type="checkbox" v-model="form.isSentCustomTrackingMail" class="checkInput" id="isSentCustomTrackingMail" :checked="form.isSentCustomTrackingMail">
              <label class="checkLabel" for="isSentCustomTrackingMail">Sent Custom Tracking Mail</label>
            </div>
            <div class="check">
              <input type="checkbox" v-model="form.isBoMConvert" class="checkInput" id="isBoMConvert" :checked="form.isBoMConvert">
              <label class="checkLabel" for="isBoMConvert">Is Bill of Materials Convertion</label>
            </div>
            <div class="check">
              <input type="checkbox" v-model="form.isTaxIncluded" class="checkInput" id="isTaxIncluded" :checked="form.isTaxIncluded">
              <label class="checkLabel" for="isTaxIncluded">Is Tax Included</label>
            </div>
            <div class="check">
              <input type="checkbox" v-model="form.DHLUseCustom" class="checkInput" id="DHLUseCustom" :checked="form.DHLUseCustom">
              <label class="checkLabel" for="DHLUseCustom">Use Custom DHL</label>
            </div>
          </div>
          <label class="label d-block mt-2">Sync Status</label>
          <div class="d-flex flexDirection-column" style="padding-left: 8px;">
            <div class="check">
              <input type="checkbox" v-model="form.syncProductToIdempiere" class="checkInput" id="syncProductToIdempiere" :checked="form.syncProductToIdempiere">
              <label class="checkLabel" for="syncProductToIdempiere">Sync Product to iDempiere</label>
            </div>
            <div class="check">
              <input type="checkbox" v-model="form.syncProductFromIdempiere" class="checkInput" id="syncProductFromIdempiere" :checked="form.syncProductFromIdempiere">
              <label class="checkLabel" for="syncProductFromIdempiere">Sync Product from iDempiere</label>
            </div>
            <div class="check">
              <input type="checkbox" v-model="form.syncOrderToIdempiere" class="checkInput" id="syncOrderToIdempiere" :checked="form.syncOrderToIdempiere">
              <label class="checkLabel" for="syncOrderToIdempiere">Sync Order to iDempiere</label>
            </div>
            <div class="check">
              <input type="checkbox" v-model="form.syncOrderFromIdempiere" class="checkInput" id="syncOrderFromIdempiere" :checked="form.syncOrderFromIdempiere">
              <label class="checkLabel" for="syncOrderFromIdempiere">Sync Order from iDempiere</label>
            </div>
            <div class="check">
              <input type="checkbox" v-model="form.syncShipmentToIdempiere" class="checkInput" id="syncShipmentToIdempiere" :checked="form.syncShipmentToIdempiere">
              <label class="checkLabel" for="syncShipmentToIdempiere">Sync Shipment to iDempiere</label>
            </div>
            <div class="check">
              <input type="checkbox" v-model="form.syncShipmentFromIdempiere" class="checkInput" id="syncShipmentFromIdempiere" :checked="form.syncShipmentFromIdempiere">
              <label class="checkLabel" for="syncShipmentFromIdempiere">Sync Shipment from iDempiere</label>
            </div>
          </div>
        </div>
      </div>

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