@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">
                <div class="top-rank__img">
                    <img src="../../assets/logo.png" alt=""/>
                </div>
                <div class="top-rank__content">
                    <div class="top-rank__content__r-img">
                        <img src="../../assets/rankr.png" alt=""/>
                    </div>
                    <h5>
                        جدول رده بندی
                    </h5>
                    <div class="top-rank__content__l-img">
                        <img src="../../assets/rankl.png" alt=""/>
                    </div>
                </div>

                {{-- <div class="row">
                    <div class="col-7">
                        <p style="color: white;margin-top: -11px;text-align: right;"> --}}
                {{-- زمان باقی مانده: 1:50 --}}
                {{-- <br>
                 رتبه شما: {{ $authUser->rank() }}
             </p>
         </div>
         <div class="col-5 rank-star">
             <i class="fa-solid fa-star starsol"></i>
             <i class="fa-solid fa-star rank-starsol"></i>
             <i class="fa-solid fa-star starsolb"></i>
         </div>
     </div> --}}
            </div>
            <div class="rank-all-y">
                <div class="rank-you">
                    <p style="color: white;margin-top: -11px;text-align: right;">
                        {{-- زمان باقی مانده: 1:50 --}}
                        رتبه شما: {{ $authUser->rank() }}
                    </p>
                </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>
                            <th scope="col">امتیاز</th>
                        </tr>
                        </thead> --}}
                        <tbody>

                        @foreach ($users as $key => $item)
                            @php
                                $rankColor = '';
                                if($loop->iteration == 1){
                                    $rankColor = 'rank-ba-1';
                                }elseif($loop->iteration == 2){
                                    $rankColor = 'rank-ba-2';
                                }elseif($loop->iteration == 3){
                                    $rankColor = 'rank-ba-3';
                                }

                                $cupLogos = [
                                    1 => 'assets/gold.png',
                                    2 => 'assets/silver.png',
                                    3 => 'assets/bronz.png',
                                ];
                            @endphp
                            <tr class="{{ $item->id == $authUser->id ? 'table-ranking-me' : '' }}">
                                @if(in_array($loop->iteration, [1,2,3]))
                                    <th class="user-rank-num-img" scope="row">
                                        <img src="{{ asset($cupLogos[$loop->iteration]) }}" alt=""/>
                                    </th>
                                @else
                                    <th class="user-rank-num" scope="row">{{ $users->firstItem() + $key }}</th>
                                @endif
                                <td class="user-rank-img">
                                    <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->avatar_file }}&quot;);">
                                            <img src="{{ $item->avatar_file }}" alt="" style="display: none;">
                                        </figure>
                                    </a>
                                </td>
                                <td class="user-rank-name">
                                    {{-- <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->avatar_file }}&quot;);">
                                            <img src="{{ $item->avatar_file }}" alt="" style="display: none;">
                                        </figure>
                                    </a> --}}
                                    <span>{{ $item->username }}</span>
                                    <div class="user-rank-name__score">
                                        {{-- <span>امتیاز: </span>{{ $item->points }} --}}
                                        <span>{{ $item->points }}<img src="../../assets/coin.png" alt=""/></span>
                                    </div>
                                </td>
                                {{-- <td>{{ $item->points }}</td> --}}
                            </tr>

                            @if($loop->last &&  $authUser->rank() > 10)
                                <tr class="table-ranking-me">
                                    <th class="user-rank-num" scope="row">{{ $authUser->rank() }}</th>
                                    <td class="user-rank-img">
                                        <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->avatar_file }}&quot;);">
                                                <img src="{{ $authUser->avatar_file }}" alt="" style="display: none;">
                                            </figure>
                                        </a>
                                    </td>
                                    <td class="user-rank-name">
                                        {{-- <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->avatar_file }}&quot;);">
                                                <img src="{{ $item->avatar_file }}" alt="" style="display: none;">
                                            </figure>
                                        </a> --}}
                                        <span>{{ $authUser->username }}</span>
                                        <div class="user-rank-name__score">
                                            {{-- <span>امتیاز: </span>{{ $item->points }} --}}
                                            <span>{{ $authUser->points }}<img src="../../assets/coin.png" alt=""/></span>
                                        </div>
                                    </td>
                                    {{-- <td>{{ $item->points }}</td> --}}
                                </tr>
                            @endif
                        @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection