<script>
$(document).ready(function() {
    const lang = `<%= lang %>`;
    const table = $('.brandsTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: `<%= '/admin/brands' %>`,
            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, type, row) {
                    if (data && data.split(' ').length > 30) {
                        return data.split(' ').slice(0, 10).join(' ') + '...';
                    }
                    return data ? data : `<%= trans.global.not_available %>`;
                }
            },
            {
                data: 'status',
                render: function(data, type, row) {
                    let statusClass = '';
                    let statusText = '';

                    switch (data) {
                    case 'active':
                        statusClass = 'bg-success';
                        statusText = 'Active';
                        break;
                    case 'inactive':
                        statusClass = 'bg-danger';
                        statusText = 'Inactive';
                        break;
                    default:
                        statusClass = 'bg-secondary';
                        statusText = 'Unknown';
                    }

                    <% if (userInfo.permissions.includes('brand_status')) { %>
                        return `<div class="brand-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('view_brand')) { %>
                        html += `<a href="/admin/brand/${data}" class="btn btn-sm btn-info btn-view brandUser" title="<%= trans.global.view %>">
                                    <i class="fas fa-eye"></i>
                                </a>`;
                    <% } %>
                    <% if(userInfo.permissions.includes('edit_brand')){ %>
                        html += `<a href="/admin/brand/${data}/edit" class="btn btn-sm btn-primary btn-edit brandUser" title="<%= trans.global.edit %>">
                            <i class="fas fa-edit"></i>
                        </a>`;
                    <% } %>
                    <% if(userInfo.permissions.includes('delete_brand')){ %>
                        html += `<a href="javascript:;" class="btn btn-sm btn-danger btn-delete" data-id="${data}" title="<%= trans.global.delete %>" onclick="confirmAction('delete', '/admin/brand/${data}/delete', '/admin/brands', '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 */
    $("#brandData").validate({
        rules: {
            title_en: {
                required: true,
                minlength: 3
            },
            title_ar: {
                required: true,
                minlength: 3
            },
        },
        messages: {
            title_en: {
                required: `<%= t(trans.validation.client_side_validate.required_message, {
                    attribute: trans.cruds.BRAND.fields.title_en
                }) %>`,
                minlength: `<%= t(trans.validation.client_side_validate.min_length, {
                    attribute: trans.cruds.BRAND.fields.title_en,
                    min: 3
                }) %>`,
            },
            title_ar: {
                required: `<%= t(trans.validation.client_side_validate.required_message, {
                    attribute: trans.cruds.BRAND.fields.title_ar
                }) %>`,
                minlength: `<%= t(trans.validation.client_side_validate.min_length, {
                    attribute: trans.cruds.BRAND.fields.title_ar,
                    min: 3
                }) %>`,
            },
        },
        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');
            const formData = new FormData(form);
            const url = $(form).attr("action");
            $.ajax({
                url: url,
                type: "POST",
                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 && 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');
                    }
                }
            });
        }
    });

    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', '.brand-status', function(e) {
        e.preventDefault();
        $(".page-loader").removeClass('d-none');

        const $this = $(this);
        const brandId = $this.data('id');
        const currentStatus = $this.data('status');
        const newStatus = currentStatus === 'active' ? 'inactive' : 'active';
        const url = `/admin/brand/status-update/${brandId}`;
        $.ajax({
            url: url,
            type: 'POST',
            data: { status: newStatus },
            success: function(response) {
                $(".page-loader").addClass('d-none');
                if (response.status) {
                    $('.brandsTable').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') %>