<script setup>
    import { RouterLink } from 'vue-router';
    import { useAuthStore } from '../stores/auth';
    import { useNotificationsStore } from '../stores/notifications';
    import { useI18n } from 'vue-i18n';

    const auth = useAuthStore();
    const noty = useNotificationsStore();
     $(document).ready(function() {
        $('#sidebarCollapse').on('click', function () {
            $('#sidebar').toggleClass('active');
            $('#custom-navbar').toggleClass('active');
        });
    });

    const { t } = useI18n()
</script>

<template>
    <nav class="navbar navbar-expand-lg navbar-light custom-navbar" id="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 === 'role_shipper'"
                        active-class="router-link-active"
                        class="nav-link" :to="{name: 'carriers'}"><i class="fa-solid fa-truck me-1"></i> <span class="clear-xsm">{{ t('global.carriers') }}</span></RouterLink>
                    <RouterLink 
                        v-if="auth.user?.permissions === 'role_carrier'"
                        active-class="router-link-active"
                        class="nav-link" :to="{name: 'search-loads'}"> <i class="fa-solid fa-truck-ramp-box me-1"></i> <span class="clear-xsm">{{ t('global.loads') }}</span></RouterLink>
                    <RouterLink 
                        v-if="auth.user?.permissions === 'role_carrier'"
                        active-class="router-link-active"
                        class="nav-link" :to="{name: 'shippers'}"><i class="fa-solid fa-book me-1"></i> <span class="clear-xsm">{{ t('global.shippers') }}</span></RouterLink>
                    <a 
                        active-class="router-link-active"
                        @click="noty.toggleProfile"
                        class="nav-link"><i class="fa-solid fa-user me-1"></i> <span class="clear-xsm">{{ auth?.user?.first_name }}</span></a>
                </div>
            </div>
    </nav>
</template>

<style lang="scss" scoped>
    .nav-items {
        display: flex;
        flex-direction: row;
        justify-content: end;
        align-items: center;
    }

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

    .nav-options {
        display: flex;
        margin-left: 32px;
        gap: 1rem;
        margin-right: 32px;
    }

    .btn-menu {
        display: none;
    }

    .nav-link{
        cursor: pointer;
        color: #FBBA33;
        font-size: 1.3rem;
        margin-right: 1.2rem;
        font-weight: 500;
    }
    .nav-link:hover{
        color: #282727;
    }
    .nav-link:focus{
        color: #282727;
    }
    
    .router-link-active{
        color: #282727;
    }

    #custom-navbar.active {
        margin-left: 220px;
        display: block;
        width: calc(100% - 220px) !important;
    }

    @media (max-width: 768px) {

        .nav-options {
            margin-left: 8px;
            margin-right: 8px;
            gap: 0.5rem;
        }

        .nav-link{
            font-size: 1.1rem;
            margin-right: 1.2rem;
            font-weight: 500;
        }

        .custom-navbar {
            width: 100vw !important;
        }

        .nav-items {
            justify-content: space-between;
        }
        .btn-menu {
            margin-left: 8px;
            display: flex;
        }
    }
</style>