@extends('layouts.app')
@section('title', 'Trivia')
@section('content')

    @if ($activeTrivia)
        <div id="trivia-bg"
            class="bg-custom-back-activities bg-cover bg-center h-custom text-white flex flex-col items-center  overflow-y-auto">
            <div id="trivia-height" class="font-dunkin-sans-book h-11/20 justify-items-center w-full">
                <div id="trivia-main" class="justify-items-center pb-4">
                    <div class="h-1/3 w-full">
                        <img src="img-2025/assets/activities/HEADER-TRIVIA.png" alt="" class="w-full h-full">
                    </div>
                    <p class="font-dunkin-sans-medium text-xl mb-3 px-4 text-center">y gana desmostrando lo que sabes en
                        Dunkin'</p>
                    <div
                        class="bg-white px-8 py-4 mb-4  rounded-lg flex flex-col md:flex-row md:space-x-8 space-y-2 md:space-y-0">
                        <button class="btn-orange-custom toggleTab" data-toggle="tab-one" type="button">Trivia</button>
                        <button class="btn-orange-custom toggleTab" data-toggle="tab-two" type="button">Prepárate</button>
                        <button class="btn-orange-custom toggleTab" data-toggle="tab-three" type="button">Ranking</button>
                    </div>
                    <div class="panelTab justify-items-center space-y-4 pt-4">
                        <p class="text-xl font-dunkin-sans-medium">¿Quieres conquistar el universo?</p>
                        <button class="btn-purple-custom {{ $user_participated_in_trivia ? '' : 'btn-start-trivia' }}"
                            type="button" {{ $user_participated_in_trivia ? 'disabled' : '' }}>
                            {{ $user_participated_in_trivia ? 'Ya has participado' : 'Hazlo ahora' }}
                        </button>
                    </div>
                    <div class="panelTab hidden justify-items-center" 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 hidden justify-items-center space-y-2 px-4 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 hidden justify-items-center h-48 overflow-y-auto px-4" 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="p-4 flex flex-row 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="hidden">
                    <div class="h-1/3 w-full mb-4 flex flex-col justify-center items-center relative"
                        id="header-start-trivia">
                        <img src="img-2025/assets/activities/HEADER-START-TRIVIA.png" alt="" class="w-full h-full">
                        <h1 class="absolute md:text-3xl pt-6 md:pt-20">{{ $trivia->name }}</h1>
                    </div>
                    <trivia-test />
                </div>
            </div>
        </div>
    @else
        <div
            class="bg-custom-back-trivia-404-responsive sm:bg-custom-back-trivia-404 bg-cover bg-center h-custom text-white flex flex-col items-center justify-end overflow-y-auto">
        </div>
    @endif
@endsection