@inject('accessService', 'App\Services\AccessService')

<div class="simplebar-content mt-2" id="sidebar-panel-gate-in" style="padding: 0px;display:none">
     <ul style="margin-left: -20px;">
         <li style="margin-left: 20px">
             <img src="{{ asset('assets/img/logos/logo-shepia-2.png') }}" style="width: 170px;">
         </li>
        @unlessrole('office_admin')
         <li class="{{ setActive('dashboard*') }}">
             <a href="{{ route('dashboard.index') }}" style="display: flex; align-items: center;">
                 @lang('app.dashboard')
             </a>
         </li>
        @endunlessrole
        @unlessrole(['office_admin', 'security'])
         <li class="{{ setActive('employee*') }}">
             <a href="{{ route('employee.index') }}" style="display: flex; align-items: center;">
                 @lang('app.worker')
             </a>
         </li>
        @endunlessrole
        @unlessrole(['office_admin', 'security', 'dokter'])
        <li class="{{ setActive(['gate-in/employee*', 'gate-in/create']) }}">
             <a href="{{ route('gate-in.employee') }}" style="display: flex; align-items: center;">
                 @lang('app.gate_in')
             </a>
         </li>
         @endunlessrole
         @unlessrole(['security'])
         <li class="{{ setActive(['gate-in/visitor*', 'gate-in/edit-visitor*']) }}">
             <a href="{{ route('gate-in.visitor') }}" style="display: flex; align-items: center;">
                Visitor
             </a>
         </li>
         @endunlessrole
     </ul>
     
     <ul style="position:absolute;bottom: 0;margin-left: -20px;margin-bottom: 12px;">
         <li class="{{ setActive('log*') }}">
             <a href="{{ route('log.index') }}" style="display: flex; align-items: center;">
                 History
             </a>
         </li>
         @role(['super_admin', 'user_admin'])
         <li id="user-management-settings">
            <div class="">
                <div class="collapse-wrap {{ request()->is('user*', 'group*') ? 'active-submenu' : '' }}">
                    <a href="{{route('user.index')}}" class="{{-- parent-link parent-link2 --}} {{ setActive('user*') }}" {{-- onclick="userManagement()" --}}>
                        User Management
                        {{-- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                             viewBox="0 0 24 24" fill="none" stroke="currentColor"
                             stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                             class="feather feather-chevron-right"
                             style="margin-left: 63px; float: right;">
                            <polyline id="polyline2" points="6 9 12 15 18 9">></polyline>
                        </svg> --}}
                    </a>
                </div>
                {{-- <ul style="display: none;" id="submenu-usermanagement">
                    <li style="height:25px;" class="{{ setActive('user*') }}">
                        <a class="is-submenu" href="{{route('user.index')}}">
                            Users
                        </a>
                    </li>
                    <li style="height:25px;" class="{{ setActive('group*') }}">
                        <a class="is-submenu" href="{{route('group.index')}}">
                            Group
                        </a>
                    </li>
                </ul> --}}
            </div>
         </li>
         <li id="system-settings">
            <div class="">
                <div class="collapse-wrap {{ request()->is('department', 'critical-activity', 'gate', 'role-worker', 'purpose', 'return-worker-reason', 'password-document', 'competencies', 'location', 'number-of-days') ? 'active-submenu' : '' }}">
                    <a href="javascript:void(0);" class="parent-link parent-link1" onclick="systemSettings()">
                        Settings
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                             viewBox="0 0 24 24" fill="none" stroke="currentColor"
                             stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                             class="feather feather-chevron-right"
                             style="margin-left: 130px; float: right;">
                            <polyline id="polyline1" points="6 9 12 15 18 9"></polyline>
                        </svg>
                    </a>
                </div>
                <ul style="display: none;" id="submenu-system">
                    <li style="height:25px;" class="{{ setActive('department') }}">
                        <a class="is-submenu" href="{{route('department.index')}}">
                            Department
                        </a>
                    </li>
                    <li style="height:25px;" class="{{ setActive('role-worker') }}">
                        <a class="is-submenu" href="{{route('role-worker.index')}}">
                            Role Worker
                        </a>
                    </li>
                    <li style="height:25px;" class="{{ setActive('critical-activity') }}">
                        <a class="is-submenu" href="{{route('critical-activity.index')}}">
                            Critical Activity
                        </a>
                    </li>
                    <li style="height:25px;" class="{{ setActive('competencies') }}">
                        <a class="is-submenu" href="{{route('competencies.index')}}">
                            Competencies
                        </a>
                    </li>
                    <li style="height:25px;" class="{{ setActive('location') }}">
                        <a class="is-submenu" href="{{route('location.index')}}">
                            Location
                        </a>
                    </li>
                    <li style="height:25px;" class="{{ setActive('purpose') }}">
                        <a class="is-submenu" href="{{route('purpose.index')}}">
                            Purpose
                        </a>
                    </li>
                    <li style="height:25px;" class="{{ setActive('return-worker-reason') }}">
                        <a class="is-submenu" href="{{route('return-worker-reason.index')}}">
                            Return Worker
                        </a>
                    </li>
                    <li style="height:25px;" class="{{ setActive('password-document') }}">
                        <a class="is-submenu" href="{{route('password-document.index')}}">
                            Password Document
                        </a>
                    </li>
                    <li style="height:25px;" class="{{ setActive('number-of-days') }}">
                        <a class="is-submenu" href="{{route('number-of-days.index')}}">
                            Number of Days (Get In Worker)
                        </a>
                    </li>
                    <li style="height:25px;" class="{{ setActive('personnel-competency') }}">
                        <a class="is-submenu" href="{{route('personnel-competency.index')}}">
                            Personnel Competency
                        </a>
                    </li>
                </ul>
            </div>
         </li>
         @endrole
     </ul>

 </div>
<script>
// const pathAndQuery = window.location.pathname + window.location.search;

// if(pathAndQuery == '/department' || pathAndQuery == '/critical-activity' || pathAndQuery == '/gate' || pathAndQuery == '/role-worker' || pathAndQuery == '/purpose' || pathAndQuery == '/return-worker-reason' || pathAndQuery == '/password-document'){

//     const polyline1 = document.getElementById('polyline1');
//     const li = document.getElementById('system-settings');
//     const li3 = document.getElementById('icon-system-settings');
//     const submenusystem = document.getElementById('submenu-system');
//     const currentPoints = polyline1.getAttribute('points');

//     polyline1.setAttribute('points', '18 15 12 9 6 15'); // panah atas
//     li.style.marginTop = '97px';
//     li.style.marginBottom = '80px';
//     li3.style.marginBottom = '177px';
//     submenusystem.style.display = 'block';
// }

// if(pathAndQuery == '/user' || pathAndQuery == '/group'){
//     const polyline2 = document.getElementById('polyline2');
//     const li4 = document.getElementById('user-management-settings');
//     const submenuusermanagement = document.getElementById('submenu-usermanagement');
//     const currentPoints2 = polyline2.getAttribute('points');
//     const li5 = document.getElementById('icon-user-management');

//     polyline2.setAttribute('points', '18 15 12 9 6 15'); // panah atas
//     submenuusermanagement.style.display = 'block';
//     li4.style.height = '100px';
//     // li4.style.marginBottom = '35px';
//     li5.style.height = '100px';
//     li5.style.alignItems = 'baseline';
// }

function systemSettings(){
    // const polyline2 = document.getElementById('polyline2');
    // const li4 = document.getElementById('user-management-settings');
    // const submenuusermanagement = document.getElementById('submenu-usermanagement');
    // const currentPoints2 = polyline2.getAttribute('points');
    // const li5 = document.getElementById('icon-user-management');

    // polyline2.setAttribute('points', '6 9 12 15 18 9'); // panah bawah
    // submenuusermanagement.style.display = 'none';
    // li4.style.marginTop = '0px';
    // li4.style.marginBottom = '0px';
    // li5.style.marginBottom = '0px';

    const polyline1 = document.getElementById('polyline1');
    const li = document.getElementById('system-settings');
    const li3 = document.getElementById('icon-system-settings');
    const submenusystem = document.getElementById('submenu-system');
    const currentPoints = polyline1.getAttribute('points');

    // Toggle chevron direction and margin-top
    if (currentPoints === '6 9 12 15 18 9') {
        polyline1.setAttribute('points', '18 15 12 9 6 15'); // panah atas
        li.style.marginTop = '120px';
        li.style.marginBottom = '100px';
        li3.style.marginBottom = '220px';
        submenusystem.style.display = 'block';
    } else {
        polyline1.setAttribute('points', '6 9 12 15 18 9'); // panah bawah
        li.style.marginTop = '0px';
        li.style.marginBottom = '0px';
        li3.style.marginBottom = '0px';
        submenusystem.style.display = 'none';
    }
}

function userManagement(){
    // const polyline1 = document.getElementById('polyline1');
    // const li = document.getElementById('system-settings');
    // const li2 = document.getElementById('icon-system-settings');
    // const submenusystem = document.getElementById('submenu-system');

    // // Tutup submenu system
    // polyline1.setAttribute('points', '6 9 12 15 18 9'); // panah bawah
    // li.style.marginTop = '0px';
    // li.style.marginBottom = '0px';
    // li2.style.marginBottom = '0px';
    // submenusystem.style.display = 'none';

    const polyline2 = document.getElementById('polyline2');
    const li4 = document.getElementById('user-management-settings');
    const submenuusermanagement = document.getElementById('submenu-usermanagement');
    const currentPoints2 = polyline2.getAttribute('points');
    const li5 = document.getElementById('icon-user-management');

    // Toggle panah user management
    if (currentPoints2 === '6 9 12 15 18 9') {
        polyline2.setAttribute('points', '18 15 12 9 6 15'); // panah atas
        submenuusermanagement.style.display = 'block';
        li4.style.height = '100px';
        // li4.style.marginBottom = '35px';
        li5.style.height = '100px';
        li5.style.alignItems = 'baseline';
    } else {
        polyline2.setAttribute('points', '6 9 12 15 18 9'); // panah bawah
        submenuusermanagement.style.display = 'none';
        li4.style.height = '50px';
        // li4.style.marginBottom = '0px';
        li5.style.height = '50px';
        li5.style.alignItems = 'center';
    }
}
</script>