@extends('admin.layouts.app')
@section('title', 'HR Management')
@section('page-title', 'Human Resources')

@section('content')
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
    <a href="{{ route('hr.staff') }}" class="bg-white rounded-xl shadow-sm p-6 hover:shadow-lg transition">
        <div class="flex items-center gap-4">
            <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center">
                <i class="fas fa-users text-blue-600"></i>
            </div>
            <div>
                <p class="text-sm text-gray-500">Staff</p>
                <p class="text-2xl font-bold">Manage</p>
            </div>
        </div>
    </a>
    <a href="{{ route('hr.shifts') }}" class="bg-white rounded-xl shadow-sm p-6 hover:shadow-lg transition">
        <div class="flex items-center gap-4">
            <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center">
                <i class="fas fa-clock text-green-600"></i>
            </div>
            <div>
                <p class="text-sm text-gray-500">Shifts</p>
                <p class="text-2xl font-bold">Manage</p>
            </div>
        </div>
    </a>
    <a href="{{ route('hr.attendance') }}" class="bg-white rounded-xl shadow-sm p-6 hover:shadow-lg transition">
        <div class="flex items-center gap-4">
            <div class="w-12 h-12 bg-yellow-100 rounded-full flex items-center justify-center">
                <i class="fas fa-clipboard-check text-yellow-600"></i>
            </div>
            <div>
                <p class="text-sm text-gray-500">Attendance</p>
                <p class="text-2xl font-bold">Track</p>
            </div>
        </div>
    </a>
    <a href="{{ route('hr.salaries') }}" class="bg-white rounded-xl shadow-sm p-6 hover:shadow-lg transition">
        <div class="flex items-center gap-4">
            <div class="w-12 h-12 bg-gold/20 rounded-full flex items-center justify-center">
                <i class="fas fa-dollar-sign text-gold"></i>
            </div>
            <div>
                <p class="text-sm text-gray-500">Salaries</p>
                <p class="text-2xl font-bold">Payroll</p>
            </div>
        </div>
    </a>
</div>

<div class="flex justify-between items-center mb-6">
    <h2 class="text-lg font-semibold">Staff Members</h2>
    <a href="{{ route('hr.staff.create') }}" class="px-4 py-2 bg-navy text-white rounded-lg hover:bg-navy-light">
        <i class="fas fa-plus mr-2"></i>Add Staff
    </a>
</div>

<div class="bg-white rounded-xl shadow-sm overflow-hidden">
    <table class="w-full">
        <thead class="bg-gray-50">
            <tr>
                <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase">Employee</th>
                <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase">ID</th>
                <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase">Position</th>
                <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase">Department</th>
                <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase">Salary</th>
                <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
                <th class="px-6 py-4 text-right text-xs font-medium text-gray-500 uppercase">Actions</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-200">
            @forelse($staff as $member)
            <tr class="hover:bg-gray-50">
                <td class="px-6 py-4">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 bg-gold rounded-full flex items-center justify-center text-white font-bold">
                            {{ substr($member->user->name, 0, 1) }}
                        </div>
                        <div>
                            <p class="font-medium">{{ $member->user->name }}</p>
                            <p class="text-sm text-gray-500">{{ $member->user->email }}</p>
                        </div>
                    </div>
                </td>
                <td class="px-6 py-4 font-mono text-sm">{{ $member->employee_id }}</td>
                <td class="px-6 py-4">{{ $member->position }}</td>
                <td class="px-6 py-4">{{ $member->department ?? '-' }}</td>
                <td class="px-6 py-4">₦ {{ number_format($member->salary ?? 0, 0) }}</td>
                <td class="px-6 py-4">
                    @php
                        $statusClass = match($member->status) {
                            'active' => 'bg-green-100 text-green-700',
                            'inactive' => 'bg-gray-100 text-gray-700',
                            'suspended' => 'bg-yellow-100 text-yellow-700',
                            'terminated' => 'bg-red-100 text-red-700',
                            default => 'bg-gray-100 text-gray-700',
                        };
                    @endphp
                    <span class="px-2 py-1 rounded-full text-xs {{ $statusClass }}">
                        {{ ucfirst($member->status) }}
                    </span>
                </td>
                <td class="px-6 py-4 text-right">
                    <a href="{{ route('hr.staff.edit', $member) }}" class="text-blue-600 hover:text-blue-800">
                        <i class="fas fa-edit"></i>
                    </a>
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="7" class="px-6 py-12 text-center text-gray-500">
                    No staff members found
                </td>
            </tr>
            @endforelse
        </tbody>
    </table>
</div>
@endsection