<script setup>
    import { RouterLink, useRoute, useRouter } from 'vue-router';
    import { useAuthStore } from '../../stores/auth';
    import Swal from 'sweetalert2';
    import { useI18n } from 'vue-i18n';
    import { useCompanyStore } from '../../stores/company';
    import { useVehiclesStore } from '../../stores/vehicles';
    import { useLoadsStore } from '../../stores/loads';
    import { useNotificationsStore } from '../../stores/notifications';

    const route = useRoute();
    const auth = useAuthStore();
    const company = useCompanyStore();
    const vehicles = useVehiclesStore();
    const loads = useLoadsStore();
    const noty = useNotificationsStore();
    const router = useRouter();
    const permission = auth.user?.permissions;
    const jobRole = auth.user?.job_role;
    const { t } = useI18n()

   const handleLogout = () => {
        Swal.fire({
            title: t('buttons.closeSesion'),
            text: t('labels.questionSignOut'),
            icon: 'question',
            showCancelButton: true,
            cancelButtonColor: "#d33",
            confirmButtonText: t('buttons.yes'),
            cancelButtonText: t('buttons.no'),
        }).then(async(result) => {
            if(result.isConfirmed) {
                auth.logout();
                company.clear();
                vehicles.clear();
                loads.clear();
                noty.clear();
                router.push({name: 'login'});
            }
        });
   }

   const roleCheck = 'warehouse';


</script>

<template>
    <nav id="sidebar">
        <div class="sidebar-header">
            <div class="logo">
                <a href="https://etaviaporte.com/" target="_blank">
                    <img src="/images/logo-eta.png" alt="Eta viaporte" width="120">
                </a>
            </div>
            <p class="my-4"><i class="fa-regular fa-building icon-header"></i> <span class="company-name">{{auth.user?.company?.company_name}}</span></p>
            <!-- <p><i class="fa-regular fa-user icon-header"></i> <span>{{ auth.user?.first_name + ' ' + auth.user?.last_name }}</span></p> -->
            <div class="divider"></div>
        </div>
        <ul class="list-unstyled components">
            <li 
                v-if="jobRole !== roleCheck"
                :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 
                v-if="jobRole !== roleCheck"
                :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'}">{{ t('global.company') }}</RouterLink>
                </div>
            </li>
            <li 
                v-if="jobRole !== roleCheck"
                :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'}">{{ t('global.users') }}</RouterLink>
                </div>
            </li>
            <li 
                v-if="jobRole !== roleCheck"
                :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'}">{{ t('global.directory') }}</RouterLink>
                </div>
            </li>
            <li 
                v-if="permission === 'role_carrier' && jobRole !== roleCheck"
                :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'}">{{t('global.vehicles')}}</RouterLink>
                </div>
            </li>
            <li 
                v-if="permission === 'role_shipper' && jobRole !== roleCheck" 
                :class="[route.name === 'published-loads' ? 'bg-nav-active' : '']">
                <div>
                    <i class="fa-solid fa-bullhorn" :class="[route.name === 'published-loads' ? 'router-link-active' : '']"></i>
                    <RouterLink 
                        active-class=""
                        class="nav-link" :to="{name: 'published-loads'}">{{t('global.publications')}}</RouterLink>
                </div>
            </li>
            <li 
                v-if="permission === 'role_carrier' && jobRole !== roleCheck" 
                :class="[route.name === 'published-trucks' ? 'bg-nav-active' : '']">
                <div>
                    <i class="fa-solid fa-bullhorn" :class="[route.name === 'published-trucks' ? 'router-link-active' : '']"></i>
                    <RouterLink 
                        active-class=""
                        class="nav-link" :to="{name: 'published-trucks'}">{{ t('global.acceptedOffers') }}</RouterLink>
                </div>
            </li>
            <li 
                v-if="jobRole !== roleCheck"
                :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'}">{{ t('global.calendar') }}</RouterLink>
                </div>
            </li>
            <li 
                v-if="jobRole === roleCheck"
                :class="[route.name === 'store' ? 'bg-nav-active' : '']"
            >
                <div>
                    <i class="fa-solid fa-shop-lock" :class="[route.name === 'store' ? 'router-link-active' : '']"></i>
                    <RouterLink 
                        active-class="router-link-active"
                        class="nav-link" :to="{name: 'store'}">{{ t('store.title') }}</RouterLink>
                </div>
            </li>
            <li 
                v-if="permission === 'role_carrier' && jobRole !== roleCheck"
                :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'}">{{ t('global.calculator') }}</RouterLink>
                </div>
            </li>
            <li 
                v-if="permission === 'role_shipper' && jobRole !== roleCheck" 
                :class="[route.name === 'groups' ? 'bg-nav-active' : '']">
                <div>
                    <i class="fa-regular fa-address-book" :class="[route.name === 'groups' ? 'router-link-active' : '']"></i>
                    <RouterLink 
                        active-class=""
                        class="nav-link" :to="{name: 'groups'}">Lista privada</RouterLink>
                </div>
            </li>
        </ul>
        <div class="eta-info">
            <div class="divider"></div>
            <RouterLink class="link-eta" :to="{name: 'notice-privacy'}" target="_blank">{{ t('buttons.noticePrivacity') }}</RouterLink>
            <RouterLink class="link-eta" :to="{name: 'terms-conditions'}" target="_blank">{{ t('buttons.terms') }}</RouterLink>
            <RouterLink class="link-eta" :to="{name: 'faqs'}" target="_blank">Faqs</RouterLink>
            <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">
                    {{ t('buttons.closeSesion') }}
                </a>
            </div>
        </div>
    </nav>
</template>

<style lang="scss" scoped>
    #sidebar {
        position: fixed;
        display: flex;
        flex-direction: column;
        top: 0;
        height: 100%;
        // min-height: 100vh;
        overflow-y: scroll;
        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;
    }

    .icon-header {
        font-size: 24px;
        // color: #FBBA33;
        color: #FFF;
        margin-right: 8px;
    }

    .company-name {
        font-size: 1.2rem;
        font-weight: 700;
    }

    .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;
    }
    
    .bg-nav-active {
        opacity: 0.4;
        transition: opacity 500ms ease-in-out;
    }

    #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: #ebd6d6;
        font-size: 1.2rem;
        margin-right: 1.2rem;
        font-weight: 500;
    }

    .router-link-active{
        color: #FFF;
    }
    .nav-link:hover{
        color: #FFF;
    }
    .nav-link:focus{
        color: #FFF;
    }

    .eta-info {
        display: flex;
        flex-direction: column;
        bottom: 10px;
        gap: 1rem;
        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>