@extends('company.layouts.main')
@section('content')
<main>
<style>
  #optionsDiv,#question_file_div{
    display:none;
  }
</style>


<script src="https://code.jquery.com/jquery-3.6.0.min.js"
    integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    {{-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"> --}}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
   <!-- Content Wrapper. Contains page content -->
   <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
        <a class="btn btn-outline-info mr-2" href="{{ route('surveyQuestion.view',$virtualExpId) }}">Back</a>

          <div class="col-sm-6">
            <h1 class="m-0">Add Survey Questions</h1>
          </div><!-- /.col -->

        </div><!-- /.row -->
      </div><!-- /.container-fluid -->
    </div>
   <!-- Main content -->
   <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('surveyQuestion.store',$virtualExpId) }}"  method="POST" enctype="multipart/form-data" id="addSurveyQuestion">
             @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" maxlength="200" name="question_text"
             placeholder="question text" value="{{ old('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 Type </label><span class="text-danger">*</span>
               <select class="form-select form-control" onchange="handleQuestionType(this.value)" name="question_type" id="question_type">
                <option value="0" >Select Question Type</option>
                <option value="MCQ">Multiple Choice</option>
                <option value="DESCRIPTIVE">Descriptive</option>
                <option value="RADIO">Radio Button</option>

               </select>
              @error('question_type')
              <span class='text-danger'>{{$message}}</span>
                @enderror
          </div>




          <div id="optionsDiv">
              <div id="dynamicOptions">
                    <div class="row main">
                        <div class="col-12">
                              <label for="">Option</label>
                              <input type="text" require class="form-control" maxlength="150" name="option_text[]">
                        </div>
                        <span class="text-danger" id="option_error"></span>
                    </div>
                 </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>



               <button class="btn btn-info mt-4" type="submit" id="submitButton">Submit</button>
            </form>


              </div>
            </div>
          </div>
        </div>
        <!-- /.row -->
      </div><!-- /.container-fluid -->
    </div>
    <!-- /.content -->
  </div>

  <script>
 function disableSubmitButton(){
      document.getElementById('submitButton').disabled = true;
      //   // Optionally, change the button text to indicate the form is being submitted
        document.getElementById('submitButton').innerText = 'Submitting...';
    }
    // Validate options on form submit
    $('#addSurveyQuestion').submit(function (event) {
            var questionType = $('#question_type').val();
            var question_text = $('#question_text').val();
            // If question type is MCQ, check if at least one option is added
            if (questionType === "MCQ" || questionType==="RADIO") {
                var options = $('input[name="option_text[]"]').map(function () {
                    return $(this).val();
                }).get();
              
                // If no options are added, prevent form submission and show error
                if (options.length === 0 || options.every(option => option.trim() === "")) {
                    event.preventDefault();
                    document.getElementById('option_error').innerText ="At least one option is required for MCQ and RADIO questions.";
                }
                else if(questionType === "0" || question_text.trim()==""){
                  event.preventDefault();
                }
                else{
                 disableSubmitButton();
                }
            }else if(questionType === "0" || question_text.trim()==""){
              event.preventDefault();
            }
            else{
              disableSubmitButton();
            }
        });
      


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


            if(question_type=="MCQ" || question_type=="RADIO"){
            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" maxlength="150" require 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>
  <!-- /.content-wrapper -->
</main>
@endsection