@extends('layouts.app')
@section('title', 'Communicator Registry')
@section('page-title', 'Communicator Registry')

@section('content')
<div class="mt-4 space-y-4">

    {{-- Filter bar --}}
    <form method="GET" class="bg-white rounded-xl border border-gray-200 p-4 flex flex-wrap gap-3">
        <input type="text" name="search" value="{{ request('search') }}" placeholder="Search name, phone, constituency…"
               class="flex-1 min-w-52 px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
        <select name="region_id" class="px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
            <option value="">All Regions</option>
            @foreach($regions as $region)
                <option value="{{ $region->id }}" {{ request('region_id') == $region->id ? 'selected' : '' }}>{{ $region->name }}</option>
            @endforeach
        </select>
        <select name="tier_id" class="px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
            <option value="">All Tiers</option>
            @foreach($tiers as $tier)
                <option value="{{ $tier->id }}" {{ request('tier_id') == $tier->id ? 'selected' : '' }}>{{ $tier->name }}</option>
            @endforeach
        </select>
        <select name="status" class="px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
            <option value="">All Status</option>
            <option value="active"    {{ request('status') === 'active'    ? 'selected' : '' }}>Active</option>
            <option value="inactive"  {{ request('status') === 'inactive'  ? 'selected' : '' }}>Inactive</option>
            <option value="suspended" {{ request('status') === 'suspended' ? 'selected' : '' }}>Suspended</option>
            <option value="pending"   {{ request('status') === 'pending'   ? 'selected' : '' }}>Pending</option>
        </select>
        <button type="submit" class="px-4 py-2 bg-npp-blue text-white text-sm rounded-lg hover:bg-blue-800">Filter</button>
        <a href="{{ route('communicators.index') }}" class="px-4 py-2 text-sm text-gray-600 rounded-lg border border-gray-300 hover:bg-gray-50">Clear</a>
        <a href="{{ route('communicators.create') }}" class="ml-auto px-4 py-2 bg-npp-red text-white text-sm rounded-lg hover:bg-red-700 font-medium">+ Add Communicator</a>
    </form>

    {{-- Table --}}
    <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
        <div class="px-5 py-3 border-b border-gray-100 flex items-center justify-between">
            <span class="text-sm text-gray-600">{{ $communicators->total() }} communicators found</span>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="text-left px-5 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Name</th>
                        <th class="text-left px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Phone</th>
                        <th class="text-left px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Region</th>
                        <th class="text-left px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Tier</th>
                        <th class="text-left px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Status</th>
                        <th class="text-left px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Languages</th>
                        <th class="px-4 py-3"></th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-50">
                    @forelse($communicators as $c)
                    <tr class="hover:bg-gray-50 transition-colors">
                        <td class="px-5 py-3">
                            <div class="flex items-center gap-3">
                                <div class="w-8 h-8 rounded-full flex items-center justify-center text-white font-semibold text-xs shrink-0"
                                     style="background-color: {{ $c->tier?->color ?? '#6B7280' }}">
                                    {{ strtoupper(substr($c->name, 0, 2)) }}
                                </div>
                                <div>
                                    <a href="{{ route('communicators.show', $c) }}" class="font-medium text-gray-900 hover:text-blue-600">{{ $c->name }}</a>
                                    @if($c->constituency)
                                        <div class="text-xs text-gray-400">{{ $c->constituency }}</div>
                                    @endif
                                </div>
                            </div>
                        </td>
                        <td class="px-4 py-3 text-gray-600 font-mono text-xs">{{ $c->full_phone }}</td>
                        <td class="px-4 py-3 text-gray-600">{{ $c->region?->name ?? '—' }}</td>
                        <td class="px-4 py-3">
                            @if($c->tier)
                                <span class="text-xs px-2 py-0.5 rounded-full font-medium text-white"
                                      style="background-color: {{ $c->tier->color }}">{{ $c->tier->name }}</span>
                            @else
                                <span class="text-xs text-gray-400">—</span>
                            @endif
                        </td>
                        <td class="px-4 py-3">
                            <span class="text-xs px-2 py-0.5 rounded-full font-medium
                                {{ $c->status === 'active' ? 'bg-green-100 text-green-700' : '' }}
                                {{ $c->status === 'inactive' ? 'bg-gray-100 text-gray-500' : '' }}
                                {{ $c->status === 'suspended' ? 'bg-red-100 text-red-700' : '' }}
                                {{ $c->status === 'pending' ? 'bg-yellow-100 text-yellow-700' : '' }}">
                                {{ ucfirst($c->status) }}
                            </span>
                        </td>
                        <td class="px-4 py-3 text-gray-500 text-xs">{{ $c->languages_list ?: '—' }}</td>
                        <td class="px-4 py-3 text-right">
                            <a href="{{ route('communicators.edit', $c) }}" class="text-xs text-blue-600 hover:underline">Edit</a>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="7" class="px-5 py-10 text-center text-sm text-gray-400">No communicators found</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($communicators->hasPages())
        <div class="px-5 py-3 border-t border-gray-100">
            {{ $communicators->links() }}
        </div>
        @endif
    </div>
</div>
@endsection