@php
    $routeName = Request::route()->getName();
    $currentUrl = request()->url();
@endphp
{{-- Navigation Bar --}}
<header class="navbar">
    <div class="navbar-left col-lg-2 col-md-3 col-sm-4 col-sx-6">
        <div class="menu-icon" id="menu-icon">
            <svg width="27" height="24" viewBox="0 0 27 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect width="27" height="4" fill=" #ffffff " />
                <rect y="10" width="27" height="4" fill="  #ffffff " />
                <rect y="20" width="27" height="4" fill=" #ffffff " />
            </svg>
        </div>
        <div class="logo">
            <img src="{{ asset('logo/logo-header.png') }}" style="width:130px" />
        </div>
    </div>
    <div class="justify-content-around navbar-joiner col-lg-10 col-md-9 col-sm-7 col-sx-6">
        <div class="navbar-middle col-lg-5 col-md-5 col-sm-5 col-sx-5">
            <div class="page-title d-flex align-items-center">
                <svg width="18" height="18" viewBox="0 0 18 18" fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M17 14.0626V8.631C17 8.1079 16.9995 7.84621 16.9346 7.60273C16.877 7.38705 16.7825 7.18289 16.6546 6.99841C16.5102 6.79024 16.3096 6.61762 15.9074 6.27314L11.1074 2.16123C10.3608 1.52165 9.9875 1.20201 9.5674 1.08038C9.1972 0.973207 8.8026 0.973207 8.4324 1.08038C8.0126 1.20193 7.6398 1.52126 6.89436 2.15987L2.09277 6.27314C1.69064 6.61762 1.49004 6.79024 1.3457 6.99841C1.21779 7.18289 1.12255 7.38705 1.06497 7.60273C1 7.84621 1 8.1079 1 8.631V14.0626C1 14.9749 1 15.4309 1.15224 15.7908C1.35523 16.2705 1.74432 16.6522 2.23438 16.8509C2.60192 17 3.06786 17 3.99974 17C4.93163 17 5.39808 17 5.76562 16.8509C6.25568 16.6522 6.64467 16.2706 6.84766 15.7908C6.9999 15.431 7 14.9749 7 14.0625V13.0835C7 12.0021 7.8954 11.1255 9 11.1255C10.1046 11.1255 11 12.0021 11 13.0835V14.0625C11 14.9749 11 15.431 11.1522 15.7908C11.3552 16.2706 11.7443 16.6522 12.2344 16.8509C12.6019 17 13.0679 17 13.9997 17C14.9316 17 15.3981 17 15.7656 16.8509C16.2557 16.6522 16.6447 16.2705 16.8477 15.7908C16.9999 15.4309 17 14.9749 17 14.0626Z"
                        stroke="#1E3A70" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                </svg>
                <p>
                    <a href="{{ route('home') }}">Principale</a>
                    /
                    @if (is_array($title))
                        @foreach ($title as $itemTitle => $itemRoute)
                            <a href="{{ $itemRoute }}">{{ $itemTitle }}</a>@if (!$loop->last) / @endif
                        @endforeach
                    @else
                        <b>{{ $title }}</b>
                    @endif
                </p>
            </div>
        </div>
        <div class="navbar-right col-lg-5 col-md-6 col-sm-5 col-sx-5">
            <div class="dropdown col-lg-4 col-md-6 col-sm-12 col-sx-4">Organisation active</div>
            <div class="dropdown col-lg-8 col-md-6 col-sm-12 col-sx-8 justify-content-between align-items-center"
                style="border-left: 1px solid #DDDDDD; padding-left: 10px">
                <p>Toutes Organisations</p>
                <p>&#9662;</p>
            </div>
        </div>
    </div>
</header>
<div class="burger-menu-overlay"></div>

@include('navigations.burger-menu')
<script>
    document.addEventListener("DOMContentLoaded", () => {
        const burgerMenu = document.querySelector(".menu-icon");
        const overlay = document.querySelector(".burger-menu-overlay");
        const closeButton = document.querySelector(".close-button");
        const items = document.querySelectorAll(".item");

        if (!burgerMenu || !overlay || !closeButton) return;

        const toggleMenu = (open) => {
            document.body.classList.toggle("menu-open", open);
        };

        burgerMenu.addEventListener("click", () => toggleMenu(true));

        items.forEach((item) => {
            const arrow = item.querySelector(".arrow");
            const children = item.nextElementSibling; // Select the sibling `.children`

            item.addEventListener("click", () => {
                // Check if the sibling exists and has the class 'children'
                if (!children || !children.classList.contains("children")) {
                    return; // If not, exit the function
                }

                // Close all other expanded children elements
                document.querySelectorAll(".children.expanded").forEach((otherChildren) => {
                    if (otherChildren !== children) {
                        otherChildren.classList.remove("expanded");
                        const otherArrow = otherChildren.previousElementSibling
                            ?.querySelector(".arrow");
                        if (otherArrow) {
                            otherArrow.classList.remove("rotate");
                        }
                    }
                });

                // Toggle current children element
                children.classList.toggle("expanded");
                arrow.classList.toggle("rotate");
            });
        });

        [overlay, closeButton].forEach(el => el.addEventListener("click", () => toggleMenu(false)));

        document.addEventListener("keydown", (e) => {
            if (e.key === "Escape") toggleMenu(false);
        });
    });
</script>