<!-- jquery-->
 
<script src="/backend/js/vendors/jquery/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<!-- bootstrap js-->
<script src="/backend/js/vendors/bootstrap/dist/js/bootstrap.bundle.min.js" defer=""></script>
<script src="/backend/js/vendors/bootstrap/dist/js/popper.min.js" defer=""></script>
<!--fontawesome-->
<script src="/backend/js/vendors/font-awesome/fontawesome-min.js"></script>
<!-- feather-->
<!-- <script src="/backend/js/vendors/feather-icon/feather.min.js"></script>
<script src="/backend/js/vendors/feather-icon/custom-script.js"></script> -->
<!-- sidebar -->
<script src="/backend/js/sidebar.js"></script>
<!-- height_equal-->
<!-- <script src="/backend/js/height-equal.js"></script> -->
<!-- config-->
<script src="/backend/js/config.js"></script>

<!-- scrollbar-->
<script src="/backend/js/scrollbar/simplebar.js"></script>
<script src="/backend/js/scrollbar/custom.js"></script>
<!-- slick-->
<!-- <script src="/backend/js/slick/slick.min.js"></script>
<script src="/backend/js/slick/slick.js"></script> -->

<% if (routeType !== 'dashboard') { %>
    <!-- data_table-->
    <script src="/backend/js/js-datatables/datatables/jquery.dataTables.min.js"></script>
    <!-- page_datatable-->
    <script src="/backend/js/js-datatables/datatables/datatable.custom.js"></script>
    
    <!-- page_datatable1-->
    <!-- <script src="/backend/js/js-datatables/datatables/datatable.custom1.js"></script> -->
    
    <!-- page_datatable-->
    <!-- <script src="/backend/js/datatable/datatables/datatable.custom.js"></script> -->
    
    <!-- datatable_advance-->
    <script src="/backend/js/datatable/datatable_advance.js"></script>

    <!-- Include jQuery Validation Plugin -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>
<% } %>

<!-- theme_customizer-->
<!-- <script src="/backend/js/theme-customizer/customizer.js"></script> -->

<!-- custom script -->
<script src="/backend/js/script.js"></script>

<!-- custom_select2-->
<!-- <script src="/backend/js/custom-inputsearch.js"></script> -->
<script src="/backend/js/select2.js"></script>

<!-- select2_options-->
<% if (routeType == 'tag') { %>
    <script src="/backend/js/vendors/@yaireo/tagify/dist/tagify.js"></script>
<% } %>

<!-- page_select4-->
<script src="/backend/js/add-product/select4-custom.js"> </script>

<!-- flatpicker-->
<script src="/backend/js/flat-pickr/flatpickr.js"></script>
<script src="/backend/js/flat-pickr/custom-flatpickr.js"></script>

<script src="/backend/js/fancy-fileupload/jquery.ui.widget.js"></script>
<script src="/backend/js/fancy-fileupload/jquery.fileupload.js"></script>
<script src="/backend/js/fancy-fileupload/jquery.iframe-transport.js"></script>
<script src="/backend/js/fancy-fileupload/jquery.fancy-fileupload.js"></script>

<!-- RichTextEditor Js -->
<% if ((routeType == 'advertisement') || (routeType == 'announcement') || (routeType == 'attribute') || (routeType == 'setting') || (routeType == 'emailTemplate')) { %>
    <script type="text/javascript" src="/backend/richtexteditor/rte.js"></script>
    <script type="text/javascript" src='/backend/richtexteditor/plugins/all_plugins.js'></script>
<% } %>


<!-- Then load DataTables -->
<% if (routeType == 'notification') { %>
    <!-- <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script> -->
    <script src="https://cdn.datatables.net/scroller/2.3.0/js/dataTables.scroller.min.js"></script>
<% } %>

<!-- apex-->
<% if (routeType == 'dashboard') { %>
    <script src="/backend/js/chart/apex-chart/apex-chart.js"></script>
    <!-- <script src="/backend/js/chart/apex-chart/stock-prices.js"></script> -->
<% } %>

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
<script src="/backend/js/custom-script.js"></script>
<%- include('../../common/include/language-script') %>
<script>
document.addEventListener("DOMContentLoaded", function() {
    /* const languageItems = document.querySelectorAll('.lang');
    const currentLangElem = document.querySelector('.current_lang');

    const getCookie = (name) => {
        const value = `; ${document.cookie}`;
        const parts = value.split(`; ${name}=`);
        return parts.length === 2 ? parts.pop().split(';').shift() : null;
    };
    
    const setCookie = (name, value, days = 30) => {
        const date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        document.cookie = `${name}=${value};expires=${date.toUTCString()};path=/`;
    };
    
    const updateHtmlAttributes = (lang, dir) => {
        document.documentElement.lang = lang;
        document.documentElement.dir = dir;
    };
    
    const setLanguage = (lang) => {
        const flagIcon = currentLangElem.querySelector('i');
        const langText = currentLangElem.querySelector('.lang-txt');
        
        switch (lang) {
            case 'ar':
                flagIcon.className = 'flag-icon flag-icon-ae';
                langText.textContent = 'العربية';
                updateHtmlAttributes('ar', 'rtl');
                break;
            case 'en':
            default:
                flagIcon.className = 'flag-icon flag-icon-us';
                langText.textContent = 'ENG';
                updateHtmlAttributes('en', 'ltr');
        }
    };
    
    const persistLanguage = (lang) => {
        try {
            localStorage.setItem('preferredLang', lang);
            setCookie('preferredLang', lang);
        } catch (e) {
            console.error('Failed to persist language:', e);
        }
    };
    
    const savedLang = `<%= lang %>` || getCookie('preferredLang') || localStorage.getItem('preferredLang') || 'en';
    setLanguage(savedLang);
    
    languageItems.forEach(item => {
        item.addEventListener('click', async function(event) {
            event.preventDefault();
            const lang = this.getAttribute('data-value');
            
            if (!lang || lang === savedLang) return;
            
            try {
                const response = await fetch('/admin/translator', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ lang })
                });
                
                if (!response.ok) throw new Error('Network response was not ok');
                
                const data = await response.json();
                if (data.status) {
                    persistLanguage(lang);
                    window.location.reload();
                }
            } catch (error) {
                console.error('Language switch failed:', error);
                persistLanguage(lang);
                setLanguage(lang);
            }
        });
    }); */

    /* For notifications */
    const notificationList = document.getElementById('notification-list');
    const badge = document.getElementById('notification-badge');
    const viewAll = document.getElementById('viewAll');
    let currentPage = 1;
    const pageSize = 10;
    let loading = false;
    let allLoaded = false;
    let unreadCount = 0;
    const dataNotFound = `<%= t(trans.messages.not_found, {
        attribute: trans.cruds.MODULE.NOTIFICATION,
    }) %>`;
    function renderNotificationItem(notification) {
        const title = notification?.title?.en || notification?.title || 'No title';
        const desc = notification?.description?.en || notification?.description || '';
        const date = new Date(notification.createdAt).toLocaleDateString() + ' ' + new Date(notification.createdAt).toLocaleTimeString();
        const isRead = notification.isRead ? 'read' : 'unread';
        const url = notification.url || notification.notifyUrl || 'javacript:;';
        const markReadBtn = !notification.isRead
            ? `<button class="btn btn-sm btn-outline-primary mark-as-read-btn mt-2 markAsReadOnIcon" title="Mark as read" data-id="${notification.id || notification._id}">
                <i class="fas fa-check-circle"></i> Mark as read
            </button>`
            : '';
        if(notification){
            return `
                <li class="d-flex align-items-start notification-${isRead}" data-id="${notification.id || notification._id}">
                    <div class="activity-dot-${notification.isRead ? 'secondary' : 'primary'}"></div>
                    <div class="flex-grow-1">
                        <h6 class="f-w-600 d-flex notificationTitle notification-title-${notification.id || notification._id} font-${notification.isRead ? 'secondary' : 'primary'}">
                            ${date}
                            ${markReadBtn}
                        </h6>
                        <a href="${url}" class="notification-link">
                            <h5>${title.length > 20 ? title.substring(0, 20) + '...' : title}</h5>
                            <p class="mb-0">${desc}</p>
                        </a>
                        
                    </div>
                </li>
            `;
        }
    }

    async function fetchNotifications() {
        if (loading || allLoaded) return;
        loading = true;

        try {
            const params = new URLSearchParams({
                start: (currentPage - 1) * pageSize,
                length: pageSize,
                search: "",
                sortColumn: 'createdAt',
                sortOrder: 'DESC'
            });
            const response = await fetch(`/admin/notifications?${params.toString()}`, {
                headers: { 'Accept': 'application/json' }
            });
            if (!response.ok) throw new Error('Failed to fetch notifications');
            const data = await response.json();
            const notifications = data.data || [];

            const unreadNotification = data.unreadCount;
            if(unreadNotification > 0){
                badge.textContent = unreadNotification;
                badge.classList.remove("d-none");
            } else {
                // badge.textContent = 0;
                badge.classList.add("d-none");
            }

            if (notifications.length > 0) {
                notifications.forEach(n => {
                    notificationList.insertAdjacentHTML('beforeend', renderNotificationItem(n));
                });
                currentPage++;
            } else {
                allLoaded = true;
                // viewAll.classList.add("d-none");

                if (currentPage === 1) {
                    const notFoundHTML = `<li class="text-center">${dataNotFound[0].toUpperCase()}${dataNotFound.slice(1).toLowerCase()}</li>`;
                    notificationList.insertAdjacentHTML('beforeend', notFoundHTML);
                }
            }
        } catch (e) {
            console.error('Error loading notifications:', e);
        } finally {
            loading = false;
        }
    }

    if(notificationList){
        notificationList.addEventListener('scroll', function (e) {
            if (loading || allLoaded) return;
            if (this.scrollTop + this.clientHeight >= this.scrollHeight - 10) {
                fetchNotifications();
            }
        });
        fetchNotifications();
    }

    document.addEventListener("click", function(e) {
        const target = e.target.closest(".markAsReadOnIcon");
        if (target) {
            e.preventDefault();
            const id = target.getAttribute('data-id');
            fetch(`/admin/notification/mark-read/${id}`, {
                method: 'POST',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Content-Type': 'application/json'
                }
            })
            .then(response => response.json())
            .then(response => {
                if (response.status) {
                    const li = document.querySelector(`li[data-id="${id}"]`);
                    if (li) {
                        li.classList.remove('notification-unread');
                        li.classList.add('notification-read');

                        $(`.notification-title-${id}`).removeClass("font-primary").addClass("font-secondary");

                        const dot = li.querySelector('[class^="activity-dot-"]');
                        if (dot) {
                            dot.className = 'activity-dot-secondary';
                        }

                        const fontElem = li.querySelector('[class^="f-w-600 font-"]');
                        if (fontElem) {
                            fontElem.className = 'f-w-600 font-secondary';
                        }

                        const circleDot = li.querySelector('[class^="circle-dot-"]');
                        if (circleDot) {
                            circleDot.className = 'float-end circle-dot-secondary';
                        }

                        const btn = li.querySelector('.markAsReadOnIcon');
                        if (btn) {
                            btn.remove();
                        }
                    }

                    let badgeCount = parseInt(badge.textContent, 10) || 0;
                    if (badgeCount > 0) {
                        badgeCount -= 1;
                        if (badgeCount > 0) {
                            badge.textContent = badgeCount;
                        } else {
                            badge.classList.add("d-none");
                        }
                    }
                    toastrNotification(response.message, 'success');
                } else {
                    toastrNotification(response.message, 'error');
                }
            })
            .catch(() => {
                toastrNotification(`<%= t(trans.messages.oops_something_went_wrong, {
                    attribute: trans.cruds.MODULE.NOTIFICATION,
                }) %>`, 'error');
            });
        }
    });

});

const languageConfig = {
    processing: "<%= trans.global.language.processing %>",
    lengthMenu: "<%= trans.global.language.lengthMenu %>",
    zeroRecords: "<%= trans.global.language.zeroRecords %>",
    info: "<%= trans.global.language.info %>",
    infoEmpty: "<%= trans.global.language.infoEmpty %>",
    infoFiltered: "<%= trans.global.language.infoFiltered %>",
    search: "<%= trans.global.language.search %>",
    paginate: {
        first: "<%= trans.global.language.paginate.first %>",
        last: "<%= trans.global.language.paginate.last %>",
        next: "<%= trans.global.language.paginate.next %>",
        previous: "<%= trans.global.language.paginate.previous %>"
    }
};
</script>
