<template>
  <CRow class="justify-content-center">
    <CCol lg="5">
      <CCardGroup>
        <CCard class="p-4">
          <CCardBody>
            <CForm @submit.prevent="doLogin">
              <h1 class="text-muted text-center mb-5">پنل مدیریت</h1>
              <CInput
                  :class="validation.username ? 'err' : null"
                  placeholder="نام کاربری"
                  :description="validation.username ? validation.username.msg : null"
                  autocomplete="username email"
                  v-model="login.username"
              >
                <template #prepend-content>
                  <CIcon name="cil-user"/>
                </template>
              </CInput>

              <div class="butt">
                <CInput
                    :class="validation.password ? 'err' : null"
                    placeholder="کلمه عبور"
                    :type="passwordState"
                    :description="validation.password ? validation.password.msg : null"
                    autocomplete="curent-password"
                    v-model="login.password"
                >

                  <template #prepend-content>
                    <CIcon name="cil-lock-locked"/>
                  </template>
                </CInput>
                <i @click="showPass = !showPass" class="far fa-eye"></i>
              </div>

              <CInputCheckbox label="مرا به خاطر بسپار" @update:checked="val => login.remember_me = val"/>

              <p class="text-muted mt-3" style="font-size: 11px;">*درصورتی که گزینه "مرا به خاطر بسپار" را فعال نکنید بعد از 1 ساعت باید دوباره وارد سیستم شوید.</p>

              <CRow>
                <CCol col="12" class="text-right mt-2">
                  <CButton color="primary" type="submit" class="px-4">ورود</CButton>
                </CCol>
              </CRow>
            </CForm>
          </CCardBody>
        </CCard>
      </CCardGroup>
    </CCol>
  </CRow>
</template>

<script>
export default {
  data() {
    return {
      showPass: false,
      login: {
        username: '',
        password: '',
        remember_me: false
      },
      validation: {}
    }
  },
  computed: {
    passwordState() {
      return this.showPass ? "text" : "password"
    }
  },
  methods: {
    doLogin() {
      this.validation = {}

      this.$auth.loginWith('local', {
        data: this.login
      })
          .then(response => {
            window.location.replace('/admin')
          })
          .catch(err => {
            if (err.response.status === 422) this.validation = err.response.data.validation
            if (err.response.status === 403) {
              this.$message({
                type: 'warning',
                message: err.response.data.message
              })
            } else console.log(err.response.data)
          })
    }
  },
  layout: 'admin-auth'
}
</script>

<style lang="scss">
.butt {
  position: relative;

  i {
    position: absolute;
    left: 7px;
    top: 11px;
    z-index: 3;
    cursor: pointer;
    color: rgba(#000, 0.5);
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -ms-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;

    &:hover {
      color: #000;
    }
  }
}
</style>
