@extends('layouts.admin')
@section('content')
<div class="card">
    <div class="card-header">
       Create Question
    </div>
    <div class="card-body">
        <form action="{{ route('quiz.question.store') }}" method="POST">
            @csrf
            <div class="form-group" style="width: 600px">
                <label class="required" for="course_id">Course</label>
                <select class="form-control select2 {{ $errors->has('course_id') ? 'is-invalid' : '' }}" name="course_id" id="course_id" required>
                    <option value disabled {{ old('course_id', null) === null ? 'selected' : '' }}>{{ trans('global.pleaseSelect') }}</option>
                    @foreach($courses as $key => $course)
                        <option value="{{ $course->id }}">{{ $course->title }}</option>
                    @endforeach
                </select>
            </div>
            <div class="row">
                <div class="form-group col-6">
                    <label class="required" for="module">Module</label>
                    <select class="form-control select2" name="module" id="module">
                    </select>
                </div>
                <div class="form-group col-6">
                    <label class="required" for="topic">Topic</label>
                    <select class="form-control select2" name="topic" id="topic">
                    </select>
                    
                </div>

            </div>
           
            <div class="form-group">
                <label class="required" for="question">Question</label>
                <input class="form-control {{ $errors->has('question') ? 'is-invalid' : '' }}" type="text" name="question" id="question" value="{{ old('question', '') }}" required>
                @if($errors->has('question'))
                    <div class="invalid-feedback">
                        {{ $errors->first('question') }}
                    </div>
                @endif
            </div>
            @for ($i = 1; $i < 5; $i++)
            <div class="row form-group">
                <div class="col-md-10">
                    <label class="required" for="question">Option {{$i}}</label>
                    <input class="form-control" type="text" name="title[]" id="title" value="{{ old('title', '') }}">
                </div>
                <div class="col-md-2" style="margin-top: 35px">
                    <div>
                        <input type="checkbox" name="option_check_{{$i}}" class="form-check-input" value="1">
                    </div>
                </div>
                
            </div>
            @endfor
            
            <div class="form-group">
                <button class="btn btn-success" type="submit">
                    {{ trans('global.save') }}
                </button>
            </div>
        </form>
    </div>
</div>


@endsection
@section('scripts')
@parent
<script>
    $(function () {
    let dtButtons = $.extend(true, [], $.fn.dataTable.defaults.buttons)


  $.extend(true, $.fn.dataTable.defaults, {
    orderCellsTop: true,
    order: [[ 1, 'desc' ]],
    pageLength: 100,
  });
  let table = $('.datatable-Batch:not(.ajaxTable)').DataTable({ buttons: dtButtons })
  $('a[data-toggle="tab"]').on('shown.bs.tab click', function(e){
      $($.fn.dataTable.tables(true)).DataTable()
          .columns.adjust();
  });
  var topics=[]
  $('select[name="course_id"]').on('change', function() {
    var course_id = $(this).val();
    if(course_id) {
        $.ajax({
            url: '/get-modules-by-course/'+course_id,
            type: "GET",
            dataType: "json",
            success:function(data) {
                $('select[name="module"]').empty();
                topics=data
                if(data.length>0){
                    $('select[name="module"]').append('<option value="null">Please select a module</option>');
                    $.each(data, function(key, value) {
                        $('select[name="module"]').append('<option value="'+ value.id +'">'+ value.name +'</option>');
                    });
                }
            }
        });
    }else{
        $('select[name="module"]').empty();
    }
});
  
$('select[name="module"]').on('change', function() {
    var module_id = $(this).val();
    if(module_id) {
        $('select[name="topic"]').empty();
        var topic= topics.find(e => e.id == module_id);
        if(topic)
        {
            $('select[name="topic"]').append('<option value="null">Please select a topic</option>');
                $.each(topic.topics, function(key, value) {
                    $('select[name="topic"]').append('<option value="'+ value +'">'+ value +'</option>');
            });
        }
    }else{
        $('select[name="topic"]').empty();
    }
});
})

</script>
@endsection