@extends('layouts.app')

@section('title', 'Crucigrama')

@section('content')
    <div id="crossword-bg"
        class="bg-custom-back-{{ $activeCrossword ? 'activities' : 'crossword-404-responsive' }} sm:bg-custom-back-{{ $activeCrossword ? 'activities' : 'crossword-404' }} bg-cover bg-center min-h-custom text-coffee-custom flex flex-col items-center  overflow-y-auto {{ $activeCrossword ? '' : 'relative' }}">
        @if ($activeCrossword)
            <div class="font-dunkin-sans-book h-11/20 justify-items-center w-1/2 my-auto" id="crossword-main">
                <div class="h-1/3 mb-7 2xl:mb-10 flex justify-center w-full">
                    <img src="{{ asset('images/2026/assets/activities/header-crosswords.png') }}" alt=""
                        class="2xl:max-w-2xl w-full h-full max-w-lg">
                </div>
                <div class="font-dunkin-sans-medium sm:text-xl mb-7 2xl:mb-10 px-4 text-center">y preparate para ganar</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">Crucigrama</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="panelTab justify-items-center pt-4 space-y-4">
                    <p class="font-dunkin-sans-medium text-xl">¿Estas Listo?</p>
                    <button class="btn-purple-custom {{ $usrMadeCrossword ? '' : 'btn-start-crossword' }}" type="button"
                        {{ $usrMadeCrossword ? 'disabled' : '' }}>
                        {{ $usrMadeCrossword ? 'Ya has participado' : 'Empezar' }}
                    </button>
                </div>
                <div class="panelTab justify-items-center hidden space-y-2 text-center" id="tab-one">
                    <p class="">{{ $crossword->name }}</p>
                    <p class="">
                        {{ $crossword->description }}
                    </p>
                    @if ($usrMadeCrossword)
                        <p class="title-trivia">Ya has participado de este crucigrama</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:
                        </p>
                        <button class="btn-purple-custom btn-start-crossword">
                            Empezar
                        </button>
                    @endif
                </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/' . $crossword->study_information) }}" target="_blank">
                        <button class="btn-purple-custom mt-4">Descargar</button>
                    </a>
                </div>
                <div class="panelTab justify-items-center overflow-y-acuto hidden h-48" id="tab-three">
                    <table class="">
                        <thead>
                            <tr>
                                <th colspan="4" class="my-5">
                                    RANKING CRUCIGRAMA: {{ $crossword->name }}
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            @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 este
                                        crucigrama.
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
            <div id="start-crossword" class="hidden w-full h-full">
                <div class="md:h-1/4 relative flex flex-col items-center justify-center" id="header-start-crossword">
                    <img src="img-2025/assets/activities/HEADER-START-CROSSWORD.png" alt="" class="w-full h-full">
                    <h2 class="font-dunkin-sans-display md:text-5xl absolute flex justify-center">Crucigrama</h2>
                </div>
                <div class="h-3/4 pt-10">
                    <crossword id="{{ $crossword->id }}" rows="{{ intval($crossword->rows) }}"
                        cols="{{ intval($crossword->cols) }}" v-bind:blocked-cells="{{ $crossword->blocked_cells }}"
                        v-bind:words-config="{{ $crossword->words()->get() }}" />
                </div>
            </div>
        @else
            <img src="{{ asset('/images/2026/backgrounds/top-line.png') }}" alt="linea superior"
                class="absolute top-0 w-full">
        @endif
    </div>
@endsection