@extends('layouts.frontpages')

@section('content')
    @include('partials.header')

    <div class="page home">
        <div class="container mt-5">
            <div class="row">
                @include('partials.messages')
                <div class="col-md-12 text-center dunkin-font">
                    @if ($activeTrivia)
                        <div class="d-flex my-4">
                            <h2 class="align-items-baseline d-flex text-uppercase mx-auto text-brown">Trivia
                                <span class="pink mx-2">:</span>
                                {{ $trivia->name }}
                            </h2>
                        </div>
                        <div class="trivia-main">
                            <ul class="nav nav-tabs nav-activity row border-0" role="tablist">
                                <li role="presentation" class="col-md-6 active">
                                    <a class="btn-orange col-12 active" href="#trivia-home" aria-controls="trivia-home"
                                        role="tab" data-toggle="tab">
                                        Trivia
                                    </a>
                                </li>
                                <li role="presentation" class="col-md-6">
                                    <a class="btn-orange col-12" href="#prepare" aria-controls="prepare" role="tab"
                                        data-toggle="tab">
                                        Prepárate
                                    </a>
                                </li>
                            </ul>
                            <br>
                            <!-- Tab panes -->
                            <div class="tab-content mt-5">
                                <div role="tabpanel" class="tab-pane active" id="trivia-home">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <p>{{ $trivia->description }}</p>
                                            @if ($usrMadeTrivia)
                                                <h4 class="pink mt-4">Ya has participado de esta trivia</h4>
                                            @else
                                                <h4 class="orange">UNA VEZ TE SIENTAS PREPARADO PARA ESTE DESAFÍO, PODRÁS
                                                    PARTICIPAR</h4>
                                                <br>
                                                <h4 class="pink">RECUERDAS QUE SOLO TIENES 1 INTENTO PARA GANAR</h4>
                                                @if ($trivia->terms)
                                                    <br>
                                                    <p>
                                                        Consulta los terminos y condiciones <a
                                                            href="{{ asset('storage/' . $trivia->terms) }}" target="_blank"
                                                            class="pink">aquí</a>
                                                    </p>
                                                @endif
                                                <br>
                                                <button id="btn-start-trivia" class="btn-custom-black btn-pink">
                                                    quiero participar
                                                </button>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                <div role="tabpanel" class="tab-pane" id="prepare">
                                    <h4 class="orange mt-3">Descarga tu material de estudio y así podrás ganar más puntos
                                    </h4>
                                    <img style="max-height: 75px" src="/images/trivias/file.png" class="my-4">
                                    <a href="{{ asset('storage/' . $trivia->study_information) }}" target="_blank">
                                        <button class="btn btn-custom-black btn-pink">
                                            <span>haz clic aquí</span>
                                        </button>
                                    </a> <br> <br>
                                </div>
                            </div>
                            <!-- End Tab panes -->
                        </div>
                        <div class="trivia-game">
                            <div id="start-trivia">
                                <trivia-test></trivia-test>
                            </div>
                        </div>
                    @else
                        <h2>Trivia</h2>
                        <p class="my-5">¡En el momento no hay trivias activas! Te invitamos a estar pendiente de nuestras
                            comunicaciones para participar y ganar con Dunkin’</p>
                        <div class="table-responsive">
                            <table class="table table-custom">
                                <thead>
                                    <tr>
                                        <th>Nombre</th>
                                        <th>Fecha Inicio</th>
                                        <th>Fecha Fin</th>
                                        <th>Posición Ranking</th>
                                        <th>Tu Tiempo</th>
                                        <th>Tu Porcentaje</th>
                                        <th>Respuestas Actividad</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($trivias as $item)
                                        <tr>
                                            <td>{{ $item->name }}</td>
                                            <td>{{ $item->start_date }}</td>
                                            <td>{{ $item->finish_date }}</td>
                                            <td>{{ $item->rankingAuth($item->id) }}</td>
                                            <td>{{ $item->participationAuth($item->id, 'time') }}</td>
                                            <td>{{ $item->participationAuth($item->id, 'percentage') }}</td>
                                            <td>
                                                <a href="{{ route('trivia.answers', '10' . $item->id) }}">
                                                    ver
                                                </a>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="7">No se encontraron registros.</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    @endif
                </div>

            </div>
        </div>
    </div>

    @include('partials.footer')
@stop