@extends('adminlte::page')

@section('title', 'クイズ 設問新規追加')

@section('content_header')
    <h5><label class="title-underbar">クイズ 設問新規追加</label></h5>
@stop

@section('content')
<x-admin.error-flush-message />
<x-admin.validation-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);">
            <div class="card-body">
                <form method="POST" action="{{ route('admin.quizzes.questions.store', ['quizSurvey' => $quizSurvey->id]) }}" class="form-group mt-3" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="quiz_survey_id" value="{{ $quizSurvey->id }}" />
                    <div class="col-12 mb-5">
                        <div class="form-group row">
                            <label for="question" class="col-md-2 col-form-label medium-heading">設問</label>
                            <input type="text" id="question" name="question" class="col-md-6 form-control main-text" placeholder="設問" value="{{ old('question') }}" required />
                        </div>

                        <div class="form-group row">
                            <label for="detail" class="col-md-2 col-form-label medium-heading">説明</label>
                            <input type="text" id="detail" name="detail" class="col-md-6 form-control main-text" placeholder="補足説明" value="{{ old('detail') }}" />
                        </div>

                        <div class="form-group row">
                            <label for="type_radio" class="col-md-2 col-form-label medium-heading">回答タイプ</label>
                            @foreach($questionTypes as $key => $type)
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="type" id="type_{{ $type }}" value="{{ $type }}" @checked(old('type') === $type)>
                                <label class="form-check-label" for="type_{{ $type }}">{{ $type }}</label>
                            </div>
                            @endforeach
                        </div>

                        <div class="form-group row d-none" id="selection">
                            <label for="choices" class="col-md-2 col-form-label medium-heading">選択肢</label>
                            <input type="text" id="choices" name="choices" class="col-md-6 form-control main-text" placeholder="選択肢（カンマ区切り）" value="{{ old('choices') }}" />
                        </div>

                        <div class="form-group row">
                            <label for="required" class="col-md-2 col-form-label medium-heading">必須</label>
                            <input type="checkbox" id="required" name="required" class="col-md-6 form-control main-text" placeholder="項目必須" value="1" @if (!old('required') || old('required') == 1) checked @endif />
                        </div>

                        <div class="form-group row">
                            <label for="orders" class="col-md-2 col-form-label medium-heading">設問順</label>
                            <input type="number" id="orders" name="orders" class="col-md-6 form-control main-text" min="1" max="1000" placeholder="設問順" value="{{ old('orders') }}" required />
                        </div>

                        <div class="form-group row">
                            <label for="answer" class="col-md-2 col-form-label medium-heading">正答</label>
                            <input type="text" id="answer" name="answer" class="col-md-6 form-control main-text" placeholder="正答" value="{{ old('answer') }}" required/>
                        </div>

                        <div class="form-group row">
                            <label for="point" class="col-md-2 col-form-label medium-heading">得点</label>
                            <input type="number" id="point" name="point" class="col-md-6 form-control main-text" placeholder="得点" min="1" max="10" value="{{ old('point') ?? 1 }}" required/>
                        </div>

                        <div class="form-group row">
                            <label for="explanation" class="col-md-2 col-form-label medium-heading">正解時の解説</label>
                            <textarea id="explanation" name="correct_explanation" class="col-md-6 form-control main-text" placeholder="正解時の解説" rows="3">{{ old('correct_explanation') }}</textarea>
                        </div>

                        <div class="form-group row">
                            <label for="incorrect_explanation" class="col-md-2 col-form-label medium-heading">不正解時の解説</label>
                            <textarea id="incorrect_explanation" name="incorrect_explanation" class="col-md-6 form-control main-text" placeholder="不正解時の解説" rows="3">{{ old('incorrect_explanation') }}</textarea>
                        </div>

                        <div class="form-group row">
                            <label for="image_pict" class="col-2 col-form-label medium-heading">問題画像</label>
                            <input type="file" id="image_pict" name="image_pict" class="col-10 col-md-6 form-control main-text" placeholder="問題画像" value="{{ old('image_pict') }}" />
                        </div>

                        <div class="form-group row">
                            <label for="answer_pict" class="col-2 col-form-label medium-heading">正解時解説画像</label>
                            <input type="file" id="answer_pict" name="answer_pict" class="col-10 col-md-6 form-control main-text" placeholder="正解時解説画像" value="{{ old('answer_pict') }}" />
                        </div>

                        <div class="form-group row">
                            <label for="incorrect_explanation_image" class="col-2 col-form-label medium-heading">不正解時解説画像</label>
                            <input type="file" id="incorrect_explanation_image" name="incorrect_explanation_image" class="col-10 col-md-6 form-control main-text" placeholder="不正解時解説画像" value="{{ old('incorrect_explanation_image') }}" />
                        </div>
                    </div>
                    <div class="row justify-content-center">
                        <div class="col-md-4 mb-3">
                            <a href="{{ route('admin.quizzes.questions.index', ['quizSurvey' => $quizSurvey->id]) }}" class="btn btn-block btn-secondary btn-lg rounded-pill">キャンセル</a>
                        </div>
                        <div class="col-md-4 mb-3">
                            <button type="submit" class="btn btn-block button-go btn-lg rounded-pill">保存する</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@stop

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

@section('js')
<script>
const applyAnswerType = function () {
    const INIT_TYPE = '{{ old('type') }}';
    if (INIT_TYPE === 'radio' || INIT_TYPE === 'checkbox') {
        $("#selection").addClass("d-flex");
        $("#selection").removeClass("d-none");
    }
}
$(function () {
    applyAnswerType();

    $('#type_radio').on('change', function () {
        $("#selection").addClass("d-flex");
        $("#selection").removeClass("d-none");
    });
    $('#type_checkbox').on('change', function () {
        $("#selection").addClass("d-flex");
        $("#selection").removeClass("d-none");
    });
    $('#type_text').on('change', function () {
        $("#selection").addClass("d-none");
        $("#selection").removeClass("d-flex");
    });
    $('#type_number').on('change', function () {
        $("#selection").addClass("d-none");
        $("#selection").removeClass("d-flex");
    });
});
</script>
@stop