@extends('company.layouts.main')
@section('content')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<div class="content-wrapper">
  <div class="content-header">
    <div class="container-fluid">
      <div class="row mb-2">
        <div class="col-sm-6">
          <h1 class="m-0">Edit Job Survey Question</h1><br>

          <a class="edit btn btn-info btn-sm" href="javascript:history.back()">Back</a>
        </div>

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

  <div class="content">
    <div class="container-fluid">
      <div class="card">
        <div class="row">
          <div class="col-lg-12">
            <div class="card-body">
              <form action="{{ route('jobSurveyQuestion.update',[$surveyQuestion->id])}}" method="POST"
                id="editSurveyQuestion" enctype="multipart/form-data">
                @if(Session::has('success'))
                <div class="alert alert-success">{{ Session::get('success') }}</div>
                @endif
                @csrf


                <div class="form-group">
                  <label class="form-label" for="question_text">Question</label><span class="text-danger">*</span>
                  <input type="text" class="form-control" id="question_text" name="question_text"
                    placeholder="question_text" value="{{ $surveyQuestion->question_text }}" autocomplete="off" />
                  <label id="agent-name-error" class="error" style="display: none;"></label>
                  @error('question_text')
                  <span class='text-danger'>{{$message}}</span>
                  @enderror
                </div>


                <div class="form-group">
                  <label>Question Types</label><span class="text-danger">*</span>
                  <select class="form-select form-control" name="question_type" id="" disabled>
                    <option value="">Select Question Type</option>
                    <option value="MCQ" {{$surveyQuestion->question_type=='MCQ' ? 'selected' : null}}>Multiple Choice
                    </option>
                    <option value="descriptive" {{$surveyQuestion->question_type=='descriptive' ? 'selected' :
                      null}}>Descriptive</option>
                    <option value="radio" {{$surveyQuestion->question_type=='RADIO' ? 'selected' : null}}>Radio</option>
                  </select>
                  @error('question_type')
                  <span class='text-danger'>{{$message}}</span>
                  @enderror
                </div>


@if($surveyQuestion->question_type !== "descriptive")
                <div id="optionsDiv">
                  <div id="dynamicOptions">
                    @foreach($surveyQuestionOptions as $surveyQuestionOption)
                    <div class="row main">
                      <div class="col-12">
                        <label for="">Option</label>
                        <input type="text" class="form-control" value="{{$surveyQuestionOption->option_text}}"
                           disabled>
                      </div>
                    </div>
                    <a href="{{ route('delete.jobSurveyQuestionOption', [$surveyQuestionOption->id]) }}" style="margin-left: 8px;" class="btn-sm btn-danger">Delete</a>
                    @endforeach
                  </div>

                  <div class="col-6 mt-1">
                    <button style="margin-left: -7px;" type="button" name="add" id="addMasterclassTopic"
                      class="btn btn-success">Add More</button>
                  </div>
                </div>
@endif
            <button class="btn btn-info mt-4" type="submit">Update</button>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</div>

<script>

  function handleQuestionType(question_type) {
    var dynamicOptions = document.getElementById('optionsDiv');


    if (question_type == "MCQ") {
      dynamicOptions.style.display = 'block';

    } else {
      dynamicOptions.style.display = 'none';

    }
  }



  $(document).ready(function () {


    var i = 0;
    $("#addMasterclassTopic").click(function () {
      ++i;
      var newRowHtml = '<div class="row main"><div class="col-12">' +
        '<label for="">Option</label>' +
        '<input type="text" class="form-control" name="option_text[]">' +
        '<div class="col-1">' +
        '<button type="button" class="btn btn-danger removeMasterclassTopic tr-' + i + ' mt-2">Remove</button>' +
        '</div></div>';
      $("#dynamicOptions").append(newRowHtml);
    });
  });
  $(document).on('click', '.removeMasterclassTopic', function () {
    $(this).parents('div.row.main').remove();
  });
</script>
@section('script')
$('.summernote').summernote({
height: 100,
toolbar: [
['style', ['bold', 'italic', 'underline', 'clear']],
['para', ['ul', 'ol']],
],
disableDragAndDrop: true,
});
@endsection
@endsection