@include('includes.tailwind')
@once
<style>
    #mysidebar .travelagent-panel {
        margin: 8px 10px 14px;
        padding: 12px;
        border-radius: 10px;
        background: linear-gradient(140deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .07));
        border: 1px solid rgba(255, 255, 255, .22);
        box-shadow: 0 8px 20px rgba(0, 0, 0, .16);
        backdrop-filter: blur(3px);
    }

    #mysidebar .travelagent-panel .title {
        margin: 0;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, .85);
    }

    #mysidebar .travelagent-panel .subtitle {
        margin: 6px 0 0;
        font-size: 12px;
        color: rgba(255, 255, 255, .75);
        line-height: 1.45;
    }

    #mysidebar .travelagent-search {
        margin: 0 10px 12px;
        padding: 8px 10px;
        border-radius: 8px;
        border: 1px solid rgba(255, 255, 255, .2);
        background: rgba(0, 0, 0, .12);
        display: flex;
        align-items: center;
        gap: 8px;
    }

    #mysidebar .travelagent-search i {
        color: rgba(255, 255, 255, .8);
        font-size: 19px;
    }

    #mysidebar .travelagent-search input {
        width: 100%;
        border: none;
        outline: none;
        background: transparent;
        color: #fff;
        font-size: 13px;
    }

    #mysidebar .travelagent-search input::placeholder {
        color: rgba(255, 255, 255, .65);
    }

    #mysidebar .travelagent-section {
        margin: 4px 14px 4px;
        padding-bottom: 5px;
        border-bottom: 1px dashed rgba(255, 255, 255, .24);
        font-size: 11px;
        letter-spacing: .09em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, .72);
    }

    #mysidebar .travelagent-section .section-short {
        display: none;
    }

    #mysidebar .travelagent-section .section-full {
        display: inline;
    }

    body.sidebar-mini #mysidebar .travelagent-section .section-short {
        display: inline;
    }

    body.sidebar-mini #mysidebar .travelagent-section .section-full {
        display: none;
    }

    body.sidebar-mini #mysidebar:hover .travelagent-section .section-short {
        display: none;
    }

    body.sidebar-mini #mysidebar:hover .travelagent-section .section-full {
        display: inline;
    }

    #mysidebar .travelagent-menu-entry {
        transition: transform .14s ease, opacity .14s ease;
    }

    #mysidebar .travelagent-menu-entry.is-hidden {
        display: none;
    }

    #mysidebar .travelagent-menu-entry .nav-link {
        border-left: 2px solid transparent;
    }

    #mysidebar .travelagent-menu-entry.active .nav-link {
        border-left-color: rgba(255, 255, 255, .9);
        background: rgba(255, 255, 255, .16);
    }

    #mysidebar .travelagent-menu-entry .menu-title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #mysidebar .travelagent-empty-state {
        margin: 6px 14px 4px;
        padding: 10px;
        border-radius: 8px;
        border: 1px dashed rgba(255, 255, 255, .28);
        font-size: 12px;
        color: rgba(255, 255, 255, .82);
        text-align: center;
        display: none;
    }

    #mysidebar .travelagent-empty-state.is-visible {
        display: block;
    }

    #mysidebar .nav-item-flyout>.nav-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    #mysidebar .nav-item-flyout>.nav-link .flyout-label {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
    }

    #mysidebar .nav-item-flyout>.nav-link .flyout-caret {
        margin-left: 8px;
        font-size: 15px;
        opacity: .9;
        transition: transform .18s ease;
    }

    #mysidebar .nav-item-flyout.is-open>.nav-link .flyout-caret {
        transform: rotate(-180deg);
    }

    #mysidebar .travelagent-flyout {
        display: none;
        position: fixed;
        min-width: 250px;
        max-width: 320px;
        max-height: min(300px, calc(100vh - 24px));
        overflow-y: auto;
        overflow-x: hidden;
        padding: 10px 8px;
        border-radius: 0 4px 4px 0;
        background: rgba(99, 146, 166, .98);
        box-shadow: 0 10px 24px rgba(0, 0, 0, .25);
        z-index: 1065;
    }

    #mysidebar .nav-item-flyout.is-open>.travelagent-flyout {
        display: block;
    }

    #mysidebar .travelagent-flyout .nav-link {
        margin: 0;
        border-radius: 4px;
        padding: 6px 8px;
    }

    #mysidebar .travelagent-flyout .nav-item.active>.nav-link,
    #mysidebar .travelagent-flyout .nav-link:hover,
    #mysidebar .travelagent-flyout .nav-link:focus {
        background: rgba(255, 255, 255, .15);
    }

    @media (max-width: 991px) {
        #mysidebar .travelagent-panel {
            margin: 8px 12px;
        }

        #mysidebar .travelagent-search {
            margin: 0 12px 10px;
        }

        #mysidebar .travelagent-flyout {
            position: static;
            min-width: 100%;
            max-width: 100%;
            max-height: none;
            margin: 0 12px 6px;
            border-radius: 4px;
            box-shadow: none;
        }

        #mysidebar .nav-item-flyout.is-open>.nav-link .flyout-caret {
            transform: rotate(0deg);
        }
    }
</style>
@endonce

<li class="nav-item">
    <div class="travelagent-search">
        <i class="material-icons">search</i>
        <input type="text" id="travelagent-menu-search" placeholder="Buscar en el menú..." autocomplete="off">
    </div>
</li>

@php($mostrarHeaderCategorias = true)
@foreach($menus as $nombreCategoria => $menusCategoria)
@if(!empty($menusCategoria))
@if($nombreCategoria === 'Principales')
<li class="nav-item travelagent-section text-center" data-section-label="principales">
    <span class="section-short">PRIN</span>
    <span class="section-full">Principales</span>
</li>
{{-- Menús sueltos (sin categoría) como Dashboard --}}
@foreach($menusCategoria as $menu)
<li class="nav-item travelagent-menu-entry{{ $activePage == $menu->active_page ? ' active' : '' }}"
    data-search="{{ \Illuminate\Support\Str::lower($menu->nombre_largo . ' ' . $menu->nombre_corto) }}">
    <a class="nav-link" href="{{ url($menu->url) }}">
        <i class="material-icons">{{ config("menu-icons.menus.{$modulo}.{$menu->nombre_largo}", 'list') }}</i>
        <p class="normal-case menu-title">{{ $menu->nombre_largo }}</p>
    </a>
</li>
@endforeach
@else
{{-- Menús con categoría (con dropdown) --}}
@php($categoriaKey = \Illuminate\Support\Str::slug($nombreCategoria))
@if($mostrarHeaderCategorias)
<li class="nav-item travelagent-section text-center mt-2" data-section-label="categorias">
    <span class="section-short">CAT</span>
    <span class="section-full">Categorias</span>
</li>
@php($mostrarHeaderCategorias = false)
@endif
<li class="nav-item nav-item-flyout travelagent-menu-entry {{ $menuParent == strtolower($nombreCategoria) ? 'active is-open' : '' }}"
    data-flyout-owner="{{ $categoriaKey }}"
    data-search="{{ \Illuminate\Support\Str::lower($nombreCategoria) }}">
    <a class="nav-link nav-link-flyout-toggle" href="#" data-flyout-target="{{ $categoriaKey }}"
        aria-haspopup="true" aria-expanded="{{ $menuParent == strtolower($nombreCategoria) ? 'true' : 'false' }}">
        <span class="flyout-label">
            <i class="material-icons">{{ config("menu-icons.menus.{$modulo}.{$nombreCategoria}.icon", 'list') }}</i>
            <p class="normal-case menu-title">{{ __($nombreCategoria) }}</p>
        </span>
        <i class="material-icons flyout-caret">chevron_right</i>
    </a>
    <ul class="nav travelagent-flyout" id="flyout-{{ $categoriaKey }}" data-flyout-id="{{ $categoriaKey }}">
        @foreach($menusCategoria as $menu)
        <li class="nav-item travelagent-menu-entry{{ $activePage == $menu->active_page ? ' active' : '' }}"
            data-search="{{ \Illuminate\Support\Str::lower($menu->nombre_largo . ' ' . $menu->nombre_corto . ' ' . $nombreCategoria) }}">
            <a class="nav-link" href="{{ url($menu->url) }}">
                <span class="flex items-center gap-2">
                    @if(isset($hasLogoSubMenu) && $hasLogoSubMenu)
                    <i class="material-icons" style="font-size:20px;">
                        {{ config("menu-icons.menus.{$modulo}.{$nombreCategoria}.sub.{$menu->nombre_largo}",'list') }}
                    </i>
                    @else
                    <span>{{ $menu->nombre_corto }}</span>
                    @endif
                    <span class="normal-case menu-title">{{ $menu->nombre_largo }}</span>
                </span>
            </a>
        </li>
        @endforeach
    </ul>
</li>
@endif
@endif
@endforeach

<li class="nav-item">
    <div class="travelagent-empty-state" id="travelagent-empty-state">
        No encontramos opciones con ese criterio.
    </div>
</li>


@if($showConfiguracion)

<li class="nav-item travelagent-section text-center" data-section-label="otros">
</li>

<li class="nav-item travelagent-section text-center" data-section-label="otros">
    <span class="section-short">OTROS</span>
    <span class="section-full">Otros</span>
</li>
@include('layouts.navbars.navs.sidebars.includes.buttonConfiguracionGeneralComponent')
@endif

@once
<script>
    (function() {
        var sidebar = document.getElementById('mysidebar');
        if (!sidebar) {
            return;
        }

        var desktopQuery = window.matchMedia('(min-width: 992px)');
        var flyoutItems = Array.prototype.slice.call(sidebar.querySelectorAll('.nav-item-flyout'));
        var searchInput = document.getElementById('travelagent-menu-search');
        var emptyState = document.getElementById('travelagent-empty-state');
        var menuEntries = Array.prototype.slice.call(sidebar.querySelectorAll('.travelagent-menu-entry'));
        var sectionLabels = Array.prototype.slice.call(sidebar.querySelectorAll('.travelagent-section'));

        function closeAll(exceptItem) {
            flyoutItems.forEach(function(item) {
                if (exceptItem && item === exceptItem) {
                    return;
                }

                item.classList.remove('is-open');
                var toggle = item.querySelector('.nav-link-flyout-toggle');
                if (toggle) {
                    toggle.setAttribute('aria-expanded', 'false');
                }
            });
        }

        function normalizeText(value) {
            return (value || '').toLowerCase().trim();
        }

        function applySearchFilter() {
            if (!searchInput) {
                return;
            }

            var query = normalizeText(searchInput.value);
            var visibleCount = 0;

            menuEntries.forEach(function(entry) {
                var entryText = normalizeText(entry.getAttribute('data-search'));
                var isVisible = query.length === 0 || entryText.indexOf(query) !== -1;

                if (entry.classList.contains('nav-item-flyout')) {
                    var flyoutVisibleCount = 0;
                    var flyoutEntries = Array.prototype.slice.call(entry.querySelectorAll('.travelagent-flyout .travelagent-menu-entry'));
                    flyoutEntries.forEach(function(childEntry) {
                        var childText = normalizeText(childEntry.getAttribute('data-search'));
                        var childVisible = query.length === 0 || childText.indexOf(query) !== -1;
                        childEntry.classList.toggle('is-hidden', !childVisible);
                        if (childVisible) {
                            flyoutVisibleCount += 1;
                        }
                    });

                    isVisible = query.length === 0 || isVisible || flyoutVisibleCount > 0;
                }

                entry.classList.toggle('is-hidden', !isVisible);
                if (isVisible) {
                    visibleCount += 1;
                }
            });

            sectionLabels.forEach(function(label) {
                var nextEntries = [];
                var sibling = label.nextElementSibling;
                while (sibling && !sibling.classList.contains('travelagent-section')) {
                    if (sibling.classList.contains('travelagent-menu-entry')) {
                        nextEntries.push(sibling);
                    }
                    sibling = sibling.nextElementSibling;
                }

                var hasVisibleEntries = nextEntries.some(function(entry) {
                    return !entry.classList.contains('is-hidden');
                });

                label.classList.toggle('is-hidden', !hasVisibleEntries && query.length > 0);
            });

            if (emptyState) {
                emptyState.classList.toggle('is-visible', visibleCount === 0 && query.length > 0);
            }
        }

        var closeTimers = new WeakMap();

        function clearCloseTimer(item) {
            var timer = closeTimers.get(item);
            if (timer) {
                clearTimeout(timer);
                closeTimers.delete(item);
            }
        }

        function closeImmediately(item, toggle) {
            clearCloseTimer(item);
            item.classList.remove('is-open');
            if (toggle) {
                toggle.setAttribute('aria-expanded', 'false');
            }
        }

        function placeFlyout(item) {
            if (!desktopQuery.matches) {
                return;
            }

            var flyout = item.querySelector('.travelagent-flyout');
            if (!flyout) {
                return;
            }

            flyout.style.top = '';
            flyout.style.left = '';

            var triggerRect = item.getBoundingClientRect();
            var flyoutRect = flyout.getBoundingClientRect();
            var top = triggerRect.top - 25;
            var left = triggerRect.right;
            var bottomOverflow = top + flyoutRect.height - window.innerHeight;

            if (bottomOverflow > 0) {
                top = Math.max(10, top - bottomOverflow - 10);
            }

            if (left + flyoutRect.width > window.innerWidth - 12) {
                left = Math.max(12, triggerRect.left - flyoutRect.width - 12);
            }

            flyout.style.top = top + 'px';
            flyout.style.left = left + 'px';
        }

        function isSidebarStableForFlyout() {
            if (!desktopQuery.matches) {
                return true;
            }

            // In mini mode, the sidebar animates from 80px to 260px on hover.
            // Avoid opening flyouts during this transition to prevent bad positioning.
            if (document.body.classList.contains('sidebar-mini')) {
                var currentWidth = sidebar.getBoundingClientRect().width;
                return currentWidth >= 245;
            }

            return true;
        }

        function keepAlignedWhileAnimating(item) {
            var startedAt = Date.now();

            function tick() {
                if (!item.classList.contains('is-open')) {
                    return;
                }

                placeFlyout(item);
                if (Date.now() - startedAt < 320) {
                    window.requestAnimationFrame(tick);
                }
            }

            window.requestAnimationFrame(tick);
        }

        function openFlyout(item, toggle) {
            closeAll(item);
            item.classList.add('is-open');
            toggle.setAttribute('aria-expanded', 'true');
            placeFlyout(item);
            keepAlignedWhileAnimating(item);
        }

        function tryOpenFlyout(item, toggle) {
            if (isSidebarStableForFlyout()) {
                openFlyout(item, toggle);
                return;
            }

            window.setTimeout(function() {
                if (!isSidebarStableForFlyout()) {
                    return;
                }

                if (item.matches(':hover') || item.classList.contains('is-open')) {
                    openFlyout(item, toggle);
                }
            }, 140);
        }

        flyoutItems.forEach(function(item) {
            var toggle = item.querySelector('.nav-link-flyout-toggle');
            var flyout = item.querySelector('.travelagent-flyout');

            if (!toggle || !flyout) {
                return;
            }

            toggle.addEventListener('click', function(event) {
                event.preventDefault();
                var shouldOpen = !item.classList.contains('is-open');

                closeAll(item);
                if (shouldOpen) {
                    tryOpenFlyout(item, toggle);
                }
            });

            item.addEventListener('mouseenter', function() {
                if (!desktopQuery.matches) {
                    return;
                }

                clearCloseTimer(item);
                tryOpenFlyout(item, toggle);
            });

            item.addEventListener('mouseleave', function() {
                if (!desktopQuery.matches) {
                    return;
                }

                closeImmediately(item, toggle);
            });

            flyout.addEventListener('mouseenter', function() {
                if (!desktopQuery.matches) {
                    return;
                }

                clearCloseTimer(item);
            });

            flyout.addEventListener('mouseleave', function() {
                if (!desktopQuery.matches) {
                    return;
                }

                closeImmediately(item, toggle);
            });
        });

        document.addEventListener('click', function(event) {
            if (!sidebar.contains(event.target)) {
                closeAll();
            }
        });

        if (searchInput) {
            searchInput.addEventListener('input', applySearchFilter);
        }

        window.addEventListener('resize', function() {
            var openItem = sidebar.querySelector('.nav-item-flyout.is-open');
            if (openItem) {
                placeFlyout(openItem);
            }
        });

        var activeItem = sidebar.querySelector('.nav-item-flyout.active');
        if (activeItem) {
            var activeToggle = activeItem.querySelector('.nav-link-flyout-toggle');
            if (activeToggle) {
                activeToggle.setAttribute('aria-expanded', 'true');
            }
            placeFlyout(activeItem);
        }

        applySearchFilter();
    })();
</script>
@endonce