@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">
          <div class="col-sm-6">
            <h1 class="m-0">Add Survey Questions</h1><br>
            <a class="edit btn btn-info btn-sm" href="javascript:history.back()">Back</a>
          </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">
              @if (Session::has('message'))
                        <p class="alert {{ Session::get('alert-class', 'alert-info') }}" id="error">{{ Session::get('message') }}</p>
                    @endif
                    @if (Session::has('error'))
                        <p class="alert {{ Session::get('alert-class', 'alert-danger') }}" id="error">{{ Session::get('error') }}</p>
                    @endif
                <form action="{{ route('jobSurveyQuestion.store',$jobId) }}" 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" 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="">
                      <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('department_id')
                    <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" class="form-control" name="option_text[]">
                        </div>
                      </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">Submit</button>
                </form>


              </div>
            </div>
            <!-- /.content -->
        </div>

  <script>

setTimeout(function() {
    $('#error').fadeOut('fast');
}, 1000);

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