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

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

const clients = useCookie('logship_clients')
const clientId = useCookie('logship_client_id')

const clientName = computed(() => {
  return clients.value?.filter(i => i.id == clientId.value)?.[0]?.name || 0
})

const form = ref({
  id: '',
  organization: '',
  isActive: true,
  name: '',
  description: '',
  amtApproval: 0,
  isManual: false,
  isPersonalAccess: false,
  isShowAcct: false,
  isPersonalLock: false,
  isCanReport: false,
  isCanExport: false,
  isCanApproveOwnDoc: false,
  isAccessAllOrgs: false,
  isChangeLog: false,
  overwritePriceLimit: false,
  isUseUserOrgAccess: false,
  confirmQueryRecords: 0,
  maxQueryRecords: 0,
  allow_Info_Account: false,
  allow_Info_Asset: false,
  allow_Info_BPartner: false,
  allow_Info_InOut: false,
  allow_Info_Invoice: false,
  allow_Info_Order: false,
  allow_Info_Payment: false,
  allow_Info_Product: false,
  allow_Info_Resource: false,
  allow_Info_Schedule: false,
  isDiscountUptoLimitPrice: false,
  isDiscountAllowedOnTotal: false,
  isMenuAutoExpand: false,
  isMasterRole: false,
  isAccessAdvanced: false,
  isClientAdministrator: false,
  amtApprovalAccum: 0,
  daysApprovalAccum: 0,
  userLevel: 'Client+Organization',
  userLevelId: ' CO',
  currency: '',
  currencyId: '',
  preferenceType: 'None',
  preferenceTypeId: 'N',
  treeMenu: '',
  treeMenuId: '',
  roleType: '',
  roleTypeId: '',
  treeOrg: '',
  treeOrgId: '',
})

const detailRecordSelected = ref('org_access')
const detailRecord = ref({
  org_access: [],
  user_assignment: [],
  window_access: [],
  process_access: [],
  form_access: [],
  info_access: [],
  workflow_access: [],
  task_access: [],
  document_action_access: [],
  included_roles: [],
  document_status_access: []
})

const retrieve = async () => {
  const res = await $fetch('/api/admin/roles/'+route.params.id, {
    headers: useRequestHeaders(['cookie'])
  })
  if(res) {
    form.value = {
      id: route.params.id,
      organization: res?.AD_Org_ID?.identifier || '',
      isActive: res?.IsActive ?? true,
      name: res?.Name || '',
      description: res?.Description || '',
      amtApproval: res.AmtApproval || 0,
      isManual: res.IsManual ?? false,
      isPersonalAccess: res.IsPersonalAccess ?? false,
      isShowAcct: res.IsShowAcct ?? false,
      isPersonalLock: res.IsPersonalLock ?? false,
      isCanReport: res.IsCanReport ?? false,
      isCanExport: res.IsCanExport ?? false,
      isCanApproveOwnDoc: res.IsCanApproveOwnDoc ?? false,
      isAccessAllOrgs: res.IsAccessAllOrgs ?? false,
      isChangeLog: res.IsChangeLog ?? false,
      overwritePriceLimit: res.OverwritePriceLimit ?? false,
      isUseUserOrgAccess: res.IsUseUserOrgAccess ?? false,
      confirmQueryRecords: res.ConfirmQueryRecords || 0,
      maxQueryRecords: res.MaxQueryRecords || 0,
      allow_Info_Account: res.Allow_Info_Account ?? false,
      allow_Info_Asset: res.Allow_Info_Asset ?? false,
      allow_Info_BPartner: res.Allow_Info_BPartner ?? false,
      allow_Info_InOut: res.Allow_Info_InOut ?? false,
      allow_Info_Invoice: res.Allow_Info_Invoice ?? false,
      allow_Info_Order: res.Allow_Info_Order ?? false,
      allow_Info_Payment: res.Allow_Info_Payment ?? false,
      allow_Info_Product: res.Allow_Info_Product ?? false,
      allow_Info_Resource: res.Allow_Info_Resource ?? false,
      allow_Info_Schedule: res.Allow_Info_Schedule ?? false,
      isDiscountUptoLimitPrice: res.IsDiscountUptoLimitPrice ?? false,
      isDiscountAllowedOnTotal: res.IsDiscountAllowedOnTotal ?? false,
      isMenuAutoExpand: res.IsMenuAutoExpand ?? false,
      isMasterRole: res.IsMasterRole ?? false,
      isAccessAdvanced: res.IsAccessAdvanced ?? false,
      isClientAdministrator: res.IsClientAdministrator ?? false,
      amtApprovalAccum: res.AmtApprovalAccum || 0,
      daysApprovalAccum: res.DaysApprovalAccum || 0,
      userLevel: res.UserLevel?.identifier || '',
      userLevelId: res.UserLevel?.id || '',
      currency: res.C_Currency_ID?.identifier || '',
      currencyId: res.C_Currency_ID?.id || '',
      preferenceType: res.PreferenceType?.identifier || '',
      preferenceTypeId: res.PreferenceType?.id || '',
      treeMenu: res.AD_Tree_Menu_ID?.identifier || '',
      treeMenuId: res.AD_Tree_Menu_ID?.id || '',
      roleType: res.RoleType?.identifier || '',
      roleTypeId: res.RoleType?.id || '',
    }
    
    for(let record of ['org_access', 'user_assignment', 'window_access', 'workflow_access', 'task_access', 'document_status_access']) {
      const response = await $fetch('/api/admin/roles/'+route.params.id+'/'+record.replaceAll('_', '-'), {
        headers: useRequestHeaders(['cookie'])
      })
      if(response) {
        let newData = []
        if(record === 'org_access') {
          newData = response.records.map(item => {
            return {
              id: item.uid,
              organization: item.AD_Org_ID.identifier,
              organizationId: item.AD_Org_ID.id,
              isActive: item.IsActive,
              isReadOnly: item.IsReadOnly,
            }
          })
        }
        if(record === 'user_assignment') {
          newData = response.records.map(item => {
            return {
              id: item.uid,
              user: item.AD_User_ID.identifier,
              userId: item.AD_User_ID.id,
              isActive: item.IsActive,
            }
          })
        }
        if(record === 'window_access') {
          newData = response.records.map(item => {
            return {
              id: item.uid,
              window: item.AD_Window_ID.identifier,
              windowId: item.AD_Window_ID.id,
              isActive: item.isActive,
              isReadOnly: item.isReadOnly
            }
          })
        }
        if(record === 'workflow_access') {
          newData = response.records.map(item => {
            return {
              id: item.uid,
              workflow: item.AD_Workflow_ID.identifier,
              workflowId: item.AD_Workflow_ID.id,
              isActive: item.IsActive,
              isReadWrite: item.IsReadWrite,
            }
          })
        }
        if(record === 'task_access') {
          newData = response.records.map(item => {
            return {
              id: item.uid,
              task: item.AD_Task_ID.identifier,
              taskId: item.AD_Task_ID.id,
              isActive: item.IsActive,
              isReadWrite: item.IsReadWrite,
            }
          })
        }
        if(record === 'document_status_access') {
          newData = response.records.map(item => {
            return {
              id: item.id,
              user: item.AD_User_ID.identifier,
              userId: item.AD_User_ID.id,
              documentStatus: item.PA_DocumentStatus_ID.identifier,
              documentStatusId: item.PA_DocumentStatus_ID.id,
              isActive: item.IsActive,
            }
          })
        }

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

const back = () => {
  router.push('/users/roles')
}

const breadCrumb = computed(() => ([
  { link: '/users/users', text: 'Users'},
  { link: '/users/roles', text: 'Roles'},
  { link: '#', text: 'View Role Details', active: true}
]))
</script>

<template>
  <Head>
    <Title>View Role 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">
            <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>
        <div class="details">
          <div class="row mb-3 mt-0">
            <div class="col-md-6 mb-2 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 class="col-md-6 mb-2 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 class="col-md-6 mb-2 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="col-md-6 mb-2 d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>User Level</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.userLevel }}</div>
            </div>
            <div class="col-md-6 mb-2 d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Currency</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.currency }}</div>
            </div>
            <div class="col-md-6 mb-2 d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Approval Amount</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.amtApproval }}</div>
            </div>
            <div class="col-md-6 mb-2 d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Approval Amount Accumulated</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.amtApprovalAccum }}</div>
            </div>
            <div class="col-md-6 mb-2 d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Days Approval Accumulated</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.daysApprovalAccum }}</div>
            </div>
            <div class="col-md-6 mb-2 d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Role Type</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.roleType }}</div>
            </div>
            <div class="col-md-6 mb-2 d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Preference Level</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.preferenceType }}</div>
            </div>
            <div class="col-md-6 mb-2 d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Menu Tree</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.treeMenu }}</div>
            </div>
            <div class="col-md-6 mb-2 d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Confirm Query Records</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.confirmQueryRecords }}</div>
            </div>
            <div class="col-md-6 mb-2 d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Max Query Records</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.maxQueryRecords }}</div>
            </div>
            <div class="col-md-6 mb-2 d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Organization Tree</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.treeOrg }}</div>
            </div>
            <div class="col-md-12 mb-2 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 class="col-md-12 mb-3">
              <label class="label d-block mb-2 fw-bold">Role Status :</label>
              <div class="check">
                <input type="checkbox" v-model="form.isMasterRole" class="checkInput" id="isMasterRole" :checked="form.isMasterRole" disabled>
                <label class="checkLabel" for="isMasterRole">Master Role</label>
              </div>
              <div class="check">
                <input type="checkbox" v-model="form.isManual" class="checkInput" id="isManual" :checked="form.isManual" disabled>
                <label class="checkLabel" for="isManual">Manual</label>
              </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.isMenuAutoExpand" class="checkInput" id="isMenuAutoExpand" :checked="form.isMenuAutoExpand" disabled>
                <label class="checkLabel" for="isMenuAutoExpand">Auto Expand Menu</label>
              </div>
              <div class="check">
                <input type="checkbox" v-model="form.isChangeLog" class="checkInput" id="isChangeLog" :checked="form.isChangeLog" disabled>
                <label class="checkLabel" for="isChangeLog">Change Log</label>
              </div>
            </div>

            <div class="col-md-12 mb-3">
              <label class="label d-block mb-2 fw-bold">Access Status :</label>
              <div class="check">
                <input type="checkbox" v-model="form.isAccessAdvanced" class="checkInput" id="isAccessAdvanced" :checked="form.isAccessAdvanced" disabled>
                <label class="checkLabel" for="isAccessAdvanced">Access Advanced</label>
              </div>
              <div class="check">
                <input type="checkbox" v-model="form.isAccessAllOrgs" class="checkInput" id="isAccessAllOrgs" :checked="form.isAccessAllOrgs" disabled>
                <label class="checkLabel" for="isAccessAllOrgs">Access all Orgs</label>
              </div>
              <div class="check">
                <input type="checkbox" v-model="form.isUseUserOrgAccess" class="checkInput" id="isUseUserOrgAccess" :checked="form.isUseUserOrgAccess" disabled>
                <label class="checkLabel" for="isUseUserOrgAccess">Use User Org Access</label>
              </div>
              <div class="check">
                <input type="checkbox" v-model="form.isPersonalLock" class="checkInput" id="isPersonalLock" :checked="form.isPersonalLock" disabled>
                <label class="checkLabel" for="isPersonalLock">Personal Lock</label>
              </div>
              <div class="check">
                <input type="checkbox" v-model="form.isPersonalAccess" class="checkInput" id="isPersonalAccess" :checked="form.isPersonalAccess" disabled>
                <label class="checkLabel" for="isPersonalAccess">Personal Access</label>
              </div>
              <div class="check">
                <input type="checkbox" v-model="form.isCanReport" class="checkInput" id="isCanReport" :checked="form.isCanReport" disabled>
                <label class="checkLabel" for="isCanReport">Can Report</label>
              </div>
              <div class="check">
                <input type="checkbox" v-model="form.isCanExport" class="checkInput" id="isCanExport" :checked="form.isCanExport" disabled>
                <label class="checkLabel" for="isCanExport">Can Export</label>
              </div>
              <div class="check">
                <input type="checkbox" v-model="form.isClientAdministrator" class="checkInput" id="isClientAdministrator" :checked="form.isClientAdministrator" disabled>
                <label class="checkLabel" for="isClientAdministrator">Tenant Administrator</label>
              </div>
              <div class="check">
                <input type="checkbox" v-model="form.isShowAcct" class="checkInput" id="isShowAcct" :checked="form.isShowAcct" disabled>
                <label class="checkLabel" for="isShowAcct">Show Accounting</label>
              </div>
              <div class="check">
                <input type="checkbox" v-model="form.overwritePriceLimit" class="checkInput" id="overwritePriceLimit" :checked="form.overwritePriceLimit" disabled>
                <label class="checkLabel" for="overwritePriceLimit">Overwrite Price Limit</label>
              </div>
            </div>

            <div class="col-md-12 mb-3">
              <label class="label d-block mb-2 fw-bold">Allow Info Status :</label>
              <div class="check">
                <input type="checkbox" v-model="form.allow_Info_Account" class="checkInput" id="allow_Info_Account" :checked="form.allow_Info_Account" disabled>
                <label class="checkLabel" for="allow_Info_Account">Allow Info Account</label>
              </div>
              <div class="check">
                <input type="checkbox" v-model="form.allow_Info_Schedule" class="checkInput" id="allow_Info_Schedule" :checked="form.allow_Info_Schedule" disabled>
                <label class="checkLabel" for="allow_Info_Schedule">Allow Info Schedule</label>
              </div>
            </div>

          </div>
          
          <div class="row mb-3">
            <h4 class="card-action-title bb-1px_solid_hexeee">Detail Record</h4>
            <div class="col-md-12 mb-3">
              <AdminRoleDetailRecord v-model="detailRecordSelected" :entries="detailRecord" action="view" />
            </div>
          </div>

        </div>
      </div>

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