<script setup>
import { date } from 'alga-js'
const router = useRouter()
const route = useRoute()

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

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: '',
  organization: '',
  isActive: true,
  documentNo: '',
  requestAmt: 0,
  summary: '',
  isEscalated: false,
  isEMailWhenDue: false,
  dateLastAction: date.now('date'),
  processed: false,
  isSelfService: false,
  isInvoiced: false,
  qtySpent: 0,
  qtyInvoiced: 0,
  priority: '',
  priorityId: '',
  dueType: '',
  dueTypeId: '',
  salesRep: '',
  salesRepId: '',
  partner: '',
  partnerId: '',
  user: '',
  userId: '',
  nextAction: '',
  nextActionId: '',
  requestType: '',
  requestTypeId: '',
  group: '',
  groupId: '',
  category: '',
  categoryId: '',
  status: '',
  statusId: '',
  resolution: '',
  resolutionId: '',
  priorityUser: '',
  priorityUserId: '',
  confidentialType: '',
  confidentialTypeId: '',
  confidentialTypeEntry: '',
  confidentialTypeEntryId: '',
  role: '',
  roleId: '',
  dateNextAction: date.now(''),
  standardResponse: '',
  standardResponseId: '',
  mailText: '',
  mailTextId: '',
  result: '',
  lastResult: '',
  taskStatusId: '',
  activityId: '',
  qtyPlan: 0,
  startTime: date.now(''),
  startDate: date.now(''),
  endTime: date.now(''),
  endDate: date.now(''),
  asset: '',
  assetId: '',
  project: '',
  projectId: '',
  order: '',
  orderId: '',
  invoice: '',
  invoiceId: '',
  payment: '',
  paymentId: '',
  inOut: '',
  inOutId: '',
  product: '',
  productId: '',
  productSpent: '',
  productSpentId: '',
  rma: '',
  rmaId: '',
  campaign: '',
  campaignId: '',
})

const detailRecordSelected = ref('update_notification')
const detailRecord = ref({
  update_notification: []
})

const retrieve = async () => {
  const res = await $fetch('/api/requests/requests/'+route.params.id, {
    headers: useRequestHeaders(['cookie'])
  })
  if(res) {
    form.value = {
      id: route.params.id,
      organization: res?.AD_Org_ID?.identifier || '',
      isActive: res?.IsActive ?? true,
      documentNo: res?.DocumentNo || '',
      requestAmt: res?.RequestAmt || 0,
      summary: res?.Summary || '',
      isEscalated: res?.IsEscalated ?? false,
      isEMailWhenDue: res?.IsEMailWhenDue ?? false,
      dateLastAction: res?.DateLastAction || date.now('date'),
      processed: res?.Processed ?? false,
      isSelfService: res?.IsSelfService ?? false,
      isInvoiced: res?.IsInvoiced ?? false,
      qtySpent: res?.QtySpent || 0,
      qtyInvoiced: res?.QtyInvoiced || 0,
      priority: res?.Priority?.identifier || '',
      priorityId: res?.Priority?.id || '',
      dueType: res?.DueType?.identifier || '',
      dueTypeId: res?.DueType?.id || '',
      salesRep: res?.SalesRep_ID?.identifier || '',
      salesRepId: res?.SalesRep_ID?.id || '',
      partner: res?.C_BPartner_ID?.identifier || '',
      partnerId: res?.C_BPartner_ID?.id || '',
      user: res?.AD_User_ID?.identifier || '',
      userId: res?.AD_User_ID?.id || '',
      nextAction: res?.NextAction?.identifier || '',
      nextActionId: res?.NextAction?.id || '',
      requestType: res?.R_RequestType_ID?.identifier || '',
      requestTypeId: res?.R_RequestType_ID?.id || '',
      group: res?.R_Group_ID?.identifier || '',
      groupId: res?.R_Group_ID?.id || '',
      category: res?.R_Category_ID?.identifier || '',
      categoryId: res?.R_Category_ID?.id || '',
      status: res?.R_Status_ID?.identifier || '',
      statusId: res?.R_Status_ID?.id || '',
      resolution: res?.R_Resolution_ID?.identifier || '',
      resolutionId: res?.R_Resolution_ID?.id || '',
      priorityUser: res?.PriorityUser?.identifier || '',
      priorityUserId: res?.PriorityUser?.id || '',
      confidentialType: res?.ConfidentialType?.identifier || '',
      confidentialTypeId: res?.ConfidentialType?.id || '',
      confidentialTypeEntry: res?.ConfidentialTypeEntry?.identifier || '',
      confidentialTypeEntryId: res?.ConfidentialTypeEntry?.id || '',
      role: res?.AD_Role_ID?.identifier || '',
      roleId: res?.AD_Role_ID?.id || '',
      dateNextAction: date.now(''),
      standardResponse: res?.R_StandardResponse_ID?.identifier || '',
      standardResponseId: res?.R_StandardResponse_ID?.id || '',
      mailText: res?.R_MailText_ID?.identifier || '',
      mailTextId: res?.R_MailText_ID?.id || '',
      result: res?.Result || '',
      lastResult: res?.LastResult || '',
      taskStatusId: res?.TaskStatus?.id || '',
      activity: res?.C_Activity_ID?.identifier || '',
      activityId: res?.C_Activity_ID?.id || '',
      qtyPlan: res?.QtyPlan || 0,
      startTime: res?.StartTime || date.now(''),
      startDate: res?.StartDate || date.now(''),
      endTime: res?.EndTime || date.now(''),
      endDate: res?.EndDate || date.now(''),
      asset: res?.A_Asset_ID?.identifier || '',
      assetId: res?.A_Asset_ID?.id || '',
      project: res?.C_Project_ID?.identifier || '',
      projectId: res?.C_Project_ID?.id || '',
      order: res?.C_Order_ID?.identifier || '',
      orderId: res?.C_Order_ID?.id || '',
      invoice: res?.C_Invoice_ID?.identifier || '',
      invoiceId: res?.C_Invoice_ID?.id || '',
      payment: res?.C_Payment_ID?.identifier || '',
      paymentId: res?.C_Payment_ID?.id || '',
      inOut: res?.M_InOut_ID?.identifier || '',
      inOutId: res?.M_InOut_ID?.id || '',
      product: res?.M_Product_ID?.identifier || '',
      productId: res?.M_Product_ID?.id || '',
      productSpent: res?.M_ProductSpent_ID?.identifier || '',
      productSpentId: res?.M_ProductSpent_ID?.id || '',
      rma: res?.M_RMA_ID?.identifier || '',
      rmaId: res?.M_RMA_ID?.id || '',
      campaign: res?.C_Campaign_ID?.identifier || '',
      campaignId: res?.C_Campaign_ID?.id || '',
    }
  }

  for(let record of ['update_notification']) {
    const response = await $fetch('/api/requests/requests/'+route.params.id+'/'+record.replaceAll('_', '-'), {
      headers: useRequestHeaders(['cookie'])
    })
    if(response) {
      let newData = []
      if(record === 'update_notification') {
        newData = response.records.map(item => {
          return {
            id: item.uid,
            user: item.AD_User_ID.identifier,
            userId: item.AD_User_ID.id,
            isActive: item.IsActive,
            isSelfService: item.IsSelfService,
          }
        })
      }

      detailRecord.value[record] = newData
    }
  }
}
onMounted(retrieve)

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

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: 'Requests'},
  { link: '/requests/requests', text: 'Requests'},
  { link: '#', text: 'View Request Details', active: true}
]))
</script>

<template>
  <Head>
    <Title>View Request 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 color-inherit"></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 color-inherit"></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">
            <div class="column is-half">
              <div class="d-flex gap-10px">
                <div class="w-150px d-flex justify-between gap-10px">
                  <strong>Tenant</strong>
                  <strong>:</strong>
                </div>
                <div>{{ clientName }}</div>
              </div>
            </div>
            <div class="column is-half">
              <div class="d-flex gap-10px">
                <div class="w-150px d-flex justify-between gap-10px">
                  <strong>Orgaanization</strong>
                  <strong>:</strong>
                </div>
                <div>{{ form.organization }}</div>
              </div>
            </div>
          </div>

          <div class="columns">
            <div class="column is-half">
              <div class="d-flex gap-10px">
                <div class="w-150px d-flex justify-between gap-10px">
                  <strong>Document Number</strong>
                  <strong>:</strong>
                </div>
                <div>{{ form.documentNo }}</div>
              </div>
            </div>
            <div class="column is-half">
              <div class="d-flex gap-10px">
                <div class="w-150px d-flex justify-between gap-10px">
                  <strong>Request Amount</strong>
                  <strong>:</strong>
                </div>
                <div>{{ form.requestAmt }}</div>
              </div>
            </div>
          </div>
          
          <div class="columns">
            <div class="column is-half">
              <div class="d-flex gap-10px">
                <div class="w-150px d-flex justify-between gap-10px">
                  <strong>Date Last Action</strong>
                  <strong>:</strong>
                </div>
                <div>{{ form.dateLastAction }}</div>
              </div>
            </div>
            <div class="column is-half">
              <div class="d-flex gap-10px">
                <div class="w-150px d-flex justify-between gap-10px">
                  <strong>Summary</strong>
                  <strong>:</strong>
                </div>
                <div>{{ form.summary }}</div>
              </div>
            </div>
          </div>
          
          <div class="columns">
            <div class="column is-half">
              <div class="d-flex gap-10px">
                <div class="w-150px d-flex justify-between gap-10px">
                  <strong>Quantity Spent</strong>
                  <strong>:</strong>
                </div>
                <div>{{ form.qtySpent }}</div>
              </div>
            </div>
            <div class="column is-half">
              <div class="d-flex gap-10px">
                <div class="w-150px d-flex justify-between gap-10px">
                  <strong>Quantity Invoiced</strong>
                  <strong>:</strong>
                </div>
                <div>{{ form.qtyInvoiced }}</div>
              </div>
            </div>
          </div>
          
          <div class="columns">
            <div class="column is-half">
              <div class="d-flex gap-10px">
                <div class="w-150px d-flex justify-between gap-10px">
                  <strong>Priority</strong>
                  <strong>:</strong>
                </div>
                <div>{{ form.priority }}</div>
              </div>
            </div>
            <div class="column is-half">
              <div class="d-flex gap-10px">
                <div class="w-150px d-flex justify-between gap-10px">
                  <strong>Due Type</strong>
                  <strong>:</strong>
                </div>
                <div>{{ form.dueType }}</div>
              </div>
            </div>
          </div>
          
          <div class="columns">
            <div class="column is-half">
              <div class="d-flex gap-10px">
                <div class="w-150px d-flex justify-between gap-10px">
                  <strong>Sales Rep</strong>
                  <strong>:</strong>
                </div>
                <div>{{ form.salesRep }}</div>
              </div>
            </div>
            <div class="column is-half">
              <div class="d-flex gap-10px">
                <div class="w-150px d-flex justify-between gap-10px">
                  <strong>Partner</strong>
                  <strong>:</strong>
                </div>
                <div>{{ form.partner }}</div>
              </div>
            </div>
          </div>
          
          <div class="columns">
            <div class="column is-half">
              <div class="d-flex gap-10px">
                <div class="w-150px d-flex justify-between gap-10px">
                  <strong>User</strong>
                  <strong>:</strong>
                </div>
                <div>{{ form.user }}</div>
              </div>
            </div>
            <div class="column is-half">
              <div class="d-flex gap-10px">
                <div class="w-150px d-flex justify-between gap-10px">
                  <strong>Next Action</strong>
                  <strong>:</strong>
                </div>
                <div>{{ form.nextAction }}</div>
              </div>
            </div>
          </div>
          
          <div class="columns">
            <div class="column is-half">
              <div class="d-flex gap-10px">
                <div class="w-150px d-flex justify-between gap-10px">
                  <strong>Request Type</strong>
                  <strong>:</strong>
                </div>
                <div>{{ form.requestType }}</div>
              </div>
            </div>
            <div class="column is-half">
              <div class="d-flex gap-10px">
                <div class="w-150px d-flex justify-between gap-10px">
                  <strong>Group</strong>
                  <strong>:</strong>
                </div>
                <div>{{ form.group }}</div>
              </div>
            </div>
          </div>
          
          <div class="columns">
            <div class="column is-half">
              <div class="d-flex gap-10px">
                <div class="w-150px d-flex justify-between gap-10px">
                  <strong>Category</strong>
                  <strong>:</strong>
                </div>
                <div>{{ form.category }}</div>
              </div>
            </div>
            <div class="column is-half">
              <div class="d-flex gap-10px">
                <div class="w-150px d-flex justify-between gap-10px">
                  <strong>Status</strong>
                  <strong>:</strong>
                </div>
                <div>{{ form.status }}</div>
              </div>
            </div>
          </div>
          
          <div class="columns">
            <div class="column is-half">
              <div class="d-flex gap-10px">
                <div class="w-150px d-flex justify-between gap-10px">
                  <strong>Resolution</strong>
                  <strong>:</strong>
                </div>
                <div>{{ form.resolution }}</div>
              </div>
            </div>
            <div class="column is-half">
              <div class="d-flex gap-10px">
                <div class="w-150px d-flex justify-between gap-10px">
                  <strong>Priority User</strong>
                  <strong>:</strong>
                </div>
                <div>{{ form.priorityUser }}</div>
              </div>
            </div>
          </div>
          
          <div class="columns">
            <div class="column is-half">
              <div class="d-flex gap-10px">
                <div class="w-150px d-flex justify-between gap-10px">
                  <strong>Confidential Type</strong>
                  <strong>:</strong>
                </div>
                <div>{{ form.confidentialType }}</div>
              </div>
            </div>
            <div class="column is-half">
              <div class="d-flex gap-10px">
                <div class="w-150px d-flex justify-between gap-10px">
                  <strong>Confidential Type Entry</strong>
                  <strong>:</strong>
                </div>
                <div>{{ form.confidentialTypeEntry }}</div>
              </div>
            </div>
          </div>
          
          <div class="columns">
            <div class="column is-half">
              <div class="d-flex gap-10px">
                <div class="w-150px d-flex justify-between gap-10px">
                  <strong>Role</strong>
                  <strong>:</strong>
                </div>
                <div>{{ form.role }}</div>
              </div>
            </div>
            <div class="column is-half">
              <div class="d-flex gap-10px">
                <div class="w-150px d-flex justify-between gap-10px">
                  <strong>Date Next Action</strong>
                  <strong>:</strong>
                </div>
                <div>{{ form.dateNextAction }}</div>
              </div>
            </div>
          </div>
          
          <div class="columns">
            <div class="column is-half">
              <div class="d-flex gap-10px">
                <div class="w-150px d-flex justify-between gap-10px">
                  <strong>Standard Response</strong>
                  <strong>:</strong>
                </div>
                <div>{{ form.standardResponse }}</div>
              </div>
            </div>
            <div class="column is-half">
              <div class="d-flex gap-10px">
                <div class="w-150px d-flex justify-between gap-10px">
                  <strong>Mail Text</strong>
                  <strong>:</strong>
                </div>
                <div>{{ form.mailText }}</div>
              </div>
            </div>
          </div>
          
          <div class="columns">
            <div class="column is-half">
              <div class="d-flex gap-10px">
                <div class="w-150px d-flex justify-between gap-10px">
                  <strong>Last Result</strong>
                  <strong>:</strong>
                </div>
                <div>{{ form.lastResult }}</div>
              </div>
            </div>
            <div class="column is-half">
              <div class="d-flex gap-10px">
                <div class="w-150px d-flex justify-between gap-10px">
                  <strong>Task Status ID</strong>
                  <strong>:</strong>
                </div>
                <div>{{ form.taskStatusId }}</div>
              </div>
            </div>
          </div>
          
          <div class="columns">
            <div class="column is-half">
              <div class="d-flex gap-10px">
                <div class="w-150px d-flex justify-between gap-10px">
                  <strong>Activity ID</strong>
                  <strong>:</strong>
                </div>
                <div>{{ form.activityId }}</div>
              </div>
            </div>
            <div class="column is-half">
              <div class="d-flex gap-10px">
                <div class="w-150px d-flex justify-between gap-10px">
                  <strong>Quantity Plan</strong>
                  <strong>:</strong>
                </div>
                <div>{{ form.qtyPlan }}</div>
              </div>
            </div>
          </div>
          
          <div class="columns">
            <div class="column is-half">
              <div class="d-flex gap-10px">
                <div class="w-150px d-flex justify-between gap-10px">
                  <strong>Start Time</strong>
                  <strong>:</strong>
                </div>
                <div>{{ form.startTime }}</div>
              </div>
            </div>
            <div class="column is-half">
              <div class="d-flex gap-10px">
                <div class="w-150px d-flex justify-between gap-10px">
                  <strong>Start Date</strong>
                  <strong>:</strong>
                </div>
                <div>{{ form.startDate }}</div>
              </div>
            </div>
          </div>
          
          <div class="columns">
            <div class="column is-half">
              <div class="d-flex gap-10px">
                <div class="w-150px d-flex justify-between gap-10px">
                  <strong>End Time</strong>
                  <strong>:</strong>
                </div>
                <div>{{ form.endTime }}</div>
              </div>
            </div>
            <div class="column is-half">
              <div class="d-flex gap-10px">
                <div class="w-150px d-flex justify-between gap-10px">
                  <strong>End Date</strong>
                  <strong>:</strong>
                </div>
                <div>{{ form.endDate }}</div>
              </div>
            </div>
          </div>
          
          <div class="columns">
            <div class="column is-half">
              <div class="d-flex gap-10px">
                <div class="w-150px d-flex justify-between gap-10px">
                  <strong>Asset</strong>
                  <strong>:</strong>
                </div>
                <div>{{ form.asset }}</div>
              </div>
            </div>
            <div class="column is-half">
              <div class="d-flex gap-10px">
                <div class="w-150px d-flex justify-between gap-10px">
                  <strong>Project</strong>
                  <strong>:</strong>
                </div>
                <div>{{ form.project }}</div>
              </div>
            </div>
          </div>
          
          <div class="columns">
            <div class="column is-half">
              <div class="d-flex gap-10px">
                <div class="w-150px d-flex justify-between gap-10px">
                  <strong>Order</strong>
                  <strong>:</strong>
                </div>
                <div>{{ form.order }}</div>
              </div>
            </div>
            <div class="column is-half">
              <div class="d-flex gap-10px">
                <div class="w-150px d-flex justify-between gap-10px">
                  <strong>Invoice</strong>
                  <strong>:</strong>
                </div>
                <div>{{ form.invoice }}</div>
              </div>
            </div>
          </div>
          
          <div class="columns">
            <div class="column is-half">
              <div class="d-flex gap-10px">
                <div class="w-150px d-flex justify-between gap-10px">
                  <strong>Payment</strong>
                  <strong>:</strong>
                </div>
                <div>{{ form.payment }}</div>
              </div>
            </div>
            <div class="column is-half">
              <div class="d-flex gap-10px">
                <div class="w-150px d-flex justify-between gap-10px">
                  <strong>Shipment/Receipt</strong>
                  <strong>:</strong>
                </div>
                <div>{{ form.inOut }}</div>
              </div>
            </div>
          </div>
          
          <div class="columns">
            <div class="column is-half">
              <div class="d-flex gap-10px">
                <div class="w-150px d-flex justify-between gap-10px">
                  <strong>Result</strong>
                  <strong>:</strong>
                </div>
                <div>{{ form.result }}</div>
              </div>
            </div>
            <div class="column is-half">
              <div class="d-flex gap-10px">
                <div class="w-150px d-flex justify-between gap-10px">
                  <strong>Status</strong>
                  <strong>:</strong>
                </div>
                <div class="d-flex flexDirection-column">
                  <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.isEscalated" class="checkInput" id="isEscalated" :checked="form.isEscalated" disabled>
                    <label class="checkLabel" for="isEscalated">Escalated</label>
                  </div>
                  <div class="check">
                    <input type="checkbox" v-model="form.isEMailWhenDue" class="checkInput" id="isEMailWhenDue" :checked="form.isEMailWhenDue" disabled>
                    <label class="checkLabel" for="isEMailWhenDue">Email When Due</label>
                  </div>
                  <div class="check">
                    <input type="checkbox" v-model="form.processed" class="checkInput" id="processed" :checked="form.processed" disabled>
                    <label class="checkLabel" for="processed">Processed</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.isInvoiced" class="checkInput" id="isInvoiced" :checked="form.isInvoiced" disabled>
                    <label class="checkLabel" for="isInvoiced">Invoiced</label>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="mb-3">
            <h4 class="bb-1px_solid_hexeee">Detail Record</h4>
            <div class="mb-3">
              <RequestsRequestDetailRecord v-model="detailRecordSelected" :entries="detailRecord" action="view" />
            </div>
          </div>

        </div>
      </div>

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