<template>
  <!-- eslint-disable max-len -->
  <form>
    <div class="reg-page">
      <div class="regform">
        <div class="col-md-10" style="text-align:left">
          <h4>Private Individual</h4>
          <div class="form-group row"></div>
          <div class="row" style="text-align:left">
            <div class="col-md-8" style="margin-bottom: 1em">
              <div class="input-group-prepend">
                <span class="input-group-text">
                  <eva-icon name="person-outline" fill="#60CBEB"></eva-icon>
                </span>
                <input
                  class="form-control"
                  type="text"
                  name="name"
                  placeholder="Name"
                  v-model="registerIndividual.name"
                />
              </div>
            </div>
            <div class="col-md-8" style="margin-bottom: 1em">
              <div class="input-group-prepend">
                <span class="input-group-text">
                  <eva-icon name="book-outline" fill="#60CBEB"></eva-icon>
                </span>
                <input
                  class="form-control"
                  type="text"
                  name="surname"
                  placeholder="Surname"
                  v-model="registerIndividual.surname"
                />
              </div>
            </div>
            <div class="col-md-8" style="margin-bottom: 1em">
              <div class="input-group-prepend">
                <span class="input-group-text">
                  <eva-icon name="email-outline" fill="#60CBEB"></eva-icon>
                </span>
                <input
                  class="form-control"
                  type="text"
                  name="email"
                  placeholder="Email Address"
                  v-model="registerIndividual.email"
                />
              </div>
            </div>
            <div class="col-md-8" style="margin-bottom: 1em">
              <div class="input-group-prepend">
                <span class="input-group-text">
                  <eva-icon name="smartphone-outline" fill="#60CBEB"></eva-icon>
                </span>
                <input
                  class="form-control"
                  type="text"
                  name="cellnumber"
                  placeholder="Cellphone Number"
                  v-model="registerIndividual.cellNumber"
                />
              </div>
            </div>
            <div class="col-md-8" style="margin-bottom: 1em">
              <div class="input-group-prepend">
                <span class="input-group-text">
                  <eva-icon name="phone-outline" fill="#60CBEB"></eva-icon>
                </span>
                <input
                  class="form-control"
                  type="text"
                  name="landline"
                  placeholder="Landline Number"
                  v-model="registerIndividual.telephone"
                />
              </div>
            </div>
          </div>
          <hr />
          <div class="row">
            <div class="col-md-8" style="margin-bottom: 1em">
              <div class="input-group-prepend">
                <span class="input-group-text">
                  <eva-icon name="person-outline" fill="#60CBEB"></eva-icon>
                </span>
                <input
                  class="form-control"
                  type="text"
                  name="username"
                  placeholder="Username"
                  v-model="registerIndividual.username"
                />
              </div>
            </div>
            <div class="col-md-8" style="margin-bottom: 1em">
              <div class="input-group-prepend">
                <span class="input-group-text">
                  <eva-icon name="lock-outline" fill="#60CBEB"></eva-icon>
                </span>
                <input
                  class="form-control"
                  :type="isPasswordShown"
                  v-model="registerIndividual.password"
                  id="password"
                  placeholder="Password"
                  name="password"
                  value
                />
              </div>
            </div>
            <div class="col-md-8" style="margin-bottom: 1em">
              <div class="input-group-prepend">
                <span class="input-group-text">
                  <eva-icon name="lock-outline" fill="#60CBEB"></eva-icon>
                </span>
                <input
                  class="form-control"
                  :type="isPasswordShown"
                  v-model="registerIndividual.password"
                  id="password"
                  placeholder="Confirm Password"
                  name="confirmpassword"
                  value
                />
                <div>
                  <div class="input-group-append">
                    <span class="input-group-text">
                      <eva-icon
                        v-if="!showPassword"
                        name="eye-off-outline"
                        fill="#60CBEB"
                        @click="togglePassword()"
                      ></eva-icon>
                      <eva-icon v-else name="eye-outline" fill="#60CBEB" @click="passwordToggled()"></eva-icon>
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="form-group row"></div>
          <div class="row offset-md-1">
            <div class="col-md-2">
              <button @click="SubmitData()" class="btn btn-b-n" type="submit">Submit</button>
            </div>
            <div class="col-md-2 offset-md-1">
              <button @click="Cancel()" class="btn btn-b-n" type="submit">Cancel</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  props: {
    RegisterHeader: { type: String, default: undefined },
  },
  name: 'PrivateIndividual',
  data() {
    return {
      user: null,
      isPasswordShown: 'password',
      selectItems: [{ text: 'password', value: 0 }],
      selectErrors: 'Some error with the field',
      select: null,
      textErrors: 'Some error with the field',
      text: '',
      showPassword: false,
    };
  },
  computed: {
    ...mapState('registerIndividual', ['registerIndividual']),

    Header() {
      return this.RegisterHeader
        ? 'Agency Administrator Details'
        : 'Private Individual';
    },
  },
  methods: {
    ...mapActions('registerIndividual', [
      'getIndividual',
      'saveIndividual',
      'updateIndividual',
      'clearIndividual',
    ]),

    togglePassword() {
      this.showPassword = true;
      this.isPasswordShown = 'text';
    },
    passwordToggled() {
      this.showPassword = false;
      this.isPasswordShown = 'password';
    },
    SubmitData() {
      this.saveIndividual(this.registerIndividual);

      this.$router.push('/registerIndividual/');
    },
    Close() {
      this.$router.push('/registerIndividual/');
    },
  },
};
</script>

<style>
.goDown {
  margin-top: 150px;
}
</style>
