<template>
<div>
  <div>
    <b-row >
      <b-col>
        <div class="text-left mb-1 akkurat-regular">Cadastro: </div>
        <div class="profile-card px-2 pt-3 pb-0">
          <b-form>
            <b-form-row class="custom-form-row">
              <b-form-group class="col-md-6 col-sm-12">
                <text-input v-model="name" title="Nome Completo" place-holder="Lucia Matias" :submit="submit"/>
              </b-form-group>
              <b-form-group class="col-md-3 col-sm-12">
                <div class="text-left label"><label for="gender">Sexo:</label></div>
                <b-form-select
                  v-model="selectedGender"
                  :options="genderOptions"
                  id="gender"
                  class="radius-theme"
                />
              </b-form-group>
              <b-form-group class="col-md-3 col-sm-12">
                <date-input v-model="birthDate" :submit="submit" />
              </b-form-group>
            </b-form-row>

            <b-form-row class="custom-form-row">
              <b-form-group class="col-md-4 col-sm-12">
                <cpf v-model="cpf" :disabled="true" :submit="submit" />
              </b-form-group>
              <b-form-group class="col-md-4 col-sm-12">
                <number-input v-model="docId" :submit="submit" title="Número do documento de identificação:"/>
              </b-form-group>
              <b-form-group class="col-md-4 col-sm-12">
                <gov-agent v-model="govAgent" :submit="submit" />
              </b-form-group>
            </b-form-row>

            <b-form-row class="custom-form-row">
              <b-form-group class="col-md-6 col-sm-12">
                <text-input v-model="motherName"
                  title="Nome da Mãe:"
                  place-holder="Luzia da Silva"
                  :submit="submit"
                />
              </b-form-group>
              <search-promoter class="col-md-6" v-model="whoIndicated" />

            </b-form-row>
          </b-form>
        </div>
      </b-col>
    </b-row>
    <b-row class="mb-3">
      <b-col class="d-flex justify-content-center align-items-center mt-3">
      
        <signup-button title="Continuar" icon="user-friends" btn-color="#278937" @clicked="done"
        class="align-self-center"/>
      </b-col>
    </b-row>
  </div>
</div>
</template>

<script>
import TextInput from '@/components/shared-components/inputs/TextInput.vue';
import Cpf from '@/components/shared-components/inputs/Cpf.vue';
import NumberInput from '@/components/shared-components/inputs/NumberInput.vue';
import GovAgent from '@/components/shared-components/inputs/GovAgent.vue';
import DateInput from '@/components/shared-components/inputs/DateInput.vue';
import SignupButton from '@/components/signup/SignupButton.vue';
import SearchPromoter from '@/components/signup/SearchPromoter.vue';

import moment from "moment";


export default {
  name: 'signup-form',
  components: {
    Cpf,
    GovAgent,
    DateInput,
    TextInput,
    NumberInput,
    SignupButton,
    SearchPromoter
  },
  data: () => ({
    cpf: '',
    name: '',
    docId: '',
    gender: '',
    govAgent: '',
    birthDate: '',
    motherName: '',
    whoIndicated: null,
    mobilePhone: '',
    residentialPhone: '',
    selectedGender: 'female',
    genderOptions: [
      { text: 'Feminino', value: 'female' },
      { text: 'Masculino', value: 'male' },
    ],
    submit: false,
    title: ''
  }),
  methods:{
    done(){
      
      if(this.checkFields()){
       
        let data = {
          cpf: this.cpf,
          mobilePhone: this.mobilePhone,
          residentialPhone: this.residentialPhone,
          name: this.name,
          gender: this.selectedGender,
          govAgent: this.govAgent,
          docId: this.docId,
          birthDate: this.birthDate,
          spc_restrition: this.spc_restrition,
          motherName: this.motherName,
          whoIndicated: this.whoIndicated,
          campaign_code: this.campaign_code
        };

        localStorage.step_2 = JSON.stringify(data);

        this.$router.push({
          name: 'Contatos'
        });


      }

    },
    checkFields(){

      if(this.name.length == 0 || this.docId == 0 || this.govAgent.length == 0 || this.birthDate.length == 0 || this.motherName.length == 0 || this.cpf.length < 11 || this.residentialPhone.length < 10 || this.mobilePhone.length < 10){
        this.submit = true;
        return false;
      }

      return true;
    }
  },
  created(){
    if(!localStorage.step_1){
      this.$router.push({
            name: 'Documentos'
       });
    }
    var data;
    if(localStorage.step_2){
      data = JSON.parse(localStorage.step_2);

      this.name = data.name;
      this.gender = data.gender;
      this.govAgent = data.govAgent;
      this.docId = data.docId;
      this.birthDate = data.birthDate;
      this.spc_restrition =  this.spc_restrition,
      this.motherName = data.motherName;
      this.whoIndicated = data.whoIndicated;

    }else{
      data = JSON.parse(localStorage.step_1);
    }  

    this.cpf = data.cpf;
    this.mobilePhone = data.mobilePhone;
    this.residentialPhone = data.residentialPhone;
    this.campaign_code = data.campaign_code;
    this.spc_restrition = data.spc_restrition;

  }
};
</script>

<style scoped lang="scss">
@import '../../assets/css/main.scss';
@import '../../assets/css/cards.scss';

.custom-width {
  width: 25%;
}
</style>
