@php
    use App\Models\GeneralSettings;
    use App\Models\Menus;
    $cartCount = session('totalProducts', 0);

    // Fetch all required options in one query
    $settings = GeneralSettings::whereIn('option', ['_instagram_link', '_facebook_link', '_twitter_link', '_youtube_link','_b_number','_header_logo','_footer_logo','_footer_logo','_b_street_address','_b_email','_b_area_address'])
        ->pluck('value', 'option');
        $menus = Menus::with('menuMeta')->orderBy('number', 'asc')->get();

    $instagramLink = $settings['_instagram_link'] ?? '#';
    $facebookLink = $settings['_facebook_link'] ?? '#';
    $twitterLink = $settings['_twitter_link'] ?? '#';
    $youtubeLink = $settings['_youtube_link'] ?? '#';
    $header_logo = $settings['_header_logo'] ?? '#';
    $footer_logo = $settings['_footer_logo'] ?? '#';

    $b_email = $settings['_b_email'] ?? '#';
    $b_number = $settings['_b_number'] ?? '#';
    $b_street_address = $settings['_b_street_address'] ?? '#';
    $b_area_address = $settings['_b_area_address'] ?? '#';
@endphp

@php
function isActive($menuUrl) {    
    // Convert relative URLs to absolute for comparison
    $fullMenuUrl = url($menuUrl);
    $currentUrl = url()->current();
    
    // Special case for home page
    if ($fullMenuUrl === url('/')) {
        // Check if we're on the home page (either exactly '/' or the base URL)
        return ($currentUrl === url('/')) ? 'active' : '';
    } else {
        // For other pages, use the existing logic
        $menuPath = trim(parse_url($fullMenuUrl, PHP_URL_PATH), '/');
        return request()->is($menuPath . '*') ? 'active' : '';
    }
}
@endphp

<!-- HEADER / NAVBAR -->
<header class="container-fluid px-0">
    <!-- Top-level Row -->
    <div class="row g-0 Nav_Container_1__1">
        <!-- Logo Column -->
        <div class="Nav_Container_1 d-none d-sm-flex align-items-center justify-content-center bg-white py-0">
            <a href="{{ url('/') }}" class="text-decoration-none LOGGOO">
                <img src="{{ asset($header_logo) ?? '#' }}" alt="Logo" class="Logo" />
            </a>
        </div>

        <div class="Nav_Container_2">
            <!-- Top Bar -->
            <div class="top-bar d-none d-sm-block plus-jakarta-sans">
                    <div class="row align-items-center">
                        <div class="col-md-8 d-none d-xl-flex align-items-center text-sm">
                            <div class="me-4 ms-3 d-flex align-items-center">
                                <i class="fa-solid fa-paper-plane me-2"></i>
                                <a href="mailto:{{$b_email}}" class="text-decoration-none position-relative Text-size animated-link">
                                <span class="Text-size">
                                   {{$b_email}}</span>
                                </a>
                            </div>
                            <div class="d-none d-md-flex align-items-center">
                                <i class="fa-solid fa-location-dot me-2"></i>

                                <a href="{{$b_street_address}}"
                                    target="_blank" class="text-decoration-none position-relative Text-size animated-link">
                                    <span class="Text-size">
                                    {{ $b_area_address}}</span>
                                </a>

                            </div>
                        </div>

                        <div
                            class="col-12 col-xl-4 d-flex justify-content-between justify-content-xl-end align-items-center">
                            <div class="d-sm-flex align-items-center d-none">
                                <!-- <div class="position-relative me-2">
                                    <a href="{{ url('contact-us') }}"
                                        class="text-decoration-none animated-link links_hover Text-size">Help</a>
                                </div> -->
                                <!-- <span class="mx-1">/</span>
                                 <div class="position-relative me-2">
                                     <a href="/contact-us"
                                         class="text-decoration-none animated-link links_hover Text-size">Support</a>
                                 </div> -->
                                <!-- <span class="mx-1">/</span> -->
                                <div class="position-relative me-2">
                                    <a href="{{ url('contact-us') }}"
                                        class="text-decoration-none animated-link1 contact_link_hover Text-size">Contact</a>
                                </div>
                            </div>
                            <div class="social-icons ms-5 d-flex">
                            <a href="https://{{ltrim($facebookLink, 'http://')}}" class="text-white links_hover" target="_blank">
                                <i class="fa-brands fa-facebook-f"></i>
                            </a>
                            <a href="https://{{ltrim($twitterLink, 'http://')}}" class="text-white links_hover ms-3" target="_blank">
                                <i class="fa-brands fa-twitter"></i>
                            </a>
                            <a href="https://{{ltrim($youtubeLink, 'http://')}}" class="text-white links_hover ms-3" target="_blank">
                                <i class="fa-brands fa-linkedin-in"></i>
                            </a>
                            <a href="https://{{ltrim($instagramLink, 'http://')}}" class="text-white links_hover ms-3" target="_blank">
                                <i class="fa-brands fa-instagram"></i>
                            </a>
                        </div>
                        </div>
                    </div>
            </div>
            <!-- End Top Bar -->

            <!-- Main Nav -->
            <div class="bg-white">
                <div
                    class="d-flex align-items-center justify-content-between justify-content-sm-end justify-content-xl-between py-3 py-sm-0 ps-1 pe-3 ps-sm-0 pe-sm-0">
                    <div class="d-block d-sm-none">
                        <a href="{{ url('/') }}" class="text-decoration-none">
                            <img src="{{ asset($header_logo) }}" alt="logo"
                                style="width: 185px;" />
                        </a>

                    </div>
                    <!-- Desktop Nav Links -->
                    <!-- <nav class="d-none d-xl-flex navbar-main-links align-items-center gap-4 py-3">
                            <div>
                                <a href="{{ url('home') }}" class="main-nav-link">HOME</a>
                            </div>

                            <div>
                                <a href="{{ url('page/about-us') }}" class="main-nav-link">ABOUT US</a>
                            </div>



                            <div class="Navbar_menu_item">
                                <a href="{{ url('shop') }}" class="main-nav-link">SHOP</a>
                            
                            </div>

                    

                            <a href="{{ url('contact-us') }}" class="main-nav-link">CONTACT US</a>
                        </nav> -->

                        <nav class="d-none d-xl-flex navbar-main-links align-items-center py-2">
                            @forelse ($menus as $menu)
                                @if ($menu->menuMeta->isEmpty())
                                    <!-- Single Link Menu -->
                                    <div>
                                    <a href="{{ url($menu->url) }}" class="main-nav-link {{ isActive($menu->url) }}">
                                        {{ strtoupper($menu->title) }}
                                    </a>
                                    </div>
                                @else
                                    <!-- Dropdown Menu -->
                                    <!-- <div class="Navbar_menu_item">
                                        <a href="{{ url($menu->url) }}"
                                        class="main-nav-link {{ isActive($menu->url) }}">
                                            {{ strtoupper($menu->title) }}
                                        </a>
                                        <ul class="list-unstyled Navbar_menu_dropdown">
                                            @foreach ($menu->menuMeta as $submenu)
                                                <li>
                                                    <a href="{{ url($submenu->url) }}"
                                                    class="{{ isActive($submenu->url) }}">
                                                        {{ $submenu->title }}
                                                    </a>
                                                </li>
                                            @endforeach
                                        </ul>
                                    </div> -->
                                @endif
                            @empty
                                <!-- Optional: Fallback content if there are no menus -->
                            @endforelse
                        </nav>





                    <!-- Right Section: Phone, Cart, "Order Now" & Mobile Menu -->
                    <div class="d-flex align-items-center gap-3 gap-xl-4">
                        <!-- Phone -->
                        <div class="d-none d-xl-flex align-items-center shake-hover-wrapper">
                            <div class="shake-hover">
                                <i class="main-header__call__icon  icon-mobile fs-2 text_color_red"></i>
                            </div>
                            <div class="ms-2 d-none d-md-block">
                                <div class="text-muted" style="font-size: 0.75rem">
                                    CALL ANYTIME
                                </div>
                                <a href="tel:{{$b_number}}" class="text-decoration-none FW_BOLD_A">
                                    <div class="fw-bold">{{$b_number}}</div>
                                </a>
                            </div>
                        </div>




                        <!-- Mobile Canvas -->
                        <div>
                            <button class="btn Toggle_button d-block d-xl-none" type="button" data-bs-toggle="offcanvas"
                                data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
                                <i class="fa-solid fa-bars"></i>
                            </button>

                            <div class="offcanvas offcanvas-start offcanvas_background_color" tabindex="-1"
                                id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
                                <div class="offcanvas-header">
                                    <a href="{{ url('/') }}" class="text-decoration-none">
                                        <img src="{{ asset($footer_logo) }}" class="Logo"
                                            alt="Logo" />
                                    </a>

                                    <button type="button" class="btn close_btn" data-bs-dismiss="offcanvas"
                                        aria-label="Close">
                                        <i class="fa-solid fa-xmark"></i>
                                    </button>
                                </div>
                                <div class="offcanvas-body text-white">
                                    <nav class="sidebar">
                                        <div class="d-flex flex-column">
                                            <!-- Menu Items -->
                                            <div class="flex-grow-1 w-100">
                                            @foreach($menus as $menu)
                                                <div class="menu-item">
                                                    <button class="menu-button" data-menu="{{ strtoupper($menu->title) }}">
                                                        <div class="d-flex align-items-center gap-3">
                                                            <a href="{{ url($menu->url) }}" class="text-decoration-none">
                                                                <span>{{ strtoupper($menu->title) }}</span>
                                                            </a>
                                                        </div>
                                                        @if($menu->menuMeta->isNotEmpty())
                                                            <div class="dropdown-icon-bg">
                                                                <i class="fa fa-angle-down dropdown-icon"></i>
                                                            </div>
                                                        @endif
                                                    </button>
                                                    @if($menu->menuMeta->isNotEmpty())
                                                        <div class="submenu" id="{{ strtoupper($menu->title) }}-submenu">
                                                            @foreach($menu->menuMeta as $meta)
                                                                <button class="submenu-item">
                                                                    <a href="{{ url($meta->url) }}" class="text-decoration-none">
                                                                        <span>{{ $meta->title }}</span>
                                                                    </a>
                                                                </button>
                                                            @endforeach
                                                        </div>
                                                    @endif
                                                </div>
                                            @endforeach
                                        </div>

                                            <!-- Contact Information -->
                                            <div class="header_contact-info">
                                                <div class="contact-item">
                                                    <div class="contact__info">
                                                        <i class="fa-solid fa-envelope"></i>
                                                    </div>
                                                    <a href="mailto:{{$b_email}}" class="text-decoration-none position-relative text-white Text-size animated-link">
                                                    {{$b_email}}
                                                    </a>
                                                </div>
                                                <div class="contact-item">
                                                    <div class="contact__info">
                                                        <i class="fa-solid fa-phone"></i>
                                                    </div>
                                                    <a href="{{$b_street_address}}"
                                                        target="_blank" class="text-white text-decoration-none position-relative text-white Text-size animated-link">
                                                        <span class="Text-size">
                                                        {{ $b_area_address}}</span>
                                                    </a>

                                                </div>

                                                <!-- Social Media Icons -->
                                                <div class="social-icons pt-2 d-flex">
                                                    <a href="https://{{ltrim($facebookLink, 'http://')}}" class="text-white off_links_hover" target="_blank">
                                                        <i class="fa-brands fa-facebook-f"></i>
                                                    </a>
                                                    <a href="https://{{ltrim($twitterLink, 'http://')}}" class="text-white off_links_hover ms-3"  target="_blank">
                                                        <i class="fa-brands fa-twitter"></i>
                                                    </a>
                                                    <a href="https://{{ltrim($youtubeLink, 'http://')}}" class="text-white off_links_hover ms-3"  target="_blank">
                                                        <i class="fa-brands fa-linkedin-in"></i>
                                                    </a>
                                                    <a href="https://{{ltrim($instagramLink, 'http://')}}" class="text-white off_links_hover ms-3"  target="_blank">
                                                        <i class="fa-brands fa-instagram"></i>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </nav>
                                </div>
                            </div>
                        </div>

                        <!-- Vertical Divider (Desktop) -->
                        <div class="vr d-none d-md-block"></div>

                        <!-- Search & Cart -->
                        <div class="d-flex align-items-center gap-3 gap-sm-4">
                            <!-- <button class="btn p-0 text-dark search-icon" id="openSearch">
                                 <i class="fa-solid fa-magnifying-glass Icons__Hover_effect fs-5"></i>
                             </button>

                             <div id="searchModal" class="modal">
                                 <div class="modal-content">
                                     <div class="search-container_navbar">
                                         <input type="text" class="search-input" placeholder="Search Here..." />
                                         <button class="search-button">
                                             <i class="fa-solid fa-magnifying-glass fs-5"></i>
                                         </button>
                                     </div>
                                 </div>
                             </div> -->
                            <!-- End New Search Section -->

                            <!-- Existing Cart Button -->
                            <div class="position-relative">
                                <a href="/cart">
                                    <button class="btn p-0 text-dark Cart_BTN">
                                        <i class="fa-solid fa-cart-shopping Icons__Hover_effect fs-5"></i>
                                    </button>
                                    <span class="cart-badge Icons__Hover_effect">{{ $cartCount }}</span>
                                </a>

                            </div>

                            @if (auth()->check())
                                <div class="Navbar_Profile_ position-relative">
                                    <div class="dropdown">
                                        <button class="btn dropdown-toggle Navbar_Profile__toggle" type="button"
                                            data-bs-toggle="dropdown" aria-expanded="false">

                                            <i class="fa-solid fa-user Icons__Hover_effect"></i>
                                            <div class="nav_profile_name">{{auth()->user()->name}}</div>

                                        </button>
                                        <ul class="dropdown-menu Navbar_Profile__menu">
                                            <li><a class="dropdown-item Navbar_Profile__item"
                                                    href="{{url('my-account')}}">My
                                                    Account</a></li>
                                            <li><a class="dropdown-item Navbar_Profile__item"
                                                    href="{{url('order-history')}}">Order
                                                    History</a></li>
                                            <li>
                                                <hr class="dropdown-divider">
                                            </li>
                                            <form method="POST" class="m-0" action="{{ route('Website.Logout') }}">
                                                @csrf
                                                <button type="submit" class="btn w-100 add-to-cart-btn ">Sign
                                                    Out</button>
                                            </form>
                                        </ul>
                                    </div>
                                </div>
                            @else
                                <div class="position-relative">
                                    <a href="/sign-in">
                                        <button class="btn p-0 text-dark Cart_BTN">
                                            <i class="fa-solid fa-user Icons__Hover_effect"></i>
                                        </button>
                                    </a>
                                </div>
                            @endif



                        </div>



                        <!-- Order Now -->
                        <a href="{{ url('/shop') }}" class="btn-7 d-none d-md-block">
                            <span>Order Now</span>
                            <span class="divider"></span>
                            <i class="icon-meat-3"></i>
                        </a>
                    </div>
                </div>
            </div>
            <!-- End Main Nav -->
        </div>
    </div>
</header>