<template>
  <!-- eslint-disable max-len -->
  <form>
    <div class="container" style="text-align:left">
      <div class="reg-page">
        <div class="regform" style="text-align:left">
          <h4>Agency Details</h4>
          <div class="col-md-8" style="margin-bottom: 1em">
            <eva-icon name="people" fill="#60CBEB"></eva-icon>
            <input
              class="form-control"
              type="text"
              name="agencyname"
              placeholder="Agency Name"
              v-model="registerAgency.name"
            />
          </div>
          <div class="col-md-8" style="margin-bottom: 1em">
            <eva-icon name="book" fill="#60CBEB"></eva-icon>
            <input
              class="form-control"
              type="text"
              name="eaabffcnumber"
              placeholder="EAAB FFC Number"
              v-model="registerAgency.eaabeffcNumber"
            />
          </div>
          <div class="col-md-8">
            <eva-icon name="clipboard" fill="#60CBEB"></eva-icon>
            <input
              class="form-control"
              type="text"
              name="companyregnumber"
              placeholder="Company Registration Number"
              v-model="registerAgency.companyRegNumber"
            />
          </div>
          <hr />
          <div class="col-md-10" style="text-align:left">
            <h5 style="margin-bottom: 1em">Agency Administrator</h5>
            <div class="row" style="text-align:left">
              <div class="col-md-6" style="margin-bottom: 1em">
                <eva-icon name="person" fill="#60CBEB"></eva-icon>
                <input
                  class="form-control"
                  type="text"
                  name="name"
                  placeholder="Name"
                  v-model="registerAgency.user.name"
                />
              </div>
              <div class="col-md-6" style="margin-bottom: 1em">
                <eva-icon name="person" fill="#60CBEB"></eva-icon>
                <input
                  class="form-control"
                  type="text"
                  name="surname"
                  placeholder="Surname"
                  v-model="registerAgency.user.surname"
                />
              </div>
            </div>

            <div class="row" style="text-align:left">
              <div class="col-md-8">
                <eva-icon name="email" fill="#60CBEB"></eva-icon>
                <input
                  class="form-control"
                  type="text"
                  name="email"
                  placeholder="Email Address"
                  v-model="registerAgency.user.email"
                />
                <div class="form-group row"></div>
              </div>

              <div class="col-md-6" style="text-align:left">
                <eva-icon name="smartphone" fill="#60CBEB"></eva-icon>
                <input
                  class="form-control"
                  type="text"
                  name="cellnumber"
                  placeholder="Contact Number"
                  v-model="registerAgency.user.cellNumber"
                />
              </div>
            </div>
            <hr />
            <div class="row">
              <div class="col-md-7" style="margin-bottom: 1em">
                <eva-icon name="person" fill="#60CBEB"></eva-icon>
                <input
                  class="form-control"
                  type="text"
                  name="username"
                  placeholder="Username"
                  v-model="registerAgency.user.username"
                />
              </div>
              <div class="col-md-7" style="margin-bottom: 1em">
                <eva-icon name="lock" fill="#60CBEB"></eva-icon>
                <input
                  class="form-control"
                  :type="isPasswordShown"
                  v-model="registerAgency.user.password"
                  id="password"
                  placeholder="Password"
                  name="password"
                  value
                />
              </div>
              <div class="col-md-7" style="margin-bottom: 1em">
                <eva-icon name="lock" fill="#60CBEB"></eva-icon>
                <input
                  class="form-control"
                  :type="isPasswordShown"
                  v-model="registerAgency.user.password"
                  id="password"
                  placeholder="Confirm Password"
                  name="confirmpassword"
                  value
                />
                <div>
                  <eva-icon
                    v-if="!showPassword"
                    name="eye-off"
                    fill="#60CBEB"
                    @click="togglePassword()"
                  ></eva-icon>
                  <eva-icon v-else name="eye" fill="#60CBEB" @click="passwordToggled()"></eva-icon>
                </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="button">Submit</button>
            </div>
            <div class="col-md-2 offset-md-1">
              <button @click="Cancel()" class="btn btn-b-n" type="button">Cancel</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</template>

<script>
import { mapState, mapActions } from 'vuex';
// import RegisterPage from './registerPage.vue';

export default {
  // data() {
  //   return {
  //     RegisterHeader: 'Agency Administrator Details',
  //   };
  // },
  name: 'Agency',
  // components: { RegisterPage },
  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('registerAgency', ['registerAgency']),
  },
  methods: {
    ...mapActions('registerAgency', [
      'getAgency',
      'saveAgency',
      'updateAgency',
      'clearAgency',
    ]),

    togglePassword() {
      this.showPassword = true;
      this.isPasswordShown = 'text';
    },
    passwordToggled() {
      this.showPassword = false;
      this.isPasswordShown = 'password';
    },
    SubmitData() {
      this.saveAgency(this.registerAgency);
      this.$router.push('/registerAgency/');
    },
    Close() {
      this.$router.push('/registerAgency/');
    },
  },
};
</script>

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