<template>
  <v-card >
    <v-layout>
      <v-app-bar

        color=""
        elevation="0"
        style="border-bottom: 1px solid #d2d2d2; background:#F5F7F9; z-index: 1000;"
        permanent
      >
       <!--  <v-app-bar-nav-icon variant="text" @click.stop="drawer = !drawer"></v-app-bar-nav-icon> -->

        <div class="header-inner " style="padding-top: 70px;" >
      <nav class="navbar navbar-expand-lg bg-barren barren-head  fixed-top justify-content-sm-start pt-0 pb-0" style="height:75px; background: none;">
        <div class="container" style="font-size: 4px;"> 
          <v-btn variant="text" color="#222222" @click.stop="drawer = !drawer" >
            <span class="">
              <i class="fa-solid fa-bars" style="font-size:23px"></i>
            </span>
          </v-btn>
         
          <div class="right-header order-2">
            <ul class="align-self-stretch">
              <li>
                
              </li>

              
                <div v-if="!loggedIn">

                 <!--  <li> 
                    
                    <v-chip
                    class=" ma-2 p-3 "
                    color="#132f65"
                    variant="tonal"
                    to="/login" 
                    >
                    Login
                    <v-icon end icon="mdi-account-outline"></v-icon>
                    </v-chip>
                                      
                  </li> -->
                </div>

                <div v-if="loggedIn">
                  <li class="me-3  mb-3 d-inline-flex">
                      <div class="d-flex justify-center">
                        <v-btn variant="tonal" style="background: #f5f5f5;" >
                          <!-- <v-icon  icon="mdi-account-circle" color="darkblue"  size="xx-large"></v-icon>  -->
                          <div v-for="user in currentuser" :key="user">
                          <v-avatar 
                              size="30" class="" color="#222222"
                            >
                        <!-- ../../../backend/public/images/ -->
                        <!--https://temp.prolaty.co.tz/public/images/'+ item.columns.Tlogo -->
                       <v-img :src="'images/'+ user.image"> </v-img>
                      </v-avatar>
                          <v-icon  icon="mdi-chevron-down"></v-icon>
<!--                           <div v-for="user in currentuser" :key="user">
 -->                              {{user.name}}
                          </div>
                          <v-overlay
                              activator="parent"
                              location-strategy="connected"
                              scroll-strategy="none"
                          >
                              <v-card class="pa-2">

                                  <!-- <v-btn href="/account" color="white" variant="flat" class="btn-outlined " ><b style="text-transform: initial;">My Profile</b>
                                  </v-btn><br> -->
                                  <v-btn variant="flat" @click="logout" class="btn-outlined " ><b style="text-transform: initial;"> Log Out</b>
                                  </v-btn>
                              </v-card>
                          </v-overlay>
                        </v-btn>
                      </div>
                   </li> 
                </div>

            </ul>
          </div>
        </div>
      </nav>
      <div class="overlay"></div>
    </div>
      </v-app-bar>


      <v-navigation-drawer
       
        v-model="drawer"
        :location="$vuetify.display.mobile ? 'left' : undefined"
        permanent
      >
         <div style="background: #F5F7F9; border-radius: 0px;border-right:1px solid #d3d3d3; border-top: 1px solid #d3d3d3; margin-top: -60px; width: 256px; margin-left: 0px; " class="vertical_nav" >
    <div class="left_section menu_left" id="js-menu">
      <div class="left_section">
        <ul>
          
          
          <li class="px-5 mt-8">
            <a href="/dashboard" class="menu--link "  :class="$route.name =='Dashboard'? 'active' : ''"  >  
            <i class="fa-solid fa-home menu--icon"></i>
              <span class="menu--label">Dashboard</span>
            </a>  
          </li>
          <li class="px-5">
            <v-expansion-panels
            elevation="0"
            style="padding:0; margin: 0;"

            >
              <v-expansion-panel
                style="background: none; box-shadow: none; margin: 0; padding: 0; "
              >
                <v-expansion-panel-title style="height:40px">
                  <router-link >
                  <a  class="menu--link "  :class="$route.name =='Products' || $route.name =='ProductsAdd' ? 'active' : ''"  style="width: 174px; margin-left: -22px; ">  
                  <i class="fa-solid fa-pen menu--icon"></i>
                    <span class="menu--label">Items</span>
                  </a>  
                  </router-link>
                </v-expansion-panel-title>
                <v-expansion-panel-text style="background: rgba(0, 0, 0, .03);">
                  
                  <a  href="/itemsAdd" class="menu--link "  :class="$route.name =='productsAdd'? 'active' : ''"  >  
                  <i class="fa-solid fa-plus menu--icon"></i>
                    <span class="menu--label">Add</span>
                  </a>  
                  <a  href="/items" class="menu--link "  :class="$route.name =='products'? 'active' : ''"  >  
                  <i class="fa-solid fa-eye menu--icon"></i>
                    <span class="menu--label">View</span>
                  </a>  
                </v-expansion-panel-text>
              </v-expansion-panel>
            </v-expansion-panels>
            
          </li>
          <li class="px-5">
            <v-expansion-panels
            elevation="0"
            style="padding:0; margin: 0;"

            >
              <v-expansion-panel
                style="background: none; box-shadow: none; margin: 0; padding: 0; "
              >
                <v-expansion-panel-title style="height:40px">
                  <router-link >
                  <a  class="menu--link "  :class="$route.name =='Categories' || $route.name =='CategoriesAdd' ? 'active' : ''"  style="width: 174px; margin-left: -22px; ">  
                  <i class="fa-solid fa-pen menu--icon"></i>
                    <span class="menu--label">Categories</span>
                  </a>  
                  </router-link>
                </v-expansion-panel-title>
                <v-expansion-panel-text style="background: rgba(0, 0, 0, .03);">
                  
                  <a  href="/categoriesAdd" class="menu--link "  :class="$route.name =='productsAdd'? 'active' : ''"  >  
                  <i class="fa-solid fa-plus menu--icon"></i>
                    <span class="menu--label">Add</span>
                  </a>  
                  <a  href="/categories" class="menu--link "  :class="$route.name =='products'? 'active' : ''"  >  
                  <i class="fa-solid fa-eye menu--icon"></i>
                    <span class="menu--label">View</span>
                  </a>  
                </v-expansion-panel-text>
              </v-expansion-panel>
            </v-expansion-panels>
            
          </li>
        
        
          <li class="px-5">
            <v-expansion-panels
            elevation="0"
            style="padding:0; margin: 0;"

            >
              <v-expansion-panel
                style="background: none; box-shadow: none; margin: 0; padding: 0; "
              >
                <v-expansion-panel-title style="height:40px">
                  <router-link >
                  <a  class="menu--link "  :class="$route.name =='Users' || $route.name =='Register' ? 'active' : ''"  style="width: 174px; margin-left: -22px; ">  
                  <i class="fa-solid fa-person menu--icon"></i>
                    <span class="menu--label">Users</span>
                  </a>  
                  </router-link>
                </v-expansion-panel-title>
                <v-expansion-panel-text style="background: rgba(0, 0, 0, .03);">
                  <a href="/register" class="menu--link "  :class="$route.name =='Register'? 'active' : ''"  >  
                  <i class="fa-solid fa-plus menu--icon"></i>
                    <span class="menu--label">Add</span>
                  </a>  
                  <a href="/users" class="menu--link "  :class="$route.name =='Users'? 'active' : ''"  >  
                  <i class="fa-solid fa-eye menu--icon"></i>
                    <span class="menu--label">View</span>
                  </a>  
                </v-expansion-panel-text>
              </v-expansion-panel>
            </v-expansion-panels>
            
          </li>
        
          <li class="px-5" style="margin-top: 39vh;">
            <div class="">
              <v-btn  @click="logout" variant="outlined"  block color='red'>
                Logout
              </v-btn>
            </div>
          </li>        
        </ul>
      </div>
    </div>


  </div>

  <div  style="background: #F5F7F9; border-radius: 0px;border-right:1px solid #d3d3d3; border-top: 1px solid #d3d3d3;" class="$vuetify.display.mobile ?'d-block':'d-none'"  >
    <div class="left_section menu_left" id="js-menu" style="background: #F5F7F9; border-radius: 0px;border-right:1px solid #d3d3d3; border-top: 1px solid #d3d3d3;">
      <div class="left_section">
        <ul>
          
          
          <li class="px-5 mt-8">
            
            <a href="/dashboard" class="menu--link "  :class="$route.name =='Dashboard'? 'active' : ''"  >  
            <i class="fa-solid fa-home menu--icon"></i>
              <span class="menu--label">Dashboard</span>
            </a>  
          </li>
          <li class="px-5">
            <v-expansion-panels
            elevation="0"
            style="padding:0; margin: 0;"

            >
              <v-expansion-panel
                style="background: none; box-shadow: none; margin: 0; padding: 0; "
              >
                <v-expansion-panel-title style="height:40px">
                  <router-link >
                  <a  class="menu--link "  :class="$route.name =='Products' || $route.name =='ProductsAdd' ? 'active' : ''"  style="width: 174px; margin-left: -22px; ">  
                  <i class="fa-solid fa-pen menu--icon"></i>
                    <span class="menu--label">Items</span>
                  </a>  
                  </router-link>
                </v-expansion-panel-title>
                <v-expansion-panel-text style="background: rgba(0, 0, 0, .03);">
                  
                  <a  href="/itemsAdd" class="menu--link "  :class="$route.name =='productsAdd'? 'active' : ''"  >  
                  <i class="fa-solid fa-plus menu--icon"></i>
                    <span class="menu--label">Add</span>
                  </a>  
                  <a  href="/items" class="menu--link "  :class="$route.name =='products'? 'active' : ''"  >  
                  <i class="fa-solid fa-eye menu--icon"></i>
                    <span class="menu--label">View</span>
                  </a>  
                </v-expansion-panel-text>
              </v-expansion-panel>
            </v-expansion-panels>
            
          </li>
          <li class="px-5">
            <v-expansion-panels
            elevation="0"
            style="padding:0; margin: 0;"

            >
              <v-expansion-panel
                style="background: none; box-shadow: none; margin: 0; padding: 0; "
              >
                <v-expansion-panel-title style="height:40px">
                  <router-link >
                  <a  class="menu--link "  :class="$route.name =='Categories' || $route.name =='CategoriesAdd' ? 'active' : ''"  style="width: 174px; margin-left: -22px; ">  
                  <i class="fa-solid fa-pen menu--icon"></i>
                    <span class="menu--label">Categories</span>
                  </a>  
                  </router-link>
                </v-expansion-panel-title>
                <v-expansion-panel-text style="background: rgba(0, 0, 0, .03);">
                  
                  <a  href="/categoriesAdd" class="menu--link "  :class="$route.name =='productsAdd'? 'active' : ''"  >  
                  <i class="fa-solid fa-plus menu--icon"></i>
                    <span class="menu--label">Add</span>
                  </a>  
                  <a  href="/categories" class="menu--link "  :class="$route.name =='products'? 'active' : ''"  >  
                  <i class="fa-solid fa-eye menu--icon"></i>
                    <span class="menu--label">View</span>
                  </a>  
                </v-expansion-panel-text>
              </v-expansion-panel>
            </v-expansion-panels>
            
          </li>
        
        
          <li class="px-5">
            <v-expansion-panels
            elevation="0"
            style="padding:0; margin: 0;"

            >
              <v-expansion-panel
                style="background: none; box-shadow: none; margin: 0; padding: 0; "
              >
                <v-expansion-panel-title style="height:40px">
                  <router-link >
                  <a  class="menu--link "  :class="$route.name =='Users' || $route.name =='Register' ? 'active' : ''"  style="width: 174px; margin-left: -22px; ">  
                  <i class="fa-solid fa-person menu--icon"></i>
                    <span class="menu--label">Users</span>
                  </a>  
                  </router-link>
                </v-expansion-panel-title>
                <v-expansion-panel-text style="background: rgba(0, 0, 0, .03);">
                  <a href="/register" class="menu--link "  :class="$route.name =='Register'? 'active' : ''"  >  
                  <i class="fa-solid fa-plus menu--icon"></i>
                    <span class="menu--label">Add</span>
                  </a>  
                  <a href="/users" class="menu--link "  :class="$route.name =='Users'? 'active' : ''"  >  
                  <i class="fa-solid fa-eye menu--icon"></i>
                    <span class="menu--label">View</span>
                  </a>  
                </v-expansion-panel-text>
              </v-expansion-panel>
            </v-expansion-panels>
            
          </li>
          <li class="px-5" style="margin-top: 39vh;">
            <div class="">
              <v-btn  @click="logout" variant="outlined"  block color='red'>
                Logout
              </v-btn>
            </div>
          </li>        
        </ul>
      </div>
    </div>

    
  </div>
      </v-navigation-drawer>

      <v-main class="body" style=" width: 100%; margin:0; padding: 0; overflow: scroll; background-color:#F5F7F9; min-height: 99vh;" >
        <router-view :currentuser="currentuser"></router-view>
       </v-main>
    </v-layout>
  </v-card>
  


  
  

    <!-- End Header -->

    <!-- Hero  -->

    

   
   
    <!-- end third section -->

    <!-- footer section -->
   
    <!-- end footer section -->

    
</template>

<script >

import { useStore } from 'vuex';
import { computed } from 'vue';
import { useRouter } from 'vue-router';
import axiosClient from "../axios";
import SideNav  from './SideNav.vue';
import { ref, onMounted,onBeforeMount } from 'vue'


export default{
    name:'LayOut',
 data(){
    return {
    
        currentuser:'',
        drawer:!window.mobileCheck()
        
        
      
    }
  },
  mounted(){
   axiosClient.get('/currentuser').then((res)=>{
   this.currentuser= res.data;
             
    })
   console.log(window.mobileCheck()) 
  },

  computed(){

   
  },


  setup(){
   
    const store = useStore();
    const router = useRouter();
    const leftmenu=ref(false)
    

    function logout(){
      store.dispatch('logout').then(()=>{
        router.push({name:'Login'})
      })
     
    }
    window.mobileCheck = function() {
    let check = false;
    (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
    return check;
  };

    function ToggleNav(){
      
      leftmenu.value=!leftmenu.value
      console.log(leftmenu.value)
    }

    const loggedIn = computed(() => {
    return store.state.user.token
    })

    return{
      user:computed(()=> store.state.user.data),
      logout,
      loggedIn,
      ToggleNav,
      SideNav,
      leftmenu
    }
  }

}
 
</script>

<style >
/*
  Enter and leave animations can use different
  durations and timing functions.
*/
.slide-fade-leave-active {
  transition: all 0.1s ease-out;
}

.slide-fade-enter-active {
  transition: all 0.1s ease-in-out;
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(-100px);
  opacity: 1;
}
.body{
  font-size: 11px;
}
.menu--label{
  font-size: 13px;
}

a{
  color: #666;
}
</style>
