<script>
$(document).ready(function() {
    const lang = `<%= lang %>`;
    const table = $('.tiersTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: `<%= '/admin/tiers' %>`,
            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: 'tierNumber', 
                render: function(data, type, row) {
                    return data ? data : `<%= trans.global.not_available %>`;
                }
            },
            { 
                data: 'applicableFeePercent', 
                render: function(data, type, row) {
                    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('tier_status')) { %>
                        return `<div class="tier-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_tier')) { %>
                        html += `<a href="/admin/tier/${data}" class="btn btn-sm btn-info btn-view tierUser" title="<%= trans.global.view %>">
                                    <i class="fas fa-eye"></i>
                                </a>`;
                    <% } %>
                    <% if(userInfo.permissions.includes('edit_tier')){ %>
                        html += `<a href="/admin/tier/${data}/edit" class="btn btn-sm btn-primary btn-edit tierUser" title="<%= trans.global.edit %>">
                            <i class="fas fa-edit"></i>
                        </a>`;
                    <% } %>
                    /* <% if(userInfo.permissions.includes('delete_tier')){ %>
                        html += `<a href="javascript:;" class="btn btn-sm btn-danger btn-delete" data-id="${data}" title="<%= trans.global.delete %>" onclick="confirmAction('delete', '/admin/tier/${data}/delete', '/admin/tiers', 'DELETE')">
                            <i class="fas fa-trash"></i>
                        </a>`;
                    <% } %> */
                    html += `</div>`;
                    return html;
                },
                orderable: false
            }
        ],
        responsive: true,
        lengthMenu: [10, 25, 50, 100],
        stateSave: false,
        order: [[5, 'asc']],
        language: languageConfig,
    });

    /* Form Validate For Save & Update */
    $("#tierData").validate({
        rules: {
            title_en: {
                required: true,
                minlength: 3
            },
            title_ar: {
                required: true,
                minlength: 3
            },
            tierNumber: {
                required: true
            },
            maxPostedListings: {
                required: true,
                number: true,
                min: 0
            },
            listingDurationDays: {
                required: true,
                number: true,
                min: 0,
                max: 365
            },
            annualSubscription: {
                required: true,
                number: true,
                min: 0
            },
            applicableFeePercent: {
                required: true,
                number: true,
                min: 0,
                max: 100
            },
            maxFee: {
                required: true,
                number: true,
                min: 0
            }
        },
        messages: {
            title_en: {
                required: `<%= t(trans.validation.client_side_validate.required_message, {
                    attribute: trans.cruds.TIER.fields.title_en
                }) %>`,
                minlength: `<%= t(trans.validation.client_side_validate.min_length, {
                    attribute: trans.cruds.TIER.fields.title_en,
                    min: 3
                }) %>`
            },
            title_ar: {
                required: `<%= t(trans.validation.client_side_validate.required_message, {
                    attribute: trans.cruds.TIER.fields.title_ar
                }) %>`,
                minlength: `<%= t(trans.validation.client_side_validate.min_length, {
                    attribute: trans.cruds.TIER.fields.title_ar,
                    min: 3
                }) %>`
            },
            tierNumber: {
                required: `<%= t(trans.validation.client_side_validate.required_message, {
                    attribute: trans.cruds.TIER.fields.tierNumber
                }) %>`
            },
            maxPostedListings: {
                required: `<%= t(trans.validation.client_side_validate.required_message, {
                    attribute: trans.cruds.TIER.fields.maxPostedListings
                }) %>`,
                number: `<%= t(trans.validation.number_base, {
                    attribute: trans.cruds.TIER.fields.maxPostedListings
                }) %>`,
                min: `<%= t(trans.validation.number_min, {
                    attribute: trans.cruds.TIER.fields.maxPostedListings,
                    min: 0
                }) %>`
            },
            listingDurationDays: {
                required: `<%= t(trans.validation.client_side_validate.required_message, {
                    attribute: trans.cruds.TIER.fields.listingDurationDays
                }) %>`,
                number: `<%= t(trans.validation.number_base, {
                    attribute: trans.cruds.TIER.fields.listingDurationDays
                }) %>`,
                min: `<%= t(trans.validation.number_min, {
                    attribute: trans.cruds.TIER.fields.listingDurationDays,
                    min: 0
                }) %>`,
                max: `<%= t(trans.validation.number_max, {
                    attribute: trans.cruds.TIER.fields.listingDurationDays,
                    max: 365
                }) %>`
            },
            annualSubscription: {
                required: `<%= t(trans.validation.client_side_validate.required_message, {
                    attribute: trans.cruds.TIER.fields.annualSubscription
                }) %>`,
                number: `<%= t(trans.validation.number_base, {
                    attribute: trans.cruds.TIER.fields.annualSubscription
                }) %>`,
                min: `<%= t(trans.validation.number_min, {
                    attribute: trans.cruds.TIER.fields.annualSubscription,
                    min: 0
                }) %>`
            },
            applicableFeePercent: {
                required: `<%= t(trans.validation.client_side_validate.required_message, {
                    attribute: trans.cruds.TIER.fields.applicableFeePercent
                }) %>`,
                number: `<%= t(trans.validation.number_base, {
                    attribute: trans.cruds.TIER.fields.applicableFeePercent
                }) %>`,
                min: `<%= t(trans.validation.number_min, {
                    attribute: trans.cruds.TIER.fields.applicableFeePercent,
                    min: 0
                }) %>`,
                max: `<%= t(trans.validation.number_max, {
                    attribute: trans.cruds.TIER.fields.applicableFeePercent,
                    max: 100
                }) %>`
            },
            maxFee: {
                required: `<%= t(trans.validation.client_side_validate.required_message, {
                    attribute: trans.cruds.TIER.fields.maxFee
                }) %>`,
                number: `<%= t(trans.validation.number_base, {
                    attribute: trans.cruds.TIER.fields.maxFee
                }) %>`,
                min: `<%= t(trans.validation.number_min, {
                    attribute: trans.cruds.TIER.fields.maxFee,
                    min: 0
                }) %>`
            }
        },
        errorElement: 'span',
        errorPlacement: function(error, element) {
            error.addClass('invalid-feedback');
            if (element.attr("name") === "tierNumber") {
                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(`<%= t(trans.messages.oops_something_went_wrong, {
                            attribute: trans.cruds.MODULE.TIER,
                        }) %>`, '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', '.tier-status', function(e) {
        e.preventDefault();
        $(".page-loader").removeClass('d-none');

        const $this = $(this);
        const tierId = $this.data('id');
        const currentStatus = $this.data('status');
        const newStatus = currentStatus === 'active' ? 'inactive' : 'active';
        const url = `/admin/tier/status-update/${tierId}`;
        $.ajax({
            url: url,
            type: 'POST',
            data: { status: newStatus },
            success: function(response) {
                $(".page-loader").addClass('d-none');
                if (response.status) {
                    $('.tiersTable').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(`<%= t(trans.messages.oops_something_went_wrong, {
                    attribute: trans.cruds.MODULE.TIER,
                }) %>`, 'error');
            }
        });
    });

});
</script>