@extends('company.layouts.main')
@section('content')
<main>
<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>



    <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 vwep survey question</h1><br>
                        <a class="btn btn-outline-info mr-2" href="{{ route('surveyQuestion.view',$surveyQuestion->virtual_experience_id) }}">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('surveyQuestion.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" maxlength="200" 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" value="{{$surveyQuestion->question_type}}" onchange="handleQuestionType(this.value)" name="question_type" id="question_type">
                                            <option value="0">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
                                                Button</option>

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



                                    <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" maxlength="150"
                                                            value="{{ $surveyQuestionOption->option_text }}"
                                                            name="option_text[]">
                                                            <div class="col-1">
                                                                <button type="button" class="btn btn-danger removeMasterclassTopic mt-2">Remove</button>
                                                            </div>
                                                    </div>
                                                    <span class="text-danger" id="option_error"></span>

                                                </div>
                                            @endforeach
                                        </div>
                                        
                                       

                                        <div class="col-6 mt-1" id="addMore">
                                            <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">Update</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
       // Validate options on form submit
    $('#editSurveyQuestion').submit(function (event) {
        var questionType = $('#question_type').val();
        
        // If question type is MCQ or RADIO, 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();
                $('#option_error').text("At least one option is required for MCQ and RADIO questions.");
            } else {
                $('#option_error').text(""); // Clear the error message if options are present
            }
        }
    });

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


     if(question_type=="MCQ" || question_type=="RADIO"){
     dynamicOptions.style.display='block';
     addMore.style.display='block';
     addMore1.style.display='none';


     }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" 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