@extends('layouts.app')

@section('title', 'Leads')
@section('heading', 'Lead management')

@section('content')
    <div class="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        <p class="text-slate-600">Pending follow-up leads: <strong>{{ $pendingCount }}</strong></p>
        <form method="get" class="flex flex-wrap items-center gap-2">
            <input type="text" name="search" value="{{ request('search') }}" placeholder="Search lead..."
                   class="rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-slate-500 focus:outline-none">
            <select name="status" class="rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-slate-500 focus:outline-none js-select2" style="width: 150px">
                <option value="">All statuses</option>
                @foreach(['new', 'contacted', 'qualified', 'meeting_scheduled', 'converted', 'rejected'] as $status)
                    <option value="{{ $status }}" {{ request('status') === $status ? 'selected' : '' }}>{{ ucfirst(str_replace('_', ' ', $status)) }}</option>
                @endforeach
            </select>
            <button type="submit" class="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-white">Filter</button>
        </form>
    </div>

    <x-card>
        <div class="overflow-x-auto">
            <x-table>
                <x-slot name="head">
                    <tr>
                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Company</th>
                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Contact</th>
                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Source</th>
                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Employees</th>
                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Status</th>
                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Next Follow-up</th>
                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Action</th>
                    </tr>
                </x-slot>
                @forelse($leads as $lead)
                    <tr class="hover:bg-slate-50">
                        <td class="whitespace-nowrap px-4 py-3 text-sm text-slate-900">{{ $lead->company_name }}</td>
                        <td class="px-4 py-3 text-sm text-slate-600">
                            <div>{{ $lead->contact_person_name }}</div>
                            <div class="text-xs text-slate-500">{{ $lead->mobile }}</div>
                        </td>
                        <td class="whitespace-nowrap px-4 py-3 text-sm text-slate-600">{{ ucfirst(str_replace('_', ' ', $lead->source)) }}</td>
                        <td class="whitespace-nowrap px-4 py-3 text-sm text-slate-600">{{ number_format($lead->employee_count) }}</td>
                        <td class="whitespace-nowrap px-4 py-3 text-sm text-slate-600">{{ ucfirst(str_replace('_', ' ', $lead->status)) }}</td>
                        <td class="whitespace-nowrap px-4 py-3 text-sm text-slate-600">{{ $lead->next_followup_at?->format('d M Y H:i') ?? '—' }}</td>
                        <td class="whitespace-nowrap px-4 py-3 text-sm">
                            <a href="{{ route('superadmin.leads.show', $lead) }}" class="btn-icon-action btn-icon-action--view" title="View" aria-label="View"><i class="bi bi-eye"></i></a>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="7" class="px-4 py-8 text-center text-sm text-slate-500">No leads found.</td>
                    </tr>
                @endforelse
            </x-table>
        </div>
        @if($leads->hasPages())
            <div class="mt-4 border-t border-slate-200 pt-4">
                {{ $leads->links() }}
            </div>
        @endif
    </x-card>
@endsection
