<template>
    <div >
        <Header />
        <div class="row">
            <div style="height: 50%; background-color: #334FA1">
            </div>
        </div>
        <div class="wrapper fadeInDown">
            <div id="formContent">
                <div class="container principal">
                
                <b-tabs content-class="mt-5">
                    <b-tab title="Enviar Ficha" active>
                         <form>
                            <div class="table-responsive">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                    <th scope="col">#</th>
                                    <th scope="col">Nombre</th> 
                                    <th scope="col">Apellido Paterno</th>
                                    <th scope="col">Apellido Materno</th>
                                    <th scope="col">Correo</th>
                                    <th scope="col">Comunidad</th>
                                    <th scope="col">Pago total</th>
                                    <th scope="col">Enviar Ficha</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="item in enviar" v-bind:key="item.idPersona">
                                        <th scope="row">{{item.number}}</th>
                                        <td>{{item.nombre}}</td>
                                        <td>{{item.apellidoPaterno}}</td>
                                        <td>{{item.apellidoMaterno}}</td>
                                        <td>{{item.correo}}</td>
                                        <td>{{item.comunidad}}</td>
                                        <td>"{{item.totalPagar}}.00</td>
                                        <td ><button type="button" @click="correoEnviar = item.correo, idPersona=item.idPersona, nombreEscogido=`${item.nombre}  ${item.apellidoPaterno} ${item.apellidoMaterno}`, cantidadPagar=item.totalPagar" class="btn btn-outline-success" v-b-modal.fichaDeposito >Enviar ficha</button></td>
                                    </tr>
                                </tbody>
                                </table>
                            </div>
                            <input type="submit" class="fadeIn fourth" value="Descargar" >
                        </form>
                    </b-tab>

                    <b-tab title="Pendientes por pagar">
                        <form >
                            <div class="table-responsive">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                    <th scope="col">#</th>
                                    <th scope="col">Nombre</th> 
                                    <th scope="col">Apellido Paterno</th>
                                    <th scope="col">Apellido Materno</th>
                                    <th scope="col">Correo</th>
                                    <th scope="col">Comunidad</th>
                                    <th scope="col">Pago total</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="item in pendientes" v-bind:key="item.idPersona">
                                        <th scope="row">{{item.number}}</th>
                                        <td>{{item.nombre}}</td>
                                        <td>{{item.apellidoPaterno}}</td>
                                        <td>{{item.apellidoMaterno}}</td>
                                        <td>{{item.correo}}</td>
                                        <td>{{item.comunidad}}</td>
                                        <td>${{item.totalPagar}}.00</td>
                                    </tr>
                                </tbody>
                                </table>
                            </div>
                            <input type="submit" class="fadeIn fourth" value="Descargar">
                        </form>
                    </b-tab>
                    <b-tab title="Revisar Ficha" >
                        <form >
                            <div class="table-responsive">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                    <th scope="col">#</th>
                                    <th scope="col">Nombre</th> 
                                    <th scope="col">Apellido Paterno</th>
                                    <th scope="col">Apellido Materno</th>
                                    <th scope="col">Correo</th>
                                    <th scope="col">Comunidad</th>
                                    <th scope="col">Pago total</th>
                                    <th scope="col">Banco de procedencia</th>
                                    <th scope="col">Fecha de Operacion</th>
                                    <th scope="col">Clave de rastreo</th>
                                    <th scope="col">Cuenta retiro</th>
                                    <th scope="col">Importe</th>
                                    <th scope="col">Cuenta de Deposito</th>

                                    <th scope="col">Abrir pago</th>
                                    <th scope="col">Aprobar pago</th>
                                    <th scope="col">Rechazar pago</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="item in revisar" v-bind:key="item.idPersona">
                                        <th scope="row">{{item.number}}</th>
                                        <td>{{item.nombre}}</td>
                                        <td>{{item.apellidoPaterno}}</td>
                                        <td>{{item.apellidoMaterno}}</td>
                                        <td>{{item.correo}}</td>
                                        <td>{{item.comunidad}}</td>
                                        <td>${{item.totalPagar}}.00</td>
                                        <td>{{item.comprobante.bancoProcedencia}}</td>
                                        <td>{{item.comprobante.fechaOperacion}}</td>
                                        <td>{{item.comprobante.claveRastreo}}</td>
                                        <td>{{item.comprobante.cuentaRetiro}}</td>
                                        <td>{{item.comprobante.importe}}</td>
                                        <td>{{item.comprobante.cuentaDeposito}}</td>
                                        <td ><b-button variant="primary">Descargar</b-button></td>
                                        <td ><b-button variant="outline-success">Aceptar</b-button></td>
                                        <td ><b-button variant="outline-danger" >Rechazar</b-button></td>
                                    </tr>
                                </tbody>
                                </table>
                            </div>
                            <input type="submit" class="fadeIn fourth" value="Descargar">
                        </form>
                    </b-tab>
                    <b-tab title="Pagados" >
                        <form >
                            <div class="table-responsive">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                    <th scope="col">#</th>
                                    <th scope="col">Nombre</th> 
                                    <th scope="col">Apellido Paterno</th>
                                    <th scope="col">Apellido Materno</th>
                                    <th scope="col">Correo</th>
                                    <th scope="col">Comunidad</th>
                                    <th scope="col">Pago total</th>
                                
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="item in pagados" v-bind:key="item.idPersona">
                                        <th scope="row">{{item.number}}</th>
                                        <td>{{item.nombre}}</td>
                                        <td>{{item.apellidoP}}</td>
                                        <td>{{item.apellidoM}}</td>
                                        <td>{{item.correo}}</td>
                                        <td>{{item.comunidad}}</td>
                                        <td>{{item.pago}}</td>
                                        
                                    </tr>
                                </tbody>
                                </table>
                            </div>
                            <input type="submit" class="fadeIn fourth" value="Descargar">
                        </form>
                    </b-tab>
                    <b-tab title="Solicitud de Factura" >
                        <form >
                            <div class="table-responsive">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                    <th scope="col">#</th>
                                    <th scope="col">Nombre</th> 
                                    <th scope="col">Apellido Paterno</th>
                                    <th scope="col">Apellido Materno</th>
                                    <th scope="col">Correo</th>
                                    <th scope="col">Comunidad</th>
                                    <th scope="col">Pago total</th>
                                    <th scope="col">Mostrar datos</th>
                                    <th scope="col">Enviar Factura</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="item in factura" v-bind:key="item.idPersona">
                                        <th scope="row">{{item.number}}</th>
                                        <td>{{item.nombre}}</td>
                                        <td>{{item.apellidoP}}</td>
                                        <td>{{item.apellidoM}}</td>
                                        <td>{{item.correo}}</td>
                                        <td>{{item.comunidad}}</td>
                                        <td>{{item.pago}}</td>
                                        <td ><button type="button" class="btn btn-outline-primary" v-b-modal.DatosPago>Mostrar pago</button></td>
                                        <td ><button type="button" class="btn btn-outline-success" >Enviar Factura</button></td>
                                    </tr>
                                </tbody>
                                </table>
                            </div>
                            <input type="submit" class="fadeIn fourth" value="Descargar">
                        </form>
                    </b-tab>

                </b-tabs>
                
                              

                <b-modal id="fichaDeposito" centered title="Enviar Ficha de deposito"  hide-footer>
                    
                    <div class="loader" v-if="enviando">Loading...</div>
                    
                    <div v-else>
                        <p class="my-4">Nombre           : {{nombreEscogido}}</p>
                        <p class="my-4">Cantidad a pagar : ${{cantidadPagar}}.00</p>
                        <div>
                            <!-- Styled -->
                            <b-form-file
                            v-model="file1"
                            id="file1"
                            :state="Boolean(file1)"
                            placeholder="Escoge la ficha de deposito"
                            drop-placeholder="Carga la ficha de deposito aqui"
                            accept=".pdf"
                            browseText= "Cargar"
                            ></b-form-file>
                        
                        </div>
                        <div style="margin-top: 2rem;">
                            <b-button   class="btn btn-outline-success float-right" @click="enviarFicha()" style="width: 30%; ">Enviar</b-button>
                            <b-button    @click="$bvModal.hide('fichaDeposito')"  variant="outline-danger"  class="btn  float-left"  style="width: 30%; ">Cancelar</b-button>
                        </div>
                    </div>
                </b-modal>



                <b-modal id="mostrarPago" centered  >
                    <p class="my-4">Pago de {{nombreEscogido}} </p>
                </b-modal>

                <b-modal id="DatosPago" centered title="Datos de: " hide-footer>
                    <p class="my-4">Pago </p>
                    
                </b-modal>
                
               
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Header from "./../components/header.vue";

import axios from "axios";
import config from "../config/config.js";

import Swal from "sweetalert2";

export default {
  name: "panel",
  components: {
    Header
  },
  
  data() {
    return {
         enviar: [],
        pendientes: [],
        revisar: [],
        pagados: [{number: 1,idPersona: 1, nombre: "Ejemplo", apellidoP: "Ejemplo ape",apellidoM: "Ejemplo ape", correo: "mail@mail.com", comunidad:"UNAM", pago: "$900.00"},
        {number: 1,idPersona: 2, nombre: "Ejemplo", apellidoP: "Ejemplo ape",apellidoM: "Ejemplo ape", correo: "mail@mail.com", comunidad:"UNAM", pago: "$900.00"}],
        factura: [{number: 1,idPersona: 1, nombre: "Ejemplo", apellidoP: "Ejemplo ape",apellidoM: "Ejemplo ape", correo: "mail@mail.com", comunidad:"UNAM", pago: "$900.00"},
        {number: 2,idPersona: 2, nombre: "Ejemplo", apellidoP: "Ejemplo ape",apellidoM: "Ejemplo ape", correo: "mail@mail.com", comunidad:"UNAM", pago: "$900.00"}],
        
        selected: 1,

        idPersona: "",


        file1: null,
        file2: null,

        nombreEscogido: "",
        cantidadPagar: "",
        correoEnviar: "",



        enviando: false
       
    };
  },
  methods: {
      async enviarFicha (){
            this.enviando = true;
            var formData = new FormData();
            var fichaDeposito = document.querySelector('#file1');
            formData.append("fichaDeposito", fichaDeposito.files[0]);
            formData.append("correo", this.correoEnviar);
            formData.append("idPersona", this.idPersona);

           try{ 

                await  axios.post(
                    `${config.api}/enviarFicha`, formData ,{
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                    }
                );
                this.enviando = false;
                await Swal.fire({
                  title: "Exito",
                  text:  'Exito al enviar la factura',
                  icon: "success"
                });
                location.reload();
           }
           catch(error){
               this.enviando = false;
               console.log(error.response);
                  await Swal.fire({
                    title: "Error",
                    text: error.response.data.msj || 'Ocurrio un problema',
                    icon: "error"
                });
                location.reload();
           }
      }
  },
   async beforeCreate() {
    if (!window.localStorage.getItem("idAdmin")) this.$router.push("/");

    this.enviar = await axios.get(
            `${config.api}/getPersonasInscritas`
          );
    this.enviar = this.enviar.data.datos;

    this.pendientes = await axios.get(
            `${config.api}/getPersonasPendientes`
          );
    this.pendientes = this.pendientes.data.datos;

    this.revisar   = await axios.get(
            `${config.api}/getPersonasRecibo`
          );
    this.revisar  = this.revisar.data.datos;
  }
      
  
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

    
    .loader,
    .loader:after {
    border-radius: 50%;
    width: 10em;
    height: 10em;
    }
    .loader {
    margin: 60px auto;
    font-size: 10px;
    position: relative;
    text-indent: -9999em;
    border-top: 1.1em solid rgba(0,44,148, 0.2);
    border-right: 1.1em solid rgba(0,44,148, 0.2);
    border-bottom: 1.1em solid rgba(0,44,148, 0.2);
    border-left: 1.1em solid #002c94;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load8 1.1s infinite linear;
    animation: load8 1.1s infinite linear;
    }
    @-webkit-keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
    }
    @keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
    }


    .principal{
        padding: 3rem;
    }
    .banner{
    position: realtive; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    }
    h1{
        margin-top:1rem;
        margin-bottom:1rem;
    }
    html {
    background-color: #56baed;
    }

    body {
    font-family: "Poppins", sans-serif;
    height: 100vh;
    }

    a {
    color: #92badd;
    display:inline-block;
    text-decoration: none;
    font-weight: 400;
    }

    h2 {
    text-align: left;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    display:inline-block;
    margin: 40px 8px 10px 8px; 
    color: #cccccc;
    }



    /* STRUCTURE */

    .wrapper {
    display: flex;
    align-items: center;
    flex-direction: column; 
    justify-content: center;
    width: 100%;
    min-height: 100%;
    padding: 20px;
    }
    .wrapperRow {
    display: flex;
    flex-direction: column; 
    justify-content: center;
    width: 100%;
    min-height: 100%;
    
    margin-left: 1rem;
    }

    #formContent {
    -webkit-border-radius: 10px 10px 10px 10px;
    border-radius: 10px 10px 10px 10px;
    background: #fff;
    width: 100%;
    position: relative;
    padding: 0px;
    -webkit-box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
    box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
    text-align: center;
    }

    #formFooter {
    background-color: #f6f6f6;
    border-top: 1px solid #dce8f1;
    padding: 25px;
    text-align: center;
    -webkit-border-radius: 0 0 10px 10px;
    border-radius: 0 0 10px 10px;
    }



    /* TABS */

    h2.inactive {
    color: #cccccc;
    }

    h2.active {
    color: #0d0d0d;
    border-bottom: 2px solid #5fbae9;
    }



    /* FORM TYPOGRAPHY*/

    input[type=button], input[type=submit], input[type=reset]  {
    background-color: #56baed;
    border: none;
    color: white;
    padding: 15px 80px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    text-transform: uppercase;
    font-size: 13px;
    -webkit-box-shadow: 0 10px 30px 0 rgba(95,186,233,0.4);
    box-shadow: 0 10px 30px 0 rgba(95,186,233,0.4);
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
    margin: 5px 20px 40px 20px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    }

    input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover  {
    background-color: #39ace7;
    }

    input[type=button]:active, input[type=submit]:active, input[type=reset]:active  {
    -moz-transform: scale(0.95);
    -webkit-transform: scale(0.95);
    -o-transform: scale(0.95);
    -ms-transform: scale(0.95);
    transform: scale(0.95);
    }

    input[type=text], input[type=password]{
    background-color: #f6f6f6;
    border: none;
    color: #0d0d0d;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left:1rem;
    
    
    width: 100%;
    border: 2px solid #f6f6f6;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
    }
    select[type=text] {
    background-color: #f6f6f6;
    border: none;
    color: #0d0d0d;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left:1rem;
    width: 100%;
    border: 2px solid #f6f6f6;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
    }

    input[type=text]:focus {
    background-color: #fff;
    border-bottom: 2px solid #5fbae9;
    }

    input[type=text]:placeholder {
    color: #cccccc;
    }



    /* ANIMATIONS */

    /* Simple CSS3 Fade-in-down Animation */
    .fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    }

    @-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
    }

    @keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
    }

    /* Simple CSS3 Fade-in Animation */
    @-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
    @-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
    @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

    .fadeIn {
    opacity:0;
    -webkit-animation:fadeIn ease-in 1;
    -moz-animation:fadeIn ease-in 1;
    animation:fadeIn ease-in 1;

    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;

    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    animation-duration:1s;
    }

    .fadeIn.first {
    -webkit-animation-delay: 0.4s;
    -moz-animation-delay: 0.4s;
    animation-delay: 0.4s;
    }

    .fadeIn.second {
    -webkit-animation-delay: 0.6s;
    -moz-animation-delay: 0.6s;
    animation-delay: 0.6s;
    }

    .fadeIn.third {
    -webkit-animation-delay: 0.8s;
    -moz-animation-delay: 0.8s;
    animation-delay: 0.8s;
    }

    .fadeIn.fourth {
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    animation-delay: 1s;
    }

    /* Simple CSS3 Fade-in Animation */
    .underlineHover:after {
    display: block;
    left: 0;
    bottom: -10px;
    width: 0;
    height: 2px;
    background-color: #56baed;
    content: "";
    transition: width 0.2s;
    }

    .underlineHover:hover {
    color: #0d0d0d;
    }

    .underlineHover:hover:after{
    width: 100%;
    }



    /* OTHERS */

    *:focus {
        outline: none;
    } 

    #icon {
    width:60%;
    }

</style>
