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

<head>
    <meta charset="utf-8">
    <title>SLHD | Dinas Lingkungan Hidup</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="apple-touch-icon" sizes="180x180" href="{{asset('assets/logo-dinas.ico')}}">
    <link rel="icon" type="image/png" sizes="32x32" href="{{asset('assets/logo-dinas.ico')}}">
    <link href="{{asset('assets/libs/jsvectormap/css/jsvectormap.min.css')}}" rel="stylesheet" type="text/css">
    <link href="{{asset('assets/css/app.min.css')}}" rel="stylesheet" type="text/css">
    <link href="{{asset('assets/css/icons.min.css')}}" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="{{asset('assets/css/bootstrap-table.min.css')}}">
    <link rel="stylesheet" href="{{asset('assets/css/sweetalert.min.css')}}">
    <link rel="stylesheet" href="{{asset('assets/css/toast.min.css')}}">
    <link rel="stylesheet" href="{{asset('assets/css/select2/select2.bundle.css')}}">
    <link rel="stylesheet" href="{{asset('assets/css/custom.css')}}">
    <link rel="stylesheet" media="screen, print" href="{{asset('assets/css/datatables/datatables.bundle.css')}}">
    <script src="{{asset('assets/js/config.js')}}"></script>

    {{-- <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script> --}}
    <script src="{{ asset('assets/tailwind.js') }}"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
    <style>
        .active{
            color: #E9811A!important;
        }
        .poppins-thin {
            font-family: "Poppins", sans-serif;
            font-weight: 100;
            font-style: normal;
            }

            .poppins-extralight {
            font-family: "Poppins", sans-serif;
            font-weight: 200;
            font-style: normal;
            }

            .poppins-light {
            font-family: "Poppins", sans-serif;
            font-weight: 300;
            font-style: normal;
            }

            .poppins-regular {
            font-family: "Poppins", sans-serif;
            font-weight: 400;
            font-style: normal;
            }

            .poppins-medium {
            font-family: "Poppins", sans-serif;
            font-weight: 500;
            font-style: normal;
            }

            .poppins-semibold {
            font-family: "Poppins", sans-serif;
            font-weight: 600;
            font-style: normal;
            }

            .poppins-bold {
            font-family: "Poppins", sans-serif;
            font-weight: 700;
            font-style: normal;
            }

            .poppins-extrabold {
            font-family: "Poppins", sans-serif;
            font-weight: 800;
            font-style: normal;
            }

            .poppins-black {
            font-family: "Poppins", sans-serif;
            font-weight: 900;
            font-style: normal;
            }

            .poppins-thin-italic {
            font-family: "Poppins", sans-serif;
            font-weight: 100;
            font-style: italic;
            }

            .poppins-extralight-italic {
            font-family: "Poppins", sans-serif;
            font-weight: 200;
            font-style: italic;
            }

            .poppins-light-italic {
            font-family: "Poppins", sans-serif;
            font-weight: 300;
            font-style: italic;
            }

            .poppins-regular-italic {
            font-family: "Poppins", sans-serif;
            font-weight: 400;
            font-style: italic;
            }

            .poppins-medium-italic {
            font-family: "Poppins", sans-serif;
            font-weight: 500;
            font-style: italic;
            }

            .poppins-semibold-italic {
            font-family: "Poppins", sans-serif;
            font-weight: 600;
            font-style: italic;
            }

            .poppins-bold-italic {
            font-family: "Poppins", sans-serif;
            font-weight: 700;
            font-style: italic;
            }

            .poppins-extrabold-italic {
            font-family: "Poppins", sans-serif;
            font-weight: 800;
            font-style: italic;
            }

            .poppins-black-italic {
            font-family: "Poppins", sans-serif;
            font-weight: 900;
            font-style: italic;
            }

    </style>
    @yield('css')
</head>

<body class="poppins-regular bg-white">
    <header class="absolute w-full z-20 {{ Request::is('/') || Request::is('resource-data')  ? '' : 'bg-[#103760]'}}">
        <div class="container mx-auto flex justify-between items-center px-6 py-4">
        <!-- Logo -->
        <div class="">
            <a href="{{ url('/') }}" class="flex items-center gap-3">
                <img src="{{ asset('assets/logo-dlh.png') }}" class="w-12 h-12 rounded-full bg-white p-1" alt="logo">
            <div>
                <h1 class="text-accent poppins-bold font-bold text-lg active">SLHD</h1>
                <p class="text-white text-sm">Dinas Lingkungan Hidup Provinsi DKI Jakarta</p>
            </div>
            </a>
        </div>

        <!-- Menu Desktop -->
        <nav class="hidden lg:flex gap-8">
            <a href="{{ url('/') }}" class="{{   Request::is('/*') ? 'active font-bold' : 'text-white'}} ">Home</a>
            <a href="{{ url('resource-data') }}" class="{{   Request::is('resource-data*') ? 'active font-bold' : 'text-white'}} hover:text-accent">Sumber Data</a>
            <a href="{{ url('dataset') }}" class="{{   Request::is('dataset') ? 'active font-bold' : 'text-white'}} hover:text-accent">Dataset</a>
            <a href="{{ url('dataset-tambahan') }}" class="{{   Request::is('dataset-tambahan*') ? 'active font-bold' : 'text-white'}} hover:text-accent">Dataset Tambahan</a>
            <a href="{{ url('login') }}" class="{{   Request::is('login*') ? 'active font-bold' : 'text-white'}} hover:text-accent">Login</a>
            {{-- <a href="{{ url('help') }}" class="{{   Request::is('help*') ? 'active font-bold' : 'text-white'}} hover:text-accent">Bantuan</a> --}}
        </nav>

        <!-- Tombol Mobile -->
        <button id="menu-btn" class="lg:hidden block  text-white focus:outline-none">
            <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                d="M4 6h16M4 12h16M4 18h16" />
            </svg>
        </button>
        </div>

        <!-- Menu Mobile -->
        <div id="mobile-menu" class="hidden flex flex-col bg-white px-6 py-4 md:hidden">
            <a href="{{ url('/') }}" class="py-2 text-[#103760] hover:text-[#E9811A]">Home</a>
            <a href="{{ url('resource-data') }}" class="py-2 text-[#103760] hover:text-[#E9811A]">Sumber Data</a>
            <a href="{{ url('/dataset') }}" class="py-2 text-[#103760] hover:text-[#E9811A]">Dataset</a>
            <a href="{{ url('/dataset-tambahan') }}" class="py-2 text-[#103760] hover:text-[#E9811A]">Dataset Tambahan</a>
            <a href="{{ url('/help') }}" class="py-2 text-[#103760] hover:text-[#E9811A]">Bantuan</a>
        </div>
    </header>
    
    @yield('content')

    <div class="w-full p-4 bg-[#103760]">
        <div class="flex px-10 text-white">
            <p>Copyright © {{date('Y')}} Dinas Lingkungan Hidup Provinsi DKI Jakarta</p>
        </div>
    </div>
    

    <!-- Plugin Js -->
    <script src="{{asset('assets/libs/simplebar/simplebar.min.js')}}"></script>
    <script src="{{asset('assets/libs/lucide/umd/lucide.min.js')}}"></script>
    <script src="{{asset('assets/libs/@frostui/tailwindcss/frostui.js')}}"></script>

    <!-- App Js -->
    <script src="{{asset('assets/js/jquery.min.js')}}"></script>
    <script src="{{asset('assets/js/app.js')}}"></script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="{{asset('assets/js/bootstrap-table.min.js')}}"></script>
    <script src="{{ asset('assets/js/sweetalert.min.js') }}"></script>
    <script src="{{asset('assets/js/toast.min.js')}}"></script>
    <script src="{{asset('assets/js/select2/select2.bundle.js')}}"></script>
    <script type="text/javascript" src="{{asset('assets/js/datatables/datatables.bundle.js')}}"></script>
    <script>
            $(document).ready(function() {
                $('.select2').select2();
                $('.numberInput').on('input', function() {
                    this.value = this.value.replace(/[^0-9]/g, ''); // Hanya angka 0-9
                });
            });

            @if (Session::get('type')=='error')
                  toastr.error("{{ Session::get('message') }}", 'Error!', {positionClass: 'toast-bottom-right', containerId: 'toast-bottom-right'});
              @endif
              @if (Session::get('type')=='success')
                  toastr.success("{{ Session::get('message') }}", 'Berhasil!', {positionClass: 'toast-bottom-right', containerId: 'toast-bottom-right'});
              @endif
              @if (Session::get('type')=='warning')
                  toastr.warning("{{ Session::get('message') }}", 'Whoopss!', {positionClass: 'toast-bottom-right', containerId: 'toast-bottom-right'});
              @endif
              @if (Session::get('type')=='info')
                  toastr.info("{{ Session::get('message') }}", 'Info!', {positionClass: 'toast-bottom-right', containerId: 'toast-bottom-right'});
              @endif
    </script>
    <script>
    // Toggle Menu Mobile
    const btn = document.getElementById('menu-btn');
    const menu = document.getElementById('mobile-menu');
    btn.addEventListener('click', () => {
      menu.classList.toggle('hidden');
    });

    const btn = document.getElementById('filter');
    const menu = document.getElementById('filter-menu');
    btn.addEventListener('click', () => {
      menu.classList.toggle('hidden');
    });
  </script>

    <!-- Dashboard App js -->
    @yield('js')
</body>

</html>