<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Sistem Pelaporan Serangan Hama</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap" rel="stylesheet">

    @yield('styles')
</head>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<body>

<div class="layout">

    <!-- SIDEBAR OVERLAY (mobile) -->
    <div class="sidebar-overlay" id="sidebarOverlay" onclick="closeSidebar()"></div>

    <!-- SIDEBAR -->
    <aside class="sidebar hide" id="sidebar">

        <div class="sidebar-header">
            🌾 SPK Hama
        </div>

        <nav>

            @if(auth()->user()->role == 'petani')
                <a href="/petani/dashboard"
                   class="menu-item {{ request()->is('petani/dashboard') ? 'active' : '' }}">
                    🏠 Dashboard
                </a>
                <a href="/lapor/create" class="menu-item">
                    ➕ Input Laporan
                </a>
            @endif

            @if(auth()->user()->role == 'penyuluh')
                <a href="/penyuluh/dashboard"
                   class="menu-item {{ request()->is('penyuluh/dashboard') ? 'active' : '' }}">
                    📋 Validasi
                </a>
                <a href="/penyuluh/ranking"
                   class="menu-item {{ request()->is('penyuluh/ranking') ? 'active' : '' }}">
                    📊 Ranking
                </a>
                <a href="/penyuluh/laporan"
                   class="menu-item {{ request()->is('penyuluh/laporan') ? 'active' : '' }}">
                    📄 Data Laporan
                </a>
                <a href="/penyuluh/help"
                   class="menu-item {{ request()->is('penyuluh/help') ? 'active' : '' }}">
                    📘 Help
                </a>
            @endif

            @if(auth()->user()->role == 'admin')
                <a href="/admin/dashboard"
                   class="menu-item {{ request()->is('admin/dashboard') ? 'active' : '' }}">
                    ⚙ Dashboard Admin
                </a>
                <a href="/admin/laporan"
                   class="menu-item {{ request()->is('admin/laporan') ? 'active' : '' }}">
                    📄 Data Laporan
                </a>
                <a href="/admin/kontak"
                   class="menu-item {{ request()->is('admin/kontak') ? 'active' : '' }}">
                    📩 Pesan Kontak
                </a>
                <a href="/admin/help"
                   class="menu-item {{ request()->is('admin/help') ? 'active' : '' }}">
                    📘 Help AHP-TOPSIS
                </a>
            @endif

        </nav>

    </aside>

    <!-- MAIN -->
    <div class="main full" id="mainContent">

        <!-- NAVBAR -->
        <header class="navbar">

            <!-- LEFT -->
            <div class="nav-left">

                <!-- HAMBURGER -->
                <div class="hamburger" id="hamburgerBtn" onclick="toggleSidebar()">☰</div>

                <!-- LOGO -->
                <div class="logo">
                    <img src="{{ asset('logo.jpg') }}" alt="Logo">
                    <span>SPK Hama</span>
                </div>

            </div>

            <!-- RIGHT -->
            <div class="nav-right">

                <div class="user-menu">

                    <div class="user-info" onclick="toggleDropdown(event)">
                        <img src="{{ asset('user.png') }}" class="avatar" alt="User">
                        <div class="user-text">
                            <span>{{ auth()->user()->name }}</span>
                            <small class="role">{{ auth()->user()->role }}</small>
                        </div>
                    </div>

                    <!-- DROPDOWN -->
                    <div class="dropdown" id="dropdownMenu">
                        <a href="/profil">👤 Profil</a>
                        <form action="/logout" method="POST">
                            @csrf
                            <button type="submit">🚪 Logout</button>
                        </form>
                    </div>

                </div>

            </div>

        </header>

        <!-- CONTENT -->
        <div class="content">
            @yield('content')
        </div>

        <!-- FOOTER -->
        <footer class="footer">
            © {{ date('Y') }} Pemerintah Kabupaten Gowa |
            Sistem Pendukung Keputusan Serangan Hama
        </footer>

    </div><!-- end .main -->

</div><!-- end .layout -->

<script>

// ================= CEK UKURAN LAYAR =================
const isDesktop = () => window.innerWidth > 1024;

// ================= SIDEBAR =================
function openSidebar(){
    const sidebar  = document.getElementById('sidebar');
    const overlay  = document.getElementById('sidebarOverlay');
    const main     = document.getElementById('mainContent');

    sidebar.classList.add('show');
    sidebar.classList.remove('hide');

    if(isDesktop()){
        // Di desktop: geser konten ke kanan
        main.classList.remove('full');
    } else {
        // Di mobile/tablet: tampilkan overlay
        overlay.classList.add('active');
        document.body.style.overflow = 'hidden';
    }
}

function closeSidebar(){
    const sidebar  = document.getElementById('sidebar');
    const overlay  = document.getElementById('sidebarOverlay');
    const main     = document.getElementById('mainContent');

    sidebar.classList.remove('show');
    sidebar.classList.add('hide');
    overlay.classList.remove('active');
    main.classList.add('full');
    document.body.style.overflow = '';
}

function toggleSidebar(){
    const sidebar = document.getElementById('sidebar');
    sidebar.classList.contains('show') ? closeSidebar() : openSidebar();
}

// Saat resize ke desktop, reset state
window.addEventListener('resize', function(){
    if(isDesktop()){
        document.getElementById('sidebarOverlay').classList.remove('active');
        document.body.style.overflow = '';
    }
});

// ================= DROPDOWN =================
function toggleDropdown(e){
    e.stopPropagation();
    const menu = document.getElementById("dropdownMenu");
    menu.style.display = menu.style.display === "block" ? "none" : "block";
}

// Tutup dropdown saat klik di luar
document.addEventListener("click", function(e){
    if(!e.target.closest('.user-menu')){
        const menu = document.getElementById("dropdownMenu");
        if(menu) menu.style.display = "none";
    }
});

</script>

@yield('scripts')

</body>
</html>