@extends('layouts.app')

@section('title', 'Leads')
@section('heading', 'Leads')

@section('content')
    <div class="toolbar">
        <form method="GET" action="{{ route('leads.index') }}" class="flex gap" style="flex-wrap:wrap;align-items:flex-end">
            <div class="form-group mb-0">
                <label for="q">Search</label>
                <input id="q" class="form-control" name="q" value="{{ request('q') }}" placeholder="Name, email, phone">
            </div>
            <div class="form-group mb-0">
                <label for="stage_id">Stage</label>
                <select id="stage_id" class="form-control" name="stage_id">
                    <option value="">All</option>
                    @foreach ($stages as $s)
                        <option value="{{ $s->id }}" @selected((string)request('stage_id') === (string)$s->id)>{{ $s->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="form-group mb-0">
                <label for="assigned_to">Agent</label>
                <select id="assigned_to" class="form-control" name="assigned_to">
                    <option value="">All</option>
                    @foreach ($agents as $a)
                        <option value="{{ $a->id }}" @selected((string)request('assigned_to') === (string)$a->id)>{{ $a->name }}</option>
                    @endforeach
                </select>
            </div>
            <button type="submit" class="btn btn-secondary btn-sm">Apply filters</button>
        </form>
        <div class="toolbar-actions">
            @can('viewAny', App\Models\Lead::class)
                <a href="{{ route('leads.export') }}" class="btn btn-secondary btn-sm">Export CSV</a>
            @endcan
            <a href="{{ route('leads.create') }}" class="btn btn-primary">New lead</a>
        </div>
    </div>

    @if($leads->isEmpty())
        <div class="empty-state">
            <div class="empty-state-icon" aria-hidden="true">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
            </div>
            <h3>No leads match</h3>
            <p class="mb-1">Try adjusting filters or add a new lead to start your pipeline.</p>
            <a href="{{ route('leads.create') }}" class="btn btn-primary btn-sm">Create lead</a>
        </div>
    @else
    <div class="table-wrap">
        <table class="data-table">
            <thead>
            <tr>
                <th>Name</th>
                <th>Stage</th>
                <th>Agent</th>
                <th>Source</th>
                <th>Updated</th>
                <th></th>
            </tr>
            </thead>
            <tbody>
            @foreach ($leads as $lead)
                <tr>
                    <td><a href="{{ route('leads.show', $lead) }}">{{ $lead->name }}</a></td>
                    <td><span class="badge">{{ $lead->stage->name ?? '—' }}</span></td>
                    <td>{{ $lead->assignee->name ?? '—' }}</td>
                    <td>{{ $lead->source ?? '—' }}</td>
                    <td>{{ $lead->updated_at->diffForHumans() }}</td>
                    <td><a href="{{ route('leads.edit', $lead) }}" class="btn btn-ghost btn-sm">Edit</a></td>
                </tr>
            @endforeach
            </tbody>
        </table>
    </div>
    @endif
    @include('partials.pagination', ['paginator' => $leads])
@endsection
