<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SLHD | Dinas Lingkungan Hidup</title>
    <link rel="apple-touch-icon" sizes="180x180" href="{{asset('assets/logo3.png')}}">
    <link rel="icon" type="image/png" sizes="32x32" href="{{asset('assets/logo3.png')}}">
    <!-- Tailwind CSS CDN -->
    <script src="{{ asset('assets/js/tailwind.js') }}"></script>
    <!-- Google Fonts -->
    <link href="{{ asset('assets/css/font.css') }}" rel="stylesheet">
    <!-- Lucide Icons -->
    <script src="{{ asset('assets/js/lucide.js') }}"></script>
    <link rel="stylesheet" href="{{asset('assets/css/bootstrap-table.min.css')}}">
    <link rel="stylesheet" href="{{asset('assets/css/select2/select2.bundle.css')}}">
    <link rel="stylesheet" media="screen, print" href="{{asset('assets/css/datatables/datatables.bundle.css')}}">
    <style>
        body { font-family: 'Plus Jakarta Sans', sans-serif; }
        .glass-effect {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        .nav-scrolled {
            background-color: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
            padding-top: 0.5rem;
            padding-bottom: 0.5rem;
        }
        .filter-active {
            background-color: #2563eb;
            color: white;
            border-color: #2563eb;
        }
    </style>
</head>
<body class="bg-slate-50 text-slate-900">

    <!-- Navigation -->
    <nav id="main-nav" class="fixed w-full z-50 transition-all duration-300 py-4">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex justify-between items-center">
            <div class="flex items-center space-x-3">
                <img src="{{asset('assets/logo3.png')}}" width="40" alt="">
                <div>
                    <h1 class="font-bold text-xl tracking-tight text-slate-900 leading-none uppercase mb-2">SLHD</h1>
                    <p class="text-[10px] uppercase tracking-widest text-slate-600 font-bold">Status Lingkungan Hidup Daerah</p>
                </div>
            </div>

            <!-- Desktop Menu -->
            <div class="hidden md:flex items-center space-x-8">
                <a href="{{ url('/') }}" class="font-medium text-slate-700 hover:text-blue-600 transition-colors">Beranda</a>
                <a href="{{ url('dataset') }}" class="font-medium text-slate-700 hover:text-blue-600 transition-colors">Dataset Utama</a>
                <a href="{{ url('dataset-tambahan') }}" class="font-medium text-slate-700 hover:text-blue-600 transition-colors">Dataset Tambahan</a>
                <a href="{{ url('berita') }}" class="font-medium text-slate-700 hover:text-blue-600 transition-colors">Berita</a>
                <a href="{{ url('publikasi') }}" class="font-medium text-slate-700 hover:text-blue-600 transition-colors">Publikasi</a>
                {{-- <a href="#" class="font-medium text-slate-700 hover:text-blue-600 transition-colors">Informasi</a> --}}
                <a href="{{ url('login') }}" class="flex items-center space-x-2 bg-blue-600 text-white px-5 py-2 rounded-xl font-semibold hover:bg-blue-700 transition-all shadow-lg shadow-blue-200">
                    <span>Login</span>
                    <i data-lucide="log_in" class="w-5 h-5"></i>
                </a>
            </div>

            <!-- Mobile Toggle -->
            <div class="md:hidden">
                <button id="mobile-menu-btn" class="text-slate-800">
                    <i data-lucide="menu" id="menu-icon"></i>
                </button>
            </div>
        </div>

        <!-- Mobile Menu -->
        <div id="mobile-menu" class="hidden md:hidden bg-white border-t border-slate-100 p-4 space-y-4 shadow-xl">
            <a href="{{ url('/') }}" class="block font-medium py-2">Beranda</a>
            <a href="{{ url('dataset') }}" class="block font-medium py-2">Dataset Utama</a>
            <a href="{{ url('dataset-tambahan') }}" class="block font-medium py-2">Dataset Tambahan</a>
            <a href="{{ url('berita') }}" class="block font-medium py-2">Berita</a>
            <a href="{{ url('publikasi') }}" class="block font-medium py-2">Publikasi</a> 
            <a href="{{ url('login') }}" class="w-full flex bg-blue-600 text-white px-5 py-3 rounded-xl font-bold">Login</a>
        </div>
    </nav>

    @yield('content')

    <!-- Footer -->
    <footer class="bg-white py-12 border-t border-slate-200">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center md:text-left">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-6 md:mb-0">
                    <div class="flex items-center justify-center md:justify-start space-x-3 mb-2">
                        <img src="{{asset('assets/logo3.png')}}" width="40" alt="">
                        <div>
                            <h1 class="font-bold text-xl tracking-tight text-slate-900 leading-none uppercase mb-2">SLHD</h1>
                            <p class="text-[10px] uppercase tracking-widest text-slate-600 font-bold">Status Lingkungan Hidup Daerah</p>
                        </div>
                    </div>
                    
                    <p class="text-slate-500 text-xs">© {{ date('Y') }} Dinas Lingkungan Hidup Provinsi DKI Jakarta.</p>
                </div>
                {{-- <div class="flex space-x-8 text-sm font-medium text-slate-600">
                    <a href="#" class="hover:text-blue-600">Kontak</a>
                    <a href="#" class="hover:text-blue-600">Privasi</a>
                    <a href="#" class="hover:text-blue-600">DLH Jakarta</a>
                </div> --}}
            </div>
        </div>
    </footer>

    <!-- jQuery CDN -->
    <script src="{{ asset('assets/js/jquery.min.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/select2/select2.bundle.js')}}"></script>
    
    <script>
        $(document).ready(function() {
            $('.select2').select2();
            // Initialize Lucide Icons
            lucide.createIcons();

            // Sticky Header & Scroll Logic
            $(window).scroll(function() {
                if ($(window).scrollTop() > 50) {
                    $('#main-nav').addClass('nav-scrolled');
                } else {
                    $('#main-nav').removeClass('nav-scrolled');
                }
            });

            // Mobile Menu Toggle
            $('#mobile-menu-btn').click(function() {
                $('#mobile-menu').slideToggle('fast');
                const iconName = $('#menu-icon').attr('data-lucide') === 'menu' ? 'x' : 'menu';
                $('#menu-icon').attr('data-lucide', iconName);
                lucide.createIcons(); // Re-render icon
            });

            // Simple Year Filter
            $('.year-filter').click(function() {
                const year = $(this).attr('data-year');
                
                // Update UI active state
                $('.year-filter').removeClass('bg-blue-600 text-white').addClass('text-slate-600');
                $(this).addClass('bg-blue-600 text-white').removeClass('text-slate-600');

                if (year === 'all') {
                    $('.report-card').fadeIn();
                } else {
                    $('.report-card').hide();
                    $(`.report-card[data-year="${year}"]`).fadeIn();
                }
            });

            // Smooth Scroll for Anchors
            $('a[href^="#"]').on('click', function(event) {
                var target = $(this.getAttribute('href'));
                if( target.length ) {
                    event.preventDefault();
                    $('html, body').stop().animate({
                        scrollTop: target.offset().top - 80
                    }, 800);
                }
            });

            // Dataset Filter Logic
            $('.filter-btn').click(function() {
                const category = $(this).attr('data-category');
                
                // Active state styling
                $('.filter-btn').removeClass('filter-active').addClass('text-slate-600 border-slate-200').removeClass('border-transparent');
                $(this).addClass('filter-active').removeClass('text-slate-600 border-slate-200').addClass('border-transparent');

                if (category === 'all') {
                    $('.dataset-item').fadeIn(300);
                } else {
                    $('.dataset-item').hide();
                    $(`.dataset-item[data-category="${category}"]`).fadeIn(300);
                }
                
                updateCount();
            });

            // Live Search Logic
            $('#dataset-search').on('keyup', function() {
                const value = $(this).val().toLowerCase();
                $("#dataset-container .dataset-item").filter(function() {
                    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
                });
                updateCount();
            });

            function updateCount() {
                const count = $('.dataset-item:visible').length;
                $('#count-display').text(count);
            }
        });

        
    </script>
    @yield('js')
</body>
</html>