<script>
$(document).ready(function() {
    const lang = `<%= lang %>`;
    const table = $('.attributesTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: `<%= '/admin/attributes' %>`,
            type: 'GET',
            dataType: 'json',
            data: function(d) {

            }
        },
        columns: [
            {
                data: null,
                render: function(data, type, row, meta) {
                    return meta.row + meta.settings._iDisplayStart + 1;
                }
            },
            {
                data: 'title',
                render: function(data) {
                    if (!data) return `<%= trans.global.not_available %>`;
                    const words = data.split(' ');
                    return words.length > 30 ? words.slice(0, 10).join(' ') + '...' : data;
                }
            },
            {
                data: 'status',
                render: function(data, type, row) {
                    const statusMap = {
                    active: { class: 'bg-success', label: 'Active' },
                    inactive: { class: 'bg-danger', label: 'Inactive' },
                    default: { class: 'bg-secondary', label: 'Unknown' }
                    };

                    const status = statusMap[data] || statusMap.default;

                    const badgeHTML = `<span class="badge ${status.class}">${status.label}</span>`;

                    <% if (userInfo.permissions.includes('attribute_status')) { %>
                        return `<div class="attribute-status cursor-pointer" data-id="${row.id}" data-status="${data}">${badgeHTML}</div>`;
                    <% } else { %>
                        return `<div>${badgeHTML}</div>`;
                    <% } %>
                }
            },
            {
                data: 'createdAt',
                render: function(data) {
                    return data ? new Date(data).toLocaleDateString(lang) : `<%= trans.global.not_available %>`;
                }
            },
            {
            data: 'id',
            render: function(data, type, row) {
                let html = '<div class="d-flex gap-1">';

                <% if (userInfo.permissions.includes('view_attribute')) { %>
                    html += `
                        <a href="/admin/attribute/${data}" class="btn btn-sm btn-info" title="<%= trans.global.view %>">
                            <i class="fas fa-eye"></i>
                        </a>`;
                <% } %>

                <% if (userInfo.permissions.includes('edit_attribute')) { %>
                    if (!row.isSeeder) {
                        html += `
                            <a href="/admin/attribute/${data}/edit" class="btn btn-sm btn-primary" title="<%= trans.global.edit %>">
                                <i class="fas fa-edit"></i>
                            </a>`;
                    }
                <% } %>

                <% if (userInfo.permissions.includes('delete_attribute')) { %>
                    if (!row.isSeeder) {
                        html += `
                            <a href="javascript:;" class="btn btn-sm btn-danger btn-delete" data-id="${data}" onclick="confirmAction('delete', '/admin/attribute/${data}/delete', '/admin/attributes', 'DELETE')" title="<%= trans.global.delete %>">
                                <i class="fas fa-trash"></i>
                            </a>`;
                    }
                <% } %>

                html += '</div>';
                return html;
            },
                orderable: false
            }
        ],
        responsive: true,
        lengthMenu: [10, 25, 50, 100],
        stateSave: false,
        order: [[3, 'desc']],
        language: languageConfig
    });


    let editorEn = null;
    let editorAr = null;

    var editor1cfg = {}
	editor1cfg.toolbar = "mytoolbar";
	editor1cfg.toolbar_mytoolbar = "{bold,italic}|{fontname,fontsize}|{forecolor,backcolor}|removeformat"
        + "#{undo,redo,fullscreenenter,fullscreenexit,togglemore}";

    if (document.querySelector('.description_editor')) {
        editorEn = new RichTextEditor(".description_editor", editor1cfg);
    }

    if (document.querySelector('.description_editor1')) {
        editorAr = new RichTextEditor(".description_editor1", editor1cfg);
    }
    /* Form Validate For Save & Update */
    /* $("#attributeData").validate({
        rules: {
            title_en: {
                required: true,
                minlength: 3
            },
            title_ar: {
                required: true,
                minlength: 3
            },
            type: {
                required: true,
            }
        },
        messages: {
            title_en: {
                required: `<%= t(trans.validation.client_side_validate.required_message, {
                    attribute: trans.cruds.ATTRIBUTE.fields.title_en
                }) %>`,
                minlength: `<%= t(trans.validation.client_side_validate.min_length, {
                    attribute: trans.cruds.ATTRIBUTE.fields.title_en,
                    min: 3
                }) %>`,
            },
            title_ar: {
                required: `<%= t(trans.validation.client_side_validate.required_message, {
                    attribute: trans.cruds.ATTRIBUTE.fields.title_ar
                }) %>`,
                minlength: `<%= t(trans.validation.client_side_validate.min_length, {
                    attribute: trans.cruds.ATTRIBUTE.fields.title_ar,
                    min: 3
                }) %>`,
            },
            type:{
                required:`<%= t(trans.validation.client_side_validate.select_required_message, {
                    attribute: trans.cruds.ATTRIBUTE.fields.type,
                }) %>`,
            },
        },
        errorElement: 'span',
        errorPlacement: function(error, element) {
            error.addClass('invalid-feedback');
            if (element.attr("name") === "type") {
                error.insertAfter(element.next());
            } else {
                error.insertAfter(element);
            }
        },
        highlight: function(element) {
            $(element).addClass('is-invalid');
        },
        unhighlight: function(element) {
            $(element).removeClass('is-invalid');
        },
        submitHandler: function(form) {
            $(".page-loader").removeClass('d-none');
            $(".page-loader").removeClass('d-none');
            const formData = $(form).serialize();
            const url = $(form).attr("action");        
            $.ajax({
                url: url,
                type: "POST",
                data: formData,
                success: function(response) {
                    $(".page-loader").addClass('d-none');
                    if (response.status) {
                        showNotificationPopup(response.message, 'success', response.redirectUrl);
                    } else {
                        showNotificationPopup(response.message, 'error');
                    }
                },
                error: function(xhr, status, error) {
                    $(".invalid-feedback").remove();
                    $(".page-loader").addClass('d-none');

                    const errors = xhr.responseJSON && xhr.responseJSON.error ? xhr.responseJSON.error : {};
                    const message = xhr.responseJSON && xhr?.responseJSON?.message ? xhr?.responseJSON?.message : '';

                    if (errors && Object.keys(errors).length > 0) {
                        displayErrorMessage(errors);
                    } else if (message) {
                        showNotificationPopup(message, 'error');
                    } else {
                        showNotificationPopup("An unexpected error occurred.", 'error');
                    }
                }
            });
        }
    }); */

    /*  */
    $("#attributeData").validate({
        rules: {
            title_en: {
                required: true,
                minlength: 3
            },
            title_ar: {
                required: true,
                minlength: 3
            },
            type: {
                required: true,
            }
        },
        messages: {
            title_en: {
                required: `<%= t(trans.validation.client_side_validate.required_message, {
                    attribute: trans.cruds.ATTRIBUTE.fields.title_en
                }) %>`,
                minlength: `<%= t(trans.validation.client_side_validate.min_length, {
                    attribute: trans.cruds.ATTRIBUTE.fields.title_en,
                    min: 3
                }) %>`,
            },
            title_ar: {
                required: `<%= t(trans.validation.client_side_validate.required_message, {
                    attribute: trans.cruds.ATTRIBUTE.fields.title_ar
                }) %>`,
                minlength: `<%= t(trans.validation.client_side_validate.min_length, {
                    attribute: trans.cruds.ATTRIBUTE.fields.title_ar,
                    min: 3
                }) %>`,
            },
            type:{
                required:`<%= t(trans.validation.client_side_validate.select_required_message, {
                    attribute: trans.cruds.ATTRIBUTE.fields.type,
                }) %>`,
            },
        },
        errorElement: 'span',
        errorPlacement: function(error, element) {
            error.addClass('invalid-feedback');
            if (element.attr("name") === "type") {
                error.insertAfter(element.next());
            } else {
                error.insertAfter(element);
            }
        },
        highlight: function(element) {
            $(element).addClass('is-invalid');
        },
        unhighlight: function(element) {
            $(element).removeClass('is-invalid');
        },
        submitHandler: function(form) {
            const $form = $(form);
            const allowedFields = ['title_en', 'title_ar', 'description_en', 'description_ar', 'type'];
            let formData = new FormData();

            allowedFields.forEach(field => {
                const $input = $form.find(`[name="${field}"]`);
                if ($input.length > 0) {
                    formData.append(field, $input.val().trim());
                }
            });

            const type = $form.find('[name="type"]').val();
            const $parentDiv = $(`.attribute-${type}-data[data-type="${type}"]`);
            const $typeForm = $parentDiv.not(`.preview-data[data-type="${type}"]`);

            let isValid = true;

            if ($typeForm.length) {
                $typeForm.find('input').each(function () {
                    const $el = $(this);
                    const name = $el.attr('name');
                    if (!name || $el.closest('.preview-data[data-type="'+type+'"]').length) return;

                    const inputType = $el.attr('type') || 'text';
                    $el.removeClass('is-invalid');
                    $el.siblings('.invalid-feedback').remove();

                    /* if (inputType === 'file') {
                        if (inputType === 'file') {
                            const files = $el[0].files;
                            const inputName = $el.attr('name');

                            if (inputName === 'option_ar[]') {
                                const indexMatch = $el.attr('id')?.match(/_(\d+)$/);
                                const index = indexMatch ? indexMatch[1] : null;
                                const $checkbox = $(`#${type}_imageclonecheck_${index}`);
                                const isCloneChecked = $checkbox.is(':checked');

                                if (!isCloneChecked && files.length === 0) {
                                    showFieldError($el, `Please upload Arabic image for option ${index}`);
                                    isValid = false;
                                } else if (!isCloneChecked) {
                                    for (let i = 0; i < files.length; i++) {
                                        formData.append(inputName, files[i]);
                                    }
                                }
                            } else {
                                if (files.length === 0) {
                                    showFieldError($el, `Please upload a file for ${inputName}`);
                                    isValid = false;
                                } else {
                                    for (let i = 0; i < files.length; i++) {
                                        formData.append(inputName, files[i]);
                                    }
                                }
                            }
                        }

                    } */ 
                    if (inputType === 'file') {
                        const files = $el[0].files;
                        const inputName = $el.attr('name');
                        const existingImage = $el.data('existing-image-for-save');
                        const inputCount = $el.data('input-count'); 

                        if (inputName === 'option_ar[]') {
                            const indexMatch = $el.attr('id')?.match(/_(\d+)$/);
                            const index = indexMatch ? indexMatch[1] : null;
                            const $checkbox = $(`#${type}_imageclonecheck_${index}`);
                            const isCloneChecked = $checkbox.is(':checked');

                            if (!isCloneChecked && files.length === 0 && !existingImage) {
                                showFieldError($el, `Please upload Arabic image for option ${index}`);
                                isValid = false;
                            } else if (files.length > 0) {
                                for (let i = 0; i < files.length; i++) {
                                    formData.append(inputName, files[i]);
                                    if(inputCount){
                                        formData.append(`${inputName}_replace_image_index`, inputCount);
                                    }
                                }
                            } else if (existingImage) {
                                formData.append(`existing_${inputName}`, existingImage);
                            }

                        } else {
                            if (files.length === 0 && !existingImage) {
                                showFieldError($el, `Please upload a file for ${inputName}`);
                                isValid = false;
                            } else if (files.length > 0) {
                                for (let i = 0; i < files.length; i++) {
                                    formData.append(inputName, files[i]);
                                    if(inputCount){
                                        formData.append(`${inputName}_replace_image_index`, inputCount);
                                    }
                                }
                            } else if (existingImage) {
                                formData.append(`existing_${inputName}`, existingImage);
                            }
                        }
                    }else if (inputType === 'checkbox' || inputType === 'radio') {
                        if ($el.is(':checked')) {
                            formData.append(name, $el.val());
                        }
                    } else {
                        const val = $el.val().trim();
                        if (!val) {
                            showFieldError($el, `Please fill the field: ${name}`);
                            isValid = false;
                        } else {
                            formData.append(name, val);
                        }
                    }
                });
            }

            $parentDiv.find(`.${type}-form.lang-form-input-group`).removeClass('mb-3');
            if (!isValid) {
                if (['radio', 'checkbox', 'radioimage', 'checkboximage', 'toggleswitchtitle', 'toggleswitchtitleinput', 'radioimagetitle', 'checkboximagetitle', 'singleselectdropdown', 'singleselectdropdownwithsearch', 'multipleselectdropdown', 'multipleselectdropdownwithsearch'].includes(type)) {
                    $parentDiv.find(`.${type}-form .lang-form-input-group`).addClass('mb-3');
                }
                $(".page-loader").addClass('d-none');
                return false;
            }

            $(".page-loader").removeClass('d-none');
            const url = $form.attr("action");
            $.ajax({
                url: `${url}?type=${encodeURIComponent(type)}`,
                type: "POST",
                timeout: 300000,
                data: formData,
                contentType: false,
                processData: false,
                success: function(response) {
                    $(".page-loader").addClass('d-none');
                    if (response.status) {
                        showNotificationPopup(response.message, 'success', response.redirectUrl);
                    } else {
                        showNotificationPopup(response.message, 'error');
                    }
                },
                error: function(xhr, status, error) {
                    $(".invalid-feedback").remove();
                    $(".page-loader").addClass('d-none');

                    const errors = xhr.responseJSON?.error || {};
                    const message = xhr.responseJSON?.message || '';

                    if (Object.keys(errors).length > 0) {
                        displayErrorMessage(errors);
                    } else if (message) {
                        showNotificationPopup(message, 'error');
                    } else {
                        showNotificationPopup("An unexpected error occurred.", 'error');
                    }
                }
            });
        }
    });

    function showFieldError($field, message) {
        let name = $field.attr('name');
        
        if ((name == 'label_en') || (name == 'label_ar')) {
            name = `<%= trans.global.label %>`;
        } else if((name == 'placeholder_en') || (name == 'placeholder_ar')){
            name = `<%= trans.global.placeholder %>`;
        } else if ((name == 'option_en[]') || (name == 'option_ar[]')) {
            name = `<%= trans.global.option %>`;
        } else if ((name == 'option_title_en[]') || (name == 'option_title_ar[]')) {
            name = `<%= trans.global.option_title %>`;
        } else {
            name = `<%= trans.global.option %>`;
        }
        const errorId = name.replace('[]', '');
        $field.removeClass('is-invalid');
        $field.siblings('.invalid-feedback').remove();
        $field.addClass('is-invalid');

        let errorMessage = `<%= t(trans.validation.client_side_validate.required_message, { attribute: "${name}" }) %>`;

        $field.after(`
            <span id="${errorId}-error" class="error invalid-feedback">${errorMessage}</span>
        `);
    }




    function clearFieldError($input) {
        $input.removeClass('is-invalid');
        $input.siblings('.invalid-feedback').remove();
    }




    function displayErrorMessage(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');
        }
    }

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

        const $this = $(this);
        const attributeId = $this.data('id');
        const currentStatus = $this.data('status');
        const newStatus = currentStatus === 'active' ? 'inactive' : 'active';
        const url = `/admin/attribute/status-update/${attributeId}`;
        $.ajax({
            url: url,
            type: 'POST',
            data: { status: newStatus },
            success: function(response) {
                $(".page-loader").addClass('d-none');
                if (response.status) {
                    $('.attributesTable').DataTable().ajax.reload(null, false);
                    showNotificationPopup(response.message, 'success');
                } else {
                    showNotificationPopup(response.message, 'error');
                }
            },
            error: function(xhr, status, error) {
                $(".page-loader").addClass('d-none');
                console.error('Error updating status:', error);
                showNotificationPopup('Failed to update announcement status.', 'error');
            }
        });
    });
    /*  */
});
</script>
<%- include('../common-scripts/file-preview') %>