@extends('layouts.app')
@section('title', 'Crucigrama')
@section('content')
    <div
        class="bg-custom-back-{{ $activeCrossword ? 'activities' : 'crossword-404-responsive' }} sm:bg-custom-back-{{ $activeCrossword ? 'activities' : 'crossword-404' }} bg-cover bg-center h-custom text-white flex flex-col items-center  overflow-y-auto">
        @if ($activeCrossword)
            <div class="font-dunkin-sans-book h-full justify-items-center overflow-y-auto pb-10 space-y-4 w-full"
                id="crossword-main">
                <img src="img-2025/assets/activities/HEADER-CROSSWORD.png" alt="" class="w-full">
                <p class="font-dunkin-sans-medium text-xl">y preparate para ganar</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">Crucigrama</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">¿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 hidden justify-items-center 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 hidden justify-items-center space-y-2" 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 hidden justify-items-center h-48 overflow-y-acuto" 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="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 este
                                        crucigrama.
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
            <div id="start-crossword" class="w-full h-full hidden">
                <div class="md:h-1/4 flex flex-col relative items-center justify-center">
                    <img src="img-2025/assets/activities/HEADER-START-CROSSWORD.png" alt="" class="w-full h-full">
                    <h2 class="font-dunkin-sans-display absolute flex justify-center md:text-5xl">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>
    </div>
    @endif
@endsection