@extends('layouts.teacher')

<title>{{ config('app.name', 'Laravel') }} | Teacher | Add Question</title>

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
@include('datepicker')

<style>
    .input {
        color: #697a8d;
    }

    .form-group {
        margin-bottom: 20px;
    }

    .question {
        border: 1px solid #ccc;
        padding: 20px;
        margin-top: 20px;
    }

    .icon-btn {
        margin-right: 5px;
    }

    /* Add your CSS styles for the add and delete icons */
    .add-question {
        color: green;
        margin-right: 5px;
        cursor: pointer;
    }

    .delete-question {
        color: red;
        margin-left: 5px;
        cursor: pointer;
    }
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
        -webkit-text-fill-color:#697a8d !important;
    }
    
</style>
@section('main-content')

<div id="alert" class="col-md-6">
    @if(Session::has('success'))
    <div class="alert alert-primary" role="alert">
        {{Session::get('success')}}
    </div>
    @endif
</div>

<div class="content-wrapper">
    <!-- Content -->
    <div class="container-xxl flex-grow-1 container-p-y">
        <h4 class="fw-bold py-3 mb-4"><span class="text-muted fw-light"></span> Add New Question</h4>
        <!-- Basic Layout -->
        <div class="row">
            <div class="col-xl">
                <div class="card mb-4">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">Questions Details</h5>
                        <!-- <small class="text-muted float-end">Merged input group</small> -->
                    </div>
                    <div class="card-body">
                        <form id="questionForm" method="POST" action="{{ url('add-new-question') }}" enctype="multipart/form-data">
                            @csrf
                            <div class="form-group">
                                <label class="form-label" for="basic-icon-default-fullname">Class</label>
                                <div class="input-group">
                                    <span id="basic-icon-default-classname" class="input-group-text"><i class='bx bxs-star-half'></i></span>
                                    @if (count($class_names)>0)
                                        <select name="class_id" id="classSelect" class="form-control input form-control-line">
                                            <option value="" disabled hidden selected>Select Class</option>
                                            @foreach($class_names as $classId => $className)
                                                <option value="{{ $classId }}">{{ ucwords($className) }}</option>
                                            @endforeach
                                        </select>
                                    @else
                                        <select name="class_id" id="classSelect" class="form-control input form-control-line" disabled>
                                            <option value="" disabled selected hidden>Currently No Class Available </option>
                                        </select>
                                    @endif
                                </div>
                            </div>
                            <div class="form-group" id="subjectDropdown" style="display: none;">
                                <label class="form-label" for="basic-icon-default-teacher">Subject Name</label>
                                <div class="input-group input-group-merge">
                                    <span id="basic-icon-default-gender" class="input-group-text"><i class="bx bx-book-open"></i></span>
                                    <select name="subject_id" id="subjectSelect" class="form-select input form-control-line">

                                    </select>
                                </div>
                            </div>
                            <div class="form-group" id="batchDropdown" style="display: none;">
                                <label class="form-label" for="basic-icon-default-teacher">Batch Name</label>
                                <div class="input-group input-group-merge">
                                    <span id="basic-icon-default-gender" class="input-group-text"><i class="bx bx-group"></i></span>

                                    <select name="batch_id" id="batchSelect" class="form-select input form-control-line">

                                    </select>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="form-label" for="dueDate">Due Date</label>
                                <div class="input-group">
                                    <span id="basic-icon-default-gender" class="input-group-text"><i class='bx bx-calendar-check'></i></span>
                                    <input type="text" id="duedate" name="due_date" class="form-control bg-white" placeholder="Add Due Date" readonly autocomplete="off">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="form-label" for="duration">Exam Duration ( in minutes )</label>
                                <div class="input-group">
                                    <span id="basic-icon-default-gender" class="input-group-text"><i class='bx bx-time-five' ></i></span>
                                    <select id="duration" name="duration" class="form-control">
                                        <option value="30">30 minutes</option>
                                        <option value="60">60 minutes</option>
                                        <option value="90">90 minutes</option>
                                        <!-- Add more options as needed -->
                                    </select>
                                </div>    
                            </div>
                            <div class="form-group">
                                <label class="form-label" for="questionTitle">Exam Heading</label>
                                <div class="input-group">
                                    <span id="basic-icon-default-gender" class="input-group-text"><i class="bx bx-clipboard"></i></span>
                                    <input type="text" id="heading" name="heading" class="form-control" placeholder="Enter your question">
                                </div>    
                            </div>



                            <div class="form-group" id="questions-container">
                                <!-- This will hold dynamically added questions -->
                            </div>
                            <br>

                            <span id="add-question" class="add-question">
                                <i class="fas fa-plus"></i> Add Question
                            </span>
                            <p id="message" style="display:block;">Add atleast 5 questions!</p>
                            <button id="saveButton" type="button" onclick="getquestion()" class="btn btn-success text-white disabled">
                                Save
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- / Content -->
    <div class="content-backdrop fade"></div>
</div>

{{-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> --}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.0/js/bootstrap.bundle.min.js"></script>
<script>
    jQuery(function($) {
        let maxi = new Date(),mini=new Date();
        maxi.setMonth(maxi.getMonth() + 2);
        // Check if the resulting month exceeds 11 (December)
        if (maxi.getMonth() > 11) {
            // Adjust the year accordingly
            maxi.setFullYear(maxi.getFullYear() + 1);
        }
        // mini.setFullYear(mini.getFullYear() - 70);
        $("#duedate").datepicker({
            dateFormat: "dd-mm-yy", defaultDate: mini, 
            minDate:mini, maxDate: maxi,
            changeMonth: true, changeYear: true, yearRange: "c:c",
        });
    });

    $(document).ready(function() {
        // Enable Bootstrap Tooltip
       
        // Check the number of questions on each question addition
        $('#questions-container').on('DOMSubtreeModified', function() {
            const questionCount = $('#questions-container .question').length;

            // Add or remove a class to visually indicate button state
            if (questionCount >= 5) {
                $('#saveButton').removeClass('disabled');
            } else {
                $('#saveButton').addClass('disabled');
            }
        });

        // Add a click event to handle the disabled state
        $('#saveButton').click(function(e) {
            if ($(this).hasClass('disabled')) {
                e.preventDefault();
                return false;
            }
        });
    });
</script>

<script>
    function allowNumberOnly(evt) {
        var theEvent = evt || window.event;
        // Handle paste
        if (theEvent.type === 'paste') {
            key = event.clipboardData.getData('text/plain');
        } else {
        // Handle key press
            var key = theEvent.keyCode || theEvent.which;
            key = String.fromCharCode(key);
        }
        var regex = /[0-9]|\./;
        if( !regex.test(key) && evt.keyCode!=8) {
            theEvent.returnValue = false;
            if(theEvent.preventDefault) theEvent.preventDefault();
        }
    }

    $(document).ready(function() {
        $('#classSelect').change(function() {
            var classId = $(this).val();

            // AJAX request to fetch class and subject data based on the selected batch
            $.ajax({
                url: '/fetch-subject',
                type: 'GET',
                data: {
                    class_id: classId
                },
                success: function(response) {
                    console.log(response); // Check the fetched subject data in the console

                    // Update subject dropdown with fetched subject data
                    $('#subjectSelect').empty(); // Clear previous options
                    $.each(response.data, function(key, value) {
                        $('#subjectSelect').append('<option value="' + value.subject_id + '">' + value.subject_name + '</option>');
                        var subjectId = value.subject_id
                        // Trigger change event on page load if class is pre-selected
                        if (subjectId !== '') {
                            $('#subjectSelect').trigger('change');
                        }
                    });

                    if(response.data.length==0){
                        $('#subjectSelect').append(`<option selected disabled hidden>No Subject Available</option>`);
                        $('#subjectSelect').prop("disabled",true);
                    } else{
                        $('#subjectSelect').prop("disabled",false);
                    }

                    // Show the subject dropdown once the data is available
                    $('#subjectDropdown').show();
                },
                error: function(xhr, status, error) {
                    console.error(error); // Log any AJAX errors to the console
                }
            });
        });

        $('#subjectSelect').change(function() {
            var subjectId = $(this).val();
            var classId = $('#classSelect').val();
            // AJAX request to fetch class and subject data based on the selected batch
            $.ajax({
                url: '/fetch-subjectbatch',
                type: 'GET',
                data: {
                    subject_id: subjectId,
                    class_id: classId,
                },
                success: function(response) {
                    console.log(response); // Check the fetched subject data in the console
                    // Update batch dropdown with fetched batch data
                    $('#batchSelect').empty(); // Clear previous options
                    $.each(response.data, function(key, value) {
                        $('#batchSelect').append('<option value="' + value.batch_id + '">' + value.batchname + '</option>');
                    });

                    if(response.data.length==0){
                        $('#batchSelect').append(`<option selected disabled hidden>No Batch Available</option>`);
                        $('#batchSelect').prop("disabled",true);
                    }else{
                        $('#batchSelect').prop("disabled",false);
                    }

                    // Show the batch dropdown once the data is available
                    $('#batchDropdown').show();

                },
                error: function(xhr, status, error) {
                    console.error(error); // Log any AJAX errors to the console
                }
            });
        });


        // $('#classSelect').change(function() {
        //     var classId = $(this).val();

        //     // AJAX request to fetch class and subject data based on the selected batch
        //     $.ajax({
        //         url: '/fetch-batch',
        //         type: 'GET',
        //         data: {
        //             class_id: classId
        //         },
        //         success: function(response) {
        //             console.log(response); // Check the fetched subject data in the console
        //             // Update batch dropdown with fetched batch data
        //             $('#batchSelect').empty(); // Clear previous options
        //             $.each(response.data, function(key, value) {
        //                 $('#batchSelect').append('<option value="' + value.batch_id + '">' + value.batchname + '</option>');
        //             });
        //             // Show the batch dropdown once the data is available
        //             $('#batchDropdown').show();

        //         },
        //         error: function(xhr, status, error) {
        //             console.error(error); // Log any AJAX errors to the console
        //         }
        //     });
        // });
    });

    $(document).ready(function() {
        let questionIndex = 0;
        var questions = 4;
        $('#add-question').click(function() {
            updateHeadingAndMessage();
            const maxQuestions = 10;
            const currentQuestions = $('#questions-container .question').length;

            if (currentQuestions < maxQuestions) {
                const questionHtml = `
                                        <div class="question">
                                            <h3>Question <span class="questionNumber"></span></h3>
                                            <div class="form-group">
                                                <label class="form-label" for="questionTitle">Question</label>
                                                <div class="input-group">
                                                    <span id="basic-icon-default-gender" class="input-group-text"><i class='bx bxl-quora'></i></span>
                                                    <input type="text" name="questions[${questionIndex}][question_text]" class="form-control" placeholder="Enter your question">
                                                </div>    
                                            </div>
                                            <div class="form-group questionoption">
                                                <label class="form-label" for="options">Options</label><br>
                                                <div class="input-group">
                                                    <span id="basic-icon-default-gender" class="input-group-text"><i class='bx bx-dice-1' ></i></span>
                                                    <input type="text" name="questions[${questionIndex}][options][0]" class="form-control" placeholder="Option 1">
                                                </div>  
                                                <div class="input-group">
                                                    <span id="basic-icon-default-gender" class="input-group-text"><i class='bx bx-dice-2' ></i></span>  
                                                    <input type="text" name="questions[${questionIndex}][options][1]" class="form-control" placeholder="Option 2">
                                                </div>
                                                <div class="input-group">
                                                    <span id="basic-icon-default-gender" class="input-group-text"><i class='bx bx-dice-3' ></i></span>  
                                                    <input type="text" name="questions[${questionIndex}][options][2]" class="form-control" placeholder="Option 3">
                                                </div>
                                                <div class="input-group">
                                                    <span id="basic-icon-default-gender" class="input-group-text"><i class='bx bx-dice-4' ></i></span>
                                                    <input type="text" name="questions[${questionIndex}][options][3]" class="form-control" placeholder="Option 4">
                                                </div>    
                                                <span class="option_error_${questionIndex}" style="color:red;"></span>
                                            </div>
                                            <div class="form-group">
                                                <label class="form-label" for="correctAnswer">Correct Option</label><br>
                                                <div class="input-group">
                                                    <span id="basic-icon-default-gender" class="input-group-text"><i class='bx bx-message-square-check'></i></span>
                                                    <select name="questions[${questionIndex}][correct_answer]" class="form-select">
                                                        <option value="0" selected disabled hidden>Select correct option</option>
                                                        <option value="question_option1">Option 1</option>
                                                        <option value="question_option2">Option 2</option>
                                                        <option value="question_option3">Option 3</option>
                                                        <option value="question_option4">Option 4</option>
                                                    </select>
                                                </div>    
                                            </div>
                                            <div class="form-group">
                                                <label class="form-label" for="answer_marks">Marks</label>
                                                <div class="input-group">
                                                    <span id="basic-icon-default-gender" class="input-group-text"><i class='bx bx-message-square-add'></i></span>
                                                    <input type="text" name="answer_marks[${questionIndex}]" class="form-control" maxlength="1" placeholder="Enter question marks" onkeypress="allowNumberOnly(event)"/>
                                                </div>
                                                <span class="marks_error_${questionIndex}" style="color:red;"></span>
                                            </div>
                                            <span class="delete-question">
                                                <i class="fas fa-trash-alt"></i> Delete
                                            </span>
                                        </div>
                                    `;

                $('#questions-container').append(questionHtml);
                updateQuestionNumbers(); // Update the question numbering
                questionIndex++;

                if (currentQuestions + 1 === maxQuestions) {
                    alert('You have reached the maximum limit of 10 questions.');
                    $('#add-question').prop('disabled', true);
                }
                const minimumQuestions = 4;
                if (currentQuestions >= minimumQuestions) {
                    $('#saveButton').show();
                }
            }
        });

        // Event listener for dynamically added delete buttons
        $('#questions-container').on('click', '.delete-question', function() {
            const questionForms = $('.question');
            const saveButton = $('#saveButton');

            // Find the index of the deleted question
            const questionIndex = $(this).closest('.question').index();
            // Remove the parent question form
            const questionForm = $(this).closest('.question');
            questionForm.remove();

            // Update the question numbering after deletion
            updateQuestionNumbers();

            const currentQuestions = questionForms.length;
            const minimumQuestions = 5;

            if (currentQuestions >= minimumQuestions) {
                saveButton.show();
            } else {
                saveButton.hide();
            }

            if (currentQuestions < 10) {
                $('#add-question').prop('disabled', false);
            }

            // Scroll to the updated question number
            scrollToQuestion(questionIndex);
        });

        // Function to update question numbering
        function updateQuestionNumbers() {
            const questionNumbers = $('.question .questionNumber');
            questionNumbers.each(function(index) {
                $(this).text(index + 1);
            });
        }
        // Function to scroll to the updated question number
        function scrollToQuestion(index) {
            const targetQuestion = $('.question').eq(index - 1);
            if (targetQuestion.length) {
                $('html, body').animate({
                    scrollTop: targetQuestion.offset().top
                }, 'slow');
            }
        }
        function updateHeadingAndMessage() {
            // Show or hide the heading and message based on the current count
            if (questionIndex === questions) {
         
                $('#message').hide();
            } else {
               
                $('#message').show();
            }
        }
    });
</script>
<script>
    let total_questions_count=0;
    function getquestion() {
        // Clear previous error messages
        $("#saveButton").prop("disabled",true);
        let current_question_count=0;
        const questions = document.querySelectorAll('.question');

        if (questions.length === 0) {
            alert('Please add questions before saving.');
        }
        $('.text-strong.text-danger').remove();

        const formData = new FormData(document.getElementById('questionForm')); // Initialize FormData with the form
        
        for(let i=0;i<total_questions_count;i++){
            $(".option_error_" + i+" p").remove();
            $(".marks_error_" + i+" p").remove();
        }
        
        $.ajax({
            type: "POST",
            url: "{{ route('questionbank.store') }}",
            processData: false,
            contentType: false,
            data: formData,
            success: function(data) {
                // console.log(data.error);
                if ($.isEmptyObject(data.error)) {
                    window.location.href = data.success;
                } else {
                    // $(".option_error_" +4+" p").remove();
                    $.each(data.error, function(field_name, errors) {
                        current_question_count++;
                        console.log(field_name + ': ' + errors);
                        if ($.isArray(errors)) {
                            // Handle errors for direct form fields
                            $.each(errors, function(index, error) {
                                const errorMessage = error;
                                const $field = $(`[name="${field_name}"]:eq(${index})`);

                                if ($field.length > 0) {
                                    $field.closest('.form-group').append('<span class="text-strong text-danger">' + errorMessage + '</span>');

                                    // Check if the field exists before scrolling
                                    if ($field[0] !== undefined) {
                                        window.scrollTo({
                                            top: 0,
                                            behavior: 'smooth'
                                        });
                                    }
                                }
                            });
                            // Handle errors for indexed fields within "questions" array
                            const matchesQuestionField = field_name.match(/^questions\.(\d+)\.(\w+)$/);
                            // console.log(data.error["questions.0.options.0"]);

                            const questionIndex = matchesQuestionField !== null?matchesQuestionField[1]:"";

                            if (matchesQuestionField !== null) {

                                const field = matchesQuestionField[2];
                                const errorMessage = errors[0];
                                console.log(data.error["questions." + questionIndex + ".options.0"] );

                                if (data.error["questions." + questionIndex + ".options.0"] ||
                                    data.error["questions." + questionIndex + ".options.1"] ||
                                    data.error["questions." + questionIndex + ".options.2"] ||
                                    data.error["questions." + questionIndex + ".options.3"]
                                ) {
                                    $(".option_error_" + questionIndex).html("<p>All options are required</p>");
                                } 
                                const $field = $(`#questions-container [name="questions[${questionIndex}][${field}]"]`);
                                // const $field2 = $(`#questions-container [name="questions[${questionIndex}][${field}]"]`);
                                $field.closest('.form-group').append('<span class="text-strong text-danger">' + errorMessage + '</span>');

                                // Scroll to the field with the error
                                $field[0].scrollIntoView({
                                    behavior: 'smooth',
                                    block: 'center'
                                });
                            }
                           
                        }

                        // Not Enter marks for particular questions
                        const matchAnswerField = field_name.match(/^answer_marks\.(\d+)/);
                        const questionIndex1 = matchAnswerField !== null?matchAnswerField[1]:"";

                        if(questionIndex1){
                            if(data.error["answer_marks."+questionIndex1]){
                                $(".marks_error_"+ questionIndex1).html("<p>Marks are required greater than 0.</p>");
                            }
                        }

                    });
                    if(total_questions_count<current_question_count)total_questions_count=current_question_count;
                }
                $("#saveButton").prop("disabled",false);
            },
            error: function(xhr, status, error) {
                console.error(error); // Log any AJAX errors to the console
                window.scrollTo({
                    top: 0,
                    behavior: 'smooth'
                });
                $("#saveButton").prop("disabled",false);

            }
        });
    }
</script>
@endsection