<template>
  <div>
    <video-background
      src="/video/bg-video.mp4"
      poster="/images/poster.png"
      style="height: 100vh;"
    >
      <div class="container-fluid">
        <div class="row ">
          <div class="col-12 col-lg-4 bg-img d-none d-lg-block" style="background-image: url('/images/login.svg');background-size: cover;height: 100vh;" />
          <div class="col-12 col-lg-8 pt-4 px-3 px-sm-5 px-md-5 pb-5">
            <div class="row">
              <div class="col-12 py-3 text-center">
                <img src="/images/logo.svg" height="35" class="img " alt="Mindboost Logo">
              </div>
            </div>
            <div class="row mt-lg-0 mt-4" style="height: 90%">
              <div class="col-12 my-auto">
                <div class="text-center pt-4 pt-md-2 col-12 col-md-8 col-xl-8 mx-auto">
                  <h1 class="fw-bolder h3" style="color: #585C5E;">
                    {{ t('New Password') }}
                  </h1>
                </div>
                <div class="row pt-2">
                  <div class="col-12 col-md-8 col-xl-8 mx-auto">
                    <form method="POST" @submit.prevent="validateAndReset">
                      <div class="row pt-4">
                        <div class="col-12">
                          <label for="password" class="text-muted ">{{ t("Password") }} </label>
                          <input id="password" v-model="form.password" type="password" class="form-control" placeholder="***">
                          <div v-if="errors.password" class="invalid-feedback d-block">
                            {{ t(errors.password[0]) }}
                          </div>
                        </div>
                      </div>
                      <div class="row pt-3">
                        <div class="col-12">
                          <label for="confirm-password" class="text-muted ">{{ t("Confirm Password") }} </label>
                          <input id="confirm-password" v-model="form.password_confirmation" type="password" class="form-control" placeholder="***">
                          <div v-if="errors.password_confirmation" class="invalid-feedback d-block">
                            {{ t(errors.password_confirmation[0]) }}
                          </div>
                        </div>
                      </div>
                      <div class="row pt-4">
                        <div class="col">
                          <button type="submit" class="login-btn col-4" style="min-width:fit-content">
                            {{ t("Reset Password") }} <div v-if="loading" class="spinner-border spinner-border-sm" role="status">
                              <span class="sr-only">{{ t("Loading...") }}</span>
                            </div>
                          </button>
                        </div>
                      </div>
                    </form>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </video-background>
  </div>
</template>
<script>
export default {
  setup () {
    const { t } = useI18n()
    const localePath = useLocalePath()
    const router = useRouter()

    return {
      t,
      localePath,
      router
    }
  },
  data () {
    return {
      form: {
        email: '', // wird aus URL-Param geholt
        token: '', // wird aus URL-Param geholt
        password: '',
        password_confirmation: ''
      },
      errors: [],
      loading: false
    }
  },
  mounted () {
    this.form.token = this.$route.query.token || ''
    this.form.email = this.$route.query.email || ''
  },
  methods: {
    validateAndReset () {
      this.errors = []

      if (this.form.password.length < 6) {
        this.errors.password = ['The password must be at least 6 characters.']
        return
      }

      if (this.form.password !== this.form.password_confirmation) {
        this.errors.password_confirmation = ['The passwords do not match.']
        return
      }

      this.resetPassword()
    },

    resetPassword () {
      this.loading = true
      this.errors = []
      this.$axios.post('/api/password/reset', this.form).then(({ data }) => {
        this.loading = false
        if (data.success) {
          this.$toast.success('Password successfully reset!')
          this.$router.push(this.localePath('/auth/login'))
        }
      }).catch((error) => {
        this.loading = false
        this.$toast.error('Fehler beim Zurücksetzen des Passworts.')
        if (error.response && error.response.status === 422) {
          this.errors = error.response.data.errors
        }
      })
    }
  }

}
</script>
