@extends('layouts.portal')

@section('header_title', 'Employee Directory')

@section('content')
<div class="space-y-6">
    <!-- Header Actions -->
    <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
        <div>
            <h2 class="text-2xl font-bold text-slate-800">Team</h2>
            <p class="text-slate-500 text-sm font-medium">Manage and oversee your team members.</p>
        </div>
        <div class="flex items-center space-x-3">
            @can('create', App\Models\User::class)
            <a href="{{ route('portal.employees.create') }}" class="flex items-center px-5 py-2.5 bg-portal-primary hover:bg-portal-primary-dark text-white text-sm font-bold rounded-xl transition-all shadow-lg shadow-portal-primary/20">
                <i data-lucide="user-plus" class="w-4 h-4 mr-2"></i>
                Add New Employee
            </a>
            @endcan
        </div>
    </div>

    <!-- Filters Bar -->
    <div class="p-4 bg-white/60 backdrop-blur-md rounded-[2rem] border border-slate-100 flex flex-wrap items-center gap-4 shadow-sm">
        <div class="relative flex-1 min-w-[200px]">
            <i data-lucide="search" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400"></i>
            <input type="text" placeholder="Search employees..." class="w-full pl-10 pr-4 py-2.5 text-sm bg-white border-slate-100 rounded-xl focus:ring-2 focus:ring-portal-primary/10 transition-all">
        </div>
        <select class="px-4 py-2.5 text-sm bg-white border-slate-100 rounded-xl text-slate-600 focus:ring-2 focus:ring-portal-primary/10 transition-all outline-none">
            <option value="">All Departments</option>
            @foreach($employees->pluck('department.name')->unique() as $dept)
                <option value="{{ $dept }}">{{ $dept }}</option>
            @endforeach
        </select>
        <select class="px-4 py-2.5 text-sm bg-white border-slate-100 rounded-xl text-slate-600 focus:ring-2 focus:ring-portal-primary/10 transition-all outline-none">
            <option value="">All Roles</option>
            <option value="manager">Manager</option>
            <option value="team_leader">Team Leader</option>
            <option value="team_member">Team Member</option>
        </select>
    </div>

    <!-- Employee Table -->
    <div class="bg-white rounded-[2rem] border border-slate-100 shadow-sm overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-left">
                <thead>
                    <tr class="bg-slate-50/50 border-b border-slate-100">
                        <th class="px-8 py-5 text-xs font-bold uppercase tracking-wider text-slate-500">Employee</th>
                        <th class="px-6 py-5 text-xs font-bold uppercase tracking-wider text-slate-500">Role & Dept</th>
                        <th class="px-6 py-5 text-xs font-bold uppercase tracking-wider text-slate-500">Joined</th>
                        <th class="px-6 py-5 text-xs font-bold uppercase tracking-wider text-slate-500">Status</th>
                        <th class="px-8 py-5 text-right text-xs font-bold uppercase tracking-wider text-slate-500">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-50">
                    @foreach($employees as $employee)
                    <tr class="hover:bg-slate-50/50 transition-colors group">
                        <td class="px-8 py-5">
                            <div class="flex items-center space-x-4">
                                <div class="relative flex-shrink-0">
                                    <img class="w-12 h-12 rounded-2xl border-2 border-slate-100 group-hover:border-portal-primary/20 transition-all shadow-sm" src="https://ui-avatars.com/api/?name={{ urlencode($employee->name) }}&background=4F46E5&color=fff" alt="">
                                    @if($employee->active_status)
                                        <span class="absolute -bottom-1 -right-1 w-4 h-4 bg-green-500 border-2 border-white rounded-full"></span>
                                    @endif
                                </div>
                                <div class="min-w-0">
                                    <p class="text-sm font-bold text-slate-900 truncate">{{ $employee->name }}</p>
                                    <p class="text-xs text-slate-400 truncate">{{ $employee->email }}</p>
                                </div>
                            </div>
                        </td>
                        <td class="px-6 py-5">
                            <div class="inline-flex items-center px-2.5 py-0.5 rounded-lg text-xs font-bold bg-indigo-50 text-portal-primary mb-1">
                                {{ strtoupper(str_replace('_', ' ', $employee->role)) }}
                            </div>
                            <p class="text-xs text-slate-500 font-medium">{{ $employee->department->name ?? 'Portal Core' }}</p>
                        </td>
                        <td class="px-6 py-5">
                            <p class="text-sm font-medium text-slate-700">{{ $employee->joining_date ? $employee->joining_date->format('M d, Y') : 'N/A' }}</p>
                            <p class="text-xs text-slate-400">Arrived {{ $employee->joining_date ? $employee->joining_date->diffForHumans() : '' }}</p>
                        </td>
                        <td class="px-6 py-5">
                            @if($employee->active_status)
                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-green-50 text-green-600">
                                    <span class="w-1.5 h-1.5 rounded-full bg-green-500 mr-2"></span>
                                    Active
                                </span>
                            @else
                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-slate-100 text-slate-400">
                                    <span class="w-1.5 h-1.5 rounded-full bg-slate-400 mr-2"></span>
                                    Inactive
                                </span>
                            @endif
                        </td>
                        <td class="px-8 py-5 text-right">
                            <div class="flex items-center justify-end space-x-2">
                                <a href="{{ route('portal.employees.show', $employee->id) }}" class="p-2 text-slate-400 hover:text-portal-primary transition-colors hover:bg-indigo-50 rounded-lg">
                                    <i data-lucide="eye" class="w-5 h-5"></i>
                                </a>
                                <a href="mailto:{{ $employee->email }}" class="p-2 text-slate-400 hover:text-portal-primary transition-colors hover:bg-slate-50 rounded-lg">
                                    <i data-lucide="mail" class="w-5 h-5"></i>
                                </a>
                                @can('delete', $employee)
                                <form action="{{ route('portal.employees.destroy', $employee->id) }}" method="POST" class="inline" onsubmit="return confirm('Are you sure you want to remove this employee?');">
                                    @csrf @method('DELETE')
                                    <button type="submit" class="p-2 text-slate-400 hover:text-red-600 transition-colors hover:bg-red-50 rounded-lg">
                                        <i data-lucide="trash-2" class="w-5 h-5"></i>
                                    </button>
                                </form>
                                @endcan
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        
        <!-- Pagination -->
        <div class="px-8 py-5 bg-slate-50/50 border-t border-slate-100">
            {{ $employees->links() }}
        </div>
    </div>
</div>
@endsection