@extends('layouts.app')

@section('title', 'Trivia')

@section('content')
    @if ($activeTrivia)
        <div id="trivia-bg"
            class="bg-custom-back-activities min-h-custom text-coffee-custom flex flex-col items-center overflow-y-auto bg-center bg-cover">
            <div id="trivia-height" class="font-dunkin-sans-book h-11/20 justify-items-center w-full my-auto">
                <div id="trivia-main" class="justify-items-center w-1/2">
                    <div class="h-1/3 mb-7 2xl:mb-10 flex justify-center w-full">
                        <img src="{{ asset('images/2026/assets/activities/header-trivias.png') }}" alt=""
                            class="2xl:max-w-2xl w-full h-full max-w-lg">
                    </div>
                    <div class="sm:p-0 relative flex justify-center w-full h-full p-8 m-8">
                        <img src="/img-2025/assets/activities/TARGET-TRIVIA.png" alt=""
                            class="sm:hidden absolute top-0 w-full h-full">
                        <div class="relative">
                            <div class="font-dunkin-sans-medium sm:text-xl mb-7 2xl:mb-10 px-4 text-center">
                                y gana demostrando lo que sabes en Dunkin'
                            </div>

                            <div>
                                <img src="{{ asset('/images/2026/assets/activities/activities-line.png') }}"
                                    alt="linea superior" class="w-3/4 mx-auto">
                                <div
                                    class="sm:bg-white md:flex-row md:space-x-8 md:space-y-0 relatrive flex flex-col justify-around px-8 py-4 mb-4 space-y-2 rounded-lg shadow-lg">
                                    <button class="btn-purple-custom toggleTab" data-toggle="tab-one"
                                        type="button">Trivia</button>
                                    <button class="btn-purple-custom toggleTab" data-toggle="tab-two"
                                        type="button">Prepárate</button>
                                    <button class="btn-purple-custom toggleTab" data-toggle="tab-three"
                                        type="button">Ranking</button>
                                </div>
                            </div>

                            <div class="justify-items-center panelTab sm:pt-4 sm:space-y-4 flex flex-col">
                                <p class="font-dunkin-sans-medium text-xl text-center">¿Quieres conquistar el universo?</p>
                                <button
                                    class="btn-purple-custom {{ $user_participated_in_trivia ? '' : 'btn-start-trivia' }} mx-auto"
                                    type="button" {{ $user_participated_in_trivia ? 'disabled' : '' }}>
                                    {{ $user_participated_in_trivia ? 'Ya has participado' : 'Hazlo ahora' }}
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="panelTab justify-items-center hidden" id="tab-one">
                        @if ($trivia->reward)
                            <img src="{{ asset('storage/' . $trivia->reward->image) }}" class="img-fluid">
                        @endif
                        <div class="justify-items-center space-y-2 text-center">
                            <p class="title-trivia">{{ $trivia->name }}</p>
                            <p class="description">
                                {{ $trivia->description }}
                            </p>
                            @if ($user_participated_in_trivia)
                                <p class="title-trivia">Ya has participado de esta trivia</p>
                            @else
                                <p class="advice">
                                    <span class="font-dunkin-sans-medium">¿ESTÁS LISTO?</span> <br>
                                    SI AÚN NO LO ESTAS PREPARATE PARA PODER GANAR UN: <br>
                                    {{ $trivia->reward ? $trivia->reward->name : 'PUNTAJE ATADO A LA TRIVIA' }}
                                </p>
                                <button class="btn-purple-custom btn-start-trivia">
                                    Empezar
                                </button>
                            @endif
                        </div>
                    </div>
                    <div class="panelTab justify-items-center hidden px-4 space-y-2 text-center" id="tab-two">
                        <img src="{{ asset(config('constants.logo_image_path')) }}" width="150" class="img-responsive">
                        <p>
                            Tus conocimientos serán claves para alcanzar los primeros puestos de la
                            competencia.
                        </p>
                        <p>Descarga el material de estudio</p>
                        <a href="{{ asset('storage/' . $trivia->study_information) }}" target="_blank">
                            <button class="btn-purple-custom mt-4">Descargar</button>
                        </a>
                    </div>
                    <div class="panelTab justify-items-center hidden h-48 px-4 overflow-y-auto" id="tab-three">
                        <table class="">
                            <thead>
                                <tr>
                                    <th colspan="4">RANKING TRIVIA: {{ $trivia->name }}</th>
                                </tr>
                            </thead>
                            <tbody class="">
                                @forelse ($currentRanking as $item)
                                    <tr class="flex flex-row p-4 space-x-4 border-b-2 border-dashed">
                                        <td>{{ $loop->iteration }}.</td>
                                        <td>
                                            {{ mb_strtoupper($item->user->name) }}
                                            {{ mb_strtoupper($item->user->surname) }}
                                        </td>
                                        <td>{{ $item->correctness_percent . '% correcta' }}
                                        </td>
                                        <td>Tiempo de respuesta {{ $item->time_to_respond }}
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="4">
                                            En el momento no hay datos de ranking para esta trivia.
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
                <div id="trivia-game" class="min-h-custom relative flex hidden w-full h-full">
                    <div class="max-h-custom w-full h-full my-auto">
                        <img src="{{ asset('/images/2026/backgrounds/top-line.png') }}" alt="linea superior"
                            class="absolute top-0 z-20 w-full">
                        <trivia-test />
                    </div>
                </div>
            </div>
        </div>
    @else
        <div
            class="bg-custom-back-trivia-404-responsive sm:bg-custom-back-trivia-404 min-h-custom relative flex flex-col items-center justify-end overflow-y-auto bg-center bg-cover">
            <img src="{{ asset('/images/2026/backgrounds/top-line.png') }}" alt="linea superior"
                class="absolute top-0 w-full">
        </div>
    @endif
@endsection