{{-- resources/views/project/partials/project-sidebar.blade.php --}}
@php
	$activeMenu = $activeMenu ?? 'detail';
	$projectId = $projectId ?? ($project->project_id ?? null);

	/*
	 * Only Project Detail URL is confirmed from the current view.
	 * Set the other URLs from each page/controller once their real routes are known.
	 */
	$projectMenuUrls = array_merge([
		'detail' => $projectId ? url('/projectview/'.$projectId) : null,
		'workflow' => $projectId ? url('/projectflow/'.$projectId) : null,
		'documents' => null,
		'installment' => null
	], $projectMenuUrls ?? []);

	$projectMenuItems = [
		['key' => 'detail', 'label' => 'Project Detail', 'icon' => 'uil-file-info-alt'],
		['key' => 'workflow', 'label' => 'Work Flow', 'icon' => 'uil-sitemap'],
		['key' => 'documents', 'label' => 'Documents', 'icon' => 'uil-file-alt'],
		['key' => 'installment', 'label' => 'Installment', 'icon' => 'uil-wallet']
	];
@endphp

<style>
	.project-module-sidebar{
		background:#fff;
		border:1px solid #e9e4f6;
		border-radius:20px;
		box-shadow:0 12px 38px rgba(42,33,91,.055);
		overflow:hidden;
	}
	.project-module-sidebar-head{
		padding:22px 18px 17px;
		background:linear-gradient(135deg,#f7f1ff,#f1f7ff);
		border-bottom:1px solid #eae5f5;
	}
	.project-module-sidebar-eyebrow{
		font-size:11px;
		font-weight:800;
		letter-spacing:.11em;
		text-transform:uppercase;
		color:#7b65bb;
	}
	.project-module-sidebar-title{
		margin:7px 0 0;
		font-size:18px;
		font-weight:800;
		color:#30294d;
	}
	.project-module-sidebar-subtitle{
		margin:5px 0 0;
		font-size:12px;
		line-height:1.5;
		color:#777e92;
	}
	.project-module-sidebar-nav{
		display:flex;
		flex-direction:column;
		gap:6px;
		padding:13px;
	}
	.project-module-sidebar-link{
		position:relative;
		display:flex;
		align-items:center;
		gap:12px;
		min-height:49px;
		padding:11px 13px;
		border-radius:12px;
		color:#596177;
		font-size:14px;
		font-weight:700;
		text-decoration:none;
		transition:background .2s ease,color .2s ease;
		white-space:nowrap;
	}
	.project-module-sidebar-link i{
		font-size:20px;
		line-height:1;
		color:#8574b7 !important;
	}
	.project-module-sidebar-link:not(.is-disabled):hover{
		background:#f6f3ff;
		color:#6635bc;
	}
	.project-module-sidebar-link.is-active{
		background:linear-gradient(110deg,#f0e8ff,#eef4ff);
		color:#6335c1;
		font-weight:800;
	}
	.project-module-sidebar-link.is-active:before{
		content:'';
		position:absolute;
		left:0;
		top:10px;
		bottom:10px;
		width:3px;
		border-radius:4px;
		background:linear-gradient(180deg,#7c3aed,#3b82f6);
	}
	.project-module-sidebar-link.is-active i{
		color:#6d38d0 !important;
	}
	.project-module-sidebar-link.is-disabled{
		opacity:.48;
		cursor:not-allowed;
	}
	.project-module-sidebar-link:focus-visible{
		outline:2px solid #7955e5;
		outline-offset:2px;
	}
	@media(max-width:991.98px){
		.project-module-sidebar-head{
			display:none;
		}
		.project-module-sidebar{
			border-radius:15px;
		}
		.project-module-sidebar-nav{
			flex-direction:row;
			gap:6px;
			overflow-x:auto;
			overscroll-behavior-x:contain;
			scrollbar-width:thin;
			padding:9px;
		}
		.project-module-sidebar-link{
			flex:0 0 auto;
			min-height:43px;
			padding:9px 13px;
		}
		.project-module-sidebar-link.is-active:before{
			top:auto;
			bottom:0;
			left:12px;
			right:12px;
			width:auto;
			height:3px;
		}
	}
</style>

<nav class="project-module-sidebar" aria-label="Project navigation">
	<div class="project-module-sidebar-head">
		<div class="project-module-sidebar-eyebrow">Research Management</div>
		<h2 class="project-module-sidebar-title">Project Menu</h2>
		<p class="project-module-sidebar-subtitle">Manage project information and activities.</p>
	</div>
	<div class="project-module-sidebar-nav">
		@foreach($projectMenuItems as $menuItem)
			@php
				$isActive = $activeMenu === $menuItem['key'];
				$menuUrl = $projectMenuUrls[$menuItem['key']] ?? null;
			@endphp
			@if($menuUrl)
				<a href="{{ $menuUrl }}" class="project-module-sidebar-link {{ $isActive ? 'is-active' : '' }}" {{ $isActive ? 'aria-current=page' : '' }}>
					<i class="uil {{ $menuItem['icon'] }}" aria-hidden="true"></i>
					<span>{{ $menuItem['label'] }}</span>
				</a>
			@else
				<span class="project-module-sidebar-link is-disabled {{ $isActive ? 'is-active' : '' }}" aria-disabled="true" title="Page route not configured yet">
					<i class="uil {{ $menuItem['icon'] }}" aria-hidden="true"></i>
					<span>{{ $menuItem['label'] }}</span>
				</span>
			@endif
		@endforeach
	</div>
</nav>