<template>
  <div class="container">
    <b-row class="py-3 mb-3">
      <b-col>
        <img src="~@/assets/logo_dark.png" />
      </b-col>
    </b-row>
    <b-row class="justify-content-center mb-3">
      <b-col cols="10">
        <div class="wrap-terms" v-html="terms">
        </div>
      </b-col>
    </b-row>
    <b-row class="justify-content-center">
      <b-col cols="10">
        <h5>Você concorda com o termo?</h5>
      </b-col>
    </b-row>
    <b-row class="justify-content-center">
      <b-col cols="10">
       <b-form-group>
        <b-form-radio class="d-inline-block mx-4" v-model="selectedAnswer" name="terms" :value="true">Sim</b-form-radio>
        <b-form-radio class="d-inline-block mx-4" v-model="selectedAnswer" name="terms" :value="false">Não</b-form-radio>
      </b-form-group>
      </b-col>
    </b-row>
    <b-row class="justify-content-center" v-if="!selectedAnswer && selectedAnswer != null">
      <b-col cols="10">
        <h5>Motivo:</h5>
        <b-form-select
        v-model="motiveSelected"
        :options="motives"
        />
      </b-col>
    </b-row>
    <b-row class="justify-content-center py-3" v-if="this.motiveSelected == 'Outros' && !this.selectedAnswer">
      <b-col cols="10">
        <b-form-textarea no-resize placeholder="Escreva o motivo" v-model="motiveDescription"></b-form-textarea>
      </b-col>
    </b-row>
    <b-row class="justify-content-center py-3">
      <b-col cols="10">
      <b-button
        class="
        col-12
        btn
        btn-success
        shadow-none
        align-items-center
        border-0
        akkurat-bold
      "
      @click="phoneConfirmation"
      >
        Confirmar
      </b-button>
      </b-col>
    </b-row>

    <message-modal :message="message" :title="title"></message-modal>

  </div>
</template>

<script>
import TermsService from "@/services/resources/TermsService";
import PhoneConfirmationService from "@/services/resources/PhoneConfirmationService";
import MessageModal from '@/components/modals/MessageModal.vue';

const service = TermsService.build();
const servicePhoneConfirmation = PhoneConfirmationService.build();

export default {
  name: 'signup-button',
  components:{
    MessageModal
  },
   data :() => ({
    terms: '',
    selectedAnswer: null,
    motiveSelected: 'Selecione o motivo',
    motives: [],
    motiveDescription: null,
    showMotives: false,
    othersMotives: false,
    cpf: '',
    title: '',
    message: ''
  }),
  methods: {
    load(){
      service
        .search()
        .then(response => {
          this.terms = response.terms;
          this.motives = response.motives;
          this.motives.unshift('Selecione o motivo');
          this.motives.push('Outros');
        })
        .catch(err => {
          
        });
    },
    phoneConfirmation(){
      let motive = this.motiveDescription.length > 0 ? this.motiveDescription : (this.motiveSelected == 'Selecione o motivo' ? '' : this.motiveSelected);
      
      let data = {
        cpf: this.cpf,
        verified: this.selectedAnswer,
        motive: motive
      };

      servicePhoneConfirmation
        .create(data)
        .then(response => {
          this.title = 'Número confirmado';
          this.message = 'Seu celular foi confirmado com sucesso!';
          this.$bvModal.show('message-modal');
        })
        .catch(err => {
          this.title = 'Erro!';
          this.message = 'Houve um erro inesperado, por favor, tente novamente mais tarde.';
          this.$bvModal.show('message-modal');
        });
    }
  },
  mounted(){
    this.cpf = atob(this.$route.params.cpf);
    this.load();
  }
};
</script>

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

.wrap-terms{
  background: #fff;
  border: 1px #ddd solid;
  border-radius: 10px;
  padding: 10px;
  height: 300px;
  overflow-y: auto;

}

</style>
