@extends('layouts.app')
@section('title', 'Mi Parche')
@section('content')
    <div class="panelTab bg-custom-back-activities min-h-custom sm:justify-end font-dunkin-sans-book relative flex items-center justify-center overflow-y-auto text-white"
        id="tab-one">
        <img src="{{ asset('img-2025/ranking/RANKING.png') }}" alt="" class="h-custom sm:block hidden w-full">
        <div class="sm:w-59/100 sm:text-left sm:px-8 justify-items-center sm:justify-items-start absolute w-full h-full">
            <div class="sm:h-16/100 relative flex items-end justify-center">
                <img src="{{ asset('img-2025/ranking/RANKING-IMG.png') }}" alt="" class="sm:hidden w-full">
                <h1 class="sm:relative font-dunkin-sans-display sm:text-xl sm:mb-0 absolute mb-4">
                    Ranking general
                </h1>
            </div>
            <div class="sm:h-1/2 relative flex items-start w-full">
                <img src="{{ asset('img-2025/ranking/RANKING-TARGET.png') }}" alt="" class="sm:hidden w-full">
                <div class="mt-3/100 sm:mt-7/100 sm:w-11/12 absolute h-full">
                    <h1 class="font-dunkin-sans-display 2xl pl-23/100 sm:pl-0 w-full mb-2">Top 3</h1>
                    <div class="sm:px-0 h-69/100 sm:h-full px-8 overflow-hidden overflow-y-auto">
                        @forelse ($users as $user)
                            <div class="sm:py-2 sm:text-base flex items-center w-full py-1 text-xs">
                                <div class="relative flex items-center justify-center w-1/5">
                                    @if ($user->image)
                                        <img src="{{ '/storage/' . $user->image }}" alt=""
                                            class="sm:w-11 sm:h-11 absolute w-6 h-6 rounded-full">
                                    @else
                                        <div class="border-coffee-custom w-11 h-11 absolute flex border rounded-full">
                                            <i class="fa-regular fa-user sm:fa-2xl m-auto"></i>
                                        </div>
                                    @endif
                                </div>
                                <div class="relative flex items-center justify-center flex-1">
                                    {{ $loop->iteration . '. ' . $user->name . ' ' . $user->surname }}
                                </div>
                                <div class="relative flex items-center justify-center flex-1">
                                    <span
                                        class="bg-purple-custom border-purple-custom px-6 py-2 bg-opacity-25 border-2 rounded-full">
                                        {{ $top->accumulated_points }}
                                        Puntos
                                    </span>
                                </div>
                            </div>
                            @if ($loop->iteration == 3)
                                <hr class="border-1 border-orange-custom sm:-translate-x-6 transform">
                            @endif
                        @empty
                            <h1>Sin Datos.</h1>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection