@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">Create Question</h2>

    <form method="POST" action="{{ route('question.create') }}" enctype="multipart/form-data">
        @csrf
        <input type="hidden" name="category_id" value="{{$category_id}}">
        <div class="form-group row">
            <div class="col-6">
                <h6>Question (English)</h6>
                <textarea rows="2" name="question_en" class="form-control"></textarea>
            </div>
            <div class="col-6">
                <h6>Question (Arabic)</h6>
                <textarea rows="2" name="question_ar" class="form-control"></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"></textarea>
            </div>
            <div class="col-6">
                <h6>Answer (Arabic)</h6>
                <textarea rows="4" name="answer_ar" class="form-control editor2"></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/*">
            </div>
            <div class="col-6">
                <h6>Image (Arabic)</h6>
                <input type="file" name="image_ar" class="form-control" accept="image/*">
            </div>
        </div>
        <button type="submit" class="btn btn-primary">Submit</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>