@extends('layouts.form')

@section('title')
Edit Question
@endsection

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

@section('form-navigation')
<li><a class="text-decoration-none" href="{{ route('allQuestions') }}">{{__('questions.list_questions')}}</a></li>
<li>{{__('questions.edit_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('updateQuestion', $question->id) }}" enctype="multipart/form-data">
    @csrf

    {{-- Questions --}}
    <div class="tab-pane fade show active px-3" id="pills-question-info" role="tabpanel" aria-labelledby="pills-question-info-tab">

        <div class="row">


            <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') ?? $question->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') ?? $question->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') ?? $question->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') ?? $question->question_note_ar }}">
                        </div>
        
        
        
                    </div>
                </div>
            </div>


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

                @foreach (json_decode($question->answers) as $answer)
                <div class="row removeclass{{ $loop->index }} 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[{{ $loop->index }}][answer_index]" value="{{ $answer->answer_index }}">
                    </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[{{ $loop->index }}][answer_text]" value="{{ $answer->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[{{ $loop->index }}][answer_text_ar]" value="{{ $answer->answer_text_ar ?? "" }}">
                    </div>
                    {{-- Upload Image --}}
                    <div class="col-md-2 mt-4">
                        @if ($answer->answer_image !== null)
                        <div class="form-group">
                            <img class="image-fload" width="100%" height="100%" src='{{ asset("uploads/$answer->answer_image") }}'>
                        </div>
                        @else
                        <br>
                        <p class="filelabel">No User Image</p>
                        @endif
                    </div>
                    <div class="col-md-2 mt-4">
                        <label for="image_input{{ $loop->index }}" 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[{{ $loop->index }}][answer_image]" type="file" />
                        </label>
                    </div>
                    <div class="col-md-1 d-flex justify-content-end">
                        <i class="fa-solid fa-minus  icons bg-danger  bg-gradient  text-white " onclick="remove_Anwser('removeclass{{ $loop->index }}');"></i>
                    </div>




                </div>
                @endforeach
                <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>



    <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