<script setup>
    import { RouterLink, useRoute, useRouter } from 'vue-router';
    import { useAuthStore } from '../stores/auth';

    const route = useRoute();
    const router = useRouter();
    const auth = useAuthStore();

   const handleLogout = () => {
        auth.$patch({
            sesion: '',
            token: '',
            user: {},
        });
        localStorage.removeItem('session');
        router.push({name: 'login'});
   }
</script>

<template>
    <nav id="sidebar">
        <div class="sidebar-header">
            <div class="logo">
                <img src="/images/logo-eta.png" alt="Eta viaporte" width="120">
            </div>
            <h2 class="my-4">COVO</h2>
            <p><i class="fa-solid fa-user"></i> <span class="ms-2">{{ auth.user?.first_name + ' ' + auth.user?.last_name }}</span></p>
            <div class="divider"></div>
        </div>
        <ul class="list-unstyled components">
            <li :class="[route.name === 'home' ? 'bg-nav-active' : '']">
                <div>
                    <i class="fa-solid fa-gauge-high" :class="[route.name === 'home' ? 'router-link-active' : '']"></i>
                    <RouterLink 
                        active-class="router-link-active"
                        class="nav-link" :to="{name: 'home'}">Dashboard</RouterLink>
                </div>
            </li>
            <li :class="[route.name === 'company' ? 'bg-nav-active' : '']">
                <div>
                    <i class="fa-regular fa-building" :class="[route.name === 'company' ? 'router-link-active' : '']"></i>
                    <RouterLink 
                        active-class="router-link-active"
                        class="nav-link" :to="{name: 'company'}">Empresa</RouterLink>
                </div>
            </li>
            <li :class="[route.name === 'users' ? 'bg-nav-active' : '']">
                <div>
                    <i class="fa-regular fa-user" :class="[route.name === 'users' ? 'router-link-active' : '']"></i>
                    <RouterLink 
                        active-class="router-link-active"
                        class="nav-link" :to="{name: 'users'}">Usuarios</RouterLink>
                </div>
            </li>
            <li :class="[route.name === 'locations' ? 'bg-nav-active' : '']">
                <div>
                    <i class="fa-solid fa-location-dot" :class="[route.name === 'locations' ? 'router-link-active' : '']"></i>
                    <RouterLink 
                        active-class=""
                        class="nav-link" :to="{name: 'locations'}">Ubicaciones</RouterLink>
                </div>
            </li>
            <li 
                v-if="auth.user?.permissions.includes('role_carrier')"
                :class="[route.name === 'vehicles' ? 'bg-nav-active' : '']">
                <div>
                    <i class="fa-solid fa-truck-fast" :class="[route.name === 'vehicles' ? 'router-link-active' : '']"></i>
                    <RouterLink 
                        active-class=""
                        class="nav-link" :to="{name: 'vehicles'}">Vehiculos</RouterLink>
                </div>
            </li>
            <li :class="[route.name === 'published' ? 'bg-nav-active' : '']">
                <div>
                    <i class="fa-solid fa-bullhorn" :class="[route.name === 'published' ? 'router-link-active' : '']"></i>
                    <RouterLink 
                        active-class=""
                        class="nav-link" :to="{name: 'published'}">Publicaciones</RouterLink>
                </div>
            </li>
            <li :class="[route.name === 'calendar' ? 'bg-nav-active' : '']">
                <div>
                    <i class="fa-regular fa-calendar" :class="[route.name === 'calendar' ? 'router-link-active' : '']"></i>
                    <RouterLink 
                        active-class="router-link-active"
                        class="nav-link" :to="{name: 'calendar'}">Calendario</RouterLink>
                </div>
            </li>
            <li 
                v-if="auth.user?.permissions.includes('role_carrier')"
                :class="[route.name === 'calculator' ? 'bg-nav-active' : '']">
                <div>
                    <i class="fa-solid fa-calculator" :class="[route.name === 'calculator' ? 'router-link-active' : '']"></i>
                    <RouterLink 
                        active-class="router-link-active"
                        class="nav-link" :to="{name: 'calculator'}">Calculadora</RouterLink>
                </div>
            </li>
            <li :class="[route.name === 'reports' ? 'bg-nav-active' : '']">
                <div>
                    <i class="fa-solid fa-chart-simple" :class="[route.name === 'reports' ? 'router-link-active' : '']"></i>
                    <RouterLink 
                        active-class="router-link-active"
                        class="nav-link" :to="{name: 'reports'}">Reportes</RouterLink>
                </div>
            </li>
        </ul>
        <div class="eta-info">
            <div class="divider"></div>
            <a class="link-eta" href="">Aviso de privaciadad</a>
            <a class="link-eta" href="">Terminos y condiciones</a>
            <a class="link-eta" href="">FAQS</a>
            <div class="d-flex align-items-center">
                <i class="fa-solid fa-right-from-bracket"></i>
                <a @click="handleLogout"
                    active-class=""
                    class="nav-link m-2">
                    Cerrar sesión
                </a>
            </div>
        </div>
    </nav>
</template>

<style lang="scss" scoped>
    #sidebar {
        position: fixed;
        display: flex;
        flex-direction: column;
        top: 0;
        height: 100%;
        bottom: 0;
        width: 220px;
        left: 0;
        z-index: 1030;
        background: #323030;
        color: #FFF;
        filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.10));
        transition: all 0.3s;
    }

    #sidebar .sidebar-header {
        padding: 20px;
        /* background: #FFF;
        color: #323030; */
        background: #323030;
        color: #FFF;
        margin-bottom: 8px;
    }

    .logo {
        display: flex;
        justify-content: center;
    }

    .sidebar-header h2 {
        margin-top: 16px;
        font-size: 1.4rem;
        font-weight: 900;
    }

    #sidebar.active {
        position: fixed;
    }


    #sidebar ul li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 20px;
        margin-bottom: 5px;
        background-color: #323030;
    }

    #sidebar ul li div{
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    #sidebar ul li i{
       font-size: 20px;
       color: #897c7c;
    }

    #sidebar ul li.active > a, a[aria-expanded="true"] {
        color: #fff;
        background: #6d7fcc;
    }

    a[data-toggle="collapse"] {
        position: relative;
    }

    .nav-link{
        cursor: pointer;
        /* color: #5f5c5c; */
        color: #ebd6d6;
        font-size: 1.2rem;
        margin-right: 1.2rem;
        font-weight: 500;
    }
    .nav-link:hover{
        /* color: #413f3c; */
        color: #FFF;
    }
    .nav-link:focus{
        /* color: #413f3c; */
        color: #FFF;
    }

    .eta-info {
        // position: fixed;
        display: flex;
        flex-direction: column;
        // margin-top: 8px;
        bottom: 10px;
        gap: 1rem;
        // background-color: red;
        align-items: start;
        padding: 10px 16px;
    }

    .link-eta {
        font-size: 14px;
        text-decoration: none;
        font-weight: 400;
        color: #FFF;
        opacity: 0.6;
    }

    @media (max-width: 768px) {

        #sidebar {
            position: relative;
            height: 100vh;
            overflow: auto;
            width: 220px;
            z-index: 4;
            
        }
    }
</style>