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

const router = useRouter()
const route = useRoute()

definePageMeta({
  middleware: ['auth', 'org']
})

const form = ref({
  id: '',
  client: '',
  clientId: '',
  organization: '',
  organizationId: '',
  name: '',
  sku: '',
  upc: '',
  isActive: true,
  value: '',
  versionNo: '',
  description: '',
  help: '',
  documentNote: '',
  isSummary: false,
  isStocked: true,
  isPurchased: true,
  isSold: true,
  volume: 0,
  weight: 0,
  discontinued: false,
  isBOM: false,
  isInvoicePrintDetails: false,
  isPickListPrintDetails: false,
  isVerified: false,
  guaranteeDaysMin: 0,
  isWebStoreFeatured: false,
  isSelfService: false,
  isDropShip: false,
  isExcludeAutoDelivery: false,
  unitsPerPack: 0,
  lowLevel: 0,
  isKanban: false,
  isManufactured: false,
  isPhantom: false,
  isOwnBox: false,
  isAutoProduce: false,
  shelfWidth: 0,
  shelfHeight: 0,
  shelfDepth: 0,
  unitsPerPallet: 0,
  classification: '',
  customsTariffNumber: 0,
  group1: '',
  group2: '',
  asin: '',
  mpn: '',
  uom: '',
  uomId: '',
  productCategory: '',
  productCategoryId: '',
  taxCategory: '',
  taxCategoryId: '',
  productType: 'I',
  productTypeId: 'I',
  attributeSet: '',
  attributeSetId: '',
  attributeSetInstance: '',
  attributeSetInstanceId: '',
  revenueRecognition: '',
  revenueRecognitionId: '',
  salesRep: '',
  salesRepId: '',
  mailText: '',
  mailTextId: '',
  labelPrinter: 'labelprinter-2',
  labelPrinterId: 'b',
  processing: false,
  alert: {
    status: '',
    message: '',
    processing: false
  }
})

const retrieve = async () => {
  const res = await $fetch('/api/materials/products/'+route.params.id, {
    headers: useRequestHeaders(['cookie'])
  })
  if(res) {
    form.value = {
      id: route.params.id,
      client: res?.AD_Client_ID?.identifier || '',
      clientId: res?.AD_Client_ID?.id || '',
      organization: res?.AD_Org_ID?.identifier || '',
      organizationId: res?.AD_Org_ID?.id || '',
      name: res?.Name || '',
      sku: res?.SKU || '',
      upc: res?.UPC || '',
      isActive: res?.IsActive ?? true,
      value: res?.Value || '',
      versionNo: res?.VersionNo || '',
      description: res?.Description || '',
      help: res?.Help || '',
      documentNote: res?.DocumentNote || '',
      isSummary: res?.IsSummary ?? false,
      isStocked: res?.IsStocked ?? true,
      isPurchased: res?.IsPurchased ?? true,
      isSold: res?.IsSold ?? true,
      volume: res?.Volume || 0,
      weight: res?.Weight || 0,
      discontinued: res?.Discontinued ?? false,
      isBOM: res?.IsBOM ?? false,
      isInvoicePrintDetails: res?.IsInvoicePrintDetails ?? false,
      isPickListPrintDetails: res?.IsPickListPrintDetails ?? false,
      isVerified: res?.IsVerified ?? false,
      guaranteeDaysMin: res?.GuaranteeDaysMin || 0,
      isWebStoreFeatured: res?.IsWebStoreFeatured ?? false,
      isSelfService: res?.IsSelfService ?? false,
      isDropShip: res?.IsDropShip ?? false,
      isExcludeAutoDelivery: res?.IsExcludeAutoDelivery ?? false,
      unitsPerPack: res?.UnitsPerPack || 0,
      lowLevel: res?.LowLevel || 0,
      isKanban: res?.IsKanban ?? false,
      isManufactured: res?.IsManufactured ?? false,
      isPhantom: res?.IsPhantom ?? false,
      isOwnBox: res?.IsOwnBox ?? false,
      isAutoProduce: res?.IsAutoProduce ?? false,
      shelfWidth: res?.ShelfWidth || 0,
      shelfHeight: res?.ShelfHeight || 0,
      shelfDepth: res?.ShelfDepth || 0,
      unitsPerPallet: res?.UnitsPerPallet || 0,
      classification: res?.Classification || '',
      customsTariffNumber: res?.CustomsTariffNumber || 0,
      group1: res?.Group1 || '',
      group2: res?.Group2 || '',
      asin: res?.asin || '',
      mpn: res?.mpn || '',
      uom: res?.C_UOM_ID?.identifier || '',
      uomId: res?.C_UOM_ID?.id || '',
      productCategory: res?.M_Product_Category_ID?.identifier || '',
      productCategoryId: res?.M_Product_Category_ID?.id || '',
      taxCategory: res?.C_TaxCategory_ID?.identifier || '',
      taxCategoryId: res?.C_TaxCategory_ID?.id || '',
      productType: res?.ProductType?.identifier || 'I',
      productTypeId: res?.ProductType?.id || 'I',
      attributeSet: res?.M_AttributeSet_ID?.identifier || '',
      attributeSetId: res?.M_AttributeSet_ID?.id || '',
      attributeSetInstance: res?.M_AttributeSetInstance_ID?.identifier || '',
      attributeSetInstanceId: res?.M_AttributeSetInstance_ID?.id || '',
      revenueRecognition: res?.C_RevenueRecognition_ID?.identifier || '',
      revenueRecognitionId: res?.C_RevenueRecognition_ID?.id || '',
      salesRep: res?.SalesRep_ID?.identifier || '',
      salesRepId: res?.SalesRep_ID?.id || '',
      mailText: res?.R_MailText_ID?.identifier || '',
      mailTextId: res?.R_MailText_ID?.id || '',
      labelPrinter: res?.labelprinter?.identifier || 'labelprinter-2',
      labelPrinterId: res?.labelprinter?.id || 'b',
      processing: false,
      alert: {
        status: '',
        message: '',
        processing: false
      }
    }
  }
}
onMounted(retrieve)

const back = () => {
  router.push('/materials/products')
}
const edit = () => {
  router.push(`/materials/products/${route.params.id}/edit`)
}
const destroy = async () => {
  const confirmation = confirm('Are you sure want to delete this record?')
  if(confirmation) {
    await $fetch('/api/materials/products/'+route.params.id, {
      method: 'DELETE',
      headers: useRequestHeaders(['cookie'])
    })
    router.push(`/materials/products`)
  }
}

const dropDownHandler = (e) => {
  if(e.target.parentElement.classList.contains('show')) {
    e.target.parentElement.classList.remove('show')
  } else {
    e.target.parentElement.classList.add('show')
  }
}

const dropItemHandler = (e) => {
  if(e.target.parentElement.parentElement.classList.contains('show')) {
    e.target.parentElement.parentElement.classList.remove('show')
  } else {
    e.target.parentElement.parentElement.classList.add('show')
  }
}

const breadCrumb = computed(() => ([
  { link: '#', text: 'Materials'},
  { link: '/materials/products', text: 'Products'},
  { link: '#', text: 'View Order Details', active: true}
]))
</script>

<template>
  <Head>
    <Title>View Order Details</Title>
  </Head>

  <NuxtLayout name="new-dash">
    <NewBreadCrumb :items="breadCrumb" />
    <div>
      <div class="banner">
        <div class="d-flex justify-between mb-3">
          <h4 ></h4>
          <div class="d-flex gap-0.75rem">
            <div>
              <button type="button" @click="back" class="button">
                <span class="tf-icon ti ti-chevron-left ti-xs me-1"></span> Back
              </button>
            </div>
            <div class="dropDown">
              <button type="button" class="button dropDownToggler" @click="dropDownHandler">
                <span class="tf-icon ti ti-settings ti-xs me-1"></span> Action
              </button>
              <div class="dropDownBackdrop" @click="dropDownHandler"></div>
              <div class="dropDownMenu dropDownRight mnw-80px">
                <span class="dropDownItem" @click="dropItemHandler($event); edit();">Edit</span>
                <span class="dropDownItem" @click="dropItemHandler($event); destroy();">Delete</span>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div class="columns mt-0">
            <div class="column is-half d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Tenant</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.client }}</div>
            </div>
            <div class="column is-half d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Organization</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.organization }}</div>
            </div>
          </div>
          <div class="columns">
            <div class="column is-half d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>SKU</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.sku }}</div>
            </div>
            <div class="column is-half d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Barcode (UPC/EAN)</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.upc }}</div>
            </div>
          </div>
          <div class="columns">
            <div class="column is-half mb-2 d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Search Key</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.value }}</div>
            </div>
            <div class="column is-half d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Version Number</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.versionNo }}</div>
            </div>
          </div>
          <div class="columns">
            <div class="column is-half d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Name</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.name }}</div>
            </div>
            <div class="column is-half d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Description</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.description }}</div>
            </div>
          </div>
          <div class="columns">
            <div class="column is-half d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Product Type</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.productType }}</div>
            </div>
            <div class="column is-half d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Stock Unit</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.uom }}</div>
            </div>
          </div>
          <div class="columns">
            <div class="column is-half d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Revenue Recognition</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.revenueRecognition }}</div>
            </div>
            <div class="column is-half d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Customs Tariff Number</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.customsTariffNumber }}</div>
            </div>
          </div>
          <div class="columns">
            <div class="column is-half d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Product Category</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.productCategory }}</div>
            </div>
            <div class="column is-half d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Tax Category</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.taxCategory }}</div>
            </div>
          </div>
          <div class="columns">
            <div class="column is-half d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Mail Template</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.mailText }}</div>
            </div>
            <div class="column is-half d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Classification</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.classification }}</div>
            </div>
          </div>
          <div class="columns">
            <div class="column is-half d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Weight</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.weight }}</div>
            </div>
            <div class="column is-half d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Volume</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.volume }}</div>
            </div>
          </div>
          <div class="columns">
            <div class="column is-half d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Sales Representative</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.salesRep }}</div>
            </div>
            <div class="column is-half d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Freight Category</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.freightCategory }}</div>
            </div>
          </div>
          <div class="columns">
            <div class="column is-half d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Part Type</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.partType }}</div>
            </div>
            <div class="column is-half d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Locator</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.locator }}</div>
            </div>
          </div>
          <div class="columns">
            <div class="column is-half d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Shelf Width</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.shelfWidth }}</div>
            </div>
            <div class="column is-half d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Shelf Height</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.shelfHeight }}</div>
            </div>
          </div>
          <div class="columns">
            <div class="column is-half d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Shelf Depth</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.shelfDepth }}</div>
            </div>
            <div class="column is-half d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Units Per Pallet</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.unitsPerPack }}</div>
            </div>
          </div>
          <div class="columns">
            <div class="column is-half d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Attribute Set</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.attributeSet }}</div>
            </div>
            <div class="column is-half d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Attribute Set Instance</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.attributeSetInstance }}</div>
            </div>
          </div>
          <div class="columns">
            <div class="column is-half d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Image URL</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.imageURL }}</div>
            </div>
            <div class="column is-half d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Guarantee Days</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.guaranteeDays }}</div>
            </div>
          </div>
          <div class="columns">
            <div class="column is-half d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Description URL</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.descriptionURL }}</div>
            </div>
            <div class="column is-half d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Min Guarantee Days</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.guaranteeDaysMin }}</div>
            </div>
          </div>
          <div class="columns">
            <div class="column is-half d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Group 1</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.group1 }}</div>
            </div>
            <div class="column is-half d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Group 2</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.group2 }}</div>
            </div>
          </div>
          <div class="columns">
            <div class="column is-half d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Help/Comment</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.help }}</div>
            </div>
            <div class="column is-half d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Document Note</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.documentNote }}</div>
            </div>
          </div>
          <div class="columns">
            <div class="column is-full d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Status</strong>
                <strong>:</strong>
              </div>
              <div>
                <div class="check">
                  <input type="checkbox" v-model="form.isActive" class="checkInput" id="isActive" :checked="form.isActive" disabled>
                  <label class="checkLabel" for="isActive">Active</label>
                </div>
                <div class="check">
                  <input type="checkbox" v-model="form.isSummary" class="checkInput" id="isSummary" :checked="form.isSummary" disabled>
                  <label class="checkLabel" for="isSummary">Summary Level</label>
                </div>
                <div class="check">
                  <input type="checkbox" v-model="form.isStocked" class="checkInput" id="isStocked" :checked="form.isStocked" disabled>
                  <label class="checkLabel" for="isStocked">Stocked</label>
                </div>
                <div class="check">
                  <input type="checkbox" v-model="form.isSold" class="checkInput" id="isSold" :checked="form.isSold" disabled>
                  <label class="checkLabel" for="isSold">Sold</label>
                </div>
                <div class="check">
                  <input type="checkbox" v-model="form.isPurchased" class="checkInput" id="isPurchased" :checked="form.isPurchased" disabled>
                  <label class="checkLabel" for="isPurchased">Purchased</label>
                </div>
                <div class="check">
                  <input type="checkbox" v-model="form.isOwnBox" class="checkInput" id="isOwnBox" :checked="form.isOwnBox" disabled>
                  <label class="checkLabel" for="isOwnBox">Own Box</label>
                </div>
                <div class="check">
                  <input type="checkbox" v-model="form.isStocked" class="checkInput" id="isStocked" :checked="form.isStocked" disabled>
                  <label class="checkLabel" for="isStocked">Stocked</label>
                </div>
                <div class="check">
                  <input type="checkbox" v-model="form.isDropShip" class="checkInput" id="isDropShip" :checked="form.isDropShip" disabled>
                  <label class="checkLabel" for="isDropShip">Drop Shipment</label>
                </div>
                <div class="check">
                  <input type="checkbox" v-model="form.discontinued" class="checkInput" id="discontinued" :checked="form.discontinued" disabled>
                  <label class="checkLabel" for="discontinued">Discontinued</label>
                </div>
                <div class="check">
                  <input type="checkbox" v-model="form.isSelfService" class="checkInput" id="isSelfService" :checked="form.isSelfService" disabled>
                  <label class="checkLabel" for="isSelfService">Self Service</label>
                </div>
                <div class="check">
                  <input type="checkbox" v-model="form.isExcludeAutoDelivery" class="checkInput" id="isExcludeAutoDelivery" :checked="form.isExcludeAutoDelivery" disabled>
                  <label class="checkLabel" for="isExcludeAutoDelivery">Exclude Auto Delivery</label>
                </div>
                <div class="check">
                  <input type="checkbox" v-model="form.isWebStoreFeatured" class="checkInput" id="isWebStoreFeatured" :checked="form.isWebStoreFeatured" disabled>
                  <label class="checkLabel" for="isWebStoreFeatured">Featured in Web Store</label>
                </div>
                <div class="check">
                  <input type="checkbox" v-model="form.isManufactured" class="checkInput" id="isManufactured" :checked="form.isManufactured" disabled>
                  <label class="checkLabel" for="isManufactured">Manufactured</label>
                </div>
                <div class="check">
                  <input type="checkbox" v-model="form.isPhantom" class="checkInput" id="isPhantom" :checked="form.isPhantom" disabled>
                  <label class="checkLabel" for="isPhantom">Phantom</label>
                </div>
                <div class="check">
                  <input type="checkbox" v-model="form.isKanban" class="checkInput" id="isKanban" :checked="form.isKanban" disabled>
                  <label class="checkLabel" for="isKanban">Kanban Controlled</label>
                </div>
                <div class="check">
                  <input type="checkbox" v-model="form.isAutoProduce" class="checkInput" id="isAutoProduce" :checked="form.isAutoProduce" disabled>
                  <label class="checkLabel" for="isAutoProduce">Auto Produce</label>
                </div>

              </div>
            </div>
          </div>
          
          <div class="columns mb-3">
            <div class="column is-full mb-3">
              <MaterialsProductDetailRecord action="view" :info="form" tab="basic" />
            </div>
          </div>

        </div>
      </div>

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