<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
	<title>@yield('title',@$title) | SIDIA Jakarta</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

	<meta name="keywords" content="Sekolah Adiwiyata" />
	<meta name="description" content="Sekolah Adiwiyata Lingkungan Hidup Provinsi DKI Jakarta">
	<meta name="author" content="ilham">
	<!-- Favicon -->
	<link rel="shortcut icon" href="{{ asset('assets/logo-dinas.ico') }}" type="image/x-icon" />

	<link rel="apple-touch-icon" href="{{ asset('assets/logo-dinas.ico') }}">
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
    @yield('css')
	<style>
		.bg-success{
			background: #009D66!important;
		}
		.bg-warning{
			background: #F7AE15!important;
		}
		.bg-danger{
			background: #B9375D!important;
		}
		.bg-info{
			background: #3B38A0!important;
		}
		.border-success{
			border: 1px solid #009D66!important;
		}
		.text-success{
			color: #009D66!important;
		}
		.text-warning{
			color: #F7AE15!important;
		}
		.text-danger{
			color: #B9375D!important;
		}
		.text-info{
			color: #3B38A0!important;
		}
		.text-black{
			color: #333!important;
		}
	</style>
  </head>
  <body>

	<div class="bg-white border-b-1 border-b-[#eaeaea]">
		<div class="container mx-auto">
			<div class="flex flex-between justify-between items-center gap-5 mx-auto p-5">
				<div class="flex flex-row gap-10">
					<a href="{{ url('/') }}" class="flex items-center space-x-3 rtl:space-x-reverse">
						<img src="{{ asset('assets/logo.png') }}" class="h-20" />
					</a>
					<div class="items-center justify-between hidden w-full md:flex md:w-auto md:order-1" id="navbar-cta">
						<ul class="flex flex-col font-medium p-4 md:p-0 mt-4 border md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 bg-white">
							<li>
								<a href="{{ url('/') }}" class="block py-2 px-3  {{ Request::is('/') ? 'text-success' : '' }}" aria-current="page">Beranda</a>
							</li>
							<li>
								<a href="{{ url('sekolah') }}" class="block py-2 px-3  {{ Request::is('sekolah*') ? 'text-success' : '' }}">Daftar Sekolah Adiwiyata</a>
							</li>
							<li>
								<a href="{{ url('kegiatan') }}" class="block py-2 px-3  {{ Request::is('kegiatan*') ? 'text-success' : '' }}">Kegiatan Sekolah Adiwiyata</a>
							</li>
							<li>
								<a href="{{ url('galeri') }}" class="block py-2 px-3  {{ Request::is('galeri*') ? 'text-success' : '' }}">Galeri</a>
							</li>
							<li>
								@if(Request::is('/'))
									<?php $href = '#helpdesk'; ?>
								@else
									<?php $href = url("/#helpdesk"); ?>
								@endif
								<a href="{{ @$href }}" class="block py-2 px-3">Helpdesk</a>
							</li>
						</ul>
					</div>
				</div>
				<div class="flex md:order-2 space-x-3 md:space-x-0 rtl:space-x-reverse">
					<button data-collapse-toggle="navbar-cta" type="button" class="inline-flex items-right p-2 w-10 h-10 justify-end text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="navbar-cta" aria-expanded="false">
						<span class="sr-only">Open main menu</span>
						<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
							<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/>
						</svg>
					</button>
					@if(Auth::check())
					<a href="{{ url('dashboard') }}" class="p-3 text-white bg-success rounded-[10px] mx-auto md:mx-0 text-center flex flex-row gap-3">
						<span>Dashboard</span> <x-lucide-user width="20" class="text-white"/>
					</a>
					@else
					<a href="{{ url('login') }}" class="p-3 text-white bg-success rounded-[10px] mx-auto md:mx-0 text-center flex flex-row gap-3">
						<span>Login</span> <x-lucide-log-in width="10" class="text-white"/>
					</a>
					@endif
				</div>
			</div>
		</div>
	</div>

	
	@yield('content')
		<section id="footer" class="bottom-0">
			<div class="bg-success p-3 ">
				<div class="container mx-auto">
					<div class="flex justify-between items-center">
						<div class="flex gap-5 items-center">
							<div>
								<a href="{{ url('/') }}" class="flex items-center space-x-3 rtl:space-x-reverse p-1 bg-white rounded-full">
									<img src="{{ asset('assets/logo.png') }}" class="h-10" />
								</a>
							</div>
							<div>
								<h5 class="text-white font-bold mb-0">Sistem Informasi Sekolah Adiwiyata Jakarta</h5>
								<span class="text-white text-xs">Dinas Lingkungan Hidup DKI Jakarta</span>
							</div>
						</div>
						<div>
							<span class="text-white text-xs">© {{ date('Y') }} </span>
						</div>
					</div>
					
				</div>
			</div>
		</section>
    @yield('js')
  </body>
</html>