@extends('admin.layouts.app')
@section('title', 'Leads')
@section('page-title', 'Lead Management')

@section('content')

{{-- Stats row --}}
<div class="grid grid-cols-2 lg:grid-cols-5 gap-4 mb-6">
    @php
        $statCards = [
            ['Total',     $stats['total'],     'bg-blue-50 text-blue-700 border-blue-100'],
            ['New',       $stats['new'],        'bg-indigo-50 text-indigo-700 border-indigo-100'],
            ['Contacted', $stats['contacted'],  'bg-yellow-50 text-yellow-700 border-yellow-100'],
            ['Enrolled',  $stats['enrolled'],   'bg-green-50 text-green-700 border-green-100'],
            ['Today',     $stats['today'],      'bg-purple-50 text-purple-700 border-purple-100'],
        ];
    @endphp
    @foreach($statCards as [$label, $val, $classes])
    <div class="bg-white rounded-xl border p-4 text-center {{ $classes }}">
        <p class="text-2xl font-black">{{ $val }}</p>
        <p class="text-xs font-medium mt-0.5 uppercase tracking-wide">{{ $label }}</p>
    </div>
    @endforeach
</div>

{{-- Filters --}}
<form method="GET" action="{{ route('admin.leads.index') }}"
      class="bg-white rounded-xl border border-gray-100 shadow-sm p-4 mb-4">
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-3">
        <input type="text" name="search" value="{{ request('search') }}"
               placeholder="Name, phone or email…"
               class="px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 col-span-1 sm:col-span-2 lg:col-span-1" />

        <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>

        <select name="country_id" 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 Countries</option>
            @foreach($countries as $c)
                <option value="{{ $c->id }}" {{ request('country_id') == $c->id ? 'selected' : '' }}>{{ $c->name }}</option>
            @endforeach
        </select>

        <select name="assigned_to" 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 Employees</option>
            <option value="unassigned" {{ request('assigned_to') === 'unassigned' ? 'selected' : '' }}>Unassigned</option>
            @foreach($employees as $e)
                <option value="{{ $e->id }}" {{ request('assigned_to') == $e->id ? 'selected' : '' }}>{{ $e->name }}</option>
            @endforeach
        </select>

        <div class="flex gap-2">
            <button type="submit" class="flex-1 bg-blue-600 hover:bg-blue-700 text-white text-sm font-semibold px-4 py-2 rounded-lg transition">
                Filter
            </button>
            @if(request()->hasAny(['search','status','country_id','assigned_to']))
            <a href="{{ route('admin.leads.index') }}" class="px-3 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 text-sm font-medium rounded-lg transition">
                Clear
            </a>
            @endif
        </div>
    </div>
</form>

{{-- Table --}}
<div class="bg-white rounded-xl border border-gray-100 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-500 font-medium">{{ $leads->total() }} leads found</span>
    </div>

    @if($leads->isEmpty())
        <div class="text-center py-16 text-gray-400">
            <svg class="w-12 h-12 mx-auto mb-3 text-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/>
            </svg>
            <p class="text-sm">No leads found.</p>
        </div>
    @else
    <div class="overflow-x-auto">
        <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">#</th>
                    <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">Assigned To</th>
                    <th class="px-5 py-3 text-left hidden lg:table-cell">Source</th>
                    <th class="px-5 py-3 text-left hidden xl:table-cell">Date</th>
                    <th class="px-5 py-3 text-right">Actions</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 text-xs text-gray-400">#{{ $lead->id }}</td>

                    <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>
                        @if($lead->email)
                            <p class="text-xs text-blue-500">{{ $lead->email }}</p>
                        @endif
                    </td>

                    <td class="px-5 py-4 hidden md:table-cell">
                        <span class="text-sm text-gray-600">{{ $lead->country_name ?: '—' }}</span>
                    </td>

                    <td class="px-5 py-4">
                        <span class="inline-flex items-center 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">
                        @if($lead->assignedTo)
                            <span class="text-sm text-gray-600">{{ $lead->assignedTo->name }}</span>
                        @else
                            <span class="text-xs text-gray-300 italic">Unassigned</span>
                        @endif
                    </td>

                    <td class="px-5 py-4 hidden lg:table-cell">
                        @if($lead->source)
                            <code class="text-xs bg-gray-100 px-2 py-0.5 rounded text-gray-500">{{ $lead->source }}</code>
                        @else
                            <span class="text-xs text-gray-300">direct</span>
                        @endif
                    </td>

                    <td class="px-5 py-4 hidden xl:table-cell text-xs text-gray-400">
                        {{ $lead->created_at->format('d M Y') }}<br/>
                        <span class="text-gray-300">{{ $lead->created_at->format('h:i A') }}</span>
                    </td>

                    <td class="px-5 py-4">
                        <div class="flex items-center justify-end gap-1.5">
                            <a href="{{ route('admin.leads.show', $lead) }}"
                               class="p-1.5 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition" title="View">
                                <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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                                </svg>
                            </a>
                            <form method="POST" action="{{ route('admin.leads.destroy', $lead) }}"
                                  onsubmit="return confirm('Delete this lead permanently?')">
                                @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="Delete">
                                    <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                                    </svg>
                                </button>
                            </form>
                        </div>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>

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

@endsection