@extends('employee.layouts.app')
@section('title', 'My Leads')
@section('page-title', 'My Leads')

@section('content')

<form method="GET" action="{{ route('employee.leads.index') }}" class="bg-white rounded-xl border border-gray-100 p-4 mb-4 flex gap-3">
    <input type="text" name="search" value="{{ request('search') }}" placeholder="Search name or phone…"
           class="flex-1 px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" />
    <select name="status" class="px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
        <option value="">All Statuses</option>
        @foreach(['new','contacted','enrolled','rejected'] as $s)
            <option value="{{ $s }}" {{ request('status') === $s ? 'selected' : '' }}>{{ ucfirst($s) }}</option>
        @endforeach
    </select>
    <button type="submit" class="bg-gray-800 text-white px-4 py-2 rounded-lg text-sm font-semibold hover:bg-gray-700 transition">Filter</button>
    @if(request()->hasAny(['search','status']))
        <a href="{{ route('employee.leads.index') }}" class="px-4 py-2 bg-gray-100 text-gray-700 text-sm rounded-lg hover:bg-gray-200 transition">Clear</a>
    @endif
</form>

<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
    <div class="px-5 py-3 border-b border-gray-100">
        <span class="text-sm text-gray-500">{{ $leads->total() }} leads assigned to you</span>
    </div>

    @if($leads->isEmpty())
        <div class="py-16 text-center text-gray-400 text-sm">No leads found.</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">Contact</th>
                <th class="px-5 py-3 text-left hidden md:table-cell">Country</th>
                <th class="px-5 py-3 text-left">Status</th>
                <th class="px-5 py-3 text-left hidden lg:table-cell">Date</th>
                <th class="px-5 py-3 text-right">Action</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-50">
            @foreach($leads as $lead)
            <tr class="hover:bg-gray-50 transition">
                <td class="px-5 py-4">
                    <p class="font-semibold text-gray-800 text-sm">{{ $lead->name ?: '—' }}</p>
                    <p class="text-xs text-gray-500">{{ $lead->phone }}</p>
                </td>
                <td class="px-5 py-4 hidden md:table-cell text-sm text-gray-500">{{ $lead->country_name ?: '—' }}</td>
                <td class="px-5 py-4">
                    <span class="inline-flex px-2.5 py-1 rounded-full text-xs font-semibold {{ $lead->statusBadge() }}">
                        {{ $lead->statusLabel() }}
                    </span>
                </td>
                <td class="px-5 py-4 hidden lg:table-cell text-xs text-gray-400">
                    {{ $lead->created_at->format('d M Y') }}
                </td>
                <td class="px-5 py-4 text-right">
                    <a href="{{ route('employee.leads.show', $lead) }}"
                       class="text-blue-600 text-sm hover:underline font-medium">View →</a>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
    @if($leads->hasPages())
        <div class="px-5 py-4 border-t border-gray-100">{{ $leads->links() }}</div>
    @endif
    @endif
</div>

@endsection