@if (isset($header) && !empty($header))
    @php
        $chunks = array_chunk($header, ceil(count($header) / 2));
        $left = isset($chunks[0]) ? $chunks[0] : [];
        $right = isset($chunks[1]) ? $chunks[1] : [];
    @endphp
@endif


@if (!isset($data['sections']))
    <header class="navbar navbar-expand-lg header_group lightscroll">
    @else
        @foreach ($data['sections'] ?? [] as $key => $sectionHeader)
            @if ($key === 0 && isset($sectionHeader['slug']) && $sectionHeader['slug'] === 'hero')
                <header class="navbar navbar-expand-lg header_group">
                @elseif($key === 0 && isset($sectionHeader['slug']) && $sectionHeader['slug'] === 'contact-banner')
                    <header class="navbar navbar-expand-lg header_group">
                    @else
                        @if ($key == 0)
                            <header class="navbar navbar-expand-lg header_group lightscroll">
                        @endif
            @endif
        @endforeach
@endif
<div class="container container_ ">
    <a class="navbar_brand_phone" href="{{ url('/') }}">
        <img src="{{ asset('images/kimaya-group.png') }}" alt="Logo Kimaya">
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
        aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav navbar_left mt-3 mt-md-0">
            <li class="nav-item @if ($data['slug'] == 'home') active @endif">
                <a class="nav-link" aria-current="page" href="/">Home</a>
            </li>
            @foreach ($left ?? [] as $key => $itemLeft)
                @if ($key != 0)
                    @if (isset($itemLeft['dropdown']))
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle"
                                @if ($itemLeft['link'] != null) href="{{ $itemLeft['link'] }}"
                                @else
                                href="#" role="button" data-bs-toggle="dropdown"
                                aria-expanded="false" @endif
                                id="Drop{{ $itemLeft['name'] ?? '' }}">
                                {{ $itemLeft['name'] ?? '' }}
                            </a>
                            <ul class="dropdown-menu" aria-labelledby="Drop{{ $itemLeft['name'] ?? '' }}">
                                @foreach ($itemLeft['dropdown'] as $itemDropLeft)
                                    <li>
                                        <a class="dropdown-item" target="_blank"
                                            href="{{ url($itemDropLeft['link'] ?? '') }}">{{ $itemDropLeft['name'] ?? '' }}</a>
                                    </li>
                                @endforeach
                            </ul>
                        </li>
                    @else
                        <li
                            class="nav-item  
                            @if ($data['slug'] == $itemLeft['link'] || strpos($data['slug'], $itemLeft['link']) !== false) ) active @endif   
                        ">
                            <a class="nav-link" aria-current="page"
                                href="{{ url($itemLeft['link'] ?? '') }}">{{ $itemLeft['name'] ?? '' }}</a>
                        </li>
                    @endif
                @endif
            @endforeach
        </ul>
        <a class="navbar_brand" href="{{ url('/') }}">
            <img src="{{ asset('images/kimaya-group.png') }}" alt="Logo Kimaya">
        </a>
        <ul class="navbar-nav navbar_right">
            @foreach ($right ?? [] as $itemRight)
                @if (isset($itemRight['dropdown']))
                    <li class="nav-item dropdown @if ($itemRight['name'] == 'Our promotions') nav_item_promotions @endif">
                        <a class="nav-link dropdown-toggle" href="#"
                            @if ($itemLeft['link'] != null) href="{{ $itemLeft['link'] }}"
                            @else 
                            href="#"
                            role="button" data-bs-toggle="dropdown" aria-expanded="false" @endif
                            id="Drop{{ str_replace(' ', '', $itemRight['name']) ?? '' }}">
                            {{ $itemRight['name'] ?? '' }}
                        </a>
                        <ul class="dropdown-menu"
                            aria-labelledby="Drop{{ str_replace(' ', '', $itemRight['name']) ?? '' }}">
                            @foreach ($itemRight['dropdown'] as $itemDropRight)
                                <li>
                                    <a class="dropdown-item" target="_blank"
                                        href="{{ url($itemDropRight['link'] ?? '') }}">{{ $itemDropRight['name'] ?? '' }}</a>
                                </li>
                            @endforeach
                        </ul>
                    </li>
                @else
                    <li class="nav-item @if ($data['slug'] == $itemRight['link'] || strpos($data['slug'], $itemRight['link']) !== false) ) active @endif">
                        <a class="nav-link @if ($itemRight['link'] == '/news') d-none @endif" aria-current="page"
                            href="{{ url($itemRight['link'] ?? '') }}">{{ $itemRight['name'] ?? '' }}</a>
                    </li>
                @endif
            @endforeach
        </ul>
    </div>
</div>
</header>

@push('scripts')
    <script>
        $(document).ready(function() {
            var timer;
            $('.nav-item.dropdown').hover(function() {
                clearTimeout(timer);
                $('.dropdown-menu').removeClass('show');
                $(this).find('.dropdown-menu').addClass('show');
            }, function() {
                var $dropdownMenu = $(this).find('.dropdown-menu');
                timer = setTimeout(function() {
                    $dropdownMenu.removeClass("show");
                }, 500);
            });
        });
    </script>
@endpush