<?php
$sidebar = SiteHelpers::menus('sidebar');
$active = Request::segment(1);
?>

<aside class="left-sidebar df-sidebar-modern">
  <!-- MODERN HEADER -->
    <div class="df-sidebar-head">

        <a href="<?php echo e(url('user/profile')); ?>" class="df-profile-card">
            <div class="df-avatar-wrap">
                <?php echo SiteHelpers::avatar(42); ?>

                <span class="df-online-dot"></span>
            </div>

            <div class="df-profile-info">
                <strong><?php echo e(Session::get('fid')); ?></strong>
                <span><?php echo e(Session::get('eid')); ?></span>
            </div>

            <i class="ti-angle-right df-profile-arrow"></i>
        </a>

        <button type="button"
                id="menu-search-toggle"
                class="df-sidebar-search"
                aria-label="Cari menu">

            <span class="df-search-icon">
                <i class="fa fa-search"></i>
            </span>

            <span class="df-search-placeholder">
                Cari menu...
            </span>

            <span class="df-search-shortcut">
                ⌘ K
            </span>

        </button>

    </div>

<!-- Sidebar scroll-->
            <div class="scroll-sidebar">
                <!-- Sidebar navigation-->
                <nav class="sidebar-nav">
                    <ul id="sidebarnav">
                <?php if((string) auth()->user()?->group_id === '1'): ?>
                <li class="<?php echo e($active === 'virtual-office' ? 'active' : ''); ?>">
                    <a href="<?php echo e(route('virtual-office.index')); ?>"><i class="fa fa-building"></i> <span class="hide-menu">Virtual Office</span></a>
                </li>
                <?php endif; ?>
                <?php $__currentLoopData = $sidebar; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $menu): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>   

                    <?php if($menu['module'] =='separator'): ?>
                      <li class="nav-small-cap"> <span> <?php echo e($menu['menu_name']); ?> </span></li>  

                    <?php else: ?>
                    <li>
                        <?php
                            // Array warna untuk icon, bisa ditambah sesuai kebutuhan
                            $iconColors = ['#e74c3c', '#f1c40f', '#2ecc71', '#3498db', '#9b59b6', '#1abc9c', '#e67e22', '#34495e'];
                            $colorIndex = $loop->index % count($iconColors);
                        ?>
                        <?php if(count($menu['childs']) > 0 ): ?> 
                            <a class="has-arrow waves-effect waves-dark" href="#" aria-expanded="false">
                                <i class="<?php echo e($menu['menu_icons']); ?>" style="color: <?php echo e($iconColors[$colorIndex]); ?>;"></i>
                                <span class="hide-menu">
                                    <?php echo e((isset($menu['menu_lang']['title'][session('lang')]) ? $menu['menu_lang']['title'][session('lang')] : $menu['menu_name'])); ?>

                                </span>
                            </a>
                        <?php else: ?>
                            <a href="<?php echo e(url($menu['module'])); ?>" >
                                <i class="<?php echo e($menu['menu_icons']); ?>" style="color: <?php echo e($iconColors[$colorIndex]); ?>;"></i>
                                <span class="hide-menu">
                                    <?php echo e((isset($menu['menu_lang']['title'][session('lang')]) ? $menu['menu_lang']['title'][session('lang')] : $menu['menu_name'])); ?>

                                </span>
                            </a>                               
                        <?php endif; ?> 

                            <!-- LEVEL 2 -->
                         <?php if(count($menu['childs']) > 0 ): ?> 
                            <ul aria-expanded="false" >
                             <?php $__currentLoopData = $menu['childs']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $menu2): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                 <li>
                                    <?php if(count($menu2['childs']) > 0 ): ?>
                                    <a class="has-arrow" href="#" aria-expanded="false">
                                        <?php echo e((isset($menu2['menu_lang']['title'][session('lang')]) ? $menu2['menu_lang']['title'][session('lang')] : $menu2['menu_name'])); ?>

                                    </a>
                                    <?php else: ?> 
                                    <a href="<?php echo e(url($menu2['module'])); ?>">
                                        <?php echo e((isset($menu2['menu_lang']['title'][session('lang')]) ? $menu2['menu_lang']['title'][session('lang')] : $menu2['menu_name'])); ?>

                                    </a>

                                    <?php endif; ?>

                                    <?php if(count($menu2['childs']) > 0 ): ?>
                                        <ul aria-expanded="false" >
                                            <?php $__currentLoopData = $menu2['childs']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $menu3): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                 <li>
                                                    <a href="<?php echo e(url($menu3['module'])); ?>" style="white-space: normal;">
                                                        <?php echo e((isset($menu3['menu_lang']['title'][session('lang')]) ? $menu3['menu_lang']['title'][session('lang')] : $menu3['menu_name'])); ?>

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


                                        </ul>


                                    <?php endif; ?> 


                                </li>

                             <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

                            </ul> 
                         <?php endif; ?>


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

            </ul>
        </nav>
        <!-- End Sidebar navigation -->
    </div>
    <!-- End Sidebar scroll-->
</aside>


<div id="menu-search-overlay"
     class="df-search-overlay"
     aria-hidden="true">

    <div id="menu-search-popup"
         class="df-search-modal"
         role="dialog"
         aria-modal="true"
         aria-label="Cari menu">

        <div class="df-search-modal-head">

            <div class="df-search-title">
                <span class="df-search-title-icon">
                    <i class="fa fa-search"></i>
                </span>

                <div>
                    <strong>Cari Menu</strong>
                    <small>Temukan fitur yang ingin Anda buka</small>
                </div>
            </div>

            <button type="button"
                    id="menu-search-close"
                    class="df-search-close"
                    aria-label="Tutup">
                <i class="ti-close"></i>
            </button>

        </div>


        <div class="df-search-input-wrap">

            <i class="fa fa-search"></i>

            <input type="text"
                   id="menu-search-input"
                   placeholder="Ketik nama menu..."
                   autocomplete="off">

            <kbd>ESC</kbd>

        </div>


        <div class="df-search-hint">
            <i class="ti-info-alt"></i>
            <span>Gunakan kata seperti dashboard, laporan, kebun, produksi, pengguna, dan lainnya.</span>
        </div>


        <div id="menu-search-results"
             class="df-search-results">

            <div class="df-search-empty df-search-start">
                <div class="df-empty-icon">
                    <i class="fa fa-search"></i>
                </div>
                <strong>Mulai mencari menu</strong>
                <span>Ketik minimal beberapa huruf untuk melihat hasil.</span>
            </div>

        </div>

    </div>
</div>


<style>
/* =========================================================
   DIGITAL FARMING SIDEBAR
   Modern, clean, compact and compatible with Sximo
   ========================================================= */

:root {
    --df-green: #087f6b;
    --df-green-dark: #056653;
    --df-green-soft: #e7f7f2;
    --df-text: #26364a;
    --df-muted: #8a9aad;
    --df-border: #e9eef3;
    --df-sidebar-bg: #ffffff;
    --df-hover: #f6faf9;
}

#sidebarnav{
    margin-bottom: 150px;
}

/* =========================================================
   SIDEBAR CONTAINER
   ========================================================= */

.df-sidebar-modern {
    background: var(--df-sidebar-bg) !important;
    border-right: 1px solid var(--df-border);
    box-shadow: 4px 0 18px rgba(15, 23, 42, .035);
    z-index: 1000;
    overflow: hidden;
}


/* =========================================================
   PROFILE HEADER
   ========================================================= */

.df-sidebar-head {
    padding: 15px 13px 13px;
    border-bottom: 1px solid #edf1f4;
    background:
        radial-gradient(circle at 90% 0%, rgba(16,185,129,.08), transparent 35%),
        #fff;
}

.df-profile-card {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 60px;
    padding: 9px 10px;
    border-radius: 14px;
    color: var(--df-text) !important;
    text-decoration: none !important;
    transition: background .2s ease, transform .2s ease;
}

.df-profile-card:hover {
    background: #f7faf9;
    transform: translateY(-1px);
}

.df-avatar-wrap {
    position: relative;
    width: 42px;
    min-width: 42px;
    height: 42px;
    /* margin-right: 11px; */
}

.df-avatar-wrap img {
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 4px 12px rgba(15,23,42,.10);
}

.df-online-dot {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 10px;
    height: 10px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #22c55e;
}

.df-profile-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    flex: 1;
    margin-left: 11px;
}

.df-profile-info strong {
    color: #334155;
    font-size: 13px;
    line-height: 1.3;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.df-profile-info span {
    margin-top: 3px;
    color: #94a3b8;
    font-size: 10px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.df-profile-arrow {
    margin-left: 8px;
    color: #b4c0cc;
    font-size: 10px;
    transition: transform .2s ease;
}

.df-profile-card:hover .df-profile-arrow {
    color: var(--df-green);
    transform: translateX(2px);
}


/* =========================================================
   SIDEBAR SEARCH BUTTON
   ========================================================= */

.df-sidebar-search {
    width: 100%;
    height: 42px;
    margin-top: 9px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid #e7edf2;
    border-radius: 11px;
    background: #f8fafb;
    color: #94a3b8;
    cursor: pointer;
    text-align: left;
    transition: all .2s ease;
}

.df-sidebar-search:hover {
    border-color: #b9e5da;
    background: #f3faf7;
    color: var(--df-green);
    box-shadow: 0 3px 12px rgba(8,127,107,.06);
}

.df-search-icon {
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    background: #fff;
    color: #7b8da1;
    box-shadow: 0 1px 4px rgba(15,23,42,.05);
}

.df-search-icon i {
    font-size: 11px;
}

.df-search-placeholder {
    flex: 1;
    font-size: 11px;
    font-weight: 500;
}

.df-search-shortcut {
    padding: 3px 6px;
    border: 1px solid #dfe6ec;
    border-radius: 5px;
    background: #fff;
    color: #a1adba;
    font-size: 9px;
    font-weight: 600;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.df-sidebar-scroll {
    height: calc(100vh - 143px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 10px 9px 25px;
}

.df-sidebar-scroll::-webkit-scrollbar {
    width: 4px;
}

.df-sidebar-scroll::-webkit-scrollbar-thumb {
    background: #d9e2e8;
    border-radius: 10px;
}

.df-sidebar-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.df-nav > ul,
.df-nav ul {
    padding-left: 0;
    margin: 0;
    list-style: none;
}

.df-nav > ul > li {
    margin: 2px 0;
}


/* =========================================================
   SECTION LABEL
   ========================================================= */

.df-nav-section {
    padding: 17px 11px 7px !important;
    margin-top: 3px !important;
}

.df-nav-section span {
    color: #a1adba;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
}


/* =========================================================
   MAIN MENU ITEM
   ========================================================= */

.df-nav-link {
    position: relative;
    min-height: 45px;
    padding: 6px 9px !important;
    display: flex !important;
    align-items: center;
    border-radius: 11px;
    color: #607083 !important;
    text-decoration: none !important;
    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;
}

.df-nav-link:hover {
    background: #f5faf8 !important;
    color: var(--df-green) !important;
}

.df-menu-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    margin-right: 10px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: var(--df-icon-bg);
    color: var(--df-icon-color);
    transition: all .2s ease;
}

.df-menu-icon i {
    font-size: 14px;
}

.df-menu-text {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    line-height: 1.3;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.df-nav-arrow,
.df-chevron {
    width: 22px;
    min-width: 22px;
    display: flex;
    justify-content: center;
    color: #c2ccd5;
    font-size: 8px;
    transition: transform .2s ease, color .2s ease;
}

.df-nav-link:hover .df-nav-arrow {
    color: var(--df-green);
    transform: translateX(2px);
}


/* =========================================================
   ACTIVE MENU
   ========================================================= */

.df-nav > ul > li.active > .df-nav-link {
    background: linear-gradient(
        90deg,
        #e7f8f2 0%,
        #f4fbf9 100%
    ) !important;
    color: var(--df-green-dark) !important;
    box-shadow: inset 3px 0 0 var(--df-green);
}

.df-nav > ul > li.active > .df-nav-link .df-menu-icon {
    box-shadow: 0 4px 10px rgba(8,127,107,.08);
}

.df-nav > ul > li.active > .df-nav-link .df-nav-arrow {
    color: var(--df-green);
}


/* =========================================================
   SUBMENU
   ========================================================= */

.df-submenu {
    position: relative;
    padding: 5px 0 5px 19px !important;
    margin: 0 !important;
}

.df-submenu::before {
    content: "";
    position: absolute;
    left: 25px;
    top: 6px;
    bottom: 6px;
    width: 1px;
    background: #e7edf1;
}

.df-submenu > li {
    position: relative;
}

.df-submenu-link {
    min-height: 34px;
    padding: 6px 9px 6px 18px !important;
    display: flex !important;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    color: #78899b !important;
    font-size: 11px;
    font-weight: 500;
    text-decoration: none !important;
    transition: all .18s ease;
}

.df-submenu-link:hover {
    background: #f7faf9 !important;
    color: var(--df-green) !important;
    padding-left: 21px !important;
}

.df-submenu-dot {
    width: 5px;
    height: 5px;
    min-width: 5px;
    border-radius: 50%;
    background: #c7d1d9;
    transition: background .2s ease, transform .2s ease;
}

.df-submenu-link:hover .df-submenu-dot {
    background: var(--df-green);
    transform: scale(1.25);
}

.df-submenu-link > i {
    margin-left: auto;
    color: #c2ccd5;
    font-size: 8px;
}

.df-submenu-level3 {
    padding-left: 18px !important;
}

.df-submenu-level3::before {
    left: 23px;
}


/* =========================================================
   SEARCH OVERLAY
   ========================================================= */

.df-search-overlay {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding-top: 11vh;
    background: rgba(15, 23, 42, .35);
    backdrop-filter: blur(4px);
}

.df-search-overlay.is-open {
    display: flex;
    animation: dfFadeIn .18s ease;
}

@keyframes dfFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}


/* =========================================================
   SEARCH MODAL
   ========================================================= */

.df-search-modal {
    width: 580px;
    max-width: calc(100vw - 30px);
    max-height: 72vh;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.8);
    border-radius: 18px;
    background: rgba(255,255,255,.98);
    box-shadow: 0 30px 70px rgba(15,23,42,.25);
    animation: dfSearchUp .22s ease;
}

@keyframes dfSearchUp {
    from {
        opacity: 0;
        transform: translateY(12px) scale(.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.df-search-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 17px 18px 14px;
    border-bottom: 1px solid #edf1f4;
}

.df-search-title {
    display: flex;
    align-items: center;
    gap: 11px;
}

.df-search-title-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: var(--df-green-soft);
    color: var(--df-green);
}

.df-search-title-icon i {
    font-size: 14px;
}

.df-search-title > div {
    display: flex;
    flex-direction: column;
}

.df-search-title strong {
    color: #334155;
    font-size: 14px;
}

.df-search-title small {
    margin-top: 3px;
    color: #94a3b8;
    font-size: 10px;
}

.df-search-close {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 9px;
    background: #f1f5f9;
    color: #718096;
    cursor: pointer;
}

.df-search-close:hover {
    background: #feecec;
    color: #dc2626;
}

.df-search-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    margin: 14px 16px 8px;
    border: 1px solid #dce5eb;
    border-radius: 12px;
    background: #f8fafb;
    transition: all .2s ease;
}

.df-search-input-wrap:focus-within {
    border-color: #7dd3c0;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(8,127,107,.08);
}

.df-search-input-wrap > i {
    margin-left: 13px;
    color: #94a3b8;
    font-size: 13px;
}

.df-search-input-wrap input {
    flex: 1;
    min-width: 0;
    height: 46px;
    padding: 0 10px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #334155;
    font-size: 13px;
}

.df-search-input-wrap kbd {
    margin-right: 9px;
    padding: 3px 6px;
    border: 1px solid #dce3e8;
    border-radius: 5px;
    background: #fff;
    color: #9aa7b4;
    font-size: 9px;
}

.df-search-hint {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 17px 10px;
    color: #9aa7b4;
    font-size: 10px;
}

.df-search-hint i {
    color: #60a5a0;
}

.df-search-results {
    max-height: 47vh;
    overflow-y: auto;
    padding: 0 11px 12px;
}

.df-search-results::-webkit-scrollbar {
    width: 4px;
}

.df-search-results::-webkit-scrollbar-thumb {
    background: #d9e2e8;
    border-radius: 10px;
}

.df-search-result-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 11px;
    margin-top: 5px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: #475569 !important;
    text-decoration: none !important;
    transition: all .18s ease;
}

.df-search-result-item:hover {
    background: #f3faf7;
    border-color: #d9eee7;
    color: var(--df-green) !important;
    transform: translateX(2px);
}

.df-search-result-icon {
    width: 30px;
    height: 30px;
    min-width: 30px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #eef8f5;
    color: var(--df-green);
}

.df-search-result-title {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    font-weight: 600;
}

.df-search-result-arrow {
    color: #c0cad4;
    font-size: 9px;
}

.df-search-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 150px;
    padding: 20px;
    text-align: center;
    color: #94a3b8;
}

.df-empty-icon {
    width: 45px;
    height: 45px;
    margin-bottom: 9px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: #f1f7f5;
    color: #70aa9e;
}

.df-search-empty strong {
    color: #64748b;
    font-size: 12px;
}

.df-search-empty span {
    margin-top: 4px;
    font-size: 10px;
}


/* =========================================================
   MINI SIDEBAR
   ========================================================= */

body.mini-sidebar .df-sidebar-modern .df-sidebar-head {
    padding-left: 9px;
    padding-right: 9px;
}

body.mini-sidebar .df-sidebar-modern .df-profile-card {
    justify-content: center;
    padding: 9px 0;
}

body.mini-sidebar .df-sidebar-modern .df-profile-info,
body.mini-sidebar .df-sidebar-modern .df-profile-arrow,
body.mini-sidebar .df-sidebar-modern .df-sidebar-search .df-search-placeholder,
body.mini-sidebar .df-sidebar-modern .df-sidebar-search .df-search-shortcut,
body.mini-sidebar .df-sidebar-modern .df-nav-section,
body.mini-sidebar .df-sidebar-modern .df-menu-text,
body.mini-sidebar .df-sidebar-modern .df-nav-arrow,
body.mini-sidebar .df-sidebar-modern .df-chevron {
    display: none !important;
}

body.mini-sidebar .df-sidebar-modern .df-sidebar-search {
    justify-content: center;
    padding: 0;
}

body.mini-sidebar .df-sidebar-modern .df-search-icon {
    margin: 0;
}

body.mini-sidebar .df-sidebar-modern .df-nav-link {
    justify-content: center;
    padding: 6px !important;
}

body.mini-sidebar .df-sidebar-modern .df-menu-icon {
    margin-right: 0;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .df-sidebar-scroll {
        height: calc(100vh - 143px) !important;
    }

    .df-search-overlay {
        padding-top: 6vh;
    }

    .df-search-modal {
        max-width: calc(100vw - 20px);
        border-radius: 15px;
    }

    .df-search-hint {
        display: none;
    }
}
</style>


<script>
(function () {
    'use strict';

    var toggleBtn = document.getElementById('menu-search-toggle');
    var overlay = document.getElementById('menu-search-overlay');
    var popup = document.getElementById('menu-search-popup');
    var closeBtn = document.getElementById('menu-search-close');
    var input = document.getElementById('menu-search-input');
    var results = document.getElementById('menu-search-results');

    if (!toggleBtn || !overlay || !input || !results) {
        return;
    }

    var searchUrl = '<?php echo e(url("dashboard/filterMenu")); ?>';
    var searchTimer = null;


    /* -----------------------------------------------------
       URL
       ----------------------------------------------------- */

    function buildUrl(module) {
        if (!module) {
            return '#';
        }

        if (/^(https?:)?\/\//i.test(module)) {
            return module;
        }

        return '<?php echo e(url("/")); ?>/' + String(module).replace(/^\/+/, '');
    }


    /* -----------------------------------------------------
       OPEN / CLOSE
       ----------------------------------------------------- */

    function openSearch() {
        overlay.classList.add('is-open');
        overlay.setAttribute('aria-hidden', 'false');

        setTimeout(function () {
            input.focus();
        }, 80);
    }

    function closeSearch() {
        overlay.classList.remove('is-open');
        overlay.setAttribute('aria-hidden', 'true');

        input.value = '';

        results.innerHTML =
            '<div class="df-search-empty df-search-start">' +
                '<div class="df-empty-icon"><i class="fa fa-search"></i></div>' +
                '<strong>Mulai mencari menu</strong>' +
                '<span>Ketik minimal beberapa huruf untuk melihat hasil.</span>' +
            '</div>';
    }


    /* -----------------------------------------------------
       RESULT
       ----------------------------------------------------- */

    function renderResults(items) {

        if (!items || !items.length) {

            results.innerHTML =
                '<div class="df-search-empty">' +
                    '<div class="df-empty-icon"><i class="fa fa-search"></i></div>' +
                    '<strong>Menu tidak ditemukan</strong>' +
                    '<span>Coba gunakan kata pencarian lain.</span>' +
                '</div>';

            return;
        }

        results.innerHTML = items.map(function (item) {

            var title =
                item.menu_name ||
                item.menuLangTitle ||
                item.title ||
                item.name ||
                'Menu';

            var label =
                item.menu_lang &&
                item.menu_lang.title &&
                item.menu_lang.title['<?php echo e(session("lang")); ?>']
                    ? item.menu_lang.title['<?php echo e(session("lang")); ?>']
                    : title;

            var module = item.module || item.url || '#';

            return (
                '<a class="df-search-result-item" href="' +
                    buildUrl(module) +
                '">' +

                    '<span class="df-search-result-icon">' +
                        '<i class="fa fa-th-large"></i>' +
                    '</span>' +

                    '<span class="df-search-result-title">' +
                        $('<div>').text(label || title).html() +
                    '</span>' +

                    '<i class="ti-angle-right df-search-result-arrow"></i>' +

                '</a>'
            );

        }).join('');
    }


    /* -----------------------------------------------------
       SEARCH
       ----------------------------------------------------- */

    function searchMenu(value) {

        var keyword = (value || '').trim();

        if (!keyword) {
            results.innerHTML =
                '<div class="df-search-empty df-search-start">' +
                    '<div class="df-empty-icon"><i class="fa fa-search"></i></div>' +
                    '<strong>Mulai mencari menu</strong>' +
                    '<span>Ketik minimal beberapa huruf untuk melihat hasil.</span>' +
                '</div>';

            return;
        }

        results.innerHTML =
            '<div class="df-search-empty">' +
                '<div class="df-empty-icon"><i class="fa fa-spinner fa-spin"></i></div>' +
                '<strong>Mencari menu...</strong>' +
                '<span>Mohon tunggu sebentar.</span>' +
            '</div>';

        $.ajax({
            url: searchUrl,
            type: 'GET',
            data: { q: keyword },
            dataType: 'json',

            success: function (response) {

                var items = [];

                if (typeof response === 'string') {
                    results.innerHTML = response;
                    return;
                }

                if ($.isArray(response)) {
                    items = response;
                } else if (response && $.isArray(response.data)) {
                    items = response.data;
                } else if (response && $.isArray(response.menus)) {
                    items = response.menus;
                } else if (response && $.isArray(response.results)) {
                    items = response.results;
                }

                renderResults(items);
            },

            error: function () {

                results.innerHTML =
                    '<div class="df-search-empty">' +
                        '<div class="df-empty-icon"><i class="fa fa-exclamation-triangle"></i></div>' +
                        '<strong>Pencarian gagal</strong>' +
                        '<span>Silakan coba kembali.</span>' +
                    '</div>';
            }
        });
    }


    /* -----------------------------------------------------
       EVENTS
       ----------------------------------------------------- */

    toggleBtn.addEventListener('click', function () {
        openSearch();
    });

    if (closeBtn) {
        closeBtn.addEventListener('click', closeSearch);
    }

    overlay.addEventListener('click', function (e) {
        if (e.target === overlay) {
            closeSearch();
        }
    });

    input.addEventListener('input', function () {

        clearTimeout(searchTimer);

        var value = this.value;

        searchTimer = setTimeout(function () {
            searchMenu(value);
        }, 220);
    });


    /* -----------------------------------------------------
       CTRL/CMD + K
       ----------------------------------------------------- */

    document.addEventListener('keydown', function (e) {

        var key = String(e.key || '').toLowerCase();

        if ((e.ctrlKey || e.metaKey) && key === 'k') {
            e.preventDefault();
            openSearch();
        }

        if (key === 'escape' && overlay.classList.contains('is-open')) {
            closeSearch();
        }
    });

})();
</script>
<?php /**PATH /var/www/html/resources/views/layouts/leftnav.blade.php ENDPATH**/ ?>