<template>
    
  <!-- Add Organisation Model End-->
  <!-- Header Start-->

   <SideNav  />
  <!-- Body Start -->
  <div style="background-color:#F5F7F9; ">
  <div class="wrapper wrapper-body" style="background-color:#F5F7F9;  margin-top: -10px;height: 100vh;">
    <div class="dashboard-body">
      <div class="container-fluid">
        <div class="row">

          <div class="col-md-12">
            <div class="d-main-title">
              <h3 style="color: #344470;"><i class="fa-solid fa-home me-3"></i>Dashboard</h3>
            </div>
            <v-divider></v-divider>

          </div>
          <div class="col-md-12">
            <div class="main-card mt-4 " style="background-color:#F5F7F9">
              <div class="dashboard-wrap-content">
                <div class="d-flex flex-wrap justify-content-center align-items-center p-4 mx-auto">
                  
                   <v-card
                    variant="tonal"
                    class="mx-auto"
                    color="surface-variant"
                    width="300"
                    title="Total Items"
                    style="text-align: center; margin: auto; justify-content:center; height: 100px; margin-top: 8px;"
                  >
                    <p v-for="products in products" style="font-size:29px">
                    {{products.mcount}}
                    </p>
                    <v-progress-circular v-if="loading" color="344470" indeterminate></v-progress-circular>


                  </v-card>
                  <v-card
                    variant="tonal"
                    class="mx-auto"
                    color="surface-variant"
                    width="300"
                    title="Categories"
                    style="text-align: center; margin: auto; justify-content:center; height: 100px; margin-top: 8px;"
                  >
                    <p v-for="cat in cat" style="font-size:29px">
                    {{cat.ccount}}
                    </p>
                    <v-progress-circular v-if="loading2" color="344470" indeterminate></v-progress-circular>


                  </v-card>
                  
                </div>
                <div class=" ">
                  
                </div>
              </div>
            </div>

          </div>
          <div class="mt-12 col-md-12 ">
            <div class="d-flex flex-wrap justify-content-center align-items-center pt-4 pl-5 ">
              <h5><v-chip color="grey" variant="outlinded"> </v-chip></h5>
            </div>

          
          </div>
          
          <div class="col-md-8">
            <div class=" mt-9">
              
            
            </div>
          </div>
          
        </div>
      </div>
    </div>
  </div>    
  </div>



    
  </template>
  
  <script setup>
  import { useStore } from 'vuex';
  import { ref, onMounted,onBeforeMount, computed } from 'vue'
  import axiosClient from "../../axios";
  import { useRoute } from 'vue-router';
  import router from '@/router';
  import SideNav from "../SideNav.vue"
  // Import Vue FilePond

  const progressvalue = ref(30)
  // accountpage validation

  const completed1 = ref([])
  const completed2 = ref([])
  const completed3 = ref([])
  const completed4 = ref([])

  const maelezo = ref([])
  const products = ref([])
  const cat = ref([])
  const claimCount = ref([])
  const claim = ref([])

  const Tid = ref()
  const loading = ref(true)
  const loading2 = ref(true)
  const loading3 = ref(true)



  onMounted(()=>{

    // axiosClient.get('/currentuser').then((res)=>{
    //   user.value = res.data;
    //   user_id.value = res.data.user.id

    // })

   

  axiosClient.get('/productscount/get').then((res)=>{
        let data2 = res.data
   
          products.value.push(data2)
          loading.value=false
   }) 

  axiosClient.get('/categoriescount/get').then((res)=>{
        let data0 = res.data
   
          cat.value.push(data0)
          loading2.value=false
   }) 



    setTimeout(()=>{
   

    },800)



  })




  </script>

  <style scoped>
   
    .v-enter-active,
    .v-leave-active {
      transition: opacity 0.5s ease;
    }

    .v-enter-from,
    .v-leave-to {
      opacity: 0;
    }

    .topsearch{
      border: 1px solid #d7d7d7;
      background: white;
      width: 200px;
      height: 44px;
/*      color: #d6d6d6;
*/      padding: 15px;
    }
  </style>
