<template>
  <div class="row">
    <div class="col-12">
  <div class="card">
      <div class="card-header">
        <i class="fas fa-user-plus"></i> Add User
      </div>
      <div class="card-body">
        <form class="form-horizontal">
          <div class="form-group row">
            <label class="col-md-3">Firstname</label>
            <div class="col-md-9">
              <input class="form-control" :class="{'is-invalid': errors.firstname}" v-model="user.firstname" type="text">
              <span class="help-block">Enter firstname, so people you know can recognize you.</span>
              <div class="invalid-feedback" v-if="errors.firstname">{{errors.firstname[0]}}</div>
            </div>
          </div>
                    <div class="form-group row">
            <label class="col-md-3">Lastname</label>
            <div class="col-md-9">
              <input class="form-control" :class="{'is-invalid': errors.lastname}" v-model="user.lastname" type="text">
              <span class="help-block">Enter lastname, so people you know can recognize you.</span>
              <div class="invalid-feedback" v-if="errors.lastname">{{errors.lastname[0]}}</div>
            </div>
          </div>
          <div class="form-group row">
            <label class="col-md-3">Email</label>
            <div class="col-md-9">
              <input class="form-control" :class="{'is-invalid': errors.email}" v-model="user.email" type="email">
              <span class="help-block">This email will used as log in name.</span>
              <div class="invalid-feedback" v-if="errors.email">{{errors.email[0]}}</div>
            </div>
          </div>
                    <div class="form-group row">
            <label class="col-md-3">Password</label>
            <div class="col-md-9">
              <input class="form-control":class="{'is-invalid': errors.password}" v-model="user.password" type="text">
              <span class="help-block">Password for user</span>
              <div class="invalid-feedback" v-if="errors.password">{{errors.password[0]}}</div>
            </div>
          </div>
                              <div class="form-group row">
            <label class="col-md-3">Type</label>
            <div class="col-md-9">
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="1" id="adminCheck" v-model="user.group">
  <label class="form-check-label" for="adminCheck">
    Admin
  </label>
</div>
<span class="help-block">Gives user administrator privileges.</span>

            </div>
          </div>
        </form>
      </div>
      <div class="card-footer">
        <div class="form-group row mb-0">
          <div class="col-md-9 offset-md-3">
            <button class="btn btn-primary" type="button" :disabled="submiting" @click="addUser" >
              <i class="fas fa-spinner fa-spin" v-if="submiting"></i> Save
            </button>
          </div>
        </div>
      </div>
  </div> 

</div>
<div class="col-12 mt-5">

  <div class="card">
      <div class="card-header">
        <i class="fas fa-users"></i> Users
      </div>
      <div class="card-body d-flex justify-content-center align-items-center">
      <table class="table table-sm mt-0 mb-0" >
        <thead>
          <th>Name</th>
          <th>Email</th>
          <th class="text-center">Group</th>
        </thead>
        <tbody>
                     <tr class="loader">
            <td colspan="100%" class="text-center">
          <b-spinner style="width: 3rem; height: 3rem;" variant="primary" type="grow" label="Loading Data"></b-spinner>
        </td>
        </tr>
          <tr v-for="existingUser in existingUsers" v-bind:key="existingUser.id">
            <td>{{existingUser.firstname}} {{existingUser.lastname}}</td>
            <td>{{existingUser.email}}</td>
            <td class="text-center" v-if="existingUser.group == 0">Standard user</td>
            <td class="text-center" v-else>Administrator User</td>
          </tr>
        </tbody>
      </table>
      </div>

  </div> 

</div>
</div>
</template>

<script>
export default {
  data () {
    return {
      existingUsers: [],
      user: {},
      errors: {},
      submiting: false,
      toastsCount: 0,
    }
  },
  mounted() {
    this.getUsers()
  },
  methods: {
    getUsers () {
      axios.get(`/api/admin/getUsers`)
      .then(response => {
        this.existingUsers = response.data;
        document.querySelector('.loader').style.display = 'none';
      })
    },
    addUser () {
      this.submiting = true
      axios.put(`/api/admin/addUser`, this.user)
      .then(response => {
        this.errors = {}
        this.submiting = false
          this.makeToast(false,'User added','success');
          this.user = {};
          this.getUsers();
      })
      .catch(error => {
        console.log(error)
        this.submiting = false;
        this.errors = error.response.data.errors;
        this.makeToast(false,error.response.data.message,'danger');
      })
    }
  }
}
</script>