<template>
    <div class="block">
        <div class="block" v-show="!hayBonos">
            <p class="has-text-centered">
                Todavía no hay bonos pedidos.
            </p>
        </div>
        <div class="block">
            <table class="table is-fullwidth is-striped is-bordered">
                <thead>
                    <tr>
                        <th><abbr title="Bono">Bono</abbr></th>
                        <th class="is-1"><abbr title="Cantidad">Cantidad</abbr></th>
                        <th><abbr title="Total a Pagar">Total $</abbr></th>
                    </tr>
                </thead>
                <tfoot>
                    <tr v-show="hayBonos">
                        <th></th>
                        <th>Total bonos</th>
                        <th>$ {{ totalBonos }}</th>
                    </tr>
                    <tr>
                        <td> Bonos de Transporte </td>
                        <td> {{ bonosDeTransporteAprobados }} </td>
                        <td> $ {{ bonosDeTransporteAprobados * 15 }} </td>
                    </tr>
                </tfoot>
                <tbody v-show="hayBonos">
                    <pedidos-admin-fila-bono v-for="(bono, i) in bonosCantidadesTotales" :key="i"
                        :nombre="bono.nombre"
                        :cantidad="bono.cantidad"
                        :total="bono.total">
                    </pedidos-admin-fila-bono>
                </tbody>
            </table>
        </div>
    </div>
</template>

<script>
import PedidosAdminFilaBonoVue from './PedidosAdminFilaBono.vue'
export default {
    name: "PedidosAdminTablaBonos",
    components: {
        PedidosAdminFilaBonoVue
    },
    props: {
        pedidos: {
            type: Array,
            required: true
        }
    },
    computed: {
        hayPedidos: function() {
            return this.pedidos.length !== 0
        },
        hayAprobados: function() {
            return this.pedidosAprobados.length > 0
        },
        pedidosAprobados: function() {
            return this.pedidos.filter(p => p.aprobado);
        },
        bonosDeTransporteAprobados: function() {
            let bonosTransportePorPedido = this.pedidosAprobados.map(p => p.bonos_de_transporte);
            let cant = 0;
            bonosTransportePorPedido.forEach(bt => cant += bt);
            return cant
        },
        bonosCantidadesTotales: function() {
            let nombres = [];
            let cantidades = [];
            let precios = [];

            let bonosAprobadosPorPedido = this.bonosPorPedido(this.pedidosAprobados);
            bonosAprobadosPorPedido.forEach(bs => {
                bs.forEach(b => {
                    if (!nombres.includes(b.nombre)) {
                        nombres.push(b.nombre);
                        cantidades.push(b.pivot.cantidad);
                        precios.push(b.precio);
                    } else {
                        for (let i = 0; i < nombres.length; i++) {
                            if (b.nombre === nombres[i]) {
                                cantidades[i] += b.pivot.cantidad;
                            }
                        }
                    }
                });
            });

            let bonosAprobados = [];
            for (let i = 0; i < nombres.length; i++) {
                let bono = {
                    nombre: nombres[i],
                    cantidad: cantidades[i],
                    total: cantidades[i] * precios[i]
                };
                bonosAprobados.push(bono);
            }

            return bonosAprobados;
        },
        totalBonos: function() {
            let total = 0;
            let bonos = this.bonosCantidadesTotales;
            bonos.forEach(b => {
                total += b.total;
            });
            return total;
        },
        hayBonos: function() {
            return this.totalBonos !== 0;
        }
    },
    methods: {
        bonosPorPedido(pedidosArray) {
            return pedidosArray.map(p => p.productos.filter(pr => pr.bono))
        }
    },
}
</script>

<style>

</style>