<!DOCTYPE html>
<html lang="id">

<head>
	<meta charset="utf-8">
	<title><?= $title ?? 'RS Poltekkes Kemenkes Semarang'; ?></title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="<?= base_url('assets/adminlte/plugins/fontawesome-free/css/all.min.css'); ?>">
	<link rel="stylesheet" href="<?= base_url('assets/adminlte/dist/css/adminlte.min.css'); ?>">
	<!-- Google Font -->
	<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">

	<style>
		/* === VARIABEL WARNA BIRU YANG LEBIH MODERN === */
		:root {
			--blue-900: #0d2b5c;
			--blue-800: #1a3d7c;
			--blue-700: #2a54a8;
			--blue-600: #3a6fd6;
			--blue-500: #4a8aff;
			--blue-400: #6ba1ff;
			--blue-300: #8cb8ff;
			--txt-dim: #e8f0ff;
			--txt-bright: #ffffff;
			--accent-color: #00d4aa;
		}

		/* === FONT & GLOBAL === */
		body {
			font-family: 'Poppins', sans-serif;
		}

		/* === SIDEBAR MODERN === */
		.main-sidebar.theme-blue {
			background: linear-gradient(180deg, var(--blue-900) 0%, var(--blue-800) 100%);
			color: var(--txt-bright);
			box-shadow: 4px 0 20px rgba(0, 0, 0, 0.1);
			border-right: none;
		}

		/* BRAND/LOGO AREA */
		.theme-blue .brand-link {
			background: rgba(255, 255, 255, 0.08);
			border-bottom: 1px solid rgba(255, 255, 255, 0.1);
			padding: 1.2rem 1rem;
			transition: all 0.3s ease;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
			min-height: 88px;
		}

		.theme-blue .brand-link:hover {
			background: rgba(255, 255, 255, 0.12);
		}

		.brand-text {
			font-size: 1.3rem;
			font-weight: 700;
			letter-spacing: 0.5px;
			color: var(--txt-bright) !important;
			text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
			display: block;
			max-width: 100%;
			white-space: normal;
			word-break: break-word;
			line-height: 1.35;
		}

		/* NAV HEADER */
		.nav-header {
			color: var(--blue-300);
			font-size: 0.75rem;
			font-weight: 600;
			text-transform: uppercase;
			letter-spacing: 1px;
			margin: 1.5rem 0 0.5rem 1rem;
			padding: 0.5rem 0;
			border-bottom: 1px solid rgba(255, 255, 255, 0.1);
		}

		/* NAV ITEMS - MODERN DESIGN */
		.theme-blue .nav-sidebar .nav-link {
			margin: 6px 12px;
			padding: 0.85rem 1rem;
			border-radius: 12px;
			color: var(--txt-dim);
			transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
			position: relative;
			overflow: hidden;
			font-weight: 500;
			border: 1px solid transparent;
			display: flex;
			align-items: flex-start;
		}

		.theme-blue .nav-sidebar .nav-link p {
			margin: 0;
			flex: 1 1 auto;
			white-space: normal;
			word-break: break-word;
			line-height: 1.35;
		}

		/* ICON STYLING */
		.theme-blue .nav-sidebar .nav-link .nav-icon {
			color: var(--blue-300);
			width: 20px;
			min-width: 20px;
			font-size: 1.1rem;
			transition: all 0.3s ease;
			margin-right: 0.75rem;
			margin-top: 0.1rem;
		}

		/* HOVER EFFECT */
		.theme-blue .nav-sidebar .nav-link:hover {
			background: rgba(255, 255, 255, 0.15);
			color: var(--txt-bright);
			transform: translateX(4px);
			border-color: rgba(255, 255, 255, 0.2);
		}

		.theme-blue .nav-sidebar .nav-link:hover .nav-icon {
			color: var(--accent-color);
			transform: scale(1.1);
		}

		/* ACTIVE STATE - MODERN */
		.theme-blue .nav-sidebar .nav-link.active {
			background: linear-gradient(135deg, var(--blue-500), var(--accent-color));
			color: var(--txt-bright);
			font-weight: 600;
			box-shadow: 0 8px 25px rgba(74, 138, 255, 0.3);
			border: 1px solid rgba(255, 255, 255, 0.3);
			transform: translateX(4px);
		}

		.theme-blue .nav-sidebar .nav-link.active .nav-icon {
			color: var(--txt-bright);
			transform: scale(1.1);
		}

		/* ACTIVE INDICATOR */
		.theme-blue .nav-sidebar .nav-link.active::before {
			content: '';
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			width: 4px;
			height: 60%;
			background: var(--txt-bright);
			border-radius: 0 4px 4px 0;
		}

		/* SUBMENU STYLING - PERBAIKAN UTAMA */
		.theme-blue .nav-treeview {
			background: rgba(0, 0, 0, 0.2);
			border-radius: 0 0 12px 12px;
			margin: 0 12px 8px 12px;
			padding: 8px 0;
			border: 1px solid rgba(255, 255, 255, 0.05);
			display: none;
			/* Default hidden */
		}

		/* SUBMENU VISIBLE WHEN PARENT HAS menu-open */
		.theme-blue .nav-item.menu-open .nav-treeview {
			display: block !important;
		}

		.theme-blue .nav-treeview .nav-link {
			margin: 4px 8px 4px 24px;
			padding: 0.7rem 1rem;
			border-radius: 10px;
			font-size: 0.9rem;
			border: 1px solid transparent;
			position: relative;
		}

		.theme-blue .nav-treeview .nav-link::before {
			content: '';
			position: absolute;
			left: 0.8rem;
			top: 50%;
			transform: translateY(-50%);
			width: 6px;
			height: 6px;
			background: var(--blue-300);
			border-radius: 50%;
			transition: all 0.3s ease;
		}

		.theme-blue .nav-treeview .nav-link:hover::before {
			background: var(--accent-color);
			transform: translateY(-50%) scale(1.3);
		}

		.theme-blue .nav-treeview .nav-link.active {
			background: rgba(255, 255, 255, 0.12);
			color: var(--txt-bright);
			border-color: rgba(255, 255, 255, 0.1);
		}

		.theme-blue .nav-treeview .nav-link.active::before {
			background: var(--accent-color);
			transform: translateY(-50%) scale(1.5);
		}

		/* TREEVIEW ARROW ANIMATION */
		.theme-blue .nav-item>.nav-link>.right {
			transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
			font-size: 0.9rem;
			margin-top: 0.2rem;
		}

		.theme-blue .nav-item.menu-open>.nav-link>.right {
			transform: rotate(-90deg);
		}

		/* PARENT MENU WHEN OPEN */
		.theme-blue .menu-open>.nav-link {
			background: rgba(255, 255, 255, 0.1) !important;
			color: var(--txt-bright) !important;
			border-color: rgba(255, 255, 255, 0.15);
		}

		.theme-blue .menu-open>.nav-link .nav-icon {
			color: var(--accent-color);
		}

		/* LEVEL-1 ACTIVE (NO SUBMENU) */
		.theme-blue .nav-sidebar>.nav-item:not(.has-treeview)>.nav-link.active {
			background: linear-gradient(135deg, var(--blue-500), var(--accent-color));
			color: var(--txt-bright);
		}

		/* BADGE/DOT STYLING */
		.badge-dot {
			background: var(--accent-color);
			color: var(--blue-900);
			font-weight: 700;
			padding: 0.25rem 0.5rem;
			font-size: 0.7rem;
			border-radius: 20px;
			box-shadow: 0 2px 8px rgba(0, 212, 170, 0.3);
		}

		/* NAVBAR ENHANCEMENT */
		.main-header.navbar {
			background: linear-gradient(90deg, var(--blue-700), var(--blue-800));
			border-bottom: 1px solid rgba(255, 255, 255, 0.1);
			box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
		}

		.btn-navbar {
			background: rgba(255, 255, 255, 0.1);
			border: 1px solid rgba(255, 255, 255, 0.2);
			color: var(--txt-dim);
			transition: all 0.3s ease;
		}

		.btn-navbar:hover {
			background: rgba(255, 255, 255, 0.2);
			color: var(--txt-bright);
		}

		/* CONTENT AREA */
		.content-wrapper {
			background: #f8fafc;
		}

		.content-header {
			margin-bottom: 1rem;
		}

		.content-header.d-flex {
			flex-wrap: wrap;
			gap: 0.75rem;
		}

		.content-header h4 {
			margin: 0;
			line-height: 1.35;
		}

		.content-header .btn-group {
			display: flex;
			flex-wrap: wrap;
			gap: 0.5rem;
		}

		.content-header .btn-group>.btn {
			border-radius: 0.25rem !important;
		}

		/* RESPONSIVE IMPROVEMENTS */
		@media (max-width: 768px) {
			.main-sidebar {
				box-shadow: 4px 0 30px rgba(0, 0, 0, 0.3);
			}

			.theme-blue .nav-sidebar .nav-link {
				margin: 4px 8px;
				padding: 0.75rem 0.9rem;
			}

			.brand-text {
				font-size: 1rem;
			}

			.content-header.d-flex {
				align-items: flex-start !important;
			}

			.content-header .btn-group {
				width: 100%;
			}

			.content-header .btn-group>.btn {
				flex: 1 1 calc(50% - 0.5rem);
			}
		}

		/* SMOOTH TRANSITIONS */
		.main-sidebar,
		.nav-link,
		.nav-icon,
		.right {
			transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
		}

		/* SCROLLBAR STYLING */
		.sidebar::-webkit-scrollbar {
			width: 6px;
		}

		.sidebar::-webkit-scrollbar-track {
			background: rgba(255, 255, 255, 0.1);
		}

		.sidebar::-webkit-scrollbar-thumb {
			background: var(--blue-400);
			border-radius: 3px;
		}

		.sidebar::-webkit-scrollbar-thumb:hover {
			background: var(--accent-color);
		}

		.penanggung-jawab-item {
			border: 1px solid #dee2e6;
			border-radius: 6px;
			transition: all 0.2s ease;
		}

		.penanggung-jawab-item:hover {
			border-color: var(--blue-500);
			background-color: #f8f9fa;
		}

		.card-body {
			padding: 0.75rem;
		}

		.card-title {
			font-size: 0.9rem;
			font-weight: 600;
		}

		.card-text {
			font-size: 0.8rem;
		}
	</style>

</head>

<body class="hold-transition sidebar-mini layout-fixed">
	<div class="wrapper">

		<!-- Navbar -->
		<nav class="main-header navbar navbar-expand navbar-white navbar-light">
			<!-- Toggle Sidebar Button -->
			<ul class="navbar-nav">
				<li class="nav-item">
					<a class="nav-link" data-widget="pushmenu" href="#" role="button">
						<i class="fas fa-bars"></i>
					</a>
				</li>
			</ul>

			<ul class="navbar-nav ml-auto align-items-center">
				<li class="nav-item mr-2 d-none d-md-block">
					<div class="d-flex align-items-center">
						<span class="mr-2 small text-white">Penanggung Jawab:</span>
						<select class="form-control form-control-sm" id="selectPenanggungJawab" style="width: 200px;" onchange="pilihPenanggungJawabSelect(this)">
							<option value="">Pilih Penanggung Jawab</option>
						</select>
					</div>
				</li>
				<li class="nav-item ml-2">
					<a href="<?= site_url('auth/logout'); ?>" class="btn btn-danger btn-sm">
						<i class="fas fa-sign-out-alt mr-1"></i>Logout
					</a>
				</li>
			</ul>
		</nav>

		<!-- Sidebar -->
		<?php $this->load->view('layouts/sidebar'); ?>

		<!-- Konten dinamis -->
		<div class="content-wrapper p-3">
			<?= $content_for_layout ?? '' ?>
		</div>


		<!-- Footer -->
		<footer class="main-footer text-center">
			<strong>&copy; <?= date('Y') ?> RS Poltekkes Kemenkes Semarang.</strong> All rights reserved.
		</footer>
	</div>

	<script src="<?= base_url('assets/adminlte/plugins/jquery/jquery.min.js'); ?>"></script>
	<script src="<?= base_url('assets/adminlte/plugins/bootstrap/js/bootstrap.bundle.min.js'); ?>"></script>
	<script src="<?= base_url('assets/adminlte/dist/js/adminlte.min.js'); ?>"></script>
	<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

	<script>
		// function loadSelectPenanggungJawab() {
		// 	$.getJSON('<?= site_url("petugas/get_penanggung_jawab") ?>', function(response) {
		// 		if (response.success) {
		// 			let html = '<option value="">Pilih Penanggung Jawab</option>';
		// 			response.data.forEach(p => {
		// 				html += `<option value="${p.petugas_id}">${p.nama_lengkap} - ${p.nip}</option>`;
		// 			});
		// 			$('#selectPenanggungJawab').html(html);
		// 		}
		// 	});
		// }

		// function pilihPenanggungJawabSelect(select) {
		// 	if (select.value) {
		// 		const selectedOption = select.options[select.selectedIndex];
		// 		const nama = selectedOption.text.split(' - ')[0];

		// 		$.post('<?= site_url("petugas/set_session_penanggung_jawab") ?>', {
		// 			petugas_id: select.value,
		// 			nama: nama
		// 		}, function(response) {
		// 			if (response.success) {
		// 				select.classList.remove('border-primary');
		// 				select.classList.add('border-success');
		// 			}
		// 		}, 'json');
		// 	}
		// }
		function loadSelectPenanggungJawab() {
			$.getJSON('<?= site_url("petugas/get_penanggung_jawab") ?>', function(response) {
				if (response.success) {
					let html = '<option value="">Pilih Penanggung Jawab</option>';
					response.data.forEach(p => {
						html += `<option value="${p.petugas_id}">${p.nama_lengkap} - ${p.nip}</option>`;
					});
					$('#selectPenanggungJawab').html(html);

					// SETELAH data di-load, baru load status yang sudah dipilih
					setTimeout(loadStatusPenanggungJawab, 100);
				}
			});
		}

		// FUNGSI BARU: Load status penanggung jawab yang sudah dipilih
		function loadStatusPenanggungJawab() {
			console.log('🔄 Loading penanggung jawab status...');

			$.ajax({
				url: '<?= site_url("petugas/get_session_penanggung_jawab"); ?>',
				type: 'GET',
				dataType: 'json',
				success: function(response) {
					console.log('📋 PJ Status Response:', response);

					if (response.success && response.id_petugas_pj) {
						// Set nilai select box ke penanggung jawab yang sudah dipilih
						$('#selectPenanggungJawab').val(response.id_petugas_pj);
						$('#selectPenanggungJawab').removeClass('border-primary').addClass('border-success');

						console.log('✅ Penanggung jawab loaded:', response.nama_petugas_pj);
					} else {
						// Reset ke default
						$('#selectPenanggungJawab').val('');
						$('#selectPenanggungJawab').removeClass('border-success').addClass('border-primary');

						console.log('❌ Tidak ada penanggung jawab yang dipilih');
					}
				},
				error: function(xhr, status, error) {
					console.error('💥 Error loading penanggung jawab:', error);
				}
			});
		}

		// PERBAIKI fungsi pilihPenanggungJawabSelect
		function pilihPenanggungJawabSelect(select) {
			if (select.value) {
				const selectedOption = select.options[select.selectedIndex];
				const nama = selectedOption.text.split(' - ')[0];

				$.post('<?= site_url("petugas/set_session_penanggung_jawab") ?>', {
					petugas_id: select.value,
					nama: nama
				}, function(response) {
					if (response.success) {
						// Update styling
						$('#selectPenanggungJawab').removeClass('border-primary').addClass('border-success');

						console.log('✅ Penanggung jawab disimpan:', nama);
					} else {
						console.error('❌ Gagal menyimpan penanggung jawab');
					}
				}, 'json');
			} else {
				// Jika dipilih "Pilih Penanggung Jawab" (kosong)
				$('#selectPenanggungJawab').removeClass('border-success').addClass('border-primary');
			}
		}



		$(document).ready(function() {
			loadSelectPenanggungJawab();
			//  loadSelectPenanggungJawab();
			console.log('🚀 Sidebar initialization started...');

			// Select2 Initialization
			$('.select2').select2({
				theme: 'bootstrap4'
			});




			// Enhanced Theme Toggle
			(function() {
				const key = 'rs_theme';
				const btn = document.getElementById('themeToggle');

				if (localStorage.getItem(key) === 'dark') {
					document.body.classList.add('theme-dark');
				}

				btn && btn.addEventListener('click', () => {
					document.body.classList.toggle('theme-dark');
					const isDark = document.body.classList.contains('theme-dark');
					localStorage.setItem(key, isDark ? 'dark' : 'light');

					// Update button icon
					const icon = btn.querySelector('i');
					icon.className = isDark ? 'fas fa-sun' : 'fas fa-moon';
				});
			})();

			// PERBAIKAN UTAMA: SIMPLE TREEVIEW TOGGLE
			$('.has-treeview > .nav-link').on('click', function(e) {
				e.preventDefault();
				e.stopPropagation();

				const $this = $(this);
				const $parent = $this.parent();
				const $treeview = $this.siblings('.nav-treeview');
				const menuText = $this.find('p').first().text().trim();

				console.log('📂 Menu clicked:', menuText);
				console.log('Parent class before:', $parent.attr('class'));
				console.log('Treeview found:', $treeview.length);

				// Toggle menu open class
				$parent.toggleClass('menu-open');

				console.log('Parent class after:', $parent.attr('class'));
				console.log('Treeview visible:', $treeview.is(':visible'));
				console.log('---');
			});

			// Prevent submenu links from closing the menu
			$('.nav-treeview .nav-link').on('click', function(e) {
				e.stopPropagation(); // Prevent event bubbling to parent
				console.log('🔗 Submenu link clicked:', $(this).find('p').text().trim());
			});

			// Enhanced Auto-Active Menu
			(function() {
				const currentUrl = window.location.href;
				const currentPath = window.location.pathname;

				console.log('📍 Current URL:', currentUrl);
				console.log('📍 Current path:', currentPath);

				// Remove all active classes first
				$('.nav-sidebar .nav-link').removeClass('active');
				$('.nav-item').removeClass('menu-open');

				let foundActive = false;

				// Find and activate current menu
				$('.nav-sidebar a[href]').each(function() {
					const linkHref = $(this).attr('href');

					if (linkHref && linkHref !== '#') {
						try {
							// Create absolute URL for comparison
							const linkUrl = new URL(linkHref, window.location.origin);
							const currentAbsolute = new URL(currentUrl);

							// Check if paths match
							if (linkUrl.pathname === currentAbsolute.pathname) {
								$(this).addClass('active');
								foundActive = true;

								// Open all parent menus
								$(this).parents('.has-treeview').addClass('menu-open');

								console.log('✅ Active menu found:', $(this).find('p').text().trim());
							}
						} catch (e) {
							// Fallback for simple URL matching
							if (currentPath.includes(linkHref)) {
								$(this).addClass('active');
								foundActive = true;
								$(this).parents('.has-treeview').addClass('menu-open');
								console.log('✅ Active menu found (fallback):', $(this).find('p').text().trim());
							}
						}
					}
				});

				// Special case for dashboard
				if (!foundActive && (currentPath === '/' || currentPath.includes('dashboard'))) {
					$('a[href*="dashboard"]').addClass('active');
					console.log('✅ Dashboard set as active');
				}

				console.log('🎯 Auto-active menu completed');
			})();

			// Enhanced Ripple Effect
			(function() {
				$('.theme-blue .nav-link').on('click', function(e) {
					// Only create ripple for parent menu links (not submenu links)
					if ($(this).attr('href') === '#') {
						const $this = $(this);
						const diameter = Math.max($this.width(), $this.height());

						const ripple = $('<span class="ripple-effect"></span>');
						ripple.css({
							width: diameter,
							height: diameter,
							position: 'absolute',
							borderRadius: '50%',
							left: e.offsetX - diameter / 2,
							top: e.offsetY - diameter / 2,
							background: 'rgba(255,255,255,0.3)',
							pointerEvents: 'none',
							transform: 'scale(0)',
							transition: 'transform 0.6s ease, opacity 0.6s ease'
						});

						$this.css('position', 'relative');
						$this.append(ripple);

						requestAnimationFrame(() => {
							ripple.css({
								transform: 'scale(2)',
								opacity: '0'
							});
						});

						setTimeout(() => ripple.remove(), 600);
					}
				});
			})();

			// Debug info
			console.log('🔍 Treeview elements found:', $('.has-treeview').length);
			console.log('🔍 Nav links found:', $('.nav-link').length);

			$('.has-treeview').each(function(index) {
				const menuText = $(this).find('.nav-link p').first().text().trim();
				console.log('📁 Menu item ' + (index + 1) + ':', menuText);
			});

			console.log('✅ Sidebar initialization completed');
		});
	</script>

</body>

</html>
