<template>
  <div>
    <video-background
      src="/video/bg-video.mp4"
      style=" height: 100vh;"
      poster="/images/poster.png"
    >
      <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("Forgot Password?") }}
                  </h1>
                  <h2 class="text-muted h5 pt-2">
                    {{ t("We send link") }}
                  </h2>
                </div>
                <div class="row pt-2">
                  <div class="col-12 col-md-8 col-xl-8 mx-auto">
                    <div v-if="resetSuccess" class="alert alert-success text-center">
                      {{ t('Reset Password Message') }}
                    </div>
                    <form method="POST" @submit.prevent="submit">
                      <div class="row pt-4">
                        <div class="col-12">
                          <label class="form-label">{{ t('Email') }}</label>
                          <input v-model="email" type="email" placeholder="email@mail.com" class="form-control">
                          <div v-if="errors.email" class="invalid-feedback d-block">
                            {{ t(errors.email[0]) }}
                          </div>
                        </div>
                      </div>
                      <div class="row pt-4">
                        <div class="col">
                          <button type="submit" style="min-width:fit-content" class="login-btn col-4">
                            {{ 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()

    return {
      t,
      localePath
    }
  },
  data () {
    return {
      email: '',
      resetSuccess: false,
      errors: [],
      loading: false
    }
  },
  methods: {
    submit () {
      this.loading = true
      this.errors = []
      this.$axios.post('/api/password/email', { email: this.email })
        .then(({ data }) => {
          this.loading = false
          this.$toast.success('Wenn die E-Mail existiert, wurde ein Link zum Zurücksetzen gesendet.')
          this.resetSuccess = true
        })
        .catch((error) => {
          this.loading = false
          if (error.response.status === 422) {
            this.errors = error.response.data.errors
          } else {
            this.$toast.error('Ein Fehler ist aufgetreten.')
          }
        })
    }
  }
}
</script>
