@extends('backend.admin.layouts.app')

@section('content')
<div class="row">


    {{-- add question modal --}}
    <div class="modal fade" id="questionAddModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Create Question</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form action="{{ route('admin.question.submit') }}" method="POST" id="QAdd"
                    enctype="multipart/form-data">
                    @csrf


                    <div id="add-answer-modal" class="modal-body">

                        <p style="color:rgb(87, 6, 90); font-size:17px; font-weight:bold">>>> Basic Info Part : </p>

                        <div class="form-group">
                            <label for="status">Select Course <span
                                    style="color: red; font-weight:bold">*</span></label>
                            <select class="form-control" name="course" id="course_id">
                                <option value="" disabled selected>Select course</option>


                                @foreach ($courses as $cus)
                                <option value="{{ $cus->id }}">{{ $cus->name }}</option>
                                @endforeach


                            </select>
                            <span class="text-danger error-message" id="category-error"></span>
                        </div>

                        <div class="form-group">
                            <label for="status">Select Part <span style="color: red; font-weight:bold">*</span></label>
                            <select class="form-control part_option" name="part" id="part">
                                <option value="" disabled selected>Select part</option>
                                {{-- @foreach ($parts as $part)
                                <option value="{{ $part->id }}">{{ $part->name }}</option>
                                @endforeach --}}
                            </select>
                            <span class="text-danger error-message" id="part-error"></span>
                        </div>

                        <div class="form-group">
                            <label for="status">Select Category <span
                                    style="color: red; font-weight:bold">*</span></label>
                            <select class="form-control category_option" name="category_id" id="category_id">
                                <option value="" disabled selected>Select Category</option>
                                {{-- @foreach ($cats as $cat)
                                <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                                @endforeach --}}
                            </select>
                            <span class="text-danger error-message" id="category-error"></span>
                        </div>


                        <div class="form-group">
                            <label for="status">Select Sub Category <span
                                    style="color: red; font-weight:bold">*</span></label>
                            <select class="form-control sub_category_option" name="sub_category_id" id="sub_category">
                                <option value="" disabled selected>Select Sub Category</option>

                            </select>

                        </div>

                        <div class="form-group">
                            <label for="status">Select Package <span
                                    style="color: red; font-weight:bold">*</span></label>
                            <select class="form-control" name="package" id="package">
                                <option value="" disabled selected>Select Package</option>

                                <option value="0">Free</option>
                                <option value="1">Paid</option>

                            </select>
                        </div>
                        <p style="color:rgb(87, 6, 90); font-size:17px; font-weight:bold; margin-top:20px">>>> Question
                            Part : </p>
                        <div class="form-group">

                            <textarea class="form-control" rows="6" name="question" id="question"
                                placeholder="Enter Your Question"></textarea>
                            <span class="text-danger error-message" id="question-error"></span>
                        </div>

                        <p style="color:rgb(87, 6, 90); font-size:17px; font-weight:bold; margin-top:20px">>>> Question
                            Image : </p>
                        <div class="form-group">

                            <input type="file" name="image" id="image" class="form-control image">
                            <div id="imagePreviewContainerSlider">
                                <img width="150px" height="100px" id="questionAddImagePreview"
                                    style="display: none; margin-top:9px">
                                <a id="removeImageButton" style="display: none;
                                        color:red; margin-top:5px; cursor:pointer">x</a>
                            </div>

                        </div>

                        <p style="color:rgb(87, 6, 90); font-size:17px; font-weight:bold; margin-top:20px">>>>
                            Explanation : </p>
                        <div class="form-group">
                            <label for="description">Explanation </label>
                            <textarea name="description" id="description" rows="12" cols="18"
                                class="rounded form-control" placeholder=""></textarea>
                            <span class="text-danger error-message" id="description-error"></span>
                        </div>
                        <div style="display:flex;">
                            <p style="color:rgb(87, 6, 90); font-size:17px; font-weight:bold; margin-top:25px">>>>
                                Answer Part : </p>
                            <a href="javascript:void(0)" id="questionAddAnswer"
                                style="margin-left:10px; height:35px; margin-bottom:8px; padding-top:5px; font-size:15px; margin-top:20px"
                                class="btn btn-success">Add Answer</a>

                        </div>
                        <div id="answer_added">

                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="submit"
                            style="float:right; margin-bottom:8px; padding-left:25px; padding-right:25px; font-size:15px"
                            class="btn btn-info">Submit Question</button>
                    </div>
                </form>


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

    {{-- End add question modal --}}

    {{-- edit question modal start --}}
    <div class="modal fade" id="questionEditModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Update Question</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form action="{{ route('admin.question.update') }}" method="POST" id="QEdit"
                    enctype="multipart/form-data">
                    @csrf

                    <input type="hidden" name="question_id" id="question_id">


                    <div id="edit-qna-body" class="modal-body">


                        <p style="color:rgb(87, 6, 90); font-size:17px; font-weight:bold">>>> Basic Info Part : </p>

                        <div class="form-group">
                            <label for="status">Select Course <span
                                    style="color: red; font-weight:bold">*</span></label>
                            <select class="form-control" name="up_course" id="up_course">
                                <option value="" disabled selected>Select Course</option>

                                @foreach ($courses as $cus)
                                <option value="{{ $cus->id }}">{{ $cus->name }}</option>
                                @endforeach>


                            </select>
                            <span class="text-danger error-message" id="category-error"></span>
                        </div>

                        <div class="form-group">
                            <label for="status">Select Part <span style="color: red; font-weight:bold">*</span></label>
                            <select class="form-control part_option" name="up_part" id="up_part">
                                <option value="" disabled selected>Select course</option>







                            </select>
                            <span class="text-danger error-message" id="part-error"></span>
                        </div>

                        <div class="form-group">
                            <label for="status">Select Category <span
                                    style="color: red; font-weight:bold">*</span></label>
                            <select class="form-control category_option" name="up_category_id" id="up_category_id">
                                <option value="" disabled selected>Select Type</option>
                                {{-- @foreach ($cats as $cat)
                                <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                                @endforeach --}}


                            </select>
                            <span class="text-danger error-message" id="category-error"></span>
                        </div>

                        <div class="form-group">
                            <label for="status">Select Sub Category <span
                                    style="color: red; font-weight:bold">*</span></label>
                            <select class="form-control sub_category_option" name="up_sub_category_id"
                                id="up_sub_category">
                                <option value="" disabled selected>Select Type</option>
                                {{-- @foreach ($sub_cats as $sub_cat)
                                <option value="{{ $sub_cat->id }}">{{ $sub_cat->name }}</option>
                                @endforeach --}}


                            </select>

                        </div>

                        <div class="form-group">
                            <label for="status">Select Package <span
                                    style="color: red; font-weight:bold">*</span></label>
                            <select class="form-control" name="up_package" id="up_package">
                                <option value="" disabled selected>Select Type</option>

                                <option value="0">Free</option>
                                <option value="1">Paid</option>



                            </select>

                        </div>

                        <p style="color:rgb(87, 6, 90); font-size:17px; font-weight:bold; margin-top:20px">>>> Question
                            Part : </p>
                        <div class="form-group">

                            <textarea class="form-control" rows="6" name="up_question" id="up_question"
                                placeholder="Enter Your Question"></textarea>


                            <span class="text-danger error-message" id="question-error"></span>
                        </div>




                        <p style="color:rgb(87, 6, 90); font-size:17px; font-weight:bold; margin-top:20px">>>> Question
                            Question Image : </p>
                        <div class="form-group">

                            <input type="file" name="up_img" id="up_image" class="form-control image">
                            <img width="150px" height="100px" src="" alt="" class="imagePreview"
                                style="margin-top:10px">

                        </div>
                        <div id="imagePreviewContainerSlider">
                            <img width="150px" height="100px" id="questionEditImagePreview"
                                style="display: none; margin-top:9px">
                            <a id="removeImageButtonEdit" style="display: none;
                                    color:red; margin-top:5px; cursor:pointer">x</a>
                        </div>



                        <p style="color:rgb(87, 6, 90); font-size:17px; font-weight:bold; margin-top:20px">>>>
                            Explanation : </p>


                        <div class="form-group">
                            <label for="description">Explanation </label>
                            <textarea name="up_description" id="up_description" rows="12" cols="18"
                                class="rounded form-control" placeholder=""></textarea>
                            <span class="text-danger error-message" id="description-error"></span>
                        </div>
                        <div style="display:flex;">
                            <p style="color:black; font-size:17px; font-weight:bold; margin-top:25px">Answer Part :
                            </p>


                        </div>











                    </div>
                    <div class="modal-footer">
                        <button type="submit"
                            style="float:right; margin-bottom:8px; padding-left:25px; padding-right:25px; font-size:15px"
                            class="btn btn-info">Submit Question</button>
                    </div>
                </form>


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

    {{-- End question edit modal --}}



    <!-- show answer modal start -->


    <div class="modal fade" id="showAnswer" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Show answer </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>



                <div class="modal-body">



                    <table class="table table-bordered table-striped">
                        <thead>
                            <tr>
                                <th>SL</th>
                                <th>Answer</th>
                                <th>is_correct</th>

                            </tr>
                        </thead>
                        <tbody class="answer_view">


                        </tbody>
                    </table>










                </div>




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


    <!-- show answer modal close -->




    <div class="col-md-12 p-4">
        <section class="content">
            <!-- Default box -->
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Question List</h3>
                    <a href="#" class="float-right btn btn-primary btn-sm" data-toggle="modal"
                        data-target="#questionAddModal">
                        <i class="fas fa-plus-circle"></i> Add Question
                    </a>
                </div>
                <!-- /.card-header -->
                <div class="card-body">
                    <table class="table table-bordered table-striped question_table">
                        <thead>
                            <tr>
                                <th>SL</th>
                                <th>Category</th>
                                <th>Sub Category</th>
                                <th>Question</th>
                                <th>Answer</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
                <!-- /.card-body -->
            </div>
            <!-- /.card -->
        </section>
    </div>
</div>
@endsection
@push('js')
<script>
    let editorInstance;

ClassicEditor
    .create(document.querySelector('#description'), {
        ckfinder: {
            uploadUrl: "{{ route('admin.ckeditor.upload', ['_token' => csrf_token()]) }}"
        },
        toolbar: [
            'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote', 'ckfinder', 'imageUpload', 'insertTable', 'mediaEmbed', 'undo', 'redo'
        ],
        mediaEmbed: {
            previewsInData: true
        }
    })
    .then(editor => {
        editorInstance = editor;
    })
    .catch(error => {
        console.error(error);
    });

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $(document).ready(function() {


            $(function() {
                var table = $('.question_table').DataTable({
                    dom: "lBfrtip",
                    buttons: ["copy", "csv", "excel", "pdf", "print"],
                    pageLength: 25,
                    processing: true,
                    serverSide: true,
                    searchable: true,
                    "ajax": {
                        "url": "{{ route('admin.question.add') }}",
                        "datatype": "json",
                        "dataSrc": "data",
                        "data": function(data) {}
                    },
                    drawCallback: function(settings) {
                        $('#is_check_all').prop('checked', false);
                    },
                    columns: [{
                            name: 'DT_RowIndex',
                            data: 'DT_RowIndex',
                            sWidth: '3%'
                        },
                        {
                            data: 'category',
                            name: 'category',
                            sWidth: '15%'
                        },
                        {
                            data: 'sub category',
                            name: 'sub category',
                            sWidth: '15%'
                        },
                        {
                            data: 'question',
                            name: 'question',
                            sWidth: '40%'
                        },

                        {
                            data: 'answer',
                            name: 'answer',
                            sWidth: '20%'
                        },
                        {
                            data: 'action',
                            name: 'action',
                            sWidth: "17%",
                            orderable: false,
                            searchable: false
                        },
                    ],
                    lengthMenu: [
                        [10, 25, 50, 100, 500, 1000, -1],
                        [10, 25, 50, 100, 500, 1000, "All"]
                    ],
                });
                table.buttons().container().appendTo('#exportButtonsContainer');

                $(document.body).on('click', '#is_check_all', function(event) {
                    alert('Checkbox clicked!');
                    var checked = event.target.checked;
                    if (true == checked) {
                        $('.check1').prop('checked', true);
                    }
                    if (false == checked) {
                        $('.check1').prop('checked', false);
                    }
                });

                $('#is_check_all').parent().addClass('text-center');

                $(document.body).on('click', '.check1', function(event) {
                    var allItem = $('.check1');
                    var array = $.map(allItem, function(el, index) {
                        return [el]
                    })
                    var allChecked = array.every(isSameAnswer);

                    function isSameAnswer(el, index, arr) {
                        if (index === 0) {
                            return true;
                        } else {
                            return (el.checked === arr[index - 1].checked);
                        }
                    }

                    if (allChecked && array[0].checked) {
                        $('#is_check_all').prop('checked', true);
                    } else {
                        $('#is_check_all').prop('checked', false);
                    }
                });

                //Submit filter form by select input changing
                $(document).on('change', '.submitable', function() {
                    table.ajax.reload();
                });
            });

            // image preview & cart question add modal
            $("#image").change(function() {
                readURLAdd(this);
            });

            function readURLAdd(input) {
                if (input.files && input.files[0]) {
                    var reader = new FileReader();

                    reader.onload = function(e) {
                        // Display the image preview
                        $("#questionAddImagePreview").attr("src", e.target.result).show();
                        // Show the remove button
                        $("#removeImageButton").show();
                    };

                    // Read the file as a data URL
                    reader.readAsDataURL(input.files[0]);
                }
            }

            $("#removeImageButton").click(function() {
                // Clear the file input and hide the image preview
                $("#image").val("");
                $("#questionAddImagePreview").attr("src", "").hide();
                // Hide the remove button
                $(this).hide();
            });

            // image preview & cart question edit modal
            $("#up_image").change(function() {
                readURLEdit(this);
            });

            function readURLEdit(input) {
                if (input.files && input.files[0]) {
                    var reader = new FileReader();

                    reader.onload = function(e) {
                        $(".imagePreview").hide();
                        // Display the image preview
                        $("#questionEditImagePreview").attr("src", e.target.result).show();
                        // Show the remove button
                        $("#removeImageButtonEdit").show();
                    };

                    // Read the file as a data URL
                    reader.readAsDataURL(input.files[0]);
                }
            }

            $("#removeImageButtonEdit").click(function() {
                // Clear the file input and hide the image preview
                $("#up_image").val("");
                $("#questionEditImagePreview").attr("src", "").hide();
                // Hide the remove button
                $(this).hide();
            });

            // add answer
            $('#questionAddAnswer').on('click', function(e) {
                e.preventDefault();

                if ($('.answer').length >= 5) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Warning!',
                        text: 'You can add maximum 5 Answer',
                        showConfirmButton: false,
                        timer: 1500
                    });
                } else {
                    var html = `
                <div  class="row total_ans">
                    <div style="display:flex" class="col-lg-12 col-md-12 col-sm-12">
                        <input style="margin-right:9px; margin-top:-14px" type="radio" name="is_correct" class="is_correct">
                        <input type="text"  class="answer form-control w-90" name="answers[]" placeholder="Enter Answer here">
                        <button id="removeField" style="margin-left:25px; margin-bottom:12px; margin-top:0px" class="btn btn-danger">Remove</button>
                    </div>
                </div>`;
                    $('#answer_added').append(html);
                }
            });

            $(document).on('click', '#removeField', function() {
                $(this).parent().remove();
            });





            $('#QAdd').on('submit', function(e) {
                e.preventDefault();

                var form = this;
                if ($(".total_ans").length < 4) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Warning!',
                        text: 'Add minimum 4 Answer',
                        showConfirmButton: false,
                        timer: 1500
                    });
                } else {
                    let formData = new FormData($(this)[0]);
                    let selectedCorrectAnswer = false;
                    let selectedAnswerValue = null;

                    $(".total_ans").each(function(index) {
                        let isCorrect = $(this).find(".is_correct").prop('checked');
                        let answerValue = $(this).find(".answer").val();

                        formData.append('answers[' + index + ']', answerValue);


                        if (isCorrect) {
                            if (selectedCorrectAnswer) {
                                $(this).find(".is_correct").prop('checked', false);
                            } else {
                                selectedCorrectAnswer = true;
                                selectedAnswerValue = answerValue;
                            }
                        }
                    });

                    if (selectedCorrectAnswer) {
                        formData.set('is_correct', selectedAnswerValue);
                        $.ajax({
                            processData: false,
                            contentType: false,
                            url: $(this).attr('action'),
                            type: $(this).attr('method'),
                            data: formData,
                            success: function(res) {
                                console.log(res);
                                if (res.status == 'success') {
                                    toastr.success(res.message);
                                    $('.question_table').DataTable().draw(false);
                                    $('#questionAddModal').modal('hide');
                                    $('#answer_added').html('');
                                    // Reset CKEditor content
                                    if (editorInstance) {
                                    editorInstance.setData('');
                                    }

                                     form.reset();
                                     $('#questionAddImagePreview').remove();
                                     $('#removeImageButton').remove();
                                }
                            },
                            error: function(xhr) {
                          var errors = xhr.responseJSON.errors;
                                $.each(errors, function(key, value) {
                                    $('#' + key + '-error').text(value[0]);
                                });
                            }
                        });
                    } else {
                        Swal.fire({
                            icon: 'warning',
                            title: 'Warning!',
                            text: 'Must be select one correct answer',
                            showConfirmButton: false,
                            timer: 1500
                        });
                    }
                }
            });


            // sub_category find

    //         $(document).on('change', '#category_id', function(e) {
    //     e.preventDefault();
    //     let id = $(this).val();

    //     $.ajax({
    //         url: "{{ route('admin.subCategory.find') }}",
    //         method: 'post',
    //         data: {
    //             id: id,
    //             _token: '{{ csrf_token() }}'  // Include the CSRF token for security
    //         },
    //         success: function(res) {
    //             console.log(res);
    //             if(res.status ==='success'){
    //                 let data = res.subs;
    //                 let subCategorySelect = $('#sub_category');
    //                 subCategorySelect.find('option').not(':first').remove();
    //                 data.forEach(function(sub) {
    //                 subCategorySelect.append('<option value="' + sub.id + '">' + sub.name + '</option>');
    //     });
    //             }
    //         },
    //         error: function(err) {
    //             console.error(err);
    //         }
    //     });
    // });
            // part find

    //         $(document).on('change', '#course_id', function(e) {
    //     e.preventDefault();
    //     let id = $(this).val();
       

    //     $.ajax({
    //         url: "{{ route('admin.part.find') }}",
    //         method: 'post',
    //         data: {
    //             id: id,
    //             _token: '{{ csrf_token() }}'  // Include the CSRF token for security
    //         },
    //         success: function(res) {
    //             console.log(res);
    //             if(res.status ==='success'){
    //                 let data = res.pats;
    //                 let data_second = res.cats;
    //                 let partSelect = $('.part_option');
    //                 partSelect.find('option').not(':first').remove();
    //                 data.forEach(function(part) {
    //                 partSelect.append('<option value="' + part.id + '">' + part.name + '</option>');
    //                 });
    //                 let catSelect = $('.category_option');
    //                 catSelect.find('option').not(':first').remove();
    //                 data_second.forEach(function(cat) {
    //                 catSelect.append('<option value="' + cat.id + '">' + cat.name + '</option>');
    //                 });
    //             }
    //         },
    //         error: function(err) {
    //             console.error(err);
    //         }
    //     });
    // });

    // Function to fetch parts and categories based on course ID
function fetchPartsAndCategories(id) {
    $.ajax({
        url: "{{ route('admin.part.find') }}",
        method: 'post',
        data: {
            id: id,
            _token: '{{ csrf_token() }}'  // Include the CSRF token for security
        },
        success: function(res) {
            console.log(res);
            if(res.status === 'success') {
                let data = res.pats;
                let data_second = res.cats;

                // Update part options
                let partSelect = $('.part_option');
                partSelect.find('option').not(':first').remove();
                data.forEach(function(part) {
                    partSelect.append('<option value="' + part.id + '">' + part.name + '</option>');
                });

                // Update category options
                let catSelect = $('.category_option');
                catSelect.find('option').not(':first').remove();
                data_second.forEach(function(cat) {
                    catSelect.append('<option value="' + cat.id + '">' + cat.name + '</option>');
                });
            }
        },
        error: function(err) {
            console.error(err);
        }
    });
}

// Event listener for the course ID change
$(document).off('change', '#course_id').on('change', '#course_id', function(e) {
        e.preventDefault();
        let id = $(this).val();
        fetchPartsAndCategories(id);
});
$(document).off('change', '#up_course').on('change', '#up_course', function(e) {
        e.preventDefault();
        let id = $(this).val();
        fetchPartsAndCategories(id);
});

// Function to fetch sub-categories based on category ID
function fetchSubCategories(id) {
    $.ajax({
        url: "{{ route('admin.subCategory.find') }}",
        method: 'post',
        data: {
            id: id,
            _token: '{{ csrf_token() }}'  // Include the CSRF token for security
        },
        success: function(res) {
            console.log(res);
            if(res.status === 'success') {
                let data = res.subs;
                let subCategorySelect = $('.sub_category_option');
                
                // Clear existing options except the first one
                subCategorySelect.find('option').not(':first').remove();
                
                // Populate the sub-category select with new options
                data.forEach(function(sub) {
                    subCategorySelect.append('<option value="' + sub.id + '">' + sub.name + '</option>');
                });
            }
        },
        error: function(err) {
            console.error(err);
        }
    });
}

// Event listener for the category ID change
$(document).on('change', '#category_id', function(e) {
    e.preventDefault();
    let id = $(this).val();
    fetchSubCategories(id); // Call the function with the selected ID
});
$(document).on('change', '#up_category_id', function(e) {
    e.preventDefault();
    let id = $(this).val();
    fetchSubCategories(id); // Call the function with the selected ID
});


            

            // show answer
            $(document).on('click', '.see_answer', function() {
                let qid = $(this).data('id');
                let questions = @json($questions);



                var html = '';

                for (let i = 0; i < questions.length; i++) {
                    if (questions[i]['id'] == qid) {

                        var answers = questions[i]['answer'];


                        for (let j = 0; j < answers.length; j++) {
                            let is_correct = 'NO';
                            if (questions[i]['answer'][j]['is_correct'] == 1) {
                                is_correct = 'YES';
                            }
                            html += `
                            <tr>
                                <td>${j+1}</td>
                                <td>${answers[j]['answer']}</td>
                                <td>${is_correct}</td>
                            </tr>`;
                        }
                        break;
                    }
                }

                $('.answer_view').html(html);
                $('#showAnswer').modal('show');
            });

            let editor;

            $(document).on('click', '.editQuestion', function(e) {
                e.preventDefault();
                let id = $(this).data('id');
                let cate_id = $(this).data('category_id');
                let sub_category_id = $(this).data('sub_category_id');
                let package = $(this).data('package');
                let image = $(this).data('image');
                let question = $(this).data('question');
                let description = $(this).data('description');
                let course = $(this).data('course');
                let part = $(this).data('part');

                console.log(part);

                fetchPartsAndCategories(course);
                fetchSubCategories(cate_id);


                var tempElement = document.createElement('div');
                tempElement.innerHTML = description;
                var textOnly = tempElement.textContent || tempElement.innerText || '';

                $('#question_id').val(id);
                $('#up_category_id').val(cate_id);
                $('#up_sub_category').val(sub_category_id);
                $('#up_package').val(package);
                $('#up_question').val(question);
                $('#up_course').val(course);
                $('#up_part').val(part);
                $('#up_description').text(textOnly);
                $('.imagePreview').attr('src', "{{ asset('/frontend/assets/images/question') }}" + '/' +
                    image);
                $('#questionEditModal').modal('show');

                if (editor) {
                    editor.destroy();
                }

                ClassicEditor.create(document.querySelector('#up_description'))
                    .then(newEditor => {
                        editor = newEditor;
                        editor.setData(textOnly);
                    })
                    .catch(error => {
                        console.error(error);
                    });

                $.ajax({
                    url: "{{ route('admin.find.question') }}",
                    type: "get",
                    data: {
                        id: id
                    },
                    success: function(res) {
                        var qna = res.qna;
                        console.log( qna);
                        $('#edit_question').val(qna['question']);
                        $('.edit-Answers-count').remove(); // Corrected class name

                        for (var i = 0; i < qna['answer'].length; i++) {
                            var checked = '';
                            if (qna['answer'][i]['is_correct'] == 1) {
                                checked = 'checked';
                            }
                            var html = `
            <div id="" class="row edit-Answers-count"> <!-- Corrected class name -->
                <div style="display:flex" class="col-lg-12 col-md-12 col-sm-12">
                    <input style="margin-right:9px; margin-top:-14px" type="radio" name="is_correct" class="edit_is_correct" ${checked}>
                    <input type="text" class="answer-op form-control w-90" name="up_answers[${qna['answer'][i]['id']}]" value="${qna['answer'][i]['answer']}" placeholder="Enter Answer here">
                    <button style="margin-left:25px; margin-bottom:12px; margin-top:0px" class="btn btn-danger removeAnswer" data-id="${qna['answer'][i]['id']}">Remove</button> <!-- Added class and data-id attribute -->
                </div>
            </div>`;
                            $('#edit-qna-body').append(html);
                        }
                    }

                })
            });



            // Q&A edit
            $('#QEdit').on('submit', function(e) {
                e.preventDefault();
                // console.log($(".edit-Answers-count").length);
                if ($(".edit-Answers-count").length < 4) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Warning!',
                        text: 'Add minimum 4 Answer',
                        showConfirmButton: false,
                        timer: 1500
                    });
                } else {
                    let formData = new FormData($(this)[0]);
                    let selectedCorrectAnswer = false;
                    let selectedAnswerValue = null;

                    $(".edit-Answers-count").each(function(index) {
                        let isCorrect = $(this).find(".edit_is_correct").prop('checked');
                        let answerValue = $(this).find(".answer-op").val();

                        formData.append('answers[' + index + ']', answerValue);

                        if (isCorrect) {
                            if (selectedCorrectAnswer) {
                                $(this).find(".edit_is_correct").prop('checked', false);
                            } else {
                                selectedCorrectAnswer = true;
                                selectedAnswerValue = answerValue;
                            }
                        }
                    });

                    if (selectedCorrectAnswer) {
                        formData.set('is_correct', selectedAnswerValue);
                        $.ajax({
                            processData: false,
                            contentType: false,
                            url: $(this).attr('action'),
                            type: $(this).attr('method'),
                            data: formData,
                            success: function(res) {
                                console.log(res);
                                if (res.status == 'success') {
                                    toastr.success(res.message);
                                    $('.question_table').DataTable().draw(false);
                                    $('#questionEditModal').modal('hide');
                                }
                            },
                            error: function(xhr) {
                                var errors = xhr.responseJSON.errors;
                                $.each(errors, function(key, value) {
                                    $('#' + key + '-error').text(value[0]);
                                });
                            }
                        });
                    } else {
                        Swal.fire({
                            icon: 'warning',
                            title: 'Warning!',
                            text: 'Must be select one correct answer',
                            showConfirmButton: false,
                            timer: 1500
                        });
                    }
                }
            });

            $(document).on('click', '.removeAnswer', function(e) {
                e.preventDefault();

                let id = $(this).attr('data-id');
                $.confirm({
                    title: 'Delete Confirmation',
                    content: 'Are you sure?',
                    buttons: {
                        cancel: {
                            text: 'No',
                            btnClass: 'btn-primary',
                            action: function() {
                                // Do nothing on cancel
                            }
                        },
                        confirm: {
                            text: 'Yes',
                            btnClass: 'btn-danger',
                            action: function() {
                                // Use the 'id' from the outer scope
                                $.ajax({
                                    url: "{{ route('admin.answer.delete') }}",
                                    type: 'post',
                                    data: {
                                        id: id
                                    },
                                    success: function(response) {
                                        if (response.status == "success") {
                                            toastr.success(response.message);
                                            location.reload();
                                        }
                                    },
                                    error: function(error) {
                                        // Show Toastr error message
                                        toastr.error(error.responseJSON.message);
                                    }
                                });
                            }
                        }
                    }
                });
            });

            // Question question

            $(document).on('click', '#question_delete', function(e) {
                e.preventDefault();


                let id = $(this).attr('data-id');
                $.confirm({
                    title: 'Delete Confirmation',
                    content: 'Are you sure?',
                    buttons: {
                        cancel: {
                            text: 'No',
                            btnClass: 'btn-primary',
                            action: function() {
                                // Do nothing on cancel
                            }
                        },
                        confirm: {
                            text: 'Yes',
                            btnClass: 'btn-danger',
                            action: function() {
                                // Use the 'id' from the outer scope
                                $.ajax({
                                    url: "{{ route('admin.question.delete') }}",
                                    type: 'post',
                                    data: {
                                        id: id
                                    },
                                    success: function(response) {
                                        if (response.status == "success") {
                                            toastr.success(response.message);
                                            location.reload();
                                        }
                                    },
                                    error: function(error) {
                                        // Show Toastr error message
                                        toastr.error(error.responseJSON.message);
                                    }
                                });
                            }
                        }
                    }
                });
            });




        });
</script>
@endpush