@extends('layouts.admin')

@section('title', 'Engineers')

@section('content')
    <x-page-header
        title="Engineers"
        :breadcrumbs="[
            ['label' => 'Admin', 'href' => route('admin.dashboard')],
            ['label' => 'Engineers'],
        ]"
        subtitle="Manage engineer profiles and assignments."
    >
        <x-slot:actions>
            <x-button :href="route('admin.engineers.create')">New Engineer</x-button>
        </x-slot:actions>
    </x-page-header>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
        <div class="lg:col-span-2">
            <div class="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm">
                <form method="GET" class="flex flex-col sm:flex-row gap-3 items-end">
                    <div class="flex-1">
                        <label class="text-xs font-semibold uppercase tracking-wider text-slate-500">Search Team</label>
                        <div class="mt-1 relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <svg class="h-4 w-4 text-slate-400" viewBox="0 0 20 20" fill="currentColor">
                                    <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
                                </svg>
                            </div>
                            <input name="q" value="{{ request('q') }}" placeholder="Name, role, or ID..." class="w-full pl-10 h-11 rounded-xl border-slate-200 focus:border-blue-500 focus:ring-4 focus:ring-blue-500/10 transition-all">
                        </div>
                    </div>
                    <x-button type="submit" class="h-11 px-6">Filter Team</x-button>
                </form>
            </div>
        </div>
        {{-- <div class="bg-blue-600 p-5 rounded-2xl shadow-lg shadow-blue-500/20 text-white relative overflow-hidden">
            <div class="relative z-10">
                <div class="text-xs font-bold uppercase tracking-widest opacity-80 mb-1">Resource Forecast</div>
                <div class="text-xl font-bold mb-2">New Project Launch</div>
                <p class="text-xs text-blue-100 leading-relaxed">Phase 2 of 'City Infra Renewal' starts next Monday. We need to assign 4 more Senior Engineers.</p>
            </div>
            <svg class="absolute right-[-20px] bottom-[-20px] h-32 w-32 text-white/10" viewBox="0 0 24 24" fill="currentColor">
                <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
            </svg>
        </div> --}}
    </div>

    <x-table-wrapper>
        <table class="min-w-full text-sm">
            <thead class="bg-slate-50 border-b border-slate-200">
                <tr>
                    <th class="text-left px-4 py-4 text-[10px] font-bold uppercase tracking-widest text-slate-400">Employee ID</th>
                    <th class="text-left px-4 py-4 text-[10px] font-bold uppercase tracking-widest text-slate-400">Engineer / Specialist</th>
                    <th class="text-left px-4 py-4 text-[10px] font-bold uppercase tracking-widest text-slate-400">Contact Details</th>
                    <th class="text-left px-4 py-4 text-[10px] font-bold uppercase tracking-widest text-slate-400">Assignment Status</th>
                    <th class="text-right px-4 py-4 text-[10px] font-bold uppercase tracking-widest text-slate-400">Actions</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-zinc-100">
                @forelse ($engineers as $u)
                    <tr class="group hover:bg-slate-50/80 transition-colors">
                        <td class="px-4 py-4 whitespace-nowrap font-mono text-xs font-bold text-slate-400 group-hover:text-blue-600 transition-colors">{{ $u->employee_id ?? '-' }}</td>
                        <td class="px-4 py-4">
                            <div class="flex items-center gap-3">
                                <div class="h-9 w-9 rounded-full bg-slate-100 flex items-center justify-center font-bold text-slate-500 text-xs border border-slate-200">
                                    {{ strtoupper(mb_substr($u->name, 0, 1)) }}
                                </div>
                                <div>
                                    <div class="font-bold text-slate-900 leading-none mb-1">{{ $u->name }}</div>
                                    <div class="text-xs font-semibold text-blue-600/80 uppercase tracking-wider">{{ $u->designation ?? 'Engineer' }}</div>
                                </div>
                            </div>
                        </td>
                        <td class="px-4 py-4">
                            <div class="text-sm font-medium text-slate-700">{{ $u->email }}</div>
                            <div class="text-xs text-slate-400">{{ $u->phone ?? '-' }}</div>
                        </td>
                        <td class="px-4 py-4 whitespace-nowrap">
                            <x-status-badge :value="$u->status?->value" :label="ucfirst($u->status?->value ?? 'unknown')" />
                        </td>
                        <td class="px-4 py-4 text-right">
                            <div class="flex items-center justify-end gap-2">
                                <x-button :href="route('admin.engineers.show', $u)" variant="secondary" size="sm" class="rounded-lg shadow-sm">View Profile</x-button>
                                <x-button :href="route('admin.engineers.edit', $u)" variant="ghost" size="sm" class="rounded-lg">Edit</x-button>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="5" class="px-4 py-10 text-center text-zinc-500">No engineers found.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </x-table-wrapper>

    <div class="mt-4">
        {{ $engineers->links() }}
    </div>
@endsection