@extends('admin.layouts.app')
@section('title', 'Team Members')
@section('page-title', 'Team Management')

@section('content')

<div class="flex items-center justify-between mb-6">
    <div>
        <h2 class="text-xl font-bold text-gray-800">Team Members</h2>
        <p class="text-sm text-gray-500 mt-0.5">{{ $employees->total() }} total</p>
    </div>
    <a href="{{ route('admin.employees.create') }}"
       class="inline-flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-semibold px-4 py-2.5 rounded-lg transition shadow-sm">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
        </svg>
        Add Team Member
    </a>
</div>

<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
    @if($employees->isEmpty())
        <div class="text-center py-16 text-gray-400">
            <p class="text-sm">No team members yet.</p>
            <a href="{{ route('admin.employees.create') }}" class="text-blue-600 text-sm hover:underline mt-2 inline-block">Add one →</a>
        </div>
    @else
    <table class="min-w-full divide-y divide-gray-100">
        <thead class="bg-gray-50 text-xs text-gray-500 uppercase tracking-wide">
            <tr>
                <th class="px-5 py-3 text-left">Name</th>
                <th class="px-5 py-3 text-left hidden md:table-cell">Email</th>
                <th class="px-5 py-3 text-left">Role</th>
                <th class="px-5 py-3 text-left hidden lg:table-cell">Leads</th>
                <th class="px-5 py-3 text-left hidden lg:table-cell">Status</th>
                <th class="px-5 py-3 text-right">Actions</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-50">
            @foreach($employees as $emp)
            <tr class="hover:bg-gray-50 transition">
                <td class="px-5 py-4">
                    <div class="flex items-center gap-3">
                        <div class="w-9 h-9 rounded-full bg-blue-600 flex items-center justify-center text-white text-sm font-bold flex-shrink-0">
                            {{ strtoupper(substr($emp->name, 0, 1)) }}
                        </div>
                        <span class="font-medium text-gray-800 text-sm">{{ $emp->name }}</span>
                    </div>
                </td>
                <td class="px-5 py-4 hidden md:table-cell text-sm text-gray-500">{{ $emp->email }}</td>
                <td class="px-5 py-4">
                    <span class="inline-block text-xs font-semibold px-2.5 py-1 rounded-full uppercase tracking-wide
                        {{ $emp->role === 'admin' ? 'bg-purple-100 text-purple-700' : 'bg-blue-100 text-blue-700' }}">
                        {{ $emp->role }}
                    </span>
                </td>
                <td class="px-5 py-4 hidden lg:table-cell">
                    <span class="text-sm font-semibold text-gray-700">{{ $emp->total_leads ?? 0 }}</span>
                    <span class="text-xs text-gray-400 ml-1">assigned</span>
                </td>
                <td class="px-5 py-4 hidden lg:table-cell">
                    <span class="inline-flex items-center gap-1.5 text-xs font-medium px-2.5 py-1 rounded-full
                        {{ $emp->is_active ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-500' }}">
                        <span class="w-1.5 h-1.5 rounded-full {{ $emp->is_active ? 'bg-green-500' : 'bg-gray-400' }}"></span>
                        {{ $emp->is_active ? 'Active' : 'Inactive' }}
                    </span>
                </td>
                <td class="px-5 py-4">
                    <div class="flex items-center justify-end gap-1.5">
                        <a href="{{ route('admin.employees.edit', $emp) }}"
                           class="p-1.5 text-gray-400 hover:text-indigo-600 hover:bg-indigo-50 rounded-lg transition" title="Edit">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                      d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                            </svg>
                        </a>
                        @if($emp->id !== auth()->id())
                        <form method="POST" action="{{ route('admin.employees.destroy', $emp) }}"
                              onsubmit="return confirm('Deactivate {{ addslashes($emp->name) }}?')">
                            @csrf @method('DELETE')
                            <button type="submit" class="p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition" title="Deactivate">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"/>
                                </svg>
                            </button>
                        </form>
                        @endif
                    </div>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>

    @if($employees->hasPages())
        <div class="px-5 py-4 border-t border-gray-100">{{ $employees->links() }}</div>
    @endif
    @endif
</div>

@endsection