@extends('layouts.admin.master')
@section('content')
@php
    $element_counter = 0;
    $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.update',['question_type'=>$details[0]['question_type'],'id'=>$details[0]['id'],'servey_id'=>$details[0]['servey_id']]],
                          'method' => 'POST',
                          'name' => 'add_servey_template_form',
                          'id' => 'add_servey_template_form',
                          'autocomplete' => 'off',
                          'enctype' => 'multipart/form-data'
                      ])
                  !!}
                  @if($details[0]['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" {{ ($details[0]['icon_type']==1) ? '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" {{ ($details[0]['icon_type']==2) ? 'checked' : '' }}>
                        <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" {{ ($details[0]['icon_type']==3) ? 'checked' : '' }}>
                        <label class="form-check-label" for="defaultRadio2"> <img src="{{ asset('admin/images/smile3.jpg') }}" /> </label>
                      </div>
                     </div>
                    @endif 

                    @if($details[0]['question_type']==2)
                    <div class="rating-bar-title"><h5>Rating Bar</h5></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" {{ ($details[0]['icon_type']==1) ? 'checked' : '' }}>
                        <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" {{ ($details[0]['icon_type']==2) ? 'checked' : '' }}>
                        <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" {{ ($details[0]['icon_type']==3) ? 'checked' : '' }}>
                        <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" {{ ($details[0]['icon_type']==4) ? 'checked' : '' }}> 
                        <label class="form-check-label" for="defaultRadio2">  <img src="{{ asset('admin/images/correct-sign.png') }}" /> </label>
                      </div>
                   
                    </div>
                     @endif 
                     @if($details[0]['question_type']==4)
                    <div class="rating-bar-title"><h5>Scale</h5></div>
                     <div class="scale-option">
                        <div class="form-check">
                        <input name="image_type" class="form-check-input" type="radio" value="1" id="defaultRadio2" {{ ($details[0]['icon_type']==1) ? '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" {{ ($details[0]['icon_type']==2) ? 'checked' : '' }}>
                        <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" {{ ($details[0]['icon_type']==3) ? 'checked' : '' }}>
                        <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" {{ ($details[0]['icon_type']==4) ? 'checked' : '' }}>
                        <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" {{ ($details[0]['icon_type']==5) ? 'checked' : '' }}>
                        <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" {{ ($details[0]['icon_type']==6) ? 'checked' : '' }}>
                        <label class="form-check-label" for="defaultRadio2">  <img src="{{ asset('admin/images/scale1.png') }}" /> </label>
                      </div>
                    </div>
                     @endif 
                    
                     <input type="hidden" value="{{$details[0]['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="{{$details[0]['question']}}">
                     </div>
                     
                    @if($details[0]['question_type']==1)
                    <!-- Write html code here --->
                    @include('admin.servey.templates.view_feedback_questions')
                    

                    @elseif($details[0]['question_type']==2)
                    <!-- Write html code here --->
                    @include('admin.servey.templates.view_feedback_questions')

                    @elseif($details[0]['question_type']==3)
                    <div class="rating-bar-title"><h5>Upload Image</h5></div>
                    <div class="multiselector-section">
                        @php //echo '<pre>';print_r($details[0]['options']); echo '</pre>'; exit; @endphp
                        @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}}">
                                @if(isset($details[0]['options'][$img-1]))
                                <a class="" href="{{url($details[0]['options'][$img-1]['options'])}}" target="_blank"> Image {{$img}}</a>
                                @endif
                            </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($details[0]['options'][$img-1])) ? $details[0]['options'][$img-1]['response_tone'] : ''), ['class' => 'form-select response_tone', 'id' => 'question_tones']) !!}
                            </div>
                        </div>
                        @endfor
                    </div>
                    @elseif($details[0]['question_type']==4)
                    
                    @include('admin.servey.templates.view_feedback_questions')
                    
                    @elseif($details[0]['question_type']==5 || $details[0]['question_type']==8)
                    <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" @if($details[0]['other']==1) checked @endif>
                                <label class="form-check-label" for="flexSwitchCheckChecked">Enable 'other' option with manual response</label>
                            <div>
                        </div>
                    </div>
                    <div class="rating-bar-title"><h5>Create Options</h5></div>
                    @include('admin.servey.templates.options')
                    <!--<div class="multiselector-section">
                      @php $inc=0; @endphp
                      @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-5 single-multi-select-left">
                               <input type="text" name="option{{$opt}}" class="form-control" id="defaultFormControlInput" placeholder="Option {{$opt}}" value="{{$details[0]['options'][$opt-1]['options'] ?? ''}}" aria-describedby="defaultFormControlHelp">
                            </div>
                            <div class="col-sm-5 single-multi-select-right">
                            {!! Form::select("$response_tone_name", [0 => 'Select Response Tone'] + $question_tones, old('question_tones', (isset($details[0]['options'][$opt-1]) && $details[0]['options'][$opt-1]) ? $details[0]['options'][$opt-1]['response_tone'] : ''), ['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>
                            @if(isset($details[0]['options'][$inc]) && !empty($details[0]['options'][$inc]))
                            <div class="col-sm-2 single-multi-select-right">
                              <a href="{{ route('servey.template.delete_option',$details[0]['options'][$inc]['id'] ?? '') }}" class="btn btn-primary btn-md">Delete</a>
                            </div>
                            @endif
                        </div>
                      @endfor
                    </div> -->
                    @elseif($details[0]['question_type']==6)
                    <div class="yes-no-que-sec">
                       <div class="rating-bar-title"><h5>Yes / No Question </h5></div>
                       <div class="yes-no-list">
                       @if(!empty($details[0]['options']))
                       @foreach($details[0]['options'] as $k=>$opt)
                        @if($opt['option_id']==1)
                        <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($opt['response_tone']) && $opt['response_tone']) ? $opt['response_tone'] : ''), ['class' => 'form-select response_tone', 'id' => 'question_tones']) !!}
                          </div>
                          <div class="col-sm-5">
                          </div>
                       </div>
                       @endif

                       @if($opt['option_id']==2)
                       <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($opt['response_tone']) && $opt['response_tone']) ? $opt['response_tone'] : ''), ['class' => 'form-select response_tone', 'id' => 'question_tones']) !!}
                          </div>
                          <div class="col-sm-5">
                          </div>
                       </div>
                       @endif
                       @endforeach
                    @endif
                    </div>
                    </div>
                    @elseif($details[0]['question_type']==9)
                    <!--<div class="row">
                      <div class="col-md-12">
                      @php
                          $element_counter = 0;
                      @endphp
                      <fieldset class="hidden-block scheduler-border">
                        <legend class="scheduler-border">Options</legend>
                        <div class="table-responsive">
                            <table class="dynamic-table--warpper" style="width:100%;">
                              <thead>
                                  <th>Option</th>
                                  <th>Response</th>
                                  <th></th>
                              </thead>
                              <tbody class="option-list">
                              @if(isset($details[0]['options']) && !empty($details[0]['options']))
                              @foreach($details[0]['options'] as $sKey => $item)
                                <tr class="new-item">
                                  <td>
                                      <input type="hidden" class="option_id" name="items[{{$element_counter}}][id]" value="{{$item['id']}}">
                                      {!! Form::text("items[$element_counter][option]",$item['options'], ['class' => 'form-control option', 'placeholder' => 'Option','required'=>'required']) !!}
                                  </td>
                                  <td>
                                    <select name="items[{{$element_counter}}][response_tone]" data-plugin-selectTwo class="form-control response_tone" required="required">
                                        <option value="">Select Response</option>
                                        @if(!empty($question_tones))
                                            @foreach($question_tones as $v=>$value)
                                                <option value="{{ $v }}" @if($item['response_tone'] == $v){{"selected='selected'"}} @endif> {{ $value }} </option>
                                            @endforeach
                                        @endif
                                    </select>
                                  </td>
                                  <td>
                                      <div class="delete-field-block">
                                          <a href="javascript:void(0);"
                                              class="btn btn-remove delete-field btn btn-danger" data-toggle="tooltip"
                                              data-placement="bottom"
                                              title="Delete row">
                                                  -
                                          </a>
                                      </div>
                                  </td>
                                </tr>
                                @php
                                    $element_counter++;
                                @endphp
                              @endforeach
                              @endif
                              </tbody>
                              <tfoot>
                              <tr>
                                  <td colspan="3">
                                      <a href="javascript:void(0);" class="btn btn-add add-option btn btn-success" data-toggle="tooltip" data-placement="bottom" title="Add New">+</a>
                                  </td>
                              </tr>
                            </tfoot>
                            </table>
                        </div>
                      </fieldset>
                  </div>-->
                  @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">
                                @if(isset($sub_questions) && !empty($sub_questions))
                                @foreach($sub_questions as $sKey => $q)
                                  <tr class="question-new-item">
                                      <td>
                                          <input type="hidden" class="subquestion_id" name="questions[{{$element_counter1}}][id]" value="{{$q['id']}}">
                                          {!! Form::text("questions[$element_counter1][sub_questions]",$q['subquestion'], ['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
                                  @endforeach
                                  @else
                                  <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>
                                  @endif
                                </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($details[0]['question_type']==7)
                    @endif 
                    <div class="question-button-setup">
                          <div class="qiestion-submit-btn"> <input type="submit" value="Edit"></div>
                          <div class="qiestion-previous-btn ms-2"><a class="btn btn-info" href="{{ route('servey.template',$details[0]['servey_id']) }}">Back</a></div>
                  </div>
                  </form> 
                </div>
            </div>
        </div>
        <!-- Template list end --->
    </div>
    <!--/ Hoverable Table rows -->
</div>
@endsection

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

////// Add/Remove Questions /////
var element_counter1 = "{{ $element_counter1 }}";

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)
};


$(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(element_counter1 > 9)
      {
          has_error = true;
          $(".error-msg").text("You can't use more than 10 questions.");
          $(".add-question").hide();
          alert("You can't use more than 10 options.");
          return 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.");
    }
});



// 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)
// };


//var element_counter = "{{ $element_counter }}";

////// 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.");
//     }
// });
</script>
@endsection