@extends('layouts.aura-main')

@section('main-content')
<div class="max-w-7xl mx-auto pb-20">
    {{-- Header Section --}}
    <div class="flex justify-between items-end mb-8 border-b border-slate-900 pb-4">
        <div>
            <h1 class="text-3xl font-black text-slate-900 tracking-tighter uppercase">Employee Directory</h1>
            <p class="text-[10px] font-bold text-slate-400 tracking-widest mt-1 uppercase">Manage staff profiles and payroll settings</p>
        </div>
        <div class="flex gap-3">
            <a href="{{ route('payroll.employees.template.download') }}" class="text-[10px] font-black tracking-widest text-slate-600 border border-slate-200 px-4 py-2 hover:bg-slate-50 transition uppercase">
                <i class="fas fa-download mr-1"></i> Template
            </a>
            <a href="{{ route('payroll.employees.create') }}" class="text-[10px] font-black tracking-widest text-white bg-slate-900 px-4 py-2 hover:bg-slate-800 transition uppercase">
                <i class="fas fa-plus mr-1"></i> Add Employee
            </a>
        </div>
    </div>

    {{-- Search & Filters --}}
    <div class="mb-6 flex flex-col md:flex-row gap-4">
        <div class="relative flex-1">
            <span class="absolute inset-y-0 left-0 flex items-center pl-3">
                <i class="fas fa-search text-slate-400 text-xs"></i>
            </span>
            <input type="text" placeholder="Search by name, ID or department..." 
                class="w-full bg-white border border-slate-200 rounded-sm py-2 pl-10 pr-4 text-[12px] focus:border-slate-900 outline-none transition placeholder:text-slate-400 font-medium">
        </div>
        <select class="bg-white border border-slate-200 rounded-sm px-4 py-2 text-[12px] font-bold text-slate-700 outline-none focus:border-slate-900">
            <option>All Statuses</option>
            <option>Active</option>
            <option>Inactive</option>
        </select>
    </div>

    {{-- Data Table --}}
    <div class="bg-white border border-slate-200 rounded-sm shadow-sm overflow-hidden">
        <table class="w-full text-left border-collapse">
            <thead>
                <tr class="border-b border-slate-900 bg-slate-50 text-[9px] font-black text-slate-500 tracking-widest uppercase">
                    <th class="px-6 py-4 w-24">ID</th>
                    <th class="px-6 py-4">Employee Details</th>
                    <th class="px-6 py-4">Designation</th>
                    <th class="px-6 py-4">Contract Type</th>
                    <th class="px-6 py-4 text-center">Status</th>
                    <th class="px-6 py-4 text-right">Actions</th>
                </tr>
            </thead>
            <tbody class="text-[11px] font-medium divide-y divide-slate-100 tracking-tight">
                @forelse($employees as $employee)
                <tr class="hover:bg-slate-50 transition group">
                    <td class="px-6 py-4 font-mono text-slate-400 text-[10px]">
                        #{{ $employee->employee_number }}
                    </td>
                    <td class="px-6 py-4">
                        <div class="flex flex-col">
                            <span class="font-black text-slate-900 uppercase tracking-tight">{{ $employee->first_name }} {{ $employee->last_name }}</span>
                            <span class="text-[10px] text-slate-400 font-mono">{{ $employee->email }}</span>
                        </div>
                    </td>
                    <td class="px-6 py-4">
                        <div class="flex flex-col">
                            <span class="text-slate-700 font-bold uppercase">{{ $employee->designation ?? 'Staff' }}</span>
                            <span class="text-[9px] text-slate-400">{{ $employee->phone ?? 'No Phone' }}</span>
                        </div>
                    </td>
                    <td class="px-6 py-4">
                        <span class="px-2 py-1 bg-slate-100 text-slate-600 rounded-full text-[9px] font-black uppercase tracking-tighter">
                            {{ str_replace('_', ' ', $employee->employment_type) }}
                        </span>
                    </td>
                    <td class="px-6 py-4 text-center">
                        @if($employee->is_active)
                            <span class="text-[9px] font-black text-emerald-600 uppercase tracking-widest bg-emerald-50 px-2 py-1 border border-emerald-100">Active</span>
                        @else
                            <span class="text-[9px] font-black text-slate-400 uppercase tracking-widest bg-slate-50 px-2 py-1 border border-slate-100">Inactive</span>
                        @endif
                    </td>
                    <td class="px-6 py-4 text-right">
                        <div class="flex justify-end gap-4">
                            <a href="{{ route('payroll.employees.edit', $employee->id) }}" class="text-slate-400 hover:text-indigo-600 transition" title="Edit">
                                <i class="fas fa-edit"></i>
                            </a>
                            <a href="{{ route('payroll.employees.show', $employee->id) }}" class="text-slate-400 hover:text-slate-900 transition" title="View Profile">
                                <i class="fas fa-user-circle"></i>
                            </a>
                            <form action="{{ route('payroll.employees.destroy', $employee->id) }}" method="POST" onsubmit="return confirm('Archive this employee?')" class="inline">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="text-slate-300 hover:text-rose-600 transition">
                                    <i class="fas fa-trash-alt"></i>
                                </button>
                            </form>
                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="6" class="px-6 py-20 text-center">
                        <div class="flex flex-col items-center">
                            <i class="fas fa-users-slash text-4xl text-slate-200 mb-4"></i>
                            <p class="text-slate-400 text-sm font-bold uppercase tracking-widest">No employee records found</p>
                            <a href="{{ route('payroll.employees.create') }}" class="mt-4 text-[10px] font-black text-indigo-600 underline uppercase tracking-widest">Add your first employee</a>
                        </div>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    {{-- Pagination --}}
    @if($employees->hasPages())
    <div class="mt-6">
        {{ $employees->links() }}
    </div>
    @endif
</div>

<style>
    /* Pagination Overrides to match Slate Theme */
    .pagination { display: flex; gap: 5px; }
    .page-item .page-link { border-radius: 0 !important; border: 1px solid #e2e8f0; color: #64748b; font-weight: 800; font-size: 10px; text-transform: uppercase; }
    .page-item.active .page-link { background-color: #0f172a !important; border-color: #0f172a !important; color: white !important; }
</style>
@endsection