<template>
    <div class="d_header">
        <div class="card border-0 rounded-0">
            <div class="card-body p-0">
                <!-- <h1>{{ $route.name }}</h1> -->
                <div class="top_header d-flex px-2 align-items-center justify-content-between">
                    <div v-if="isMobile">

                         <div class="d-flex align-items-center">
                            <button
                                class="btn"
                                type="button"
                                data-bs-toggle="offcanvas"
                                data-bs-target="#offcanvasWithBothOptions"
                                aria-controls="offcanvasWithBothOptions"
                            >
                                <i class="fa-solid fa-bars f_size_18"></i>
                            </button>

                            <button
                                type="button"
                                class="btn bg-body rounded-3 py-0 px-1 d-flex align-items-center"
                                @click="$router.push({ name: 'Dashboard' })">
                                <img src="images/logo.png" alt="" width="40px" />

                                <span class="ms-1 text-nowrap">
                                    <b>{{ company.name_en ?? '' }}</b>
                                </span>
                            </button>

                    </div>
                    </div>
                    <div v-else>
                        <button type="button" class="btn" @click="navbarToggle()" id="btn_navbar_toggle">
                            <i class="fa-solid fa-bars f_size_18"></i>
                        </button>
                    </div>
                    <ul class="d-flex align-items-center">
                        <li class="nav-item dropdown me-1">
                            <button
                                type="button"
                                class="btn wrap-icon position-relative"
                                data-bs-toggle="dropdown"
                                aria-expanded="false"
                            >
                                <i class="fa-regular fa-bell text-secondary fa-lg"></i>
                                <span
                                    v-show="countRequestCO +
                                    countRequestBM +
                                    countLoanDisburst +
                                    countCollectGoodLoan +
                                    countCollectLateLoan +
                                    countWriteOff >
                                    0
                                    "
                                    style="top: 10px; left: 75%"
                                    class="position-absolute px-1 translate-middle badge rounded-pill text-bg-danger"
                                >
                                    <span
                                        v-if="
                                        countRequestCO +
                                        countRequestBM +
                                        countLoanDisburst +
                                        countCollectGoodLoan +
                                        countCollectLateLoan +
                                        countWriteOff >
                                        10
                                    "
                                    >
                                        10+
                                    </span>
                                    <span v-else>
                                        {{ countRequestCO + countRequestBM + countLoanDisburst + countCollectGoodLoan + countCollectLateLoan + countWriteOff }}
                                    </span>
                                    <span class="visually-hidden">unread messages</span>
                                </span>
                            </button>
                            <div class="dropdown-menu shadow border-0 p-2" aria-labelledby="navbarDropdown">
                                <!-- <router-link
                                    class="dropdown-item box-dropdown"
                                    :to="{ name: 'ListRequest' }"
                                    v-if="$can('List Request CO')"
                                >
                                    {{ $t("List of Loan Request") }} CO
                                    <span class="badge bg-danger">{{ countRequestCO }}</span>
                                    <div class="sr-only">unread messages</div>
                                </router-link> -->
                                <!-- <router-link
                                    class="dropdown-item box-dropdown"
                                    :to="{ name: 'ListRequestBM' }"
                                    v-if="$can('List Request BM')"
                                >
                                    {{ $t("List of Loan Approve") }} BM
                                    <span class="badge bg-danger">{{ countRequestBM }}</span>
                                    <div class="sr-only">unread messages</div>
                                </router-link> -->
                                <router-link
                                    class="dropdown-item box-dropdown"
                                    :to="{ name: 'ListofLoanDisbursement' }"
                                    v-if="$can('List of Loan Disbursement')"
                                >
                                    {{ $t("List Approve") }}
                                    <span class="badge bg-danger">{{ countLoanDisburst }}</span>
                                    <div class="sr-only">unread messages</div>
                                </router-link>
                                <router-link
                                    class="dropdown-item box-dropdown"
                                    :to="{ name: 'CollectGoodLoan' }"
                                    v-if="$can('Collect Good List')"
                                >
                                    {{ $t("Collect Good Loan") }}
                                    <span class="badge bg-danger">{{ countCollectGoodLoan }}</span>
                                    <div class="sr-only">unread messages</div>
                                </router-link>
                                <!-- <router-link
                                    class="dropdown-item box-dropdown"
                                    :to="{ name: 'CollectLateLoan' }"
                                    v-if="$can('Collect Late List')"
                                >
                                    {{ $t("Collect Late Loan") }}
                                    <span class="badge bg-danger">{{ countCollectLateLoan }}</span>
                                    <div class="sr-only">unread messages</div>
                                </router-link> -->
                                <router-link
                                    class="dropdown-item box-dropdown"
                                    :to="{ name: 'CollectWriteOffLoan' }"
                                    v-if="$can('Collect Write Off List')"
                                >
                                    {{ $t("Collect Write Off Loan") }}
                                    <span class="badge bg-danger">{{ countWriteOff }}</span>
                                    <div class="sr-only">unread messages</div>
                                </router-link>
                            </div>
                        </li>
                        <!-- Branch -->
                        <!-- <li class="nav-item dropdown me-3" v-if="branches.length > 1">
                            <button
                                type="button"
                                class="btn btn-light dropdown-toggle"
                                data-bs-toggle="dropdown"
                                aria-expanded="false"
                            >
                                <span
                                    :class="user.branch_id == -1 ? 'text-danger' : 'text-primary'"
                                >
                                    <i class="fa-solid fa-building pe-2"></i>
                                    <span v-if="user.branch_id == -1">
                                        {{ $t("Head Quarter") }}
                                    </span>
                                    <span v-else>
                                        {{ branch_name }}
                                    </span>
                                </span>
                            </button>

                            <div class="dropdown-menu shadow border-0 p-2">
                                <a
                                    role="button"
                                    @click="funSwitchBranch(-1)"
                                    :class="user.branch_id == -1 ? 'router-link-exact-active' : ''"
                                    class="dropdown-item box-dropdown text-danger"
                                >
                                    <i class="fa-solid fa-building pe-2"></i>
                                    {{ $t("Head Quarter") }}
                                </a>

                                <a
                                    role="button"
                                    v-for="branch in branches"
                                    :key="branch.id"
                                    @click="funSwitchBranch(branch.id)"
                                    :class="user.branch_id == branch.id ? 'router-link-exact-active' : ''"
                                    class="dropdown-item box-dropdown"
                                >
                                    <i class="fa-solid fa-building text-secondary pe-2"></i>
                                    {{ branch.name_km }}
                                </a>
                            </div>
                        </li> -->

                        <li class="nav-item dropdown me-1">
                            <button type="button" class="btn wrap-icon" data-bs-toggle="dropdown" aria-expanded="false">
                                <img v-if="currency == 1" src="/icons/riel.png" alt="lang" width="20px" />
                                <img v-else-if="currency == 2" src="/icons/dollar.png" alt="lang" width="20px" />
                                <img v-else-if="currency == 3" src="/icons/baht.png" alt="lang" width="20px" />
                            </button>
                            <div class="dropdown-menu shadow border-0 p-2" aria-labelledby="navbarDropdown">
                                <span v-for="curr in currencies" :key="curr.id">
                                    <a
                                        role="button"
                                        @click="funSwitchCurrency(curr.id)"
                                        class="dropdown-item box-dropdown"
                                        :class="user.currency_id == curr.id
                                            ? 'router-link-exact-active'
                                            : ''
                                            "
                                    >
                                        <p v-if="curr.id == 1">
                                            <img class="me-2" src="/icons/riel.png" alt="lang" width="15px" />
                                            {{ $t("KHR") }}
                                        </p>
                                        <p v-else-if="curr.id == 2">
                                            <img class="me-2" src="/icons/dollar.png" alt="lang" width="15px" />
                                            {{ $t("USD") }}
                                        </p>
                                        <!-- <p v-else-if="curr.id == 3">
                                            <img class="me-2" src="/icons/baht.png" alt="lang" width="15px" />
                                            {{ $t('BAHT') }}
                                        </p> -->
                                    </a>
                                </span>
                            </div>
                        </li>
                        <li class="nav-item dropdown me-1">
                            <button type="button" class="btn wrap-icon" data-bs-toggle="dropdown" aria-expanded="false">
                                <img
                                    v-if="lang == 'en'"
                                    class="rounded-circle"
                                    src="/icons/en.png"
                                    alt="lang"
                                    width="20px"
                                />
                                <img
                                    v-if="lang == 'km'"
                                    class="rounded-circle"
                                    src="/icons/km.png"
                                    alt="lang"
                                    width="20px"
                                />
                            </button>
                            <div class="dropdown-menu shadow border-0 p-2" aria-labelledby="navbarDropdown">
                                <button class="dropdown-item box-dropdown" @click="changeLang('km')">
                                    <img class="rounded-circle me-2" src="/icons/km.png" alt="lang" width="15px" />
                                    <span>ភាសាខ្មែរ</span>
                                </button>
                                <button class="dropdown-item box-dropdown" @click="changeLang('en')">
                                    <img class="rounded-circle me-2" src="/icons/en.png" alt="lang" width="15px" />
                                    <span>English</span>
                                </button>
                            </div>
                        </li>
                        <li class="nav-item dropdown me-1">
                            <button type="button" class="btn wrap-icon" data-bs-toggle="dropdown" aria-expanded="false">
                                <i
                                    :class="[
                                    'fas fa-lg text-secondary',
                                    currentMode ? currentMode.icon : '',
                                ]"
                                ></i>
                            </button>
                            <div class="dropdown-menu shadow border-0 p-2" aria-labelledby="navbarDropdown">
                                <span v-for="(mode, index) in modes" :key="index">
                                    <a
                                        role="button"
                                        @click="toggleTheme(mode.id)"
                                        :class="{
                                        'router-link-exact-active':
                                            isActive(mode.id),
                                    }"
                                        class="dropdown-item box-dropdown"
                                    >
                                        <i
                                            :class="[
                                            'fas text-secondary me-2',
                                            mode.icon,
                                        ]"
                                        ></i
                                        >{{ mode.text }}
                                    </a>
                                </span>
                            </div>
                        </li>
                        <li class="nav-item dropdown ms-2 me-3">
                            <button
                                type="button"
                                class="btn avatar-profile"
                                data-bs-toggle="dropdown"
                                aria-expanded="false"
                            >
                                <i class="fa-solid fa-user-large fa-gradient"></i>
                            </button>
                            <div class="dropdown-menu shadow border-0 p-2" aria-labelledby="navbarDropdown">
                                <div class="d-flex align-items-center px-2 py-3">
                                    <button
                                        type="button"
                                        class="btn avatar-profile"
                                        data-bs-toggle="dropdown"
                                        aria-expanded="false"
                                    >
                                        <i class="fa-solid fa-user-large fa-gradient"></i>
                                    </button>
                                    <div class="ms-2">
                                        <h6>{{ user.name }}</h6>
                                        <small>{{ user.email }}</small>
                                    </div>
                                </div>
                                <div class="dropdown-divider"></div>
                                <router-link
                                    type="button"
                                    :to="{ name: 'Myprofile' }"
                                    class="dropdown-item box-dropdown"
                                >
                                    <i class="fa-solid fa-solid fa-user text-secondary me-2"></i>
                                    <span>{{ $t("My profile") }}</span>
                                </router-link>
                                <button type="button" @click="funLogout()" class="dropdown-item box-dropdown">
                                    <i class="fa-solid fa-solid fa-arrow-right-from-bracket text-secondary me-2"></i>
                                    <span>{{ $t("Logout") }}</span>
                                </button>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div @mouseover="showNavbar()" @mouseleave="hideNavbar()" class="card navbar_left">
            <div class="card-body p-0">
                <div
                    :class="isMobile ? 'offcanvas offcanvas-start' : ''"
                    style="max-width: 290px"
                    tabindex="-1"
                    id="offcanvasWithBothOptions"
                    aria-labelledby="offcanvasWithBothOptionsLabel"
                >
                    <div class="offcanvas-header mb-3">
                        <div class="offcanvas-title" id="offcanvasScrollingLabel">
                            <div class="d-flex align-items-center logo py-2">
                                <img style="margin-left: 10px" src="images/logo.png" alt="" width="40px" />
                                <h5 class="ms-1 text-nowrap nd_none">
                                    <b>{{ this.company.name_en??'' }}</b>
                                </h5>
                            </div>
                        </div>
                        <button
                            v-show="isMobile"
                            type="button"
                            class="btn-close"
                            data-bs-dismiss="offcanvas"
                            aria-label="Close"
                        ></button>
                    </div>
                    <div :class="isMobile ? 'offcanvas-body' : ''">
                        <div class="accordion" id="action_collapse">
                            <div class="position-relative" aria-expanded="true">
                                <router-link
                                    @click.native="closeOffcanvas"
                                    :to="{ name: 'Dashboard' }"
                                    v-if="$can('Dashboard')"
                                    class="d-flex align-items-center ml_list"
                                >
                                    <div class="d-flex align-items-center btn_collapse">
                                        <i class="cus_icon fa-solid fa-house-user"></i>
                                        <p class="nd_none">{{ $t("Dashboard") }}</p>
                                    </div>
                                </router-link>
                            </div>

                            <!-- Contact -->
                            <div
                                class="position-relative"
                                v-if="
                                $can('Client List') ||
                                $can('Category List') ||
                                $can('Collateral List')
                            "
                            >
                                <div
                                    class="d-flex align-items-center ml_list"
                                    data-bs-toggle="collapse"
                                    role="button"
                                    data-bs-target="#contact"
                                    :class="this.$route.name == 'Clients' ||
                                        this.$route.name == 'Categories' ||
                                        this.$route.name == 'Collaterals'
                                        ? 'router-link-exact-active'
                                        : ''
                                        "
                                >
                                    <div class="d-flex align-items-center btn_collapse" aria-expanded="true">
                                        <i class="cus_icon fa-solid fa-address-book"></i>
                                        <p class="nd_none nowrap">{{ $t("Contact") }}</p>
                                    </div>
                                    <i class="nd_none fa-solid fa-chevron-right"></i>
                                </div>
                                <div id="contact" class="cus_collapse collapse" data-bs-parent="#action_collapse">
                                    <ul class="list-group">
                                        <router-link
                                            class="menu-list"
                                            :to="{ name: 'Clients' }"
                                            v-if="$can('Client List')"
                                        >
                                            {{ $t("Client and Guarantee") }}
                                        </router-link>
                                        <!-- <router-link class="menu-list" :to="{ name: 'Categories' }"
                                            v-if="$can('Category List')">
                                            {{ $t('Categories') }}
                                        </router-link> -->
                                        <router-link
                                            class="menu-list"
                                            :to="{ name: 'Collaterals' }"
                                            v-if="$can('Collateral List')"
                                        >
                                            {{ $t("Collateral") }}
                                        </router-link>
                                    </ul>
                                </div>
                            </div>
                            <!-- Apply Loan -->
                            <div
                                class="position-relative"
                                v-if="
                                $can('Loan Create') ||
                                $can('List Request CO') ||
                                $can('List Request BM') ||
                                $can('Collateral List')
                            "
                            >
                                <div
                                    class="d-flex align-items-center ml_list"
                                    data-bs-toggle="collapse"
                                    role="button"
                                    data-bs-target="#apply_loan"
                                    :class="this.$route.name == 'LoanCreate' ||
                                        // this.$route.name == 'ListRequest' ||
                                        // this.$route.name == 'ListRequestBM' ||
                                        this.$route.name == 'CollateralList'
                                        ? 'router-link-exact-active'
                                        : ''
                                        "
                                >
                                    <div class="d-flex align-items-center btn_collapse" aria-expanded="true">
                                        <i class="cus_icon fa-solid fa-check-to-slot"></i>
                                        <p class="nd_none nowrap">{{ $t("Apply Loan") }}</p>
                                    </div>
                                    <i class="nd_none fa-solid fa-chevron-right"></i>
                                </div>
                                <div id="apply_loan" class="cus_collapse collapse" data-bs-parent="#action_collapse">
                                    <ul class="list-group">
                                        <router-link
                                            class="menu-list"
                                            :to="{ name: 'LoanCreate' }"
                                            v-if="$can('Loan Create')"
                                            v-show="this.user.branch_id != -1"
                                        >
                                            {{ $t("Loan Request") }}
                                        </router-link>
                                        <!-- <router-link
                                            class="menu-list"
                                            :to="{ name: 'ListRequest' }"
                                            v-if="$can('List Request CO')"
                                        >
                                            {{ $t("List of Loan Request") }} CO
                                            <span class="badge bg-danger ms-1 rounded-pill" v-if="countRequestCO > 0"
                                                >{{ countRequestCO }}</span
                                            >
                                        </router-link> -->
                                        <!-- <router-link
                                            class="menu-list"
                                            :to="{ name: 'ListRequestBM' }"
                                            v-if="$can('List Request BM')"
                                        >
                                            {{ $t("List of Loan Approve") }} BM
                                            <span class="badge bg-danger ms-1 rounded-pill" v-if="countRequestBM > 0"
                                                >{{ countRequestBM }}</span
                                            >
                                        </router-link> -->
                                        <!-- <router-link class="menu-list" :to="{ name: 'CollateralList' }"
                                            v-if="$can('Collateral List')">
                                            {{ $t('Collateral List') }}
                                        </router-link> -->
                                    </ul>
                                </div>
                            </div>
                            <div class="position-relative" v-if="$can('List of Loan Disbursement') || $can('Write Off List') || $can('List of Client Disbursed')">
                                <div
                                    class="d-flex align-items-center ml_list"
                                    data-bs-toggle="collapse"
                                    role="button"
                                    data-bs-target="#loan_list"
                                    :class="this.$route.name == 'ListofLoanDisbursement' ||
                                            this.$route.name == 'ListofClientDisbursed'  ||
                                            this.$route.name == 'ListWriteOff'? 'router-link-exact-active': ''"
                                >
                                    <div class="d-flex align-items-center btn_collapse" aria-expanded="true">
                                        <i class="cus_icon fa-solid fa-money-check-dollar"></i>
                                        <!-- <p class="nd_none nowrap">{{ $t('Loan Disbursement') }}</p> -->
                                        <p class="nd_none nowrap">{{ $t("Open Loan") }}</p>
                                    </div>
                                    <i class="nd_none fa-solid fa-chevron-right"></i>
                                </div>
                                <div id="loan_list" class="cus_collapse collapse" data-bs-parent="#action_collapse">
                                    <ul class="list-group">
                                        <router-link
                                            class="menu-list"
                                            :to="{
                                            name: 'ListofLoanDisbursement',
                                        }"
                                            v-if="
                                            $can(
                                                'List of Loan Disbursement'
                                            )
                                        "
                                        >
                                            {{ $t("List Approve") }}
                                            <span class="badge bg-danger ms-1 rounded-pill" v-if="countLoanDisburst > 0"
                                                >{{ countLoanDisburst }}</span
                                            >
                                        </router-link>
                                        <router-link
                                            class="menu-list"
                                            :to="{
                                            name: 'ListofClientDisbursed',
                                        }"
                                            v-if="$can('List of Client Disbursed')"
                                        >
                                            {{ $t("Loan List") }}
                                        </router-link>
                                        <router-link
                                            class="menu-list"
                                            :to="{ name: 'ListWriteOff' }"
                                            v-if="$can('Write Off List')"
                                        >
                                            {{ $t("List of Loan Loss") }}
                                        </router-link>
                                    </ul>
                                </div>
                            </div>
                            <!-- Collection Loan -->
                            <div
                                class="position-relative"
                                v-if="
                                    $can('Collect Good List')         ||
                                    $can('Collect Write Off List')    ||
                                    $can('Client Payment List')       ||
                                    $can('Client Payment On The Day')"
                            >
                                <div
                                    class="d-flex align-items-center ml_list"
                                    data-bs-toggle="collapse"
                                    role="button"
                                    data-bs-target="#collection_list"
                                    :class="this.$route.name == 'CollectGoodLoan'       ||
                                            this.$route.name == 'ClientPayment'         ||
                                            this.$route.name == 'ClientPaymentOnTheDay' ||
                                            this.$route.name =='CollectWriteOffLoan'? 'router-link-exact-active'
                                        : ''
                                        "
                                >
                                    <div class="d-flex align-items-center btn_collapse" aria-expanded="true">
                                        <i class="cus_icon fa-solid fa-hand-holding-dollar"></i>
                                        <p class="nd_none nowrap">{{ $t("Collect Loan") }}</p>
                                    </div>
                                    <i class="nd_none fa-solid fa-chevron-right"></i>
                                </div>
                                <div
                                    id="collection_list"
                                    class="cus_collapse collapse"
                                    data-bs-parent="#action_collapse"
                                >
                                    <ul class="list-group">
                                        <router-link
                                            class="menu-list"
                                            :to="{ name: 'ClientPayment' }"
                                            v-if="$can('Client Payment List')"
                                            v-show="this.user.branch_id != -1"
                                        >
                                            {{ $t("Client Payment List") }}
                                        </router-link>
                                        <router-link
                                            class="menu-list"
                                            :to="{ name: 'ClientPaymentOnTheDay' }"
                                            v-if="$can('Client Payment On The Day')"
                                            v-show="this.user.branch_id != -1"
                                        >
                                            {{ $t("Client Payment on the Day") }}
                                            <span
                                                class="badge bg-danger ms-1 rounded-pill"
                                                v-if="collectPaymentOnDay > 0"
                                                >{{ collectPaymentOnDay }}</span
                                            >
                                        </router-link>


                                        <router-link
                                            class="menu-list"
                                            :to="{ name: 'CollectGoodLoan' }"
                                            v-if="$can('Collect Good List')"
                                        >
                                            {{ $t("Collect Good Loan") }}
                                            <span
                                                class="badge bg-danger ms-1 rounded-pill"
                                                v-if="countCollectGoodLoan > 0"
                                                >{{ countCollectGoodLoan }}</span
                                            >
                                        </router-link>
                                        <router-link
                                            class="menu-list"
                                            :to="{ name: 'CollectLateLoan' }"
                                            v-if="$can('Collect Late List')"
                                        >
                                            {{ $t("Collect Late Loan") }}
                                            <span
                                                class="badge bg-danger ms-1 rounded-pill"
                                                v-if="countCollectLateLoan > 0"
                                                >{{ countCollectLateLoan }}</span
                                            >
                                        </router-link>
                                         <!-- <router-link
                                            class="menu-list"
                                            :to="{ name: 'AllCollectLoan' }"
                                            v-if="$can('Collect Late List')"
                                        >
                                            {{ $t("All Collect Loan") }}

                                        </router-link> -->

                                        <router-link
                                            class="menu-list"
                                            :to="{
                                            name: 'CollectWriteOffLoan',
                                        }"
                                            v-if="
                                            $can('Collect Write Off List')
                                        "
                                        >
                                            {{ $t("Collect Loan Write off") }}
                                            <span class="badge bg-danger ms-1 rounded-pill" v-if="countWriteOff > 0"
                                                >{{ countWriteOff }}</span
                                            >
                                        </router-link>
                                    </ul>
                                </div>
                            </div>
                            <!-- Show List -->
                            <div class="position-relative" v-if="$can('Show Payment') || $can('History Payment')">
                                <div class="d-flex align-items-center ml_list" data-bs-toggle="collapse"
                                    role="button" data-bs-target="#show_list"
                                    :class="this.$route.name =='ShowPayment' || this.$route.name =='HistoryPayment'? 'router-link-exact-active': ''">
                                    <div class="d-flex align-items-center btn_collapse" aria-expanded="true">
                                        <i class="cus_icon fa-solid fa-folder"></i>
                                        <p class="nd_none nowrap">{{ $t('Show Payment') }}</p>
                                    </div>
                                    <i class="nd_none fa-solid fa-chevron-right"></i>
                                </div>
                                <div
                                    id="show_list"
                                    class="cus_collapse collapse"
                                    data-bs-parent="#action_collapse"
                                >
                                    <ul class="list-group">
                                        <router-link class="menu-list" :to="{ name: 'ShowPayment' }" v-if="$can('Show Payment')">
                                            {{ $t("Show Payment") }}
                                        </router-link>
                                        <router-link class="menu-list" :to="{ name: 'HistoryPayment' }" v-if="$can('History Payment')">
                                            {{ $t("History Payment") }}
                                        </router-link>
                                    </ul>
                                </div>
                            </div>
                            <!-- Closing List -->
                            <div
                                class="position-relative"
                                v-if="
                                    $can('Co Received Report') ||
                                    $can('Cashier Received Report') ||
                                    $can('Closing Report') ||
                                    $can('Banknote Management List') ||
                                    $can('Daily Banknote Management')
                                "
                            >
                                <div
                                    class="d-flex align-items-center ml_list"
                                    data-bs-toggle="collapse"
                                    role="button"
                                    data-bs-target="#closing_list"
                                    :class="this.$route.name == 'CoReceived'      ||
                                            this.$route.name == 'CashierReceived' ||
                                            this.$route.name == 'GetClosingReport'||
                                            this.$route.name == 'BanknoteManagementList' ||
                                            this.$route.name == 'DailyBanknoteManagementReport'? 'router-link-exact-active' : ''"
                                     >
                                    <div class="d-flex align-items-center btn_collapse" aria-expanded="true">
                                        <i class="cus_icon fa-solid fa-chart-pie"></i>
                                        <p class="nd_none nowrap">{{ $t("Closing List") }}</p>
                                    </div>
                                    <i class="nd_none fa-solid fa-chevron-right"></i>
                                </div>
                                <div id="closing_list" class="cus_collapse collapse" data-bs-parent="#action_collapse">
                                    <ul class="list-group">
                                        <router-link
                                            class="menu-list"
                                            :to="{ name: 'CoReceived' }"
                                            v-if="$can('Co Received Report')"
                                        >
                                            {{ $t("CO Collect") }}
                                        </router-link>
                                        <router-link
                                            class="menu-list"
                                            :to="{ name: 'CashierReceived' }"
                                            v-if="
                                            $can('Cashier Received Report')
                                        "
                                        >
                                            {{ $t("Cashier Received") }}
                                            <span class="badge bg-danger ms-1 rounded-pill" v-if="cashierNotApprove > 0"
                                                >{{ cashierNotApprove }}</span
                                            >
                                        </router-link>
                                        <router-link
                                            class="menu-list"
                                            :to="{ name: 'GetClosingReport' }"
                                            v-if="$can('Closing Report')"
                                        >
                                            {{ $t("Closing Report") }}
                                        </router-link>
                                        <router-link
                                            class="menu-list"
                                            v-if="
                                            $can('Banknote Management List')
                                        "
                                            :to="{
                                            name: 'BanknoteManagementList',
                                        }"
                                        >
                                            {{ $t("Cash Denomination") }}
                                        </router-link>
                                        <router-link
                                            class="menu-list"
                                            v-if="
                                            $can(
                                                'Daily Banknote Management'
                                            )
                                        "
                                            :to="{
                                            name: 'DailyBanknoteManagementReport',
                                        }"
                                        >
                                            {{ $t("Daily Banknote Management") }}
                                        </router-link>
                                    </ul>
                                </div>
                            </div>

                            <!-- Report -->
                            <div
                                class="position-relative"
                                v-if="
                                $can('Loan Disbursement Report') ||
                                $can('Credit Officer Report') ||
                                $can('Borrow Report') ||
                                $can('Loan Repayment Report') ||
                                $can('Collected Report') ||
                                $can('Loan Pay Off Report') ||
                                $can('Loan Arrear Report') ||
                                $can('Summary Co Report') ||
                                $can('Collateral List') ||
                                $can('Loan Write Off Report') ||
                                $can('Overdue Report') ||
                                $can('Report By Co')
                            "
                            >
                                <!-- this.$route.name == 'DailyReport'  || $can('Daily Report') -->
                                <div
                                    class="d-flex align-items-center ml_list"
                                    data-bs-toggle="collapse"
                                    role="button"
                                    data-bs-target="#idReport"
                                    :class="this.$route.name == 'CoReport' ||
                                        this.$route.name ==
                                        'LoanDisbursementReport' ||
                                        this.$route.name =='CollectionReport' ||
                                        this.$route.name =='LateReport' ||
                                        this.$route.name =='CollectionReport' ||
                                        this.$route.name == 'CollectedReport' ||
                                        this.$route.name == 'CompletedReport' ||
                                        this.$route.name == 'BorrowedReport' ||
                                        this.$route.name == 'SummaryCoReport' ||
                                        this.$route.name ==
                                        'SummaryProductivityByBranch' ||
                                        this.$route.name == 'LateReport' ||
                                        this.$route.name ==
                                        'CollateralListReport' ||
                                        this.$route.name ==
                                        'LoanWriteOffReport' ||
                                        this.$route.name ==
                                        'LoanLossProClassific' ||
                                        this.$route.name ==
                                        'SummaryLoanLossProvision' ||
                                        this.$route.name ==
                                        'LoanApprovalRejectedReport' ||
                                        this.$route.name == 'OverdueReport'
                                        ? 'router-link-exact-active'
                                        : ''
                                        "
                                >
                                    <div class="d-flex align-items-center btn_collapse" aria-expanded="true">
                                        <i class="cus_icon fa-sharp fa-solid fa-chart-line"></i>
                                        <p class="nd_none nowrap">{{ $t("Report") }}</p>
                                    </div>
                                    <i class="nd_none fa-solid fa-chevron-right"></i>
                                </div>
                                <div id="idReport" class="cus_collapse collapse" data-bs-parent="#action_collapse">
                                    <ul class="list-group">
                                        <!-- <router-link class="menu-list" v-if="$can('Daily Report')" :to="{ name: 'DailyReport' }">
                                            {{ $t('Daily Report') }}
                                        </router-link> -->
                                        <router-link
                                            class="menu-list"
                                            :to="{
                                            name: 'LoanNotClosingReport',
                                        }"
                                        >
                                            {{ $t("Not Closing Report") }}
                                        </router-link>
                                        <router-link
                                            class="menu-list"
                                            v-if="
                                            $can('Loan Disbursement Report')
                                        "
                                            :to="{
                                            name: 'LoanDisbursementReport',
                                        }"
                                        >
                                            {{ $t("Loan Disbursement Report") }}
                                        </router-link>
                                        <router-link
                                            class="menu-list"

                                            v-if="
                                                $can(
                                                    'Loan Repayment Report'
                                                )
                                            "
                                            :to="{
                                                name: 'CollectionReport',
                                            }"
                                        >
                                            {{ $t( "Loan Repayment Report" ) }}
                                        </router-link>
                                            <router-link
                                            class="menu-list"
                                            v-if="$can('Collected Report')"
                                            :to="{ name: 'CollectedReport' }"
                                        >
                                            {{ $t("Loan Collected Report") }}
                                        </router-link>

                                        <router-link
                                            class="menu-list"

                                            v-if="
                                                $can(
                                                    'Loan Arrear Report'
                                                )
                                            "
                                            :to="{
                                                name: 'LateReport',
                                            }"
                                        >
                                            {{ $t( "Loan Arrear Report" ) }}
                                        </router-link>



                                        <router-link
                                            class="menu-list"
                                            v-if="$can('Credit Officer Report')"
                                            :to="{ name: 'CoReport' }"
                                        >
                                            {{ $t("Loan Portfolio Report") }}
                                        </router-link>
                                        <!-- <router-link
                                            class="menu-list"
                                            v-if="$can('Collateral Report')"
                                            :to="{
                                            name: 'CollateralListReport',
                                        }"
                                        >
                                            {{ $t("Collateral Report") }}
                                        </router-link> -->
                                        <router-link
                                            class="menu-list"
                                            v-if="$can('Overdue Report')"
                                            :to="{ name: 'OverdueReport' }"
                                        >
                                            {{ $t("Loan Expire Date Report") }}
                                        </router-link>
                                        <router-link
                                            class="menu-list"
                                            v-if="$can('Loan Pay Off Report')"
                                            :to="{ name: 'CompletedReport' }"
                                        >
                                            {{ $t("Loan Paid Off Report") }}
                                        </router-link>
                                        <router-link
                                            class="menu-list"
                                            v-if="$can('Loan Pay Off Report')"
                                            :to="{ name: 'LoanWriteOffReport' }"
                                        >
                                            {{ $t("Loan Write Off Report") }}
                                        </router-link>
                                        <router-link
                                            class="menu-list"
                                            v-if="$can('Borrow Report')"
                                            :to="{ name: 'BorrowedReport' }"
                                        >
                                            {{ $t("Borrowed Report") }}
                                        </router-link>
                                        <!-- <router-link class="menu-list" v-if="$can('Borrow Report')" :to="{ name: 'LoanLossProClassific' }">
                                            {{ $t('Loan Loss Provision Classification Report') }}
                                        </router-link>
                                        <router-link class="menu-list" v-if="$can('Borrow Report')" :to="{ name: 'SummaryLoanLossProvision' }">
                                            {{ $t('Summary Loan Loss Provision Report') }}
                                        </router-link> -->
                                        <!-- <router-link
                                            class="menu-list"
                                            v-if="
                                            $can(
                                                'Loan Approval/Rejected Report'
                                            )
                                        "
                                            :to="{
                                            name: 'LoanApprovalRejectedReport',
                                        }"
                                        >
                                            {{ $t( "Loan Approval/Rejected Report" ) }}
                                        </router-link> -->
                                        <router-link
                                            class="menu-list"
                                            :to="{
                                            name: 'RejectLoanReport',
                                        }"
                                        >
                                            {{ $t("Reject Loan Report") }}
                                        </router-link>
                                        <router-link
                                            class="menu-list"
                                            :to="{
                                            name: 'DeletedLoanReport',
                                        }"
                                        >
                                            {{ $t("Deleted Loan Report") }}
                                        </router-link>
                                        <router-link
                                            class="menu-list"
                                            :to="{
                                            name: 'SumTotalClientPayment',
                                        }"
                                        >
                                            {{ $t("Sum Total Client Payment") }}
                                        </router-link>

                                        <!-- <div
                                            class="position-relative"
                                            style="padding-left: 33px"
                                            v-if="
                                            $can('Loan Arrear Report') ||
                                            $can('Loan Repayment Report')
                                        "
                                        >
                                            <div
                                                class="d-flex align-items-center ml_list ps-3"
                                                data-bs-toggle="collapse"
                                                role="button"
                                                data-bs-target="#sup1IdReport"
                                                :class="this.$route.name ==
                                                    'LateReport' ||
                                                    this.$route.name ==
                                                    'CollectionReport'
                                                    ? 'router-link-exact-active'
                                                    : ''
                                                    "
                                            >
                                                <div
                                                    class="d-flex align-items-center btn_collapse"
                                                    aria-expanded="true"
                                                >
                                                    <p class="nd_none nowrap">{{ $t( "Client Repayment" ) }}</p>
                                                </div>
                                                <i class="nd_none fa-solid fa-chevron-right"></i>
                                            </div>
                                            <div
                                                id="sup1IdReport"
                                                class="cus_collapse collapse"
                                                data-bs-parent="#sup_collapse"
                                            >
                                                <ul class="list-group">
                                                    <router-link
                                                        class="menu-list"
                                                        style="padding-left: 40px"
                                                        v-if="
                                                            $can(
                                                                'Loan Arrear Report'
                                                            )
                                                        "
                                                        :to="{
                                                            name: 'LateReport',
                                                        }"
                                                    >
                                                        {{ $t( "Loan Arrear Report" ) }}
                                                    </router-link>
                                                    <router-link
                                                        class="menu-list"
                                                        style="padding-left: 40px"
                                                        v-if="
                                                            $can(
                                                                'Loan Repayment Report'
                                                            )
                                                        "
                                                        :to="{
                                                            name: 'CollectionReport',
                                                        }"
                                                    >
                                                        {{ $t( "Loan Repayment Report" ) }}
                                                    </router-link>
                                                </ul>
                                            </div>
                                        </div> -->
                                        <div
                                            class="position-relative"
                                            style="padding-left: 33px"
                                            v-if="
                                            $can('Summary Co Report') ||
                                            $can(
                                                'Summary Productivity By Branch'
                                            )
                                        "
                                        >
                                            <div
                                                class="d-flex align-items-center ps-3 ml_list"
                                                data-bs-toggle="collapse"
                                                role="button"
                                                data-bs-target="#sup2IdReport"
                                                :class="

                                                        this.$route.name =='SummaryCoCollectionReport' ||
                                                        this.$route.name =='SummaryCoCollectedReport' ||
                                                        this.$route.name =='DailyCoLoanDisbursementReport' ||
                                                        this.$route.name =='SummaryCoWithoutInterestReport' ||
                                                        this.$route.name =='SummaryCoReport' ||
                                                        this.$route.name =='SummaryWriteOffReport' ||
                                                        this.$route.name =='SummaryProductivityByBranch'? 'router-link-exact-active':''">
                                                <div
                                                    class="d-flex align-items-center btn_collapse"
                                                    aria-expanded="true"
                                                >
                                                    <p class="nd_none nowrap">{{ $t("Summary Loan") }}</p>
                                                </div>
                                                <i class="nd_none fa-solid fa-chevron-right"></i>
                                            </div>
                                            <div
                                                id="sup2IdReport"
                                                class="cus_collapse collapse"
                                                data-bs-parent="#sup_collapse"
                                            >
                                                <ul class="list-group">
                                                    <router-link
                                                        class="menu-list"
                                                        style="padding-left: 40px"
                                                        v-if="
                                                            $can(
                                                                'Summary Co Report'
                                                            )
                                                        "
                                                        :to="{
                                                            name: 'SummaryCoCollectionReport',
                                                        }"
                                                    >
                                                        {{ $t("Summary Co Collection Report") }}
                                                    </router-link>
                                                    <router-link
                                                        class="menu-list"
                                                        style="padding-left: 40px"
                                                        v-if="
                                                            $can(
                                                                'Summary Co Report'
                                                            )
                                                        "
                                                        :to="{
                                                            name: 'SummaryCoCollectedReport',
                                                        }"
                                                    >
                                                        {{ $t("Summary Co Collected Report") }}
                                                    </router-link>

                                                    <router-link
                                                        class="menu-list"
                                                        style="padding-left: 40px"
                                                        v-if="
                                                            $can(
                                                                'Summary Co Report'
                                                            )
                                                        "
                                                        :to="{
                                                            name: 'DailyCoLoanDisbursementReport',
                                                        }"
                                                    >
                                                        {{ $t("Daily Co Disbursement Report") }}
                                                    </router-link>




                                                    <router-link
                                                        class="menu-list"
                                                        style="padding-left: 40px"
                                                        v-if="
                                                            $can(
                                                                'Summary Co Report'
                                                            )
                                                        "
                                                        :to="{
                                                            name: 'SummaryCoWithoutInterestReport',
                                                        }"
                                                    >
                                                        {{ $t("Summary Co Without Interest Report") }}
                                                    </router-link>

                                                    <router-link
                                                        class="menu-list"
                                                        style="padding-left: 40px"
                                                        v-if="
                                                            $can(
                                                                'Summary Co Report'
                                                            )
                                                        "
                                                        :to="{
                                                            name: 'SummaryCoReport',
                                                        }"
                                                    >
                                                        {{ $t( "Summary Productivity By Co" ) }}
                                                    </router-link>

                                                    <router-link
                                                        class="menu-list"
                                                        style="padding-left: 40px"
                                                        v-if="
                                                            $can(
                                                                'Summary Co Report'
                                                            )
                                                        "
                                                        :to="{
                                                            name: 'SummaryWriteOffReport',
                                                        }"
                                                    >
                                                        {{ $t( "Summary Productivity Write Off" ) }}
                                                    </router-link>


                                                    <router-link
                                                        class="menu-list"
                                                        style="padding-left: 40px"
                                                        v-if="
                                                            $can(
                                                                'Summary Productivity By Branch'
                                                            )
                                                        "
                                                        :to="{
                                                            name: 'SummaryProductivityByBranch',
                                                        }"
                                                    >
                                                        {{ $t( "Summary Productivity By Branch" ) }}
                                                    </router-link>
                                                </ul>
                                            </div>
                                        </div>
                                        <!-- <div
                                            class="position-relative"
                                            style="padding-left: 33px"
                                            v-if="$can('Borrow Report')"
                                        >
                                            <div
                                                class="d-flex align-items-center ps-3 ml_list"
                                                data-bs-toggle="collapse"
                                                role="button"
                                                data-bs-target="#sup3IdReport"
                                                :class="this.$route.name ==
                                                    'LoanLossProClassific' ||
                                                    this.$route.name ==
                                                    'SummaryLoanLossProvision'
                                                    ? 'router-link-exact-active'
                                                    : ''
                                                    "
                                            >
                                                <div
                                                    class="d-flex align-items-center btn_collapse"
                                                    aria-expanded="true"
                                                >
                                                    <p class="nd_none nowrap">{{ $t( "Loan Loss Provision" ) }}</p>
                                                </div>
                                                <i class="nd_none fa-solid fa-chevron-right"></i>
                                            </div>
                                            <div
                                                id="sup3IdReport"
                                                class="cus_collapse collapse"
                                                data-bs-parent="#sup_collapse"
                                            >
                                                <ul class="list-group">
                                                    <router-link
                                                        class="menu-list"
                                                        style="padding-left: 40px"
                                                        v-if="
                                                            $can(
                                                                'Borrow Report'
                                                            )
                                                        "
                                                        :to="{
                                                            name: 'LoanLossProClassific',
                                                        }"
                                                    >
                                                        {{ $t( "Loan Loss Provision Classification Report" ) }}
                                                    </router-link>
                                                    <router-link
                                                        class="menu-list"
                                                        style="padding-left: 40px"
                                                        v-if="
                                                            $can(
                                                                'Borrow Report'
                                                            )
                                                        "
                                                        :to="{
                                                            name: 'SummaryLoanLossProvision',
                                                        }"
                                                    >
                                                        {{ $t( "Summary Loan Loss Provision Report" ) }}
                                                    </router-link>
                                                </ul>
                                            </div>
                                        </div> -->
                                    </ul>
                                </div>
                            </div>

                            <!-- Accounting -->
                            <div
                                class="position-relative"
                                v-if="
                                $can('Type Account List') ||
                                $can('ChartOfAccount List') ||
                                $can('Expense Report') ||
                                $can('Income Report') ||
                                $can('CashFlow Report') ||
                                $can('GeneralLedger Report') ||
                                $can('TrialBalance Report') ||
                                $can('BalanceSheet Report') ||
                                $can('Net Loss Profit') ||
                                $can('Expense List') ||
                                $can('Income List') ||
                                $can('Journal List') ||
                                $can('Journal Report') ||
                                $can('PROFIT AND LOSS STATEMENT BY MONTH')
                            "
                            >
                                <div
                                    class="d-flex align-items-center ml_list"
                                    data-bs-toggle="collapse"
                                    role="button"
                                    data-bs-target="#list_accounting"
                                    :class="this.$route.name ==
                                        'TypeOfAccountList' ||
                                        this.$route.name ==
                                        'ChartOfAccountList' ||
                                        this.$route.name == 'ExpenseList' ||
                                        this.$route.name == 'IncomeList' ||
                                        this.$route.name == 'JournalList' ||
                                        this.$route.name == 'ExpenseReport' ||
                                        this.$route.name == 'IncomeReport' ||
                                        this.$route.name == 'CashFlow' ||
                                        this.$route.name == 'GeneralLedger' ||
                                        this.$route.name == 'TrialBalance' ||
                                        this.$route.name == 'BalanceSheet' ||
                                        this.$route.name ==
                                        'NetProfitAndLoss' ||
                                        this.$route.name == 'JournalReport' ||
                                        this.$route.name ==
                                        'ProfitAndLossStatementByMonth' ||
                                        this.$route.name ==
                                        'IncomeStatementMonth'
                                        ? 'router-link-exact-active'
                                        : ''
                                        "
                                >
                                    <div class="d-flex align-items-center btn_collapse" aria-expanded="true">
                                        <i class="cus_icon fa-solid fa-sliders"></i>
                                        <p class="nd_none nowrap">{{ $t("Accounting") }}</p>
                                    </div>
                                    <i class="nd_none fa-solid fa-chevron-right"></i>
                                </div>
                                <div
                                    id="list_accounting"
                                    class="cus_collapse collapse"
                                    data-bs-parent="#action_collapse"
                                >
                                    <ul class="list-group">
                                        <router-link
                                            class="menu-list"
                                            v-if="$can('Type Account List')"
                                            :to="{ name: 'TypeOfAccountList' }"
                                        >
                                            {{ $t("Type Of Account") }}
                                        </router-link>
                                        <router-link
                                            class="menu-list"
                                            v-if="$can('ChartOfAccount List')"
                                            :to="{ name: 'ChartOfAccountList' }"
                                        >
                                            {{ $t("Chat Of Account") }}
                                        </router-link>
                                        <router-link
                                            class="menu-list"
                                            v-if="$can('Journal List')"
                                            :to="{ name: 'JournalList' }"
                                        >
                                            {{ $t("Journal Posting") }}
                                        </router-link>
                                        <router-link
                                            class="menu-list"
                                            v-if="$can('Expense List')"
                                            :to="{ name: 'ExpenseList' }"
                                        >
                                            {{ $t("Expense List") }}
                                        </router-link>
                                        <router-link
                                            class="menu-list"
                                            v-if="$can('Income List')"
                                            :to="{ name: 'IncomeList' }"
                                        >
                                            {{ $t("Income List") }}
                                        </router-link>
                                        <router-link
                                            class="menu-list"
                                            v-if="$can('Journal Report')"
                                            :to="{ name: 'JournalReport' }"
                                        >
                                            {{ $t("Journal transaction") }}
                                        </router-link>
                                        <router-link
                                            class="menu-list"
                                            v-if="$can('Expense Report')"
                                            :to="{ name: 'ExpenseReport' }"
                                        >
                                            {{ $t("Expense Report") }}
                                        </router-link>
                                        <router-link
                                            class="menu-list"
                                            v-if="$can('Income Report')"
                                            :to="{ name: 'IncomeReport' }"
                                        >
                                            {{ $t("Income Report") }}
                                        </router-link>
                                        <router-link
                                            class="menu-list"
                                            v-if="$can('CashFlow Report')"
                                            :to="{ name: 'CashFlow' }"
                                        >
                                            {{ $t("Cash Flow") }}
                                        </router-link>
                                        <router-link
                                            class="menu-list"
                                            v-if="$can('GeneralLedger Report')"
                                            :to="{ name: 'GeneralLedger' }"
                                        >
                                            {{ $t("Transaction") }}
                                        </router-link>
                                        <router-link
                                            class="menu-list"
                                            v-if="$can('TrialBalance Report')"
                                            :to="{ name: 'TrialBalance' }"
                                        >
                                            {{ $t("Trial Balance") }}
                                        </router-link>
                                        <router-link
                                            class="menu-list"
                                            v-if="$can('BalanceSheet Report')"
                                            :to="{ name: 'BalanceSheet' }"
                                        >
                                            {{ $t("Balance Sheet") }}
                                        </router-link>
                                        <router-link
                                            class="menu-list"
                                            v-if="$can('Net Loss Profit')"
                                            :to="{ name: 'NetProfitAndLoss' }"
                                        >
                                            {{ $t("Income Statement") }}
                                        </router-link>
                                        <router-link
                                            class="menu-list"
                                            :to="{
                                            name: 'ProfitAndLossStatementByMonth',
                                        }"
                                        >
                                            {{ $t("Profit & Loss Statement") }}
                                        </router-link>
                                        <!-- <router-link class="menu-list" v-if="$can('Net Loss Profit')"
                                            :to="{ name: 'IncomeStatementMonth' }">
                                            {{ $t('Income Statement by Month') }}
                                        </router-link> -->
                                    </ul>
                                </div>
                            </div>
                            <!-- រំលោះទ្រព្យ -->
                            <div
                                class="position-relative"
                                v-if="
                                $can('Asset List') ||
                                $can('Depreciation List') ||
                                $can('Summary Asset Depreciation Report')
                            "
                            >
                                <div
                                    class="d-flex align-items-center ml_list"
                                    data-bs-toggle="collapse"
                                    role="button"
                                    data-bs-target="#financial_report"
                                    :class="this.$route.name == 'AssetList' ||
                                        $route.name == 'DepreciationList' ||
                                        this.$route.name ==
                                        'SummaryAssetDepreciationReport' ||
                                        this.$route.name ==
                                        'DepreciationPaymentReport'
                                        ? 'router-link-exact-active'
                                        : ''
                                        "
                                >
                                    <div class="d-flex align-items-center btn_collapse" aria-expanded="true">
                                        <i class="cus_icon fa-solid fa-signal"></i>
                                        <p class="nd_none nowrap">{{ $t("Depreciation Asset") }}</p>
                                    </div>
                                    <i class="nd_none fa-solid fa-chevron-right"></i>
                                </div>
                                <div
                                    id="financial_report"
                                    class="cus_collapse collapse"
                                    data-bs-parent="#action_collapse"
                                >
                                    <ul class="list-group">
                                        <router-link
                                            class="menu-list"
                                            :to="{ name: 'AssetList' }"
                                            v-if="$can('Asset List')"
                                        >
                                            {{ $t("Asset List") }}
                                        </router-link>
                                        <router-link
                                            class="menu-list"
                                            :to="{ name: 'DepreciationList' }"
                                            v-if="$can('Depreciation List')"
                                        >
                                            {{ $t("Depreciation List") }}
                                        </router-link>
                                        <router-link
                                            class="menu-list"
                                            :to="{
                                            name: 'SummaryAssetDepreciationReport',
                                        }"
                                            v-if="
                                            $can(
                                                'Summary Asset Depreciation Report'
                                            )
                                        "
                                        >
                                            {{ $t( "Summary Asset Depreciation Report" ) }}
                                        </router-link>
                                        <router-link
                                            class="menu-list"
                                            :to="{
                                            name: 'DepreciationPaymentReport',
                                        }"
                                        >
                                            {{ $t( "Depreciation Payment Report" ) }}
                                        </router-link>
                                    </ul>
                                </div>
                            </div>
                            <!-- <div class="position-relative" v-if="$can('Cash Transfer Request List')">
                               <div class="d-flex align-items-center ml_list" data-bs-toggle="collapse" role="button" data-bs-target="#cash_transfer"
                                   :class="this.$route.name == 'CashTransferRequestList'  ? 'router-link-exact-active' : ''">
                                   <div class="d-flex align-items-center btn_collapse" aria-expanded="true">
                                       <i class="cus_icon fa-solid fa-shuffle fa-sm"></i>
                                       <p class="nd_none nowrap">{{ $t('Cash Transfer Request') }}</p>
                                   </div>
                                   <i class="nd_none fa-solid fa-chevron-right"></i>
                               </div>
                               <div id="cash_transfer" class="cus_collapse collapse" data-bs-parent="#action_collapse">
                                   <ul class="list-group">
                                        <router-link class="menu-list" v-if="$can('Cash Transfer Request List')"
                                            :to="{ name: 'CashTransferRequestList' }">
                                            {{ $t('Cash Transfer Request List') }}
                                        </router-link>
                                   </ul>
                               </div>
                           </div> -->
                            <!-- Setting -->
                            <div
                                class="position-relative"
                                v-if="
                                $can('Currency List') ||
                                $can('Company List') ||
                                $can('User List') ||
                                $can('User Role List') ||
                                $can('Backup') ||
                                $can('Logactivity List') ||
                                $can('Manage Group CO List')
                            "
                            >
                                <!--  $can('Holiday List') || this.$route.name == 'Holiday' || -->
                                <div
                                    class="d-flex align-items-center ml_list"
                                    data-bs-toggle="collapse"
                                    role="button"
                                    data-bs-target="#setting"
                                    :class="this.$route.name == 'Currency' ||
                                        this.$route.name == 'CompanyList' ||
                                        this.$route.name == 'User' ||
                                        this.$route.name == 'UserRole' ||
                                        this.$route.name == 'ManageGroupCO' ||
                                        this.$route.name == 'Setting' ||
                                        this.$route.name == 'GetLogactivity' ||
                                        this.$route.name == 'Backup'
                                        ? 'router-link-exact-active'
                                        : ''
                                        "
                                >
                                    <div class="d-flex align-items-center btn_collapse" aria-expanded="true">
                                        <i class="cus_icon fa-solid fa-solid fa-gear"></i>
                                        <p class="nd_none nowrap">{{ $t("Setting") }}</p>
                                    </div>
                                    <i class="nd_none fa-solid fa-chevron-right"></i>
                                </div>
                                <div id="setting" class="cus_collapse collapse" data-bs-parent="#action_collapse">
                                    <ul class="list-group">
                                        <router-link
                                            class="menu-list"
                                            :to="{ name: 'Currency' }"
                                            v-if="$can('Currency List')"
                                        >
                                            {{ $t("Currency") }}
                                        </router-link>
                                        <!-- <router-link
                                            class="menu-list"
                                            :to="{ name: 'Branch' }"
                                            v-if="$can('Branch List')"
                                        >
                                            {{ $t("Branch") }}
                                        </router-link> -->
                                        <!-- <router-link class="menu-list" :to="{ name: 'Holiday' }"
                                            v-if="$can('Holiday List')">
                                            {{ $t('Holiday') }}
                                        </router-link> -->
                                        <router-link
                                            class="menu-list"
                                            :to="{ name: 'CompanyList' }"
                                            v-if="$can('Company List')"
                                        >
                                            {{ $t("Company") }}
                                        </router-link>
                                        <router-link class="menu-list" :to="{ name: 'User' }" v-if="$can('User List')">
                                            {{ $t("User Manager") }}
                                        </router-link>
                                        <router-link
                                            class="menu-list"
                                            :to="{ name: 'UserRole' }"
                                            v-if="$can('User Role List')"
                                        >
                                            {{ $t("Role Manager") }}
                                        </router-link>
                                        <router-link
                                            class="menu-list"
                                            :to="{ name: 'ManageGroupCO' }"
                                            v-if="$can('Manage Group CO List')"
                                        >
                                            {{ $t("Manage Group CO") }}
                                        </router-link>
                                        <router-link
                                            class="menu-list"
                                            :to="{ name: 'GetLogactivity' }"
                                            v-if="$can('Logactivity List')"
                                        >
                                            {{ $t("Logactivity List") }}
                                        </router-link>
                                        <router-link class="menu-list" :to="{ name: 'Backup' }" v-if="$can('Backup')">
                                            {{ $t("Backup") }}
                                        </router-link>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                lang: "km",
                currency: "",
                length: "",
                user: "",
                branch_name: "",
                company:"",
                hidden: false,
                currencies: [],
                branches: [],
                countWriteOff: 0,
                cashierNotApprove: 0,
                countRequestCO: 0,
                countRequestBM: 0,
                countLoanDisburst: 0,
                countCollectGoodLoan: 0,
                collectPaymentOnDay : 0,
                countCollectLateLoan: 0,
                activeTheme: +(localStorage.getItem("theme") || 1),
                modes: [
                    { id: 1, icon: "fa-sun", text: "Light" },
                    { id: 2, icon: "fa-moon", text: "Dark" },
                    { id: 3, icon: "fa-circle-half-stroke", text: "Auto" },
                ],
                windowWidth: window.innerWidth,
            };
        },
        created() {

                axios
                    .get("admin-api/get-company")
                    .then((res) => {
                        this.company = res.data[0];

                    })
                    .catch((error) => {
                        console.log(error);
                    });

            this.funNotification();
            this.funUserInfo();
            if (localStorage.lang) {
                this.lang = localStorage.lang;
            }
            this.changeLang(this.lang, true);
        },
        watch: {
            $route() {
                this.funUserInfo();
            },
        },
        mounted() {
            this.toggleTheme(this.activeTheme);
            this.handleResize();
            window.addEventListener("resize", this.handleResize);
        },
        computed: {
            currentMode() {
                return this.modes.find((mode) => mode.id === this.activeTheme);
            },
            isMobile() {
                return (
                    this.windowWidth <= 820 ||
                    /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
                );
            },
        },
        beforeDestroy() {
            window.removeEventListener("resize", this.handleResize);
        },
        methods: {
            closeOffcanvas() {
                if (this.isMobile) {
                    $("#offcanvasWithBothOptions").offcanvas("hide");
                }
            },

            handleResize() {
                this.windowWidth = window.innerWidth;
                if (this.isMobile) {
                    $("body").addClass("mobile");
                    $("body").removeClass("is_hide_navbar");
                } else {
                    $("body").removeClass("mobile");
                    $("body").removeClass("o_hide_navbar");
                }
            },
            funUserInfo() {
                axios
                    .get("system/get-user")
                    .then((res) => {
                        this.user = res.data.user;
                        this.branches = res.data.branch;
                        this.currencies = res.data.currencies;
                        this.currency = res.data.currency;
                        this.length = res.data.length;
                        this.branch_name = res.data.branch_name;
                    })
                    .catch((error) => {
                        console.log(error);
                    });
            },

            toggleTheme(themeId) {
                const mode = this.modes.find((mode) => mode.id === themeId);
                // console.log(mode.id);
                this.activeTheme = mode.id;
                const mode_text =
                    this.activeTheme === 1
                        ? "light"
                        : this.activeTheme === 2
                          ? "dark"
                          : window.matchMedia("(prefers-color-scheme: dark)").matches
                            ? "dark"
                            : "light";
                localStorage.setItem("theme", mode.id);
                document.documentElement.setAttribute("data-bs-theme", mode_text);
            },
            isActive(modeId) {
                return modeId === this.activeTheme;
            },
            hideNavbar() {
                $("body").removeClass("o_hide_navbar");
            },
            showNavbar() {
                $("body").addClass("o_hide_navbar");
            },
            navbarToggle() {
                $("body").toggleClass("is_hide_navbar");
            },
            changeLang(e, check = false) {
                axios
                    .get("system/check-lang", {
                        params: { lang: e },
                    })
                    .then((res) => {
                        this.$i18n.locale = res.data.data;
                        localStorage.lang = res.data.data;
                        this.lang = res.data.data;
                        if (check == false) {
                            // location.reload();
                        }
                    });
            },
            funLogout() {
                axios
                    .post("/logout")
                    .then((response) => {
                        this.$router.push("/");
                        this.user = "";
                        localStorage.setItem("checked", "logout");
                        location.reload();
                    })
                    .catch((error) => {
                        location.reload();
                    });
            },
            funSwitchBranch(id) {
                axios
                    .get("system/switch-branch/" + id)
                    .then((response) => {
                        this.funCheckRoutName(this.$route.name);
                    })
                    .catch((error) => {
                        console.log(error);
                    });
            },
            funSwitchCurrency(id) {
                axios
                    .get("system/switch-currency/" + id)
                    .then((response) => {
                        location.reload();
                    })
                    .catch((error) => {
                        console.log(error);
                    });
            },
            funCheckRoutName(route_name) {
                if (route_name == "ClientsCreate") {
                    return this.$router.push({ name: "Clients" });
                } else if (route_name == "CollateralDetailCreate") {
                    return this.$router.push({ name: "Collaterals" });
                } else if (
                    route_name == "HistoryPayment" ||
                    route_name == "LoanCreate" ||
                    route_name == "TableSchedule" ||
                    route_name == "LoanReschedule" ||
                    route_name == "Payment"
                ) {
                    return this.$router.push({ name: "ListofClientDisbursed" });
                } else if (route_name == "BranchCreate") {
                    return this.$router.push({ name: "Branch" });
                } else if (route_name == "UserCreate") {
                    return this.$router.push({ name: "User" });
                } else if (route_name == "RoleCreate") {
                    return this.$router.push({ name: "UserRole" });
                } else {
                    location.reload();
                }
            },
            funNotification() {
                axios
                    .get("admin-api/notifications")
                    .then((response) => {
                        this.countRequestCO       = response.data.count_request_co;
                        this.countRequestBM       = response.data.count_request_bm;
                        this.countLoanDisburst    = response.data.count_loan_disburst;
                        this.countCollectGoodLoan = response.data.count_good_loan;
                        this.collectPaymentOnDay  = response.data.count_collect_payment_on_day;
                        this.countCollectLateLoan = response.data.count_late_loan;
                        this.countWriteOff        = response.data.count_write_off;
                        this.cashierNotApprove    = response.data.count_cashier_not_approve;
                    })
                    .catch((error) => {
                        console.log(error);
                    });
            },
        },
    };
</script>

<style lang="scss" scoped>
    .dropdown-item {
        cursor: pointer;
    }

    .ml_list .fa-chevron-right {
        transition: transform 0.2s ease-in-out;
        font-size: 12px;
        color: #788088;
        margin-left: auto;
        text-align: center;
    }

    .ml_list[aria-expanded="true"] .fa-chevron-right {
        transform: rotate(90deg);
    }

    .accordion-button:not(.collapsed) {
        background-color: var(--bs-tertiary-bg);
    }

    .avatar-profile {
        padding: 0;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 0;
        background-color: var(--bs-tertiary-bg);
    }

    .wrap-icon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .fa-gradient {
        background: -webkit-gradient(linear, left top, left bottom, from(#239046), to(#3cba92));
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
</style>
