<template lang="pug">
  div
    app-menu
    .row
      .col-12
        br
        h1 Registro
    .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(selected='') 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 Escolar
            .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
          .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")
        .form-group
          input#exampleInputPassword1.form-control(type='password' placeholder='Repita la contraseña')
    .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'
export default {
    data() {
        return {
            msj: 'holaa',
            paises: [],
            data: {},
        }
    },
    created: function() {
        axios
            .get('https://venus.acatlan.unam.mx/coloquioeducacion/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() {
            // eslint-disable-next-line
            console.log(this.data)
            axios
                .post(
                    'https://venus.acatlan.unam.mx/coloquioeducacion/registro',
                    this.data
                )
                .then(response => {
                    // eslint-disable-next-line
                    console.log(response.data)
                    Swal.fire({
                        title: 'Exito',
                        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;
}
</style>
