@extends('adminlte::page')

@section('title', $team->name . __('team-quiz.show.title') . $page)

@section('content_header')
    <h5><label class="title-underbar">{{ $team->name . __('team-quiz.show.title') . $page}}</label></h5>
@stop

@php
    if ($page == count($ids)) {
        $url = route($registered . '.quiz.complete', ['quizSurvey' => $quizSurvey->id]);
    } else {
        $url = route($registered . '.quiz.question', ['quizSurvey' => $quizSurvey->id, 'page' => $page + 1]);
    }
@endphp

@section('content')
    <x-admin.error-flush-message />
    <x-admin.success-flush-message />
    <div class="row">
        <div class="col-md-12">
            <div class="card" style="border-radius: 20px; box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.04);">
                <form method="POST" action=" {{ $url }}" class="card-body">
                    @csrf
                    <h5>{{ $question->question }}</h5>
                    <p>{{ $question->detail }}</p>
                    
                    @if ($question->image)
                    <div class="text-center mb-3">
                        <img src="{{ $question->image->s3_bucket . $question->image->url }}" alt="問題画像" class="img-fluid" style="max-width: 100%; max-height: 400px;">
                    </div>
                    @endif
                    
                    <input type="hidden" name="question" value="{{ $question->id }}" />
                    <div class="table-responsive">
                        <input type="hidden" name="required" value="{{ $question->required }}" />
                        <table class="table">
                            <tbody class="main-text">
                                @if ($question->type == 'radio' || $question->type == 'checkbox')
                                    @foreach (explode(',', $question->choices) as $idx =>$choice)
                                    <tr>
                                        <td class="text-center align-middle">
                                            <input type="{{ $question->type }}" id="answer{{$idx}}" name="answer[]" value="{{ $choice }}" @if ($question->required) requiered @endif />
                                            <label class="medium-heading" for="answer{{$idx}}">
                                                {{ $choice }}
                                            </label>
                                        </td>
                                    </tr>
                                    @endforeach
                                @else
                                <tr>
                                    <td class="text-center align-middle">
                                        <input type="{{ $question->type }}" name="answer" value="" @if ($question->required) requiered @endif class="form-control main-text" value=""/>
                                    </td>
                                </tr>
                                @endif
                            </tbody>
                        </table>
                    </div>
                    <div class="row justify-content-center">
                        @if ($page > 1)
                        <div class="col-md-4 mb-3">
                            <a href="{{ route($registered . '.quiz.question', ['quizSurvey' => $quizSurvey->id, 'page' => $page - 1]) }}" class="btn btn-block btn-secondary btn-lg rounded-pill">戻る</a>
                        </div>
                        @endif
                        <div class="col-md-4 mb-3">
                        <button type="submit" class="btn btn-block button-go btn-lg rounded-pill">
                            @if ($page < count($ids))
                                次へ
                            @else
                                回答を送る
                            @endif
                        </button>
                        </div>
                    </div>
                </form>
            </div>

        </div>
    </div>
@stop

@section('css')
    <link rel="stylesheet" href="/css/admin_custom.css">
    @include('components.custom-css', ['team' => $user->currentTeam])
@stop

@section('js')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
@stop