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

const router = useRouter()

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

const user = useCookie('logship_user')
const form = reactive({
  id: user.value.id,
  name: user.value.Name,
  email: user.value.EMail,
  value: user.value.Value,
  description: user.value.Description,
  dateLastLogin: date.format(user.value.DateLastLogin || new Date(), ''),
  isActive: user.value.IsActive,
  isFullBPAccess: user.value.IsFullBPAccess,
  isInPayroll: user.value.IsInPayroll,
  isSalesLead: user.value.IsSalesLead,
  isLocked: user.value.IsLocked,
  isNoPasswordReset: user.value.IsNoPasswordReset,
  isExpired: user.value.IsExpired,
  isAddMailTextAutomatically: user.value.IsAddMailTextAutomatically,
  isNoExpire: user.value.IsNoExpire,
  isSupportUser: user.value.IsSupportUser,
  isShipTo: user.value.IsShipTo,
  isBillTo: user.value.IsBillTo,
  isVendorLead: user.value.IsVendorLead,
  processing: false,
  alert: {
    status: '',
    message: ''
  }
})

const breadCrumb = computed(() => ([
  { link: '#', text: 'Accounts'},
  { link: '#', text: 'User Profile', active: true}
]))

const update = async () => {
  form.processing = true
  const data = await $fetch('/api/accounts/profile', {
    method: 'POST',
    headers: useRequestHeaders(['cookie']),
    body: {
      id: form.id,
      name: form.name,
      email: form.email,
      value: form.value,
      description: form.description
    }
  })

  if(data?.status && data?.message) {
    form.alert.status = data.status
    form.alert.message = data.message
  } else {
    user.value = data.user
    form.name = data.user.Name
    form.email = data.user.EMail
    form.value = data.user.Value
    form.description = data.user.Description
    form.alert.status = 200
    form.alert.message = 'The user profile data have been updated'
    window.scrollTo(0, 0)
  }
  form.processing = false
}
</script>

<template>
  <Head>
    <Title>User Profile</Title>
  </Head>

  <NuxtLayout name="new-dash">
    <div>
      <BreadCrumb :items="breadCrumb" class="mb-1.5rem" />

      <div class="card card-action mb-5">
        <div class="card-alert"></div>
        <div class="card-header">
          <h4 class="card-action-title">User Profile</h4>
        </div>
        <div class="collapse show">
          <div class="row m-3">
            <div v-if="form.alert.status" class="col-md-12 mb-3">
              <div class="alert" :class="Number(form.alert.status) >= 400 ? 'alert-danger' : 'alert-success'">
                <div class="alertContent">
                  <h3 class="alertTitle">{{ form.alert.status }}</h3>
                  <p class="alertText">{{ form.alert.message }}</p>
                </div>
                <div class="alertAction" @click="form.alert.status = ''"><i class="menu-icon tf-icons ti ti-x"></i></div>
              </div>
            </div>

            <div class="col-md-6 mb-3">
              <label class="label">Full Name</label>
              <input type="text" v-model="form.name" class="input" />
            </div>
            <div class="col-md-6 mb-3">
              <label class="label">Email</label>
              <input type="text" v-model="form.email" class="input" />
            </div>
            <div class="col-md-6 mb-3">
              <label class="label">Value</label>
              <input type="text" v-model="form.value" class="input" />
            </div>
            <div class="col-md-6 mb-3">
              <label class="label">Last Login</label>
              <input type="text" v-model="form.dateLastLogin" class="input" readonly />
            </div>
            <div class="col-md-12 mb-3">
              <label class="label">Description</label>
              <textarea v-model="form.description" class="input"></textarea>
            </div>
            <div class="col-md-6 mb-3">
              <label class="label d-block mb-2">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.isFullBPAccess" class="checkInput" id="isFullBPAccess" :checked="form.isFullBPAccess" disabled>
                <label class="checkLabel" for="isFullBPAccess">Full BP Access</label>
              </div>
              <div class="check">
                <input type="checkbox" v-model="form.isLocked" class="checkInput" id="isLocked" :checked="form.isLocked" disabled>
                <label class="checkLabel" for="isLocked">Locked</label>
              </div>
              <div class="check">
                <input type="checkbox" v-model="form.isExpired" class="checkInput" id="isExpired" :checked="form.isExpired" disabled>
                <label class="checkLabel" for="isExpired">Expired</label>
              </div>
              <div class="check">
                <input type="checkbox" v-model="form.isNoExpire" class="checkInput" id="isNoExpire" :checked="form.isNoExpire" disabled>
                <label class="checkLabel" for="isNoExpire">No Expire</label>
              </div>
            </div>
            <div class="col-md-6 mb-3">
              <label class="label d-block mb-2">Optional</label>
              <div class="check">
                <input type="checkbox" v-model="form.isNoPasswordReset" class="checkInput" id="isNoPasswordReset" :checked="form.isNoPasswordReset" disabled>
                <label class="checkLabel" for="isNoPasswordReset">No Password Reset</label>
              </div>
              <div class="check">
                <input type="checkbox" v-model="form.isInPayroll" class="checkInput" id="isInPayroll" :checked="form.isInPayroll" disabled>
                <label class="checkLabel" for="isInPayroll">In Payroll</label>
              </div>
              <div class="check">
                <input type="checkbox" v-model="form.isSalesLead" class="checkInput" id="isSalesLead" :checked="form.isSalesLead" disabled>
                <label class="checkLabel" for="isSalesLead">Sales Lead</label>
              </div>
              <div class="check">
                <input type="checkbox" v-model="form.isVendorLead" class="checkInput" id="isVendorLead" :checked="form.isVendorLead" disabled>
                <label class="checkLabel" for="isVendorLead">Vendor Lead</label>
              </div>
              <div class="check">
                <input type="checkbox" v-model="form.isSupportUser" class="checkInput" id="isSupportUser" :checked="form.isSupportUser" disabled>
                <label class="checkLabel" for="isSupportUser">Support User</label>
              </div>
              <div class="check">
                <input type="checkbox" v-model="form.isShipTo" class="checkInput" id="isShipTo" :checked="form.isShipTo" disabled>
                <label class="checkLabel" for="isShipTo">Ship To</label>
              </div>
              <div class="check">
                <input type="checkbox" v-model="form.isBillTo" class="checkInput" id="isBillTo" :checked="form.isBillTo" disabled>
                <label class="checkLabel" for="isBillTo">Bill To</label>
              </div>
              <div class="check">
                <input type="checkbox" v-model="form.isAddMailTextAutomatically" class="checkInput" id="isAddMailTextAutomatically" :checked="form.isAddMailTextAutomatically" disabled>
                <label class="checkLabel" for="isAddMailTextAutomatically">Add Mail Text Automatically</label>
              </div>
            </div>
          </div>
          <div class="row m-3">
            <div class="col-md-12 mb-3">
              <button type="button" class="btn btn-primary waves-effect waves-light" @click="update">Update User Profile</button>
            </div>
          </div>
        </div>
      </div>

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