@props([
    'test_id' => '',
    'default_question' => '',
    'default_points' => 1,
    'default_answer_type' => 'single_answer',

    'default_answer' => '',

    'default_correct_answer' => '',
    'default_incorrect_answer1' => '',
    'default_incorrect_answer2' => '',
    'default_incorrect_answer3' => '',

    'default_answer1' => '',
    'default_is_answer1_correct' => '',
    'default_answer2' => '',
    'default_is_answer2_correct' => '',
    'default_answer3' => '',
    'default_is_answer3_correct' => '',
    'default_answer4' => '',
    'default_is_answer4_correct' => ''
])

<input type="hidden" value="{{ $test_id }}" name="test_id">

<x-input-label>{{ __("Question") }}</x-input-label>
<x-text-input name="question" placeholder="{{ __('Question') }}" value="{{ old('question', $default_question) }}" />
<x-input-error :messages="$errors->get('question')" class="mt-2" />

<x-input-label>{{ __("Points") }}</x-input-label>
<x-text-input name="points" placeholder="{{ __('Points') }}" value="{{ old('points', $default_points) }}" />
<x-input-error :messages="$errors->get('points')" class="mt-2" />

<x-input-label>{{ __("Answer type") }}</x-input-label>
<x-select name="answer_type" value="single_answer" id="answer_type">
    <option value="single_answer"   {{ old("answer_type", $default_answer_type) == "single_answer" ? "selected" : "" }} >{{ __('Single') }}</option>
    <option value="single_choice"   {{ old("answer_type", $default_answer_type) == "single_choice" ? "selected" : "" }}   >{{ __('Single choice') }}</option>
    <option value="multiple_choice" {{ old("answer_type", $default_answer_type) == "multiple_choice" ? "selected" : "" }}  >{{ __('Multiple choice') }}</option>
</x-select>

<div class="w-full" id="answer_single">
    <x-input-label>{{ __("Answer") }}</x-input-label>
    <x-text-input class="w-full" name="answer" placeholder="{{ __('Answer') }}" value="{{ old('answer', $default_answer) }}" />
    <x-input-error :messages="$errors->get('answer')" class="mt-2" />
</div>

<div class="w-full" id="answer_single_choice">
    <x-input-label>{{ __("Correct answer") }}</x-input-label>
    <x-text-input class="w-full" name="correct_answer" placeholder="{{ __('Correct answer') }}" value="{{ old('correct_answer', $default_correct_answer) }}" />
    <x-input-error :messages="$errors->get('correct_answer')" class="mt-2" />

    @for ($idx = 1; $idx <= 3; $idx++)
    <x-input-label>{{ __("Incorrect answer ".$idx) }}</x-input-label>
    <x-text-input class="w-full" name="incorrect_answer{{$idx}}" placeholder="{{ __('Incorrect answer '.$idx) }}" value="{{ old('incorrect_answer'.$idx, ${'default_incorrect_answer'.$idx}) }}" />
    <x-input-error :messages="$errors->get('incorrect_answer{{$idx}}')" class="mt-2" />
    @endfor
</div>

<div class="w-full flex flex-col" id="answer_multiple_choice">
    @for ($idx = 1; $idx <= 4; $idx++)
    <div>
        <x-input-label>{{ __("Answer ".$idx) }}</x-input-label>
        <x-text-input class="w-full" name="answer{{ $idx }}" placeholder="{{ __('Answer '.$idx) }}" value="{{ old('answer'.$idx, ${'default_answer'.$idx}) }}" />
        <x-input-error :messages="$errors->get('answer{{ $idx }}')" class="mt-2" />

        <x-bool-input name="is_answer{{$idx}}_correct" checked="{{ old('is_answer'.$idx.'_correct', ${'default_is_answer'.$idx.'_correct'}) }}" />
    </div>
    @endfor
</div>

<script>
    function show(value) {
        if (value == "single_answer") {
            $("#answer_single").removeClass("hidden")
            $("#answer_single_choice").addClass("hidden")
            $("#answer_multiple_choice").addClass("hidden")
        } else if (value == "single_choice") {
            $("#answer_single").addClass("hidden")
            $("#answer_single_choice").removeClass("hidden")
            $("#answer_multiple_choice").addClass("hidden")
        } else if (value == "multiple_choice") {
            $("#answer_single").addClass("hidden")
            $("#answer_single_choice").addClass("hidden")
            $("#answer_multiple_choice").removeClass("hidden")
        }
    }
    $("#answer_type").on("change", function() {
        show(this.value)
    })
    show("{{ $default_answer_type }}")
</script>