<template>
    <v-layout row>
        <v-flex xs12 sm6 md4 offset-sm3 offset-md4>
            <h4 class="text-xs-center my-5 display-1">Vzdelávací systém</h4>

            <v-card class="elevation-5 pa-4">
                <prihlasenie-form
                        :loading="loading"
                        :chyba="chyba"
                        :validacneChyby="validacneChyby"
                        @prihlasenie="loginAction"
                        @zavrietInformaciuOChybe="chyba.zobrazit=false"
                ></prihlasenie-form>
            </v-card>

            <footer class="mt-4">
                <p class="mb-0">Všetky práva vyhradené pre <a href="https://www.seka.sk/" target="_blank">S-EKA, spol. s r.o.</a></p>
                <a href="https://www.seka.sk/" target="_blank">
                    <img src="/public/logo.png">
                </a>
            </footer>
        </v-flex>
    </v-layout>
</template>

<script>
  import { mapActions, mapState } from 'vuex'
  import PrihlasenieForm from '../../components/Prihlasenie/PrihlasenieForm.vue'

  export default {
    name: 'IndexView',
    components: {
      PrihlasenieForm
    },
    data () {
      return {
        loading: false,
        chyba: {
          text: '',
          zobrazit: false
        },
        validacneChyby: []
      }
    },
    methods: {
      ...mapActions('pouzivatelia', [
        'prihlasenie'
      ]),
      loginAction (data) {
        let self = this

        this.loading = true

        this.prihlasenie({
          data: {
            identifikacia: {
              prihlasovacie_meno: data.meno,
              prihlasovacie_heslo: data.heslo,
            }
          }
        }).then((response) => {
          self.loading = false
          self.$router.push({name: 'Plocha'})
        }).catch((error) => {
          if (error.hasOwnProperty('response')) {
            if (error.response.data.hasOwnProperty('message')) {
              self.chyba.text = error.response.data.message
              self.chyba.zobrazit = true
            }
            if (error.response.data.hasOwnProperty('errors')) {
              self.validacneChyby = []
              error.response.data.errors.forEach((e) => self.validacneChyby.push(e.detail))
            }
          }

          self.loading = false
        })
      }
    },
    computed: {
      ...mapState('pouzivatelia', [
        'pouzivatelia'
      ])
    },
    watch: {}
  }
</script>

<style scoped>
    * { box-sizing: border-box; }

    body {
        font-family: Helvetica;
        background: #eee;
        -webkit-font-smoothing: antialiased;
    }

    hgroup {
        text-align: center;
        margin-top: 4em;
    }

    h3, h5 { font-weight: 300; }

    h3 { color: #636363; }

    h5 { color: #4a89dc; }

    .tab-content {
        padding: 3em 2em 2em 2em;
    }

    .group {
        position: relative;
        margin-bottom: 45px;
    }

    footer { text-align: center; }

    footer p {
        color: #888;
        font-size: 13px;
        letter-spacing: .4px;
    }

    footer a {
        color: #4a89dc;
        text-decoration: none;
        transition: all .2s ease;
    }

    footer a:hover {
        color: #666;
        text-decoration: underline;
    }

    footer img {
        width: 120px;
        transition: all .2s ease;
    }

    footer img:hover { opacity: .83; }

    footer img:focus , footer a:focus { outline: none; }
</style>
