<!DOCTYPE html>
<html lang="en"> <!--begin::Head-->

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>myLesen | MBIP</title><!--begin::Primary Meta Tags-->

	<meta content='width=device-width, initial-scale=1.0, shrink-to-fit=no' name='viewport' />
	@yield('meta')
	<link rel="icon" href="{{asset('kai/assets/img/kaiadmin/favicon.ico')}}" type="image/x-icon"/>

	<!-- Fonts and icons -->
	<script src="{{asset('kai/assets/js/plugin/webfont/webfont.min.js')}}"></script>
	<script>
		WebFont.load({
			google: {"families":["Public Sans:300,400,500,600,700"]},
			custom: {"families":["Font Awesome 5 Solid", "Font Awesome 5 Regular", "Font Awesome 5 Brands", "simple-line-icons"], urls: ['{{asset('kai/assets/css/fonts.min.css')}}']},
			active: function() {
				sessionStorage.fonts = true;
			}
		});
	</script>
	<script src="https://kit.fontawesome.com/45fd4bd06c.js" crossorigin="anonymous"></script>
	<!-- CSS Files -->
	<link rel="stylesheet" href="{{asset('kai/assets/css/bootstrap.min.css')}}">
	<link rel="stylesheet" href="{{asset('kai/assets/css/plugins.min.css')}}">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pdfjs-dist/legacy/web/pdf_viewer.min.css">
	<link rel="stylesheet" href="{{asset('kai/assets/css/kaiadmin.css')}}">

	@yield('css')
</head>
<body>
	<div class="wrapper">
		<!-- Sidebar -->
		<div class="sidebar" data-background-color="dark">
			<div class="sidebar-logo">
				<!-- Logo Header -->
				<div class="logo-header" data-background-color="dark">
					<a href="/" class="logo">
						<img 
							src="{{asset('img/smartpenjaja.png')}}" 
							alt="navbar brand" 
							class="navbar-brand" 
							height="20" 
						/> 
					</a>
					<div class="nav-toggle">
						<button class="btn btn-toggle toggle-sidebar">
							<i class="gg-menu-right"></i>
						</button>
						<button class="btn btn-toggle sidenav-toggler">
							<i class="gg-menu-left"></i>
						</button>
					</div>
					<button class="topbar-toggler more">
						<i class="gg-more-vertical-alt"></i>
					</button>
				</div>
				<!-- End Logo Header -->
			</div>
			<div class="sidebar-wrapper scrollbar scrollbar-inner">
				<div class="sidebar-content">
					<ul class="nav nav-secondary">
						<li class="nav-section">
						  <span class="sidebar-mini-icon">
							<i class="fa fa-ellipsis-h"></i>
						  </span>
						  <h4 class="text-section">Awam</h4>
						</li>
                        <li class="nav-item"> 
							<a href="{{route('dashboard')}}" class="nav-link"> 
								<i class="fa-solid fa-gauge-simple"></i>
                                <p>Dashboard</p>
                            </a>
                        </li>
                        
    				@if(auth()->user()->hasRole(['pembantu tadbir','pp kesihatan','pp tadbir','pegawai tadbir','pengarah','super']))
                        <hr />
                        <li class="nav-section">
                          <span class="sidebar-mini-icon">
                            <i class="fa fa-ellipsis-h"></i>
                          </span>
                          <h4 class="text-section">ADMIN PENJAJA</h4>
                        </li>
                        <li class="nav-item"> 
                            <a href="{{route('admin.dashboard')}}"> 
								<i class="fa-solid fa-gauge"></i>
                                <p>Dashboard</p>
                            </a>
                        </li>
                        <li class="nav-item"> 
                            <a href="{{route('admin.senarai_all')}}"> 
								<i class="fa-solid fa-users-viewfinder"></i>
                                <p>Carian Penjaja</p>
                            </a>
                        </li>
						<li class="nav-item">
							<a
							data-bs-toggle="collapse"
							href="#pengurusan"
							class="collapsed"
							aria-expanded="false"
							>
							<i class="fa-solid fa-gears"></i>
							<p>Pengurusan</p>
							<span class="caret"></span>
							</a>
							<div class="collapse" id="pengurusan">
								<ul class="nav nav-collapse">
									<li>
										<a href="{{route('admin.lantikan-admin')}}"> 
											<i class="fa-solid fa-user-shield"></i>
											<p>Admin</p>
										</a>
									</li>
									<li> 
										<a href="{{route('carousel.index')}}"> 
											<i class="fa-regular fa-images"></i>
											<p>Gambar</p>
										</a>
									</li>
									<li> 
										<a href="{{route('pengumuman.index')}}"> 
											<i class="fa-regular fa-newspaper"></i>
											<p>Pengumuman</p>
										</a>
									</li>
								</ul>
							</div>
						</li>
					@endif
                    </ul>
                </div>
            </div>
        </div>
            <!-- End Sidebar -->  

		<div class="main-panel">
			<div class="main-header">
				<div class="main-header-logo">
					<!-- Logo Header -->
					<div class="logo-header" data-background-color="dark">
						<a href="../index.html" class="logo">
							<img 
								src="{{asset('img/smartpenjaja.png')}}" 
								alt="navbar brand" 
								class="navbar-brand" 
								height="20" 
							/>
						</a>
						<div class="nav-toggle">
							<button class="btn btn-toggle toggle-sidebar">
								<i class="gg-menu-right"></i>
							</button>
							<button class="btn btn-toggle sidenav-toggler">
								<i class="gg-menu-left"></i>
							</button>
						</div>
						<button class="topbar-toggler more">
							<i class="gg-more-vertical-alt"></i>
						</button>

					</div>
					<!-- End Logo Header -->
				</div>
				<!-- Navbar Header -->
				<nav class="navbar navbar-header navbar-header-transparent navbar-expand-lg border-bottom">

					<div class="container-fluid">
						<nav class="navbar navbar-header-left navbar-expand-lg navbar-form nav-search p-0 d-none d-lg-flex">
								<strong>MAJLIS BANDARAYA ISKANDAR PUTERI</strong>
						</nav>

						<ul class="navbar-nav topbar-nav ms-md-auto align-items-center">
							
							<li class="nav-item topbar-user dropdown hidden-caret">
								<a class="dropdown-toggle profile-pic" data-bs-toggle="dropdown" href="#" aria-expanded="false">
									<div class="avatar-sm">
													@if(!is_null(auth()->user()->avatar_path))
										<img src="{{ route('profil.stream', [auth()->user()->avatar_path]) }}" class="avatar-img rounded-circle">
													@else													
														<img src="{{ asset('img/avatar.png') }}" class="avatar-img rounded">
													@endif
									</div>
									<span class="profile-username">
										<span class="op-7">Hi,</span> <span class="fw-bold">{{auth()->user()->name}}</span>
									</span>
								</a>
								<ul class="dropdown-menu dropdown-user animated fadeIn">
									<div class="dropdown-user-scroll scrollbar-outer">
										<li>
											<div class="user-box">
												<div class="avatar-lg">
													@if(!is_null(auth()->user()->avatar_path))
														<img src="{{ route('profil.stream', [auth()->user()->avatar_path]) }}" class="avatar-img rounded">
													@else													
														<img src="{{ asset('img/avatar.png') }}" class="avatar-img rounded">
													@endif
												</div>
												<div class="u-text">
													<h4>{{auth()->user()->name}}</h4>
													<p class="text-muted">{{auth()->user()->email}}</p><a href="{{route('profile.edit')}}" class="btn btn-xs btn-secondary btn-sm">View Profile</a>
												</div>
											</div>
										</li>
										<li>
											<div class="dropdown-divider"></div>
											<a class="dropdown-item" href="{{route('logout')}}">Logout</a>
										</li>
									</div>
								</ul>
							</li>
						</ul>
					</div>
				</nav>
				<!-- End Navbar -->
			</div>
			
			<div class="container">
				<div class="page-inner">
					<div class="page-header">
						<h3 class="fw-bold mb-3">@yield('tajuk')</h3>
							@yield('breadcrumb')
					</div>
					
					@if (session('success'))
						<div class="alert alert-success" role="alert">
							{{ session('success') }}
						</div>
					@endif
					@yield('content')
				</div>
			</div>
			
			<footer class="footer">
				<div class="container-fluid d-flex justify-content-between">
					<nav class="pull-left">
						<ul class="nav">
							<li class="nav-item">
								<a class="nav-link" href="/">
									Penafian
								</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="#"> FAQ </a>
							</li>
						</ul>
					</nav>
					<div class="copyright">
						2025, made with <i class="fa fa-heart heart text-danger"></i> by
						<a href="https://www.mbip.gov.my">microEN</a>
					</div>
				</div>
			</footer>
		</div>
	</div>
	<!--   Core JS Files   -->
	<script src="{{asset('kai/assets/js/core/jquery-3.7.1.min.js')}}"></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

	
	<!-- jQuery Scrollbar -->
	<script src="{{asset('kai/assets/js/plugin/jquery-scrollbar/jquery.scrollbar.min.js')}}"></script>

	<!-- jQuery Sparkline -->
	<script src="{{asset('kai/assets/js/plugin/jquery.sparkline/jquery.sparkline.min.js')}}"></script>

	<!-- Datatables -->
	<script src="{{asset('kai/assets/js/plugin/datatables/datatables.min.js')}}"></script>
	<!-- Kaiadmin JS -->
	<script src="{{asset('kai/assets/js/kaiadmin.min.js')}}"></script>
	@yield('js')

</body>
</html>