<template>
  <div class="authentication-bg min-vh-100">
    <div class="container">
      <div class="d-flex flex-column min-vh-100 px-3 pt-4">
        <div class="row justify-content-center my-auto">
          <div class="col-lg-10">
            <div class="py-5">
              <div class="card auth-cover-card overflow-hidden">
                <div class="row g-0">
                  <div class="col-lg-6">
                    <div class="auth-img"></div>
                  </div>
                  <div class="col-lg-6">
                    <div
                      class="p-4 p-lg-5 h-100 d-flex align-items-center justify-content-center"
                      style="background: rgb(0 76 143)"
                    >
                      <div class="w-100">
                        <div class="mb-4 mb-md-5">
                          <a href="/" class="d-block auth-logo">
                            <img
                              src="/img/logo-dark.png"
                              alt=""
                              class="auth-logo-dark w-75"
                            />
                          </a>
                        </div>

                        <div class="text-white-50 mb-4">
                          <h4 class="text-white">
                            {{ $trans("Sign in into your account") }}
                          </h4>
                        </div>
                        <form @submit.prevent="handleLogin" autocomplete="off">
                          <div class="form-floating form-floating-custom mb-3">
                            <input
                              type="text"
                              class="form-control"
                              id="input-username"
                              placeholder="Enter User Name"
                              v-model="login.username"
                              autocomplete="off"
                              :class="{ error: invalidLogin }"
                            />
                            <label for="input-username">
                              {{ $trans("Email Or Registered Phone number") }}
                            </label>
                            <div class="form-floating-icon">
                              <i
                                class="uil uil-users-alt"
                                :class="{ 'text-danger': invalidLogin }"
                              ></i>
                            </div>
                          </div>
                          <div class="form-floating form-floating-custom mb-3">
                            <input
                              type="password"
                              class="form-control"
                              id="input-password"
                              placeholder="Enter Password"
                              v-model="login.password"
                              autocomplete="off"
                              :class="{ error: invalidLogin }"
                            />
                            <label for="input-password">
                              {{ $trans("Password") }}</label
                            >
                            <div class="form-floating-icon">
                              <i
                                class="uil uil-padlock"
                                :class="{ 'text-danger': invalidLogin }"
                              ></i>
                            </div>
                          </div>

                          <div
                            class="form-check form-check-info text-white-50 font-size-16"
                          >
                            <input
                              class="form-check-input bg-soft-primary"
                              type="checkbox"
                              id="remember-check"
                              v-model="rememberMe"
                            />
                            <label
                              class="form-check-label font-size-14"
                              for="remember-check"
                            >
                              Remember me
                            </label>
                          </div>

                          <div class="mt-3">
                            <loading-button
                              task="LOGIN"
                              class="btn btn-primary btn-login btn-lg w-100"
                              type="submit"
                            >
                              <template #caption
                                >{{ $trans("Login") }}
                                <span aria-hidden="true">&rarr;</span></template
                              >
                            </loading-button>
                          </div>

                          <!-- <div class="mt-4 text-center">
                            <a
                              href="auth-resetpassword-cover.html"
                              class="text-white-50 text-decoration-underline"
                              >{{ $trans("Forgot your password") }}?</a
                            >
                          </div> -->
                        </form>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="d-flex align-items-baseline justify-content-end">
                <div class="mt-5 text-center text-muted">
                  <p>
                    <RouterLink
                      to="/new-subscription"
                      type="button"
                      class="text-decoration-underline btn btn-icon dropdown-toggle fw-bolder"
                    >
                      {{ $trans("Request Subscription") }}
                      <span aria-hidden="true">&rarr;</span>
                    </RouterLink>
                  </p>
                </div>
                <div class="user-action">
                  <div class="dropdown">
                    <a
                      class="btn btn-icon dropdown-toggle fw-bolder"
                      style="margin-top: 5px"
                      data-bs-toggle="dropdown"
                      href="#"
                      aria-expanded="false"
                    >
                      <em class="icon uil uil-globe fs-3"></em>
                      <span
                        style="position: relative; top: -5px; padding-left: 8px"
                        >{{ country.label || "" }}</span
                      ></a
                    >
                    <div
                      class="dropdown-menu dropdown-menu-start"
                      style="left: auto; top: auto; right: 0; bottom: 100%"
                    >
                      <ul class="link-list-opt no-bdr">
                        <li v-for="(item, i) in languages" :key="'lang' + i">
                          <a
                            href="javascript:void(0)"
                            @click.prevent="setLanguage(item)"
                          >
                            <img
                              :src="`/img/${item.flag}`"
                              class="img-fluid"
                              style="width: 20px"
                              :alt="item.label"
                            />
                            <span class="lang-label">{{ item.label }}</span></a
                          >
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="alert alert-danger alert-outline alert-dismissible fade show"
                role="alert"
                v-if="invalidLogin"
              >
                <i
                  class="uil uil-exclamation-octagon font-size-16 text-danger me-2"
                ></i>
                <strong>
                  {{
                    $trans("Invalid Password or Username. Try again")
                  }}</strong
                >
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-12">
            <div class="text-center text-muted p-4">
              <p class="mb-0" style="color: white">
                2015 © {{ new Date().getFullYear() }} Levo0 Product of NOVA SOFTWARE
                LTD.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import LoadingButton from "@/components/LoadingButton.vue";
import { setLanguage, getCountry } from "@/lang/index";
import { languages } from "@/lang/languages";
export default {
  name: "Login",
  components: {
    LoadingButton,
  },
  data: () => ({
    login: {
      username: null,
      password: null,
    },
    invalidLogin: false,
    languages,
    country: {},
    rememberMe: false,
  }),
  created() {
    if (this.$auth.active()) {
      location.replace("/dashboard");
    }
  },
  mounted() {
    this.country = getCountry();
    this.checkRememberMe();
  },
  methods: {
    setLanguage,
    handleLogin() {
      if (this.rememberMe) {
        localStorage.setItem("rememberMe", "true");
      } else {
        localStorage.removeItem("rememberMe");
      }
      this.invalidLogin = false;
      this.$http
        .post("auth/login", this.$helper.generateFormData(this.login))
        .then((response) => {
          setTimeout(() => {
            this.$auth.setToken(response.data);
            location.replace("/dashboard");
          }, 1);
        })
        .catch((err) => {
          if (err.response.status == 401) {
            this.invalidLogin = true;
          }
        });
    },
    checkRememberMe() {
      const rememberMe = localStorage.getItem("rememberMe");
      this.rememberMe = rememberMe === "true";
    },
  },
};
</script>
