<template lang="pug">
  div#app(v-show='$auth.ready()')
    div(v-if='$auth.check()')
      modal-feedback
      the-header
      the-notifications
      .app(@click="closeNotifications")
        the-menu
        .background--transition
          transition(name="enter" mode="out-in")
            router-view(v-if='$auth.ready()')
    base-auth(v-if='!$auth.check()')
    vue-progress-bar
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
const BaseAuth = () => import('@/components/BaseAuth.vue')
const TheHeader = () => import('@/components/TheHeader.vue')
const TheMenu = () => import('@/components/TheMenu.vue')
const TheNotifications = () => import('@/components/TheNotifications.vue')
const ModalFeedback = () => import('@/components/aditionals/ModalFeedback.vue')

export default {
  name: 'App',
  components: {
    BaseAuth,
    TheHeader,
    TheMenu,
    ModalFeedback,
    TheNotifications
  },
  computed: {
    ...mapGetters(['alertMessage', 'acceptAlert'])
  },
  watch: {
    alertMessage: function (alertMessage) {
      this.$vm.dialog({
        color: alertMessage.color,
        title: this.$t(alertMessage.title),
        text: this.$t(alertMessage.text)
      })
    },
    acceptAlert: function (acceptAlert) {
      if (acceptAlert) {
        this.$vm.notify({
          color: acceptAlert.color,
          title: this.$t(acceptAlert.title),
          text: this.$t(acceptAlert.text),
          icon: acceptAlert.icon
        })
      }
    }
  },
  mounted () {
    if (this.$echo) {
      this.$echo.connector.pusher.connection.bind('connected', event => {
        this.axios.defaults.headers.common = Object.assign({}, this.axios.defaults.headers.common, { 'X-Socket-ID': this.$echo.socketId() })
      })
    }
    this.$auth.ready(async () => {
      if (this.$auth.check()) {
        await this.loadData()
      }
    })
    this.$Progress.finish()
  },
  created () {
    this.$Progress.start()
    this.$router.beforeEach((to, from, next) => {
      if (to.meta.progress !== undefined) {
        let meta = to.meta.progress
        this.$Progress.parseMeta(meta)
      }
      to.meta.color !== undefined &&
        document.querySelector('meta[name=theme-color]').setAttribute('content', to.meta.color)
      this.$Progress.start()
      next()
    })
    this.$router.afterEach((to, from) => {
      this.$Progress.finish()
    })
  },
  methods: {
    ...mapActions(['loadData', 'setAcceptAlert', 'closeNotifications']),
    changeLocale (locale) {
      this.$i18n.set(locale)
    }
  }
}
</script>

<style lang="scss">
/* @import '~bootstrap/scss/bootstrap'; */
@import './style/eva/scss/eva-icons';
html {
  /* Load system fonts */
  font-family: -apple-system, BlinkMacSystemFont, 'San Francisco', 'Roboto', 'Oxygen', 'Segoe UI', 'Fire Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  /* Make type rendering look crisper */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Disable auto-enlargement of small text in Safari */
  text-size-adjust: 100%;
  /* Enable kerning and optional ligatures */
  text-rendering: optimizeLegibility;
  line-height: 1.5;
}
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  outline: none;
  text-transform: none;
  text-decoration: none;
  ::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    display: block;
  }
  ::-webkit-scrollbar-thumb {
    background: #e4eaf5;
    border-radius: 8px;
  }
  ::-webkit-scrollbar-thumb {
    &:hover {
      background: rgb(196, 201, 211);
    }
  }
}

a {
  color: rgba(var(--primary), 1);
}

input,
button,
select,
optgroup,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
.justify-content-between {
  -webkit-box-pack: justify !important;
  -ms-flex-pack: justify !important;
  justify-content: space-between !important;
}
.d-flex {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
}
.form-group {
  margin-bottom: 1rem;
}
fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}
.container-fluid {
  width: 100%;
  padding-right: 40px;
  padding-left: 40px;
  margin-right: auto;
  margin-left: auto;
  min-height: 100%;
  @media only screen and (max-width: 600px) {
    padding-right: 5px;
    padding-left: 5px;
  }
}
#app {
  .app {
    display: flex;
    height: 100vh;
    background: rgba(var(--primary), 1);
  }
  .background--transition {
    background-color: #fafafa;
    padding-top: 70px;
    min-height: 100%;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    width: 100%;
    overflow: auto;
  }
  .crud {
    .footer {
      z-index: 1000;
      background: rgba(var(--primary), 1);
      width: 100%;
      padding: 5px;
      /* margin-top: 40px; */
      justify-content: flex-end;
      display: flex;
      button {
        margin: 5px;
      }
    }
    .heading {
      margin-bottom: 15px;
      .vm-col {
        &:first-child {
          div {
            &:last-child {
              padding-left: 20px;
            }
          }
        }
      }
      .vm-button {
        margin: 0 3px;
      }
    }
    .card {
      margin-bottom: 40px;
      background: white;
      padding: 5px;
      border-radius: 5px;
      box-shadow: 5px 5px 25px 0 rgba(46, 61, 73, 0.11);
      .form {
        .con-select {
          width: 100%;
        }
      }
      .vm-con-table {
        width: 100%;
      }
    }
    .float {
      position: fixed;
      bottom: 40px;
      right: 40px;
      z-index: 1000;
    }
    .total-records {
      position: absolute;
      margin-top: -28px;
      right: 55px;
      color: rgba(var(--primary), 1);
    }
  }
  .enter-enter-active,
  .enter-leave-active {
    transition: all 0.2s ease;
  }
  .enter-enter, .enter-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
  }
  @media only screen and (max-width: 768px) {
    /* For mobile phones: */
    .form-group {
      margin-bottom: 2rem;
    }
    .vm-button {
      padding: 15px;
    }
  }
}
</style>
