<template>
    <div class="col-xl-3 col-md-6">
              <div class="card card-stats">
                <div class="card-body">
                  <div class="row">
                    <div class="col">
                      <h5 class="card-title text-uppercase text-muted mb-0">ຍອດຂາຍ/ບໍລິການ ({{ new Date().getFullYear() }})</h5>
                      <span class="h3 font-weight-bold mb-0">{{formatPrice(cardService_data)}}</span>
                    </div>
                    <div class="col-auto">
                      <div class="icon icon-shape bg-gradient-red text-white rounded-circle shadow">
                        <i class="fas fa-chart-line"></i>
                      </div>
                    </div>
                  </div>
                  <p class="mt-3 mb-0 text-sm" v-if="cardService_lastmonth>=0">
                    <span class="text-nowrap">ເດືອນນີ້: {{formatPrice(cardService_thismonth)}} </span>
                    <span class="text-success mr-2"> (<i class="fa fa-arrow-up"></i> {{formatPrice(cardService_lastmonth)}}%)</span>

                  </p>
                  <p class="mt-3 mb-0 text-sm" v-if="cardService_lastmonth<0">
                    <span class="text-nowrap">ເດືອນນີ້: {{formatPrice(cardService_thismonth)}} </span>
                    <span class="text-danger mr-2"> (<i class="fa fa-arrow-down"></i> {{formatPrice(cardService_lastmonth)}}%)</span>

                  </p>
                </div>
              </div>
            </div>
        <div class="col-xl-3 col-md-6">
              <div class="card card-stats">
                <div class="card-body">
                  <div class="row">
                    <div class="col">
                      <h5 class="card-title text-uppercase text-muted mb-0">ລາຍຮັບ ({{ new Date().getFullYear() }})</h5>
                      <span class="h3 font-weight-bold mb-0">{{formatPrice(cardRevenue_data)}} ກີບ</span>
                    </div>
                    <div class="col-auto">
                      <div class="icon icon-shape bg-gradient-orange text-white rounded-circle shadow">
                        <i class="fas fa-hand-holding-usd"></i>
                      </div>
                    </div>
                  </div>
                  <p class="mt-3 mb-0 text-sm" v-if="cardRevenue_lastmonth>=0">
                    <span class="text-nowrap">ເດືອນນີ້: {{formatPrice(cardRevenue_thismonth)}} ກີບ </span>
                    <span class="text-success mr-2"> (<i class="fa fa-arrow-up"></i> {{formatPrice(cardRevenue_lastmonth)}}%)</span>

                  </p>
                  <p class="mt-3 mb-0 text-sm" v-if="cardRevenue_lastmonth<0">
                    <span class="text-nowrap">ເດືອນນີ້: {{formatPrice(cardRevenue_thismonth)}} ກີບ </span>
                    <span class="text-danger mr-2"> (<i class="fa fa-arrow-down"></i> {{formatPrice(cardRevenue_lastmonth)}}%)</span>

                  </p>
                </div>
              </div>
            </div>
        <div class="col-xl-3 col-md-6">
              <div class="card card-stats">
                <div class="card-body">
                  <div class="row">
                    <div class="col">
                      <h5 class="card-title text-uppercase text-muted mb-0">ລາຍຈ່າຍ ({{ new Date().getFullYear() }}) </h5>
                      <span class="h3 font-weight-bold mb-0">{{formatPrice(cardExpensive_data)}} ກີບ </span>
                    </div>
                    <div class="col-auto">
                      <div class="icon icon-shape bg-gradient-green text-white rounded-circle shadow">
                        <i class="fas fa-money-check-alt"></i>
                      </div>
                    </div>
                  </div>
                  <p class="mt-3 mb-0 text-sm" v-if="cardExpensive_lastmonth>=0">
                    <span class="text-nowrap">ເດືອນນີ້: {{formatPrice(cardExpensive_thismonth)}} ກີບ </span>
                    <span class="text-success mr-2"> (<i class="fa fa-arrow-up"></i> {{formatPrice(cardExpensive_lastmonth)}}%)</span>

                  </p>
                  <p class="mt-3 mb-0 text-sm" v-if="cardExpensive_lastmonth<0">
                    <span class="text-nowrap">ເດືອນນີ້: {{formatPrice(cardExpensive_thismonth)}} ກີບ </span>
                    <span class="text-danger mr-2"> (<i class="fa fa-arrow-down"></i> {{formatPrice(cardExpensive_lastmonth)}}%)</span>

                  </p>
                </div>
              </div>
            </div>
          <div class="col-xl-3 col-md-6">
              <div class="card card-stats">
                <div class="card-body">
                  <div class="row">
                    <div class="col">
                      <h5 class="card-title text-uppercase text-muted mb-0">ກຳໄລ ({{ new Date().getFullYear() }})</h5>
                      <span class="h3 font-weight-bold mb-0">{{formatPrice(cardRevenue_data-cardExpensive_data)}} ກີບ</span>
                    </div>
                    <div class="col-auto">
                      <div class="icon icon-shape bg-gradient-info text-white rounded-circle shadow">
                        <i class="ni ni-chart-bar-32"></i>
                      </div>
                    </div>
                  </div>
                  <p class="mt-3 mb-0 text-sm" v-if="((cardRevenue_lastmonth-cardExpensive_lastmonth)-100)>=0">
                    <span class="text-nowrap">ເດືອນນີ້: {{formatPrice(cardRevenue_thismonth-cardExpensive_thismonth)}} ກີບ </span>
                    <span class="text-success mr-2"> (<i class="fa fa-arrow-up"></i> {{formatPrice((cardRevenue_lastmonth-cardExpensive_lastmonth))}}%)</span>


                  </p>
                  <p class="mt-3 mb-0 text-sm" v-if="((cardRevenue_lastmonth-cardExpensive_lastmonth)-100)<0">
                    <span class="text-nowrap">ເດືອນນີ້: {{formatPrice(cardRevenue_thismonth-cardExpensive_thismonth)}} ກີບ </span>
                    <span class="text-danger mr-2"> (<i class="fa fa-arrow-down"></i> {{formatPrice((cardRevenue_lastmonth-cardExpensive_lastmonth))}}%)</span>

                  </p>
                </div>
              </div>
            </div>


</template>

<script>
export default {
    name: 'MyApp3Carddash',

    data() {
        return {
            cardService_data:'',
            cardService_thismonth:'',
            cardService_lastmonth:'',

            cardRevenue_data:'',
            cardRevenue_thismonth:'',
            cardRevenue_lastmonth:'',

            cardExpensive_data:'',
            cardExpensive_thismonth:'',
            cardExpensive_lastmonth:'',


            cardWork_data:'',
            cardWork_thismonth:'',
            cardWork_lastmonth:'',
        };
    },

    mounted() {

    },


    methods: {
        GetCard(){
          this.$Progress.start();
            this.$axios.get("/sanctum/csrf-cookie").then((response) => {
              axios
                .get(`/api/dashboard/carddash`)
                .then((response) => {
                  this.cardService_data = response.data.total_service
                  this.cardService_thismonth = response.data.service_this_month
                  this.cardService_lastmonth = response.data.last_month_sr

                  this.cardRevenue_data = response.data.allrevenue
                  this.cardRevenue_thismonth = response.data.revenue_this_month
                  this.cardRevenue_lastmonth = response.data.last_month_re

                  this.cardExpensive_data = response.data.allexpenses
                  this.cardExpensive_thismonth = response.data.expenses_thismonth
                  this.cardExpensive_lastmonth = response.data.last_month_ex

                  this.cardWork_data = response.data.allrepaire
                  this.cardWork_thismonth = response.data.repaire_thismonth
                  this.cardWork_lastmonth = response.data.last_month_repa


                //  console.log(response.data.total_service);
                  this.$Progress.finish();
                })
                .catch((error) => {
                  this.$notify( { group: "error", title: "ບໍ່ສຳເລັດ!", text: "ຜິດຜາດ: " + error.message, }, 4000 );
                  console.error(error);
                  this.$Progress.fail();
                });
            });
        },
      formatPrice(value) {
        let val = (value / 1).toFixed(0).replace(".", ",");
        return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
      },
    },
    beforeRouteEnter(to, from, next) {
    if (!window.Laravel.isLoggedin) {
      window.location.href = "/";
    }
    next();
  },
  created() {
    this.$axios.get(`/api/users/checkauth`).then((response) => {
      if (!response.data.isLogin) {
        window.location.href = "/";
      }
    });

   this.GetCard()
  }
};
</script>

<style lang="scss" scoped>

</style>