<script>
$(document).ready(function() {
    const lang = `<%= lang %>`;
    const table = $('.announcementsTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: `<%= '/admin/announcements' %>`,
            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('announcement_status')) { %>
                        return `<div class="announcement-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_announcement')) { %>
                        html += `<a href="/admin/announcement/${data}" class="btn btn-sm btn-info btn-view announcementUser" title="<%= trans.global.view %>">
                                    <i class="fas fa-eye"></i>
                                </a>`;
                    <% } %>
                    <% if(userInfo.permissions.includes('edit_announcement')){ %>
                        html += `<a href="/admin/announcement/${data}/edit" class="btn btn-sm btn-primary btn-edit announcementUser" title="<%= trans.global.edit %>">
                            <i class="fas fa-edit"></i>
                        </a>`;
                    <% } %>
                    <% if(userInfo.permissions.includes('delete_announcement')){ %>
                        html += `<a href="javascript:;" class="btn btn-sm btn-danger btn-delete" data-id="${data}" title="<%= trans.global.delete %>" onclick="confirmAction('delete', '/admin/announcement/${data}/delete', '/admin/announcements', '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,
    });

    const today = new Date();


    const durationType = $("#announcement-duration").val();
    const existingDate = $("#range-date").val();
    let fp;
    if (durationType === "multiple" && existingDate) {
        const dates = existingDate.split(" to ").map(d => d.trim());
        fp = $("#range-date").flatpickr({
            mode: "range",
            minDate: today,
            dateFormat: "Y-m-d",
            defaultDate: dates
        });
    } else {
        fp = $("#range-date").flatpickr({
            mode: "single",
            minDate: today,
            dateFormat: "Y-m-d",
            defaultDate: existingDate || today
        });
    }

    $(document).on("change", "#announcement-duration", function () {
        const val = $(this).val();
        fp.destroy();

        if (val === "multiple") {
            $("#range-date").val('');
            fp = $("#range-date").flatpickr({
                mode: "range",
                minDate: today,
                dateFormat: "Y-m-d"
            });
        } else {
            fp = $("#range-date").flatpickr({
                mode: "single",
                minDate: today,
                dateFormat: "Y-m-d",
                defaultDate: today
            });
        }
    });

    /* ........... */
    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";
    }

   

    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 */
    $("#announcementData").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.ANNOUNCEMENT.fields.title_en
                }) %>`,
                minlength: `<%= t(trans.validation.client_side_validate.min_length, {
                    attribute: trans.cruds.ANNOUNCEMENT.fields.title_en,
                    min: 3
                }) %>`,
            },
            title_ar: {
                required: `<%= t(trans.validation.client_side_validate.required_message, {
                    attribute: trans.cruds.ANNOUNCEMENT.fields.title_ar
                }) %>`,
                minlength: `<%= t(trans.validation.client_side_validate.min_length, {
                    attribute: trans.cruds.ANNOUNCEMENT.fields.title_ar,
                    min: 3
                }) %>`,
            },
        },
        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 = editorEn.getHTMLCode();
            const description_ar = editorAr.getHTMLCode();
            const formData = new FormData(form);

            let dateFormat = $(document).find("[name='date-format']").val();
            let dateParts = dateFormat.split(' to ');
            let startDate, endDate; 

            if(dateParts.length){
                if (dateParts.length === 1) {
                    startDate = dateParts[0];
                    endDate   = dateParts[0];
                } 
                else if (dateParts.length === 2) {
                    startDate = dateParts[0];
                    endDate   = dateParts[1];
                }
            } else {
                const today = new Date();
                startDate = today.toISOString().split('T')[0];
                const nextDay = new Date(today);
                nextDay.setDate(today.getDate() + 1);
                endDate = nextDay.toISOString().split('T')[0];
            }
            formData.append('start_date', startDate);
            formData.append('end_date', endDate);
            formData.append('description_en', description_en);
            formData.append('description_ar', description_ar);

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

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

        const $this = $(this);
        const announcementId = $this.data('id');
        const currentStatus = $this.data('status');
        const newStatus = currentStatus === 'active' ? 'inactive' : 'active';
        const url = `/admin/announcement/status-update/${announcementId}`;
        $.ajax({
            url: url,
            type: 'POST',
            data: { status: newStatus },
            success: function(response) {
                $(".page-loader").addClass('d-none');
                if (response.status) {
                    $('.announcementsTable').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>
<script>
    /* function toggleArabicBanner(checkbox) {
        const arabicSection = document.getElementById("arabic_banner_section");
        if (checkbox.checked) {
            arabicSection.style.display = "none";
        } else {
            arabicSection.style.display = "block";
        }
    } */
</script>

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