<!-- <script setup>
  import { ref } from 'vue'

  defineProps({
    msg: String
  })

  const count = ref(0)
</script> -->

<template>
  <app-header></app-header>
  <section>
    <!-- <h1 class="text-center g-py-20">{{ msg }}</h1> -->
    <div id="push2" class="container-fluid max-width-webkit-fill-available">
      <h1 class="text-center g-py-20">Dashboard</h1>
      <div class="row justify-content-center">
        
        <div class="col-6 col-md-4 col-lg-3 g-mb-15" v-if="getPermissions.includes('view-aset')">
          <div class="g-bg-white box-shadow2 g-py-15 card border-left-primary shadow h-100 g-pl-10">
            <router-link to="/aset" class="float-right g-font-weight-600 g-color-gray g-pr-10 g-font-size-12 g-pt-5 text-decoration-none">
              <div class="card-body">
                <div class="row no-gutters align-items-center">
                  <div class="col mr-2">
                    <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Aset</div>
                    <div class="h5 mb-0 font-weight-bold text-gray-800">Jumlah: {{ aset.number }}</div>
                  </div>
                  <div class="col-auto">
                    <i class="fa fa-archive fa-4x text-gray-300"></i>
                  </div>
                </div>
              </div>
            </router-link>
          </div>
        </div>

        <div class="col-6 col-md-4 col-lg-3 g-mb-15" v-if="getPermissions.includes('view-kategoriaset')">
          <div class="g-bg-white box-shadow2 g-py-15 card border-left-primary shadow h-100 g-pl-10">
            <router-link to="/kategoriaset" class="float-right g-font-weight-600 g-color-gray g-pr-10 g-font-size-12 g-pt-5 text-decoration-none">
              <div class="card-body">
                <div class="row no-gutters align-items-center">
                  <div class="col mr-2">
                    <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Kategori Aset</div>
                    <div class="h5 mb-0 font-weight-bold text-gray-800">Jumlah: {{ kategoriaset.number }}</div>
                  </div>
                  <div class="col-auto">
                    <i class="fa fa-asterisk fa-4x text-gray-300"></i>
                  </div>
                </div>
              </div>
            </router-link>
          </div>
        </div>

        <div class="col-6 col-md-4 col-lg-3 g-mb-15" v-if="getPermissions.includes('view-masterproduct')">
          <div class="g-bg-white box-shadow2 g-py-15 card border-left-primary shadow h-100 g-pl-10">
            <router-link to="/masterproduct" class="float-right g-font-weight-600 g-color-gray g-pr-10 g-font-size-12 g-pt-5 text-decoration-none">
              <div class="card-body">
                <div class="row no-gutters align-items-center">
                  <div class="col mr-2">
                    <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Master Product</div>
                    <div class="h5 mb-0 font-weight-bold text-gray-800">Jumlah: {{ masterproduct.number }}</div>
                  </div>
                  <div class="col-auto">
                    <i class="fa fa-cloud fa-4x text-gray-300"></i>
                  </div>
                </div>
              </div>
            </router-link>
          </div>
        </div>

        <div class="col-6 col-md-4 col-lg-3 g-mb-15" v-if="getPermissions.includes('view-warehousestock')">
          <div class="g-bg-white box-shadow2 g-py-15 card border-left-primary shadow h-100 g-pl-10">
            <router-link to="/warehousestock" class="float-right g-font-weight-600 g-color-gray g-pr-10 g-font-size-12 g-pt-5 text-decoration-none">
              <div class="card-body">
                <div class="row no-gutters align-items-center">
                  <div class="col mr-2">
                    <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Warehouse Stock</div>
                    <div class="h5 mb-0 font-weight-bold text-gray-800">Jumlah: {{ warehousestock.number }}</div>
                  </div>
                  <div class="col-auto">
                    <i class="fa fa-cubes fa-4x text-gray-300"></i>
                  </div>
                </div>
              </div>
            </router-link>
          </div>
        </div>

        <div class="col-6 col-md-4 col-lg-3 g-mb-15" v-if="getPermissions.includes('view-outbound')">
          <div class="g-bg-white box-shadow2 g-py-15 card border-left-primary shadow h-100 g-pl-10">
            <router-link to="/outbound" class="float-right g-font-weight-600 g-color-gray g-pr-10 g-font-size-12 g-pt-5 text-decoration-none">
              <div class="card-body">
                <div class="row no-gutters align-items-center">
                  <div class="col mr-2">
                    <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Outbound</div>
                    <div class="h5 mb-0 font-weight-bold text-gray-800">Jumlah: {{ outbound.number }}</div>
                  </div>
                  <div class="col-auto">
                    <i class="fa fa-outdent fa-4x text-gray-300"></i>
                  </div>
                </div>
              </div>
            </router-link>
          </div>
        </div>

        <div class="col-6 col-md-4 col-lg-3 g-mb-15" v-if="getPermissions.includes('view-history')">
          <div class="g-bg-white box-shadow2 g-py-15 card border-left-primary shadow h-100 g-pl-10">
            <router-link to="/history" class="float-right g-font-weight-600 g-color-gray g-pr-10 g-font-size-12 g-pt-5 text-decoration-none">
              <div class="card-body">
                <div class="row no-gutters align-items-center">
                  <div class="col mr-2">
                    <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">History</div>
                    <div class="h5 mb-0 font-weight-bold text-gray-800">Jumlah: {{ history.number }}</div>
                  </div>
                  <div class="col-auto">
                    <i class="fa fa-history fa-4x text-gray-300"></i>
                  </div>
                </div>
              </div>
            </router-link>
          </div>
        </div>

        <div class="col-6 col-md-4 col-lg-3 g-mb-15" v-if="getPermissions.includes('view-salestransaction')">
          <div class="g-bg-white box-shadow2 g-py-15 card border-left-primary shadow h-100 g-pl-10">
            <router-link to="/salestransaction" class="float-right g-font-weight-600 g-color-gray g-pr-10 g-font-size-12 g-pt-5 text-decoration-none">
              <div class="card-body">
                <div class="row no-gutters align-items-center">
                  <div class="col mr-2">
                    <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Sales Transaction</div>
                    <div class="h5 mb-0 font-weight-bold text-gray-800">Jumlah: {{ salestransaction.number }}</div>
                  </div>
                  <div class="col-auto">
                    <i class="fa fa-list-alt fa-4x text-gray-300"></i>
                  </div>
                </div>
              </div>
            </router-link>
          </div>
        </div>

        <div class="col-6 col-md-4 col-lg-3 g-mb-15" v-if="getPermissions.includes('view-karyawan')">
          <div class="g-bg-white box-shadow2 g-py-15 card border-left-primary shadow h-100 g-pl-10">
            <router-link to="/karyawan" class="float-right g-font-weight-600 g-color-gray g-pr-10 g-font-size-12 g-pt-5 text-decoration-none">
              <div class="card-body">
                <div class="row no-gutters align-items-center">
                  <div class="col mr-2">
                    <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Karyawan</div>
                    <div class="h5 mb-0 font-weight-bold text-gray-800">Jumlah: {{ karyawan.number }}</div>
                  </div>
                  <div class="col-auto">
                    <i class="fa fa-group fa-4x text-gray-300"></i>
                  </div>
                </div>
              </div>
            </router-link>
          </div>
        </div>

      </div>
    </div>
  </section>
</template>

<style scoped>
a {
  color: #ff6d00;
}
.border-left-primary {
  border-left: solid 5px blue;
}
.border-left-primary:hover {
  border-left: solid 10px blue;
}
</style>

<script>
import Header from './Header.vue';
import axios from 'axios';
import {onMounted, ref} from 'vue';

export default {
  components: {
    'app-header': Header
  },
  created() {
    this.getPermissions = JSON.parse(localStorage.getItem('permissions'));
    // console.log(this.getPermissions);
  },
  setup() {
    //reactive state
    let aset = ref([]);
    let kategoriaset = ref([]);
    let masterproduct = ref([]);
    let warehousestock = ref([]);
    let outbound = ref([]);
    let history = ref([]);
    let salestransaction = ref([]);
    let karyawan = ref([]);

    onMounted(() => {
        //get data from api endpoint
        axios.get('https://werp-api.pt-gti.co.id/api/aset')
        .then((response) => {
            let $asets = response.data;

            for(i=0; i < $asets.length; i++) {
              
            }
            var $aset = {
              number: i
            }
            aset.value = $aset
            // console.log($aset)
        }).catch((err) => {
            console.log(err.response)
        });

        //get data from api endpoint
        axios.get('https://werp-api.pt-gti.co.id/api/kategoriaset')
        .then((response) => {
            let $kategoriasets = response.data;

            for(i=0; i < $kategoriasets.length; i++) {
              
            }
            var $kategoriaset = {
              number: i
            }
            kategoriaset.value = $kategoriaset
            // console.log($kategoriaset)
        }).catch((err) => {
            console.log(err.response)
        });

        //get data from api endpoint
        axios.get('https://werp-api.pt-gti.co.id/api/masterproduct')
        .then((response) => {
            let $masterproducts = response.data;

            for(i=0; i < $masterproducts.length; i++) {
              
            }
            var $masterproduct = {
              number: i
            }
            masterproduct.value = $masterproduct
            // console.log($masterproduct)
        }).catch((err) => {
            console.log(err.response)
        });

        //get data from api endpoint
        axios.get('https://werp-api.pt-gti.co.id/api/warehousestock')
        .then((response) => {
            let $warehousestocks = response.data;

            for(i=0; i < $warehousestocks.length; i++) {
              
            }
            var $warehousestock = {
              number: i
            }
            warehousestock.value = $warehousestock
            // console.log($warehousestock)
        }).catch((err) => {
            console.log(err.response)
        });

        //get data from api endpoint
        axios.get('https://werp-api.pt-gti.co.id/api/outbound')
        .then((response) => {
            let $outbounds = response.data;

            for(i=0; i < $outbounds.length; i++) {
              
            }
            var $outbound = {
              number: i
            }
            outbound.value = $outbound
            // console.log($outbound)
        }).catch((err) => {
            console.log(err.response)
        });

        //get data from api endpoint
        axios.get('https://werp-api.pt-gti.co.id/api/history')
        .then((response) => {
            let $historys = response.data;

            for(i=0; i < $historys.length; i++) {
              
            }
            var $history = {
              number: i
            }
            history.value = $history
            // console.log($history)
        }).catch((err) => {
            console.log(err.response)
        });

        //get data from api endpoint
        axios.get('https://werp-api.pt-gti.co.id/api/salestransaction')
        .then((response) => {
            let $salestransactions = response.data;

            for(i=0; i < $salestransactions.length; i++) {
              
            }
            var $salestransaction = {
              number: i
            }
            salestransaction.value = $salestransaction
            // console.log($salestransaction)
        }).catch((err) => {
            console.log(err.response)
        });

        //get data from api endpoint
        axios.get('https://werp-api.pt-gti.co.id/api/karyawan')
        .then((response) => {
            let $karyawans = response.data;

            for(i=0; i < $karyawans.length; i++) {
              
            }
            var $karyawan = {
              number: i
            }
            karyawan.value = $karyawan
            // console.log($karyawan)
        }).catch((err) => {
            console.log(err.response)
        });
    });

    return {
        aset,
        kategoriaset,
        masterproduct,
        warehousestock,
        outbound,
        history,
        salestransaction,
        karyawan
    }
  },
}
</script>  