@extends('layouts.app')

@section('title', 'Salary Groups')
@section('heading', 'Salary Groups')

@section('content')
    <x-card>
        <div class="mb-4 flex flex-wrap items-center justify-between gap-3">
            <p class="text-slate-600">Group employees for payroll; assign employees to a group from edit.</p>
            <div class="flex flex-wrap items-center gap-2">
                @if(request('from') === 'settings')
                    <a href="{{ route('settings.home') }}" class="inline-flex items-center gap-1.5 rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">
                        <i class="bi bi-arrow-left"></i> Back
                    </a>
                @else
                    <a href="{{ route('payroll.index', ['tab' => 'component']) }}" class="inline-flex items-center gap-1.5 rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">
                        <i class="bi bi-arrow-left"></i> Back to Payroll
                    </a>
                @endif
                <a href="{{ route('salary-groups.create') }}" class="inline-flex items-center rounded-lg bg-slate-800 px-4 py-2 text-sm font-medium text-white hover:bg-slate-700 text-nowrap"><i class="bi bi-plus-lg me-1"></i>Add Group</a>
            </div>
        </div>
        <x-table>
            <x-slot name="head">
                <tr>
                    <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Name</th>
                    <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Employees</th>
                    <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Actions</th>
                </tr>
            </x-slot>
            @forelse($salaryGroups as $sg)
                <tr>
                    <td class="whitespace-nowrap px-4 py-3 text-sm text-slate-900">{{ $sg->name }}</td>
                    <td class="whitespace-nowrap px-4 py-3 text-sm text-slate-600">{{ $sg->users_count }}</td>
                    <td class="whitespace-nowrap px-4 py-3 text-sm">
                        <a href="{{ route('salary-groups.edit', $sg) }}" class="btn-icon-action btn-icon-action--edit" title="Edit" aria-label="Edit"><i class="bi bi-pencil-square"></i></a>
                    </td>
                </tr>
            @empty
                <tr><td colspan="4" class="px-4 py-8 text-center text-sm text-slate-500">No salary groups yet.</td></tr>
            @endforelse
        </x-table>
        @if($salaryGroups->hasPages())<div class="mt-4">{{ $salaryGroups->links() }}</div>@endif
    </x-card>
@endsection