@extends('site.layouts.master')
@section('content')
    <style>
        .table th, .table td {
            text-align: right;
        }
        .top-rank h5 {
            color: white;
            border-bottom: 1px solid;
            padding: 0 0 10px 0;
            width: 50%;
            margin: 0em auto 1em;
        }
    </style>
    <div class="main-container" style="background-color: unset">
        <div class="container mb-4 text-center">
            <div class="top-rank">
                <h5>
                    زیرمجموعه ها
                </h5>
                <div class="row">
                    <div class="col-7">
                        <p style="color: white;margin-top: -11px;text-align: right;">
                            {{-- زمان باقی مانده: 1:50 --}}
                            <br>
                            تعداد زیرمجموعه های شما: {{ $authUser->referrals()->count() }}
                        </p>
                    </div>
                </div>
            </div>
           <div class="table-rank-all" style="margin-top: 1.5em">
               <table class="table table-ranking">
                   <thead>
                   <tr>
                       <th scope="col">#</th>
                       <th scope="col" style="text-align: center">نام کاربری</th>
                   </tr>
                   </thead>
                   <tbody>
                    @foreach ($referrals as $key => $item)
                        <tr>
                            <th scope="row">{{ ++$key }}</th>
                            <td style="text-shadow: 1px 1px BLACK;">
                                <a href="/" class="avatar avatar-30 shadow-sm rounded-circle ml-3 mr-2">
                                    <figure class="m-0 background" style="background-image: url(&quot;{{ $item->user->avatar_file }}&quot;);">
                                        <img src="{{ $item->user->avatar_file }}" alt="" style="display: none;">
                                    </figure>
                                </a>
                                {{ $item->user->fullName }}</td>
                        </tr>
                    @endforeach
                   </tbody>
               </table>
           </div>
        </div>
    </div>
@endsection