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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>@yield('title', 'MANTAO')</title>
    <link rel="icon" type="image/png" href="{{ asset('images/Logo-mantao.png') }}">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="stylesheet" href="{{ asset('css/style.css') }}">
    <link rel="stylesheet" href="{{ asset('css/form-style.css') }}">

    <style>
        /* General Body Styles */
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: #f4f6f9;
            color: #343a40;
            margin: 0;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        main {
            flex-grow: 1;
        }

        /* Footer Styles */
        .app-footer {
            background-color: #343a40;
            color: #f8f9fa;
            text-align: center;
            padding: 20px;
            margin-top: auto;
        }
    </style>
    @stack('styles')
</head>

<body class="@yield('body-class')">

    @include('partials.header')

    <main>
        @yield('content')
    </main>

    {{-- Footer hanya tampil jika bukan halaman monitoring --}}
    @if (!Request::is('monitoring'))
    @include('partials.footer')
    @endif

    @stack('scripts')

    {{-- =============================================== --}}
    {{-- ==        SCRIPT UTAMA UNTUK HEADER          == --}}
    {{-- =============================================== --}}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Efek scroll header
            const header = document.querySelector('.app-header');
            if (header) {
                window.addEventListener('scroll', function() {
                    header.classList.toggle('scrolled', window.scrollY > 50);
                });
            }

            // Tombol hamburger
            const mobileNavToggle = document.querySelector('.mobile-nav-toggle');
            const mainNav = document.querySelector('.main-nav ul');
            if (mobileNavToggle && mainNav) {
                mobileNavToggle.addEventListener('click', function(e) {
                    e.stopPropagation();
                    mobileNavToggle.classList.toggle('active');
                    mainNav.classList.toggle('active');
                });
            }

            // Dropdown profil
            const profileDropdown = document.querySelector('.profile-dropdown');
            if (profileDropdown) {
                const profileToggle = profileDropdown.querySelector('.profile-toggle');
                profileToggle.addEventListener('click', function(e) {
                    e.stopPropagation();
                    profileDropdown.classList.toggle('active');
                });
            }

            // Tutup semua menu jika klik di luar
            document.addEventListener('click', function(e) {
                if (profileDropdown && !profileDropdown.contains(e.target)) {
                    profileDropdown.classList.remove('active');
                }
                if (mainNav && !mainNav.contains(e.target) && !mobileNavToggle.contains(e.target)) {
                    mainNav.classList.remove('active');
                    mobileNavToggle.classList.remove('active');
                }
            });
        });
    </script>

</body>

</html>