@extends('layouts.app')

@section('content')
<main class="listings-main">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-8 col-lg-6">
        <!-- Invited Users Card -->
        <div class="card border-0 shadow-sm p-3 mb-4" style="border-radius: 1.5rem;">
          <div class="card-body px-4 py-5">
            <h2 class="mb-4 text-dark fw-bold" style="letter-spacing: 1px;">
              <i class="bi bi-people me-2 text-warning"></i>{{ __('messages.invited_users') }}
            </h2>
            @if(isset($invitedUsers) && count($invitedUsers))
              <div class="list-group list-group-flush">
                @foreach($invitedUsers as $user)
                  <div class="list-group-item d-flex align-items-center py-3 px-0" style="background: transparent; border: none; border-bottom: 1px solid #f3e9c6;">
                    <div class="me-3">
                      <img src="{{ $user['referee_photo'] ?? asset('assets/images/default-avatar.png') }}" alt="User Photo" class="rounded-circle shadow-sm" style="width: 56px; height: 56px; object-fit: cover; border: 2px solid #ffe066;">
                    </div>
                    <div class="flex-grow-1">
                      <div class="fw-semibold text-dark" style="font-size: 1.13em;">
                        {{ $user['referee_name'] }}
                      </div>
                      <div class="text-muted" style="font-size: 0.98em;">
                        <i class="bi bi-dollar me-1"></i>
                        {{ $user['customer_amount'] }} NAT
                      </div>
                    </div>
                  </div>
                @endforeach
              </div>
            @else
              <div class="alert alert-warning text-center mb-0" style="border-radius: 1rem;">
                <i class="bi bi-info-circle me-2"></i>{{ __('messages.no_invited_users') }}
              </div>
            @endif
          </div>
        </div>
        <!-- End -->
      </div>
    </div>
  </div>
</main>
@endsection