<template>
  <div class="row">
    <div class="col-75">
      <div class="container">
        <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">
          <div id="form1" class="row">
            <div class="col-50">
              <h3>Pré-cadastro</h3>
              <label for="nome"><i class="fa fa-user"></i> 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="text"
                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"
              />
              <br />
              <label for="email">Email:</label>
              <input
                type="email"
                name="email"
                id="email"
                required
                placeholder="nome@example.com"
                v-model="assinatura.dadosPessoais.usuario.email"
              />

              <label for="cep">CEP:</label>
              <input
                type="text"
                name="cep"
                id="cep"
                required
                placeholder="96200-020"
                @change="buscarCep"
                v-model="assinatura.dadosPessoais.endereco.cep"
              />

              <label for="rua">Rua:</label>
              <input
                type="text"
                name="rua"
                id="rua"
                required
                placeholder="Rua Duque de Caxias"
                v-model="assinatura.dadosPessoais.endereco.rua"
              />
              <label for="numero">Número:</label>
              <input
                type="number"
                name="numero"
                id="numero"
                required
                placeholder="200"
                v-model="assinatura.dadosPessoais.endereco.numero"
              />

              <label for="complemento">Complemento:</label>
              <input
                type="text"
                name="complemento"
                id="complemento"
                placeholder="Próx. Laboratório Gram"
                v-model="assinatura.dadosPessoais.endereco.complemento"
              />

              <label for="cidade">Cidade:</label>
              <input
                type="text"
                name="cidade"
                id="cidade"
                required
                placeholder="Rio Grande"
                v-model="assinatura.dadosPessoais.endereco.cidade"
              />

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

              <div class="row">
                <div class="col-50">
                  <label for="estado">Estado:</label>
                  <input
                    type="text"
                    name="estado"
                    id="estado"
                    required
                    placeholder="RS"
                    v-model="assinatura.dadosPessoais.endereco.estado"
                  />

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

            <div class="col-50">
              <h3>Pagamento</h3>
              <br />
              <h3>Pagamento Cartão</h3>
              <div class="row">
                <label for="debito">Débito</label>
                <input type="radio" id="debito" name="id_tipo_pagamento" value="1" />
                <label for="credito">Crédito</label>
                <input type="radio" id="credito" name="id_tipo_pagamento" value="2" />
              </div>

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

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

              <div class="row">
                <div class="col-50">
                  <label for="dataVencimento">Validade:</label>
                  <input
                    type="mes"
                    name="dataVencimento"
                    id="dataVencimento"
                    v-model="assinatura.dadosPagamento.dataVencimento"
                  />
                </div>
                <div class="col-50">
                  <label for="cvv">CVV</label>
                  <input type="text" id="cvv" name="cvv" placeholder="" />
                </div>
              </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"
              />
              <h3>Dados de Plano</h3>
              <br />

              <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"
              />
            </div>
          </div>
          <label>
            <input type="checkbox" checked="checked" name="sameadr" />
            Endereço de cobrança, mesmo de cadastro
          </label>

          <button class="btn" type="submit">Cadastrar</button>
        </form>
      </div>
    </div>

    <div class="col-25">
      <div class="container">
        <p>Lista de Pré-cadastro</p>
        <br /><br />
        <p>envio de e-mail</p>

        <br /><br />
        <button>Enviar</button>
      </div>
    </div>
  </div>
</template>

<script>
import AssinaturaService from '../service/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: [],
    };
  },
  mounted() {

  },
  methods: {
    realizarAssinatura() {
      AssinaturaService.realizarAssinatura(this.assinatura)
        .then((res) => {
          this.assinatura.dadosPessoais.endereco.rua = null;
          this.assinatura.dadosPessoais.endereco.complemento = null;
          this.assinatura.dadosPessoais.endereco.cidade = null;
          this.assinatura.dadosPessoais.endereco.bairro = null;
          this.assinatura.dadosPessoais.endereco.estado = null;
          this.assinatura.dadosPessoais.endereco.pais = null;
          alert(
            "Assinatura realizada com sucesso! defina sua senha no email que foi enviado para o email informado"
          );
          this.errors = [];
        })
        .catch((e) => {
          console.log(e);
          this.errors = e.res.data.errors;
        });
    },
    buscarCep() {
      var cep = this.assinatura.dadosPessoais.endereco.cep;
      AssinaturaService.buscarCep(cep)
        .then((res) => {
          this.assinatura.dadosPessoais.endereco.rua = res.data.logradouro;
          this.assinatura.dadosPessoais.endereco.complemento =
            res.data.complemento;
          this.assinatura.dadosPessoais.endereco.cidade = res.data.localidade;
          this.assinatura.dadosPessoais.endereco.bairro = res.data.bairro;
          this.assinatura.dadosPessoais.endereco.estado = res.data.uf;
          this.assinatura.dadosPessoais.endereco.pais = "Brasil";
        })
        .catch((e) => {
          alert(e);
        });
    },
  },
};
</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"],
select,
input[type="date"],
input[type="email"],
[type="number"],
[type="debito"],
input[type="mes"] {
  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,
button {
  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>