@extends('layouts.admin')

@section('title', 'Logistic Supervisors')

@section('content')
    <x-page-header
        title="Logistic Supervisors"
        :breadcrumbs="[
            ['label' => 'Admin', 'href' => route('admin.dashboard')],
            ['label' => 'Logistic Supervisors'],
        ]"
        subtitle="Coordinate site supply chains and material movement."
    >
        <x-slot:actions>
            <x-button :href="route('admin.logistic-supervisors.create')">Add Coordinator</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 Logistics</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, zone, 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-amber-600 p-5 rounded-2xl shadow-lg shadow-amber-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">Supply Chain</div>
                <div class="text-xl font-bold mb-2">Material Flow</div>
                <p class="text-xs text-amber-100 leading-relaxed">Logistics team is tracking 8 incoming shipments for 'North Bridge' project.</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">Coordinator / Supervisor</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">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 ($logisticSupervisors 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-amber-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-amber-600/80 uppercase tracking-wider">{{ $u->designation ?? 'Logistics Coordinator' }}</div>
                                </div>
                            </div>
                        </td>
                        <td class="px-4 py-4 text-slate-700">
                            <div class="text-sm font-medium">{{ $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.logistic-supervisors.show', $u)" variant="secondary" size="sm" class="rounded-lg shadow-sm">Details</x-button>
                                <x-button :href="route('admin.logistic-supervisors.edit', $u)" variant="ghost" size="sm" class="rounded-lg">Edit</x-button>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="5" class="p-10 text-center text-slate-500 font-medium">No logistic supervisors found.</td></tr>
                @endforelse
            </tbody>
        </table>
    </x-table-wrapper>

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