Vue.component('chismosa', {
    template: `
        <div class="container table-container chismosa-container is-max-widescreen is-max-desktop animate__animated" :class="animation" v-show="!init">
            <table v-show="this.subpedido.productos.length != 0" class="table is-fullwidth is-striped is-bordered">
                <thead>
                <tr>
                    <th>Producto</th>
                    <th><abbr title="Cantidad">C</abbr></th>
                    <th><abbr title="Precio Total">$</abbr></th>
                    <th></th>
                    <th><abbr title="Eliminar"></abbr></th>
                </tr>
                </thead>
                <tfoot>
                <tr>
                    <th><abbr title="Bonos de Transporte">B. Transporte</abbr></th>
                    <th>{{ this.subpedido.bonos_de_transporte }}</th>
                    <th>{{ this.subpedido.subtotal_bonos_de_transporte }}</th>
                    <th></th>
                    <th></th>
                </tr>
                <tr>
                    <th>Total total</th>
                    <th></th>
                    <th>{{ this.subpedido.total }}</th>
                    <th></th>
                    <th></th>
                </tr>
                </tfoot>
                <tbody>
                <producto-row v-for="producto in this.subpedido.productos" :producto="producto" :key="producto.id"></producto-row>
                </tbody>
            </table>
            <p class="has-text-centered" v-show="this.subpedido.productos.length == 0">Compa, todavía no agregaste nada a la chismosa.</p>
        </div>
    `,
    data() {
        return {
            subpedido: {
                productos:[]
            },
            init: true,
            visible: false
        }
    },
    computed: {
        animation: function() {
            return this.visible ? "animate__slideInDown" : "animate__slideOutUp";
        }
    },
    beforeCreate() {
        axios.get("/subpedidos/obtener_sesion").then(response => {
            this.subpedido = response.data.subpedido;
            this.fetchSubpedido();
        });
    },
    methods: {
        fetchSubpedido() {
            axios.get("/api/subpedidos/" + this.subpedido.id)
                .then(response => {
                    this.subpedido = response.data.data;
                });
        }
    },
    mounted() {
        Event.$on('sync-subpedido', () =>  {
            this.fetchSubpedido();
        });
        Event.$on('toggle-chismosa', () => {
            this.init = false;
            this.visible = !this.visible;
            var main = document.getElementById("main");
            if (this.visible) main.classList.add("chisma-abierta");
            else main.classList.remove("chisma-abierta");
        });
    }
});

Vue.component('producto-row', {
    template: `
    <tr>
            <td>{{ this.producto.nombre }}</td>
            <td>{{ this.producto.pivot.cantidad }}</td>
            <td>{{ this.producto.pivot.total }}</td>
            <td><button @click.capture="seleccionarProducto(producto)" class="button is-warning">
                <span class="icon">
                    <i class="fas fa-edit"></i>
                </span>
            </button></td>
            <td><button @click.capture="eliminarProducto(producto)" class="button is-danger">
                <span class="icon">
                    <i class="fas fa-trash-alt"></i>
                </span>
            </button></td>
    </tr>
    `,
    props: {
        producto: Object
    },
    methods: {
        seleccionarProducto(producto) {
            Event.$emit("producto-seleccionado",producto);
        },
        eliminarProducto(producto) {
            Event.$emit("sync-subpedido", 0, this.producto.id);
            Event.$emit("sync-subpedido");
        }
    }
})