@extends('author.dashboard')

@section('title', 'Create Question')

@section('stylesheets')
  <link rel="stylesheet" href="/css/admin/dist/bootvalidation.css">
@endsection

@section('content')

<div class="content-header">
   <h1>
    Dashboard
    <small>OPALESCE Version 1.0</small>
    </h1>
    {!! Breadcrumbs::render('authaddmicroquestions', $microunit) !!}
</div>

<div class="row">
  <div class="col-lg-10 col-lg-offset-1">
    <div class="box box-info">
      <div class="box-header">
        <span class="fa-stack fa-lg text-green">
          <i class="fa fa-circle fa-stack-2x"></i>
          <i class="fa fa-question fa-stack-1x fa-inverse"></i>
        </span>
        <h3 class="box-title">Add Question to Microunit: <span class="text-green text-bold">{{$microunit->muid}}</span></h3>
      </div>
      <div class="errors">
        <div class="col-lg-12">
          @if (count($errors) > 0)
            <div class="alert alert-danger">
              <ul>
                @foreach ($errors->all() as $error)
                  <li>{{ $error }}</li>
                @endforeach
              </ul>
            </div>
          @endif
        </div>
      </div>

      <!-- form start -->
      {!! Form::open(['route'=> ['authpanel.question.store', $microunit->id], 'method'=>'POST', 'class'=> 'form-horizontal']) !!}
        <div class="box-body">
          <input id="microunit_id" name="microunit_id"  type="hidden" value="{{$microunit->id}}">
          <div class="row">
            <div class="col-lg-12">
              <div class="box-body">
                  <div class="col-lg-12">
                    <div class="form-group">
                      {{ Form::label('language_id', 'Language *', [
                        'class'=>'col-lg-1 control-label',
                        'for'=>'validate-language'])
                      }}
                      <div class="input-group col-lg-11">
                        <select class="form-control" name="language_id" id="validate-select" placeholder="Language" required>
                          <option value="">Select Language</option>
                          @foreach ($languages as $language)
                            <option value="{{$language->id}}">{{$language->language}}</option>
                          @endforeach
                        </select>
                        <span class="input-group-addon danger"><span class="glyphicon glyphicon-remove"></span></span>
                      </div>
                    </div>
                  </div>
                  <div class="col-lg-12">
                    <div class="form-group">
                      {{ Form::label('question', 'Question *', ['class'=>'col-lg-1 control-label', 'for'=>'validate-title']) }}
                      <div class="input-group col-lg-11" data-validate="length" data-length="5">
                        {{ Form::text('question', null, array(
                          'class' => 'form-control',
                          'name'=> 'question',
                          'id' => 'validate-text',
                          'placeholder' => 'Question...',
                          'required'=> '',
                          'maxlength'=>'255'))
                        }}
                        <span class="input-group-addon danger"><span class="glyphicon glyphicon-remove"></span></span>
                      </div>
                    </div>
                  </div>
              </div>
            </div>
          </div>

          <div class="row">
            <div class="col-lg-10 col-lg-offset-1">
              <div class="box box-warning">
                <div class="box-header">
                  <span class="fa-stack fa-lg text-orange">
                    <i class="fa fa-circle fa-stack-2x"></i>
                    <i class="fa fa-check fa-stack-1x fa-inverse"></i>
                  </span>
                  <h3 class="box-title">Add Answers to Question</h3>
                </div>
                <div class="box-body">
                  <div id="answer_fields">

                  </div>
                  <div class="row" id="el">
                    <div class="col-lg-8">
                      <div class="form-group">
                        {{ Form::label('answer', 'Answer *', ['class'=>'col-lg-2 control-label', 'for'=>'validate-desc']) }}
                        <div class="input-group col-lg-10">
                          <input type="text" name="qanswer[]" id="qanswerid" class="form-control title">
                        </div>
                      </div>
                    </div>
                    <div class="col-lg-3">
                      <div class="form-group">
                        {{ Form::label('correct', 'Correct', ['class'=>'col-lg-6 control-label', 'for'=>'validate-language']) }}
                        <div class="input-group col-lg-6">
                          <select class="form-control correct" name="qcorrect[]" id="validate-select" placeholder="Status" required>
                            <option value="">Select Option</option>
                              <option value="0">No</option>
                              <option value="1">Yes</option>
                          </select>
                        </div>
                      </div>
                    </div>
                    <div class="col-lg-1">
                      <div class="input-group-btn">
                        <button class="btn btn-success" type="button"  onclick="answer_fields();">
                          <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                        </button>
                      </div>
                    </div>
                  </div>
                </div><!--.row -->
              </div>
            </div>
          </div>
        </div>

          <div class="box-footer">
            <a href="" class="btn btn-danger pull-right">Cancel</a>
            <button type="submit" class="btn btn-success pull-right margin-right-btn">Add</button>
          </div><!-- /.box-footer -->

        </div>
      {!! Form::close() !!}

    </div>
  </div>
</div>
@endsection


@section('javascripts')
  <script src="/js/admin/dist/bootvalidation.js"></script>
  <script type="text/javascript">

  var room = 1;
  function answer_fields()
  {


    room++;
    var objTo = document.getElementById('answer_fields');
    var divtest = document.createElement("div");
    divtest.setAttribute("class", "removeclass"+room);
    var rdiv = 'removeclass'+room;

    divtest.innerHTML = ' <div class="row" id="el"> <div class="col-lg-8"> <div class="form-group">{{Form::label('answer', 'Answer *', ['class'=>'col-lg-2 control-label', 'for'=>'validate-desc'])}}<div class="input-group col-lg-10"> <input type="text" name="qanswer[]" id="qanswerid" class="form-control title"> </div></div></div><div class="col-lg-3"> <div class="form-group">{{Form::label('correct', 'Correct', ['class'=>'col-lg-6 control-label', 'for'=>'validate-language'])}}<div class="input-group col-lg-6"> <select class="form-control correct" name="qcorrect[]" id="validate-select" placeholder="Status" required> <option value="">Select Option</option> <option value="0">No</option> <option value="1">Yes</option> </select> </div></div></div><div class="col-lg-1"> <div class="input-group-btn"> <button class="btn btn-danger" onclick="remove_answer_fields('+ room +');" type="button"> <span aria-hidden="true" class="glyphicon glyphicon-minus"></span> </button> </div></div></div>';

    objTo.appendChild(divtest);


  }

  //remove dynamic row
  function remove_answer_fields(rid)
  {
    $('.removeclass'+rid).remove();
  }

  </script>
@endsection