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

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

   $(document).ready(function() {
    $('#sidebarCollapse').on('click', function () {
        $('#sidebar').toggleClass('active');
    });
   });

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

<template>
    <div class="wrapper">
        <nav id="sidebar">
            <div class="sidebar-header">
                <div class="logo">
                    <!-- <img src="/images/logo.png" alt="Eta viaporte" width="120"> -->
                    <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>
            <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>
                     <!-- <i class="fa-solid fa-chevron-right"></i> -->
                </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>
                    <!-- <i class="fa-solid fa-chevron-right"></i> -->
                </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>
                    <!-- <i class="fa-solid fa-chevron-right"></i> -->
                </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>
                    <!-- <i class="fa-solid fa-chevron-right"></i> -->
                </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>
                    <!-- <i class="fa-solid fa-chevron-right"></i> -->
                </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>
                    <!-- <i class="fa-solid fa-chevron-right"></i> -->
                </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>
                    <!-- <i class="fa-solid fa-chevron-right"></i> -->
                </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>
                    <!-- <i class="fa-solid fa-chevron-right"></i> -->
                </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>
        <div id="content">
            <nav class="navbar navbar-expand-lg navbar-light custom-navbar">
                    <div class="nav-items">
                        <button type="button" id="sidebarCollapse" class="btn btn-info btn-menu">
                            <i class="fas fa-align-left"></i>
                        </button>
                        <div class="nav-options">
                            <RouterLink 
                                v-if="auth.user?.permissions.includes('role_shipper')"
                                active-class="router-link-active"
                                class="nav-link" :to="{name: 'carriers'}">Transporte</RouterLink>
                            <RouterLink 
                                v-if="auth.user?.permissions.includes('role_carrier')"
                                active-class="router-link-active"
                                class="nav-link" :to="{name: 'shippers'}">Cargas</RouterLink>
                        </div>
                    </div>
            </nav>
            <div class="view">
                <RouterView />
            </div>
        </div>
    </div>
    <LoadingModal/>
</template>

<style lang="scss" scoped>
    .wrapper {
        display: flex;
        width: 100%;
        align-items: stretch;
        background-color: #f6f3f3;
    }

    #sidebar {
        /* margin: 20px; */
        display: flex;
        flex-direction: column;
        width: 220px;
        min-height: 100vh;
        /* background: #FFF;
        color: #323030; */
        background: #323030;
        color: #FFF;
        filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.10));
        transition: all 0.3s;
    }
    #sidebar.active {
        margin-left: -250px;
    }

    #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 ul li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 20px;
        margin-bottom: 5px;
        /* background-color: #FFF; */
        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;
    }

    .custom-navbar {
        display: block;
        width: calc(100vw - 220px);
        background-color: #FFF;
    }

    .btn-menu {
        display: none;
    }

    .dropdown-toggle::after {
        display: block;
        position: absolute;
        top: 50%;
        right: 20px;
        transform: translateY(-50%);
    }

    .view {
        margin: 24px 50px;
        // width: calc(100vw - 260px);
    }

    .nav-items {
        display: flex;
        flex-direction: row;
        justify-content: end;
    }

    .nav-options {
        margin-left: 32px;
        display: flex;
    }

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

    .router-link-active{
        /* color: #413f3c !important; */
        color: #FFF !important;
    }

    .bg-nav-active {
        /* background-color: #e4eff2 !important;; */
        background-color: #373738 !important;;
    }

    .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: 1400px) {
        .view {
            margin: 24px 24px;
        }
    }

    @media (max-width: 768px) {

        .custom-navbar {
            width: 100vw;
        }

        .nav-items {
            justify-content: space-between;
        }
        .btn-menu {
            display: flex;
        }
        #sidebar {
            margin-left: -220px;
            
        }
        #sidebar.active {
            margin-left: 0;
        }

        .view {
            margin: 24px 12px;
        }
    }
</style>