{{-- resources/views/agent/leads/partials/social.blade.php --}}
@php
    // Ensure we always have a collection to avoid "undefined variable" errors
    $rows = isset($socialLeads) ? collect($socialLeads) : collect();
@endphp

<div class="card mb-4">
    <div class="card-header bg-secondary text-white d-flex justify-content-between align-items-center">
        <h5 class="mb-0">Social Media Leads</h5>
    </div>

    <div class="card-body">
        @if ($rows->isEmpty())
            <p>No leads have been collected from social media yet.</p>
        @else
            <div class="table-responsive">
                <table class="table table-sm table-hover align-middle">
                    <thead>
                        <tr>
                            <th style="min-width: 180px;">Name</th>
                            <th style="min-width: 200px;">Email</th>
                            <th style="min-width: 140px;">Phone</th>
                            <th style="min-width: 140px;">Platform</th>
                            <th style="min-width: 160px;">Submitted</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($rows as $lead)
                            <tr>
                                <td>{{ trim(($lead->first_name ?? '') . ' ' . ($lead->last_name ?? '')) ?: '—' }}</td>
                                <td>{{ $lead->email ?? '—' }}</td>
                                <td>{{ $lead->phone_number ?? '—' }}</td>
                                <td>{{ $lead->platform ?? 'Unknown' }}</td>
                                <td>
                                    @if (!empty($lead->created_at))
                                        {{ optional($lead->created_at)->diffForHumans() }}
                                    @else
                                        —
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif
    </div>
</div>