<template>
	<nav class="side-nav">
	    <ul>
	        <li>
	        	<router-link :to="{ name: 'dashboard'}" v-slot="{ href, navigate, isActive }">
	            	<a :href="href" @click="navigate" class="side-menu" :class="[ isActive ? 'side-menu--active': '']">
		                <div class="side-menu__icon">
		                    <Icon name="Home" />
		                </div>
		                <div class="side-menu__title">Escritorio</div>
					</a>
	            </router-link>
	        </li>
	        <li class="side-nav__devider my-4"></li>
	        <li>
	            <a href="javascript:;" class="side-menu" @click="toggle('menu-users')">
	                <div class="side-menu__icon">
	                	<Icon name="Users" />
	                </div>
	                <div class="side-menu__title">Clientes / Usuarios <div class="side-menu__sub-icon">
	                        <Icon name="ChevronDown" />
	                    </div>
	                </div>
	            </a>
	            <ul id="menu-users" class="v-leave-active v-leave-to">
	                <li>
	                	<router-link :to="{ name: 'users-add'}" v-slot="{ href, navigate, isActive }">
	            			<a :href="href" @click="navigate" class="side-menu" :class="[ isActive ? 'side-menu--active': '']">
		                        <div class="side-menu__icon">
		                            <Icon name="UserPlus" />
		                        </div>
		                        <div class="side-menu__title">Registrar Nuevo</div>
							</a>
	                    </router-link>
	                </li>
	                <li>
	                	<router-link :to="{ name: 'users-list'}" v-slot="{ href, navigate, isActive }">
	                		<a :href="href" @click="navigate" class="side-menu" :class="[ isActive ? 'side-menu--active': '']">
		                        <div class="side-menu__icon">
		                            <Icon name="ListChecks" />
		                        </div>
		                        <div class="side-menu__title">Ver Listado</div>
		                    </a>
	                    </router-link>
	                </li>
	                <li>
	                	<router-link :to="{ name: 'users-history'}" v-slot="{ href, navigate, isActive }">
	                		<a :href="href" @click="navigate" class="side-menu" :class="[ isActive ? 'side-menu--active': '']">
		                        <div class="side-menu__icon">
		                            <Icon name="History" />
		                        </div>
		                        <div class="side-menu__title">Ver Historial</div>
		                    </a>
	                    </router-link>
	                </li>
	            </ul>
	        </li>
	        <li>
	            <a href="javascript:;" class="side-menu"  @click="toggle('menu-vehicle')">
	                <div class="side-menu__icon">
	                    <Icon name="Car" />
	                </div>
	                <div class="side-menu__title">Vehículos <div class="side-menu__sub-icon">
	                        <Icon name="ChevronDown" />
	                    </div>
	                </div>
	            </a>
	            <ul id="menu-vehicle" class="v-leave-active v-leave-to">
	                <li>
	                	<router-link :to="{ name: 'vehicles-add'}" v-slot="{ href, navigate, isActive }">
	                		<a :href="href" @click="navigate" class="side-menu" :class="[ isActive ? 'side-menu--active': '']">
		                        <div class="side-menu__icon">
		                            <Icon name="Car" />
		                        </div>
		                        <div class="side-menu__title">Registrar Nuevo</div>
		                    </a>
		                </router-link>
	                </li>
	                <li>
	                    <router-link :to="{ name: 'vehicles-list'}" v-slot="{ href, navigate, isActive }">
	                		<a :href="href" @click="navigate" class="side-menu" :class="[ isActive ? 'side-menu--active': '']">
		                		<div class="side-menu__icon">
		                            <Icon name="ListChecks" />
		                        </div>
		                        <div class="side-menu__title">Ver Listado</div>
		                    </a>
		                </router-link>
	                </li>
	                <li>
	                    <router-link :to="{ name: 'vehicles-brands'}" v-slot="{ href, navigate, isActive }">
	                		<a :href="href" @click="navigate" class="side-menu" :class="[ isActive ? 'side-menu--active': '']">
		                        <div class="side-menu__icon">
		                            <Icon name="Folder" />
		                        </div>
		                        <div class="side-menu__title">Marcas</div>
		                    </a>
		                </router-link>
	                </li>
	                <li>
	                    <router-link :to="{ name: 'vehicles-models'}" v-slot="{ href, navigate, isActive }">
	                		<a :href="href" @click="navigate" class="side-menu" :class="[ isActive ? 'side-menu--active': '']">
		                        <div class="side-menu__icon">
		                            <Icon name="Folders" />
		                        </div>
		                        <div class="side-menu__title">Modelos</div>
		                    </a>
		                </router-link>
	                </li>
	            </ul>
	        </li>
	        <li>
	            <a href="javascript:;" class="side-menu"  @click="toggle('menu-ansapass')">
	                <div class="side-menu__icon">
	                    <Icon name="Ticket" />
	                </div>
	                <div class="side-menu__title">AnsaPass <div class="side-menu__sub-icon">
	                        <Icon name="ChevronDown" />
	                    </div>
	                </div>
	            </a>
	            <ul id="menu-ansapass" class="v-leave-active v-leave-to">
	                <li>
	                    <router-link :to="{ name: 'ansapass-add'}" v-slot="{ href, navigate, isActive }">
	                		<a :href="href" @click="navigate" class="side-menu" :class="[ isActive ? 'side-menu--active': '']">
		                        <div class="side-menu__icon">
		                        	<Icon name="PlusSquare" />
		                        </div>
		                        <div class="side-menu__title">Agregar Nuevo</div>
		                    </a>
		                </router-link>
	                </li>
	                <li>
	                    <router-link :to="{ name: 'ansapass-list'}" v-slot="{ href, navigate, isActive }">
	                		<a :href="href" @click="navigate" class="side-menu" :class="[ isActive ? 'side-menu--active': '']">
		                        <div class="side-menu__icon">
		                            <Icon name="ListChecks" />
		                        </div>
		                        <div class="side-menu__title">Ver Listado</div>
		                    </a>
		               </router-link>
	                </li>
	                <li>
	                    <router-link :to="{ name: 'ansapass-history'}" v-slot="{ href, navigate, isActive }">
	                		<a :href="href" @click="navigate" class="side-menu" :class="[ isActive ? 'side-menu--active': '']">
		                        <div class="side-menu__icon">
		                            <Icon name="Wallet" />
		                        </div>
		                        <div class="side-menu__title">Consultar Saldo</div>
		                    </a>
		                </router-link>
	                </li>
	            </ul>
	        </li>
	        <li>
	            <a href="javascript:;" class="side-menu"  @click="toggle('menu-prepaid-card')">
	                <div class="side-menu__icon">
	                	<Icon name="CreditCard" />
	                </div>
	                <div class="side-menu__title">Carnet Prepagado <div class="side-menu__sub-icon">
	                        <Icon name="ChevronDown" />
	                    </div>
	                </div>
	            </a>
	            <ul id="menu-prepaid-card" class="v-leave-active v-leave-to">
	                <li>
	                    <router-link :to="{ name: 'prepaid-cards-add'}" v-slot="{ href, navigate, isActive }">
	                		<a :href="href" @click="navigate" class="side-menu" :class="[ isActive ? 'side-menu--active': '']">
		                        <div class="side-menu__icon">
		                        	<Icon name="PlusSquare" />
		                        </div>
		                        <div class="side-menu__title">Agregar Nuevo</div>
		                    </a>
		                </router-link>
	                </li>
	                <li>
	                    <router-link :to="{ name: 'prepaid-cards-list'}" v-slot="{ href, navigate, isActive }">
	                		<a :href="href" @click="navigate" class="side-menu" :class="[ isActive ? 'side-menu--active': '']">
		                        <div class="side-menu__icon">
		                            <Icon name="ListChecks" />
		                        </div>
		                        <div class="side-menu__title">Ver Listado</div>
		                    </a>
		                </router-link>
	                </li>
	                <li>
	                    <router-link :to="{ name: 'prepaid-cards-history'}" v-slot="{ href, navigate, isActive }">
	                		<a :href="href" @click="navigate" class="side-menu" :class="[ isActive ? 'side-menu--active': '']">
		                        <div class="side-menu__icon">
		                            <Icon name="Wallet" />
		                        </div>
		                        <div class="side-menu__title">Consultar Saldo</div>
		                    </a>
		                </router-link>
	                </li>
	            </ul>
	        </li>
	        <li class="side-nav__devider my-4"></li>
	        <li>
	            <a href="javascript:;" class="side-menu"  @click="toggle('menu-reports')">
	                <div class="side-menu__icon">
	                	<Icon name="LayoutList" />
	                </div>
	                <div class="side-menu__title">Reportes <div class="side-menu__sub-icon">
	                        <Icon name="ChevronDown" />
	                    </div>
	                </div>
	            </a>
	            <ul id="menu-reports" class="v-leave-active v-leave-to">
	                <li>
	                    <router-link :to="{ name: 'dashboard'}" v-slot="{ href, navigate, isActive }">
	                		<a :href="href" @click="navigate" class="side-menu" :class="[ isActive ? 'side-menu--active': '']">
		                        <div class="side-menu__icon">
		                        	<Icon name="CircleDot" />
		                        </div>
		                        <div class="side-menu__title">Pendiente...</div>
		                    </a>
		                </router-link>
	                </li>
	            </ul>
	        </li>
	        <li>
	            <a href="javascript:;" class="side-menu"  @click="toggle('menu-config')">
	                <div class="side-menu__icon">
	                	<Icon name="Settings2" />
	                </div>
	                <div class="side-menu__title">Configuraciones <div class="side-menu__sub-icon">
	                        <Icon name="ChevronDown" />
	                    </div>
	                </div>
	            </a>
	            <ul id="menu-config" class="v-leave-active v-leave-to">
	                <li>
	                    <router-link :to="{ name: 'settings-company'}" v-slot="{ href, navigate, isActive }">
	                		<a :href="href" @click="navigate" class="side-menu" :class="[ isActive ? 'side-menu--active': '']">
		                        <div class="side-menu__icon">
		                        	<Icon name="Settings" />
		                        </div>
		                        <div class="side-menu__title">Datos de la Empresa</div>
		                    </a>
		                </router-link>
	                </li>
	                <li>
	                    <router-link :to="{ name: 'settings-bank-accounts'}" v-slot="{ href, navigate, isActive }">
	                		<a :href="href" @click="navigate" class="side-menu" :class="[ isActive ? 'side-menu--active': '']">
		                        <div class="side-menu__icon">
		                            <Icon name="Landmark" />
		                        </div>
		                        <div class="side-menu__title">Cuentas Bancarias</div>
		                    </a>
		                </router-link>
	                </li>
	                <li>
	                    <router-link :to="{ name: 'settings-vehicle-types'}" v-slot="{ href, navigate, isActive }">
	                		<a :href="href" @click="navigate" class="side-menu" :class="[ isActive ? 'side-menu--active': '']">
		                        <div class="side-menu__icon">
		                        	<Icon name="Bus" />
		                        </div>
		                        <div class="side-menu__title">Tipos de Vehículos</div>
		                    </a>
		                </router-link>
	                </li>
	                <li>
	                    <router-link :to="{ name: 'settings-fares'}" v-slot="{ href, navigate, isActive }">
	                		<a :href="href" @click="navigate" class="side-menu" :class="[ isActive ? 'side-menu--active': '']">
		                        <div class="side-menu__icon">
		                        	<Icon name="FlagTriangleRight" />
		                        </div>
		                        <div class="side-menu__title">Tarifas</div>
		                    </a>
		                </router-link>
	                </li>
	            </ul>
	        </li>
	        <li class="side-nav__devider my-4"></li>
	        <li>
	            <router-link :to="{ name: 'login'}" v-slot="{ href, navigate, isActive }">
	            	<a :href="href" @click="navigate" class="side-menu" :class="[ isActive ? 'side-menu--active': '']">
		                <div class="side-menu__icon">
		                	<Icon name="LogOut" />
		                </div>
		                <div class="side-menu__title">Salir</div>
		            </a>
		        </router-link>
	        </li>
	    </ul>
	</nav>
</template>

<script>
	import Icon from '@/components/utils/icon.vue'

	export default{
		components: {
			Icon
		},
		// data(){
		// 	return {
		// 		menus: [
		// 			{
		// 				type: 'menu'
		// 				route: 'dashboard',
		// 				name: 'Escritorio',
		// 				icon: 'Home',
		// 				submenuName: null,
		// 				submenuItems: []
		// 			},
		// 			{
		// 				type: 'menu'
		// 				route: 'dashboard',
		// 				name: 'Escritorio',
		// 				icon: 'Home',
		// 				submenuName: null,
		// 				submenuItems: []
		// 			},
		// 		]
		// 	}
		// }
		methods: {
			show(module) {
				let element = document.getElementById(module);
				if (element) {
					element.classList.add("show")
				}
			},
			hide(module) {
				let element = document.getElementById(module);
				if (element) {
					element.classList.remove("show")
				}
			},
			toggle(module) {
				let element = document.getElementById(module);
				console.log(module)
				if (element) {
					element.classList.toggle("show")
				}
			},
		}
	}
</script>

<style>
	.show{
		display: block !important;
	}

	.side-menu--active {
		--tw-bg-opacity: 1;
		background-color: rgb(var(--color-slate-100) / var(--tw-bg-opacity));
	}

	.side-menu--active::after {
		content: "";
		width: 20px;
		height: 80px;
		margin-right: -47px;
		-webkit-animation: .3s active-side-menu-chevron-animation ease-in-out .33333s;
		animation: .3s active-side-menu-chevron-animation ease-in-out .33333s;
		-webkit-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
		-webkit-animation-delay: 1s;
		animation-delay: 1s;
		background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='80' viewBox='0 0 20 122.1'%3E%3Cpath data-name='Union 1' d='M16.038 122H16v-2.213a95.805 95.805 0 00-2.886-20.735 94.894 94.894 0 00-7.783-20.434A39.039 39.039 0 010 61.051a39.035 39.035 0 015.331-17.567 94.9 94.9 0 007.783-20.435A95.746 95.746 0 0016 2.314V0h4v122h-3.961v.1l-.001-.1z' fill='%23f1f5f8'/%3E%3C/svg%3E");
		position: absolute;
		top: 0px;
		bottom: 0px;
		right: 0px;
		margin-top: auto;
		margin-bottom: auto;
		background-size: cover;
		background-repeat: no-repeat;
		opacity: 0;
	}

	.side-menu--active .side-menu__title {
		font-weight: 800;
		--tw-text-opacity: 1;
		color: rgb(var(--color-slate-700) / var(--tw-text-opacity));
	}

</style>