<template>
  <div>
    <v-container grid-list-md text-xs-center>
      <v-layout row wrap>
        <v-flex xs12 sm4 offset-sm1 align-center>
          <div class="text-sm-left mb-4">
            <span class="headline font-weight-bold">เข้าสู่ระบบ</span>
          </div>
          <v-form @submit.prevent="login()">
            <v-text-field
              label="อีเมล"
              prepend-inner-icon="email"
              color="primary"
              class="fix-size red--text"
              type="email"
              v-model="loginData.email"
            ></v-text-field>
            <v-text-field
              label="รหัสผ่าน"
              type="password"
              color="primary"
              prepend-inner-icon="lock"
              v-model="loginData.password"
            ></v-text-field>
            <p class="text-xs-right"><router-link to="/" class="body-2 font-weight-medium">ลืมรหัสผ่าน?</router-link></p>
            <v-btn color="blue" large dark block type="submit">เข้าสู่ระบบ</v-btn>
          </v-form>
          <div class="my-3"><span class="font-weight-bold">หรือ</span></div>
          <v-btn color="primary" block><v-icon>fab fa-facebook</v-icon>&nbsp;เข้าสู่ระบบ Facebook</v-btn>
          <v-btn color="deep-orange" class="white--text" block><v-icon>fab fa-google</v-icon>&nbsp;เข้าสู่ระบบ Google</v-btn>
        </v-flex>
        <v-flex sm2 xs12>
          <v-layout justify-center fill-height>
              <v-divider vertical inset></v-divider>
          </v-layout>
        </v-flex>
        <v-flex sm4 xs12 align-center>
          <div class="text-sm-left mb-4">
            <span class="headline font-weight-bold">สมัครสมาชิก</span>
          </div>
          <v-form @submit.prevent="register()">
            <v-layout row wrap>
              <v-flex sm6 xs12>
                <v-text-field
                  label="ชื่อ"
                  v-model="registerData.first_name"
                  clearable
                  required
                  class="fix-size"
                ></v-text-field>
              </v-flex>
              <v-flex sm6 xs12>
                <v-text-field
                  label="นามสกุล"
                  v-model="registerData.last_name"
                  clearable
                  required
                  class="fix-size"
                ></v-text-field>
              </v-flex>
            </v-layout>
            <v-text-field
              label="อีเมล"
              v-model="registerData.email"
              clearable
              required
              class="fix-size"
            ></v-text-field>
            <v-text-field
              label="รหัสผ่าน"
              v-model="registerData.password"
              clearable
              type="password"
              required
              class="fix-size"
            ></v-text-field>
            <v-text-field
              label="ยืนยันรหัสผ่าน"
              v-model="registerData.password_confirmation"
              clearable
              type="password"
              required
              class="fix-size"
            ></v-text-field>
            <v-btn color="red accent-3 my-4" block dark large type="submit">สมัครสมาชิก</v-btn>
          </v-form>
        </v-flex>
      </v-layout>
    </v-container>
  </div>
</template>

<script>
export default {
  data () {
    return {
      loginData: {
        email: '',
        password: ''
      },
      registerData: {
        first_name: '',
        last_name: '',
        email: '',
        password: '',
        password_confirmation: ''
      }
    }
  },
  methods: {
    login () {
      axios.post('/login', this.loginData)
        .then((res) => {
          console.log(res)
          console.log(res.body)
          this.$router.push('/')
        })
        .catch((err) => {
          console.log(err.response)
        })
    },
    register () {
      axios.post('/register', {
        name: this.registerData.first_name + ' ' + this.registerData.last_name,
        email: this.registerData.email,
        password: this.registerData.password,
        password_confirmation: this.registerData.password_confirmation
      })
        .then((res) => {
          this.$router.push('/account');
          console.log(res)
        })
        .catch((err) => {
          console.log(err.response)
        })
    }
  },
  mounted () {
    axios.get('api/user')
      .then((res) => {
        console.log(res.body)
      })
      .catch((err) => {
        console.log(err.response)
      })
  }
}
</script>


<style lang="scss" scoped>
  .fix-size {
    height: 50px;
  }
</style>

