<template>
  <div class="container">
    <div class="row">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">Add Customer</h3>
        </div>
        <form @submit.prevent="validateBeforeSubmit" autocomplete="off">
          <div class="panel-body">
            <legend>Thông tin tài khoản</legend>

            <!-- /.form-group -->
            <div class="form-group">
              <label for="email">E-mail*</label>
              <input
              type="email"
              name="email"
              v-validate="'required|email'"
              :class="{'form-control': true, 'is-danger': errors.has('email') }"
              placeholder="Eg: johndoe@gmail.com"
              v-model="email"
              data-vv-as="E-mail"
              />
              <span v-show="errors.has('email')" class="label label-danger">{{ errors.first('email') }}</span>
            </div>
            <!-- /.form-group -->
            <div class="form-group">
              <label for="password">Password*</label>
              <input
              type="password"
              name="password"
              v-validate="'required|min:3'"
              :class="{'form-control': true, 'is-danger': errors.has('password') }"
              v-model="password"
              data-vv-as="Mật khẩu"
              />
              <span v-show="errors.has('password')" class="label label-danger">{{ errors.first('password') }}</span>
            </div>
            <!-- /.form-group -->
            <div class="form-group">
              <label for="repassword">Re-password*</label>
              <input
              type="password"
              name="repassword"
              v-validate="'required|confirmed:password'"
              class="form-control"
              v-model="repassword"
              data-vv-as="Xác nhận mật khẩu"
              />
              <span v-show="errors.has('repassword')" class="label label-danger">{{ errors.first('repassword') }}</span>
            </div>
            <!-- /.form-group -->

            <legend>Thông tin cá nhân</legend>

            <div class="form-group">
              <label for="username">Username*</label>
              <input
              type="text"
              name="username"
              v-validate="'required'"
              :class="{'form-control': true, 'is-danger': errors.has('username') }"
              placeholder="Eg: John Doe"
              v-model="username"
              data-vv-as="Họ tên"
              />
              <span v-show="errors.has('username')" class="label label-danger">{{ errors.first('username') }}</span>
            </div>



            <div class="form-group">
              <label for="gengder">Gender</label>
              <label class="radio-inline">
                <input type="radio" v-model="gender" value="Male"> Male
              </label>

              <label class="radio-inline">
                <input type="radio" v-model="gender" value="Femail"> Femail
              </label>
            </div>

            <div class="form-group">
              <label for="hobbies">Hobbies</label>
              <label class="checkbox-inline">
                <input type="checkbox" id="game" v-model="hobbies" value="Game"> Game
              </label>
              <label class="checkbox-inline">
                <input type="checkbox" id="film" v-model="hobbies" value="Film"> Film
              </label>
              <label class="checkbox-inline">
                <input type="checkbox" id="sport" v-model="hobbies" value="Sport"> Sport
              </label>

              <label class="checkbox-inline">
                <input type="checkbox" id="other" v-model="hobbies" value="Other"> Other
              </label>
            </div>

            <div class="form-group">
              <label for="country">Country</label>
              <select name="countries" v-model="countries" class="form-control select2" v-validate="'required'" data-vv-as="Quốc gia">
                <option value="">-- Select your country --</option>
                <option v-for="country in optionsCountries" v-bind:value="country.name">{{ country.name }}</option>
              </select>
              {{ countries }}
              <span v-show="errors.has('countries')" class="label label-danger">{{ errors.first('countries') }}</span>
            </div>


            <div class="form-group">
              <label for="birhday">Date of birth*:</label>
              <datepicker v-model="birthday" :format="'dd/MM/yyyy'" :input-class="'form-control'" :language="'vi'" v-validate="'required'"></datepicker>
              <span v-show="errors.has('birthday')">{{ errors.first('birthday')}}</span>
              <p>{{ birthday }}</p>
            </div>


            <div class="form-group">
              <label for="country">Note</label>
              <textarea name="note" class="form-control" rows="3" v-model="note"></textarea>
            </div>

          </div>
          <div class="panel-footer">
            <button type="reset" class="btn btn-default">Cancel</button>
            <button type="submit" class="btn btn-primary">Add</button>
          </div>
          <!-- /.panel-footer -->
        </form>
      </div>
    </div>
    <!-- /.row -->
  </div>
  <!-- /.container -->
</template>
<script>
  require('./../plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js')
  import axios from 'axios'
  import Datepicker from 'vuejs-datepicker';


  export default {
    name: 'customer',
    components: { Datepicker },


    data: function () {
      return {
       username: '',
       email: '',
       password: '',
       repassword: '',
       gender: 'Male',
       hobbies: [],
       countries: '',
       note: '',
       birthday: '',
       optionsCountries: []
     }
   },

   ready: function () {
    console.log("Ready")
  },

  mounted() {
    Datepicker.$on('veeValidate', () => {
      this.$validator.validateAll()
    });

    var self = this;

    let url = 'https://restcountries.eu/rest/v2/all?fields=name;capital';
    $.get(url).then(function (response) {
      self.optionsCountries = response;

    })
    .catch(function (errors) {

    });
  },

  methods: {

    validateBeforeSubmit() {
     var self = this;

     this.$validator.validateAll().then(function (result) {
      if (result) {
        self.add()
      }
    });
   },

   onChange(value) {
    var self = this;
    console.log(value)
  },


  add() {

   var self = this;

   var router = this.$router;

   let requestUrl = 'api/customers';

   axios.post(requestUrl, {
    data: {
     username: this.username,
     email: this.email,
     password: this.password,
     repassword: this.repassword,
     gender: this.gender,
     hobbies: this.hobbies.toString(),
     countries: this.countries,
     note: this.note
   }
 })

   .then(function (response) {
    self.showToast(response.data)
    if (response.data.status == 'success')
    {
     var customer = response.data.data;
     return router.push('/customer/detail/' + customer.id);
   }
 })

   .catch(function (errors) {
    self.showToast(errors);
  });
 },

 showToast(messageObject) {

   let options = {
    type: messageObject.status,
    duration: 5000
  };

  this.$toasted.show(messageObject.message, options);
}
}
}
</script>