@extends('layouts.dashboard')

@section('title', 'Live Activity')

@push('css')
    <style>
        .live-activity-table td { vertical-align: middle; }
        .live-activity-user { display: flex; align-items: center; gap: .8rem; min-width: 190px; }
        .live-activity-user img { width: 38px; height: 38px; border-radius: 10px; object-fit: cover; }
        .live-activity-user strong, .live-activity-user small { display: block; }
        .live-activity-reward { color: #42c4f5; font-weight: 700; white-space: nowrap; }
        .live-activity-empty { padding: 3.5rem 1rem !important; text-align: center; }
    </style>
@endpush

@section('content')
    <section class="user-page-card">
        <div class="d-flex flex-wrap justify-content-between align-items-center gap-1 mb-2">
            <div>
                <span class="user-home-eyebrow">Community activity</span>
                <h1 class="loot-section-title mt-50 mb-25">Live completions</h1>
                <p class="loot-muted mb-0">Recent earnings and payouts from Basketloot members.</p>
            </div>
            <span class="loot-pill"><i data-feather="radio"></i> Live</span>
        </div>

        <div class="table-responsive">
            <table class="table loot-profile-table live-activity-table mb-0">
                <caption class="visually-hidden">Recent member offer completions</caption>
                <thead>
                    <tr>
                        <th scope="col">Member</th>
                        <th scope="col">Provider</th>
                        <th scope="col">Offer</th>
                        <th scope="col">Reward</th>
                        <th scope="col">Completed</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($leads as $lead)
                        <tr>
                            <td>
                                <div class="live-activity-user">
                                    <img src="{{ $lead->user->avatar() }}" alt="">
                                    <span>
                                        <strong>{{ $lead->user->username }}</strong>
                                        <small class="loot-muted">Member</small>
                                    </span>
                                </div>
                            </td>
                            <td>{{ $lead->company }}</td>
                            <td>{{ $lead->offer_name }}</td>
                            <td><span class="live-activity-reward">+{{ number_format((float) $lead->offer_points, 2) }} {{ site_setting('points_name', config('rewards.points_name')) }}</span></td>
                            <td><time datetime="{{ $lead->created_at->toIso8601String() }}">{{ $lead->created_at->diffForHumans() }}</time></td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="live-activity-empty">
                                <span class="loot-stat-icon mx-auto mb-1"><i data-feather="activity"></i></span>
                                <h3 class="loot-section-title">No recent completions</h3>
                                <p class="loot-muted mb-0">New offer activity will appear here.</p>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </section>
@endsection
