@include('layouts.main')
<style>
    .hidden {
        display: none;
    }
    input {
        width: 100%;
    }
    .form-group{
        margin-bottom : 10px;
    }
</style>

<div class="container">
    <a href="{{ url()->previous() }}">Back</a>
    <h2 style="text-align: center">Update Question</h2>

    <form method="POST" action="{{ route('question.edit') }}" enctype="multipart/form-data">
        @csrf
        <input type="hidden" name="id" value="{{$question->id}}">

        <div class="form-group row">
            <div class="col-6">
                <h6>Question (English)</h6>
                <textarea rows="2" name="question_en" class="form-control">{{$question->question_en}}</textarea>
            </div>
            <div class="col-6">
                <h6>Question (Arabic)</h6>
                <textarea rows="2" name="question_ar" class="form-control">{{$question->question_ar}}</textarea>
            </div>
        </div>
        <div class="form-group row">
            <div class="col-6">
                <h6>Answer (English)</h6>
                <textarea rows="4" name="answer_en" class="form-control editor">{{$question->answer_en}}</textarea>
            </div>
            <div class="col-6">
                <h6>Answer (Arabic)</h6>
                <textarea rows="4" name="answer_ar" class="form-control editor2">{{$question->answer_ar}}</textarea>
            </div>
        </div>
        <div class="form-group row">
            <div class="col-6">
                <h6>Image (English)</h6>
                <input type="file" name="image_en" class="form-control" accept="image/*">
                @if ($question->image_en)
                    <div>
                        <img src="{{ $question->image_en }}" width="100">
                    </div>
                @endif
            </div>
            <div class="col-6">
                <h6>Image (Arabic)</h6>
                <input type="file" name="image_ar" class="form-control" accept="image/*">
                @if ($question->image_ar)
                    <div>
                        <img src="{{ $question->image_ar }}" width="100">
                    </div>
                @endif
            </div>
        </div>
        <button type="submit" class="btn btn-primary">Update</button>
        <button type="reset" class="btn btn-warning">Cancel</button>
    </form>
</div>
<script src="https://cdn.ckeditor.com/ckeditor5/39.0.1/classic/ckeditor.js"></script>
<script>
    ClassicEditor
        .create(document.querySelector('.editor'))
        .then(editor => {
            editor.ui.view.editable.element.style.minHeight = '300px'; // ← change this value as needed
        })
        .catch(error => console.error(error));
    ClassicEditor
        .create(document.querySelector('.editor2'), {
            language: 'ar' // Set the interface to Arabic
        })
        .then(editor => {
            editor.ui.view.editable.element.style.minHeight = '300px'; // ← change this value as needed
            editor.ui.view.editable.element.dir = 'rtl';
            editor.ui.view.editable.element.style.textAlign = 'right';
        })
        .catch(error => console.error(error));
</script>