<template>
  <div>
    <div class="container" v-if="loading">
      <div class="row">
        <div class="col-sm-12 pt-5">
          <div class="bubblingG">
            <span id="bubblingG_1"></span>
            <span id="bubblingG_2"></span>
            <span id="bubblingG_3"></span>
          </div>
        </div>
      </div>
    </div>

    <div class="container h-100" style="padding-top: 10rem">
      <div class="d-flex justify-content-center h-100">
        <div class="user_card">
          <div class="d-flex justify-content-center">
            <div class="brand_logo_container">
              <img
                :src="require('@/assets/quiosco-icon.png')"
                alt="Logo Quiosco"
                class="brand_logo"
              />
            </div>
          </div>
          <div class="d-flex justify-content-center form_container">
            <form class="login">
              <h5 class="text-center font-weight-light">QUIOSCO</h5>
              <!-- <span> -->
              <p class="text-center text-danger">{{ error }}</p>
              <!-- </span> -->
              <div class="input-group mb-1">
                <div class="input-group-append">
                  <span class="input-group-text">
                    <i class="material-icons">person</i>
                  </span>
                </div>
                <input
                  type="text"
                  required
                  v-model="DINUM"
                  class="form-control input_user"
                  placeholder="Usuario"
                />
              </div>
              <div class="input-group mb-2">
                <div class="input-group-append">
                  <span class="input-group-text">
                    <i class="material-icons">vpn_key</i>
                  </span>
                </div>
                <input
                  type="password"
                  required
                  v-model="DIPASS"
                  class="form-control input_pass"
                  placeholder="Contraseña"
                />
              </div>

              <div class="input-group mb-2">
                <div class="input-group-append">
                  <span class="input-group-text">
                    <i class="material-icons">lock</i>
                  </span>
                </div>
                <select class="form-control" id="perfil" v-model="DIPERFIL">
                  <option selected >ADMINISTRADOR</option>
                  <option>COLABORADOR</option>
                </select>
              </div>
            </form>
          </div>
          <div class="d-flex justify-content-center mt-3 login_container">
            <button
              type="submit"
              name="button"
              class="btn login_btn"
              @click="loginDirecto()"
            >Iniciar sesión</button>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "Login",
  data() {
    return {
      DINUM: "",
      DIPASS: "",
      DIPERFIL: "",
      loading: "",
      error: "",
      user: {}
    };
  },
  methods: {
    loginDirecto() {
      let DINUM = this.DINUM;
      let DIPASS = this.DIPASS;
      let DIPERFIL = this.DIPERFIL;

      if (DINUM !== "" && DIPASS !== "") {
        this.loading = true;
        this.$store
          .dispatch("login", { DINUM, DIPASS, DIPERFIL })
          .then(resp => {
            this.$router.push("/");
            this.loading = false;
          })
          .catch(err => {
            if(this.$store.getters.authStatus){
              this.error = this.$store.getters.msgResponse;
              this.loading = false;
              return false;
            }
            if (!err.data.response) {
              this.error = err.data.message;
              this.loading = false;
            }
          });
      }
    }
  }
};
</script>

<style scoped>
.user_card {
  height: 400px;
  width: 350px;
  margin-top: auto;
  margin-bottom: auto;
  background: #fbfbfb;
  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 10px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
    0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
    0 6px 20px 0 rgba(0, 0, 0, 0.19);
  border-radius: 5px;
}
.brand_logo_container {
  position: absolute;
  height: 170px;
  width: 170px;
  top: -75px;
  border-radius: 50%;
  background: #dd0302;
  padding: 10px;
  text-align: center;
}
.brand_logo {
  height: 150px;
  width: 150px;
  border-radius: 50%;
  border: 2px solid white;
}
.form_container {
  margin-top: 75px;
}
.login_btn {
  width: 100%;
  background: #c0392b !important;
  color: white !important;
}
.login_btn:focus {
  box-shadow: none !important;
  outline: 0px !important;
}
.login_container {
  padding: 0 2rem;
}
.input-group-text {
  background: #c0392b !important;
  color: white !important;
  border: 0 !important;
  border-radius: 0.25rem 0 0 0.25rem !important;
}
.input_user,
.input_pass:focus {
  box-shadow: none !important;
  outline: 0px !important;
}
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
  background-color: #c0392b !important;
}

/* Loader */
.bubblingG {
  width: 90px;
  height: 56px;
  position: fixed;
  z-index: 999;
  overflow: visible;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

.bubblingG span {
  display: inline-block;
  vertical-align: middle;
  width: 11px;
  height: 11px;
  margin: 28px auto;
  background: rgba(224, 54, 68, 0.9);
  border-radius: 56px;
  -o-border-radius: 56px;
  -ms-border-radius: 56px;
  -webkit-border-radius: 56px;
  -moz-border-radius: 56px;
  animation: bubblingG 0.715s infinite alternate;
  -o-animation: bubblingG 0.715s infinite alternate;
  -ms-animation: bubblingG 0.715s infinite alternate;
  -webkit-animation: bubblingG 0.715s infinite alternate;
  -moz-animation: bubblingG 0.715s infinite alternate;
}

#bubblingG_1 {
  animation-delay: 0s;
  -o-animation-delay: 0s;
  -ms-animation-delay: 0s;
  -webkit-animation-delay: 0s;
  -moz-animation-delay: 0s;
}

#bubblingG_2 {
  animation-delay: 0.2095s;
  -o-animation-delay: 0.2095s;
  -ms-animation-delay: 0.2095s;
  -webkit-animation-delay: 0.2095s;
  -moz-animation-delay: 0.2095s;
}

#bubblingG_3 {
  animation-delay: 0.429s;
  -o-animation-delay: 0.429s;
  -ms-animation-delay: 0.429s;
  -webkit-animation-delay: 0.429s;
  -moz-animation-delay: 0.429s;
}
@keyframes bubblingG {
  0% {
    width: 11px;
    height: 11px;
    background-color: rgb(245, 0, 0);
    transform: translateY(0);
  }

  100% {
    width: 27px;
    height: 27px;
    background-color: rgb(255, 255, 255);
    transform: translateY(-24px);
  }
}

@-o-keyframes bubblingG {
  0% {
    width: 11px;
    height: 11px;
    background-color: rgb(245, 0, 0);
    -o-transform: translateY(0);
  }

  100% {
    width: 27px;
    height: 27px;
    background-color: rgb(255, 255, 255);
    -o-transform: translateY(-24px);
  }
}

@-ms-keyframes bubblingG {
  0% {
    width: 11px;
    height: 11px;
    background-color: rgb(245, 0, 0);
    -ms-transform: translateY(0);
  }

  100% {
    width: 27px;
    height: 27px;
    background-color: rgb(255, 255, 255);
    -ms-transform: translateY(-24px);
  }
}

@-webkit-keyframes bubblingG {
  0% {
    width: 11px;
    height: 11px;
    background-color: rgb(245, 0, 0);
    -webkit-transform: translateY(0);
  }

  100% {
    width: 27px;
    height: 27px;
    background-color: rgb(255, 255, 255);
    -webkit-transform: translateY(-24px);
  }
}

@-moz-keyframes bubblingG {
  0% {
    width: 11px;
    height: 11px;
    background-color: rgb(245, 0, 0);
    -moz-transform: translateY(0);
  }

  100% {
    width: 27px;
    height: 27px;
    background-color: rgb(255, 255, 255);
    -moz-transform: translateY(-24px);
  }
}
</style>