<?php 
    // GET CURRENT PAGE NAME
    $current_page = basename($_SERVER['PHP_SELF']); 

    // AUTO DETECT POST TYPE PAGES
    if($current_page == 'post.php' && isset($row['Posttype'])){
        $type = strtolower($row['Posttype']);
        if($type == 'song') $current_page = 'songs.php';
        if($type == 'video') $current_page = 'videos.php';
        if($type == 'news') $current_page = 'news.php';
        if($type == 'gospel') $current_page = 'gospel.php';
        if($type == 'comedy') $current_page = 'comedy.php';
    }
?>

<link rel="stylesheet" href="includes/navstyle.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
    nav {
        backdrop-filter: blur(10px);
        box-shadow: 0 4px 20px rgba(0,0,0,0.4);
        transition: all 0.3s ease;
    }
    nav li.info .social a {
        transition: all 0.3s ease;
        display: inline-block;
    }
    nav li.info .social a:hover {
        transform: translateY(-3px) scale(1.2);
        color: #ff3d00 !important;
    }
    nav li.info .social a:hover .fa {
        color: #ff3d00 !important;
    }
    .nav-items li a {
        transition: all 0.3s ease;
        display: block;
        padding: 10px 0 7px 0;
        color: #fff;
        text-decoration: none;
        font-weight: 500;
        border-bottom: 3px solid transparent;
    }
    .nav-items li a:hover {
        color: #ff3d00;
        transform: translateX(5px);
    }
    .nav-items li a.active {
        color: #ff3d00;
        border-bottom: 3px solid #ff3d00;
        box-shadow: 0 3px 10px rgba(255,61,0,0.3);
    }
    #menu-toggle-btn {
        transition: all 0.3s ease;
    }
    #menu-toggle-btn:hover {
        transform: rotate(90deg);
        color: #ff3d00 !important;
    }
    .dropdown-content {
        animation: fadeDown 0.3s ease;
    }
    @keyframes fadeDown {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }
    #mobile-social a {
        transition: all 0.3s ease;
    }
    #mobile-social a:hover {
        transform: scale(1.3);
        color: #ff3d00 !important;
    }
    .logo img {
        transition: transform 0.3s ease;
    }
    .logo img:hover {
        transform: scale(1.05);
    }
    
    .search-top-form { 
        position:fixed; top:70px; left:0; width:100%; 
        background:#111; padding:12px; display:none; z-index:99999; 
        box-shadow:0 4px 15px rgba(0,0,0,0.5); border-bottom:3px solid #ff3d00;
    }
    .search-top-form.active { display:flex; align-items:center; gap:10px }
    .search-top-form input { 
        flex:1; height:45px; padding:0 15px; border:2px solid #333; 
        background:#000; color:#fff; outline:none; font-size:15px; border-radius:6px
    }
    .search-top-form input:focus { border-color:#ff3d00 }
    .search-top-form button { 
        height:45px; padding:0 20px; background:#ff3d00; border:none; 
        color:#fff; cursor:pointer; font-weight:800; border-radius:6px;
        display:flex; align-items:center; gap:6px; white-space:nowrap
    }
    .search-top-form button:hover { background:#e63500 }
    .search-icon, .cancel-icon { cursor:pointer; padding:0 15px }
    .search-icon:hover { color:#ff3d00 !important }
    
    @media(max-width:911px){
        .search-top-form { padding:10px }
        .search-top-form input, .search-top-form button { height:42px }
    }

    /* Fixed navbar + body padding */
    .navbar{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 9999;
    }

    body{
        padding-top: 70px;
    }
</style>

<nav style="background:#171c24;" class="navbar fixed-top ">

    <li style="margin-left:60px;" class='info'>
        <p class="social">
            <a href="#" class="p-2"><span style="color:white;" class="fa fa-facebook"></span></a>
            <a href="#" class="p-2"><span style="color:white;" class="fa fa-twitter"></span></a>
            <a href="#" class="p-2"><span style="color:white;" class="fa fa-instagram"></span></a>
            <a href="#" class="p-2"><span style="color:white;" class="fa fa-youtube-play"></span></a>
            <a href="#" class="p-2"><span style="color:white;" class="fa fa-whatsapp"></span></a>
        </p>
    </li>

    <div class="menu-icon" id="menu-toggle-btn"><span style="margin-left:10px; color:#fff; font-size:20px" class="fa fa-bars"></span></div>

    <div class="logo" style="width:150px">
        <a href="index.php"><img src="images/logo1.png" height="50" width="150px" alt="M2nice"></a>
    </div>
    
    <div class="nav-items">
        <li><a href="index.php" class="<?php echo ($current_page=='index.php') ? 'active' : ''; ?>">Home</a></li>
        <li><a href="songs" class="<?php echo ($current_page=='songs.php') ? 'active' : ''; ?>">Songs</a></li>
        <li><a href="videos" class="<?php echo ($current_page=='videos.php') ? 'active' : ''; ?>">Videos</a></li>
        <li><a href="news" class="<?php echo ($current_page=='news.php') ? 'active' : ''; ?>">News</a></li>
        <li><a href="gospel" class="<?php echo ($current_page=='gospel.php') ? 'active' : ''; ?>">Gospel</a></li>
        <li><a href="comedy" class="<?php echo ($current_page=='comedy.php') ? 'active' : ''; ?>">Comedy</a></li>
              
        <li class="dropdown">
            <a href="#" class="dropbtn">More <span class="fa fa-caret-down"></span></a>
            <div class="dropdown-content">
                <a href="artists">Artist</a>
                <a href="album_ep">Album/Ep</a>
                <a href="gist">Gist</a>
                <a href="gossip">Gossip</a>
                <a href="politics">Politics</a>
            </div>
        </li>
    </div>

    <div class="search-icon" id="search-btn"><span style="color:#fff" class="fa fa-search"></span></div>
    <div class="cancel-icon" id="search-close" style="display:none"><span style="color:#fff" class="fa fa-times"></span></div>

    <form name="search" action="search.php" class="search-top-form" method="GET">
        <input id="search_input" type="text" name="q" class="search-data" placeholder="Search songs, news, gist..." required>
        <button type="submit"><span class="fa fa-search"></span> Search</button>
    </form>
    
</nav>

<div class="container logo-wrap">
    <div class="row pt-5">
        <div style='margin-top:35px' class="col-12 text-center">
            <h1 class="site-logo"> </h1>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const nav = document.querySelector('nav');
    
    // REMOVED THE 6 LINES HERE

    const toggleBtn = document.getElementById('menu-toggle-btn');
    const navItems = document.querySelector('.nav-items');
    const searchBtn = document.getElementById('search-btn');
    const searchClose = document.getElementById('search-close');
    const searchForm = document.querySelector('.search-top-form');
    let menuOpen = false;

    function closeMenu(){
        menuOpen = false;
        navItems.style.left = '-100%';
        toggleBtn.innerHTML = '<span class="fa fa-bars" style="color:#fff; font-size:20px"></span>';
        document.body.style.overflow = 'auto';
    }

    function setMobileStyle(){
        if(window.innerWidth <= 911){
            navItems.style.position = 'fixed';
            navItems.style.top = '70px';
            navItems.style.left = menuOpen ? '0' : '-100%';
            navItems.style.width = '100%';
            navItems.style.height = '100dvh';
            navItems.style.maxHeight = '100dvh';
            navItems.style.background = '#14141f';
            navItems.style.transition = 'left 0.3s ease';
            navItems.style.zIndex = '999998';
            navItems.style.paddingTop = '20px';
            navItems.style.paddingBottom = '80px';
            navItems.style.textAlign = 'center';
            navItems.style.listStyle = 'none';
            navItems.style.overflowY = 'auto';
            navItems.style.webkitOverflowScrolling = 'touch';
            navItems.style.margin = '0';
            
            let social = nav.querySelector('.info');
            if(social) social.style.display = 'none';
            
            if(!document.getElementById('mobile-social')){
                let socialClone = nav.querySelector('.info').cloneNode(true);
                socialClone.id = 'mobile-social';
                socialClone.style.display = 'flex';
                socialClone.style.justifyContent = 'center';
                socialClone.style.gap = '20px';
                socialClone.style.padding = '20px 0';
                socialClone.style.fontSize = '20px';
                socialClone.style.borderTop = '1px solid #333';
                socialClone.style.marginTop = '15px';
                navItems.appendChild(socialClone);
            }

            document.querySelectorAll('.dropdown-content').forEach(dd => {
                dd.style.position = 'static';
                dd.style.display = 'none';
                dd.style.background = '#222';
                dd.style.width = '100%';
                dd.style.padding = '0';
            });
            document.querySelectorAll('.dropdown-content a').forEach(a => {
                a.style.display = 'block';
                a.style.padding = '12px 0';
            });
        } else {

            // Reset menu state for desktop
            menuOpen = false;

            navItems.style.position = 'static';
            navItems.style.left = '0';
            navItems.style.top = 'auto';
            navItems.style.width = 'auto';
            navItems.style.height = 'auto';
            navItems.style.maxHeight = 'none';
            navItems.style.background = 'transparent';
            navItems.style.transition = '';
            navItems.style.paddingTop = '';
            navItems.style.paddingBottom = '';
            navItems.style.textAlign = '';
            navItems.style.listStyle = '';
            navItems.style.margin = '';
            navItems.style.overflowY = '';
            navItems.style.display = 'flex';
            navItems.style.visibility = 'visible';
            navItems.style.opacity = '1';

            document.body.style.overflow = 'auto';

            toggleBtn.innerHTML =
                '<span class="fa fa-bars" style="color:#fff; font-size:20px"></span>';

            let social = nav.querySelector('.info');
            if (social) social.style.display = 'block';

            let mobileSocial = document.getElementById('mobile-social');
            if (mobileSocial) mobileSocial.remove();

            document.querySelectorAll('.dropdown-content').forEach(dd => {
                dd.style.display = '';
                dd.style.position = '';
                dd.style.background = '';
                dd.style.width = '';
                dd.style.padding = '';
            });
        }
    }
    setMobileStyle();
    // window.addEventListener('resize', setMobileStyle);

    // ADDED: Fix for orientation change on tablet/phone
    window.addEventListener('orientationchange', function () {
        setTimeout(setMobileStyle, 200);
    });

    // TOGGLE MENU
    toggleBtn.onclick = (e) => {
        e.preventDefault();
        menuOpen = !menuOpen;
        if(menuOpen){
            navItems.style.left = '0';
            toggleBtn.innerHTML = '<span class="fa fa-times" style="color:#ff3d00; font-size:20px"></span>';
            document.body.style.overflow = 'hidden';
        } else {
            closeMenu();
        }
    }

    // SEARCH TOGGLE - CLOSES MENU FIRST
    searchBtn.onclick = (e) => {
        e.preventDefault();
        if(menuOpen) closeMenu();
        searchForm.classList.add('active');
        searchBtn.style.display = 'none';
        searchClose.style.display = 'block';
        setTimeout(()=>document.getElementById('search_input').focus(), 100);
    }
    searchClose.onclick = (e) => {
        e.preventDefault();
        searchForm.classList.remove('active');
        searchBtn.style.display = 'block';
        searchClose.style.display = 'none';
    }

    document.querySelectorAll('.nav-items > li > a').forEach(link => {
        link.onclick = () => {
            if(window.innerWidth <= 911 && !link.classList.contains('dropbtn')){
                closeMenu();
            }
        }
    });

    document.querySelectorAll('.dropbtn').forEach(btn=>{
        btn.addEventListener('click', e=>{
            if(window.innerWidth <= 911){
                e.preventDefault();
                let dropdown = btn.nextElementSibling;
                dropdown.style.display = dropdown.style.display === 'block' ? 'none' : 'block';
            }
        });
    });
})
</script>