<script setup>
import { date, array } from 'alga-js'
import { DatePicker, TimePicker } from 'tedir-calendar'
import { SelectBox } from 'tedir-select'
import { toast } from 'bulma-toast'

const route = useRoute()
const organizationId = useCookie('logship_organization_id')

const props = defineProps({
  action: String,
  info: Object
})

const entries = ref([])
const form = ref({
  id: '',
  client: props.info?.client || '',
  clientId: props.info?.clientId || '',
  organization: props.info?.organization || '',
  organizationId: props.info?.organizationId || organizationId.value || '',
  inOut: props.info?.documentNo || '',
  inOutId: props.info?.id || '',
  isActive: true,
  documentNo: '',
  description: '',
  dateReceived: date.now('date'),
  receivedInfo: '',
  trackingInfo: '',
  shipDate: date.now('date'),
  boxCount: 1,
  cashOnDelivery: false,
  deliveryConfirmation: false,
  dryIceWeight: 0,
  handlingCharge: 0,
  height: 0,
  homeDeliveryPremiumDate: date.now('date'),
  homeDeliveryPremiumPhone: '',
  insuredAmount: 0,
  latestPickupTime: date.now('time'),
  length: 0,
  price: 0,
  priceActual: 0,
  rateInquiryMessage: '',
  shippingRespMessage: '',
  surcharges: 0,
  totalPrice: 0,
  trackingNo: '',
  weight: 0,
  width: 0,
  dutiesShipperAccount: '',
  shipperAccount: '',
  notificationMessage: '',
  isAccessible: false,
  isCargoAircraftOnly: false,
  isDryIce: false,
  isDutiable: false,
  isFutureDayShipment: false,
  isHazMat: false,
  isHoldAtLocation: false,
  isIgnoreZipNotFound: false,
  isIgnoreZipStateNotMatch: false,
  isResidential: false,
  processed: false,
  isSaturdayDelivery: false,
  isSaturdayPickup: false,
  estimatedWeight: 0,
  isVerbalConfirmation: false,
  isAddedHandling: false,
  shipper: '',
  shipperId: '',
  partnerLocation: '',
  partnerLocationId: '',
  currency: '',
  currencyId: '',
  uomLength: '',
  uomLengthId: '',
  uomWeight: '',
  uomWeightId: '',
  dotHazardClassOrDivision: '',
  dotHazardClassOrDivisionId: '',
  holdAddress: '',
  holdAddressId: '',
  homeDeliveryPremiumType: '',
  homeDeliveryPremiumTypeId: '',
  shippingProcessor: '',
  shippingProcessorId: '',
  notificationType: '',
  notificationTypeId: '',
  paymentRule: '',
  paymentRuleId: '',
  deliveryConfirmationType: '',
  deliveryConfirmationTypeId: '',
  shipperPackaging: '',
  shipperPackagingId: '',
  shipperLabel: '',
  shipperLabelId: '',
  shipperPickupType: '',
  shipperPickupTypeId: '',
  alert: {
    status: '',
    message: '',
    processing: false,
  }
})

const loading = ref({})
const getOptions = ref({})
const setOptions = async (url, key) => {
  loading.value[key] = true
  const res = await $fetch('/api/'+url, {
    headers: useRequestHeaders(['cookie'])
  })
  if(res) {
    getOptions.value[key] = res
  }
  loading.value[key] = false
}

watch(() => props.info, () => {
  form.value.client = props.info?.client || ''
  form.value.clientId = props.info?.clientId || ''
  form.value.organization = props.info?.organization || ''
  form.value.organizationId = props.info?.organizationId || organizationId.value || ''
  form.value.inOut = props.info?.documentNo || ''
  form.value.inOutId = props.info?.id || ''
})

const showDetailRecordModal = ref(false)
const closeDetailRecordModal = () => {
  showDetailRecordModal.value = false

  form.value = {
    id: '',
    client: props.info?.client || '',
    clientId: props.info?.clientId || '',
    organization: props.info?.organization || '',
    organizationId: props.info?.organizationId || organizationId.value || '',
    inOut: props.info?.documentNo || '',
    inOutId: props.info?.id || '',
    isActive: true,
    documentNo: '',
    description: '',
    dateReceived: date.now('date'),
    receivedInfo: '',
    trackingInfo: '',
    shipDate: date.now('date'),
    boxCount: 1,
    cashOnDelivery: false,
    deliveryConfirmation: false,
    dryIceWeight: 0,
    handlingCharge: 0,
    height: 0,
    homeDeliveryPremiumDate: date.now('date'),
    homeDeliveryPremiumPhone: '',
    insuredAmount: 0,
    latestPickupTime: date.now('time'),
    length: 0,
    price: 0,
    priceActual: 0,
    rateInquiryMessage: '',
    shippingRespMessage: '',
    surcharges: 0,
    totalPrice: 0,
    trackingNo: '',
    weight: 0,
    width: 0,
    dutiesShipperAccount: '',
    shipperAccount: '',
    notificationMessage: '',
    isAccessible: false,
    isCargoAircraftOnly: false,
    isDryIce: false,
    isDutiable: false,
    isFutureDayShipment: false,
    isHazMat: false,
    isHoldAtLocation: false,
    isIgnoreZipNotFound: false,
    isIgnoreZipStateNotMatch: false,
    isResidential: false,
    processed: false,
    isSaturdayDelivery: false,
    isSaturdayPickup: false,
    estimatedWeight: 0,
    isVerbalConfirmation: false,
    isAddedHandling: false,
    shipper: '',
    shipperId: '',
    partnerLocation: '',
    partnerLocationId: '',
    currency: '',
    currencyId: '',
    uomLength: '',
    uomLengthId: '',
    uomWeight: '',
    uomWeightId: '',
    dotHazardClassOrDivision: '',
    dotHazardClassOrDivisionId: '',
    holdAddress: '',
    holdAddressId: '',
    homeDeliveryPremiumType: '',
    homeDeliveryPremiumTypeId: '',
    shippingProcessor: '',
    shippingProcessorId: '',
    notificationType: '',
    notificationTypeId: '',
    paymentRule: '',
    paymentRuleId: '',
    deliveryConfirmationType: '',
    deliveryConfirmationTypeId: '',
    shipperPackaging: '',
    shipperPackagingId: '',
    shipperLabel: '',
    shipperLabelId: '',
    shipperPickupType: '',
    shipperPickupTypeId: '',
    alert: {
      status: '',
      message: '',
      processing: false,
    }
  }
}

const retrieve = async () => {
  if(route.params?.id) {
    const res = await $fetch('/api/inouts/'+route.params.id+'/packages', {
      headers: useRequestHeaders(['cookie'])
    })
    if(res) {
      entries.value = res.records.map(item => {
        return {
          id: item?.id || item?.uid || '',
          client: item?.AD_Client_ID?.identifier || '',
          clientId: item?.AD_Client_ID?.id || '',
          organization: item?.AD_Org_ID?.identifier || '',
          organizationId: item?.AD_Org_ID?.id || '',
          inOut: item?.M_InOut_ID?.identifier || '',
          inOutId: item?.M_InOut_ID?.id || '',
          isActive: item?.IsActive ?? true,
          documentNo: item?.DocumentNo || '',
          description: item?.Description || '',
          dateReceived: item?.DateReceived || date.now('date'),
          receivedInfo: item?.ReceivedInfo || '',
          trackingInfo: item?.TrackingInfo || '',
          shipDate: item?.ShipDate || date.now('date'),
          boxCount: item?.BoxCount || 1,
          cashOnDelivery: item?.CashOnDelivery ?? false,
          deliveryConfirmation: item?.DeliveryConfirmation ?? false,
          dryIceWeight: item?.DryIceWeight || 0,
          handlingCharge: item?.HandlingCharge || 0,
          height: item?.Height || 0,
          homeDeliveryPremiumDate: item?.HomeDeliveryPremiumDate || date.now('date'),
          homeDeliveryPremiumPhone: item?.HomeDeliveryPremiumPhone || '',
          insuredAmount: item?.InsuredAmount || 0,
          latestPickupTime: item?.LatestPickupTime?.replace('Z', '') || date.now('time'),
          length: item?.Length || 0,
          price: item?.Price || 0,
          priceActual: item?.PriceActual || 0,
          rateInquiryMessage: item?.RateInquiryMessage || '',
          shippingRespMessage: item?.ShippingRespMessage || '',
          surcharges: item?.Surcharges || 0,
          totalPrice: item?.TotalPrice || 0,
          trackingNo: item?.TrackingNo || '',
          weight: item?.Weight || 0,
          width: item?.Width || 0,
          dutiesShipperAccount: item?.DutiesShipperAccount || '',
          shipperAccount: item?.ShipperAccount || '',
          notificationMessage: item?.NotificationMessage || '',
          isAccessible: item?.IsAccessible ?? false,
          isCargoAircraftOnly: item?.IsCargoAircraftOnly ?? false,
          isDryIce: item?.IsDryIce ?? false,
          isDutiable: item?.IsDutiable ?? false,
          isFutureDayShipment: item?.IsFutureDayShipment ?? false,
          isHazMat: item?.IsHazMat ?? false,
          isHoldAtLocation: item?.IsHoldAtLocation ?? false,
          isIgnoreZipNotFound: item?.IsIgnoreZipNotFound ?? false,
          isIgnoreZipStateNotMatch: item?.IsIgnoreZipStateNotMatch ?? false,
          isResidential: item?.IsResidential ?? false,
          processed: item?.Processed ?? false,
          isSaturdayDelivery: item?.IsSaturdayDelivery ?? false,
          isSaturdayPickup: item?.IsSaturdayPickup ?? false,
          estimatedWeight: item?.EstimatedWeight || 0,
          isVerbalConfirmation:item?.IsVerbalConfirmation ??  false,
          isAddedHandling: item?.IsAddedHandling ?? false,
          shipper: item?.M_Shipper_ID?.identifier || '',
          shipperId: item?.M_Shipper_ID?.id || '',
          partnerLocation: item?.C_BPartner_Location_ID?.identifier || '',
          partnerLocationId: item?.C_BPartner_Location_ID?.id || '',
          currency: item?.C_Currency_ID?.identifier || '',
          currencyId: item?.C_Currency_ID?.id || '',
          uomLength: item?.C_UOM_Length_ID?.identifier || '',
          uomLengthId: item?.C_UOM_Length_ID?.id || '',
          uomWeight: item?.C_UOM_Weight_ID?.identifier || '',
          uomWeightId: item?.C_UOM_Weight_ID?.id || '',
          dotHazardClassOrDivision: item?.DotHazardClassOrDivision?.identifier || '',
          dotHazardClassOrDivisionId: item?.DotHazardClassOrDivision?.id || '',
          holdAddress: item?.HoldAddress_ID?.identifier || '',
          holdAddressId: item?.HoldAddress_ID?.id || '',
          homeDeliveryPremiumType: item?.HomeDeliveryPremiumType?.identifier || '',
          homeDeliveryPremiumTypeId: item?.HomeDeliveryPremiumType?.id || '',
          shippingProcessor: item?.M_ShippingProcessor_ID?.identifier || '',
          shippingProcessorId: item?.M_ShippingProcessor_ID?.id || '',
          notificationType:item?.NotificationType?.identifier ||  '',
          notificationTypeId: item?.NotificationType?.id || '',
          paymentRule: item?.PaymentRule?.identifier || '',
          paymentRuleId: item?.PaymentRule?.id || '',
          deliveryConfirmationType: item?.DeliveryConfirmationType?.identifier || '',
          deliveryConfirmationTypeId: item?.DeliveryConfirmationType?.id || '',
          shipperPackaging: '',
          shipperPackagingId: '',
          shipperLabel: '',
          shipperLabelId: '',
          shipperPickupType: '',
          shipperPickupTypeId: '',
          alert: {
            status: '',
            message: '',
            processing: false,
          }
        }
      })
    }
  }
}
onMounted(retrieve)

const destroy = async (entry, index) => {
  //entries.value.splice(index, 1)

  if(entry.id) {
    const res = await $fetch('/api/inouts/'+entry.id+'/packages', {
      method: 'DELETE',
      headers: useRequestHeaders(['cookie'])
    })
    if(res) {
      retrieve()
    }
  }
}

const save = async () => {
  if(form.value.id !== '') {
    const res = await $fetch('/api/inouts/'+route.params.id+'/packages', {
      method: 'PUT',
      headers: useRequestHeaders(['cookie']),
      body: {
        id: form.value.id,
        isActive: form.value.isActive,
        documentNo: form.value.documentNo,
        description: form.value.description,
        dateReceived: form.value.dateReceived,
        receivedInfo: form.value.receivedInfo,
        trackingInfo: form.value.trackingInfo,
        shipDate: form.value.shipDate,
        boxCount: form.value.boxCount,
        cashOnDelivery: form.value.cashOnDelivery,
        deliveryConfirmation: form.value.deliveryConfirmation,
        dryIceWeight: form.value.dryIceWeight,
        handlingCharge: form.value.handlingCharge,
        height: form.value.height,
        homeDeliveryPremiumDate: form.value.homeDeliveryPremiumDate,
        homeDeliveryPremiumPhone: form.value.homeDeliveryPremiumPhone,
        insuredAmount: form.value.insuredAmount,
        latestPickupTime: form.value.latestPickupTime+'Z',
        length: form.value.length,
        price: form.value.price,
        priceActual: form.value.priceActual,
        rateInquiryMessage: form.value.rateInquiryMessage,
        shippingRespMessage: form.value.shippingRespMessage,
        surcharges: form.value.surcharges,
        totalPrice: form.value.totalPrice,
        trackingNo: form.value.trackingNo,
        weight: form.value.weight,
        width: form.value.width,
        dutiesShipperAccount: form.value.dutiesShipperAccount,
        shipperAccount: form.value.shipperAccount,
        notificationMessage: form.value.notificationMessage,
        isAccessible: form.value.isAccessible,
        isCargoAircraftOnly: form.value.isCargoAircraftOnly,
        isDryIce: form.value.isDryIce,
        isDutiable: form.value.isDutiable,
        isFutureDayShipment: form.value.isFutureDayShipment,
        isHazMat: form.value.isHazMat,
        isHoldAtLocation: form.value.isHoldAtLocation,
        isIgnoreZipNotFound: form.value.isIgnoreZipNotFound,
        isIgnoreZipStateNotMatch: form.value.isIgnoreZipStateNotMatch,
        isResidential: form.value.isResidential,
        processed: form.value.processed,
        isSaturdayDelivery: form.value.isSaturdayDelivery,
        isSaturdayPickup: form.value.isSaturdayPickup,
        estimatedWeight: form.value.estimatedWeight,
        isVerbalConfirmation: form.value.isVerbalConfirmation,
        isAddedHandling: form.value.isAddedHandling,
        shipperId: form.value.shipperId,
        partnerLocationId: form.value.partnerLocationId,
        currencyId: form.value.currencyId,
        uomLengthId: form.value.uomLengthId,
        uomWeightId: form.value.uomWeightId,
        dotHazardClassOrDivisionId: form.value.dotHazardClassOrDivisionId,
        holdAddressId: form.value.holdAddressId,
        homeDeliveryPremiumTypeId: form.value.homeDeliveryPremiumTypeId,
        shippingProcessorId: form.value.shippingProcessorId,
        notificationTypeId: form.value.notificationTypeId,
        paymentRuleId: form.value.paymentRuleId,
        deliveryConfirmationTypeId: form.value.deliveryConfirmationTypeId,
        shipperPackagingId: form.value.shipperPackagingId,
        shipperLabelId: form.value.shipperLabelId,
        shipperPickupTypeId: form.value.shipperPickupTypeId,
      }
    })
    if(Number(res.status) === 200) {
      closeDetailRecordModal()
      retrieve()
      toast({
        message: 'Record saved!',
        type: 'is-success',
        duration: 2000
      })
    } else {
      //form.value.alert.status = res.status
      //form.value.alert.message = res.message
      form.value.alert.processing = false
      toast({
        message: res.message || 'Save error',
        type: 'is-danger',
        duration: 2000
      })
    }
  } else {
    const res = await $fetch('/api/inouts/'+route.params.id+'/packages', {
      method: 'POST',
      headers: useRequestHeaders(['cookie']),
      body: {
        organizationId: form.value.organizationId || organizationId.value,
        isActive: form.value.isActive,
        documentNo: form.value.documentNo,
        description: form.value.description,
        dateReceived: form.value.dateReceived,
        receivedInfo: form.value.receivedInfo,
        trackingInfo: form.value.trackingInfo,
        shipDate: form.value.shipDate,
        boxCount: form.value.boxCount,
        cashOnDelivery: form.value.cashOnDelivery,
        deliveryConfirmation: form.value.deliveryConfirmation,
        dryIceWeight: form.value.dryIceWeight,
        handlingCharge: form.value.handlingCharge,
        height: form.value.height,
        homeDeliveryPremiumDate: form.value.homeDeliveryPremiumDate,
        homeDeliveryPremiumPhone: form.value.homeDeliveryPremiumPhone,
        insuredAmount: form.value.insuredAmount,
        latestPickupTime: form.value.latestPickupTime+'Z',
        length: form.value.length,
        price: form.value.price,
        priceActual: form.value.priceActual,
        rateInquiryMessage: form.value.rateInquiryMessage,
        shippingRespMessage: form.value.shippingRespMessage,
        surcharges: form.value.surcharges,
        totalPrice: form.value.totalPrice,
        trackingNo: form.value.trackingNo,
        weight: form.value.weight,
        width: form.value.width,
        dutiesShipperAccount: form.value.dutiesShipperAccount,
        shipperAccount: form.value.shipperAccount,
        notificationMessage: form.value.notificationMessage,
        isAccessible: form.value.isAccessible,
        isCargoAircraftOnly: form.value.isCargoAircraftOnly,
        isDryIce: form.value.isDryIce,
        isDutiable: form.value.isDutiable,
        isFutureDayShipment: form.value.isFutureDayShipment,
        isHazMat: form.value.isHazMat,
        isHoldAtLocation: form.value.isHoldAtLocation,
        isIgnoreZipNotFound: form.value.isIgnoreZipNotFound,
        isIgnoreZipStateNotMatch: form.value.isIgnoreZipStateNotMatch,
        isResidential: form.value.isResidential,
        processed: form.value.processed,
        isSaturdayDelivery: form.value.isSaturdayDelivery,
        isSaturdayPickup: form.value.isSaturdayPickup,
        estimatedWeight: form.value.estimatedWeight,
        isVerbalConfirmation: form.value.isVerbalConfirmation,
        isAddedHandling: form.value.isAddedHandling,
        shipperId: form.value.shipperId,
        partnerLocationId: form.value.partnerLocationId,
        currencyId: form.value.currencyId,
        uomLengthId: form.value.uomLengthId,
        uomWeightId: form.value.uomWeightId,
        dotHazardClassOrDivisionId: form.value.dotHazardClassOrDivisionId,
        holdAddressId: form.value.holdAddressId,
        homeDeliveryPremiumTypeId: form.value.homeDeliveryPremiumTypeId,
        shippingProcessorId: form.value.shippingProcessorId,
        notificationTypeId: form.value.notificationTypeId,
        paymentRuleId: form.value.paymentRuleId,
        deliveryConfirmationTypeId: form.value.deliveryConfirmationTypeId,
        shipperPackagingId: form.value.shipperPackagingId,
        shipperLabelId: form.value.shipperLabelId,
        shipperPickupTypeId: form.value.shipperPickupTypeId,
        inOutId: route.params.id,
      }
    })
    if(Number(res.status) === 200) {
      closeDetailRecordModal()
      retrieve()
      toast({
        message: 'Record created!',
        type: 'is-success',
        duration: 2000
      })
    } else {
      //form.value.alert.status = res.status
      //form.value.alert.message = res.message
      form.value.alert.processing = false
      toast({
        message: res.message || 'Save error',
        type: 'is-danger',
        duration: 2000
      })
    }
  }
}
</script>

<template>
  <div class="detailRecordResponsive">
    <div class="tableResponsive">
      <table class="table tableList tableFlush">
        <thead>
          <tr> 
            <th>Document No</th>
            <th>Latest Pickup Time</th>
            <th>Date Received</th>
            <th class="w-100px">Active</th>
            <th v-if="action !== 'view'" class="w-100px">Action</th>
          </tr>
        </thead>
        <tbody>
          <tr v-if="Number(entries.length) === 0">
            <td :colspan="action !== 'view' ? 5 : 4" class="align-center">No detail record yet, please add a new one.</td>
          </tr>
          <tr v-for="(entry, index) in entries" :key="index">
            <td>{{ entry.documentNo }}</td>
            <td>{{ entry.latestPickupTime }}</td>
            <td>{{ entry.dateReceived }}</td>
            <td>
              <div class="check">
                <input type="checkbox" v-model="entry.isActive" class="checkInput" :id="'isActive_'+index" :checked="entry.isActive" disabled>
                <label class="checkLabel" :for="'isActive_'+index">Active</label>
              </div>
            </td>
            <td v-if="action !== 'view'">
              <div class="d-flex justify-flexEnd gap-5px">
                <!--<span @click="form = entry; showDetailRecordModal = true;" class="cursor-pointer fg-warning">
                  <i class="menu-icon tf-icons ti ti-pencil"></i>
                </span>-->
                <span @click="destroy(entry, index)" class="cursor-pointer fg-danger">
                  <i class="menu-icon tf-icons ti ti-trash"></i>
                </span>
              </div>
            </td>
          </tr>
          <tr v-if="action !== 'view' && info.docStatusId !== 'CO'">
            <td colspan="5">
              <button type="button" @click="showDetailRecordModal = true;" class="button">Add Record</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <Teleport to="body">
    <div class="modal" :class="{'active': showDetailRecordModal}" :style="{display: showDetailRecordModal ? 'block' : 'none'}">
      <div class="modalDialog modalCenter modalPrintPreview" @click.self="closeDetailRecordModal">
        <div class="modalContent">
          <div class="modalHeader">
            <h3 class="modalTitle">Package</h3>
            <div class="cursor-pointer" @click="closeDetailRecordModal">
              <span class="tf-icon ti ti-x ti-sm me-1"></span>
            </div>
          </div>
          <div class="modalBody">
            <div class="my-5 mx-5">
              <AlertAction v-model='form.alert.status' :alert="form.alert" />
              <div class="columns">
                <div class="column is-two-thirds">
                  <div class="columns">
                    <div class="column is-half">
                      <label class="label d-block">Document No</label>
                      <input type="text" v-model="form.documentNo" class="input" :readonly="action === 'view' || info.docStatusId === 'CO'" />

                      <label class="label d-block mt-2">Info Received</label>
                      <input type="text" v-model="form.receivedInfo" class="input" :readonly="action === 'view' || info.docStatusId === 'CO'" />

                      <label class="label d-block mt-2">Weight</label>
                      <input type="text" v-model="form.weight" class="input" :readonly="action === 'view' || info.docStatusId === 'CO'" />

                      <label class="label d-block mt-2">Length</label>
                      <input type="text" v-model="form.length" class="input" :readonly="action === 'view' || info.docStatusId === 'CO'" />
                    </div>
                    <div class="column is-half">
                      <label class="label d-block">Latest Pickup Time</label>
                      <input v-if="info.docStatusId === 'CO'" type="text" :value="form.latestPickupTime" class="input" readonly />
                      <TimePicker v-else v-model="form.latestPickupTime" />

                      <label class="label d-block mt-2">Date Received</label>
                      <input v-if="info.docStatusId === 'CO'" type="text" :value="form.dateReceived" class="input" readonly />
                      <DatePicker v-else v-model="form.dateReceived" />

                      <label class="label d-block mt-2">UOM for Weight</label>
                      <input v-if="info.docStatusId === 'CO'" type="text" :value="form.uomWeight" class="input" readonly />
                      <ClientOnly v-else>
                        <SelectBox v-model="form.uomWeightId" :options="getOptions?.['weight_units']?.records || [{id: form.uomWeightId, Name: form.uomWeight}]" prop="Name" dataprop="id" datatype="string" :size="5" @click="setOptions('models/c_uom', 'weight_units')" :loading="loading?.['weight_units'] ?? true" placeholder="----" />
                      </ClientOnly>

                      <label class="label d-block mt-2">UOM for Length</label>
                      <input v-if="info.docStatusId === 'CO'" type="text" :value="form.uomLength" class="input" readonly />
                      <ClientOnly v-else>
                        <SelectBox v-model="form.uomLengthId" :options="getOptions?.['length_units']?.records || [{id: form.uomLengthId, Name: form.uomLength}]" prop="Name" dataprop="id" datatype="string" :size="5" @click="setOptions('models/c_uom', 'length_units')" :loading="loading?.['length_units'] ?? true" placeholder="----" />
                      </ClientOnly>
                    </div>
                  </div>

                  <div v-if="form.uomLengthId !== ''" class="columns">
                    <div class="column is-one-third">
                      <label class="label d-block mt-2">Estimated Weight</label>
                      <input type="text" :value="form.estimatedWeight" class="input" readonly />
                    </div>
                    <div class="column is-one-third">
                      <label class="label d-block mt-2">Width</label>
                      <input type="text" v-model="form.width" class="input" :readonly="action === 'view' || info.docStatusId === 'CO'" />
                    </div>
                    <div class="column is-one-third">
                      <label class="label d-block mt-2">Height</label>
                      <input type="text" v-model="form.height" class="input" :readonly="action === 'view' || info.docStatusId === 'CO'" />
                    </div>
                  </div>

                  <div class="columns">
                    <div class="column is-half">
                      <label class="label d-block mt-2">Shipper *</label>
                      <input v-if="info.docStatusId === 'CO'" 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', 'shippers')" :loading="loading?.['shippers'] ?? true" placeholder="----" />
                      </ClientOnly>

                      <label class="label d-block mt-2">Ship Date (For FedEx only)</label>
                      <input v-if="info.docStatusId === 'CO'" type="text" :value="form.shipDate" class="input" readonly />
                      <DatePicker v-else v-model="form.shipDate" />
                    </div>
                    <div class="column is-half">
                      <label class="label d-block mt-2">Shipping Processor</label>
                      <input type="text" class="input" readonly />
                      <!--<ClientOnly>
                        <SelectBox v-model="form.shippingProcessorId" :options="getOptions?.['shipper_processors']?.records || [{id: form.shippingProcessorId, Name: form.shippingProcessor}]" prop="Name" dataprop="id" datatype="string" :size="5" @click="setOptions('models/m_shippingprocessor', 'shipper_processors')" :loading="loading?.['shipper_processors'] ?? true" placeholder="----" />
                      </ClientOnly>-->

                      <label class="label d-block mt-2">Box Count</label>
                      <input type="text" v-model="form.boxCount" class="input" :readonly="action === 'view' || info.docStatusId === 'CO'" />
                    </div>
                  </div>

                  <div class="columns">
                    <div class="column is-one-third">
                      <label class="label d-block mt-2">Shipper Packaging</label>
                      <input v-if="info.docStatusId === 'CO'" type="text" :value="form.shipperPackaging" class="input" readonly />
                      <ClientOnly v-else>
                        <SelectBox v-model="form.shipperPackagingId" :options="getOptions?.['shipper_packagings']?.records || [{id: form.shipperPackagingId, Name: form.shipperPackaging}]" prop="Name" dataprop="id" datatype="string" :size="5" @click="setOptions('models/m_shipperpackaging', 'shipper_packagings')" :loading="loading?.['shipper_packagings'] ?? true" placeholder="----" />
                      </ClientOnly>
                    </div>
                    <div class="column is-one-third">
                      <label class="label d-block mt-2">Shipper Labels</label>
                      <input v-if="info.docStatusId === 'CO'" type="text" :value="form.shipperLabel" class="input" readonly />
                      <ClientOnly v-else>
                        <SelectBox v-model="form.shipperLabelId" :options="getOptions?.['shipper_labels']?.records || [{id: form.shipperLabelId, Name: form.shipperLabel}]" prop="Name" dataprop="id" datatype="string" :size="5" @click="setOptions('models/m_shipperlabels', 'shipper_labels')" :loading="loading?.['shipper_labels'] ?? true" placeholder="----" />
                      </ClientOnly>
                    </div>
                    <div class="column is-one-third">
                      <label class="label d-block mt-2">Shipper Pickup Types</label>
                      <input v-if="info.docStatusId === 'CO'" type="text" :value="form.shipperPickupType" class="input" readonly />
                      <ClientOnly v-else>
                        <SelectBox v-model="form.shipperPickupTypeId" :options="getOptions?.['shipper_pickup_types']?.records || [{id: form.shipperPickupTypeId, Name: form.shipperPickupType}]" prop="Name" dataprop="id" datatype="string" :size="5" @click="setOptions('models/m_shipperpickuptypes', 'shipper_pickup_types')" :loading="loading?.['shipper_pickup_types'] ?? true" placeholder="----" />
                      </ClientOnly>
                    </div>
                  </div>

                  <div class="columns">
                    <div class="column is-half">
                      <label class="label d-block mt-2">Insurance</label>
                      <input type="text" class="input" readonly />
                      
                      <label class="label d-block mt-2">Freight Charges</label>
                      <input type="text" class="input" readonly />

                      <label class="label d-block mt-2">Shipper Account Number</label>
                      <input type="text" v-model="form.shipperAccount" class="input" :readonly="action === 'view' || info.docStatusId === 'CO'" />

                      <label class="label d-block mt-2">Partner Location (For UPS only)</label>
                      <input v-if="info.docStatusId === 'CO'" type="text" :value="form.partnerLocation" class="input" readonly />
                      <ClientOnly v-else>
                        <SelectBox v-model="form.partnerLocationId" :options="getOptions?.['partner_locations']?.records || [{id: form.partnerLocationId, Name: form.partnerLocation}]" prop="Name" dataprop="id" datatype="string" :size="5" @click="setOptions('partners/partners/'+info.partnerId+'/locations', 'partner_locations')" :loading="loading?.['partner_locations'] ?? true" placeholder="----" />
                      </ClientOnly>
                    </div>
                    <div class="column is-half">
                      <label class="label d-block mt-2">Insured Amount</label>
                      <input type="text" v-model="form.insuredAmount" class="input" :readonly="action === 'view' || info.docStatusId === 'CO'" />
                      
                      <label class="label d-block mt-2">Freight Terms</label>
                      <input type="text" class="input" readonly />

                      <label class="label d-block mt-2">Duties Shipper Account (For FedEx only)</label>
                      <input type="text" v-model="form.dutiesShipperAccount" class="input" :readonly="action === 'view' || info.docStatusId === 'CO'" />

                      <label class="label d-block mt-2">Handling Charge</label>
                      <input type="text" v-model="form.handlingCharge" class="input" :readonly="action === 'view' || info.docStatusId === 'CO'" />
                    </div>
                  </div>

                  <div class="columns">
                    <div class="column is-half">
                      <template v-if="form.cashOnDelivery === true">
                        <label class="label d-block mt-2">Payment Rule</label>
                        <select v-model="form.paymentRuleId" class="select" :disabled="action === 'view' || info.docStatusId === 'CO'">
                          <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>
                      </template>
                      
                      <template v-if="form.isHazMat === true">
                        <label class="label d-block mt-2">Hazardous Materials (For FedEx only)</label>
                        <select v-model="form.dotHazardClassOrDivisionId" class="select" :disabled="action === 'view' || info.docStatusId === 'CO'">
                          <option value="2.1">2.1 - Flammable Gas</option>
                          <option value="2.2">2.2 - Nonflammable Gas</option>
                          <option value="4.1">4.1 - Flammable Solids</option>
                          <option value="4.2">4.2 - Spontaneous Combustibles</option>
                          <option value="4.3">4.3 - Dangerous When Wet</option>
                          <option value="5.1">5.1 - Oxidizers</option>
                          <option value="5.2">5.2 - Organic Peroxides</option>
                          <option value="6.1">6.1 - Toxic Substances</option>
                          <option value="6.2">6.2 - Infectious Substances</option>
                          <option value="Class 1">Class 1 - Explosives</option>
                          <option value="Class 2">Class 2 - Gases</option>
                          <option value="Class 3">Class 3 - Flammable Liquids</option>
                          <option value="Class 4">Class 4</option>
                          <option value="Class 5">Class 5 - Oxidizing Substances and Organic Peroxides</option>
                          <option value="Class 6">Class 6 - Toxic (Poisonous) and Infectious Substances</option>
                          <option value="Class 7">Class 7 - Radioactive Material</option>
                          <option value="Class 8">Class 8 - Corrosives</option>
                          <option value="Class 9">Class 9 - Miscellaneous Dangerous Goods</option>
                        </select>
                      </template>

                      <template v-if="form.isHoldAtLocation === true">
                        <label class="label d-block mt-2">Hold Address (For FedEx only)</label>
                        <input v-if="info.docStatusId === 'CO'" type="text" :value="form.holdAddress" class="input" readonly />
                        <ClientOnly v-else>
                          <SelectBox v-model="form.holdAddressId" :options="getOptions?.['hold_address']?.records || [{id: form.holdAddressId, Name: form.holdAddress}]" prop="Name" dataprop="id" datatype="string" :size="5" @click="setOptions('partners/partners/'+info.partnerId+'/locations', 'hold_address')" :loading="loading?.['hold_address'] ?? true" placeholder="----" />
                        </ClientOnly>
                      </template>
                    </div>
                    <div class="column is-half">
                      <template v-if="form.deliveryConfirmation === true">
                        <label class="label d-block mt-2">Delivery Confirmation Type (For FedEx only)</label>
                        <select v-model="form.deliveryConfirmationTypeId" class="select" :disabled="action === 'view' || info.docStatusId === 'CO'">
                          <option value="ADULT">Adult</option>
                          <option value="DIRECT">Direct</option>
                          <option value="INDIRECT">Indirect</option>
                          <option value="SERVICE_DEFAULT">Service Default</option>
                        </select>
                      </template>

                      <template v-if="form.isDryIce === true">
                        <label class="label d-block mt-2">Dry Ice Weight (For FedEx only)</label>
                        <input type="text" v-model="form.dryIceWeight" class="input" :readonly="action === 'view' || info.docStatusId === 'CO'" />
                      </template>
                    </div>
                  </div>

                  <div v-if="form.isResidential === true" class="columns">
                    <div class="column is-one-third">
                      <label class="label d-block mt-2">Home Delivery Premium Type <br />(For FedEx only)</label>
                      <select v-model="form.homeDeliveryPremiumTypeId" class="select" :disabled="action === 'view' || info.docStatusId === 'CO'">
                        <option value="APPOINTMENT">Appointment</option>
                        <option value="DATE_CERTAIN">Date Certain</option>
                        <option value="EVENING">Evening</option>
                      </select>
                    </div>
                    <div class="column is-one-third">
                      <label class="label d-block mt-2">Phone Number <br />(For FedEx only)</label>
                      <input type="text" v-model="form.homeDeliveryPremiumPhone" class="input" :readonly="action === 'view' || info.docStatusId === 'CO'" />
                    </div>
                    <div class="column is-one-third">
                      <label class="label d-block mt-2">Date <br />(For FedEx only)</label>
                      <input v-if="info.docStatusId === 'CO'" type="text" :value="form.homeDeliveryPremiumDate" class="input" readonly />
                      <DatePicker v-else v-model="form.homeDeliveryPremiumDate" />
                    </div>
                  </div>

                  <div class="columns">
                    <div class="column is-half">
                      <label class="label d-block mt-2">Notification Type</label>
                      <select v-model="form.notificationTypeId" class="select" :disabled="action === 'view' || info.docStatusId === 'CO'">
                        <option value="RE">Recipient</option>
                        <option value="RS">Recipient / Sender</option>
                        <option value="SE">Sender</option>
                      </select>
                      
                    </div>
                    <div class="column is-half">
                      <template v-if="form.notificationTypeId !== ''">
                        <label class="label d-block mt-2">Notification Message</label>
                        <input type="text" v-model="form.notificationMessage" class="input" :readonly="action === 'view' || info.docStatusId === 'CO'" />
                      </template>
                    </div>
                  </div>

                  <div class="columns">
                    <div class="column is-half">
                      <label class="label d-block mt-2">Price</label>
                      <input type="text" v-model="form.price" class="input" :readonly="action === 'view' || info.docStatusId === 'CO'" />
                      
                      <label class="label d-block mt-2">Surcharges</label>
                      <input type="text" v-model="form.surcharges" class="input" :readonly="action === 'view' || info.docStatusId === 'CO'" />
                      
                      <label class="label d-block mt-2">Tracking No</label>
                      <input type="text" v-model="form.trackingNo" class="input" :readonly="action === 'view' || info.docStatusId === 'CO'" />

                      <label class="label d-block mt-2">Rate Inquiry Message</label>
                      <textarea v-model="form.rateInquiryMessage" class="input" :disabled="action === 'view' || info.docStatusId === 'CO'"></textarea>
                    </div>
                    <div class="column is-half">
                      <label class="label d-block mt-2">Currency</label>
                      <input v-if="info.docStatusId === 'CO'" 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('models/c_currency', 'currencies')" :loading="loading?.['currencies'] ?? true" placeholder="----" />
                      </ClientOnly>

                      <label class="label d-block mt-2">Total Price</label>
                      <input type="text" :value="form.totalPrice" class="input" readonly />
                      
                      <label class="label d-block mt-2">Tracking Info</label>
                      <input type="text" v-model="form.trackingInfo" class="input" :readonly="action === 'view' || info.docStatusId === 'CO'" />

                      <label class="label d-block mt-2">Response Message</label>
                      <textarea v-model="form.shippingRespMessage" class="input" :disabled="action === 'view' || info.docStatusId === 'CO'"></textarea>
                    </div>
                  </div>

                  <label class="label d-block mt-2">Description</label>
                  <textarea v-model="form.description" class="input"></textarea>
                </div>
                <div class="column is-one-third">
                  <label class="label d-block">Tenant</label>
                  <input type="text" :value="form.client" class="input" readonly />

                  <label class="label d-block">Organization</label>
                  <input type="text" :value="form.organization" class="input" readonly />

                  <label class="label d-block">Shipment</label>
                  <input type="text" :value="form.inOut" class="input" readonly />

                  <label class="label d-block">Status</label>
                  <div class="d-flex flexDirection-column">
                    <div class="check">
                      <input type="checkbox" v-model="form.isActive" class="checkInput" id="isActive" :checked="form.isActive" :disabled="action === 'view' || info.docStatusId === 'CO'">
                      <label class="checkLabel" for="isActive">Active</label>
                    </div>
                    <div class="check">
                      <input type="checkbox" v-model="form.cashOnDelivery" class="checkInput" id="cashOnDelivery" :checked="form.cashOnDelivery" :disabled="action === 'view' || info.docStatusId === 'CO'">
                      <label class="checkLabel" for="cashOnDelivery">Cash On Delivery</label>
                    </div>
                    <div class="check">
                      <input type="checkbox" v-model="form.deliveryConfirmation" class="checkInput" id="deliveryConfirmation" :checked="form.deliveryConfirmation" :disabled="action === 'view' || info.docStatusId === 'CO'">
                      <label class="checkLabel" for="deliveryConfirmation">Delivery Confirmation</label>
                    </div>
                    <div class="check">
                      <input type="checkbox" v-model="form.isAccessible" class="checkInput" id="isAccessible" :checked="form.isAccessible" :disabled="action === 'view' || info.docStatusId === 'CO'">
                      <label class="checkLabel" for="isAccessible">Accessible (For FedEx only)</label>
                    </div>
                    <div class="check">
                      <input type="checkbox" v-model="form.isCargoAircraftOnly" class="checkInput" id="isCargoAircraftOnly" :checked="form.isCargoAircraftOnly" :disabled="action === 'view' || info.docStatusId === 'CO'">
                      <label class="checkLabel" for="isCargoAircraftOnly">Cargo Aircraft Only (For FedEx only)</label>
                    </div>
                    <div class="check">
                      <input type="checkbox" v-model="form.isDryIce" class="checkInput" id="isDryIce" :checked="form.isDryIce" :disabled="action === 'view' || info.docStatusId === 'CO'">
                      <label class="checkLabel" for="isDryIce">Dry Ice (For FedEx only)</label>
                    </div>
                    <div class="check">
                      <input type="checkbox" v-model="form.isDutiable" class="checkInput" id="isDutiable" :checked="form.isDutiable" :disabled="action === 'view' || info.docStatusId === 'CO'">
                      <label class="checkLabel" for="isDutiable">Dutiable</label>
                    </div>
                    <div class="check">
                      <input type="checkbox" v-model="form.isFutureDayShipment" class="checkInput" id="isFutureDayShipment" :checked="form.isFutureDayShipment" :disabled="action === 'view' || info.docStatusId === 'CO'">
                      <label class="checkLabel" for="isFutureDayShipment">Future Day Shipment (FedEx only)</label>
                    </div>
                    <div class="check">
                      <input type="checkbox" v-model="form.isHazMat" class="checkInput" id="isHazMat" :checked="form.isHazMat" :disabled="action === 'view' || info.docStatusId === 'CO'">
                      <label class="checkLabel" for="isHazMat">Hazardous Materials (FedEx only)</label>
                    </div>
                    <div class="check">
                      <input type="checkbox" v-model="form.isHoldAtLocation" class="checkInput" id="isHoldAtLocation" :checked="form.isHoldAtLocation" :disabled="action === 'view' || info.docStatusId === 'CO'">
                      <label class="checkLabel" for="isHoldAtLocation">Hold At Location (For FedEx only)</label>
                    </div>
                    <div class="check">
                      <input type="checkbox" v-model="form.isIgnoreZipNotFound" class="checkInput" id="isIgnoreZipNotFound" :checked="form.isIgnoreZipNotFound" :disabled="action === 'view' || info.docStatusId === 'CO'">
                      <label class="checkLabel" for="isIgnoreZipNotFound">Ignore Zip Not Found</label>
                    </div>
                    <div class="check">
                      <input type="checkbox" v-model="form.isIgnoreZipStateNotMatch" class="checkInput" id="isIgnoreZipStateNotMatch" :checked="form.isIgnoreZipStateNotMatch" :disabled="action === 'view' || info.docStatusId === 'CO'">
                      <label class="checkLabel" for="isIgnoreZipStateNotMatch">Ignore Zip State Not Match</label>
                    </div>
                    <div class="check">
                      <input type="checkbox" v-model="form.isResidential" class="checkInput" id="isResidential" :checked="form.isResidential" :disabled="action === 'view' || info.docStatusId === 'CO'">
                      <label class="checkLabel" for="isResidential">Residential</label>
                    </div>
                    <div class="check">
                      <input type="checkbox" v-model="form.isSaturdayDelivery" class="checkInput" id="isSaturdayDelivery" :checked="form.isSaturdayDelivery" :disabled="action === 'view' || info.docStatusId === 'CO'">
                      <label class="checkLabel" for="isSaturdayDelivery">Saturday Delivery</label>
                    </div>
                    <div class="check">
                      <input type="checkbox" v-model="form.isSaturdayPickup" class="checkInput" id="isSaturdayPickup" :checked="form.isSaturdayPickup" :disabled="action === 'view' || info.docStatusId === 'CO'">
                      <label class="checkLabel" for="isSaturdayPickup">Saturday Pickup</label>
                    </div>
                    <div class="check">
                      <input type="checkbox" v-model="form.isVerbalConfirmation" class="checkInput" id="isVerbalConfirmation" :checked="form.isVerbalConfirmation" :disabled="action === 'view' || info.docStatusId === 'CO'">
                      <label class="checkLabel" for="isVerbalConfirmation">Verbal Confirmation (FedEx only)</label>
                    </div>
                    <div class="check">
                      <input type="checkbox" v-model="form.isAddedHandling" class="checkInput" id="isAddedHandling" :checked="form.isAddedHandling" :disabled="action === 'view' || info.docStatusId === 'CO'">
                      <label class="checkLabel" for="isAddedHandling">Added Handling (For FedEx only)</label>
                    </div>
                    <div class="check">
                      <input type="checkbox" v-model="form.processed" class="checkInput" id="processed" :checked="form.processed" :disabled="action === 'view' || info.docStatusId === 'CO'">
                      <label class="checkLabel" for="processed">Processed</label>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="modalFooter">
            <div></div>
            <div class="d-flex gap-10px">
              <button type="button" class="button" @click="closeDetailRecordModal">Close</button>
              <button v-if="action !== 'view' && info.docStatusId !== 'CO'" type="button" class="button" @click="save" :class="(form.shipperId === '' || form.alert.processing) ? 'pointerEvents-none opacity-0.6' : ''">Submit</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </Teleport>
</template>