<template>
    <div class="app-menu navbar-menu gw-sidebar-menu">
        <!-- Brand Logo Area -->
        <div class="navbar-brand-box gw-brand-box">
            <router-link to="/admin/dashboard" class="logo logo-dark d-flex align-items-center gap-2">
                <img style="max-height: 68px;" :src="getImage(null, 'images/logo.png')">
            </router-link>
            <button type="button" class="btn btn-sm p-0 fs-20 header-item float-end btn-vertical-sm-hover" id="vertical-hover">
                <i class="ri-record-circle-line"></i>
            </button>
        </div>

        <div id="scrollbar" class="gw-sidebar-scroll">
            <div class="container-fluid p-0">
                <div id="two-column-menu"></div>

                <!-- Sidebar Search Bar -->
                <div class="gw-sidebar-search px-3 py-2">
                    <div class="input-group input-group-sm gw-search-group">
                        <span class="input-group-text gw-search-icon" @click="getConfigurations()" title="Reload Menus">
                            <i class="fa fa-refresh"></i>
                        </span>
                        <input v-model="menu_keyword" placeholder="Search menu..." class="form-control gw-search-input">
                        <span v-if="menu_keyword" @click="(() => { menu_keyword = '' })" class="input-group-text gw-search-clear">
                            <i class="fa fa-times"></i>
                        </span>
                    </div>
                </div>

                <!-- Nav Menu List -->
                <ul class="navbar-nav gw-nav-list" id="navbar-nav">
                    <li class="nav-item hide_menu d-md-none px-3 mb-2">
                        <a class="nav-link menu-link gw-hide-btn" @click="hideMenu()">
                            <i class="fa fa-chevron-left me-2"></i> Close Menu
                        </a>
                    </li>

                    <template v-for="(menu, index) in allMenus">
                        <!-- Single Level Menu -->
                        <template v-if="arrLength(menu.submenus) === 0">
                            <li class="nav-item" :key="index">
                                <router-link class="nav-link menu-link gw-menu-item" :to="menu.link">
                                    <i :class="'fa ' + (menu.icon || 'fa-circle-dot')"></i>
                                    <span data-key="t-widgets">{{ menu.display_name }}</span>
                                </router-link>
                            </li>
                        </template>

                        <!-- Multi-Level Dropdown Menu -->
                        <template v-else>
                            <li class="nav-item" :key="index">
                                <a class="nav-link menu-link gw-menu-item" :href="`#${menu.name}_${index}`" data-bs-toggle="collapse" role="button" aria-expanded="false" :aria-controls="`${menu.name}_${index}`">
                                    <i :class="'fa ' + (menu.icon || 'fa-layer-group')"></i>
                                    <span data-key="t-dashboards">{{ menu.display_name }}</span>
                                    <i class="fa fa-chevron-right ms-auto gw-chevron"></i>
                                </a>
                                <div class="collapse menu-dropdown" :id="`${menu.name}_${index}`">
                                    <ul class="nav nav-sm flex-column gw-submenu-list">
                                        <template v-for="(submenu, sIndex) in menu.submenus">
                                            <template v-if="arrLength(submenu.submenus) === 0">
                                                <li class="nav-item" :key="sIndex">
                                                    <router-link :to="submenu.link" class="nav-link gw-submenu-item">
                                                        <span>{{ submenu.display_name }}</span>
                                                    </router-link>
                                                </li>
                                            </template>
                                            <template v-else>
                                                <li class="nav-item" :key="sIndex">
                                                    <a :href="`#${submenu.name}_${sIndex}`" class="nav-link gw-submenu-item" data-bs-toggle="collapse" role="button" aria-expanded="false">
                                                        <i class="fa fa-angle-right me-2"></i>
                                                        <span>{{ submenu.display_name }}</span>
                                                    </a>
                                                    <div class="collapse menu-dropdown" :id="`${submenu.name}_${sIndex}`">
                                                        <ul class="nav nav-sm flex-column gw-subsubmenu-list">
                                                            <template v-for="(subSubMenu, sSIndex) in submenu.submenus">
                                                                <li class="nav-item" :key="sSIndex">
                                                                    <router-link :to="subSubMenu.link" class="nav-link gw-subsubmenu-item">
                                                                        <span>{{ subSubMenu.display_name }}</span>
                                                                    </router-link>
                                                                </li>
                                                            </template>
                                                        </ul>
                                                    </div>
                                                </li>
                                            </template>
                                        </template>
                                    </ul>
                                </div>
                            </li>
                        </template>
                    </template>
                </ul>
            </div>
        </div>

        <div class="sidebar-background"></div>
    </div>
</template>

<script>
export default {
    name: "sideNavBar",
    data() {
        return {
            menu_keyword: '',
            menus: [],
        };
    },
    watch: {
        menu_keyword: function(newVal) {
            const _this = this;
            _this.menus = [];
            _this.$store.commit('allMenus', _this.Config.menus);
            if (_this.menu_keyword !== '') {
                $.each(_this.Config.menus, function(pIndex, pMenu) {
                    _this.addMenu(pMenu);
                    $.each(pMenu.submenus, function(sIndex, sMenu) {
                        _this.addMenu(sMenu);
                        $.each(sMenu.submenus, function(ssIndex, ssMenu) {
                            _this.addMenu(ssMenu);
                        });
                    });
                });
                var foundValue = _this.menus.filter(function(eachData) {
                    var display_name = eachData.display_name.toLowerCase();
                    return display_name.includes(_this.menu_keyword.toLowerCase());
                });
                _this.$store.commit('allMenus', foundValue);
            } else {
                _this.$store.commit('allMenus', _this.Config.menus);
            }
        }
    },
    methods: {
        hideMenu: function() {
            $('body').removeClass('vertical-sidebar-enable');
        },
        addMenu: function(menu) {
            const _this = this;
            _this.menus.push({
                display_name: menu.display_name,
                id: menu.id,
                link: menu.link,
                name: menu.name,
                status: menu.status,
                submenus: [],
            });
        }
    },
    mounted() {
        this.getConfigurations();
    }
};
</script>

<style>
/* Global sidebar container override to match TopNavbar exactly */
.app-menu.navbar-menu,
.gw-sidebar-menu,
.navbar-brand-box.gw-brand-box,
#scrollbar.gw-sidebar-scroll,
.sidebar-background {
    background-color: #0f172a !important;
    background: #0f172a !important;
    border-right: 1px solid #1e293b !important;
}

.navbar-brand-box.gw-brand-box {
    border-bottom: 1px solid #1e293b !important;
}

.menu-dropdown .nav-sm {
    background: transparent !important;
}
</style>

<style scoped>
.gw-sidebar-menu {
    border-right: 1px solid #1e293b !important;
    background: #0f172a !important;
}

.gw-brand-box {
    padding: 0 20px;
    height: 70px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #1e293b !important;
    background: #0f172a !important;
}

.gw-brand-icon {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #2563eb, #6366f1);
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: #ffffff;
    font-size: 16px;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.gw-brand-title {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #ffffff !important;
}

.gw-sidebar-search {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    margin-bottom: 6px;
}

.gw-search-group {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
}

.gw-search-icon, .gw-search-clear {
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: 11px;
}

.gw-search-input {
    background: transparent;
    border: none;
    color: #f8fafc;
    font-size: 12px;
}

.gw-search-input::placeholder {
    color: #64748b;
}

.gw-search-input:focus {
    background: transparent;
    color: #ffffff;
    box-shadow: none;
}

.gw-nav-list {
    padding: 8px 12px;
    background: transparent !important;
}

.gw-menu-item {
    color: #94a3b8 !important;
    font-size: 13.5px;
    font-weight: 600;
    padding: 10px 14px !important;
    border-radius: 10px;
    margin-bottom: 3px;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}

.gw-menu-item i {
    width: 20px;
    text-align: center;
    font-size: 15px;
    color: #64748b;
    transition: color 0.15s ease;
}

.gw-menu-item:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.06);
}

.gw-menu-item:hover i {
    color: #38bdf8;
}

.gw-menu-item.router-link-active,
.gw-menu-item.active {
    color: #ffffff !important;
    background: #2563eb !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
}

.gw-menu-item.router-link-active i,
.gw-menu-item.active i {
    color: #ffffff;
}

.gw-chevron {
    font-size: 11px;
    transition: transform 0.2s ease;
}

.gw-menu-item[aria-expanded="true"] .gw-chevron {
    transform: rotate(90deg);
}

.gw-submenu-list {
    padding: 4px 0 4px 28px;
    background: transparent !important;
}

.gw-submenu-item {
    color: #94a3b8 !important;
    font-size: 12.5px;
    font-weight: 500;
    padding: 7px 12px !important;
    border-radius: 8px;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
}

.gw-submenu-item:hover,
.gw-submenu-item.router-link-active {
    color: #38bdf8 !important;
    background: rgba(56, 189, 248, 0.08);
}

.gw-hide-btn {
    background: rgba(239, 68, 68, 0.1);
    color: #f87171 !important;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 12.5px;
    font-weight: 700;
}
</style>
