@php
    $categories = \App\Category::where('status',1)->get();
@endphp
<header class="sticky-header">
    <div class="header">
        <div class="container">
            <div class="row">
                <!-- Mobile Menu Buttons -->
                <div class="col-4 d-md-none cat_menu_btn_m">
                    <ul>
                        <li><i class="fa fa-bars" id="cat_menu_mobile_btn"></i></li>
                        <li><i class="fa fa-search" id="search_mobile_btn"></i></li>
                    </ul>
                </div>
                
                <!-- Logo -->
                <div class="col-md-3 col-7 logo-m">
                    <div class="logo">
                        <a href="{{route('home')}}">
                            <img  src="{{$web_settings->get_logo ? asset($web_settings->get_logo->file_url) : asset('frontEnd/images/no_image.png')}}" alt="Logo"style="height:70px;">
                        </a>
                    </div>
                </div>

                <!-- Search Form -->
                <div class="col-md-6 py-md-3 d-none d-md-block">
                    <div class="search">
                        <form action="{{route('search')}}" method="get">
                            <select name="category" id="category" class="search-select">
                                <option value="">ক্যাটেগরীজ</option>
                                @foreach($categories as $cat)
                                    <option value="{{$cat->id}}">{{$cat->category_name}}</option>
                                @endforeach
                            </select>
                            <input type="text" name="query" class="search-input" placeholder="সার্চ করুন">
                            <button type="submit" class="search-btn"></button>
                        </form>
                    </div>
                </div>

                <!-- Cart and Phone -->
                <div class="col-md-3 text-md-right text-center py-3 cart-m">
                    <span class="cart-number d-none d-md-inline-block">
                        <i class="fa fa-phone"></i> {{$web_settings->website_phone ?? null}}
                    </span>
                    <div class="cart d-inline-block position-relative">
                        @if(Cart::getContent()->count() > 0)
                            <span class="badge badge-danger rounded-circle">{{Cart::getContent()->count()}}</span>
                        @endif
                        <a href="{{route('checkout')}}">
                            <i style="color: #fff" class="fa fa-2x fa-shopping-cart"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Mobile Category Menu -->
        <div class="cat_menu_m">
            <ul>
                <li><a href="{{route('home')}}">Home</a></li>
                @foreach($categories as $cat)
                    <li><a href="{{route('single.category', $cat->id)}}">{{$cat->category_name}}</a></li>
                @endforeach
            </ul>
        </div>

        <!-- Mobile Search Form -->
        <div class="search-form-m">
            <form action="{{route('search')}}" method="get">
                <input type="text" name="query" class="form-control" placeholder="সার্চ করুন" autocomplete="off">
                <button type="submit"><i class="fa fa-search"></i></button>
            </form>
            <button class="search_btnclose">
                <i class="fa fa-times-circle"></i>
            </button>
        </div>
    </div>

    <!-- Desktop Navigation -->
    <div class="header-bottom d-md-block d-none"style="background-color:#967259">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="cat_menu">
                        <ul>
                            <li><a href="{{route('home')}}">Home</a></li>
                            @foreach($categories as $cat)
                                <li><a href="{{route('single.category', $cat->id)}}">{{$cat->category_name}}</a></li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>
<style>
    .sticky-header {
    position: relative;
    width: 100%;
    z-index: 999;
    transition: all 0.3s ease;
}

.sticky-header.is-sticky {
    position: fixed;
    top: 0;
    left: 0;
    background-color: #ffffff; /* Add background for better visibility */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

</style>
<script>
    document.addEventListener('DOMContentLoaded', function () {
    const header = document.querySelector('.sticky-header');
    const stickyOffset = header.offsetTop;

    window.addEventListener('scroll', function () {
        if (window.scrollY > stickyOffset) {
            header.classList.add('is-sticky');
        } else {
            header.classList.remove('is-sticky');
        }
    });
});

</script>