@extends('web.layouts.container')
@section('css')
    <link rel="stylesheet" href="{{ asset('assets/web/css/lib/toastr.css') }}" />
@endsection
@section('content')
    <div class="quiz_add_content">
        <div class="container my-5">
        <div class="ques_add">
        <form class="form-row add_question_form form" method="post" action="{{route('instructor.addTestQuestion')}}" enctype="multipart/form-data">
            @csrf
            <div class="form-group col-lg-6">
                <label>{{__('electronicTestQuestions.test_name') }}</label>
                <select name="electronic_test_id" class="form-control custom-select">
                    <option value="">{{ __('electronicTestQuestions.test_name') }}</option>
                    @foreach($electronicTests as $electronicTest)
                        <option {{ ($electronicTestQuestion->electronic_test_id ?? session('electronic_test_id')) == $electronicTest->id ? 'selected' : '' }} value="{{$electronicTest->id}}">{{$electronicTest->name}}</option>
                    @endforeach
                </select>
            </div>
            <div class="form-group col-lg-6">
                <label>{{__('electronicTestQuestions.question_type') }}</label>
                <select name="type" class="form-control question_type_selection custom-select">
                    <option value="">{{__('electronicTestQuestions.question_type') }}</option>
                    <option selected value="question_with_text">{{__('electronicTestQuestions.question_with_text') }}</option>
                    <option value="question_with_image">{{__('electronicTestQuestions.question_with_image') }}</option>
                </select>
            </div>

            <div class="card col-md-12">
                <div class="card-body question_container">
                    <div class="deleted_container">
                        <div class="d-flex justify-content-end">
                            <span class="delete_question cls">
                                <i class="fas fa-times"></i>
                            </span>
                        </div>
                        <h5>سؤال نصي</h5>
                        <div class="form-group">
                            <p>نص السؤال</p>
                            <input type="text" name="question" class="form-control" placeholder="أكتب هنا ... " value="{{$electronicTestQuestion->question ?? null}}">
                        </div>
                        <div class="add_answers">
                            <p>الأجابات</p>
                             <div class="custom-control custom-radio mb-3 my_answer">
                                    <input checked type="radio" id="ans_1" value="1" name="right_answer" class="custom-control-input">
                                    <label class="custom-control-label d-flex align-items-center" for="ans_1">
                                        <input type="text" name="answers[]" class="form-control" placeholder="أضف الإجابة">
                                        <a href="#" class="text-danger delete_answer_link mr-2"><i class="fas fa-times fa-2x"></i></a>
                                    </label>
                                </div>
                             <div class="custom-control custom-radio mb-3 my_answer">
                                <input type="radio" id="ans_2" value="2" name="right_answer" class="custom-control-input">
                                <label class="custom-control-label d-flex align-items-center" for="ans_2">
                                    <input type="text" name="answers[]" class="form-control" placeholder="أضف الإجابة">
                                    <a href="#" class="text-danger delete_answer_link mr-2"><i class="fas fa-times fa-2x"></i></a>
                                </label>
                             </div>
                        </div>
                        <div class="form-group mb-3">
                            <a href="#" class="butn color text-light w-100 add_answer_link"><i class="fa fa-plus"></i></a>
                        </div>
                        <div class="add_how_answer mt-4">
                            <h5>{{ __('electronicTestQuestions.solve_method') }}</h5>
                            <!-- -------- new -------- -->
{{--                            <div class="form-group mt-4">--}}
{{--                                <p>من فضلك اختر طريقه الحل فيديو او صوره </p>--}}
{{--                                <select class="form-control custom-select">--}}
{{--                                    <option value="1">أضافة فيديو  </option>--}}
{{--                                    <option value="2">أضافة صوره </option>--}}
{{--                                </select>--}}
{{--                            </div>--}}
                            <!------- end -------->
                            <div class="form-group">
                                <p>{{ __('electronicTestQuestions.add_video_link') }}</p>
                                <input type="url" name="question_solve_video" class="form-control" placeholder="أكتب هنا ... " value="{{ $electronicTestQuestion->question_solve_video ?? ''}}">
                            </div>
                            <!--<div class="form-group col-lg-12">-->
                            <!--    <label>{{ __('electronicTestQuestions.upload_image') }} </label>-->
                            <!--    <div class="form-group up_group">-->
                            <!--        <p>رفع صوره الأختبار </p>-->
                            <!--        <input type="file" name="question_solve_image" class="file">-->
                            <!--        <div class="input-group">-->
                            <!--            <span class="input-group-append">أضغط لرفع الصوره </span>-->
                            <!--            <input type="text" class="input_ques" disabled placeholder="Upload File" aria-label="Upload File" aria-describedby="basic-addon1">-->
                            <!--        </div>-->
                            <!--    </div>-->
                            <!--</div>-->

                            <!-- -------- new -------- -->
                            <div class="add_img apload_car_parts col-12 p-0 form-group">
                                <p>أضف صورة </p>
                                <div class="items_part">
                                    <div class="input-field">
                                        <div class="input-images">
                                        </div>
                                        <img src="{{ asset('assets/web/images/upload.png') }}" alt="" class="icon">
                                    </div>
                                    <h6>قم برفع صوره الأجابة </h6>
                                </div>
                            </div>
                            <!---------- end --------->
                        </div>
                    </div>
                </div>
            </div>

            <div class="text-center mt-5 col-12">
                <button class="butn color add_question_button btn-block"><span>{{ __('dashboard.save') }}</span></button>
            </div>
        </form>

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

@endsection

@section('inner_js')
    <script src="{{ asset('assets/web/js/lib/toastr.min.js') }}"></script>
    <script>
        let getTestQuestionTypeRoute = "{{route('instructor.getTestQuestionType')}}";
    </script>
    <script src="{{ asset('assets/web/js/instructors.test_question_form.js') }}"></script>

    <script>
        // ------------ upload image ------------
        $('.input-images').imageUploader({
        imagesInputName: 'question_solve_image',
        });
    </script>

@endsection