@extends('layouts.app')
@section('content')
    <h3 class=" text-center form-tittle text-p">
        @if (isset($question))
            تعديل سؤال
        @else
            أضافة سؤال
        @endif
    </h3>
    <div class="m-sm-5 p-sm-5 p-2 m-2">

        <form class="d-flex flex-column gap-4"
            action="{{ isset($question) ? route('questions.update', $question->id) : route('questions.store') }}"
            method="post"
            enctype="multipart/form-data">
            @csrf
            @if (isset($question))
                @method('PATCH')
            @endif
            <div class="row">



                <div class="col-6">
                    <label class="py-3 test-p2 fs-6 fw-bolder" for="course_id"> اسم الدرس </label>
                    <select id="course_id" name="course_id" data-url="{{ route('ajax-units') }}"
                        class="course_id form-select select-field form-select-lg mb-3">
                        <option value="">اختر الدرس</option>
                        @foreach ($courses as $course)
                            <option {{ old('course_id') == $course->id ? 'selected' : null }}
                                {{ !old('course_id') ? (isset($question) ? ($course_id == $course->id ? 'selected' : null) : null) : null }}
                                value="{{ $course->id }}">{{ $course->title }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-6">
                    <label class="py-3 test-p2 fs-6 fw-bolder" for="unit_id"> اسم الشهر </label>

                    <select id="unit_id" name="unit_id" class="unit_id form-select select-field form-select-lg mb-3"
                        data-url="{{ route('ajax-lessons') }}">
                        <option value="">أختر الدرس أولا</option>
                        @if (isset($question))
                            @foreach ($units as $unit)
                                <option {{ old('unit_id') == $unit->id ? 'selected' : null }}
                                    {{ !old('unit_id') ? (isset($question) ? ($unit_id == $unit->id ? 'selected' : null) : null) : null }}
                                    value="{{ $unit->id }}">{{ $unit->title }}</option>
                            @endforeach
                        @endif
                    </select>
                </div>
                <div class="col-6">
                    <label class="py-3 test-p2 fs-6 fw-bolder" for="lesson_id"> اسم الحصة </label>

                    <select id="lesson_id" name="lesson_id" class="lesson_id @error('lesson_id')  is-invalid  @enderror form-select select-field form-select-lg mb-3">
                        <option value="">أختر الشهر أولا</option>
                        @if (isset($question))
                            @foreach ($lessons as $lesson)
                                <option {{ old('lesson_id') == $lesson->id ? 'selected' : null }}
                                    {{ !old('lesson_id') ? (isset($question) ? ($question->lesson_id == $lesson->id ? 'selected' : null) : null) : null }}
                                    value="{{ $lesson->id }}">{{ $lesson->title }}</option>
                            @endforeach
                        @endif
                    </select>
                </div>
                <div class="col-6">
                    <label class="py-3 test-p2 fs-6 fw-bolder" for="type"> نوع السؤال </label>

                    <select id="type" name="type" class="@error('type')  is-invalid  @enderror type-question form-select form-select-md mb-3">
                        <option {{ old('type') == 'choices' ? 'selected' : null }}
                            {{ !old('choices') ? (isset($question) ? ($question->type == 'choices' ? 'selected' : null) : null) : null }}
                            value="choices"> أختيارات</option>
                        <option {{ old('type') == 'correct' ? 'selected' : null }}
                            {{ !old('type') ? (isset($question) ? ($question->type == 'correct' ? 'selected' : null) : null) : null }}
                            value="correct"> صح و خطأ</option>
                        <option {{ old('type') == 'text' ? 'selected' : null }}
                            {{ !old('type') ? (isset($question) ? ($question->type == 'text' ? 'selected' : null) : null) : null }}
                            value="text"> مقالى</option>
                    </select>
                </div>
                <div class="col-6">
                    <label class="py-3 test-p2 fs-6 fw-bolder" for="grades"> درجة السؤال </label>
                    <input type="number" class="form-control py-2 @error('grades')  is-invalid  @enderror" id="grades"
                        name="grades" placeholder="درجة السؤال     "
                        value="{{ old('grades', isset($question) ? $question->grades : null) }}">
                </div>
                <div class="custom_image mt-5">
                    <label for="image" class=" @error('image')  is-invalid  @enderror">

                        <img style="width: 200px;height:100px;" src="{{isset($question)? $question->image : null   }}" alt="" srcset="">

                        <i class="fas fa-images"></i>
                        <span class="">
                            قم بتحميل الصورة من <span class="text-p">هنا</span>

                        </span>
                    </label>
                    <input type="file" accept="image/*" name="image" id="image" class="@error('image')  is-invalid  @enderror">
                </div>
                <div class="col-12">
                    <label class="py-3 test-p2 fs-6 fw-bolder" for="question"> السؤال </label>
                    <input type="text" class="form-control mb-3 py-2 @error('question')  is-invalid  @enderror"
                        id="question" name="question" placeholder=" السؤال     "
                        value="{{ old('question', isset($question) ? $question->question : null) }}">
                </div>
                <div class="col-12 ">
                    <div class="{{(old("type") !== 'choices' && old("type") != null) ? 'd-none' :null}}
                    {{old("type") == null ? (isset($question) ? ($question->type !== 'choices' ? 'd-none' : null) :null) : null}}" id="choices" role="tabpanel" aria-labelledby="home-tab">

                        <h5 class="">الأجابات</h5>
                        <p class="mb-3">أدخل الأجابات وقم بتحديد الأجابة الصحيحة بينهم</p>
                        <div class="row ">
                            <div class="col-6">
                                <div class="d-flex gap-2 justify-content-center items-center">
                                    <input type="text"
                                        class="form-control py-1 @error('answers.0')  is-invalid  @enderror"
                                        id="answers[0]" name="answers[0]" placeholder=" أدخل الأجابة الأولى     "
                                        value="{{ old('answers.0', isset($question) ? $question->answers[0]->answer ?? null : null) }}">
                                    <input {{(old('correct_answer') == 0  ) ? " checked " : null}}
                                     {{(old('correct_answer') == null ) ? (isset($question) ? (($question->answers[0]->id ??null)== $question->correct_answer ? 'checked':null):'checked') : null}}  type="radio" name="correct_answer" class="check form-check-input p-2"
                                        value="0" id="">
                                </div>
                                <div class="d-flex gap-2 mt-2 justify-content-center items-center">
                                    <input type="text"
                                        class="form-control py-1 @error('answers.1')  is-invalid  @enderror"
                                        id="answers[1]" name="answers[1]" placeholder=" أدخل الأجابة الثانية     "
                                        value="{{ old('answers.1', isset($question) ? $question->answers[1]->answer ?? null : null) }}">
                                    <input {{(old('correct_answer') == 1  ) ? " checked " : null}}
                                     {{(old('correct_answer') == null ) ? (isset($question) ? (($question->answers[1]->id ??null)== $question->correct_answer ? 'checked':null):null) : null}}   type="radio" name="correct_answer" class="check form-check-input p-2"
                                        value="1" id="">
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="d-flex gap-2 justify-content-center items-center">
                                    <input type="text"
                                        class="form-control py-1 @error('answers.2')  is-invalid  @enderror"
                                        id="answers[2]" name="answers[2]" placeholder=" أدخل الأجابة الثالثة     "
                                        value="{{ old('answers.2', isset($question) ? $question->answers[2]->answer ?? null : null) }}">
                                    <input {{(old('correct_answer') == 2  ) ? " checked " : null}}
                                     {{(old('correct_answer') == null ) ? (isset($question) ? (($question->answers[2]->id??null) == $question->correct_answer ? 'checked':null):null) : null}} type="radio" name="correct_answer" class="check form-check-input p-2"
                                        value="2" id="">
                                </div>
                                <div class="d-flex gap-2 mt-2 justify-content-center items-center">
                                    <input type="text"
                                        class="form-control py-1 @error('answers.3')  is-invalid  @enderror"
                                        id="answers[3]" name="answers[3]" placeholder=" أدخل الأجابة الرابعة     "
                                        value="{{ old('answers.3', isset($question) ? $question->answers[3]->answer ?? null : null) }}">
                                    <input {{(old('correct_answer') == 3  ) ? " checked " : null}}
                                     {{(old('correct_answer') == null ) ? (isset($question) ? (($question->answers[3]->id??null) == $question->correct_answer ? 'checked':null):null) : null}}  type="radio" name="correct_answer" class="check form-check-input p-2"
                                        value="3" id="">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class=" {{(old("type") !== 'correct' && old("type") != null ) ? 'd-none' :null}}
                    {{old("type") == null ? (isset($question) ? ($question->type !== 'correct' ? 'd-none' : null) :'d-none') : null}}" id="correct" role="tabpanel" aria-labelledby="home-tab">
                        <p class="mb-3">قم بتحديد الأجابة الصحيحة </p>
                        <div class="row ">
                            <div class="col-6">
                                <div class="d-flex gap-2 justify-content-center items-center">
                                    <input {{(old('correct') == 0  ) ? " checked " : null}}
                                     {{(old('correct') == null ) ? (isset($question) ? (0 == $question->correct_answer ? 'checked':null):null) : null}}  checked type="radio" name="correct" class="btn-check form-check-input p-2"
                                        value="0" id="correct_">
                                    <label class="btn btn-outline-success" for="correct_">السؤال صحيح</label>
                                    <input {{(old('correct') == 1  ) ? " checked " : null}}
                                     {{(old('correct') == null ) ? (isset($question) ? (1 == $question->correct_answer ? 'checked':null):null) : null}} type="radio" name="correct" class="btn-check form-check-input p-2"
                                        value="1" id="wrong">
                                    <label class="btn btn-outline-danger" for="wrong">السؤال خطاء</label>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <button type="submit" class="submit py-3 r-10">
                @if (isset($question))
                    تعديل
                @else
                    أضافة
                @endif
            </button>
    </div>
@endsection