@extends('layouts.app')
@section('title', 'Mi Parche')
@section('content')
    <div class="panelTab bg-custom-back-activities relative flex justify-end  items-center font-dunkin-sans-book text-white hidden"
        id="tab-one">
        <img src="{{ asset('img-2025/ranking/RANKING.png') }}" alt="" class="h-custom w-full">
        <div class="absolute h-full w-59/100 text-left px-4">
            <h1 class="flex items-center h-1/4 font-dunkin-sans-display text-2xl">TOP ANUAL DEL PARCHE</h1>
            <h1 class="font-dunkin-sans-display transform -translate-y-3 2xl">Top 3</h1>
            <div class=" overflow-y-auto overflow-hidden h-1/2 w-11/12">
                @forelse ($tops as $top)
                    <div class="flex w-ful items-center py-2">
                        <div class="relative flex justify-center items-center w-1/5">
                            <img src="{{ asset('img-2025/ranking/CIRCLE-RANKING.png') }}" alt=""
                                class="h-16 {{ $loop->iteration > 3 ? 'filter grayscale' : '' }}">
                            @if ($top->image)
                                <img src="{{ '/storage/' . $top->image }}" alt=""
                                    class="absolute rounded-full w-11 h-11 ">
                            @else
                                <i class="absolute fa-regular fa-user fa-2xl mt-1 ml-1"></i>
                            @endif
                        </div>
                        <div class="flex-1 relative flex justify-center items-center">
                            {{ $loop->iteration . '. ' . $top->my_shop->first()->name }}
                        </div>
                        <div class="flex-1 relative flex justify-center items-center">
                            <img src="{{ asset('img-2025/ranking/VAR-RANKING.png') }}" alt=""
                                class="{{ $loop->iteration > 3 ? 'h-10' : 'h-14' }}">
                            <span class="absolute">
                                {{ $top->accumulated_points }} Puntos
                            </span>
                        </div>
                    </div>
                    @if ($loop->iteration == 3)
                        <hr class="border-1 border-orange-custom transform -translate-x-6">
                    @endif
                @empty
                    <h1>Sin Datos.</h1>
                @endforelse
            </div>
        </div>
        <button class="absolute top-2 left-16/100 btn-orange-custom my-2 toggleTab" data-toggle="tab-two" type="button">Top
            Nuestros puntos
        </button>
    </div>
    <div class="panelTab font-dunkin-sans-book h-custom text-center text-black p-8" 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 my-2 toggleTab" data-toggle="tab-one" type="button">Top Anual</button>
        <div class="bg-cream-custom rounded-xl p-4 flex flex-col space-y-4 overflow-x-auto">
            <h1 class="font-dunkin-sans-display text-2xl">
                RESUMEN DE PUNTOS
            </h1>
            <table class="w-full rounded-t-sm border-collapse border border-gray-400 ">
                <thead class="bg-purple-custom">
                    <tr>
                        <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 rounded-t-sm border border-gray-300 ">
                <thead class="bg-orange-custom">
                    <tr>
                        <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>


    {{-- <div class="page mechanics hidden">
        <div class="container">
            <div class="row">
                <div class="col-md-12 content">
                    <div class="row">
                        <div class="col-md-12">
                            <p class="name-shop text-center">MI PARCHE</p>
                        </div>
                        <div class="col-md-12">
                            <h1 class="title-red text-center"><strong>{{ $shop['shop_name'] }} |
                                    {{ $shop['group_name'] }}</strong></h1>
                        </div>
                    </div>
                    <br><br>
                    <ul class="nav nav-pills text-center" role="tablist" style="display: flex;justify-content: center;">
                        <li role="presentation" class="section">
                            <a href="#two" aria-controls="two" class="active" role="tab" data-toggle="tab">
                                NUESTROS PUNTOS
                            </a>
                        </li>
                        <li role="presentation" class="section">
                            <a href="#three" aria-controls="three" role="tab" data-toggle="tab">
                                TOP ANUAL
                            </a>
                        </li>
                    </ul>
                    <!-- Tab panels -->
                    <div class="tab-content">
                        <div role="tabpanel" class="tab-pane active" id="two">
                            <div class="row">
                                <div class="col-md-12 text-left">
                                    <h1 class="title-yellow">RESUMEN <br>
                                        <span>DE PUNTOS</span>
                                    </h1> <br>
                                    <div class="table-responsive">
                                        <table class="table table-yellow">
                                            <thead>
                                                <tr>
                                                    <th>Actividad</th>
                                                    @foreach ($periods as $p)
                                                        <th>{{ Calendar::getHumanMonthAbbreviation($p->month) }}</th>
                                                    @endforeach
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @forelse ($history as $h)
                                                    <tr>
                                                        <td>{{ $h['item'] }}</td>
                                                        @foreach ($h['periods'] as $p)
                                                            <td>{{ $p }}</td>
                                                        @endforeach
                                                    </tr>
                                                @empty
                                                    <tr>
                                                        <td colspan="7">No se encontraron registros...</td>
                                                    </tr>
                                                @endforelse
                                            </tbody>
                                        </table>
                                    </div>
                                    <h1 class="title-red">HISTORIAL <br>
                                        <span>DE PUNTOS</span>
                                    </h1> <br>
                                    <div class="table-responsive">
                                        <table class="table table-red">
                                            <thead>
                                                <tr>
                                                    <th>Actividad</th>
                                                    <th>Puntos</th>
                                                    <th>Tipo</th>
                                                    <th>Fecha</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @if (isset($allPoints) && count($allPoints) > 0)
                                                    @foreach ($allPoints as $point)
                                                        <tr>
                                                            <td>{{ $point->points_event }}</td>
                                                            <td>{{ $point->value }}</td>
                                                            <td>{{ $point->indicator['name'] }}</td>
                                                            <td>{{ $point->created_at }}</td>
                                                        </tr>
                                                    @endforeach
                                                @else
                                                    <tr>
                                                        <td colspan="5">No se encontraron registros...</td>
                                                    </tr>
                                                @endif
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div role="tabpanel" class="tab-pane" id="three">
                            <div class="row">
                                <div class="col-md-12 text-left">
                                    <h1 class="title-yellow">TOP ANUAL <br>
                                        <span>DEL PARCHE</span>
                                    </h1> <br>
                                    <div class="table-responsive">
                                        <table class="table table-yellow">
                                            <thead>
                                                <tr>
                                                    <th>Posición</th>
                                                    <th>Parche</th>
                                                    <th>Puntos</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @if (isset($tops) && count($tops) > 0)
                                                    @foreach ($tops as $top)
                                                        @if ($loop->iteration <= 10)
                                                            <tr>
                                                                <td>{{ $loop->iteration }}</td>
                                                                <td>{{ $top->my_shop->first()->name }}</td>
                                                                <td>{{ $top->accumulated_points }}</td>
                                                            </tr>
                                                        @endif
                                                    @endforeach
                                                @else
                                                    <tr>
                                                        <td colspan="5">No se encontraron registros...</td>
                                                    </tr>
                                                @endif
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- End tab panels -->
                </div>
            </div>
        </div>
    </div> --}}
@stop