@extends('layouts.app')
@section('content')

<script>
    $(document).ready(function() {

        ClassicEditor.create(document.querySelector('#question'))
            .then(editor => {
                console.log(editor);
            }).catch(error => {
                console.error(error);
            });

    });
</script>

<div class="row">
    <div class="col-sm-3">
        @include('side_menu')
    </div>
    <div class="col-sm-9">
        <div class="row">
            <div class="col-sm-12 add-container">
                <form action="/questionnaire/save" method="post" class="add-form">
                    <div class="container">
                        <div class="row">
                            @csrf
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label for="category_id">Category (Leave Blank to Apply to All)</label>
                                    <select class="form-control @error('category_id') is-invalid @enderror" id="category_id" name="category_id">
                                        <option value="">Select Category</option>
                                        @foreach($categories as $category)
                                        <option value="{{$category->category_id}}">{{$category->category_name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label for="sub_category_id">Sub Category (Leave Blank to Apply to All)</label>
                                    <select class="form-control @error('sub_category_id') is-invalid @enderror" id="sub_category_id" name="sub_category_id">
                                        <option value="">Select Sub Category</option>
                                        @foreach($sub_categories as $sub_category)
                                        <option value="{{$sub_category->sub_category_id}}">{{$sub_category->sub_category_name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label for="questionnaire_part_id">Questionnaire Part</label>
                                    <select class="form-control @error('questionnaire_part_id') is-invalid @enderror" id="questionnaire_part_id" name="questionnaire_part_id">
                                        <option value="">Select Questionnaire Part</option>
                                        @foreach($questionnaire_parts as $part)
                                        <option value="{{$part->questionnaire_part_id}}">{{$part->part_name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label for="questionnaire_section_id">Questionnaire Section</label>
                                    <select class="form-control @error('questionnaire_section_id') is-invalid @enderror" id="questionnaire_section_id" name="questionnaire_section_id">
                                        <option value="">Select Questionnaire Section</option>
                                        @foreach($questionnaire_sections as $section)
                                        <option value="{{$section->questionnaire_section_id}}">{{$section->section_name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label for="question_no">Question Number</label>
                                    <input type="number" class="form-control @error('question_no') is-invalid @enderror" id="question_no" name="question_no" placeholder="Question Number" value="">
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label for="question">Main Question Body</label>
                                    <textarea id="question" name="question" cols="20" rows="30"></textarea>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label for="feedback" style="padding: 0px 6px;">Include Feed Back under Main Question?</label>
                                    <input type="radio" name="feedback" value="1">Yes
                                    <input type="radio" name="feedback" value="0">No
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label for="include_checkbox_options" style="padding: 0px 6px;">Include Checkbox Options under Main Question?</label>
                                    <input type="radio" name="include_checkbox_options" onchange="checkCheckboxOption()" value="1">Yes
                                    <input type="radio" name="include_checkbox_options" onchange="checkCheckboxOption()" value="0">No
                                </div>
                            </div>
                        </div>

                        <div class="row" id="checkbox_options_div">
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label for="checkbox_options">Checkbox Options (Comma Separated)</label>
                                    <input type="text" class="form-control @error('checkbox_options') is-invalid @enderror" id="checkbox_options" name="checkbox_options" placeholder="Checkbox Options" value="">
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label for="include_dropdown_options" style="padding: 0px 6px;">Include Drop Down Options under Main Question?</label>
                                    <input type="radio" name="include_dropdown_options" onchange="checkDropdownOption()" value="1">Yes
                                    <input type="radio" name="include_dropdown_options" onchange="checkDropdownOption()" value="0">No
                                </div>
                            </div>
                        </div>

                        <div class="row" id="dropdown_options_div">
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label for="question">Drop Down Options (Comma Separated)</label>
                                    <input type="text" class="form-control @error('dropdown_options') is-invalid @enderror" id="dropdown_options" name="dropdown_options" placeholder="Drop Down Options" value="">
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label for="needs_upload" style="padding: 0px 6px;">Include File Upload Option under Main Question?</label>
                                    <input type="radio" name="needs_upload" value="1">Yes
                                    <input type="radio" name="needs_upload" value="0">No
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label for="include_answers_table" style="padding: 0px 6px;">Include an Answers Table under Main Question?</label>
                                    <input type="radio" name="include_answers_table" onchange="checkAnswersTable()" value="1">Yes
                                    <input type="radio" name="include_answers_table" onchange="checkAnswersTable()" value="0">No
                                </div>
                            </div>
                        </div>

                        <div class="row" id="table_no_div">
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label for="table_no">Table No.</label>
                                    <input type="number" class="form-control @error('table_no') is-invalid @enderror" id="table_no" name="table_no" placeholder="Table Number" value="">
                                </div>
                            </div>
                        </div>

                        <div class="row" id="table_title_div">
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label for="table_title">Table Title</label>
                                    <input type="text" class="form-control @error('table_title') is-invalid @enderror" id="table_title" name="table_title" placeholder="Table Title" value="">
                                </div>
                            </div>
                        </div>

                        <div class="row" id="table_html_div">
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label for="table_html">Answers Table HTML Script (Be Careful with Your Unique IDs)</label>
                                    <textarea id="table_html" name="table_html" cols="20" rows="15" style="width: 100%;"></textarea>
                                </div>
                            </div>
                        </div>

                        <div class="row" id="table_js_div">
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label for="table_js">Answers Table Javascript If Applicable</label>
                                    <textarea id="table_js" name="table_js" cols="20" rows="15" style="width: 100%;"></textarea>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-sm-9">
                                <button type="submit" class="btn btn-primary bt-margin">Save</button>
                            </div>
                        </div>

                    </div>
                </form>
            </div>
        </div>

        <div class="container">
            <div class="row search-mg">
                <div class="col-md-3" style="padding: 0;">
                    <a href="/questionnaire/preview">
                        <button class="btn search-bt" style="padding: 2px 10px;background: #9E0811;border-color:#9E0811">Preview Questionnaire</button>
                    </a>
                </div>
                <div class="col-md-9">
                    <button class="btn float-right search-bt" onclick="searchQuestionnaire()">Search</button>
                    <input type="text" class="form-control float-right search-txt" id="search-questionnaire" name="search-questionnaire" placeholder="Search" />
                </div>
            </div>
            <div class="row t-header">
                <div class="col-3">Part</div>
                <div class="col-3">Section</div>
                <div class="col-3">Number</div>
                <div class="col-3"></div>
            </div>
            <div id="questionnaires-data">
                @foreach ($questionnaires as $questionnaire)
                <div class="row t-content">
                    <div class="col-3">
                        {{ $questionnaire->questionnairePart->part_name }}
                    </div>
                    <div class="col-3">
                        {{ $questionnaire->questionnaireSection->section_name }}
                    </div>
                    <div class="col-3">
                        {{ $questionnaire->question_no }}
                    </div>
                    <div class="col-3 edit-butts">
                        <span>
                            <a href="/questionnaire/view/{{$questionnaire->questionnaire_id}}">
                                <button class="btn quiz-butt">
                                    Open
                                </button>
                            </a>
                        </span>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>
</div>

</div>
@endsection