<?php 
use App\Models\Konfigurasi_model;
use App\Models\Menu_model;

$konfigurasi  = new Konfigurasi_model();
$menu         = new Menu_model();
$site         = $konfigurasi->listing();
$menu_berita  = $menu->berita();
$menu_profil  = $menu->profil();
$menu_layanan = $menu->layanan();
$menu_makanan = $menu->makanan();

$uri = service('uri');
$segment =  $uri->getSegment(1);
?>

<style>
    /* Variabel Warna Merah - Cream ala Neo-Brutalism */
    :root {
        --neo-cream: #FDF4E3;       /* Warna dasar Cream yang hangat */
        --neo-cream-alt: #F0E2C7;   /* Cream sedikit lebih gelap untuk hover/aksen */
        --neo-red: #D41343;         /* Merah berani (sesuai brand Mie Nyinyir) */
        --neo-dark: #181818;        /* Hitam pekat untuk teks dan border */
        --bw: 3px;                  /* Ketebalan garis border */
    }

    /* --- TOPBAR MERAH NEO-BRUTALISM --- */
    #topbar {
        background-color: var(--neo-red);
        border-bottom: var(--bw) solid var(--neo-dark);
        color: var(--neo-cream);
        font-family: 'Space Grotesk', sans-serif;
        font-weight: 700;
        text-transform: uppercase;
        font-size: 0.85rem;
        padding: 10px 0;
        z-index: 999;
    }
    #topbar .topbar-links a {
        color: var(--neo-cream);
        text-decoration: none;
        margin-left: 20px;
        transition: 0.2s;
    }
    #topbar .topbar-links a:hover {
        border-bottom: 2px solid var(--neo-cream);
    }

    /* --- HEADER CREAM NEO-BRUTALISM --- */
    #header {
        background-color: var(--neo-cream);
        border-bottom: var(--bw) solid var(--neo-dark);
        transition: all 0.5s;
        z-index: 997;
        font-family: 'Space Grotesk', sans-serif;
        padding: 15px 0;
        top: 42px; /* Disesuaikan dengan tinggi topbar */
    }
    
    #header .logo img {
        max-height: 50px;
        border: 2px solid var(--neo-dark);
        border-radius: 8px;
        background: #fff;
        padding: 2px;
        box-shadow: 2px 2px 0px var(--neo-red); 
    }

    /* --- NAVBAR STYLE --- */
    .navbar { padding: 0; }
    .navbar li { position: relative; }
    
    .navbar a, .navbar a:focus {
        display: flex; align-items: center; justify-content: space-between;
        padding: 8px 16px;
        margin: 0 2px;
        font-size: 1rem;
        font-weight: 700;
        color: var(--neo-dark);
        white-space: nowrap;
        transition: 0.2s;
        text-transform: uppercase;
        text-decoration: none;
        border: 2px solid transparent; 
        border-radius: 8px;
    }

    .navbar a:hover, .navbar .active, .navbar .active:focus, .navbar li:hover > a {
        background: var(--neo-red);
        color: var(--neo-cream);
        border: 2px solid var(--neo-dark);
    }

    /* --- DROPDOWN NEO-BRUTALISM --- */
    .navbar .dropdown ul {
        display: block; position: absolute;
        left: 0; top: calc(100% + 20px);
        margin: 0; padding: 10px 0;
        z-index: 99; opacity: 0; visibility: hidden;
        background: var(--neo-cream);
        border: var(--bw) solid var(--neo-dark);
        box-shadow: 6px 6px 0px var(--neo-red); 
        border-radius: 12px;
        transition: 0.3s;
        min-width: 220px;
    }
    .navbar .dropdown:hover > ul {
        opacity: 1; top: 100%; visibility: visible;
    }
    .navbar .dropdown ul li { min-width: 200px; }
    
    .navbar .dropdown ul a {
        padding: 10px 20px;
        margin: 0;
        text-transform: uppercase;
        font-weight: 700;
        color: var(--neo-dark);
        border: none;
        border-radius: 0; 
    }
    
    .navbar .dropdown ul a:hover, .navbar .dropdown ul .active:hover, .navbar .dropdown ul li:hover > a {
        background: var(--neo-cream-alt);
        color: var(--neo-red);
        border: none;
        border-left: 5px solid var(--neo-red);
    }

    /* --- TOMBOL ORDER (Pill Button) --- */
    #menu-order {
        background: var(--neo-dark);
        color: var(--neo-cream);
        border: var(--bw) solid var(--neo-dark);
        border-radius: 50px;
        padding: 8px 25px !important;
        margin-left: 15px;
        box-shadow: 4px 4px 0px var(--neo-red); 
    }
    #menu-order:hover {
        background: var(--neo-red);
        color: var(--neo-cream);
        transform: translate(-2px, -2px); 
        box-shadow: 6px 6px 0px var(--neo-dark);
    }

    /* --- TOMBOL HAMBURGER CUSTOM (BUKAN BAWAAN TEMPLATE) --- */
    .neo-nav-toggle {
        color: var(--neo-dark) !important;
        font-size: 32px !important;
        cursor: pointer;
        display: none;
        line-height: 0;
        transition: 0.3s;
        position: relative;
        z-index: 9999; /* Selalu di atas */
    }

    /* --- TAMPILAN MENU DI MOBILE & TABLET --- */
    @media (max-width: 991px) {
        .neo-nav-toggle { display: block; }
        
        #topbar { display: none !important; }
        #header { top: 0; }
        
        /* Kotak Menu Melayang Brutalism */
        .navbar ul { 
            display: none; 
            flex-direction: column;
            align-items: flex-start;
            
            /* PERUBAHAN UTAMA: Gunakan fixed dan paksa lebarnya */
            position: fixed; 
            top: 85px; /* Jarak dari atas layar */
            left: 20px;
            right: 20px;
            width: calc(100% - 40px); /* Lebar layar dikurangi margin kiri-kanan */
            
            background: var(--neo-cream);
            border: var(--bw) solid var(--neo-dark);
            border-radius: 12px;
            box-shadow: 6px 6px 0px var(--neo-red);
            padding: 20px 0;
            z-index: 9999;
            
            height: auto !important; 
            bottom: auto !important;
            max-height: 80vh; 
            overflow-y: auto;

            scrollbar-width: none;
            -ms-overflow-style: none; 
        }
        .navbar ul::-webkit-scrollbar {
            display: none;
        }

        .navbar ul.mobile-menu-active {
            display: flex;
            animation: popIn 0.3s ease-out forwards;
        }

        @keyframes popIn {
            from { opacity: 0; transform: translateY(-10px) scale(0.95); }
            to { opacity: 1; transform: translateY(0) scale(1); }
        }

        .navbar ul li { width: 100%; }
        
        .navbar ul a, .navbar ul a:focus {
            padding: 12px 20px;
            border-radius: 0;
            border: none;
            width: 100%;
        }

        #menu-order {
            margin: 15px 20px;
            width: calc(100% - 40px);
            text-align: center;
            justify-content: center;
        }

        .navbar .dropdown ul {
            position: static;
            display: none;
            box-shadow: none;
            border: none;
            border-left: 3px solid var(--neo-red);
            margin-left: 20px;
            width: calc(100% - 40px);
            background: transparent;
        }
        .navbar .dropdown.active-dropdown ul {
            display: block;
        }
    }
</style>

<div id="topbar" class="d-flex align-items-center fixed-top">
    <div class="container d-flex justify-content-center justify-content-md-between">
        <div class="align-items-center d-none d-md-flex">
            <i class="bi bi-megaphone-fill me-2"></i> <?= tagline(); ?>
        </div>
        <div class="topbar-links d-none d-md-flex">
            <a class="scrollto" href="<?= base_url('kemitraan') ?>">Kemitraan</a>
            <a class="scrollto" href="<?= base_url('saran') ?>">Kritik & Saran</a>
            <a class="scrollto" href="<?= base_url('kontak') ?>">Kontak</a>
        </div>
    </div>
</div>

<header id="header" class="fixed-top">
    <div class="container d-flex align-items-center justify-content-between">

        <a href="<?= base_url() ?>" class="logo">
            <img src="<?= base_url('assets/upload/image/' . $site['logo']) ?>" alt="<?= $site['namaweb'] ?>">
        </a>

        <nav id="navbar" class="navbar">
            <ul>
                <li>
                    <a class="nav-link scrollto <?php if ($segment == "") : ?>active<?php endif ?>" href="<?= base_url() ?>">Home</a>
                </li>
                
                <li>
                    <a class="nav-link scrollto <?php if ($segment == "berita") : ?>active<?php endif ?>" href="<?= base_url('berita') ?>">
                        Promo
                    </a>
                </li>

                <li class="dropdown">
                    <a class="nav-link scrollto <?php if ($segment == "makanan") : ?>active<?php endif ?>" href="<?= base_url('makanan/allproduk') ?>">
                        <span>Menu</span> <i class="bi bi-chevron-down ms-1"></i>
                    </a>
                    <ul>
                        <?php foreach ($menu_makanan as $makanan) { ?>
                        <li>
                            <a href="<?= base_url('makanan/kategori/' . $makanan['kdjenis']) ?>"><?= $makanan['keterangan'] ?></a>
                        </li>
                        <?php } ?>
                    </ul>
                </li>

                <li>
                    <a class="nav-link scrollto <?php if ($segment == "about") : ?>active<?php endif ?>" href="<?= base_url('about')?>">
                        About
                    </a>
                </li>

                <li class="dropdown">
                    <a class="nav-link scrollto <?php if ($segment == "galeri" || $segment == "video") : ?>active<?php endif ?>" href="#">
                        <span>Media</span> <i class="bi bi-chevron-down ms-1"></i>
                    </a>
                    <ul>
                        <li><a href="<?= base_url('galeri') ?>">Galeri Gambar</a></li>
                        <li><a href="<?= base_url('video') ?>">Galeri Video</a></li>
                    </ul>
                </li>
                
                <li>
                    <a class="nav-link scrollto <?php if ($segment == "karir") : ?>active<?php endif ?>" href="<?= base_url('karir') ?>">Career</a>
                </li>
                
                <li>
                    <a class="nav-link scrollto <?php if ($segment == "client") : ?>active<?php endif ?>" href="<?= base_url('client') ?>">Outlet</a>
                </li>
                
                <li>
                    <a class="nav-link scrollto" id="menu-order" href="https://eorder.mienyinyir.com" target="_blank">Order ➔</a>
                </li>   
            </ul>
            
            <i class="bi bi-list neo-nav-toggle"></i>
        </nav>
    </div>
</header>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Ambil elemen icon custom yang baru
        const neoNavToggle = document.querySelector('.neo-nav-toggle');
        const navbarUl = document.querySelector('.navbar ul');
        const dropdownLinks = document.querySelectorAll('.navbar .dropdown > a');

        // 1. Fungsi Buka/Tutup Menu
        if (neoNavToggle) {
            neoNavToggle.addEventListener('click', function(e) {
                e.stopPropagation(); 
                
                navbarUl.classList.toggle('mobile-menu-active');
                this.classList.toggle('bi-list');
                this.classList.toggle('bi-x');
                
                // Menghapus efek samping overlay dari template lama (jika menyangkut)
                document.body.classList.remove('mobile-nav-active');
                let oldOverlay = document.querySelector('.mobile-nav-overly');
                if (oldOverlay) oldOverlay.remove();
            });
        }

        // 2. Fungsi Buka/Tutup Dropdown Mobile
        dropdownLinks.forEach(link => {
            link.addEventListener('click', function(e) {
                if (window.innerWidth <= 991) {
                    e.preventDefault(); 
                    const parentLi = this.parentElement;
                    parentLi.classList.toggle('active-dropdown');
                }
            });
        });

        // 3. FUNGSI TUTUP SAAT KLIK DI LUAR
        document.addEventListener('click', function(e) {
            if (navbarUl && navbarUl.classList.contains('mobile-menu-active')) {
                // Jika area klik bukan bagian menu DAN bukan tombol ikon
                if (!navbarUl.contains(e.target) && !neoNavToggle.contains(e.target)) {
                    navbarUl.classList.remove('mobile-menu-active');
                    neoNavToggle.classList.remove('bi-x');
                    neoNavToggle.classList.add('bi-list');
                }
            }
        });
    });
</script>