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

@section('content')
    <style>
        .faqs_table {
            overflow: auto;
        }
    </style>
    <div class="row">
        {{-- add user modal --}}
        <div class="modal fade" id="faqsAddModal" 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 Faq</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">

                        <form action="{{ route('admin.faq.submit') }}" method="POST" id="faqscreate"
                            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="course-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_id-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>
                                    <span class="text-danger error-message" id="sub_category_id-error"></span>

                                </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>
                                    <span class="text-danger error-message" id="package-error"></span>
                                    

                                </div>


                                <p style="color:rgb(87, 6, 90); font-size:17px; font-weight:bold; margin-top:20px">>>> FAQ
                                    Part : </p>
                                <div class="form-group">
                                    <label for="title">Title <span style="color: red; font-weight:bold">*</span></label>
                                    <textarea name="title" id="title" rows="12" class="rounded form-control" placeholder=""></textarea>
                                    <span class="text-danger error-message" id="title-error"></span>
                                </div>

                                <div class="form-group">
                                    <label for="description">Description <span
                                            style="color: red; font-weight:bold">*</span></label>
                                    <textarea name="description" id="description" rows="12" class="rounded form-control" placeholder=""></textarea>
                                    <span class="text-danger error-message" id="description-error"></span>
                                </div>


                                <p style="color:rgb(87, 6, 90); font-size:17px; font-weight:bold; margin-top:20px">>>> FAQ
                                    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>




















                            </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 Faq</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>


        {{-- news edit modal start --}}

        <!-- Modal -->
        <div class="modal fade" id="faqEditModal" tabindex="-1" aria-labelledby="exampleModalLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">FAQ Edit</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>

                    </div>
                    <div class="modal-body">
                        <form id="faqEditFrom" action="{{ route('admin.faq.edit') }}" method="POST"
                            class="form-horizontal mt-2 sales-form" enctype="multipart/form-data">
                            @csrf


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

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



                                        {{-- <option value="0">Knowledge</option>
                                        <option value="1">Skill</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">MRCS PART A</option>
                                    <option value="2">MRCS PART B</option>
                                    <option value="3">MRCS PART C</option>



                                </select>

                            </div>


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


                            <div class="row mb-3">
                                <div class="col-md-12 col-lg-12 col-xs-12 col-sm-12">
                                    <label class="control-label">Title <span
                                            style="color:red;font-weight:bold">*</span></label>
                                    <textarea id="up_title" name="up_title" class="form-control rounded" placeholder="Faq title" type="text"></textarea>
                                    <span class="text-danger error-message" id="up_title-error"></span>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-12 col-lg-12 col-xs-12  col-sm-12">
                                    <label class="control-label">Description </small> <span
                                            style="color:red;font-weight:bold">*</span></label>
                                    <textarea name="up_description" id="dec_edit" rows="12" class="form-control rounded up_description"
                                        placeholder=""></textarea>
                                    <div class="text-danger  error-up_description"></div>
                                </div>
                            </div>

                            <p style="color:rgb(87, 6, 90); font-size:17px; font-weight:bold; margin-top:20px">>>> FAQ
                                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>




                            <button type="submit" class="btn btn-primary float-right mt-4">Update</button>
                        </form>
                    </div>

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

        {{-- news edit modal close --}}
        <div class="col-md-12">
            <section class="content">
                <!-- Default box -->
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Faqs List</h3>
                        <a href="" class="float-right btn btn-primary btn-sm" data-toggle="modal"
                            data-target="#faqsAddModal"> <i class="fas fa-plus-circle"></i> Add Faqs</a>
                    </div>
                    <!-- /.card-header -->
                    <div style="overflow-y:auto" class="card-body">
                        <table class="table table-bordered table-striped faqs_table">
                            <thead>
                                <tr>
                                    <th>SL</th>
                                    <th>Category</th>
                                    <th>Sub Category</th>
                                    <th>Title</th>
                                    <th>Description</th>
                                    <th>Status</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                    <!-- /.card-body -->
                </div>
                <!-- /.card-body -->
                <!-- /.card -->
            </section>
        </div>
    </div>
@endsection

@push('js')
    <script>
        // description editor js start
        let descriptionEditorInstance;
        let titleEditorInstance;

        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 => {
                descriptionEditorInstance = editor;
            })
            .catch(error => {
                console.error(error);
            });

        ClassicEditor
            .create(document.querySelector('#title'), {
                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 => {
                titleEditorInstance = editor;
            })
            .catch(error => {
                console.error(error);
            });




        $(document).ready(function() {



            $(function() {

                var table = $('.faqs_table').DataTable({

                    dom: "lBfrtip",
                    buttons: ["copy", "csv", "excel", "pdf", "print"],

                    pageLength: 25,
                    processing: true,
                    serverSide: true,
                    searchable: true,
                    "ajax": {
                        "url": "{{ route('admin.faq.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: '8%'
                        },
                        {
                            data: 'sub category',
                            name: 'sub category',
                            sWidth: '8%'
                        },
                        {
                            data: 'title',
                            name: 'title',
                            sWidth: '12%'
                        },
                        {
                            data: 'description',
                            name: 'description',
                            sWidth: '22%'
                        },
                        {
                            data: 'status',
                            name: 'status',
                            sWidth: '10%'
                        },

                        {
                            data: 'action',
                            name: 'action',
                            sWidth: "15%",
                            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();

                });


            });










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

                var formData = new FormData(this);
                var form = this;

                $.ajax({
                    url: $(this).attr('action'),
                    type: $(this).attr('method'),
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function(res) {
                        console.log(res);
                        $('.error-message').html('');
                        if (res.errors) {
                            $.each(res.errors, function(key, value) {
                                $('#' + key + '-error').html(value[0]);
                            });
                        }
                        if (res.status == 'success') {
                            toastr.success(res.message);
                            $('.faqs_table').DataTable().draw(false);
                            $('#faqsAddModal').modal('hide');
                            
                            // Reset CKEditor content
                            if (titleEditorInstance) {
                                titleEditorInstance.setData('');
                            }
                            if (descriptionEditorInstance) {
                                descriptionEditorInstance.setData('');
                            }
                            form.reset();
                        }
                    },
                    error: function(xhr) {
                        var errors = xhr.responseJSON.errors;
                        $.each(errors, function(key, value) {
                            $('#' + key + '-error').text(value[0]);
                        });
                    }
                });
            });

            // FAQ edit
            let editorTitle, editorDescription;

            $(document).on('click', '.editFaq', function(e) {
                e.preventDefault();
                let id = $(this).data('id');
                let title = $(this).data('title');
                let description = $(this).data('description');
                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 part = $(this).data('part');
                let course = $(this).data('course');

                

                fetchPartsAndCategories(course);
                fetchSubCategories(cate_id);

                // Create a temporary element to extract text content
                var tempElement = document.createElement('div');
                tempElement.innerHTML = description;
                var textOnlyDescription = tempElement.textContent || tempElement.innerText || '';

                tempElement.innerHTML = title;
                var textOnlyTitle = tempElement.textContent || tempElement.innerText || '';

                // Set up the form fields with the retrieved data
                $('input[name="status"][value="' + status + '"]').prop('checked', true);
                $('#faq_id').val(id);
                $('#up_title').text(textOnlyTitle);
                $('#dec_edit').text(textOnlyDescription);
                $('#up_category_id').val(cate_id);
                $('#up_sub_category').val(sub_category_id);
                $('#up_package').val(package);
                $('#up_course').val(course);
                $('#up_part').val(part);
                $('.imagePreview').attr('src', "{{ asset('/frontend/assets/images/faqs') }}" + '/' +
                image);

                // Show the modal
                $('#faqEditModal').modal('show');

                // Destroy previous editors, if any
                if (editorTitle) {
                    editorTitle.destroy();
                }
                if (editorDescription) {
                    editorDescription.destroy();
                }

                // Create CKEditor instances for the title and description fields
                ClassicEditor.create(document.querySelector('#up_title'))
                    .then(newEditor => {
                        editorTitle = newEditor;
                        editorTitle.setData(title);
                    })
                    .catch(error => {
                        console.error('Error initializing title editor:', error);
                    });

                ClassicEditor.create(document.querySelector('#dec_edit'))
                    .then(newEditor => {
                        editorDescription = newEditor;
                        editorDescription.setData(description);
                    })
                    .catch(error => {
                        console.error('Error initializing description editor:', error);
                    });
            });

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

                var formData = new FormData($(this)[0]);

                $.ajax({
                    url: $(this).attr('action'),
                    type: $(this).attr('method'),
                    data: formData,
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function(res) {
                        console.log(res);
                        toastr.success(res.message);
                        $('#faqEditModal').modal('hide');
                        $('.faqs_table').DataTable().draw(false);
                    },
                    error: function(xhr) {
                        console.log(xhr);
                        if (xhr.responseJSON && xhr.responseJSON.errors) {
                            // Handle errors here, e.g., display them in a toastr or alert
                            toastr.error('An error occurred. Please check your input.');
                        }
                    }
                });
            });



            // sub category show
            // $(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);
            //         }
            //     });
            // });

            // 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);
});
$(document).on('change', '#up_category_id', function(e) {
    e.preventDefault();
    let id = $(this).val();
    fetchSubCategories(id);
});

            // faq delete

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


                let id = $(this).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.faq.delete') }}",
                                    type: 'post',
                                    data: {
                                        id: id,
                                        _token: '{{ csrf_token() }}' // Include the CSRF token for security
                                    },
                                    success: function(response) {
                                        if (response.status == "success") {
                                            toastr.success(response.message);
                                            $('.faqs_table').DataTable().draw(false);

                                        }
                                    },
                                    error: function(error) {
                                        // Show Toastr error message
                                        toastr.error(error.responseJSON.message);
                                    }
                                });
                            }
                        }
                    }
                });
            });

        });

        // news edit code
    </script>
@endpush