@extends('theme.master')
@section('title', 'Create Faculty Questions')
<style>
    .custom-dropdown {
        height: 50px !important;
        padding: 10px !important;
    }
    .error {
        color: red;
    }
</style>
@section('content')

    @include('admin.message')
    <section id="blog-home" class="blog-home-main-block profile_had">
        <div class="container">
            <h1 class="blog-home-heading text-white">Create Questions</h1>
        </div>
    </section>
    <section class="profile-item-block homepad p-5">
        <div class="container">
            <div class="row">
                <!--@include('faculty.sidebar')-->
                <div class="col-xl-9 col-lg-8">
                    <form action="{{ route('faculty.upload_question.store') }}" method="post" enctype="multipart/form-data">
                        @csrf
                        <div class="row" id="row_1">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <b class="control-label">Category:</b><span class="error">*</span>
                                    <select class="form-control" name="type">
                                        @php
                                        $question_bank_categorys = DB::table('question_bank_category')->get();
                                        @endphp
                                        @foreach($question_bank_categorys as $this_qcat)
                                            <option value="{{ $this_qcat->id }}">{{ $this_qcat->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4 d-none">
                                <div class="form-group">
                                    <b class="control-label">Type:</b><span class="error">*</span>
                                    <select class="form-control" name="editor_type">
                                        @php
                                        $question_bank_categorys = DB::table('question_bank_category')->get();
                                        @endphp
                                        @foreach($question_bank_categorys as $this_qcat)
                                            <optgroup label="{{ $this_qcat->name }}">
                                                @php
                                                $question_bank_subcategory = DB::table('question_bank_subcategory')->where('cat_id', $this_qcat->id)->get();
                                                @endphp
                                                @foreach($question_bank_subcategory as $this_qsat)
                                                    <option value="{{ $this_qsat->id }}">{{ $this_qsat->name }}</option>
                                                @endforeach
                                            </optgroup>
                                        @endforeach
                                        @php
                                        $question_bank_subcategory2 = DB::table('question_bank_subcategory')->where('cat_id', 0)->get();
                                        @endphp
                                        @foreach($question_bank_subcategory2 as $this_qsat)
                                            <option value="{{ $this_qsat->id }}">{{ $this_qsat->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row" id="row_1">
                            <div class="col-md-12" style="background: rgba(80, 111, 228, 0.1);">
                                <b>Add Question: 1</b><span class="error">*</span>
                            </div>
                            <div class="col-md-4 mb-2">
                                <div class="form-group">
                                    <b class="control-label">Question:</b><span class="error">*</span>
                                    <textarea class="form-control description" name="question[1]" minlength="5"></textarea>
                                </div>
                            </div>
                            <div class="col-md-4 mb-2">
                                <div class="form-group">
                                    <b class="control-label">Option A:</b><span class="error">*</span>
                                    <textarea class="form-control description" name="a[1]" minlength="5"></textarea>
                                </div>
                            </div>
                            <div class="col-md-4 mb-2">
                                <div class="form-group">
                                    <b class="control-label">Option B:</b><span class="error">*</span>
                                    <textarea class="form-control description" name="b[1]" minlength="5"></textarea>
                                </div>
                            </div>
                            <div class="col-md-4 mb-2">
                                <div class="form-group">
                                    <b class="control-label">Option C:</b><span class="error">*</span>
                                    <textarea class="form-control description" name="c[1]"></textarea>
                                </div>
                            </div>
                            <div class="col-md-4 mb-2">
                                <div class="form-group">
                                    <b class="control-label">Option D:</b><span class="error">*</span>
                                    <textarea class="form-control description" name="d[1]"></textarea>
                                </div>
                            </div>
                            <div class="col-md-4 mb-2">
                                <div class="form-group">
                                    <b class="control-label">Solution:</b><span class="error">*</span>
                                    <textarea class="form-control description" name="solution[1]"></textarea>
                                </div>
                            </div>
                            <div class="col-md-4 mb-2">
                                <div class="form-group">
                                    <b class="control-label">Correct Answer:</b><span class="error">*</span>
                                    <select name="answer[1]" class="form-control custom-dropdown">
                                        <option value="A">A</option>
                                        <option value="B">B</option>
                                        <option value="C">C</option>
                                        <option value="D">D</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <br>
                        <div class="add"></div>
                        <div class="row">
                            <div>
                                <button type="submit" class="btn btn-danger text-capitalize font-size-15 border-0 line-hight-1">{{ __('adminstaticword.Save') }}</button>
                            </div>
                            <div class="col-md-6">
                                <button class="btn btn-danger p-2 text-capitalize font-size-15 border-0 line-hight-1" type="button" id="addrow">Add More Questions</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('custom-script')
<script>
    tinymce.init({
        selector: '.description',
        mode: "exact",
        height: "220",
    });

    var count = 2;
    $("#addrow").on("click", function() {
        var detailRow = '';
        detailRow += '<div class="row" id="row_' + count + '">';
        detailRow += '<div class="col-md-10" style="background: rgba(80, 111, 228, 0.1);"><b>Add Question: ' + count + '</b><span class="error">*</span></div>';
        detailRow += '<div><button class="btn btn-danger-rgba" type="button" onclick="remove(' + count + ')">Remove</button></div>';
        detailRow += '<div class="col-md-4 mb-2"><div class="form-group"><b class="control-label">Question:</b><span class="error">*</span><textarea class="form-control description" id="question_' + count + '" name="question[' + count + ']"></textarea></div></div>';
        detailRow += '<div class="col-md-4 mb-2"><div class="form-group"><b class="control-label">Option A:</b><span class="error">*</span><textarea class="form-control description" id="a_' + count + '" name="a[' + count + ']"></textarea></div></div>';
        detailRow += '<div class="col-md-4 mb-2"><div class="form-group"><b class="control-label">Option B:</b><span class="error">*</span><textarea class="form-control description" id="b_' + count + '" name="b[' + count + ']"></textarea></div></div>';
        detailRow += '<div class="col-md-4 mb-2"><div class="form-group"><b class="control-label">Option C:</b><span class="error">*</span><textarea class="form-control description" id="c_' + count + '" name="c[' + count + ']"></textarea></div></div>';
        detailRow += '<div class="col-md-4 mb-2"><div class="form-group"><b class="control-label">Option D:</b><span class="error">*</span><textarea class="form-control description" id="d_' + count + '" name="d[' + count + ']"></textarea></div></div>';
        detailRow += '<div class="col-md-4 mb-2"><div class="form-group"><b class="control-label">Solution:</b><span class="error">*</span><textarea class="form-control description" id="solution_' + count + '" name="solution[' + count + ']"></textarea></div></div>';
        detailRow += '<div class="col-md-4 mb-2"><div class="form-group"><b class="control-label">Correct Answer:</b><span class="error">*</span><select name="answer[' + count + ']" class="form-control custom-dropdown"><option value="A">A</option><option value="B">B</option><option value="C">C</option><option value="D">D</option></select></div></div>';
        detailRow += '</div><br><br>';
        $('.add').append(detailRow);
        tinymce.init({
            selector: '#question_' + count,
            mode: "exact",
            height: "220",
        });
        tinymce.init({
            selector: '#a_' + count,
            mode: "exact",
            height: "220",
        });
        tinymce.init({
            selector: '#b_' + count,
            mode: "exact",
            height: "220",
        });
        tinymce.init({
            selector: '#c_' + count,
            mode: "exact",
            height: "220",
        });
        tinymce.init({
            selector: '#d_' + count,
            mode: "exact",
            height: "220",
        });
        tinymce.init({
            selector: '#solution_' + count,
            mode: "exact",
            height: "220",
        });
        count++;
    });

    function remove(rowId) {
        $('#row_' + rowId).remove();
    }
</script>
@endsection