@extends('layouts.app')
@section('css')


<style>

    .image-option-container {

        flex-direction: column; /* تجعل الخيارات مرتبة عموديًا */
        gap: 10px;
    }
    .image-option {
        width: 100%;
        border: #f2eded  solid 1px
    }
    .image-option input[type="radio"] {
        display: none;
    }
    .image-option img {
        width: 100%; /* تجعل الصورة تأخذ العرض الكامل للحاوية */
        max-height: 300px; /* تحديد الحد الأقصى للارتفاع */
        object-fit: contain; /* الحفاظ على أبعاد الصورة الأصلية */
        border: 2px solid transparent;
        cursor: pointer;
    }
    .image-option input[type="radio"]:checked + img {
        border-color: #ff0000; /* لون الإطار عند التحديد */
    }




</style>
@endsection
@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">
        <div class="alert alert-danger"> الحد الأقصى 10 أسئلة فى المرة الواحدة</div>
        <form id="ajax-form" class="d-flex flex-column gap-4" action="{{ 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"></div>
                <div class=" {{ old('questions') ? 'repeater2' : 'repeater' }}  mt-5">
                    <!-- Title -->
                    <h5 class="mb-0 text-primary">
                        أضافة أسئلة</h5>
                    <!-- Content -->
                    <div class="mt-5" data-repeater-list="questions">
                        <div class="row" data-repeater-item>
                            <div class="col-12" ><button type="button" class="show_bargraph btn btn-primary">اضافة قطعة</button></div>


                                <div class=" col-12 image-option-container d-none">
                                    @foreach ($bargraphs as  $bargraph)
                                    <label class="image-option">
                                        <input type="radio" name="bargraph_id" value="{{ $bargraph->id }}">
                                        <img src="{{ asset($bargraph->path) }}" alt="Image 1">
                                    </label>
                                    @endforeach



                                </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="1" class=" @error('image')  is-invalid  @enderror">

                                    <img style="height:100px;width:auto"
                                        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="1"
                                    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') }}">
                            </div>
                            <div class="col-12 ">
                                <div class="choices {{ old('type') !== 'choices' && old('type') != null ? 'd-none' : null }}"
                                    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=" correct {{ old('type') !== 'correct' && old('type') != null ? 'd-none' : null }}
                    {{ old('type') == null ? (isset($question) ? ($question->type !== 'correct' ? 'd-none' : null) : 'd-none') : null }}"
                                    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="form-check-input p-2"
                                                    value="0" id="correct_">
                                                <label class="" for="correct_">السؤال صحيح</label>
                                                {{-- <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=" form-check-input p-2"
                                                    value="1" id="wrong">
                                                {{-- <label class="btn btn-outline-danger" for="wrong">السؤال خطاء</label> --}}
                                                <label class="" for="wrong">السؤال خطأ</label>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="text-end">

                                <a type="button" style="width:fit-content;" class="float-end m-3" data-repeater-delete=""><i
                                        class="fa fs-5 text-danger fa-trash"></i></a>
                            </div>
                        </div>
                    </div>
                    <div class="text-end mt-5">

                        <button data-num_click="1" onclick="return false" class="btn btn-success add_question float-left " data-repeater-create> سؤال
                            جديد</button>
                        <!-- // Details Widget -->
                    </div>
                </div>

            </div>
            <button type="submit" class="submit submit-form py-3 r-10" id="waituntil">
                @if (isset($question))
                    تعديل
                @else
                    أضافة
                @endif
            </button>
    </div>
@endsection
@section('js')
<script>
$(function(){

    $(document).on("click" , ".show_bargraph",function(){
      $(this).parent().parent().find(".image-option-container").toggleClass("d-none")

    })
})
</script>
@endsection