@extends('layouts.form')

@section('title')
Add Question
@endsection

@section('form-title')
{{__('questions.add_question')}}
@endsection

@section('form-navigation')
<li><a class="text-decoration-none" href="{{ route('allQuestions') }}">{{__('questions.list_questions')}}</a></li>
<li>{{__('questions.add_question')}}</li>
@endsection

@section('form-tabs-li')
<li class="nav-item" role="presentation">
    <button class="nav-link active" id="english-tab" data-bs-toggle="tab" data-bs-target="#english" type="button" role="tab" aria-controls="english" aria-selected="true">English</button>
</li>
<li class="nav-item" role="presentation">
    <button class="nav-link" id="arabic-tab" data-bs-toggle="tab" data-bs-target="#arabic" type="button" role="tab" aria-controls="arabic" aria-selected="false">العربي</button>
</li>
@endsection
@section('form-tabs-content')
<form method="POST" action="{{ route('storeQuestion') }}" enctype="multipart/form-data">
    @csrf

    <div class="tab-content" id="myTabContent">
        <div class="tab-pane fade show active" id="english" role="tabpanel" aria-labelledby="english-tab">
            {{-- Questions --}}

            <div class="row">

                {{-- Question Title --}}
                <div class="form-group mt-4">
                    <label for="question_title">Question Title</label>
                    <textarea type="text" class="form-control" id="question_title" aria-describedby="nameHelp" placeholder="Question Title" name="question_title" rows="5" required>{{old('question_title')}}</textarea>
                </div>

                {{-- Question Note --}}
                <div class="form-group mt-4">
                    <label for="question_note">Question Note</label>
                    <input type="text" class="form-control" id="question_note" aria-describedby="question_note" placeholder="Question Note" name="question_note" value="{{old('question_note')}}">
                </div>


            </div>

        </div>
        <div class="tab-pane fade" id="arabic" role="tabpanel" aria-labelledby="arabic-tab">
            <div class="row">

                {{-- Question Title --}}
                <div class="form-group mt-4">
                    <label for="question_title_ar">عنوان السؤال</label>
                    <textarea type="text" class="form-control" id="question_title_ar" aria-describedby="nameHelp" placeholder="عنوان السؤال" name="question_title_ar" rows="5" required>{{old('question_title_ar')}}</textarea>
                </div>

                {{-- Question Note --}}
                <div class="form-group mt-4">
                    <label for="question_note_ar">ملاحظة السؤال</label>
                    <input type="text" class="form-control" id="question_note_ar" aria-describedby="question_note_ar" placeholder="ملاحظة السؤال" name="question_note_ar" value="{{old('question_note_ar')}}">
                </div>



            </div>
        </div>
    </div>
    {{-- Answers --}}
    <div class="w-100 " id="Answar">

        <div class="row align-items-center answer-row">

            <div class="col-md-1 mt-4">
                <label for="index">Index</label>
                <input type="number" class="form-control" id="index" placeholder="index" name="answers[0][answer_index]" value="1">
            </div>
            <div class="col-md-3 mt-4">
                <label for="answers">Answers</label>
                <input type="text" class="form-control" id="answers" placeholder="Answers" name="answers[0][answer_text]">
            </div>
            <div class="col-md-3 mt-4">
                <label for="answers">الاجابه</label>
                <input type="text" class="form-control" id="answers" placeholder="الاجابه" name="answers[0][answer_text_ar]">
            </div>

            <div class="col-md-3 mt-4">
                <label for="image_input" class="form-label filelabel">
                    <i class="fa fa-paperclip">
                    </i>
                    <span class="title">
                        Upload Image
                    </span>
                    <input class="FileUpload1 form-control" id="image_input" name="answers[0][answer_image]" type="file" />
                </label>
            </div>
            <div class="col-md-1 d-flex justify-content-end">
                <i class="fa-regular fa-plus  icons bg-success text-white" onclick="addAnswer();"></i>
            </div>
        </div>
    </div>

    <div class="col-12 mt-4">
        <button class="btn btn-outline-primary" type="submit">{{__('questions.save')}}</button>
    </div>
</form>
@endsection
@section('scripts')
<Script src="{{asset('js/questionForm.js')}}"></Script>
@endsection