<template>
	<div class="top-bar-boxed h-[70px] md:h-[65px] z-[51] border-b border-white/[0.08] -mt-7 md:mt-0 -mx-3 sm:-mx-8 md:-mx-0 px-3 md:border-b-0 relative md:fixed md:inset-x-0 md:top-0 sm:px-8 md:px-10 md:pt-10 md:bg-gradient-to-b md:from-slate-100 md:to-transparent dark:md:from-darkmode-700">
    <div class="h-full flex items-center">
        <!-- BEGIN: Logo -->
        <a href="" class="logo -intro-x hidden md:flex xl:w-[180px] block">
            <img alt="Midone - HTML Admin Template" class="logo__image w-6" src="@/assets/logo.svg">
            <span class="logo__text text-white text-lg ml-3">
                SIGEP
            </span>
        </a>
        <!-- END: Logo -->
        <!-- BEGIN: Breadcrumb -->
        <nav aria-label="breadcrumb" class="-intro-x h-[45px] mr-auto">
            <ol class="breadcrumb breadcrumb-light">
                <li class="breadcrumb-item"><a href="#">Aplicación</a></li>
                <li v-for="(item, index) in applicationPath"
                	:key="item + '-' + index"
                	class="breadcrumb-item capitalize"
                	:class="(index == applicationPath.length - 1) ? 'active' : ''"
                	aria-current="page">
                	{{ item }}
                </li>
            </ol>
        </nav>
        <!-- END: Breadcrumb -->
        <!-- BEGIN: Search -->
        <div class="intro-x relative mr-3 sm:mr-6">
		    <div class="search hidden sm:block">
		        <input type="text"
		        	class="search__input form-control border-transparent"
		        	placeholder="Buscar..."
		        	>
		        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide search__icon dark:text-slate-500">
		            <circle cx="11" cy="11" r="8"></circle>
		            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
		        </svg>
		    </div>
		    <a class="notification notification--light sm:hidden" href="">
		        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide notification__icon dark:text-slate-500">
		            <circle cx="11" cy="11" r="8"></circle>
		            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
		        </svg>
		    </a>
		    <div id="search-result" class="search-result">
		        <div class="search-result__content">
		            <div class="search-result__content__title">Pages</div>
		            <div class="mb-5">
		                <a href="" class="flex items-center">
		                    <div class="w-8 h-8 bg-success/20 dark:bg-success/10 text-success flex items-center justify-center rounded-full">
		                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide w-4 h-4">
		                            <polyline points="22 12 16 12 14 15 10 15 8 12 2 12"></polyline>
		                            <path d="M5.45 5.11L2 12v6a2 2 0 002 2h16a2 2 0 002-2v-6l-3.45-6.89A2 2 0 0016.76 4H7.24a2 2 0 00-1.79 1.11z"></path>
		                        </svg>
		                    </div>
		                    <div class="ml-3">Mail Settings</div>
		                </a>
		                <a href="" class="flex items-center mt-2">
		                    <div class="w-8 h-8 bg-pending/10 text-pending flex items-center justify-center rounded-full">
		                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide w-4 h-4">
		                            <path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"></path>
		                            <circle cx="9" cy="7" r="4"></circle>
		                            <path d="M23 21v-2a4 4 0 00-3-3.87"></path>
		                            <path d="M16 3.13a4 4 0 010 7.75"></path>
		                        </svg>
		                    </div>
		                    <div class="ml-3">Users &amp; Permissions</div>
		                </a>
		                <a href="" class="flex items-center mt-2">
		                    <div class="w-8 h-8 bg-primary/10 dark:bg-primary/20 text-primary/80 flex items-center justify-center rounded-full">
		                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide w-4 h-4">
		                            <rect x="1" y="4" width="22" height="16" rx="2" ry="2"></rect>
		                            <line x1="1" y1="10" x2="23" y2="10"></line>
		                        </svg>
		                    </div>
		                    <div class="ml-3">Transactions Report</div>
		                </a>
		            </div>
		            <div class="search-result__content__title">Users</div>
		            <div class="mb-5">
		                <a href="" class="flex items-center mt-2">
		                    <div class="w-8 h-8 image-fit">
		                        <img alt="Enigma Tailwind HTML Admin Template" class="rounded-full" src="/assets/profile-13.d2befb57.jpg">
		                    </div>
		                    <div class="ml-3">Charlize Theron</div>
		                    <div class="ml-auto w-48 truncate text-slate-500 text-xs text-right">charlizetheron@left4code.com</div>
		                </a>
		                <a href="" class="flex items-center mt-2">
		                    <div class="w-8 h-8 image-fit">
		                        <img alt="Enigma Tailwind HTML Admin Template" class="rounded-full" src="/assets/profile-2.21f19505.jpg">
		                    </div>
		                    <div class="ml-3">Denzel Washington</div>
		                    <div class="ml-auto w-48 truncate text-slate-500 text-xs text-right">denzelwashington@left4code.com</div>
		                </a>
		                <a href="" class="flex items-center mt-2">
		                    <div class="w-8 h-8 image-fit">
		                        <img alt="Enigma Tailwind HTML Admin Template" class="rounded-full" src="/assets/profile-9.30af9082.jpg">
		                    </div>
		                    <div class="ml-3">Vin Diesel</div>
		                    <div class="ml-auto w-48 truncate text-slate-500 text-xs text-right">vindiesel@left4code.com</div>
		                </a>
		                <a href="" class="flex items-center mt-2">
		                    <div class="w-8 h-8 image-fit">
		                        <img alt="Enigma Tailwind HTML Admin Template" class="rounded-full" src="/assets/profile-5.46711484.jpg">
		                    </div>
		                    <div class="ml-3">Robert De Niro</div>
		                    <div class="ml-auto w-48 truncate text-slate-500 text-xs text-right">robertdeniro@left4code.com</div>
		                </a>
		            </div>
		            <div class="search-result__content__title">Products</div>
		            <a href="" class="flex items-center mt-2">
		                <div class="w-8 h-8 image-fit">
		                    <img alt="Enigma Tailwind HTML Admin Template" class="rounded-full" src="/assets/preview-7.5fc23e2a.jpg">
		                </div>
		                <div class="ml-3">Samsung Galaxy S20 Ultra</div>
		                <div class="ml-auto w-48 truncate text-slate-500 text-xs text-right">Smartphone &amp; Tablet</div>
		            </a>
		            <a href="" class="flex items-center mt-2">
		                <div class="w-8 h-8 image-fit">
		                    <img alt="Enigma Tailwind HTML Admin Template" class="rounded-full" src="/assets/preview-6.e998bc28.jpg">
		                </div>
		                <div class="ml-3">Apple MacBook Pro 13</div>
		                <div class="ml-auto w-48 truncate text-slate-500 text-xs text-right">PC &amp; Laptop</div>
		            </a>
		            <a href="" class="flex items-center mt-2">
		                <div class="w-8 h-8 image-fit">
		                    <img alt="Enigma Tailwind HTML Admin Template" class="rounded-full" src="/assets/preview-15.ea941116.jpg">
		                </div>
		                <div class="ml-3">Dell XPS 13</div>
		                <div class="ml-auto w-48 truncate text-slate-500 text-xs text-right">PC &amp; Laptop</div>
		            </a>
		            <a href="" class="flex items-center mt-2">
		                <div class="w-8 h-8 image-fit">
		                    <img alt="Enigma Tailwind HTML Admin Template" class="rounded-full" src="/assets/preview-15.ea941116.jpg">
		                </div>
		                <div class="ml-3">Sony Master Series A9G</div>
		                <div class="ml-auto w-48 truncate text-slate-500 text-xs text-right">Electronic</div>
		            </a>
		        </div>
		    </div>
		</div>
        <!-- END: Search -->
        <!-- BEGIN: Notifications -->
        <div class="intro-x dropdown mr-4 sm:mr-6" >
            <div
            	class="dropdown-toggle notification notification--bullet cursor-pointer"
            	role="button"
            	aria-expanded="false"
            	data-tw-toggle="dropdown"
            	@click="toggle('notifications')">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                	<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
                	<path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
                </svg>
            </div>
        </div>
        <!-- END: Notifications -->
        <!-- BEGIN: Account Menu -->
        <div class="intro-x dropdown w-8 h-8">
            <div class="dropdown-toggle w-8 h-8 rounded-full overflow-hidden shadow-lg image-fit zoom-in scale-110" role="button" aria-expanded="false" data-tw-toggle="dropdown">
                <img alt="Midone - HTML Admin Template" src="@/assets/logo.svg" @click="toggle('dropdown-menu')">
            </div>
        </div>
        <!-- END: Account Menu -->
    </div>

    <div class="dropdown-menu notification-content pt-2" id="notifications" style="width: 350px; position: absolute; inset: 0px 0px auto auto; margin: 0px; transform: translate(-96px, 63px);" data-popper-placement="bottom-end">
	    <div class="dropdown-content notification-content__box">
	        <div class="notification-content__title">Notificaciones</div>
	        <div class="cursor-pointer relative flex items-center">
	            <div class="ml-2 overflow-hidden">
	                <div class="flex items-center">
	                    <a href="javascript:;" class="font-medium truncate mr-5">Sin Notificaciones</a>
	                </div>
	                <div class="w-full truncate text-slate-500 mt-0.5">Nada nuevo que mostrar</div>
	            </div>
	    	</div>
	    </div>
	</div>

	<div class="dropdown-menu w-56" style="width: 224px; position: absolute; inset: 0px 0px auto auto; margin: 0px; transform: translate(-39px, 69px);" id="dropdown-menu" data-popper-placement="bottom-end">
    <ul class="dropdown-content bg-primary/80 before:block before:absolute before:bg-black before:inset-0 before:rounded-md before:z-[-1] text-white">
        <li>
            <div class="dropdown-header !font-normal">
                <div class="font-medium">Edgar Rojas</div>
                <div class="text-xs text-white/60 mt-0.5 dark:text-slate-500">Desarrollador</div>
            </div>
        </li>
        <li>
            <hr class="dropdown-divider border-white/[0.08]">
        </li>
        <li>
            <a class="dropdown-item cursor-pointer dropdown-item hover:bg-white/5">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide w-4 h-4 mr-2">
                    <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"></path>
                    <circle cx="12" cy="7" r="4"></circle>
                </svg> Perfil </a>
        </li>
        <li>
            <a class="dropdown-item cursor-pointer dropdown-item hover:bg-white/5">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide w-4 h-4 mr-2">
                    <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
                    <path d="M7 11V7a5 5 0 0110 0v4"></path>
                </svg> Resetar Contraseña </a>
        </li>
        <li>
            <a class="dropdown-item cursor-pointer dropdown-item hover:bg-white/5">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide w-4 h-4 mr-2">
                    <circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg> Ayuda </a>
        </li>
        <li>
            <hr class="dropdown-divider border-white/[0.08]">
        </li>
        <li>
        	<router-link :to="{ name: 'login'}" v-slot="{ href, navigate, isActive }">
            	<a :href="href" @click="navigate" class="dropdown-item cursor-pointer dropdown-item hover:bg-white/5">
	                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide w-4 h-4 mr-2">
	                    <rect x="1" y="5" width="22" height="14" rx="7" ry="7"></rect>
	                    <circle cx="16" cy="12" r="3"></circle>
	                </svg> Salir
	            </a>
	        </router-link>
        </li>
    </ul>
</div>
</div>
</template>

<script>
	export default{
		methods: {
			onClickOutside () {
				console.log($this.$route.fullpath)
      		},
			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);
				if (element) {
					element.classList.toggle("show")
				}
			},
		},
		computed: {
			applicationPath() {
				const vm = this
				let path = vm.$route.fullPath
				let arrayPath = path.split('/')
				arrayPath.shift()
				return arrayPath
			}
		}
	}
</script>