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


        <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>
        <!-- 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('taskQuestion.view',$virtualExpWhatWillYouLearnId) }}">Back</a>

                        <div class="col-sm-6">
                            <h1 class="m-0">Add Task</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('taskQuestion.store', $virtualExpWhatWillYouLearnId) }}"
                                        method="POST" enctype="multipart/form-data" id="addTaskQuestion">
                                        @if (Session::has('success'))
                                            <div class="alert alert-success">{{ Session::get('success') }}</div>
                                        @endif
                                        @csrf

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

                                        <div class="form-group">
                                            <label class="form-label" for="question_text">Question title </label><span class="text-danger">*</span>
                                            <input type="text" class="form-control" id="question_text"
                                                name="question_text" placeholder="question title"
                                                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>Description </label><span class="text-danger">*</span>
                                            <textarea class="form-control summernote" name="description" id="description" cols="30" rows="10">{{ old('description') }}</textarea>
                                            <span class='text-danger' id="descriptionError"></span>
                                        </div>

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

                                        <div class="form-group">
                                            <label>video </label><span class="text-danger"></span>
                                            <input type="file" name="video" class="form-control"
                                                value="{{ old('video') }}" accept="video/*" />
                                            @error('video')
                                                <span class='text-danger'>{{ $message }}</span>
                                            @enderror
                                        </div>

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

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

                                        <!-- <div class="form-group">
                                            <label>Question File Description </label><span class="text-danger">*</span>
                                            <textarea class="form-control summernote" name="question_file_description" id="question_file_description" cols="30" rows="10">{{ old('question_file_description') }}</textarea>
                                            <span class='text-danger' id="questionfileSdescription"></span>
                                        </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="OVERVIEW">Overview</option>
                                                <option value="MCQ">Multiple Choice</option>
                                                <option value="RADIO">Radio</option>
                                                <option value="file_upload">File Upload</option>
                                                <option value="descriptive">Descriptive</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>
                                                    <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">Submit</button>
                                    </form>


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

        <script>

// Validate options on form submit
$('#addTaskQuestion').submit(function (event) {
            var questionType = $('#question_type').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.";
                }
            }
        });


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

                var question_file_div = document.getElementById('question_file_div');

                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>

    @section('script')
    $('.summernote').summernote({
    height: 100,
    toolbar: [
    ['style', ['bold', 'italic', 'underline', 'clear']],
    ['para', ['ul', 'ol']],
    ],
    disableDragAndDrop: true,
    });
@endsection
@endsection