<script>
$(document).ready(function() {
    const lang = `<%= lang %>`;
    const table = $('.seosTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: `<%= '/admin/seos' %>`,
            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: 'viewType', 
                render: function(data, type, row) {
                    return data ? data?.label : `<%= 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('seo_status')) { %>
                        return `<div class="seo-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_seo')) { %>
                        html += `<a href="/admin/seo/${data}" class="btn btn-sm btn-info btn-view seoUser" title="<%= trans.global.view %>">
                                    <i class="fas fa-eye"></i>
                                </a>`;
                    <% } %>
                    <% if(userInfo.permissions.includes('edit_seo')){ %>
                        html += `<a href="/admin/seo/${data}/edit" class="btn btn-sm btn-primary btn-edit seoUser" title="<%= trans.global.edit %>">
                            <i class="fas fa-edit"></i>
                        </a>`;
                    <% } %>
                    <% if(userInfo.permissions.includes('delete_seo')){ %>
                        html += `<a href="javascript:;" class="btn btn-sm btn-danger btn-delete" data-id="${data}" title="<%= trans.global.delete %>" onclick="confirmAction('delete', '/admin/seo/${data}/delete', '/admin/seos', '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,
    });

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

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

    const isEdit = $(document).find("#pageType").val() || null;
    if (isEdit && Number(isEdit) == 1) {
        const checkbox = document.getElementById("sameAsClone");
        const arabicSection = document.getElementById("arabic_banner_section");

        if (checkbox) checkbox.checked = false;
        if (arabicSection) arabicSection.style.display = "block";
    }
    /*  */

    /* Form Validate For Save & Update */
    $("#seoData").validate({
        rules: {
            title_en: {
                required: true,
                minlength: 3
            },
            title_ar: {
                required: true,
                minlength: 3
            },
            description_en: {
                required: true,
            },
            description_ar: {
                required: true,
            },
        },
        messages: {
            title_en: {
                required: `<%= t(trans.validation.client_side_validate.required_message, {
                    attribute: trans.cruds.SEO.fields.title_en
                }) %>`,
                minlength: `<%= t(trans.validation.client_side_validate.min_length, {
                    attribute: trans.cruds.SEO.fields.title_en,
                    min: 3
                }) %>`,
            },
            title_ar: {
                required: `<%= t(trans.validation.client_side_validate.required_message, {
                    attribute: trans.cruds.SEO.fields.title_ar
                }) %>`,
                minlength: `<%= t(trans.validation.client_side_validate.min_length, {
                    attribute: trans.cruds.SEO.fields.title_ar,
                    min: 3
                }) %>`,
            },
            description_en: {
                required: `<%= t(trans.validation.client_side_validate.required_message, {
                    attribute: trans.cruds.SEO.fields.title_en
                }) %>`,
            },
            description_ar: {
                required: `<%= t(trans.validation.client_side_validate.required_message, {
                    attribute: trans.cruds.SEO.fields.title_ar
                }) %>`,
            },
        },
        errorElement: 'span',
        errorPlacement: function(error, element) {
            error.addClass('invalid-feedback');
            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 description_en = $('textarea[name="description_en"]').val();
            const description_ar = $('textarea[name="description_ar"]').val();

            const formData = new FormData(form);

            const url = $(form).attr("action");
            for (const [key, value] of formData.entries()) {
                console.log(`${key}: ${value}`);
            }

            $.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) {
                    $(".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');
                    }
                }
            });
            return false;
        }
    });

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

function toggleArabicBanner(checkbox) {
    const section = document.getElementById("arabic_banner_section");

    if (checkbox.checked) {
        section.style.display = "none";
    } else {
        section.style.display = "block";
    }
}
</script>

<%- include('../common-scripts/file-preview') %>