@extends('site.layouts.master')
@section('content')
    <style>

    </style>
    <div class="app-create-question-page">
        <div class="app-create-question-page__title">
            <h2>ایجاد سوال جدید</h2>
        </div>
        <form action="{{ route('questions.store') }}" method="POST">
            @csrf
            <div class="app-create-question-page__main">
                <label for="question">متن سوال:</label>
                <input type="text" id="question" required value="{{ old('question') }}" name="question"
                       class="form-control"/>
            </div>
            <div class="app-create-question-page__img">
                <label for="image">بارگذاری تصویر: (اختیاری - حداکثر 5 مگابایت)</label>
                <input type="file" id="image" name="image" class="form-control"/>
            </div>
            <div class="app-create-question-page__answers">
                <label>پاسخ ها:</label>
                <div class="answer form-group">
                    <input type="radio" name="correct_answer" required data-target="answer_1" autocomplete="off"
                           value="1"/>
                    <input type="text" name="answer_1" required value="{{ old('answer_1') }}" placeholder="پاسخ اول"/>
                </div>
                <div class="answer form-group">
                    <input type="radio" name="correct_answer" required data-target="answer_2" autocomplete="off"
                           value="2"/>
                    <input type="text" name="answer_2" required value="{{ old('answer_2') }}" placeholder="پاسخ دوم"/>
                </div>
                <div class="answer form-group">
                    <input type="radio" name="correct_answer" required data-target="answer_3" autocomplete="off"
                           value="3"/>
                    <input type="text" name="answer_3" required value="{{ old('answer_3') }}" placeholder="پاسخ سوم"/>
                </div>
                <div class="answer form-group">
                    <input type="radio" name="correct_answer" required data-target="answer_4" autocomplete="off"
                           value="answer_4"/>
                    <input type="text" name="answer_4" required value="{{ old('answer_4') }}" placeholder="پاسخ چهارم"/>
                </div>
            </div>
            <button type="submit" class="create-question-btn">اضافه نمودن سوال</button>
        </form>
    </div>
@endsection
@section('scripts')
    <script>
        const inputsChecked = document.querySelectorAll("input[name='correct_answer']")
        const inputsTxt = document.querySelectorAll(".answer.form-group input[type='text']")
        inputsChecked.forEach((radio) => {
            radio.addEventListener("change", (e) => {
                const inputTxt = document.querySelector(`input[name=${radio.getAttribute('data-target')}]`)
                inputsTxt.forEach((inputItem) => {
                    inputItem.style.background = "#EFE1F7"
                })
                inputTxt.style.background = "#00b800"

            })
        })
    </script>
@endsection