<?php
    // Vous pouvez lire ce tableau via config('navigation')
    $items = [
        [
            'label'  => "Accueil",
            'type'   => 'route',            // route | url
            'route'  => 'home',
            'active' => 'home',
            'icon'   => null,
            'show_on' => ['desktop' => true, 'mobile' => true],
        ],
        [
            'label'  => "Le cabinet",
            'type'   => 'route',
            'route'  => 'cabinet',
            'active' => 'cabinet',
            'icon'   => null,
            'show_on' => ['desktop' => true, 'mobile' => true],
        ],
        [
            'label'  => "Nos solutions",
            'type'   => 'dropdown',        // dropdown = a des enfants
            'active' => 'solutions.*',
            'icon'   => null,
            'show_on' => ['desktop' => true, 'mobile' => true],
            'children' => [
                [
                    'label'  => "Recrutement",
                    'type'   => 'route',
                    'route'  => 'solutions.recrutement',
                    'active' => 'solutions.recrutement',
                ],
                [
                    'label'  => "Formation",
                    'type'   => 'route',
                    'route'  => 'solutions.formation',
                    'active' => 'solutions.formation',
                ],
                [
                    'label'  => "Accompagnement RH",
                    'type'   => 'route',
                    'route'  => 'solutions.accompagnement',
                    'active' => 'solutions.accompagnement',
                ],
            ],
        ],
        [
            'label'  => "Nos offres",
            'type'   => 'route',
            'route'  => 'careers',
            'active' => 'careers',
            'icon'   => null,
            'show_on' => ['desktop' => true, 'mobile' => true],
        ],
//        [
//            'label'  => "L'actualité",
//            'type'   => 'route',
//            'route'  => 'news.index',
//            'active' => 'news.*',
//            'icon'   => null,
//            'show_on' => ['desktop' => true, 'mobile' => true],
//        ],
        [
            'label'  => "Contact",
            'type'   => 'route',
            'route'  => 'contact',
            'active' => 'contact',
            'class' => 'btn btn-block text-sm md:text-md',
            'icon'   => null,
            'keep_visible' => true, // ou ['md' => 'hidden'] pour cacher à partir de md
            'show_on' => ['desktop' => true, 'mobile' => false],
        ],
        [
            'label'    => null,
            'type'     => 'url',
            'keep_visible' => true,
            'url'      => 'https://www.linkedin.com/company/le-cabinet-rh-lcrh/',
            'title' => "Notre page linkedin",
            'class' => 'text-lg md:text-3xl flex items-center',
            'external' => true,
            'icon'     => 'icon-[bi--linkedin]', // optionnel si vous avez un système d’icônes
            'show_on'  => ['desktop' => true, 'mobile' => false],
        ]
    ];

        $showOn = fn($item, $place) => $item['show_on'][$place] ?? true;

        $makeUrl = function(array $item) {
            return ($item['type'] ?? 'route') === 'url'
                ? ($item['url'] ?? '#')
                : (isset($item['route']) ? route($item['route']) : '#');
        };

        $isActive = function(array $item) {
            $type = $item['type'] ?? 'route';

            // Dropdown : actif si pattern de l’item OU si un enfant est actif
            if ($type === 'dropdown') {
                $self = !empty($item['active']) ? request()->routeIs($item['active']) : false;
                $child = false;
                foreach ($item['children'] ?? [] as $c) {
                    if (($c['type'] ?? 'route') === 'route') {
                        $pat = $c['active'] ?? $c['route'] ?? null;
                        if ($pat && request()->routeIs($pat)) { $child = true; break; }
                    }
                }
                return $self || $child;
            }

            // Route simple
            if ($type === 'route') {
                $pat = $item['active'] ?? $item['route'] ?? null;
                return $pat ? request()->routeIs($pat) : false;
            }

            return false;
        };

        // Petit tri pour garder "Contact" + liens externes dans la zone d’actions (à droite),
        // tout le reste au centre. Adapte si tu veux une clé "position" dans la config.
        $main = [];
        $actions = [];
        foreach ($items as $it) {
            if (($it['label'] ?? '') === 'Contact' || !empty($it['external'])) {
                $actions[] = $it;
            } else {
                $main[] = $it;
            }
        }
?>

<header id="header" class="sticky top-0 z-50 bg-light transition-shadow duration-300 ease-in-out">
    <div class="container">
        <nav class="py-6 border-b-2 border-primary">
            <div class="flex items-center gap-3 justify-between">
                <!-- Logo -->
                <a href="<?php echo e(route('home')); ?>" class="text-2xl font-bold">
                    <img class="logo-brand" alt="Logo LCRH" src="<?php echo e(asset('images/logos/brand.png')); ?>"/>
                </a>

                <!-- Menu desktop (centre) -->
                <ul class="flex space-x-6 w-full justify-evenly items-center" style="flex: 1;">
                    <?php $__currentLoopData = $main; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $i => $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <?php if($showOn($item, 'desktop')): ?>
                            <?php $active = $isActive($item); ?>

                            <?php if(($item['type'] ?? 'route') === 'dropdown'): ?>
                                <li class="<?php echo e(isset($item['keep_visible']) && $item['keep_visible'] ? '' : 'hidden lg:flex'); ?> relative <?php echo e($active ? 'active' : ''); ?>">
                                    <button
                                        type="button"
                                        class="flex items-center gap-1"
                                        data-dropdown-toggle="desktop-dd-<?php echo e($i); ?>"
                                        aria-expanded="false"
                                        aria-controls="desktop-dd-<?php echo e($i); ?>"
                                    >
                                        <?php echo e($item['label']); ?>

                                        <i class="icon-[lsicon--triangle-down-filled]"></i>
                                    </button>
                                    <ul id="desktop-dd-<?php echo e($i); ?>" class="menu-dropdown">
                                        <?php $__currentLoopData = $item['children'] ?? []; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $c): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                            <?php
                                                $cUrl = $makeUrl($c);
                                                $cActive = ($c['type'] ?? 'route') === 'route'
                                                  ? request()->routeIs($c['active'] ?? $c['route'] ?? '')
                                                  : false;
                                            ?>
                                            <li class="<?php echo e($cActive ? 'active' : ''); ?>">
                                                <a href="<?php echo e($cUrl); ?>"><?php echo e($c['label']); ?></a>
                                            </li>
                                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                    </ul>
                                </li>
                            <?php else: ?>
                                <li class="<?php echo e(isset($item['keep_visible']) && $item['keep_visible'] ? '' : 'hidden lg:flex'); ?> <?php echo e($active ? 'active' : ''); ?>">
                                    <a href="<?php echo e($makeUrl($item)); ?>">
                                        <?php if(!empty($item['icon'])): ?> <i class="<?php echo e($item['icon']); ?>"></i> <?php endif; ?>
                                        <?php echo e($item['label']); ?>

                                    </a>
                                </li>
                            <?php endif; ?>
                        <?php endif; ?>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </ul>

                <!-- Actions à droite (desktop) + bouton mobile -->
                <div class="flex gap-3 lg:gap-5 items-center">
                    <div class="flex gap-3 lg:gap-5 items-center">
                        <?php $__currentLoopData = $actions; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <?php if($showOn($item, 'desktop')): ?>
                                <?php $url = $makeUrl($item); ?>
                                <a href="<?php echo e($url); ?>"
                                   <?php if(!empty($item['external'])): ?> <?php echo $item['title'] ? 'title="'.htmlentities($item['title']).'"' : ''; ?> target="_blank" rel="noopener" <?php endif; ?>
                                   class="<?php echo e(isset($item['keep_visible']) && $item['keep_visible'] ? '' : 'hidden lg:flex'); ?> <?php echo e($item['class'] ?? 'text-sm lg:text-md btn btn-block'); ?>">
                                    <?php if(!empty($item['icon'])): ?> <i class="<?php echo e($item['icon']); ?> mr-1"></i> <?php endif; ?>
                                    <?php echo e($item['label']); ?>

                                </a>
                            <?php endif; ?>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </div>

                    <!-- Bouton mobile (ouvre le drawer overlay) -->
                    <a href="#" title="Ouvrir le menu de navigation"  id="mobile-btn" aria-controls="mobile-overlay" aria-expanded="false"
                       class="text-2xl lg:hidden icon-[material-symbols--menu-rounded]"></a>
                </div>
            </div>

            <!-- Overlay + Drawer mobile -->
            <div id="mobile-overlay" class="fixed inset-0 z-[60] hidden lg:hidden" role="dialog" aria-modal="true" aria-labelledby="mobile-drawer-title">
                <!-- Backdrop -->
                <div id="mobile-backdrop" class="absolute inset-0 bg-black/40 opacity-0 transition-opacity duration-300"></div>

                <!-- Drawer -->
                <aside id="mobile-drawer" class="absolute right-0 top-0 h-full w-80 max-w-[85vw] bg-white shadow-xl translate-x-full transition-transform duration-300 will-change-transform">
                    <div class="p-4 border-b flex items-center justify-between">
                        <h2 id="mobile-drawer-title" class="text-lg font-semibold">Menu</h2>
                        <button title="Fermer le menu de navigation" id="mobile-close" aria-label="Fermer le menu" class="text-2xl leading-none px-2">&times;</button>
                    </div>

                    <nav class="p-2">
                        <ul class="divide-y">
                            <?php $__currentLoopData = $items; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $i => $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <?php if($showOn($item, 'mobile')): ?>
                                    <?php if(($item['type'] ?? 'route') === 'dropdown'): ?>
                                        <li>
                                            <button class="flex items-center w-full justify-between px-4 py-3 hover:text-primary focus:outline-none"
                                                    data-mobile-sub-toggle="mobile-dd-<?php echo e($i); ?>" aria-expanded="false" aria-controls="mobile-dd-<?php echo e($i); ?>">
                                                <?php echo e($item['label']); ?>

                                                <svg class="ml-2 w-4 h-4 transition-transform" viewBox="0 0 20 20" fill="currentColor"><path d="M5 8l5 5 5-5"/></svg>
                                            </button>
                                            <ul id="mobile-dd-<?php echo e($i); ?>" class="hidden pl-6 pb-3">
                                                <?php $__currentLoopData = $item['children'] ?? []; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $c): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                    <li>
                                                        <a href="<?php echo e($makeUrl($c)); ?>" class="block px-2 py-2 hover:bg-gray-50 rounded"><?php echo e($c['label']); ?></a>
                                                    </li>
                                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                            </ul>
                                        </li>
                                    <?php else: ?>
                                        <li>
                                            <a href="<?php echo e($makeUrl($item)); ?>"
                                               <?php if(!empty($item['external'])): ?> <?php echo $item['title'] ? 'title="'.htmlentities($item['title']).'"' : ''; ?> target="_blank" rel="noopener" <?php endif; ?>
                                               class="block px-4 py-3 hover:bg-gray-50">
                                                <?php if(!empty($item['icon'])): ?> <i class="<?php echo e($item['icon']); ?> mr-1"></i> <?php endif; ?>
                                                <?php echo e($item['label']); ?>

                                            </a>
                                        </li>
                                    <?php endif; ?>
                                <?php endif; ?>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </ul>
                    </nav>
                </aside>
            </div>

            <script>
                document.addEventListener('DOMContentLoaded', () => {
                    // --- Desktop: dropdowns (multiples) ---
                    const ddButtons = document.querySelectorAll('[data-dropdown-toggle]');
                    ddButtons.forEach(btn => {
                        btn.addEventListener('click', (e) => {
                            e.stopPropagation();
                            const id = btn.getAttribute('data-dropdown-toggle');
                            const menu = document.getElementById(id);
                            const expanded = btn.getAttribute('aria-expanded') === 'true';

                            // Ferme tous les autres
                            document.querySelectorAll('.menu-dropdown').forEach(m => m.classList.remove('menu-open'));
                            document.querySelectorAll('[data-dropdown-toggle]').forEach(b => b.setAttribute('aria-expanded', 'false'));

                            // Ouvre/ferme celui-ci
                            if (!expanded) {
                                menu?.classList.add('menu-open');
                                btn.setAttribute('aria-expanded', 'true');
                            } else {
                                menu?.classList.remove('menu-open');
                                btn.setAttribute('aria-expanded', 'false');
                            }
                        });
                    });

                    // Fermer si clic en dehors
                    document.addEventListener('click', () => {
                        document.querySelectorAll('.menu-dropdown').forEach(m => m.classList.remove('menu-open'));
                        ddButtons.forEach(b => b.setAttribute('aria-expanded', 'false'));
                    });

                    // --- Mobile drawer ---
                    const mobileBtn = document.getElementById('mobile-btn');
                    const overlay  = document.getElementById('mobile-overlay');
                    const backdrop = document.getElementById('mobile-backdrop');
                    const drawer   = document.getElementById('mobile-drawer');
                    const btnClose = document.getElementById('mobile-close');

                    function openDrawer() {
                        overlay.classList.remove('hidden');
                        drawer.getBoundingClientRect(); backdrop.getBoundingClientRect(); // reflow
                        drawer.classList.remove('translate-x-full');
                        backdrop.classList.add('opacity-100');
                        document.documentElement.classList.add('overflow-hidden');
                        mobileBtn.setAttribute('aria-expanded', 'true');
                    }
                    function closeDrawer() {
                        drawer.classList.add('translate-x-full');
                        backdrop.classList.remove('opacity-100');
                        mobileBtn.setAttribute('aria-expanded', 'false');
                        const onEnd = () => {
                            overlay.classList.add('hidden');
                            document.documentElement.classList.remove('overflow-hidden');
                            drawer.removeEventListener('transitionend', onEnd);
                        };
                        drawer.addEventListener('transitionend', onEnd);
                    }

                    mobileBtn.addEventListener('click', (e) => {
                        e.preventDefault();
                        overlay.classList.contains('hidden') ? openDrawer() : closeDrawer();
                    });
                    btnClose.addEventListener('click', closeDrawer);
                    backdrop.addEventListener('click', closeDrawer);
                    document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && !overlay.classList.contains('hidden')) closeDrawer(); });

                    // --- Mobile submenus (accordéon) ---
                    document.querySelectorAll('[data-mobile-sub-toggle]').forEach(btn => {
                        btn.addEventListener('click', (e) => {
                            e.preventDefault();
                            const id = btn.getAttribute('data-mobile-sub-toggle');
                            const sub = document.getElementById(id);
                            const expanded = btn.getAttribute('aria-expanded') === 'true';
                            sub?.classList.toggle('hidden');
                            btn.setAttribute('aria-expanded', expanded ? 'false' : 'true');
                            const icon = btn.querySelector('svg,i'); icon?.classList.toggle('rotate-180');
                        });
                    });

                    // --- Header shadow on scroll ---
                    const header = document.getElementById('header');
                    window.addEventListener('scroll', () => header.classList.toggle('header-sticky', window.scrollY > 0));
                });
            </script>
        </nav>
    </div>
</header>
<?php /**PATH /var/www/html/lcrh_v2/resources/views/common/header.blade.php ENDPATH**/ ?>