<template>
  <div>
    <CustomSubHeader>
      <CBreadcrumb class="border-0 mb-0">{{ title }}</CBreadcrumb>
      <CButton size="sm" color="primary" class="mr-auto" :to="{name: 'admin-branch-users'}">برگشت به صفحه قبل</CButton>
      <CButton v-if="$route.params.profile === 'new'" size="sm" color="success" class="mr-1" @click="post">افزودن</CButton>
      <CButton v-else size="sm" color="success" class="mr-1" @click="update">بروزرسانی</CButton>
    </CustomSubHeader>
    <CRow>
      <CCol>
        <CCard>
          <CCardBody>
            <CRow>
              <CCol lg="6">
                <CForm>
                  <template v-if="$route.params.profile !== 'new'">
                    <h4>مشخصات کاربر</h4>
                    <el-divider/>
                  </template>
                  <CRow>
                    <CCol sm="12">
                      <CInput
                          :class="validation.first_name ? 'err' : null"
                          label="نام"
                          :description="validation.first_name ? validation.first_name.msg : null"
                          v-model="user.first_name"
                      />
                    </CCol>

                    <CCol sm="12">
                      <CInput
                          :class="validation.last_name ? 'err' : null"
                          label="نام خانوادگی"
                          :description="validation.last_name ? validation.last_name.msg : null"
                          v-model="user.last_name"
                      />
                    </CCol>

                    <CCol sm="12">
                      <CInput
                          :class="validation.username ? 'err' : null"
                          label="نام کاربری"
                          :description="validation.username ? validation.username.msg : null"
                          v-model="user.username"
                      />
                      <p class="form-err" v-if="validation.username">{{ validation.username.msg }}</p>
                    </CCol>

                    <CCol sm="12">
                      <CInput
                          :class="validation.mobile_number ? 'err' : null"
                          label="تلفن همراه"
                          v-model="user.mobile_number"
                          :description="validation.mobile_number ? validation.mobile_number.msg : null"
                          placeholder="اختیاری"
                      />
                    </CCol>

                    <CCol sm="12">
                      <CInput
                          :class="validation.email ? 'err' : null"
                          label="ایمیل"
                          v-model="user.email"
                          :description="validation.email ? validation.email.msg : null"
                          placeholder="اختیاری"
                      />
                    </CCol>

                    <template v-if="$route.params.profile === 'new'">
                      <CCol sm="12">
                        <CInput
                            :class="validation.password ? 'err' : null"
                            label="کلمه عبور"
                            type="password"
                            :description="validation.password ? validation.password.msg : null"
                            v-model="user.password"
                        />
                      </CCol>
                      <CCol sm="12">
                        <CInput
                            :class="validation.password_confirmation ? 'err' : null"
                            label="تکرار کلمه عبور"
                            type="password"
                            :description="validation.password_confirmation ? validation.password_confirmation.msg : null"
                            v-model="user.password_confirmation"
                        />
                      </CCol>
                    </template>
                  </CRow>
                  <el-divider/>
                  <h6>انتخاب شعبه قابل دسترسی</h6>
                  <el-select v-model="user.branches" multiple placeholder="انتخاب کنید" style="width: 100%;">
                    <el-option v-for="item in branches" :key="item._id" :label="item.title" :value="item._id"/>
                  </el-select>
                  <p style="margin-top : 5px !important ; color : red" class="form-err" v-if="validation.branches">{{ validation.branches.msg }}</p>
                  <el-divider/>
                  <h6>دسترسی های کاربر</h6>
                  <div class="user-permissions">
                    <el-tag
                        class="ml-2 mb-2"
                        style="cursor: pointer"
                        v-for="(item,index) in user.permissions"
                        :key="index + Math.random() + 1"
                        closable
                        disable-transitions
                        @close="removePermission(item)"
                    >{{ getPermissionName(item) }}
                    </el-tag>
                  </div>
                </CForm>
              </CCol>
              <CCol lg="6">
                <CForm>
                  <CRow>
                    <CCol sm="12">
                      <h4>عکس پروفایل</h4>
                      <el-divider/>
                      <CCol>
                        <img :src="user.profile_pic" style="width: 100%;max-width: 250px;" alt="">
                      </CCol>
                      <input type="file" ref="profile_pic" @change="imagePreview">
                      <p style="margin-top : 5px !important ;" class="form-err" v-if="validation.profile_pic">{{ validation.profile_pic.msg }}</p>
                      <p class="mt-3 text-muted">عکس 500*500 باشد. در غیر این صورت اتوماتیک بریده می شود.</p>
                      <CCol>
                      </CCol>
                      <p style="margin-top : 0px !important ; " class="form-err" v-if="validation.password_confirmation">{{ validation.password_confirmation.msg }}</p>
                    </CCol>
                    <template v-if="$route.params.profile !== 'new'">
                      <CCol sm="12" class="mt-5">
                        <h4>تغییر کلمه عبور</h4>
                        <el-divider/>
                        <CInput
                            :class="validation.password ? 'err' : null"
                            label="کلمه عبور"
                            type="password"
                            :description="validation.password ? validation.password.msg : null"
                            v-model="newPass.password"
                        />
                      </CCol>

                      <CCol sm="12">
                        <CInput
                            :class="validation.password_confirmation ? 'err' : null"
                            label="تکرار کلمه عبور"
                            type="password"
                            :description="validation.password_confirmation ? validation.password_confirmation.msg : null"
                            v-model="newPass.password_confirmation"
                        />

                        <CButton size="sm" color="success" class="mr-1 mt-3" @click="updatePassword">تغییر کلمه عبور</CButton>
                      </CCol>
                    </template>
                  </CRow>

                </CForm>
              </CCol>
            </CRow>
          </CCardBody>
        </CCard>

        <CCard>
          <CCardBody>
            <h6>لیست کل دسترسی ها</h6>
            <div class="permissions">
              <el-tag
                  class="ml-2 mb-2"
                  style="cursor: pointer"
                  v-for="(item,index) in permissions"
                  :key="index + Math.random() + 2"
                  :type="hasPermission(item.value) ? 'success' : 'primary'"
                  disable-transitions
                  @click="addPermission(item.value)"
              >{{ item.name }}
              </el-tag>
            </div>
          </CCardBody>
        </CCard>

      </CCol>

    </CRow>
  </div>
</template>

<script>
import axiosUploadProcess from "@/mixins/axiosUploadProcess"

export default {
  data() {
    return {
      user: null,
      permissions: null,
      branches: null,
      newPass: {
        password: '',
        password_confirmation: ''
      },
      validation: {}
    }
  },
  mixins: [axiosUploadProcess],
  computed: {
    title() {
      return this.$route.params.profile === 'new' ? 'افزودن کاربر' : 'مشاهده پروفایل کاربر'
    }
  },
  methods: {
    getPermissionName(value) {
      return this.permissions.filter(item => item.value === value)[0].name
    },
    addPermission(val) {
      if (!this.user.permissions.includes(val)) this.user.permissions.push(val)
      else this.$message({
        type: 'warning',
        message: 'کاربر از قبل این دسترسی را دارد'
      })
    },
    removePermission(val) {
      this.user.permissions = this.user.permissions.filter(item => item !== val)
    },
    hasPermission(val) {
      return this.user.permissions.includes(val)
    },
    imagePreview(e) {
      this.user.profile_pic = URL.createObjectURL(e.target.files[0])
    },
    post() {
      this.validation = {}

      const data = new FormData()
      data.append("first_name", this.user.first_name)
      data.append("last_name", this.user.last_name)
      data.append("mobile_number", this.user.mobile_number)
      data.append("email", this.user.email)
      data.append("username", this.user.username)
      data.append("permissions", JSON.stringify(this.user.permissions))
      data.append("branches", JSON.stringify(this.user.branches))
      data.append("password", this.user.password)
      data.append("password_confirmation", this.user.password_confirmation)
      if (this.$refs.profile_pic.files[0]) data.append("profile_pic", this.$refs.profile_pic.files[0])


      this.$axios.post(`/api/admin/admin`, data, this.axiosConfig)
          .then(response => {
            this.$message({
              type: 'success',
              message: 'کاربر با موفقیت ایجاد شد.'
            })
            this.$router.push({name: 'admin-branch-users'})
          })
          .catch(err => {
            if (err.response.status === 401) {
              return this.$message({
                type: 'error',
                message: 'لطفا دوباره وارد سیستم شوید.'
              })
            }
            if (err.response.status === 422) this.validation = err.response.data.validation
            else console.log(err.response.data)
          })
    },
    update() {
      this.validation = {}
      const data = new FormData()
      data.append("first_name", this.user.first_name)
      data.append("last_name", this.user.last_name)
      data.append("mobile_number", this.user.mobile_number)
      data.append("email", this.user.email)
      data.append("username", this.user.username)
      data.append("permissions", JSON.stringify(this.user.permissions))
      data.append("branches", JSON.stringify(this.user.branches))
      data.append("password", this.user.password)
      data.append("password_confirmation", this.user.password_confirmation)
      if (this.$refs.profile_pic.files[0]) data.append("profile_pic", this.$refs.profile_pic.files[0])

      this.$axios.put(`/api/admin/admin/${this.user._id}`, data, this.axiosConfig)
          .then(response => {
            this.$message({
              type: 'success',
              message: 'اطلاعات بروزرسانی شد.'
            })
            this.$nuxt.refresh()
          })
          .catch(err => {
            if (err.response.status === 401) {
              return this.$message({
                type: 'error',
                message: 'لطفا دوباره وارد سیستم شوید.'
              })
            }
            if (err.response.status === 422) this.validation = err.response.data.validation
            else console.log(err.response.data)
          })
    },
    updatePassword() {
      this.validation = {}
      this.$axios.put(`/api/admin/changeAdminPasswordByAdmin/${this.user._id}`, this.newPass)
          .then(response => {
            this.$message({
              type: 'success',
              message: 'کلمه عبور بروزرسانی شد.'
            })
            this.newPass = {
              password: '',
              password_confirmation: ''
            }
          })
          .catch(err => {
            if (err.response.status === 401) {
              return this.$message({
                type: 'error',
                message: 'لطفا دوباره وارد سیستم شوید.'
              })
            }
            if (err.response.status === 422) this.validation = err.response.data.validation
            else console.log(err.response.data)
          })
    }
  },
  head() {
    return {
      title: this.title
    }
  },
  layout: 'admin',
  async asyncData({$axios, params, error}) {
    try {
      const permissions = await $axios.get('/api/admin/permissions')
      const branches = await $axios.$get('/api/admin/store/getAll')
      if (params.profile !== 'new') {
        const user = await $axios.get(`/api/admin/admin/${params.profile}`)
        return {
          permissions: permissions.data,
          user: user.data,
          branches
        }
      } else {
        return {
          permissions: permissions.data,
          branches,
          user: {
            first_name: '',
            last_name: '',
            mobile_number: '',
            email: '',
            username: '',
            password: '',
            password_confirmation: '',
            profile_pic: '',
            permissions: [],
            branches: []
          }
        }
      }
    } catch (e) {
      if (e?.response?.status === 401) {
        error({
          status: 401,
          message: "لطفا دوباره وارد سیستم شوید.",
        });
      }
      if (e?.response?.status === 403) {
        error({
          status: 403,
          message: e?.response?.data?.message,
        });
      }
      if (e?.response?.status === 500) {
        error({
          status: 500,
          message: "مشکلی در گرفتن اطلاعات پیش آمده",
        });
      } else
        error({
          status: 404,
          message: "اطلاعات مورد نظر پیدا نشد",
        });
    }
  }
}
</script>

