<template>
  <div class="container">
    <h3>Pré-cadastro</h3>
    <ul>
      <li v-for="(erro, index) of errors" :key="index">
        campo <b>{{ erro.field }}</b> - {{ erro.defaultMessage }}
      </li>
    </ul>

    <form id="preCadastro" @submit.prevent="realizarAssinatura">
      <fieldset>
        <legend>Dados Pessoais</legend>
        <label for="nome">Nome:</label>
        <input
          type="text"
          name="nome"
          id="nome"
          required
          v-model="assinatura.dadosPessoais.usuario.nome"
          placeholder="Nome completo"
        />

        <label for="user">Apelido:</label>
        <input
          type="text"
          name="user"
          id="user"
          required
          v-model="assinatura.dadosPessoais.usuario.user"
          placeholder="Apelido"
        />

        <label for="cpf">CPF:</label>
        <input
          type="text"
          name="cpf"
          id="cpf"
          required
          placeholder="000.000.000-00"
          v-model="assinatura.dadosPessoais.usuario.cpf"
        />

        <label for="celular">Celular:</label>
        <input
          type="tel"
          name="celular"
          id="celular"
          required
          placeholder="(00) 90000-0000"
          v-model="assinatura.dadosPessoais.usuario.celular"
        />

        <label for="sexo">Sexo:</label>
        <select name="sexo" id="sexo">
          <option value="masculino">Masculino</option>
          <option value="feminino">Feminino</option>
          <option value="outro">Prefiro não informar</option>
        </select>

        <label for="dataNascimento">Data Nascimento:</label>
        <input
          type="date"
          name="dataNascimento"
          id="dataNascimento"
          required
          v-model="assinatura.dadosPessoais.usuario.dataNascimento"
        />

        <label for="email">Email:</label>
        <input
          type="email"
          name="email"
          id="email"
          required
          placeholder="nome@example.com"
          v-model="assinatura.dadosPessoais.usuario.email"
        />
      </fieldset>

      <fieldset>
        <legend>Pagamento</legend>
        <label for="">Bandeiras aceitas</label>
        <div class="icon-container">
          <i class="fa fa-cc-visa" style="color: navy"></i>
          <i class="fa fa-cc-amex" style="color: blue"></i>
          <i class="fa fa-cc-mastercard" style="color: red"></i>
          <i class="fa fa-cc-discover" style="color: orange"></i>
        </div>

        <label for="idTipoPagamento">Tipo Pagamento:</label>
        <input
          type="text"
          name="idTipoPagamento"
          id="idTipoPagamento"
          v-model="assinatura.dadosPagamento.idTipoPagamento"
        />

        <label for="idChavePix">Chave Pix:</label>
        <input
          type="text"
          name="idChavePix"
          id="idChavePix"
          v-model="assinatura.dadosPagamento.idChavePix"
        />

        <label for="nomeImpresso">Nome Impresso:</label>
        <input
          type="text"
          name="nomeImpresso"
          id="nomeImpresso"
          v-model="assinatura.dadosPagamento.nomeImpresso"
        />

        <label for="numeroCartao">Número Cartão:</label>
        <input
          type="text"
          name="numeroCartao"
          id="numeroCartao"
          v-model="assinatura.dadosPagamento.numeroCartao"
        />

        <label for="dataVencimento">Validade:</label>
        <input
          type="month"
          name="dataVencimento"
          id="dataVencimento"
          v-model="assinatura.dadosPagamento.dataVencimento"
        />
      </fieldset>

      <fieldset>
        <legend>Endereço</legend>
        <label for="cep">CEP:</label>
        <input
          type="text"
          name="cep"
          id="cep"
          placeholder="00000-000"
          @change="buscarCep"
          v-model="assinatura.dadosPessoais.endereco.cep"
        />

        <label for="rua">Rua:</label>
        <input
          type="text"
          name="rua"
          id="rua"
          placeholder="Travessa do Sabiá"
          v-model="assinatura.dadosPessoais.endereco.rua"
        />

        <label for="numero">Número:</label>
        <input
          type="number"
          name="numero"
          id="numero"
          placeholder="250"
          v-model="assinatura.dadosPessoais.endereco.numero"
        />

        <label for="complemento">Complemento:</label>
        <input
          type="text"
          name="complemento"
          id="complemento"
          placeholder="Prédio Ernesto Gouveia"
          v-model="assinatura.dadosPessoais.endereco.complemento"
        />

        <label for="bairro">Bairro:</label>
        <input
          type="text"
          name="bairro"
          id="bairro"
          placeholder="Inocoop"
          v-model="assinatura.dadosPessoais.endereco.bairro"
        />

        <label for="cidade">Cidade:</label>
        <input
          type="text"
          name="cidade"
          id="cidade"
          placeholder="Camaçari"
          v-model="assinatura.dadosPessoais.endereco.cidade"
        />

        <label for="estado">Estado:</label>
        <input
          type="text"
          name="estado"
          id="estado"
          placeholder="BA"
          v-model="assinatura.dadosPessoais.endereco.estado"
        />

        <label for="pais">País:</label>
        <input
          type="text"
          name="pais"
          id="pais"
          placeholder="Brasil"
          v-model="assinatura.dadosPessoais.endereco.pais"
        />

        <label for="isEnderecoDeCobranca"
          >O endereço informado é o endereço de cobrança</label
        >
        <input
          type="checkbox"
          unchecked
          name="isEnderecoDeCobranca"
          id="isEnderecoDeCobranca"
        />
      </fieldset>

      <fieldset>
        <legend>Dados do Plano</legend>

        <label for="idModalidadePlano">Modalidade Plano:</label>
        <input
          type="text"
          name="idModalidadePlano"
          id="idModalidadePlano"
          v-model="assinatura.dadosPlano.idModalidadePlano"
        />

        <label for="idPeriodoPlano">Período Plano:</label>
        <input
          type="text"
          name="idPeriodoPlano"
          id="idPeriodoPlano"
          v-model="assinatura.dadosPlano.idPeriodoPlano"
        />
      </fieldset>
      <button class="btn">Cadastrar</button>
    </form>
  </div>
</template>

<script>
import AssinaturaService from "../services/assinatura";

export default {
  data() {
    return {
      assinatura: {
        dadosPessoais: {
          usuario: {
            cpf: "",
            nome: "",
            user: "",
            email: "",
            dataNascimento: "",
            celular: "",
          },
          endereco: {
            rua: "",
            numero: "",
            bairro: "",
            complemento: "",
            cidade: "",
            estado: "",
            pais: "",
            cep: "",
          },
        },
        dadosPagamento: {
          idTipoPagamento: "",
          idChavePix: "",
          nomeImpresso: "",
          numeroCartao: "",
          dataVencimento: "",
        },
        dadosPlano: {
          idModalidadePlano: "",
          idPeriodoPlano: "",
        },
      },
      errors: [],
    };
  },
  methods: {
    realizarAssinatura() {
      AssinaturaService.realizarAssinatura(this.assinatura)
        .then((res) => {
          alert(
            "Assinatura realizada com sucesso! defina sua senha no email que foi enviado para o email informado"
          );
          this.assinatura = {};
          this.errors = [];
        })
        .catch((e) => {
          console.log(e.res.data.errors);
          this.errors = e.res.data.errors;
        });
    },

    buscarCep() {
      var cep = this.assinatura.dadosPessoais.endereco.cep;
      AssinaturaService.buscarCep(cep)
        .then((res) => {
          this.assinatura.dadosPessoais.endereco.rua = e.res.data.logradouro;
          this.assinatura.dadosPessoais.endereco.complemento =
            e.res.data.complemento;
          this.assinatura.dadosPessoais.endereco.bairro = e.res.data.bairro;
          this.assinatura.dadosPessoais.endereco.cidade = e.res.data.localidade;
          this.assinatura.dadosPessoais.endereco.estado = e.res.data.uf;
          this.assinatura.dadosPessoais.endereco.pais = "Brasil";
        })
        .catch((e) => {
          console.log(e.res.data);
        });
    },
  },
};
</script>

<style>
.row {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  margin: 0 -16px;
}

.col-25 {
  -ms-flex: 25%; /* IE10 */
  flex: 25%;
}

.col-50 {
  -ms-flex: 50%; /* IE10 */
  flex: 50%;
}

.col-75 {
  -ms-flex: 75%; /* IE10 */
  flex: 75%;
}

.col-25,
.col-50,
.col-75 {
  padding: 0 16px;
}

.container {
  background-color: #f2f2f2;
  padding: 5px 20px 15px 20px;
  border: 1px solid lightgrey;
  border-radius: 3px;
}

input[type="text"] {
  width: 100%;
  margin-bottom: 20px;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

label {
  margin-bottom: 10px;
  display: block;
}

.icon-container {
  margin-bottom: 20px;
  padding: 7px 0;
  font-size: 24px;
}

.btn {
  background-color: #04aa6d;
  color: white;
  padding: 12px;
  margin: 10px 0;
  border: none;
  width: 100%;
  border-radius: 3px;
  cursor: pointer;
  font-size: 17px;
}

.btn:hover {
  background-color: #45a049;
}

span.price {
  float: right;
  color: grey;
}

/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other (and change the direction - make the "cart" column go on top) */
@media (max-width: 800px) {
  .row {
    flex-direction: column-reverse;
  }
  .col-25 {
    margin-bottom: 20px;
  }
}
</style>