@extends('layouts.app')
@section('title', 'Actividad ' . ($activity ? $activity->type : ''))

@section('content')
    @if ($activity && $activity->questions->isNotEmpty())
        <div
            class="bg-custom-back-answers-results-responsive sm:bg-custom-back-activities min-h-custom md:flex-row flex flex-col justify-center text-white bg-center bg-cover">
            <div class="font-dunkin-sans-book md:w-2/3 py-30/100 sm:p-4 sm:px-0 w-full px-8">
                @if (session('status'))
                    <div class="alert alert-success my-6">
                        {{ session('status') }}
                    </div>
                @endif
                <p class="font-dunkin-sans-medium sm:text-2xl sm:block hidden my-4 mb-8 text-center">
                    ¡Participa y demuestra tu talento!
                </p>
                <div class="md:flex-row sm:space-y-0 flex flex-col justify-around mb-8 space-y-2">
                    <button class="btn-orange-custom sm:text-2xl toggleTab" data-toggle="tab-two" type="button">
                        Prepárate
                    </button>
                    <button class="btn-orange-custom sm:text-2xl toggleTab" data-toggle="tab-one" type="button">
                        Actividad
                    </button>
                    <button class="btn-orange-custom sm:text-2xl toggleTab" data-toggle="tab-three" type="button">
                        Ranking
                    </button>

                </div>

                @if ($activity)
                    <!-- Tab 1: Actividad -->
                    <div class="panelTab justify-items-center hidden" id="tab-one">
                        <div id="activity-main">
                            <p class="font-dunkin-sans-medium sm:text-2xl text-center">{{ $activity->name }}</p>
                            <div class="font-dunkin-sans-medium sm:text-base text-sm text-center">
                                {!! nl2br(e($activity->description)) !!}
                            </div>
                            <div class="mt-4 text-center">
                                @if ($participated)
                                    <p class="xl:text-2xl text-red-500">Ya has participado en esta actividad.</p>
                                @else
                                    <button class="btn-purple-custom btn-start-activity w-100">Iniciar</button>
                                    <p class="font-dunkin-sans-medium mt-6 text-center">
                                        <span>¿ESTÁS LISTO?</span> <br>
                                        ¡Prepárate para participar y ganar!
                                    </p>
                                @endif
                            </div>
                        </div>
                        <div id="activity-game" class="hidden w-full">
                            <component :is="'{{ $component }}'" :activity="{{ json_encode($activity) }}"
                                :questions="{{ json_encode($activity->questions) }}"
                                :shuffled-answers="{{ json_encode($activity->shuffledAnswers ?? []) }}">
                            </component>
                        </div>
                    </div>

                    <!-- Tab 2: Material de estudio -->
                    <div class="panelTab flex flex-col items-center p-4 space-y-4" id="tab-two">
                        <img src="{{ asset('/img-2025/backgrounds/INFO.png') }}" width="150" class="img-responsive">
                        <p class="text-center">
                            Tus conocimientos serán claves para alcanzar <br>
                            los primeros puestos de la competencia.
                        </p>
                        @if ($activity->study_information)
                            <p>Descarga el material de estudio</p>
                            <a href="{{ asset('storage/' . $activity->study_information) }}" target="_blank">
                                <button class="btn-purple-custom">Descargar</button>
                            </a>
                        @endif
                    </div>

                    <!-- Tab 3: Ranking -->
                    <div class="panelTab justify-items-center h-96 hidden px-4 overflow-y-auto" id="tab-three">
                        <table class="w-full">
                            <thead>
                                <tr>
                                    <th colspan="4">RANKING ACTIVIDAD: {{ $activity->name }}</th>
                                </tr>
                            </thead>
                            <tbody class="">
                                @forelse ($ranking as $item)
                                    <tr class="flex flex-row justify-around p-4 space-x-4 border-b-2 border-dashed">
                                        <td class="w-96">
                                            {{ $loop->iteration }}.
                                            @if ($item->user)
                                                {{ mb_strtoupper($item->user->name) }}
                                                {{ mb_strtoupper($item->user->surname) }}
                                            @else
                                                --
                                            @endif
                                        </td>
                                        <td class="w-32">{{ $item->percentage_correct . '% correcta' }}
                                        </td>
                                        <td class="w-64">Tiempo de respuesta {{ $item->time_to_respond }}
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="3">
                                            En el momento no hay datos de ranking para esta actividad.
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                @endif

            </div>
        </div>
    @else
        <!-- Si no hay actividad disponible -->
        <div
            class="bg-custom-back-activity-404-responsive sm:bg-custom-back-activity-404 min-h-custom md:flex-row md:justify-end relative flex flex-col items-center justify-center text-white bg-center bg-cover">
            <img src="{{ asset('/images/2026/backgrounds/top-line.png') }}" alt="linea superior"
                class="absolute top-0 w-full">
            <div class="w-full py-20 text-center">
            </div>
        </div>
    @endif
@endsection