<div class="main-sidebar sidebar-style-2">
    <aside id="sidebar-wrapper">
        <div class="sidebar-brand">
            <a href="{{ route(Auth::user()->role == 'Admin' ? 'admin.index' : 'user.index') }}">REKBER</a>
        </div>
        <div class="sidebar-brand sidebar-brand-sm">
            <a href="{{ route(Auth::user()->role == 'Admin' ? 'admin.index' : 'user.index') }}">RK</a>
        </div>
        <ul class="sidebar-menu">
            <li class="menu-header">Dashboard</li>

            <li><a class="nav-link {{ request()->routeIs(auth()->user()->role == 'Admin' ? 'admin.index' : 'user.index') ? 'active' : '' }}"
                    href="{{ route(Auth::user()->role == 'Admin' ? 'admin.index' : 'user.index') }}"><i
                        class="fas fa-fire"></i> <span>Dashboard</span></a></li>

            <li class="menu-header">Menu</li>

            @if (Auth::user()->role == 'Admin')
                <li><a class="nav-link {{ request()->routeIs('admin-user.index') ? 'active' : '' }}"
                        href="{{ route('admin-user.index') }}" id="clickUser"><i class="far fa-user"></i>
                        <span id="userBeep">User</span></a></li>
                <li><a class="nav-link {{ request()->routeIs('admin-transaction.index') ? 'active' : '' }}"
                        href="{{ route('admin-transaction.index') }}" id="clickTransaction"><i
                            class="fas fa-columns"></i><span id="transactionBeep">Transaction</span></a></li>
                <li><a class="nav-link {{ request()->routeIs('admin-refund.index') ? 'active' : '' }}"
                        href="{{ route('admin-refund.index') }}" id="clickRefund"><i class="far fa-square"></i>
                        <span id="refundBeep">Refund</span></a>
                </li>
                <li><a class="nav-link {{ request()->routeIs('admin-setting.index') ? 'active' : '' }}"
                        href="{{ route('admin-setting.index') }}"><i class="fas fa-cog"></i>
                        <span>Setting</span></a></li>
                <li><a class="nav-link {{ request()->routeIs('admin-notification.index') ? 'active' : '' }}"
                        href="{{ route('admin-notification.index') }}"><i class="fas fa-bell"></i>
                        <span>Notifikasi</span></a></li>
            @else
                <li class="drop-down ">
                    <a class="nav-link {{ request()->routeIs('user-pembeli.index') || request()->routeIs('user-penjual.index') ? 'active' : '' }}"
                        data-toggle="collapse" href="#submenuTransaction" aria-expanded="false"
                        aria-controls="submenuTransaction">
                        <i class="fas fa-columns"></i><span>Transaksi</span> <i class="fas fa-caret-down"></i>
                    </a>

                    <div id="submenuTransaction" class="collapse">
                        <ul class="nav flex-column sub-menu">
                            <li class="nav-item">
                                <a class="nav-link" href="{{ route('user-pembeli.index') }}">
                                    <i class="fas fa-users"></i> Pembeli
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="{{ route('user-penjual.index') }}">
                                    <i class="fas fa-user"></i> Penjual
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li>
                    <a class="nav-link {{ request()->routeIs('user-contact.index') ? 'active' : '' }}"
                        href="{{ route('user-contact.index') }}">
                        <i class="fas fa-address-book"></i> <span>Kontak</span>
                    </a>
                </li>


                <li>
                    <a class="nav-link {{ request()->routeIs('user-refund.index') ? 'active' : '' }}"
                        href="{{ route('user-refund.index') }}">
                        <i class="fas fa-money-check-alt"></i> <span>Refund</span>
                    </a>
                </li>
            @endif
        </ul>
    </aside>
</div>
@section('js-khusus')
    <script src="{{ asset('assets/modules/nicescroll/jquery.nicescroll.min.js') }}"></script>
@endsection
@section('js-sidebar')
    <script>
        $(document).ready(function() {

            function updateNotifSideBar(layanan) {
                layanan.addClass("beep");
            }

            function removeNotifSideBar(layanan) {
                layanan.removeClass("beep");
            }

            $('#clickRefund').on('click', function() {
                removeNotifSideBar($('#refundBeep'));
            });

            $('#clickTransaction').on('click', function() {
                removeNotifSideBar($('#transactionBeep'));
            });

            $('#clickUser').on('click', function() {
                removeNotifSideBar($('#userBeep'));
            });

            var pusher = new Pusher('3e5bdc20dddd7fbc655e', {
                cluster: 'ap1'
            });

            var channel = pusher.subscribe('chanel-update-notifikasi-untuk-admin');

            channel.bind('event-update-notifikasi-untuk-admin', function(data) {
                let service = data.service;
                let userEmail = "{{ auth()->user()->email }}";
                if ("{{ auth()->user()->role }}" == 'Admin') {
                    if (service == 'Refund') {
                        updateNotifSideBar($('#refundBeep'));
                    } else if (service == 'Transaksi') {
                        updateNotifSideBar($('#transactionBeep'));
                    } else if (service == 'User') {
                        updateNotifSideBar($('#userBeep'));
                    }
                }
            });
        });
    </script>
@endsection