@extends('layouts.app')
@section('title', 'Mi Parche')
@section('content')
    <div class="panelTab bg-custom-back-posts min-h-custom sm:justify-end font-dunkin-sans-book text-coffee-custom relative flex items-center justify-center overflow-y-auto"
        id="tab-one">
        <img src="{{ asset('/images/2026/assets/ranking.png') }}" alt=""
            class="h-custom sm:block left-7/100 absolute hidden w-4/12">
        <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">
                    TOP ANUAL DEL PARCHE
                </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-5/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 ($tops as $top)
                            <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 ($top->image)
                                        <img src="{{ '/storage/' . $top->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 . '. ' . $top->my_shop->first()['name'] }}
                                </div>
                                <div class="relative flex items-center justify-center flex-1">
                                    <span
                                        class=" {{ $loop->iteration > 3 ? 'bg-coffee-custom border-coffee-custom' : '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>
        <button class="bottom-2 sm:left-1/2 btn-orange-custom toggleTab fixed my-2" data-toggle="tab-two" type="button">Top
            Nuestros puntos
        </button>
    </div>
    <div class="panelTab font-dunkin-sans-book min-h-custom hidden p-8 text-center text-black" id="tab-two">
        <p class="font-dunkin-sans-display text-3xl">MI PARCHE</p>
        <h1 class="font-dunkin-sans-display text-xl">
            {{ $shop['shop_name'] }} | {{ $shop['group_name'] }}
        </h1>
        <button class="btn-orange-custom toggleTab my-2" data-toggle="tab-one" type="button">Top Anual</button>
        <div class="bg-cream-custom rounded-xl flex flex-col p-4 space-y-4 overflow-x-auto">
            <h1 class="font-dunkin-sans-display text-2xl">
                RESUMEN DE PUNTOS
            </h1>
            <table class=" w-full border border-collapse border-gray-400 rounded-t-sm">
                <thead class="bg-purple-custom">
                    <tr class="text-white">
                        <th class=" border border-gray-300">Actividad</th>
                        @foreach ($periods as $p)
                            <th class=" border border-gray-300">{{ Calendar::getHumanMonthAbbreviation($p->month) }}</th>
                        @endforeach
                    </tr>
                </thead>
                <tbody>
                    @forelse ($history as $h)
                        <tr class="">
                            <td class=" border border-gray-300">{{ $h['item'] }}</td>
                            @foreach ($h['periods'] ?? [] as $p)
                                <td class=" border border-gray-300">{{ $p }}</td>
                            @endforeach
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7">No se encontraron registros...</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
            <h1 class="font-dunkin-sans-display text-2xl">
                HISTORIAL <span>DE PUNTOS</span>
            </h1>
            <table class=" w-full border border-gray-300 rounded-t-sm">
                <thead class="bg-orange-custom">
                    <tr class="text-white">
                        <th class=" border border-gray-300">Actividad</th>
                        <th class=" border border-gray-300">Puntos</th>
                        <th class=" border border-gray-300">Tipo</th>
                        <th class=" border border-gray-300">Fecha</th>
                    </tr>
                </thead>
                <tbody>
                    @if (isset($allPoints) && count($allPoints) > 0)
                        @foreach ($allPoints as $point)
                            <tr>
                                <td class=" border border-gray-300">{{ $point->points_event }}</td>
                                <td class=" border border-gray-300">{{ $point->value }}</td>
                                <td class=" border border-gray-300">{{ $point->indicator['name'] }}</td>
                                <td class=" border border-gray-300">{{ $point->created_at }}</td>
                            </tr>
                        @endforeach
                    @else
                        <tr>
                            <td colspan="5">No se encontraron registros...</td>
                        </tr>
                    @endif
                </tbody>
            </table>
        </div>
    </div>
@stop