@extends('layouts.new-app')
@section('content')
<!-- Bootstrap Select Css -->
<link href="{{ asset('/theme/plugins/bootstrap-select/css/bootstrap-select.css') }}" rel="stylesheet" />
<div class="container-fluid">
    {!! Form::open(['url'=>'/user/questions', 'method'=>'POST']) !!}
    <div class="col-md-12 col-sm-12 col-lg-12">
        <h4>Add new question</h4>
        <div class="row clearfix">
            <div class="col-md-3 form-group">
                <small>Select Chapter *</small>
                {{ Form::select('chapter_id', [''=>'Select Chapter']+$chapters, null, ['class'=>'form-control show-tick', 'required']) }}
            </div>
            <div class="form-group col-md-12">
                <small>Question? *</small>
                {{ form::text('question', null, ['class'=>'form-control', 'required']) }}
            </div>
            <div class="col-md-12" id="optionsDiv">
                <div class="col-md-12">
                    <div class="col-md-9 form-group">
                        <small>Option</small>
                        {{ form::text('options[]', null, ['class'=>'form-control', 'required']) }}
                    </div>
                </div>
            </div>
            <div class="col-md-12">
                <div class="col-md-12">
                    <div class="col-md-9 form-group">
                        <small>Correct Answer</small>
                        {!! Form::selectRange('correct', 1, 4, null, ['class'=>'form-control']) !!}
                    </div>
                </div>
            </div>
            <button class="btn btn-primary btn-sm" type="button" onclick="addOption()">Add Option</button>
            <button class="btn btn-success btn-sm" type="submit">Save Question</button>
        </div>
    </div>
    {!! Form::close() !!}
</div>
<!-- Select Plugin Js -->
<script src="{{ asset('/theme/plugins/bootstrap-select/js/bootstrap-select.js') }}"></script>

<script>
    function addOption() {
        var newOption = '<div class="col-md-12" style="display: flex;">';
                newOption += '<div class="col-md-9 form-group">';
                newOption += '    <small>Option</small>';
                newOption += '    <input class="form-control" required="" name="options[]" type="text">';
                newOption += '    <span class="material-input"></span>';
                newOption += '</div>';
                newOption += '<div class=" col-md-3 form-group">';
                    newOption += '<button class="btn btn-danger btn-sm" type="button" onclick="$(this).parent().parent().remove()">Remove Option</button>';
                newOption += '</div>';
            newOption += '</div>';

        $("#optionsDiv").append(newOption);
    }
</script>
@endsection