@extends('layouts.admin.master')
@section('content')
@php
    $element_counter1 = 0;
@endphp
<div class="container-xxl flex-grow-1 container-p-y">
    @include('common.messages')
    @include('common.errors')
    <!-- Hoverable Table rows -->
    <div class="card">
        <div class="row">
            <div class="col-md-9">                                    
               <!--  <h5 class="card-header">Listing</h5> -->            
            </div>
        </div>

        <!---- Template List Start ---->
        <div class="container">
            <div class="row mb-5">
                <div class="question-submit-form">
                  {!! Form::open([
                          'route' => ['servey.template.save',['question_type'=>$question_type,'id'=>$servey->id]],
                          'method' => 'POST',
                          'name' => 'add_servey_template_form',
                          'id' => 'add_servey_template_form',
                          'autocomplete' => 'off',
                          'enctype' => 'multipart/form-data'
                      ])
                  !!}
                  @if($question_type==1)
                  <div class="smiley-option">
                    <div class="form-check">
                        <input name="image_type" class="form-check-input" type="radio" value="1" id="defaultRadio2" checked="">
                        <label class="form-check-label" for="defaultRadio2">  <img src="{{ asset('admin/images/smile1.png') }}" /> </label>
                      </div>
                      <div class="form-check">
                        <input name="image_type" class="form-check-input" type="radio" value="2" id="defaultRadio2">
                        <label class="form-check-label" for="defaultRadio2"> <img src="{{ asset('admin/images/smile2.png') }}" /> </label>
                      </div>
                       <div class="form-check">
                        <input name="image_type" class="form-check-input" type="radio" value="3" id="defaultRadio2">
                        <label class="form-check-label" for="defaultRadio2"> <img src="{{ asset('admin/images/smile3.jpg') }}" /> </label>
                      </div>
                     </div>
                    @endif 

                    @if($question_type==2)
                    <div class="rating-bar-title"></div>
                     <div class="smiley-option rating-option">
                        <div class="form-check">
                        <input name="image_type" class="form-check-input" type="radio" value="1" id="defaultRadio2">
                        <label class="form-check-label" for="defaultRadio2">  <img src="{{ asset('admin/images/cup.png') }}" /> </label>
                      </div>
                      <div class="form-check">
                        <input name="image_type" class="form-check-input" type="radio" value="2" id="defaultRadio2" >
                        <label class="form-check-label" for="defaultRadio2">  <img src="{{ asset('admin/images/like.png') }}" /> </label>
                      </div>
                      <div class="form-check">
                        <input name="image_type" class="form-check-input" type="radio" value="3" id="defaultRadio2">
                        <label class="form-check-label" for="defaultRadio2">  <img src="{{ asset('admin/images/star-rate.png') }}" /> </label>
                      </div>
                      <div class="form-check">
                        <input name="image_type" class="form-check-input" type="radio" value="4" id="defaultRadio2">
                        <label class="form-check-label" for="defaultRadio2">  <img src="{{ asset('admin/images/correct-sign.png') }}" /> </label>
                      </div>
                   
                    </div>
                     @endif 
                     @if($question_type==4)
                    <div class="rating-bar-title"></div>
                    
                     <div class="scale-option">
                        <div class="form-check">
                        <input name="image_type" class="form-check-input" type="radio" value="1" id="defaultRadio2" checked="">
                        <label class="form-check-label" for="defaultRadio2">  <img src="{{ asset('admin/images/scale3.png') }}" /> </label>
                      </div>
                      <div class="form-check">
                        <input name="image_type" class="form-check-input" type="radio" value="2" id="defaultRadio2">
                        <label class="form-check-label" for="defaultRadio2">  <img src="{{ asset('admin/images/scale4.png') }}" /> </label>
                      </div>
                    
                        <div class="form-check">
                        <input name="image_type" class="form-check-input" type="radio" value="3" id="defaultRadio2">
                        <label class="form-check-label" for="defaultRadio2">  <img src="{{ asset('admin/images/scale5.png') }}" /> </label>
                      </div>
                      <div class="form-check">
                        <input name="image_type" class="form-check-input" type="radio" value="4" id="defaultRadio2">
                        <label class="form-check-label" for="defaultRadio2">  <img src="{{ asset('admin/images/scale6.png') }}" /> </label>
                      </div>
                    
                        <div class="form-check">
                        <input name="image_type" class="form-check-input" type="radio" value="5" id="defaultRadio2">
                        <label class="form-check-label" for="defaultRadio2">  <img src="{{ asset('admin/images/scale2.png') }}" /> </label>
                      </div>
                      <div class="form-check">
                        <input name="image_type" class="form-check-input" type="radio" value="6" id="defaultRadio2">
                        <label class="form-check-label" for="defaultRadio2">  <img src="{{ asset('admin/images/scale1.png') }}" /> </label>
                      </div>
                    </div>
                     @endif 
                    
                     <input type="hidden" value="{{$question_type}}" name="question_type">
                     <div class="question-input bottom-margin">
                          <label for="fname"><strong>Question</strong></label><br>
                         <!--  <input type="text" id="Question" name="question" value=""> -->
                         <input type="text" name="question" class="form-control" id="defaultFormControlInput" placeholder="" aria-describedby="defaultFormControlHelp" value="{{old('question')}}">
                     </div>
                     
                    @if($question_type==1)
                    <!-- Write html code here --->
                    @include('admin.servey.templates.ask_feedback_question_dropdown')

                    @include('admin.servey.templates.positive_questions')
                    @include('admin.servey.templates.negative_questions')
                    

                    @elseif($question_type==2)
                    <!-- Write html code here --->
                    @include('admin.servey.templates.ask_feedback_question_dropdown')
                    @include('admin.servey.templates.positive_questions')
                    @include('admin.servey.templates.negative_questions')

                    @elseif($question_type==3)
                    <div class="rating-bar-title"></div>
                    <div class="multiselector-section">
                        @for($img=1;$img<=4;$img++)
                        @php $response_tone_name = 'response_tone_name'.$img; @endphp
                        <div class="row single-multi-selector">
                            <div class="col-sm-6 single-multi-select-left">
                                <input class="form-control" type="file" id="formFile" name="option{{$img}}">
                            </div>
                            <div class="col-sm-6 single-multi-select-right">
                                {!! Form::select("$response_tone_name", [0 => 'Select Response Tone'] + $question_tones, old('question_tones', (isset($company->question_tones) && $company->question_tones) ? $company->question_tones : ''), ['class' => 'form-select response_tone', 'id' => 'question_tones']) !!}
                                <!--<select id="defaultSelect" class="form-select">
                                  <option>Select Response Tone</option>
                                  <option value="1">Positive</option>
                                  <option value="2">Negative</option>
                                </select>-->
                            </div>
                        </div>
                        @endfor
                    </div>
                    @elseif($question_type==4)
                    
                    @include('admin.servey.templates.ask_feedback_question_dropdown')
                    @include('admin.servey.templates.positive_questions')
                    @include('admin.servey.templates.negative_questions')
                    
                    @elseif($question_type==5 || $question_type==8)
                    <div class="rating-bar-title"></div>
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="form-check form-switch mb-3">
                                <input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" name="other">
                                <label class="form-check-label" for="flexSwitchCheckChecked">Enable 'other' option with manual response</label>
                            <div>
                        </div>
                    </div>
                    <!-- <div class="multiselector-section">
                      @for($opt=1;$opt<=10;$opt++)
                      @php $response_tone_name = 'response_tone_name'.$opt; @endphp
                        <div class="row single-multi-selector">
                            <div class="col-sm-6 single-multi-select-left">
                               <input type="text" name="option{{$opt}}" class="form-control" id="defaultFormControlInput" placeholder="Option {{$opt}}" aria-describedby="defaultFormControlHelp">
                            </div>
                            <div class="col-sm-6 single-multi-select-right">
                            {!! Form::select("$response_tone_name", [0 => 'Select Response Tone'] + $question_tones, old('question_tones', (isset($company->question_tones) && $company->question_tones) ? $company->question_tones : ''), ['class' => 'form-select response_tone', 'id' => 'question_tones']) !!}
                                <!--<select id="defaultSelect" class="form-select">
                                  <option>Select Response Tone</option>
                                  <option value="1">Positive</option>
                                  <option value="2">Negative</option>
                                </select>-->
                            <!-- </div>
                        </div>
                      @endfor
                    </div> -->
                    @include('admin.servey.templates.options')
                    @elseif($question_type==6)
                    <div class="yes-no-que-sec">
                       <div class="rating-bar-title"><h5></h5></div>
                       <div class="yes-no-list">
                        <div class="row">
                          <div class="col-sm-1">
                            <button type="button" class="btn btn-success">Yes</button>
                          </div>
                          <div class="col-sm-6">
                          {!! Form::select("yes_response_tone", [0 => 'Select Response Tone'] + $question_tones, old('question_tones', (isset($company->question_tones) && $company->question_tones) ? $company->question_tones : ''), ['class' => 'form-select response_tone', 'id' => 'question_tones']) !!}
                          </div>
                          <div class="col-sm-5">
                          </div>
                       </div>
                       <div class="row">
                          <div class="col-sm-1">
                            <button type="button" class="btn btn-danger">No</button>
                          </div>
                          <div class="col-sm-6">
                          {!! Form::select("no_response_tone", [0 => 'Select Response Tone'] + $question_tones, old('question_tones', (isset($company->question_tones) && $company->question_tones) ? $company->question_tones : ''), ['class' => 'form-select response_tone', 'id' => 'question_tones']) !!}
                          </div>
                          <div class="col-sm-5">
                          </div>
                       </div>
                    </div>
                    </div>
                    @elseif($question_type==9)
                    @include('admin.servey.templates.options')
                                        <div class="col-md-12">
                      @php
                          $element_counter1 = 0;
                      @endphp
                      <fieldset class="hidden-block scheduler-border">
                        <legend class="scheduler-border">Sub Questions</legend>
                        <div class="table-responsive">
                            <table class="dynamic-table--warpper" style="width:100%;">
                                <thead>
                                    <th>Question</th>
                                    <th></th>
                                </thead>
                                <tbody class="question-list">
                                  <tr class="question-new-item">
                                      <td>
                                          <input type="hidden" class="subquestion_id" name="questions[{{$element_counter1}}][id]" value="">
                                          {!! Form::text("questions[$element_counter1][sub_questions]",'', ['class' => 'form-control sub_questions', 'placeholder' => 'Question','required'=>'required']) !!}
                                      </td>
                                      <td>
                                        <div class="delete-field-block">
                                            <a href="javascript:void(0);"
                                                class="btn btn-remove question-delete-field btn btn-danger" data-toggle="tooltip"
                                                data-placement="bottom"
                                                title="Delete row">
                                                    -
                                            </a>
                                        </div>
                                    </td>
                                  </tr>
                                  @php
                                    $element_counter1++;
                                  @endphp
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <td colspan="3">
                                            <a href="javascript:void(0);" class="btn btn-add add-question btn btn-success" data-toggle="tooltip" data-placement="bottom" title="Add New">+</a>
                                        </td>
                                    </tr>
                                </tfoot>
                            </table>
                          </div>
                      </fieldset>
                    </div>
                    </div>
                    @elseif($question_type==7)
                    @endif 
                    <div class="question-button-setup">
                      <div class="qiestion-submit-btn"> <input type="submit" value="Submit"></div>
                      <div class="qiestion-previous-btn ms-2"> <a class="btn btn-danger" href="{{ route('servey.template.create',$servey->id) }}">Cancel</a></div>
                  </div>
            </form> 
        </div>
            </div>
        </div>
        <!-- Template list end --->
    </div>
    <!--/ Hoverable Table rows -->
</div>
@endsection

@section('scripts2')
<script type="text/javascript">

// addItem = function(element, item, element_counter)
// {
//   var item_template = item.clone();

//   item_template.find(".option_id").attr('name', 'items['+element_counter+'][id]');
//   item_template.find(".option").attr('name', 'items['+element_counter+'][option]');
//   item_template.find(".response_tone").attr('name', 'items['+element_counter+'][response_tone]');
  
//   item_template.find('input').val('');
//   item_template.find(".response_tone").val('');
//   element.append(item_template)
// };

addQuestionItem = function(element, item, element_counter)
{
  var item_template = item.clone();

  item_template.find(".subquestion_id").attr('name', 'questions['+element_counter+'][id]');
  item_template.find(".sub_questions").attr('name', 'questions['+element_counter+'][sub_questions]');
  
  item_template.find('input').val('');
  element.append(item_template)
};

var element_counter1 = "{{ $element_counter1 }}";

////// Add/Remove Options /////
// $(document).on('click', '.add-option', function() {
//       $('.error').text('');
//       var item = $(".option-list").children("tr.new-item:last-child");

//       var has_error = false;

//       item.find('input[type=text]').each(function(){
//           if (! $(this).val()) {
//               $(this).trigger('focus');
//               has_error = true;
//               return false;
//           }
//           has_error = false;
//       });

//       if (! has_error) {
//           $(".error").text("");

//           //addItem($(".option-list"),element_counter)
//           addItem($(".option-list"), item, element_counter);
//           $(".element_counter").val(element_counter);
//           element_counter++;

//       }
// });

// $(document).on('click', '.delete-field', function(e) {
//     e.preventDefault();
//     var item_count = $(this).closest(".option-list").children("tr.new-item").length;

//     if(item_count > 1)
//     {
//         if(confirm('Are you sure?'))
//         {
//             $(this).parents('.new-item').remove();
//         }
//     }
//     else
//     {
//         $(".error").text("You must have to add at least one option.");
//     }
// });

////// Add/Remove Questions /////
$(document).on('click', '.add-question', function() {
      $('.error').text('');
      var item = $(".question-list").children("tr.question-new-item:last-child");

      var has_error = false;

      item.find('input[type=text]').each(function(){
          if (! $(this).val()) {
              $(this).trigger('focus');
              has_error = true;
              return false;
          }
          has_error = false;
      });

      if (! has_error) {
          $(".error").text("");

          //addItem($(".option-list"),element_counter)
          addQuestionItem($(".question-list"), item, element_counter1);
          $(".element_counter").val(element_counter1);
          element_counter1++;

      }
});

$(document).on('click', '.question-delete-field', function(e) {
    e.preventDefault();
    var item_count = $(this).closest(".question-list").children("tr.question-new-item").length;

    if(item_count > 1)
    {
        if(confirm('Are you sure?'))
        {
            $(this).parents('.question-new-item').remove();
        }
    }
    else
    {
        $(".error").text("You must have to add at least one question.");
    }
});

</script>
@endsection