<template>
    <nav class="navbar is-danger is-fixed-top" role="navigation" aria-label="main navigation">
      <div class="navbar-brand">
        <a class="navbar-item" href="https://mps.org.uy">
          <img src="/assets/logoMPS.png" height="28">
        </a>
        <p style="margin:0 auto" class="navbar-item"><slot name="subpedido"></slot></p>
        <a class="navbar-item" href="#chismosa" @click.capture="toggleChismosa">
          <img style="padding:0 0.3em;" src="/assets/chismosa.png" height="28">
          <p style="margin:0 auto; color:white">$ <span v-text="subpedido == null ? 0 : subpedido.total"></span></p>
        </a>
        <a role="button" class="navbar-burger" :class="{'is-active':isActive}" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample" @click="toggleState">
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
        </a>
      </div>

      <div id="navbarBasicExample" class="navbar-menu" :class="{'is-active':isActive}">
        <div class="navbar-start has-text-right-mobile">
            <!-- Styles nombre del barrio-->
            <p class="navbar-item"><slot name="gdc"></slot></p>
            <a class="navbar-item"
                onclick="event.preventDefault();
                document.getElementById('logout-form').submit();">
                Cerrar sesión
            </a>
            <slot name="logout-form"></slot>
        </div>
      </div>
    </nav>
</template>

<script>
    export default {
        data() {
            return {
                isActive: false,
                subpedido: null
            }
        },
        methods: {
            toggleState() {
                this.isActive = !this.isActive;
            },
        actualizarSubpedido(){
          axios.get("/api/subpedidos/" + this.subpedido.id)
            .then(response => {
              this.subpedido = response.data.data;
          });
        },
        toggleChismosa(){
          Event.$emit("toggle-chismosa");
        }
        }, mounted() {
        axios.get("/subpedidos/obtener_sesion").then(response => {
          this.subpedido = response.data.subpedido;
          this.actualizarSubpedido()
        });
        //Emitir un evento subpedido-actualizado al agregar o eliminar un producto del subpedido para que el total de la chismosa se muestre correctamente
        Event.$on('sync-subpedido', (cantidad, id) => {
            axios.post("/api/subpedidos/"+this.subpedido.id+"/sync", {
                cantidad: cantidad,
                producto_id: id
            }).then((response) => {
                this.subpedido = response.data.data;
                Event.$emit('sync-chismosa',this.subpedido);
                window.bulmaToast.toast({
                  message: 'Pedido actualizado exitosamente',
                  duration: 1000,
                  type: 'is-danger',
                  position: 'bottom-center',
                  animate: { in: 'fadeIn', out: 'fadeOut' }
                });
            });
        });
        Event.$on('aprobacion-subpedido', (subpedidoId, aprb) => {
            axios.post("/api/admin/subpedidos/" + subpedidoId + "/aprobacion", {
                aprobacion: aprb
            }).then((response) => {
                Event.$emit('sync-aprobacion', response.data.data);
                window.bulmaToast.toast({
                    message: 'Pedido ' + (aprb ? 'aprobado' : 'desaprobado') + ' exitosamente',
                    duration: 1000,
                    type: 'is-danger',
                    position: 'bottom-center',
                    animate: { in: 'fadeIn', out: 'fadeOut' }
                })
            })
        })
      }
    };
</script>

<style>

p.navbar-item:empty {
    display: none;
}

</style>