{{-- Offcanvas (mobile menu + info) --}}
<div class="fix-area">
    <div class="offcanvas__info">
        <div class="offcanvas__wrapper">
            <div class="offcanvas__content">
                <div class="offcanvas__top mb-5 d-flex justify-content-between align-items-center">
                    <div class="offcanvas__logo">
                        <a href="{{ url('/') }}">
                            <img src="{{ asset('assets/img/logo/logo.png') }}" width="136" height="30" alt="Savero logo">
                        </a>
                    </div>
                    <div class="offcanvas__close">
                        <button><i class="fas fa-times"></i></button>
                    </div>
                </div>
                <div class="mobile-menu fix mb-3"></div>
            </div>
        </div>
    </div>
</div>
<div class="offcanvas__overlay"></div>


{{-- Header Bottom (promo + contacts) --}}
<div class="header-bottom-section">
    <div class="container">
        <div class="header-bottom-wrapper">
            <ul class="contact-list">
                <li><i class="fa-solid fa-envelope"></i> <a href="mailto:{{$site?->support_email}}">{{$site?->support_email}}</a></li>
            </ul>
            @if($site?->header_promo_active && $site?->header_promo_html)
                <p>{!! $site->header_promo_html !!}</p>
            @endif
            <div class="flag-wrap">

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

{{-- Main Header / Navbar --}}
<header id="header-sticky" class="header-1 header-2 header-dark" data-opaque-on-scroll="1">
    <div class="container">
        <div class="mega-menu-wrapper">
            <div class="header-main">
                <div class="logo">
                    <a href="{{ url('/') }}" class="header-logo">
                        <img src="{{ asset('assets/img/logo/logo.png') }}" alt="Savero logo" width="136" height="30">
                    </a>
                    <a href="{{ url('/') }}" class="header-logo-2 d-none">
                        <img src="{{ asset('assets/img/logo/logo.png') }}" alt="Savero logo" width="136" height="30">
                    </a>
                </div>

                @if($mainMenu)
                    <div class="mean__menu-wrapper">
                        <div class="main-menu">
                            <nav id="mobile-menu" style="display:block;">
                                @if($mainMenu)
                                    <ul>
                                        @foreach($mainMenu->items->where('is_active', 1) as $top)
                                            @php
                                                $kids = $top->children->where('is_active', 1);
                                                $href = $top->url;
                                                if ($top->type === 'category' && $top->category) {
                                                    $href = route('category.show', $top->category->slug);
                                                }
                                            @endphp

                                            <li class="{{ $kids->count() ? 'has-dropdown' : '' }} {{ $top->css_class }}">
                                                <a href="{{ $href ?: 'javascript:void(0)' }}" target="{{ $top->target }}">
                                                    {{ $top->title }} @if($kids->count())<i class="fa-solid fa-chevron-down"></i>@endif
                                                </a>

                                                {{-- dropdown normal (și sub/sub) --}}
                                                @if($kids->count() && $top->type !== 'megamenu')
                                                    @include('partials.menu-level', ['nodes' => $kids])
                                                @endif

                                                {{-- mega menu carduri (păstrează exact stilul tău) --}}
                                                @if($kids->count() && $top->type === 'megamenu')
                                                    <ul class="submenu has-homemenu">
                                                        <li>
                                                            <div class="homemenu-items">
                                                                @foreach($kids as $card)
                                                                    @continue($card->type !== 'mega_card')
                                                                    @php
                                                                        $img = $card->image_path
                                                                            ? Storage::disk('public')->url($card->image_path)
                                                                            : asset('assets/img/header/home-1.jpg');
                                                                    @endphp
                                                                    <div class="homemenu">
                                                                        <div class="homemenu-thumb">
                                                                            <img src="{{ $img }}" alt="">
                                                                            @if($card->button_text && $card->button_url)
                                                                                <div class="demo-button">
                                                                                    <a href="{{ $card->button_url }}" class="theme-btn">{{ $card->button_text }}</a>
                                                                                </div>
                                                                            @endif
                                                                        </div>
                                                                        <div class="homemenu-content text-center">
                                                                            <h4 class="homemenu-title">{{ $card->title }}</h4>
                                                                        </div>
                                                                    </div>
                                                                @endforeach
                                                            </div>
                                                        </li>
                                                    </ul>
                                                @endif
                                            </li>
                                        @endforeach
                                    </ul>
                                @endif
                            </nav>
                        </div>
                    </div>
                @endif
                <div class="header-right d-flex justify-content-end align-items-center">
                    <a href="#0" class="search-trigger search-icon"><i class="fa-regular fa-magnifying-glass"></i></a>
                    <div class="header__hamburger d-xl-none my-auto">
                        <div class="sidebar__toggle"><i class="fas fa-bars"></i></div>
                    </div>
                </div>

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

{{-- Search Overlay --}}
<div class="search-wrap">
    <div class="search-inner">
        <i class="fas fa-times search-close" id="search-close"></i>
        <div class="search-cell">
            <form method="get" action="{{ route('search') }}">
                <div class="search-field-holder">
                    <input type="search" class="main-search-input" name="q" placeholder="Cercare prodotti..." required>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function(){
            const openBtn   = document.querySelector('.search-trigger');
            const overlay   = document.querySelector('.search-wrap');
            const closeBtn  = document.querySelector('.search-close');
            const input     = document.querySelector('.search-wrap .main-search-input');

            function openSearch(e){
                e?.preventDefault();
                overlay?.classList.add('open');
                setTimeout(()=> input?.focus(), 50);
            }
            function closeSearch(e){
                e?.preventDefault();
                overlay?.classList.remove('open');
            }

            openBtn?.addEventListener('click', openSearch);
            closeBtn?.addEventListener('click', closeSearch);

            document.addEventListener('keydown', (e)=>{
                if (e.key === 'Escape') { closeSearch(); }
            });

            overlay?.addEventListener('click', (e)=>{
                if (e.target === overlay) { closeSearch(); }
            });
        });
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function(){
            const input = document.querySelector('.search-wrap .main-search-input');
            if (!input) return;
            let box = document.createElement('div');
            box.className = 'search-suggest';
            input.parentElement.appendChild(box);

            let t;
            input.addEventListener('input', ()=>{
                clearTimeout(t);
                const q = input.value.trim();
                if (!q) { box.innerHTML=''; box.style.display='none'; return; }
                t = setTimeout(async ()=>{
                    try {
                        const res = await fetch(`{{ route('search.suggest') }}?q=`+encodeURIComponent(q));
                        const data = await res.json();
                        box.innerHTML = data.map(it =>
                            `<br/><a class="suggest-item" href="{{ url('/product') }}/${it.slug}">${it.name}</a>`
                        ).join('');
                        box.style.display = data.length ? 'block' : 'none';
                    } catch(e){ /* noop */ }
                }, 180);
            });
        });
    </script>
    <script>
        // face headerul mai opac când dai scroll
        document.addEventListener('DOMContentLoaded', function () {
            const hdr = document.getElementById('header-sticky');
            if (!hdr) return;
            const onScroll = () => hdr.classList.toggle('scrolled', window.scrollY > 8);
            onScroll();
            window.addEventListener('scroll', onScroll, { passive: true });
        });
    </script>

@endpush

@push('styles')
    <style>
        /* facem doar containerul de input relativ, ca să ancorăm meniul dedesubt */
        .search-field-holder{
            position: relative;
        }

        /* cutia cu sugestii, sub input */
        .search-suggest{
            position:absolute;
            left:0;
            right:0;
            top:100%;
            margin-top:.5rem;
            background:#fff;
            border:1px solid #e5e7eb;
            border-radius:.75rem;
            box-shadow:0 .75rem 1.5rem rgba(0,0,0,.16);
            z-index: 9999;
            padding:.35rem;
            max-height: 260px;
            overflow-y: auto;
        }

        .search-suggest .suggest-item{
            display:block;
            padding:.55rem .75rem;
            color:#111827;
            text-decoration:none;
            border-radius:.55rem;
            font-size: .9rem;

            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;  /* nume lungi → „…” */
        }

        .search-suggest .suggest-item:hover{
            background:#f3f4f6;
        }
    </style>
@endpush