<div x-data="{ open: {{ request()->routeIs('hr.*') ? 'true' : 'false' }} }" class="mb-1">
    <button @click="open = !open" class="group flex items-center p-3 py-2 text-base font-medium rounded-md
        {{ request()->routeIs('hr.*') ? 'bg-red-100 text-red-800' : 'text-gray-700 hover:bg-red-50 hover:text-red-800' }}">
        <svg xxmlns="http://www.w3.org/2000/svg" class="ml-3 flex-shrink-0 h-6 w-6 
            {{ request()->routeIs('hr.*') ? 'text-red-700' : 'text-gray-500 group-hover:text-red-700' }}" 
            fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
        </svg>
        <span>{{ \App\Helpers\TranslationHelper::transFromDatabase('Human Resources', __('Human Resources')) }}</span>
        <svg :class="{'rotate-180': open, 'rotate-0': !open}" class="mr-auto h-5 w-5 transform transition-transform duration-200" 
            xxmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
        </svg>
    </button>
    <div x-show="open" x-transition class="pr-4 mr-4 border-r border-gray-200">
        <!-- Employees Section -->
        @permission('hr.employees.view')
        <a href="{{ route('employees.index') }}" class="group flex items-center p-3 py-2 text-sm font-medium rounded-md
            {{ request()->routeIs('employees.index') ? 'text-red-800' : 'text-gray-700 hover:text-red-800' }}">
            <span class="ml-2 w-1 h-1 rounded-full {{ request()->routeIs('employees.index') ? 'bg-red-600' : 'bg-gray-500' }}"></span>
            <span>{{ \App\Helpers\TranslationHelper::transFromDatabase('Employees', __('Employees')) }}</span>
        </a>
        @endpermission

        @permission('hr.employees.create')
        <a href="{{ route('employees.create') }}" class="group flex items-center p-3 py-2 text-sm font-medium rounded-md
            {{ request()->routeIs('employees.create') ? 'text-red-800' : 'text-gray-700 hover:text-red-800' }}">
            <span class="ml-2 w-1 h-1 rounded-full {{ request()->routeIs('employees.create') ? 'bg-red-600' : 'bg-gray-500' }}"></span>
            <span>{{ \App\Helpers\TranslationHelper::transFromDatabase('Add New Employee', __('Add New Employee')) }}</span>
        </a>
        @endpermission

        <!-- Employee Contracts Section -->
        @permission('hr.contracts.view')
        <a href="{{ route('employee-contracts.index') }}" class="group flex items-center p-3 py-2 text-sm font-medium rounded-md
            {{ request()->routeIs('employee-contracts.index') ? 'text-red-800' : 'text-gray-700 hover:text-red-800' }}">
            <span class="ml-2 w-1 h-1 rounded-full {{ request()->routeIs('employee-contracts.index') ? 'bg-red-600' : 'bg-gray-500' }}"></span>
            <span>{{ \App\Helpers\TranslationHelper::transFromDatabase('Employee Contracts', __('Employee Contracts')) }}</span>
        </a>
        @endpermission

        @permission('hr.contracts.create')
        <a href="{{ route('employee-contracts.create') }}" class="group flex items-center p-3 py-2 text-sm font-medium rounded-md
            {{ request()->routeIs('employee-contracts.create') ? 'text-red-800' : 'text-gray-700 hover:text-red-800' }}">
            <span class="ml-2 w-1 h-1 rounded-full {{ request()->routeIs('employee-contracts.create') ? 'bg-red-600' : 'bg-gray-500' }}"></span>
            <span>{{ \App\Helpers\TranslationHelper::transFromDatabase('Add New Contract', __('Add New Contract')) }}</span>
        </a>
        @endpermission

        <!-- Employee Leaves Section -->
        @permission('hr.leaves.view')
        <a href="{{ route('employee-leaves.index') }}" class="group flex items-center p-3 py-2 text-sm font-medium rounded-md
            {{ request()->routeIs('employee-leaves.index') ? 'text-red-800' : 'text-gray-700 hover:text-red-800' }}">
            <span class="ml-2 w-1 h-1 rounded-full {{ request()->routeIs('employee-leaves.index') ? 'bg-red-600' : 'bg-gray-500' }}"></span>
            <span>{{ \App\Helpers\TranslationHelper::transFromDatabase('Employee Leaves', __('Employee Leaves')) }}</span>
        </a>
        @endpermission

        @permission('hr.leaves.create')
        <a href="{{ route('employee-leaves.create') }}" class="group flex items-center p-3 py-2 text-sm font-medium rounded-md
            {{ request()->routeIs('employee-leaves.create') ? 'text-red-800' : 'text-gray-700 hover:text-red-800' }}">
            <span class="ml-2 w-1 h-1 rounded-full {{ request()->routeIs('employee-leaves.create') ? 'bg-red-600' : 'bg-gray-500' }}"></span>
            <span>{{ \App\Helpers\TranslationHelper::transFromDatabase('Add New Leave', __('Add New Leave')) }}</span>
        </a>
        @endpermission

        <!-- Attendance Section -->
        @permission('hr.attendance.view')
        <a href="{{ route('attendance.index') }}" class="group flex items-center p-3 py-2 text-sm font-medium rounded-md
            {{ request()->routeIs('attendance.index') ? 'text-red-800' : 'text-gray-700 hover:text-red-800' }}">
            <span class="ml-2 w-1 h-1 rounded-full {{ request()->routeIs('attendance.index') ? 'bg-red-600' : 'bg-gray-500' }}"></span>
            <span>{{ \App\Helpers\TranslationHelper::transFromDatabase('Attendance & Departure', __('Attendance & Departure')) }}</span>
        </a>
        @endpermission

        @permission('hr.attendance.create')
        <a href="{{ route('attendance.create') }}" class="group flex items-center p-3 py-2 text-sm font-medium rounded-md
            {{ request()->routeIs('attendance.create') ? 'text-red-800' : 'text-gray-700 hover:text-red-800' }}">
            <span class="ml-2 w-1 h-1 rounded-full {{ request()->routeIs('attendance.create') ? 'bg-red-600' : 'bg-gray-500' }}"></span>
            <span>{{ \App\Helpers\TranslationHelper::transFromDatabase('Record Attendance', __('Record Attendance')) }}</span>
        </a>
        @endpermission

        @permission('hr.attendance.bulk-create')
        <a href="{{ route('attendance.bulk-create') }}" class="group flex items-center p-3 py-2 text-sm font-medium rounded-md
            {{ request()->routeIs('attendance.bulk-create') ? 'text-red-800' : 'text-gray-700 hover:text-red-800' }}">
            <span class="ml-2 w-1 h-1 rounded-full {{ request()->routeIs('attendance.bulk-create') ? 'bg-red-600' : 'bg-gray-500' }}"></span>
            <span>{{ \App\Helpers\TranslationHelper::transFromDatabase('Bulk Attendance', __('Bulk Attendance')) }}</span>
        </a>
        @endpermission

        @permission('hr.attendance.report')
        <a href="{{ route('attendance.report') }}" class="group flex items-center p-3 py-2 text-sm font-medium rounded-md
            {{ request()->routeIs('attendance.report') ? 'text-red-800' : 'text-gray-700 hover:text-red-800' }}">
            <span class="ml-2 w-1 h-1 rounded-full {{ request()->routeIs('attendance.report') ? 'bg-red-600' : 'bg-gray-500' }}"></span>
            <span>{{ \App\Helpers\TranslationHelper::transFromDatabase('Attendance Reports', __('Attendance Reports')) }}</span>
        </a>
        @endpermission

        <!-- Payroll & Salaries Section -->
        <div class="mt-3 mb-2">
            <h3 class="p-3 text-s font-semibold text-gray-500 uppercase tracking-wider">{{ \App\Helpers\TranslationHelper::transFromDatabase('Payroll & Salaries', __('Payroll & Salaries')) }}</h3>
        </div>

        @permission('hr.payrolls.view')
        <a href="{{ route('payrolls.index') }}" class="group flex items-center p-3 py-2 text-sm font-medium rounded-md
            {{ request()->routeIs('payrolls.index') ? 'text-red-800' : 'text-gray-700 hover:text-red-800' }}">
            <span class="ml-2 w-1 h-1 rounded-full {{ request()->routeIs('payrolls.index') ? 'bg-red-600' : 'bg-gray-500' }}"></span>
            <span>{{ \App\Helpers\TranslationHelper::transFromDatabase('Payrolls', __('Payrolls')) }}</span>
        </a>
        @endpermission

        @permission('hr.payrolls.create')
        <a href="{{ route('payrolls.create') }}" class="group flex items-center p-3 py-2 text-sm font-medium rounded-md
            {{ request()->routeIs('payrolls.create') ? 'text-red-800' : 'text-gray-700 hover:text-red-800' }}">
            <span class="ml-2 w-1 h-1 rounded-full {{ request()->routeIs('payrolls.create') ? 'bg-red-600' : 'bg-gray-500' }}"></span>
            <span>{{ \App\Helpers\TranslationHelper::transFromDatabase('Create New Payroll', __('Create New Payroll')) }}</span>
        </a>
        @endpermission

        @permission('hr.payrolls.view')
        <a href="{{ route('salary-structures.index') }}" class="group flex items-center p-3 py-2 text-sm font-medium rounded-md
            {{ request()->routeIs('salary-structures.index') ? 'text-red-800' : 'text-gray-700 hover:text-red-800' }}">
            <span class="ml-2 w-1 h-1 rounded-full {{ request()->routeIs('salary-structures.index') ? 'bg-red-600' : 'bg-gray-500' }}"></span>
            <span>{{ \App\Helpers\TranslationHelper::transFromDatabase('Salary Structures', __('Salary Structures')) }}</span>
        </a>
        @endpermission

        @permission('hr.payrolls.view')
        <a href="{{ route('allowances.index') }}" class="group flex items-center p-3 py-2 text-sm font-medium rounded-md
            {{ request()->routeIs('allowances.index') ? 'text-red-800' : 'text-gray-700 hover:text-red-800' }}">
            <span class="ml-2 w-1 h-1 rounded-full {{ request()->routeIs('allowances.index') ? 'bg-red-600' : 'bg-gray-500' }}"></span>
            <span>{{ \App\Helpers\TranslationHelper::transFromDatabase('Allowances & Bonuses', __('Allowances & Bonuses')) }}</span>
        </a>
        @endpermission

        @permission('hr.payrolls.view')
        <a href="{{ route('deductions.index') }}" class="group flex items-center p-3 py-2 text-sm font-medium rounded-md
            {{ request()->routeIs('deductions.index') ? 'text-red-800' : 'text-gray-700 hover:text-red-800' }}">
            <span class="ml-2 w-1 h-1 rounded-full {{ request()->routeIs('deductions.index') ? 'bg-red-600' : 'bg-gray-500' }}"></span>
            <span>{{ \App\Helpers\TranslationHelper::transFromDatabase('Deductions & Withholdings', __('Deductions & Withholdings')) }}</span>
        </a>
        @endpermission

        @permission('hr.payrolls.view')
        <a href="{{ route('payroll-reports.index') }}" class="group flex items-center p-3 py-2 text-sm font-medium rounded-md
            {{ request()->routeIs('payroll-reports.index') ? 'text-red-800' : 'text-gray-700 hover:text-red-800' }}">
            <span class="ml-2 w-1 h-1 rounded-full {{ request()->routeIs('payroll-reports.index') ? 'bg-red-600' : 'bg-gray-500' }}"></span>
            <span>{{ \App\Helpers\TranslationHelper::transFromDatabase('Payroll Reports', __('Payroll Reports')) }}</span>
        </a>
        @endpermission
    </div>
</div>
