@extends('layouts.admin.app')

@section('content')
    <main class="mt-5" style="z-index: 0" x-data="{
        tab: 1
    }">
        <div class="container-fluid px-4">
            <a href="{{ route('admin.sub-session.peserta', [request()->room, request()->session, request()->subSession]) }}"
                class="text-success fw-bold text-decoration-none">
                <i class="fas fa-arrow-left me-2"></i>Kembali Ke Detail Sesi
            </a>
            <div class="card my-4">
                <div class="card-body d-flex justify-content-between align-items-center">
                    <div>
                        <div class="h5">
                            {{ $participant->user->name }}
                        </div>
                        <div class="small text-muted">Kelas / Sesi Kelas / Game / Detail Peserta</div>
                    </div>
                </div>
            </div>
            @forelse ($detail->game->questions as $question)
                @if (!isset($question->participant_sub_session_answers[0]) && $loop->first)
                    <div class="col-12">
                        <div class="alert alert-danger" role="alert">
                            <span class="fw-bold">{{ $participant->user->name }}</span> belum mengisi pertanyaan
                        </div>
                    </div>
                @endif
                <div class="card my-4">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-lg-6 mb-3">
                                <p class="fw-bold">Pertanyaan {{ $loop->iteration }}</p>
                                <p class="text-muted">
                                    {!! $question->question !!}
                                </p>
                            </div>
                            @if ($question->type == 'image')
                                <div class="col-lg-6 mb-3">
                                    <p class="fw-bold">Jawaban</p>
                                    <div class="row">
                                        @foreach ($question->options as $option)
                                            <div class="col-3">
                                                <div class="rounded {{ isset($question->participant_sub_session_answers[0]) && $question->participant_sub_session_answers[0]?->option_id == $option->id ? 'border border-secondary border-4' : '' }}"
                                                    style="width: 100px; height: 100px; background-image: url('{{ $option->image_url }}'); background-size: cover; background-repeat: no-repeat;">
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            @else
                                <div class="col-lg-6 mb-3">
                                    <p class="fw-bold">Jawaban</p>
                                    <ul class="list-group">
                                        @foreach ($question->options as $option)
                                            <li
                                                class="list-group-item {{ isset($question->participant_sub_session_answers[0]) && $question->participant_sub_session_answers[0]?->option_id == $option->id ? 'bg-secondary bg-opacity-25' : '' }}">
                                                {{ $option->answer }}
                                            </li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            @empty
                <div class="card my-4">
                    <div class="card-body text-center">
                        Belum ada pertanyaan
                    </div>
                </div>
            @endforelse
        </div>
    </main>
@endsection