<!DOCTYPE html>
<html lang="en" data-theme="corporate">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>CMOD</title>
	<link href="<?= base_url('css/daisyui.min.css'); ?>" rel="stylesheet" type="text/css" />
	<script src="<?= base_url('css/tailwind.min.js'); ?>"></script>
	<script src="<?= base_url('js/alpine-focus.min.js'); ?>"></script>
	<link href="<?= base_url('css/themes.min.css'); ?>" rel="stylesheet" type="text/css" />
	<script src="<?= base_url('js/fontawesome.min.js'); ?>"></script>
	<style>
		body {
			margin: 0;
			font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
			font-size: 0.71rem;
		}

		.navbar {
			padding: 0.2rem 1rem;
			min-height: 0rem;
		}

		.card-body {
			font-size: 0.71rem !important;
		}

		/* Status Button Colors - Matching Row Backgrounds */
		.btn-status-pend, .badge-status-pend { background-color: #ffffff; color: black; border: 1px solid #d1d5db; }
		.btn-status-coll, .badge-status-coll { background-color: #d63031; color: white; }
		.btn-status-recv, .badge-status-recv { background-color: #0984e3; color: white; }
		.btn-status-inc, .badge-status-inc { background-color: #ffff00; color: black; }
		.btn-status-fin, .badge-status-fin { background-color: #008000; color: white; }
	</style>
</head>

<body class="bg-base-200 h-screen overflow-hidden" x-data="main">
	<div class="flex flex-col h-screen">
		<!-- Navbar -->
		<nav class="navbar bg-base-100 shadow-md px-6 z-20">
			<div class='flex-1'>
				<a class='text-xl text-primary font-bold tracking-wide flex items-center gap-2 ml-2'>
					<i class="fa fa-cube"></i> CMOD <span class="text-base-content/40 font-light text-sm hidden sm:inline-block">|
						<?= esc($roleConfig['title'] ?? 'Dashboard') ?></span>
				</a>
			</div>
			<div class="flex gap-2">
				<div class="text-right hidden sm:block leading-tight">
					<div class="text-sm font-bold opacity-70">Hi, <?= session('userid'); ?></div>
					<div class="text-xs opacity-50"><?= session()->get('userrole') ?></div>
				</div>
				<div class="dropdown dropdown-end">
					<div tabindex="0" role="button" class="btn btn-ghost avatar placeholder px-2">
						<span class="text-xl"><i class="fa fa-bars"></i></span>
					</div>
					<ul tabindex="0"
						class="dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow-lg border border-base-300">
						<li><a href="<?= base_url('logout') ?>" class="text-error hover:bg-error/10"><i
									class="fa fa-sign-out-alt mr-2"></i> Logout</a></li>
						<li><a @click.prevent="openDialogSetPassword()"><i class="fa fa-key mr-2"></i> Change Password</a></li>
						<div class="divider my-1"></div>
						<?php foreach ($roleConfig['menuItems'] ?? [] as $item): ?>
							<li>
								<a href="<?= str_starts_with($item['href'], 'http') ? $item['href'] : base_url($item['href']) ?>">
									<i class="fa fa-<?= $item['icon'] ?> mr-2"></i><?= $item['label'] ?>
								</a>
							</li>
						<?php endforeach; ?>
					</ul>
				</div>
			</div>
		</nav>

		<!-- Page Content -->
		<div class="flex-1 overflow-y-auto">
			<?= $this->renderSection('content'); ?>
		</div>
		<?= $this->include('shared/dialog_setPassword'); ?>

		<footer class='bg-base-100 p-1 mt-auto'>&copy; <?= date('Y'); ?> - 5Panda</footer>
	</div>

	<script>
		window.BASEURL = "<?= base_url(); ?>";
	</script>
	<?= $this->renderSection('script'); ?>
</body>

</html>