<template>
  <main id="main">
    <div class="container">
      <div class="row">
        <div class="col">
          <div class="section-header">
            <h2>Register</h2>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <ul class="nav nav-tabs mb-3 nav-justified" id="pills-tab" role="tablist">
            <li class="nav-item">
              <a
                class="nav-link active"
                id="pills-home-tab"
                data-toggle="pill"
                href="#pills-indiv"
                role="tab"
                aria-controls="pills-indiv"
                aria-selected="true"
                ><h2>Register</h2>
              </a>
            </li>
            <li class="nav-item">
              <a
                class="nav-link"
                id="pills-profile-tab"
                data-toggle="pill"
                href="#pills-agency"
                role="tab"
                aria-controls="pills-agency"
                aria-selected="false"
                ><h2>Agency Registration</h2></a
              >
            </li>
          </ul>
          <div class="tab-content" id="pills-tabContent">
            <div
              class="tab-pane fade show active"
              id="pills-indiv"
              role="tabpanel"
              aria-labelledby="pills-indiv-tab"
            >
              <RegisterIndividual />
            </div>
            <div
              class="tab-pane fade"
              id="pills-agency"
              role="tabpanel"
              aria-labelledby="pills-agency-tab"
            >
              <RegisterAgency />
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
</template>

<script>
/* eslint-disable */
import { mapState, mapActions } from "vuex";
import RegisterIndividual from "./registerIndividual";
import RegisterAgency from "./registerAgencySection";
import Log from "../../assets/Log";
export default {
  components: {
    RegisterIndividual,
    RegisterAgency
  },
  props: {
    RegisterHeader: { type: String, default: undefined }
  },
  name: "RegisterPage",
  data() {
    return {
      user: undefined,
      isPasswordShown: "password",
      selectItems: [{ text: "password", value: 0 }],
      showPassword: false
    };
  },
  computed: {
    ...mapState("register", ["registerIndividual"]),

    Header() {
      return this.RegisterHeader ? "Agency Administrator Details" : "Private Individual";
    }
  },
  methods: {
    togglePassword() {
      this.showPassword = true;
      this.isPasswordShown = "text";
    },
    passwordToggled() {
      this.showPassword = false;
      this.isPasswordShown = "password";
    },
    Close() {
      if (Log.getUser().role !== "Super Admin") {
        this.$router.push("/user/login");
      } else {
        this.$router.go(-1);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.nav-tabs li a {
  border-top: none;
  border-left: none;
  border-right: none;
  background-color: rgb(221, 221, 221);
  border-bottom-color: rgb(221, 221, 221);
}

.nav-tabs li :hover {
  background-color: rgb(27, 117, 187);
}

.nav-tabs li a.active {
  border-top: none;
  border-left: none;
  border-right: none;
  background-color: rgb(80, 133, 240);
  border-bottom-color: rgb(221, 221, 221);
}

.nav-tabs li a :hover {
  background-color: transparent;
  color: white;
}
</style>
