<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: '',
  value: '',
  requestEMail: '',
  requestFolder: '',
  requestUser: '',
  isMultiLingualDocument: false,
  isSmtpAuthorization: false,
  isUseBetaFunctions: false,
  isPostImmediate: false,
  isUseASP: false,
  isSecureSMTP: false,
  language: '',
  languageId: 'en_US',
  autoArchive: '',
  autoArchiveId: 'N',
  mMPolicy: '',
  mMPolicyId: 'F',
})

const detailRecordSelected = ref('tenant_info')
const detailRecord = ref({
  tenant_info: [],
  tenant_share: []
})

const retrieve = async () => {
  const res = await $fetch('/api/admin/tenants/'+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 || '',
      value: res?.Value || '',
      requestEMail: res?.RequestEMail|| '',
      requestFolder: res?.RequestFolder || '',
      requestUser: res?.RequestUser || '',
      isMultiLingualDocument: res?.IsMultiLingualDocument ?? false,
      isSmtpAuthorization: res?.IsSmtpAuthorization ?? false,
      isUseBetaFunctions: res?.IsUseBetaFunctions ?? false,
      isPostImmediate: res?.IsPostImmediate ?? false,
      isUseASP: res?.IsUseASP ?? false,
      isSecureSMTP: res?.IsSecureSMTP ?? false,
      language: res.AD_Language?.identifier || '',
      languageId: res.AD_Language?.id || '',
      autoArchive: res.AutoArchive?.identifier || '',
      autoArchiveId: res.AutoArchive?.id || '',
      mMPolicy: res.MMPolicy?.identifier || '',
      mMPolicyId: res.MMPolicy?.id || '',
    }
    
    for(let record of ['tenant_info', 'tenant_share']) {
      const response = await $fetch('/api/admin/tenants/'+route.params.id+'/'+record.replaceAll('_', '-'), {
        headers: useRequestHeaders(['cookie'])
      })
      if(response) {
        let newData = []
        if(record === 'tenant_info') {
          newData = response.records.map(item => {
            return {
              id: item.uid,
              organization: item.AD_Org_ID.identifier,
              organizationId: item.AD_Org_ID.id,
              treeMenu: item.AD_Tree_Menu_ID.identifier || '',
              treeMenuId: item.AD_Tree_Menu_ID.id || '',
              treeOrg: item.AD_Tree_Org_ID.identifier || '',
              treeOrgId: item.AD_Tree_Org_ID.id || '',
              treeBPartner: item.AD_Tree_BPartner_ID.identifier || '',
              treeBPartnerId: item.AD_Tree_BPartner_ID.id || '',
              treeProject: item.AD_Tree_Project_ID.identifier || '',
              treeProjectId: item.AD_Tree_Project_ID.id || '',
              treeSalesRegion: item.AD_Tree_SalesRegion_ID.identifier || '',
              treeSalesRegionId: item.AD_Tree_SalesRegion_ID.id || '',
              treeProduct: item.AD_Tree_Product_ID.identifier || '',
              treeProductId: item.AD_Tree_Product_ID.id || '',
              isDiscountLineAmt: item.IsDiscountLineAmt ?? false,
              keepLogDays: item.KeepLogDays ?? false,
              isConfirmOnDocClose: item.IsConfirmOnDocClose ?? false,
              isConfirmOnDocVoid: item.IsConfirmOnDocVoid ?? false,
            }
          })
        }
        if(record === 'tenant_share') {
          newData = response.records.map(item => {
            return {
              id: item.uid,
              organization: item.AD_Org_ID.identifier,
              organizationId: item.AD_Org_ID.id,
              table: item.AD_Table_ID.identifier,
              tableId: item.AD_Table_ID.id,
              shareType: item.ShareType_ID.identifier,
              shareTypeId: item.ShareType_ID.id,
              name: item.name,
              description: item.description,
              isActive: item.IsActive,
            }
          })
        }

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

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

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

<template>
  <Head>
    <Title>View Tenant 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 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>Search Key</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.value }}</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>Request Email</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.requestEMail }}</div>
            </div>
            <div class="col-md-6 mb-2 d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Request Folder</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.requestFolder }}</div>
            </div>
            <div class="col-md-6 mb-2 d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Request User</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.requestUser }}</div>
            </div>
            <div class="col-md-6 mb-2 d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Language</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.language }}</div>
            </div>
            <div class="col-md-6 mb-2 d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>Auto Archive</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.autoArchive }}</div>
            </div>
            <div class="col-md-6 mb-2 d-flex gap-10px">
              <div class="w-150px d-flex justify-between gap-10px">
                <strong>MM Policy</strong>
                <strong>:</strong>
              </div>
              <div>{{ form.mMPolicy }}</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">Tenant Status :</label>
              <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.isMultiLingualDocument" class="checkInput" id="isMultiLingualDocument" :checked="form.isMultiLingualDocument" disabled>
                <label class="checkLabel" for="isMultiLingualDocument">Multi Lingual Document</label>
              </div>
              <div class="check">
                <input type="checkbox" v-model="form.isSmtpAuthorization" class="checkInput" id="isSmtpAuthorization" :checked="form.isSmtpAuthorization" disabled>
                <label class="checkLabel" for="isSmtpAuthorization">SMTP Authorization</label>
              </div>
              <div class="check">
                <input type="checkbox" v-model="form.isUseBetaFunctions" class="checkInput" id="isUseBetaFunctions" :checked="form.isUseBetaFunctions" disabled>
                <label class="checkLabel" for="isUseBetaFunctions">Use Beta Functions</label>
              </div>
              <div class="check">
                <input type="checkbox" v-model="form.isPostImmediate" class="checkInput" id="isPostImmediate" :checked="form.isPostImmediate" disabled>
                <label class="checkLabel" for="isPostImmediate">Post Immediate</label>
              </div>
              <div class="check">
                <input type="checkbox" v-model="form.isUseASP" class="checkInput" id="isUseASP" :checked="form.isUseASP" disabled>
                <label class="checkLabel" for="isUseASP">Use ASP</label>
              </div>
              <div class="check">
                <input type="checkbox" v-model="form.isSecureSMTP" class="checkInput" id="isSecureSMTP" :checked="form.isSecureSMTP" disabled>
                <label class="checkLabel" for="isSecureSMTP">Secure SMTP</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">
              <AdminTenantDetailRecord v-model="detailRecordSelected" :entries="detailRecord" action="view" />
            </div>
          </div>

        </div>
      </div>

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