@extends('backend.layouts.app')

@section('content')
    <div class="aiz-titlebar text-left mt-2 mb-3">
        <div class="row align-items-center">
            <div class="col-md-6 col-sm-6">
                <h1 class="h3">{{ translate('Category FAQ List') }}</h1>
            </div>
            <div class="col-md-6 col-sm-6 text-md-right d-flex align-items-center" id="add_modal">
                <a href="javascript:void(0);" class="add-items-btn ml-auto clearForm" data-toggle="modal"
                    data-target="#newAttributes-modal">
                    <span><i class="icons icon-plus"></i></span> Add Category FAQ
                </a>
            </div>
        </div>
    </div>

    <div class="common-tbl-head m-0 ml-1 py-3 headerResponsive" style="border-top:1px solid #d2d2d2">
        <div class="selected-prod">Selected Lists (<span id="sProduct">0</span>)</div>
        <div class="delete-select" id="deletedData" style="display:none">
            <a href="javascript:void(0);" id="delete_records">Delete Selected <i class="icons icon-delete"></i></a>
        </div>
        <div class="ml-auto productSearch searchnadcolumnbox">
            <div class="form-group mb-0 position-relative">
                <i class="icons icon-search-s" id="memberSearch"></i>
                <input type="text" class="form-control form-control-sm" id="search" name="search"
                    @isset($sort_search) value="{{ $sort_search }}" @endisset placeholder="Search">
            </div>
        </div>
    </div>
    <div class="admin-table table-freezed" id="mytable">
    </div>
@endsection

@section('modal')
    @include('modals.delete_modal')

    <div class="modal right fade newAttributes-modal" data-refresh="true" id="newAttributes-modal" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header close-btn" style="padding: 16px 16px 0 16px">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class=""
                        style="border-bottom:1px solid rgba(0,0,0,.1);width:100%;padding:0rem 0 12px 0;font-size:18px;">
                        Add Category FAQ
                    </h4>
                </div>
                <div class="modal-body" style="padding: 16px">
                    <form method="POST" id="myform" enctype="multipart/form-data">
                        @csrf

                        <div class="">
                            <div class="row">
                                <div class="col-12">
                                    <div class="mb-3">
                                        <label for="categoryListSelect"
                                            style="font-size:14px;font-weight:600;margin:0 0 6px 0px;">
                                            Category Name List<span class="text-danger ml-1">*</span>
                                        </label>
                                        <select class="js-select2 form-control" id="categoryListSelect"
                                            name="category_list[]" style="width: 100%;" multiple="multiple">
                                            <option value="" disabled hidden>Select Categories</option>
                                            @foreach ($categoryFaq as $category)
                                                <option value="{{ $category->id }}"
                                                    @if (in_array($category->id, $selectedCategories ?? [])) selected @endif>
                                                    {{ $category->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="mb-3">
                                        <label for="statusSelect"
                                            style="font-size:14px;font-weight:600;margin:0 0 6px 0px;">
                                            Status<span class="text-danger ml-1">*</span>
                                        </label>
                                        <select class="form-control" id="statusSelect" name="status" required>
                                            <option value="active">Active</option>
                                            <option value="inactive">Inactive</option>
                                        </select>
                                    </div>
                                    <div>
                                        <label class="col-form-label"
                                            style="font-size:14px;font-weight:600;margin:0 0 6px 0px;">
                                            Category Related Question & Answer
                                        </label>
                                        <div id="keywords-container w-100">
                                            <div class=" mb-2 keyword-rating-pair "> 
                                                {{-- input-group class commented --}}
                                                <div class=" mb-2">
                                                    <textarea class="form-control" name="question" placeholder="Enter Question" required></textarea>
                                                </div>
                                                <div class=" mb-2">
                                                    <textarea class="form-control" name="answer" placeholder="Enter Answer" required></textarea>
                                                </div>
                                                <div class="input-group-append text-right">
                                                    <button class="btn btn-primary add-keyword-rating" type="button">
                                                        Add More
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer" style="border-top:0;padding:10px 0px 25px">
                            <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
                            <button type="submit" id="saveUnit" class="btn btn-primary">Add</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="modal right fade editnewAttributes-modal1" data-refresh="true" id="edittnewAttributes-modal1"
        role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header close-btn" style="padding: 16px;">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class=""
                        style="border-bottom:1px solid rgba(0,0,0,.1);width:100%;padding:0rem 0 12px 0;font-size:18px;">
                        Edit Category FAQ
                    </h4>
                </div>
                <div class="modal-body pt-1" id="editData" style="padding:16px;">
                </div>
            </div>
        </div>
    </div>

    <div class="modal right fade addPost-modal" data-refresh="true" id="addPost-modal" role="dialog">
        <div class="modal-dialog" id="modals_datas" style="min-width:800px">
        </div>
    </div>
@endsection

@section('script')
    <script type="text/javascript">
        $(document).ready(function() {
            var urls = "{{ url('admin/category/faq_list') }}"
            localStorage.setItem('paginationURL', urls);
            $('#categoryListSelect').select2({
                placeholder: "Select Categories",
                allowClear: true
            });
            dataList();
            $('#categoryListSelect').change(function() {
                var selectedOptions = $(this).val(); // Get selected values
                $('#selectedCategories').val(selectedOptions.join(',')); // Join and set as value
            });
            function dataList(){
                $.ajax({
                    type: 'GET',
                    url: "{{ url('admin/category/faq_list') }}",
                    success: function(response) {
                        $('#mytable').html(response);
                    },
                    error: function(xhr, status, error) {
                        console.error(xhr.responseText);
                    }
                });
            }

            $(document).on('click', '.remove-keyword-rating', function() {
                let masterId = $(this).closest('.keyword-rating-pair').find('input[name="master_id[]"]')
                    .val();
                if (masterId) {
                    removedKeywordIds.push(masterId);
                }
                $(this).closest('.keyword-rating-pair').remove();
                $('#removed_keyword_ids').val(removedKeywordIds.join(','));
            });

            $(document).on('click', '.add-keyword-rating', function() {
                let newPair = $('.keyword-rating-pair:first').clone(true);
                newPair.find('input').val('');
                newPair.find('.remove-keyword-rating').remove();
                newPair.find('.add-keyword-rating').remove();
                newPair.find('.input-group-append').append(
                    '<button class="btn btn-danger remove-keyword-rating" type="button">Remove</button>'
                );
                $('#keywords-container').append(newPair);
            });

            $(document).on('click', '#saveUnit', function(event) {
                event.preventDefault();
                var form = $('#myform')[0];
                var formData = new FormData(form);

                $.ajax({
                    url: "{{ route('category.add_Faq') }}",
                    data: formData,
                    processData: false,
                    contentType: false,
                    type: 'POST',
                    success: function(data) {
                        if (data.success) {
                            $("#newAttributes-modal").modal('hide');
                            AIZ.plugins.notify('success',
                            '{{ translate('Category FAQ created successfully') }}');
                            dataList();
                        } else {
                            console.log('Error in response:', data.error);
                        }
                    },
                    error: function(xhr, status, error) {
                        console.log('AJAX error:', status, error);
                    },
                    complete: function() {
                        $(".spinner").hide();
                        $("#saveData").show();
                    }
                });
            });

            // $(document).on('click', '#editUnit', function(e) {
            //     var url = $(this).data('url');
            //     $.ajax({
            //         url: url,
            //         type: 'get',
            //         success: function(e) {
            //             $("#editData").html(e);
            //         }
            //     });
            // });

            $(document).on('click', '#editUnit', function(e) {
                var url = $(this).data('url');
                $.ajax({
                    url: url,
                    type: 'get',
                    success: function(e) {
                        $("#editData").html(e);
                        $('.select2').select2();
                        initializeSelect2();
                        AIZ.plugins.tagify();

                    }
                });
            });
            $(document).on('click', '#updateCatogoryFaq', function(event) {
                event.preventDefault();
                var url = $('#myform1').attr('action');
                var form = $('#myform1')[0];
                var formData = new FormData(form);

                $.ajax({
                    url: url,
                    data: formData,
                    processData: false,
                    contentType: false,
                    type: 'POST',
                    success: function(data) {
                        if (data.success) {
                            $("#edittnewAttributes-modal1").modal('hide');
                            AIZ.plugins.notify('success',
                                '{{ translate('Category FAQ updated successfully') }}');
                                loadStoredPagination();
                        } else {
                            console.log('Error in response:', data.error);
                        }
                    },
                    error: function(error) {
                        console.log(error.name);
                    },

                });
            });
        function loadStoredPagination() {
            var storedURL = localStorage.getItem('paginationURL');  
            
            if (storedURL) {
                $.ajax({
                    url: storedURL,
                    cache: false,
                    success: function(data) { 
                        $("#mytable").html(data); 
                    }
                });
            }
        } 
            $(document).on('click', '#deletebtn', function(e) {
                e.preventDefault();
                var url = $(this).attr('data-href');
                var deleteModal = $('#delete-modal');

                deleteModal.modal({
                    backdrop: 'static',
                    keyboard: false
                });

                $('#delete-link').one('click', function(e) {
                    e.preventDefault();
                    $.ajax({
                        url: url,
                        type: "GET",
                        success: function(response) {
                            deleteModal.modal('hide');
                            AIZ.plugins.notify('success',
                                '{{ translate('Category Faq(s) deleted successfully') }}'
                            );
                            loadStoredPagination();
                        },
                        error: function(xhr) {
                            deleteModal.modal('hide');
                            AIZ.plugins.notify('danger',
                                '{{ translate('Error deleting Category Faq(s)') }}'
                            );
                        }
                    });
                });
            });

            $(document).on('change', "#checkAll", function() {
                $(".product_checkbox").prop('checked', $(this).prop("checked"));
                updateSelectedCount();
                updateDeleteControls();
            });

            $(document).on('click', '.product_checkbox', function() {
                updateSelectedCount();
                updateDeleteControls();
            });

            function updateSelectedCount() {
                const selectedCount = $('.product_checkbox:checked').length;
                $("#sProduct").text(selectedCount);
            }

            function updateDeleteControls() {
                const selectedCount = $('.product_checkbox:checked').length;
                if (selectedCount > 0) {
                    $("#deletedData, .selected-prod").css("display", "block");
                } else {
                    $("#deletedData, .selected-prod").css("display", "none");
                }
            }

            $(document).on('click', '#delete_records', function() {
                var selectedIds = [];
                var deleteModal = $('#delete-modal');

                $(".product_checkbox:checked").each(function() {
                    selectedIds.push($(this).val());
                });

                if (selectedIds.length === 0) {
                    alert("Please select records.");
                } else {
                    deleteModal.modal({
                        backdrop: 'static',
                        keyboard: false
                    });

                    $('#delete-link').one('click', function(e) {
                        e.preventDefault();
                        $.ajax({
                            type: "POST",
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            url: "{{ url('admin/category/multidelete/faq_list') }}",
                            data: {
                                emp_id: selectedIds.join(",")
                            },
                            success: function(response) {
                                selectedIds.forEach(function(id) {

                                    $("#" + id).closest("tr").remove();
                                });
                                updateSelectedCount();
                                updateDeleteControls();
                                AIZ.plugins.notify('success',
                                    '{{ translate('Category Faq(s) deleted successfully') }}'
                                );
                                deleteModal.modal('hide');
                                // loadStoredPagination();
                            },
                            error: function(xhr) {
                                AIZ.plugins.notify('danger',
                                    '{{ translate('Error deleting Category Faq(s)') }}'
                                );
                                deleteModal.modal('hide');
                            }
                        });
                    });
                }
            });
            $(document).on("keypress", "input[name='search']", function(event) {
                if (event.keyCode == 13) {
                    var searchTerm = $(this).val();
                    memberSearchAjax(searchTerm);
                }
            });

            $(document).on("click", "#memberSearch", function(event) {
                var searchTerm = $("input[name='search']").val();
                memberSearchAjax(searchTerm);
            });

            var typingTimer;
            var doneTypingInterval = 1000;

            function memberSearchAjax(searchTerm) {
                var url = "{{ url('/admin/category/faq_list') }}";
                var data = {
                    'search': searchTerm
                };
                $.ajax({
                    url: url,
                    method: 'GET',
                    data: data,
                    success: function(response) {
                         $('#mytable').html(response);
                    },
                    error: function(xhr, status, error) {
                        console.error('AJAX Error: ' + error);
                    }
                });
            }



        });
    </script>
@endsection