<!doctype html>
<html class="no-js" lang="en">
    <head>
        <!-- meta data -->
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
        <title>UPT PASAR BATU</title>
		<link rel="shortcut icon" type="image/icon" href="{{ asset('/assets/images/logo/icon.png') }}"/>
        <link rel="stylesheet" href="{{ asset('/assets/css/font-awesome.min.css') }}">
		<link rel="stylesheet" href="{{ asset('/assets/css/flaticon.css') }}">
        <link rel="stylesheet" href="{{ asset('/assets/css/bootstrap.min.css') }}">
		<link rel="stylesheet" href="{{ asset('/assets/css/bootsnav.css') }}" >
        <link rel="stylesheet" href="{{ asset('/assets/css/style.css') }}">
        <link rel="stylesheet" href="{{ asset('/assets/css/responsive.css') }}">
    </head>

	<body>
        <section class="navbar" style="border: none; position: fixed; z-index: 999; width: 100%; display: flex; justify-content: center;">
            <div class="top-area" style="width: 100%;">
            <div class="header-area" style="width: 100%;">
            <nav class="navbar navbar-default bootsnav" data-minus-value-desktop="70" data-minus-value-mobile="55" data-speed="1000">
            <div class="container">
                {{-- mobile logo and hamburger menu --}}
                <div class="mobile-navbar-top" style="display:flex; align-items:center; justify-content: space-between; width:100%; height: 75px; gap:10px;">
                    <a href="/">
                        <img class="navbar-logo" src="/assets/images/logo/logombatu.png" alt="logo left">
                    </a>
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu">
                    <i class="fa fa-bars"></i>
                    </button>
                </div>

                <div class="collapse navbar-collapse" id="navbar-menu">
                <div class="desktop-navbar" style="align-items:center; justify-content:space-between; margin:0; padding:0; height: 75px;">
                <!-- left group (stuck to left) -->
                <ul class="nav navbar-nav navbar-left" style="display:flex; align-items:center; margin:0; padding:0; list-style:none;">
                <li class="{{ Request::is('/') ? 'active' : '' }}" style="margin:0 10px;"><a href="/">BERANDA</a></li>
                <li class="{{ Request::is('berita') ? 'active' : '' }}" style="margin:0 10px;"><a href="/berita">BERITA</a></li>
                </ul>

                <!-- centered logo -->
                <div class="navbar-center" style="text-align:center; flex:0 0 auto;">
                <a href="/" style="display:flex; align-items:center; justify-content:center; gap:10px; padding:0;">
                    <img class="navbar-logo" src="/assets/images/logo/logombatu.png" alt="logo left" style="max-width:80px; height:auto; display:inline-block;">
                </a>
                </div>

                <!-- right group (stuck to right) -->
                <ul class="nav navbar-nav navbar-right" style="display:flex; align-items:center; margin:0; padding:0; list-style:none;">
                <li class="{{ Request::is('galeri') ? 'active' : '' }}" style="margin:0 10px;"><a href="/galeri">GALERI</a></li>
                <li class="{{ Request::is('kontak') ? 'active' : '' }}" style="margin:0 10px;"><a href="/kontak">HUBUNGI KAMI</a></li>
                </ul>
                </div>

                <div class="mobile-navbar">
                <ul class="nav navbar-nav" style="display:flex; flex-direction:column; margin:0; padding:10px; list-style:none;">
                    <li class="{{ Request::is('/') ? 'active' : '' }}"><a href="/" style="padding:10px 0;">BERANDA</a></li>
                    <li class="{{ Request::is('berita') ? 'active' : '' }}"><a href="/berita" style="padding:10px 0;">BERITA</a></li>
                    <li class="{{ Request::is('galeri') ? 'active' : '' }}"><a href="/galeri" style="padding:10px 0;">GALERI</a></li>
                    <li class="{{ Request::is('kontak') ? 'active' : '' }}"><a href="/kontak" style="padding:10px 0;">HUBUNGI KAMI</a></li>
                </ul>
                </div>
                </div>
            </div>
            </nav>
            </div>
            <div class="clearfix"></div>
            </div>
        </section>

        @yield('content')


		<footer class="contact">
			<div class="container">
				<div class="footer-top">
                <div class="row d-flex align-items-center">
                    <div class="col-md-6">
                        <div class="single-footer-widget">
                            <div class="footer-logo">
                                <img src="/assets/images/logo/logombatuB.png" class="mb-2" style="width:200px;" alt="">
                            </div>
                            <br>
                            <div class="footer-social">
                                <a href="https://www.facebook.com" target="_blank"><i class="fa fa-facebook"></i></a>
                                <a href="https://www.instagram.com" target="_blank"><i class="fa fa-instagram"></i></a>
                                <a href="https://www.twitter.com" target="_blank"><i class="fa fa-x"></i></a>
                            </div>
                            <br>
                            <div class="footer-contact">
                                <p><i class="fa fa-envelope" style="margin-right: 10px;"></i>batu@city</p>
                                <p><i class="fa fa-phone" style="margin-right: 10px;"></i> (0341) 592284</p>
                                <p><i class="fa fa-map-marker" style="margin-right: 10px;"></i> Jl. Panglima Sudirman 507 Pesanggrahan, Kec. Batu, Kota Batu, Jawa Timur</p>
                            </div>
                        </div>
                    </div>

                <div class="col-md-6 d-flex text-center" style="margin-top: 50px">
                    <img src="/assets/images/logo/icon.png" class="mb-2" style="width:150px;" alt="">
                    <img src="/assets/images/logo/logoBesar.png" style="width:150px;" alt="">
                </div>
                </div>

				</div>
				<div class="footer-copyright">
					<div class="row">
						<div class="col-sm-6">
							<p>
								&copy; 2025 UPT Pasar Kota Batu. All rights reserved.
							</p>
						</div>
						<div class="col-sm-6 powered">
							<p>
								Powered by <span style="font-weight: bold">Batuversity</span>
							</p>
						</div>
					</div>
				</div>
			</div>
        </footer>

		<script src="{{ asset('assets/js/jquery.js') }}"></script>
        <script src="{{ asset('/assets/js/bootstrap.min.js') }}"></script>
		<script src="{{ asset('/assets/js/bootsnav.js') }}"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
        <script src="{{ asset('/assets/js/custom.js') }}"></script>

    </body>

</html>
