@extends('layouts.app')
<!-- BEGIN CONTENT -->
@section('content')
<div class="page-content-wrapper">
    <!-- BEGIN CONTENT BODY -->
    <div class="top_bar page-content">
        <div class="top_status_bar">
            <div id="top_progress_bar" class="progress_bar">
            </div>
        </div>
        <div class="breadcrumbs">
            <ul>
                <!--<li><a href="{{url('admin/settings')}}">Settings</a></li>-->
                <li><a href="#">Question</a></li>
            </ul>
            <button class="btn btn-large pull-right help theme_btn help_btn">?</button>
        </div>
    </div>
    <div class="page-content">
        <div class="row">
            <div class="col-md-12">
                <div class="portlet">
                    <!-- BEGIN PAGE HEADER-->
                    <div class="portlet-title page_heading">
                        <div class="row">
                            <div class="col-md-9">
                                <div class="caption">
                                    <h2 style="font-weight: 600; margin-top: 0;">Question</h2>
                                    <span class="subtitle">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- BEGIN PAGE BAR -->
                    <div class="row">
                        <div class="col-md-12">
                            <!--THIS IS CONTENT DIV START-->
                            <div class="portlet-body flip-scroll">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="col-md-6 trash ui-droppable">
                                            <div class="new_product_left">
                                                <h4>QUESTION</h4>
                                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua..</p>
                                            </div>
                                        </div>
                                        <div class="col-md-6 new_product_form newProduct_formFiles">
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="col-md-2 no-padding-left">
                                                    </div>
                                                    <div class="col-md-2 no-padding-left">
                                                        <label for="question_type_id">Question Type*</label>
                                                    </label>
                                                    </div>
                                                    <div class="col-md-8 no-padding-left">
                                                        <div class="form-group">
                                                            <select name="question_type_id" class="question_type_id select2 form-control" onchange="questionType(event.target)">
                                                                @foreach($questionTypeArr as $key => $value)
                                                                <option value="{{$key}}">{{$value}}</option>
                                                                @endforeach
                                                            </select>
                                                            <p class="text-danger question_type_id validation_error hidden" style="margin: 0"></p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="add_question_type_field">

                                            </div>
                                            <div class="row" style="    margin-top: 30px;">
                                              
                                            </div>
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="col-md-12 sm-no-padding">
                                                        <button class="btn theme_btn_round pull-right save_new_product" type="button">Save</button>
                                                        <button class="btn action_btn cancel pull-right" type="button"> Cancel </button>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>

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

                            <!--THIS IS CONTENT DIV END-->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- //SWEET_ALERT END// -->
@endsection
@section('admin_css')
<link href="{{asset('assets/global/plugins/select2/css/select2.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('assets/global/plugins/select2/css/select2-bootstrap.min.css')}}" rel="stylesheet" type="text/css" />

<style>
    .dynamic_add_btn{
        display: inline-block;
        padding: 4px 10px;
        margin-bottom: 0;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.42857143;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        -ms-touch-action: manipulation;
        touch-action: manipulation;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        background-image: none;
        border: 1px solid transparent;
        border-radius: 0px;
    }
</style>
@stop
@section('admin_js')
<script src="{{asset('assets/global/plugins/select2/js/select2.min.js')}}" type="text/javascript"></script>

<script type="text/javascript">

  $(document).ready(function () {
      $(".select2").select2({
          placeholder: "--Select--",
          allowClear: true
       });
       
      $('.question_type_id').val(null).trigger('change');
  });

  function questionType(event) {
      $this = $(event);
      if ($this.val() != null) {
          $.ajaxSetup({headers: {'X-CSRF-TOKEN': $('input[name="_token"]').val()}});
          var $post = {};
          $post.question_type_id = $this.val();
          $.ajax({
              url: "{{route('admin.getHtml')}}",
              type: 'POST',
              data: $post,
              cache: false,
              success: function (res) {
                  if (res.status == 200) {
                      console.log(res.message);
                      $(".add_question_type_field").html(res.html);
//                         alertbox('success', res.message);
                  }
                  if (res.status == 300) {
                      $.each(res.errors, function (key, value) {
                          $this.parent().parent().parent().find("p." + key).removeClass("hidden").text(value);
                          titleInput.addClass("error-input-border");
                      });
                  }
                  if (res.status == 400) {
                      alertbox('danger', res.message);
                  }
              },
              error: function (res) {
                  $('.alert_box').fadeIn().delay(2000).fadeOut(200).html('Server not found');
              },
           });
       }else{
           
       }
   }
   
   function addNewOption(event){
       $this = $(event);
       $this.parent().parent().parent().find("p.options").addClass("hidden").text("");
       if($this.hasClass("dynamic_add_btn")){
            var option = $this.parent().parent().find(".option").val();
            if (option.length > 0) {
                 $this.find(".dynamic_add_btn").attr("onclick","");
               $.ajaxSetup({headers: {'X-CSRF-TOKEN': $('input[name="_token"]').val()}});
               var $post = {};
               $post.option = option;
                $.ajax({
                    url: "{{route('admin.newOptionHtml')}}",
                    type: 'POST',
                    data: $post,
                    cache: false,
                    success: function (res) {
                        if (res.status == 200) {
                            console.log(res.message);
                            $(".option_lists").append(res.html);
                            $this.empty();
                            $this.html('<i class="glyphicon glyphicon-minus"></i> Remove');
                            $this.addClass("btn-danger remove-more");
                            $this.find(".dynamic_add_btn").attr("onclick","removeOption(event.target)");
                            $this.find("i").removeClass("btn-success add-more");
                            $this.find("i").addClass("glyphicon-minus remove-more");
                        }
                        if (res.status == 300) {
                            $.each(res.errors, function (key, value) {
                                $this.parent().parent().find("span ."+key).removeClass("hidden").text(value);
                            });
                             $this.find(".dynamic_add_btn").attr("onclick","addNewOption(event.target)");
                        }
                        if (res.status == 400) {
                            alertbox('danger', res.message);
                             $this.find(".dynamic_add_btn").attr("onclick","addNewOption(event.target)");
                        }
                    },
                    error: function (res) {
                        $('.alert_box').fadeIn().delay(2000).fadeOut(200).html('Server not found');
                        $this.find(".dynamic_add_btn").attr("onclick","addNewOption(event.target)");
                    },
                 });
            }else{
                 $this.parent().parent().parent().find("p.options").removeClass("hidden").text("The option field is required");
                 $this.find(".dynamic_add_btn").attr("onclick","addNewOption(event.target)");
            }
       }
   }

</script>
@stop