<div class="finance-menu">
    <div class="top-bar">
        <div class="container-xxl">
            <div class="row align-items-center">
                <div class="col-md-6 top-contact">
                    <span><i class="bi bi-telephone"></i> +256772891729</span>
                    <span><i class="bi bi-envelope"></i> info@brecosafaris.com</span>
                </div>
                <div class="col-md-6 top-social">
                    <a href="#"><i class="bi bi-facebook"></i></a>
                    <a href="#"><i class="bi bi-twitter-x"></i></a>
                    <a href="#"><i class="bi bi-youtube"></i></a>
                    <a href="#"><i class="bi bi-instagram"></i></a>
                </div>
            </div>
        </div>
    </div>
    
    <nav class="main-nav">
        <div class="container-xxl">
            <div class="nav-container">
                <div class="logo-container">
                    <?php
                        $custom_logo_id = get_theme_mod('custom_logo');
                        $logo_url = wp_get_attachment_image_src($custom_logo_id, 'full');
                        
                        if ($logo_url) {
                            echo '<a href="' . esc_url(home_url('/')) . '" id="logo-link">';
                            echo '<img src="' . esc_url($logo_url[0]) . '" class="img-fluid logo" alt="' . get_bloginfo('name') . '">';
                            echo '</a>';
                        } else {
                            echo '<a href="' . esc_url(home_url('/')) . '"><h1>' . get_bloginfo('name') . '</h1></a>';
                        }
                    ?>
                </div>

                
                <div class="nav-menu-container">
                    <div class="main-menu-wrapper">
                        <?php
                            wp_nav_menu(array(
                                'theme_location' => 'primary',
                                'container' => false,
                                'menu_class' => 'main-menu',
                                'fallback_cb' => '__return_false',
                                'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
                                'depth' => 3,
                                'walker' => new bootstrap_5_wp_nav_menu_walker()
                            ));
                        ?>
                    </div>
                    
                    <div class="nav-actions">
                        <button class="search-btn" data-bs-toggle="modal" data-bs-target="#searchModal">
                            <i class="bi bi-search"></i>
                        </button>
                        <button class="nav-toggle">
                            <span></span>
                            <span></span>
                            <span></span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </nav>
</div>

<!-- Search Modal -->
<div class="modal fade finance-search-modal" id="searchModal" tabindex="-1" aria-labelledby="searchModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Search Website</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                  <form method="get" action="<?php echo esc_url(home_url('/')); ?>" id="modal-search-form">
                    <div class="input-group position-relative">
                      <input type="text" class="form-control" name="s" id="modal-search-input" placeholder="Enter search terms..." aria-label="Search">
                      <button class="btn btn-primary" type="submit">Search</button>
                    </div>
                    <div id="modal-search-results" class="live-search-results"></div>
                  </form>
                </div>

        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const navToggle = document.querySelector('.nav-toggle');
    const menuWrapper = document.querySelector('.main-menu-wrapper');
    
    if (navToggle && menuWrapper) {
        navToggle.addEventListener('click', function() {
            menuWrapper.style.display = menuWrapper.style.display === 'block' ? 'none' : 'block';
        });
    }
    
    const megaMenus = document.querySelectorAll('.mega-menu');
    megaMenus.forEach(menu => {
        menu.addEventListener('mouseenter', function() {
            const dropdown = this.querySelector('.dropdown-menu');
            if (dropdown) dropdown.style.display = 'block';
        });
        
        menu.addEventListener('mouseleave', function() {
            const dropdown = this.querySelector('.dropdown-menu');
            if (dropdown) dropdown.style.display = 'none';
        });
    });
    
    window.addEventListener('scroll', function() {
        const header = document.querySelector('.main-nav');
        if (window.scrollY > 100) {
            header.classList.add('kpy-sticky');
        } else {
            header.classList.remove('kpy-sticky');
        }
    });
    
    document.querySelectorAll('.dropdown-menu').forEach(dropdown => {
        const items = dropdown.querySelectorAll('li:not(.dropdown-header)');
        const itemCount = items.length;
        
        if (window.innerWidth >= 992) {
            if (itemCount > 15) {
                dropdown.style.width = '1000px';
                items.forEach((item, index) => {
                    if (index >= 15) item.style.width = '25%';
                });
            } else if (itemCount > 10) {
                dropdown.style.width = '750px';
                items.forEach((item, index) => {
                    if (index >= 10) item.style.width = '33.333%';
                });
            } else if (itemCount > 5) {
                dropdown.style.width = '500px';
                items.forEach((item, index) => {
                    if (index >= 5) item.style.width = '50%';
                });
            }
        }
    });
    
    document.addEventListener('click', function(e) {
        if (!e.target.closest('.nav-menu-container') && menuWrapper) {
            if (window.innerWidth <= 991) {
                menuWrapper.style.display = 'none';
            }
        }
    });
});

document.addEventListener('DOMContentLoaded', function() {
  const modalInput  = document.getElementById('modal-search-input');
  const modalResult = document.getElementById('modal-search-results');

  if (modalInput) {
    modalInput.addEventListener('keyup', function() {
      const query = this.value.trim();

      // Clear dropdown if empty or too short
      if (query.length < 2) {
        modalResult.innerHTML = '';
        modalResult.style.display = 'none';
        return;
      }

      // Fetch results from WordPress AJAX
      fetch('<?php echo admin_url("admin-ajax.php"); ?>?action=live_search&term=' + encodeURIComponent(query))
        .then(response => response.text())
        .then(html => {
          modalResult.innerHTML = html;
          modalResult.style.display = 'block';
        });
    });
  }
});

</script>