<template>

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

        color=""
        elevation="0"
        style="border-bottom: 1px solid #d2d2d2; background:#F5F7F9; z-index: 1000;min-height:140px;"
        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;" >
          <!-- Header Section Begin -->
    
    <!-- Header Section End -->
      <nav class=" fixed-top justify-content-sm-start pt-0 pb-0" style="height:125px; background: none;">
        <div class="container" style=""> 
          
         <div class="row mt-5 pt-3">
            <div class="col-1">
              <v-btn v-if="$route.path!=='/cart'" variant="text" color="#344470" style=" z-index: 1000;" @click.stop="drawer = !drawer" >
              <span class="">
                <i class="fa-solid fa-bars" style="font-size:23px"></i>
              </span>
            </v-btn>
            <a class="text-black" href="/home" v-else>
              <span class="">
                <i class="fa-solid fa-arrow-left mt-2" style="font-size:24px"></i>
              </span>
            </a>
            </div>
            <div class="col-md-3 ">
                <div class="header__top__left">
                    <ul class="d-none d-md-block">
                        <a href="/home" class="text-black"><img class="img-fluid" style="width: 110px; margin-top:-5px" src="img/logo.png" /></a>
                        <li></li>
                    </ul>
                     <ul class="d-block d-md-none">
                        <a href="/home" class="text-black"><img class="img-fluid" style="width: 50px; margin-top:19px" src="img/logo.png" /></a>
                        <li></li>
                    </ul>
                </div>
            </div>
            <div class="d-block d-md-none" style="margin-top:-10px;margin-left: 55px;  position: absolute;">
              <div class="hero__search">

                  <v-select
                              style="width: 180px;position; height: 80px;border: 0;"
                              elevation="0"
                              density="compact"
                              class="hero__search__categories "
                              label="Categories"
                              v-model="cat"
                              clearable
                              :change="onChange($event,search)" 
                              :items="categories2"
                            ></v-select>
                  <div class="hero__search__form" style=" width: 270px; margin-top: -28px; ">
                      <form action="#">
                             
                          <input v-model="search" :change="onChange(null,search)" type="text" style="width:180px; background:#fff" placeholder="What do yo u need?">
                         
                        <v-btn
                          style="width:80px; color:white;background: #344470;height: 40px; "
                          class="site-btn "
                          variant="flat"
                          :loading="loading"
                          @click="onClickButton"
                        >
                         <b class="" style="font-size:10px"> SEARCH</b>
                        </v-btn>
                      </form>
                  </div>
                  
              </div>
              <a href="/cart" style="">
                <div class="header__cart">
                    <ul style="position: absolute; margin-top:-130px; background: ; width: 190px; height: 40px;">
                       
                        <li><a href="/cart"><i class="fa fa-shopping-bag"></i> <span v-if="cart" style="width: 18px;margin-right:-1px background: #344470; height: 18px; margin-top: -10px; font-size: 13px; padding-top: 2px">{{newCart.length}}</span><span v-else style="width: 13px;background: #344470; height: 13px; margin-top: -5px; "></span></a></li>
                    </ul>
                    <div style="font-size:18px; position: absolute; margin-top:-130px; ;width: 100px; " class="header__cart__price"><span style=" margin-right:-10px; font-size:14px">My Cart</span></div>
                </div>
              </a>
            </div>
            <div class="d-none d-md-block col-md-5">
              <div class="hero__search" style="display:inline-flex;">

                  <v-select
                              style="width: 160px;position; height: 80px;border: 0;"
                              elevation="0"
                              density="compact"
                              class="hero__search__categories "
                              label="Categories"
                              v-model="cat"
                              clearable
                              :change="onChange($event,search)" 
                              :items="categories2"
                            ></v-select>
                  <div class="hero__search__form" style=" width: 340px; margin-top: 0px; ">
                      <form action="#">
                             
                          <input v-model="search" :change="onChange(null,search)" type="text" style="width:240px; background:#fff" placeholder="What do yo u need?">
                         
                        <v-btn
                          style="width:130px; color:white;background: #344470;height: 50px; "
                          class="site-btn "
                          variant="flat"
                          :loading="loading"
                          @click="onClickButton"
                        >
                         <b class=""> SEARCH</b>
                        </v-btn>
                      </form>
                  </div>
                  
              </div>
              
            </div>
            <div class="col-lg-2 d-none d-md-block ">
              <a href="/cart">
                <div class="header__cart">
                    <ul>
                       
                        <li><a href="/cart"><i class="fa fa-shopping-bag"></i> <span v-if="cart" style="width: 18px; background: #344470; height: 18px; margin-top: -10px; font-size: 13px; padding-top: 2px">{{newCart.length}}</span><span v-else style="width: 13px;background: #344470; height: 13px; margin-top: -5px; "></span></a></li>
                    </ul>
                    <div style="font-size:18px" class="header__cart__price"><span>My Cart</span></div>
                </div>
              </a>
            </div>
          </div>
          
        </div>
      </nav>
      <div class="overlay"></div>
    </div>
      </v-app-bar>

     
      <v-navigation-drawer
        style="margin-top: 60px;width: 256px;overflow-x:hidden; "
        class="d-none d-md-block"
        v-if="this.$route.name!=='Cart' "
        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: -85px; width: 276px; height:89vh;  overflow-y: scroll; margin-left: 0px; " class="vertical_nav" >
    <div class="left_section menu_left" id="js-menu">
      <div class="left_section">
        <ul>
          
          <br><br>
          <li class="menu--item ">
            <a @click="onChange3"   style="cursor: pointer;" class=" menu-link"  :class="$route.name =='Dashboard'? 'active' : ''"  >  
              
              <h5 class="menu-label">Show All</h5><i class="fa-solid fa-caret-right menu--icon"></i>
            </a>  
          </li>
          <li class="menu--item " v-for="categories2 in categories2">
            <a @click="onChange2(categories2)"   style="cursor: pointer;" class=" menu-link"  :class="$route.name =='Dashboard'? 'active' : ''"  >  
            
              <h5 class="menu-label">{{categories2}}</h5><i class="fa-solid fa-caret-right menu--icon"></i>
            </a>  
          </li>
          <br><br>
      
        </ul>
      </div>
    </div>


  </div>

  <div  style="background: #e2f8f1; 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: #fff; border-radius: 0px;border-right:1px solid #d3d3d3;margin-top: -25px; border-top: 1px solid #d3d3d3;">
      <div class="left_section">
        <ul>
          
          
          <li class="menu--item 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="menu--item">
            <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="menu--item">
            <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="menu--item">
            <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="menu--item" 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>


      <!-- nav------- -->

      <v-navigation-drawer
        style="margin-top: 40px;width: 256px; margin-left: -256px;margin-right: 20%;overflow-x:hidden; "
        class="d-block d-md-none"
        v-model="drawer"
        :location="$vuetify.display.mobile ? 'left' : undefined"
        permanent
      >
      

  <div  style="background: #e2f8f1; border-radius: 0px; border: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: #fff; border-radius: 0px;border-right:1px solid #d3d3d3;margin-top: 0px; border-top: 1px solid #d3d3d3;">
      <div class="left_section" style="margin-top: -30px;">
        <ul>
          
          <br><br>
          <li class="menu--item ">
            <a @click="onChange3"   style="cursor: pointer;" class=" menu-link"  :class="$route.name =='Dashboard'? 'active' : ''"  >  
              
              <h5 class="menu-label">Show All</h5><i class="fa-solid fa-caret-right menu--icon"></i>
            </a>  
          </li>
          <li class="menu--item " v-for="categories2 in categories2">
            <a @click="onChange2(categories2)"   style="cursor: pointer;" class=" menu-link"  :class="$route.name =='Dashboard'? 'active' : ''"  >  
            
              <h5 class="menu-label">{{categories2}}</h5><i class="fa-solid fa-caret-right menu--icon"></i>
            </a>  
          </li>
          <br><br>
      
        </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'
import {useRoute} from 'vue-router'


export default{
    name:'LayOut',
    
 data(){
    return {
    
        currentuser:'',
        drawer:!window.mobileCheck(),
        search:ref(),
        categories2:ref([]),
        cat:ref(),
        loading:false,
        cartRoute:false,
        CartLength:ref(),
        
      
    }
  },
  methods:{
    
    onClickButton (event) {
        if(this.$route.path=='/cart'){
          var cat = this.cat
          let data2 = [
          'search', this.search
          ]
          let data = JSON.stringify(data2)

          this.$router.push({
            name: "Home2", 
            params: {  data }
          });

          // setTimeout(function() {
          //   this.emit()
          // }, 2000);
        }else{
          
          this.$emit('clicked', this.search)
          this.loading=true
          setTimeout(()=>{
          this.loading=false
          },900)
          console.log('clicked')
        }
        
         
    },
     
     onChange (event,search) {
          // if(this.cat!=undefined){
      if(this.$route.path=='/cart' && this.cat!=undefined){
          let data2 = [
          'category', this.cat
          ]
          let data = JSON.stringify(data2)

          this.$router.push({
            name: "Home2", 
            params: {  data }
          });

        }else{
            this.$emit('category', this.cat,this.search)
            console.log('clicked',this.cat,this.search)
          
         }
           
          
         
         
    },
    onChange2 (cat) {

         this.$emit('category', cat)
         console.log('clicked',cat)
       

         
    },
    onChange3 () {
         this.$emit('category', 'all')
         
    }
   
  },
  mounted(){

   axiosClient.get('/currentuser').then((res)=>{
   this.currentuser= res.data;
             
    })
   axiosClient.get('/categories/get').then((res)=>{
        let data  = res.data;

      for (var bm = 0; bm < data.length; bm++) {
        this.categories2.push(data[bm].name)
        
        
      }

    })
   console.log(window.mobileCheck()) 
  },

  computed(){
    

   
  },


  setup(){
    
    let cart2=''
    if(sessionStorage.getItem("cart")){
     cart2 =JSON.parse(sessionStorage.getItem("cart"))

    }
    const cart = ref(cart2);
    cart.value=JSON.parse(sessionStorage.getItem("cart"))
    const route=useRoute();

    const path = computed(() =>route.path)

    let newCart = []
    if(cart.value!=null){
      newCart = [...new Map(cart.value.map(item => [item.id, item])).values()];
    }
    function routeC(argument) {
      if(path=='/cart'){
        this.cartRoute=true
      }  
    }
    

    const store = useStore();
    const router = useRouter();
    const leftmenu=ref(false)
    
    onMounted(()=>{
      console.log('routteec',useRoute())
    })
    

    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,
      cart,
      path,
      routeC,
      onMounted,
      newCart
      
    }
  }

}
 
</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;
}

.v-field__outline {
--v-field-border-width: 0px !important;;
--v-field-border-opacity: 1 !important;
}

.menu-link{
  color: black; display: inline-flex;
  transition: .2s ;
  width: 210px;
  justify-content: space-between;
  font-size: 11px;
  overflow: hidden;
  height: px;
  margin-top: 0;
  opacity: 1;

}
.menu-link:hover h5{
  font-weight: bold;
}
.menu-link:hover{
  transform: translateX(2px);
  color: black;
  font-weight: bold;
}
.menu-label{
  font-size: 13px;
  line-height: 18px;
  display: inline-flex;
  width: 390px;
  margin-top: 10px;
}

.menu--item{
  height: 10px;
}
</style>
