<template lang="pug">
  div
    app-menu
    .row
      .col-12
        br
        h1 Registro
        p 
        | Revisa cuidadosamente la redacción de tu nombre, éste aparecerá exactamente igual en la(s) constancias.
    .row
      .col-8.offset-2
        br
        br
        form
          .row
            .col-4
              input.form-control(type='text' placeholder='Nombre' v-model="data.nombre")
            .col-4
              input.form-control(type='text' placeholder='Apellido Paterno' v-model="data.apellido_p")
            .col-4
              input.form-control(type='text' placeholder='Apellido Materno' v-model="data.apellido_m")
    .row
      .col-8.offset-2.left
        br
        h2 Tipo de Participación
        br
        .row
          .col-6
            .row
              .col-12
                .form-check.form-check-inline
                  input#inlineRadio1.form-check-input(type='radio' v-model="data.tipo_participacion" name='inlineRadioOptions' value='ponente')
                  label.form-check-label(for='inlineRadio1') Ponente
            .row(v-if="data.tipo_participacion=='ponente'")
              .col-11.offset-1
                .form-check
                  input#exampleRadios1.form-check-input(type='radio' v-model="data.comunidad" value='interna' checked='')
                  label.form-check-label(for='exampleRadios1')
                    | Comunidad Interna
                .form-check
                  input#exampleRadios2.form-check-input(type='radio' v-model="data.comunidad" value='externa')
                  label.form-check-label(for='exampleRadios2')
                    | Comunidad Externa
          //- .col-6
          //-   .row
          //-     .col-12
          //-       .form-check.form-check-inline
          //-         input#inlineRadio2.form-check-input(type='radio' v-model="data.tipo_participacion" name='inlineRadioOptions' value='asistente')
          //-         label.form-check-label(for='inlineRadio2') Asistente
          //-   .row(v-if="data.tipo_participacion=='asistente'")
          //-     .col-12.offset-1
          //-       .form-check
          //-         input#exampleRadios1.form-check-input(type='radio' v-model="data.comunidad" value='interna' checked='')
          //-         label.form-check-label(for='exampleRadios1')
          //-           | Comunidad Interna
          //-       .form-check
          //-         input#exampleRadios2.form-check-input(type='radio' v-model="data.comunidad" value='externa')
          //-         label.form-check-label(for='exampleRadios2')
          //-           | Comunidad Externa
    .row(v-if="data.comunidad=='externa'")
      .col-8.offset-2
        br
        form
          .form-row
            .col-8
              input.form-control(type='text' placeholder='Institución' v-model="data.institucion")
            .form-group.col-4
              select#inputState.form-control(v-model="data.pais")
                option( value="0" disabled selected) Selecciona un Pais
                option(v-for="pais in paises" :value="pais.nombre_pais") {{pais.nombre_pais}}
    .row
      .col-8.offset-2
        br
        .row
          .col-6.left
            h2 Situación Academica
            .form-check
              input#exampleRadios1.form-check-input(type='radio' name='exampleRadios' value='Profesor' v-model="data.situacion_academica" checked='')
              label.form-check-label(for='exampleRadios1') Profesor
            .form-check
              input#exampleRadios2.form-check-input(type='radio' name='exampleRadios' v-model="data.situacion_academica" value='Estudiante de Licenciatura')
              label.form-check-label(for='exampleRadios2') Estudiante de Licenciatura
            .form-check
              input#exampleRadios3.form-check-input(type='radio' name='exampleRadios' v-model="data.situacion_academica" value='Estudiante de Posgrado')
              label.form-check-label(for='exampleRadios3') Estudiante de Posgrado
            .form-check
              input#exampleRadios3.form-check-input(type='radio' name='exampleRadios' v-model="data.situacion_academica" value='Egresado')
              label.form-check-label(for='exampleRadios3') Egresado
            .form-check
              input#exampleRadios3.form-check-input(type='radio' name='exampleRadios' v-model="data.situacion_academica" value='Profesionalista')
              label.form-check-label(for='exampleRadios3') Profesional
          .col-6(v-if="data.comunidad=='interna' & (data.situacion_academica=='Estudiante de Licenciatura' || data.situacion_academica=='Estudiante de Posgrado')")
            input#exampleInputEmail1.form-control(type='email' aria-describedby='emailHelp' placeholder='Numero de Cuenta' v-model="data.numero_cuenta")
    .row
      .col-4.offset-2
        br
        .form-group
          input#exampleInputEmail1.form-control(type='email' aria-describedby='emailHelp' placeholder='Correo' v-model="data.correo")
        .form-group
          input#exampleInputPassword1.form-control(type='password' placeholder='Contraseña' v-model="data.password")
          small#emailHelp.form-text.text-muted.left Tu contraseña debe contener un mínimo de 8 caracteres con numeros y letras
        .form-group
          input#exampleInputPassword1.form-control(type='password' placeholder='Repita la contraseña' v-model="pass")
    .row
      .col-8.offset-2
        br
        button.btn.btn-primary(type='submit' v-on:click="registro()") Enviar
        br
        br
</template>
<script>
import axios from 'axios'
import Swal from 'sweetalert2'
import webMenu from '../estetica/menu.vue'
import config from '../config/config.js'
export default {
    data() {
        return {
            pass: 'holaa',
            paises: [],
            data: { pais: '0' },
        }
    },
    created: function() {
        axios
            .get(`${config.api}/traer_pais`)
            .then(response => {
                // eslint-disable-next-line
                //console.log(response.data.paises)
                this.paises = response.data.paises
            })
            .catch(function(error) {
                // eslint-disable-next-line
                console.log(error)
            })
    },
    methods: {
        registro: function() {
            if (
                !this.data.nombre ||
                !this.data.apellido_p ||
                !this.data.apellido_m
            ) {
                Swal.fire(
                    'Falta campos por llenar',
                    'Tienes que llenar el nombre completo',
                    'warning'
                )
                return
            }
            if (!this.data.tipo_participacion) {
                Swal.fire(
                    'Falta campos por llenar',
                    'Tienes que seleccionar el tipo de participación',
                    'warning'
                )
                return
            }
            if (!this.data.comunidad) {
                Swal.fire(
                    'Falta campos por llenar',
                    'Tienes que seleccionar una comunidad',
                    'warning'
                )
                return
            }
            if (this.data.comunidad == 'externa') {
                if (!this.data.institucion || this.data.pais == '0') {
                    Swal.fire(
                        'Falta campos por llenar',
                        'Tienes que llenar los datos acerca de comunindad externa',
                        'warning'
                    )
                    return
                }
            }
            if (!this.data.situacion_academica) {
                Swal.fire(
                    'Falta campos por llenar',
                    'Tienes que seleccionar tu situación academica',
                    'warning'
                )
                return
            }
            if (
                (this.data.situacion_academica ==
                    'Estudiante de Licenciatura' ||
                    this.data.situacion_academica == 'Estudiante de Posgrado' ||
                    this.data.situacion_academica == 'Egresado') &
                (this.data.comunidad == 'interna')
            ) {
                if (!this.data.numero_cuenta) {
                    Swal.fire(
                        'Falta campos por llenar',
                        'Tienes que llenar el numero de cuenta',
                        'warning'
                    )
                    return
                }
            }
            if (!this.data.correo) {
                Swal.fire(
                    'Falta campos por llenar',
                    'Tienes que escribir tu correo',
                    'warning'
                )
                return
            }


            if (
                !this.data.password ||
                this.pass != this.data.password ||
                this.data.password.length < 8
            ) {
                Swal.fire(
                    'Falta campos por llenar',
                    'Tu contraseña no coincide o debe de ser mayor a 8 caracteres',
                    'warning'
                )
                return
            }
            let letra=false,numero=false;
            for(let i=0; i<this.data.password.length; i++)
            {
                if(  (this.data.password[i]>='a' && this.data.password[i]<='z' ) || (this.data.password[i]>='A' && this.data.password[i]<='Z' )   )
                  letra=true;
                if(this.data.password[i]>='0' && this.data.password[i]<='9')
                  numero=true;
            }
            if( letra==false || numero==false     ){
               Swal.fire(
                    'Falta campos por llenar',
                    'La contraseña tiene que tener numeros y letras',
                    'warning'
                )
                return
            }

            // eslint-disable-next-line
            console.log(this.data)
            axios
                .post(
                    `${config.api}/registro`,
                    this.data
                )
                .then(response => {
                    // eslint-disable-next-line
                    console.log(response.data)
                    Swal.fire({
                        title: 'Éxito',
                        icon: 'success',
                        confirmButtonText: 'Aceptar',
                        onClose: () => {
                            if (this.data.tipo_participacion == 'asistente') {
                                this.$router.push({
                                    path: `/`,
                                })
                                return
                            }
                            this.$router.push({
                                path: `/ponencia/${response.data.id_persona}`,
                            })
                        },
                    })
                })
                .catch(function(error) {
                    // eslint-disable-next-line
                    console.log(error.response)
                    Swal.fire({
                        title: 'Error',
                        text: error.response.data.msj,
                        icon: 'error',
                        confirmButtonText: 'Aceptar',
                    })
                })
        },
    },
    components: {
        appMenu: webMenu,
    },
}
</script>
<style scoped>
.left {
    text-align: left;
}
.right {
    text-align: right;
}
</style>
