@extends('layouts.app')

@section('content')

<!-- <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    var i=0; 
    
    var a = '';
$(document).ready(function(){
  $("#newform").click(function(){
    $("#kk").css("height","400px");
    // console.log(i);
        // a = '<form action="{{ route('questions.store') }}" method="POST" ><div class="col-xs-12 col-sm-12 col-md-12"><div class="form-group"><strong class="pull-left">Title:</strong>';
        a = '<div class="col-xs-12 col-sm-12 col-md-12"><div class="form-group"><strong class="pull-left">Title:</strong>';
        // a += "<textarea  name='relatedquestion[title]' class='form-control' placeholder='title'>{{old('relatedquestion.title')}} </textarea></div> </div>";
        a += "<textarea class='form-control' style='height:50px' name='relatedquestion[title]' placeholder='title'>{{old('relatedquestion.title')}}</textarea></div> </div>";
        a += '<div class="col-xs-12 col-sm-12 col-md-12"><div class="form-group"><strong class="pull-left">Description:</strong>';
        // a += "<textarea type='text' name='relatedquestion[description]' class='form-control' placeholder='title'> {{old('relatedquestion.description')}}</textarea></div> </div>";
        a += "<textarea class='form-control' style='height:50px' name='relatedquestion[description]' placeholder='description'>{{old('relatedquestion.description')}}</textarea></div> </div>";
        a += '<div class="col-xs-12 col-sm-12 col-md-12"><div class="form-group"><strong class="pull-left">Score:</strong>';
        // a += "<textarea type='text' name='relatedquestion[score]' class='form-control' placeholder='title'> {{old('relatedquestion.score')}}</textarea></div></div>";
        a += "<textarea class='form-control' style='height:50px' name='relatedquestion[score]' placeholder='score'>{{old('relatedquestion.score')}}</textarea></div></div>";
        a += "<div class='col-xs-12 col-sm-12 col-md-12'><div class='form-group'><strong class='pull-left'>Info:</strong> <textarea class='form-control' style='height:50px' name='relatedquestion[info]' placeholder='optional'>{{old('relatedquestion.info')}}</textarea></div></div>"
    // var
    i++; 
    // ii++;

// height: 400px;overflow: scroll;$("p").css("background-color");

if(i<=1){
    $("#kk").append(a);
}

    
        // <div class="col-xs-12 col-sm-12 col-md-12"> <div class="col-xs-12 col-sm-12 col-md-12"><div class="form-group"><strong class="pull-left">Title:</strong><input type="text" name="relatedquestion[xx]['i+1']" class="form-control" placeholder="title"> </div> </div><div class="col-xs-12 col-sm-12 col-md-12"><div class="form-group"><strong class="pull-left">Description:</strong><textarea class="form-control" style="height:50px" name="relatedquestion[xx]['i+1']" placeholder="description"></textarea></div></div> <div class="col-xs-12 col-sm-12 col-md-12"><div class="form-group"><strong class="pull-left">Score:</strong><textarea class="form-control" style="height:50px" name="relatedquestion[xx]['i+1']" placeholder="score"></textarea></div></div></div>' 

      









        
    
  });
  
});
</script>

<div class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12 margin-tb">
                <div class="plleft">
                    <h2>Add Question</h2>
                </div>
            </div>
        </div>

        @if ($errors->any())
            <div class="alert alert-danger">
                <strong>Whoops!</strong> There were some problems with your input.<br><br>
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
        <form action="{{ route('questions.store') }}" method="POST" >
            @csrf

            <div class="add_question_catagory">
                <div class="row">            
                    <div class="col-xs-12 col-sm-12 col-md-12">
                        <div class="form-group">
                            <strong>Title:</strong>
                            <textarea type="text" name="title" class="form-control" placeholder="title">{{old('title')}}</textarea>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-12">
                        <div class="form-group">
                            <strong>Description:</strong>
                            <textarea class="form-control" style="height:50px" name="description"
                                placeholder="description">{{old('description')}}</textarea>
                        </div>
                    </div> 

                    <div class="col-xs-12 col-sm-12 col-md-12">
                        <div class="form-group">
                            <strong>Score:</strong>
                            <textarea class="form-control" style="height:50px" name="score"
                                placeholder="score">{{old('score')}}</textarea>
                        </div>
                    </div> 
                    <div class="col-xs-12 col-sm-12 col-md-12">
                        <div class="form-group">
                            <strong>Info:</strong>
                            <textarea class="form-control" style="height:50px" name="info"
                                placeholder="optional">{{old('info')}}</textarea>
                        </div>
                    </div>
                                    <div class="col-xs-12 col-sm-12 col-md-12">
                                    <div class="ad_w200">
                                    <div class="form-group">
                                        <label for="usr">Category Selection:</label><br>
                                        @if(count($cat) > 0)
                                            @foreach($cat as $cat)
                                                <div class="checkbox">
                                                    <label><input name="cat" type="radio" value="{{$cat->id}}">{{$cat->title}}</label>
                                                </div>
                                                
                                            @endforeach
                                        @else
                                            <div class="checkbox">
                                                <h4 class="modal-title text-center">No category found !!</h4>
                                            </div>
                                        @endif
                                    </div>
                                    </div>
                                </div>

                                <div class="col-xs-12 col-sm-12 col-md-12">
                        <div class="form-group">
                            <strong>Question Type:</strong><br>
                            <label for="questions"><strong>Choose a Question Type:</strong></label>

                            <select name="q_type" id="questiontype">
                                <option value="direct_ask"> Direct Ask </option>
                                <option value="dont_ask"> Dont Ask </option>
                                <option value="indirect_ask"> Indirect Ask </option>
                            </select>
                        </div>
                        </div>


                         <div class="col-xs-12 col-sm-12 col-md-12 text-right">

                            <div class="pull-left">
                           <strong>Add Related Questions:</strong>
                        </div>

                        
                        <div class="pull-right">
                            
                           <!--  <button type="button" class="btn btn-primary" id="newform" data-toggle="modal" data-target="#exampleModal">Add <span class="material-icons">
playlist_add
</span></button> -->

<button type="button" class="btn btn-primary" id="newform" >Add <span class="material-icons">
playlist_add
</span></button>

              <!--               <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Related Question</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="col-xs-12 col-sm-12 col-md-12">
                        <div class="form-group">
                            <strong class="pull-left">Title:</strong>
                            <input type="text" name="relatedquestiontitle" class="form-control" placeholder="title">
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-12">
                        <div class="form-group">
                            <strong class="pull-left">Description:</strong>
                            <textarea class="form-control" style="height:50px" name="relateddescription"
                                placeholder="description"></textarea>
                        </div>
                    </div> 

                    <div class="col-xs-12 col-sm-12 col-md-12">
                        <div class="form-group">
                            <strong class="pull-left">Score:</strong>
                            <textarea class="form-control" style="height:50px" name="relatedscore"
                                placeholder="score"></textarea>
                        </div>
                    </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save</button>
      </div>
    </div>
  </div>
</div> -->

                        </div>
                    </div>

                    <div class="col-xs-12 col-sm-12 col-md-12 text-right">

                    <div id='kk' style="height: 0px;overflow-y: auto;overflow-x:hidden">
                        </div>
                    </div>
                                       
                    <div class="col-xs-12 col-sm-12 col-md-12 text-right">
                        <div class="pull-left">
                            <a class="btn btn-primary" href="{{ url('questions') }}" title="Go back"> Cancel </a>
                        </div>
                        <div class="pull-right">
                            <button type="submit" class="btn btn-primary">Submit</button>
                        </div>
                    </div>
                </div>
            </div>

        </form>
    </div>
</div>
<!-- <script type="text/javascript">
        $('.checkbox').on('change', function() {
            $('.checkbox').not(this).prop('checked', false);  
        });
    </script> -->

<!-- <script type="text/javascript">
        //Near checkboxes
        $('.checkbox').click(function() {
        $(this).siblings('input:checkbox').prop('checked', false);
    });
    </script> -->

@endsection