<script>
    $(document).ready(function() {
        const lang = `<%= lang %>`;
        const table = $('.settingsTable').DataTable({
            processing: true,
            serverSide: true,
            pageLength: 50,
            ajax: {
                url: `<%= '/admin/settings' %>`,
                type: 'GET',
                dataType: 'json',
                data: function(d) {
                    const selectedStatus = $('#statusFilter').val();
                    d.status = selectedStatus ? selectedStatus : '';
                    d.sortColumn = d.order[0].column;
                    d.sortOrder = d.order[0].dir;
                }
            },
            columns: [
                { 
                    data: null,
                    render: function(data, type, row, meta) {
                        return meta.row + meta.settings._iDisplayStart + 1;
                    }
                },
                { data: 'details' },
                {
                    data: 'status',
                    render: function(data, type, row) {
                        const statusClass = data === 1 ? 'bg-success' : 'bg-danger';
                        const statusText = data === 1 ? 'Active' : 'Inactive';
                        <% if(userInfo.permissions.includes('setting_status')){ %>
                            return `<div class="setting-status cursor-pointer" data-id="${row.id}" data-status="${data}">
                                        <span class="badge ${statusClass}">${statusText}</span>
                                    </div>`;
                        <% } else { %>
                            return `<div class="">
                                        <span class="badge ${statusClass}">${statusText}</span>
                                    </div>`;
                        <% } %>
                    }
                },
                { 
                    data: 'createdAt',
                    render: function(data) {
                        if (!data) return `<%= trans.global.not_available %>`;
                        return new Date(data).toLocaleDateString(`${lang}`);
                    }
                },
                {
                    data: 'id',
                    render: function(data) {
                        let html = '<div class="d-flex gap-1">';
                        <% if(userInfo.permissions.includes('edit_setting')){ %>
                            html += `<a href="/admin/setting/edit/${data}" class="btn btn-sm btn-primary btn-edit editSetting" data-id="${data}" title="<%= trans.global.edit %>">
                                <i class="fas fa-edit"></i>
                            </a>`;
                        <% } %>
                        html += `</div>`;
                        return html;
                    },
                    orderable: false
                }
            ],
            responsive: true,
            lengthMenu: [10, 25, 50, 100],
            stateSave: false,
            order: [[3, 'DESC']],
            language: languageConfig,
        });

    
        /* $('#statusFilter').change(function() {
            table.draw();
        }); */

        var editor1cfg = {};
        editor1cfg.toolbar = "basic";
        var editor1 = '';
        var editor2 = '';
        if (document.querySelector('.description_editor_en')) {
            editor1 = new RichTextEditor(".description_editor_en", editor1cfg);
        }

        if (document.querySelector('.description_editor_ar')) {
            editor2 = new RichTextEditor(".description_editor_ar", editor1cfg);
        }
        /* Form Validate For Save & Update */
        $(document).on('submit', '#settingData', function (e) {
            e.preventDefault();
            let form = this;
            let isValid = true;

            $('.invalid-feedback').remove();
            $('.is-invalid').removeClass('is-invalid');
            $('.error_editor_column_en').addClass('d-none');
            $('.error_editor_column_ar').addClass('d-none');

            const formData = new FormData();

            const displayNameEn = $('#display_name_en').val().trim();
            const displayNameAr = $('#display_name_ar').val().trim();
            const type = $("#setting_type").val();
            const fileInput = document.querySelector('#formFile');
            const contentEditorEn = document.querySelector('.description_editor_en');
            const contentEditorAr = document.querySelector('.description_editor_ar');

            if (!displayNameEn || displayNameEn.length < 3) {
                isValid = false;
                const error = $('<span class="invalid-feedback d-block">'
                    + `<%= t(trans.validation.client_side_validate.min_length, {
                        attribute: trans.cruds.SETTING.fields.title + ' (EN)',
                        min: 3
                    }) %>` + '</span>');
                $('#display_name_en').addClass('is-invalid').after(error);
            } else {
                formData.append('display_name_en', displayNameEn);
            }

            if (!displayNameAr || displayNameAr.length < 3) {
                isValid = false;
                const error = $('<span class="invalid-feedback d-block">'
                    + `<%= t(trans.validation.client_side_validate.min_length, {
                        attribute: trans.cruds.SETTING.fields.title + ' (AR)',
                        min: 3
                    }) %>` + '</span>');
                $('#display_name_ar').addClass('is-invalid').after(error);
            } else {
                formData.append('display_name_ar', displayNameAr);
            }

            // Type: String
            if (type === 'string') {
                const valueEn = $('#value_en').val().trim();
                if (!valueEn) {
                    isValid = false;
                    const error = $('<span class="invalid-feedback d-block">'
                        + `<%= t(trans.validation.client_side_validate.required_message, {
                            attribute: trans.cruds.SETTING.fields.value + ' (EN)'
                        }) %>` + '</span>');
                    $('#value_en').addClass('is-invalid').after(error);
                } else {
                    formData.append('value_en', valueEn);
                }

                const valueAr = $('#value_ar').val().trim();
                if (!valueAr) {
                    isValid = false;
                    const error = $('<span class="invalid-feedback d-block">'
                        + `<%= t(trans.validation.client_side_validate.required_message, {
                            attribute: trans.cruds.SETTING.fields.value + ' (AR)'
                        }) %>` + '</span>');
                    $('#value_ar').addClass('is-invalid').after(error);
                } else {
                    formData.append('value_ar', valueAr);
                }
            }

            // Type: Text (Rich Text Editors)
            if (type === 'text' && contentEditorEn && contentEditorAr) {
                const content1 = editor1.getHTMLCode().trim();
                const content2 = editor2.getHTMLCode().trim();

                const isEmpty1 = content1 === '' || content1 === '<p></p>' || content1 === '<p><br></p>';
                const isEmpty2 = content2 === '' || content2 === '<p></p>' || content2 === '<p><br></p>';

                if (isEmpty1) {
                    isValid = false;
                    $('.description_editor_en').addClass('is-invalid');
                    $('.error_editor_column_en').removeClass('d-none');
                } else {
                    formData.append('value_en', content1);
                }

                if (isEmpty2) {
                    isValid = false;
                    $('.description_editor_ar').addClass('is-invalid');
                    $('.error_editor_column_ar').removeClass('d-none');
                } else {
                    formData.append('value_ar', content2);
                }
            }

            // Type: Image
            if (type === 'image' && fileInput) {
                const imagePreview = document.getElementById('imagePreview');
                const dummyImageSrc = '/backend/images/dummy-image.jpg';
                const currentImageSrc = imagePreview.getAttribute('src');

                if (!fileInput.files.length && currentImageSrc.includes(dummyImageSrc)) {
                    isValid = false;
                    const error = $('<span class="invalid-feedback d-block">'
                        + `<%= t(trans.validation.client_side_validate.upload_file, {}) %>` + '</span>');
                    $(fileInput).addClass('is-invalid').after(error);
                } else if (fileInput.files.length) {
                    formData.append('value', fileInput.files[0]);
                }
            }

            if (!isValid) return false;

            const url = $(form).attr("action");
            $(".page-loader").removeClass('d-none');
            $.ajax({
                url: url,
                type: "POST",
                data: formData,
                processData: false,
                contentType: false,
                success: function (response) {
                    $(".page-loader").addClass('d-none');
                    if (response.status) {
                        showNotificationPopup(response.message, 'success', `<%= '/admin/settings' %>`);
                    } else {
                        showNotificationPopup(response.message, 'error');
                    }
                },
                error: function (xhr, status, error) {
                    $(".page-loader").addClass('d-none');
                    const errors = xhr?.responseJSON?.error;
                    if (errors) {
                        for (const field in errors) {
                            let fieldElement = $(`input[name="${field}"], select[name="${field}"], textarea[name="${field}"]`);
                            const fieldError = errors[field];
                            const errorSpan = $("<span>").addClass("error invalid-feedback").text(fieldError);
                            fieldElement.after(errorSpan);
                            fieldElement.addClass('is-invalid');
                        }
                    } else {
                        showNotificationPopup(`<%= t(trans.messages.oops_something_went_wrong, {
                            attribute: trans.cruds.MODULE.SETTING
                        }) %>`, 'error');
                    }
                }
            });
        });

        $(document).on('click', '.setting-status', function(e) {
            e.preventDefault();
            $(".page-loader").removeClass('d-none');

            const $this = $(this);
            const settingId = $this.data('id');
            const currentStatus = $this.data('status');
            const newStatus = currentStatus === 1 ? 0 : 1;

            const url = `<%= '/admin/setting/status-update/${settingId}' %>`;
            $.ajax({
                url: url,
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({ status: newStatus }),
                success: function(response) {
                    $(".page-loader").addClass('d-none');
                    if (response.status) {
                        showNotificationPopup(response.message, 'success', '/admin/settings');
                    } else {
                        showNotificationPopup(response.message, 'error');
                    }
                },
                error: function(xhr, status, error) {
                    $(".page-loader").addClass('d-none');
                    showNotificationPopup('Failed to update setting status.', 'error');
                }
            });
        });
    });
    </script>
    <%- include('../common-scripts/file-preview') %>