function initScript(menu,submenu,subfunction = null, subparam = null){
    if(unsaved){
        jQuery.ajax({
            type: "POST", dataType: "html",
            url: webpath + "ajax/common/common.php",
            data: ({
                pageaction: "unloadForm",
                menu: menu,
                submenu: submenu
            }),
            success: function(responseText, responseStatus) {
                showConfirmationModal(responseText);
            }
        });
    }else{
        if(subfunction != null){
            if(subparam != null){
                window[submenu](subfunction,subparam);
            }else{
                window[submenu](subfunction);
            }
        }else{
            try {
                window[submenu]();
            }
            catch(err) {
                setTimeout(function() {
                    window[submenu]();
                }, 200);
            }
        }
    }
}

function pushBackClick(func, param){
    var arr = [];
    if (sessionStorage.getItem("backclick") !== null) {
        arr = JSON.parse(sessionStorage.getItem("backclick"));
    }
    const lastElement = arr[arr.length - 1];
    var newanchor = [func,arrayToCommaSepString(param)]

    if(lastElement === undefined || !arraysAreEqual(lastElement,newanchor)){
        arr.push(newanchor);
        sessionStorage.setItem("backclick", JSON.stringify(arr));
    }
    history.pushState({ custom: true }, "");
}

function popBackClick(){
    if (sessionStorage.getItem("backclick") !== null) {
        const arr = JSON.parse(sessionStorage.getItem("backclick"));
        arr.pop();
        sessionStorage.setItem("backclick", JSON.stringify(arr));
    }
}

function clearBackClick(){
    const arr = [];
    sessionStorage.setItem("backclick", JSON.stringify(arr));
}

function triggerBackClick(){
    history.back();
}

function handleBackClick(){
    exitFullScreen();
    saveFilter();
    if (sessionStorage.getItem("backclick") !== null) {
        const arr = JSON.parse(sessionStorage.getItem("backclick"));
        const previousPage = arr[arr.length - 2];
        arr.pop();
        arr.pop();
        sessionStorage.setItem("backclick", JSON.stringify(arr));
        if(previousPage !== undefined){
            if(previousPage[1] != ""){
                if(previousPage[1].includes(", ")){
                    const indexOfComma = previousPage[1].indexOf(', ');
                    const functionName = previousPage[1].slice(0, indexOfComma);
                    const param = previousPage[1].slice(indexOfComma + 2); // +2 to skip the ", "

                    window[previousPage[0]](functionName,param);
                }else{
                    window[previousPage[0]](previousPage[1]);
                }
            }else{
                window[previousPage[0]]();
            }
        }
    }
}

function arrayToCommaSepString(param) {
  if (Array.isArray(param)) {
    const tempArr = param.map((item) => {
      if (Array.isArray(item)) {
        return "['" + item.join("', '") + "']";
      } else {
        return `${item}`;
      }
    });
    return tempArr.join(", ");
  } else {
    if (!param || param === "") {
      return "";
    } else {
      return `${param}`;
    }
  }
}

function arraysAreEqual(arr1, arr2) {
  if (arr1.length !== arr2.length) {
    return false;
  }

  for (let i = 0; i < arr1.length; i++) {
    if (arr1[i] !== arr2[i]) {
      return false;
    }
  }

  return true;
}

function showAlert(responseText){

    var arr = responseText.split("&");
    jQuery.ajax({
        type: "POST", dataType: "html",
        url: webpath + "ajax/common/common.php",
        data: ({
            pageaction: "showAlert",
            alertType: arr[0],
            alertMsg: arr[1]
        }),
        success: function(responseText, responseStatus) {
            var alert = document.createElement('div');
            alert.innerHTML = responseText;

            if(document.getElementById('tw-alert-section') == null){
                var alertSection = document.createElement('div');
                alertSection.setAttribute("id","tw-alert-section");
                document.body.appendChild(alertSection);
            }

            document.getElementById('tw-alert-section').appendChild(alert);
            setTimeout(function() {
                alert.classList.remove('animate-alert-animation-in');
                alert.classList.add('animate-alert-animation-out');
                setTimeout(function() {
                    alert.parentNode.removeChild(alert);
                }, 490);
            }, 5000);
        }
    });

    return arr[0];
}

function closeAlert(event){
    event.parentElement.classList.remove('animate-alert-animation-in');
    event.parentElement.classList.add('animate-alert-animation-out');
    setTimeout(function() {
        event.parentElement.remove();
    }, 490);
}

function closeTip(event){
    event.parentElement.remove();
}

function showModal(responseText){
    let modal = document.getElementById("modal");
    let modalcontainer = modal.children[0];
    modal.classList.remove('hidden');
    modal.classList.add('animate-fade-animation-in');
    jQuery('#modal').children().html(responseText);
    modalcontainer.classList.add('animate-modal-animation-in');   

    $('body').addClass('tw-modal-open');
    initForm();
    hideLoading();
}

function showVideoModal(videotype){
    jQuery.ajax({
        type: "POST", dataType: "html",
        url: webpath + "ajax/common/common.php",
        data: ({
            pageaction: "showVideoModal",
            videotype: videotype
        }),
        success: function(responseText, responseStatus) {
            showModal(responseText);
            if (videotype == "setup-account"){
                amplitude.getInstance().logEvent("Watch Setup Now");
            } else if (videotype == "sale-invoice"){
                amplitude.getInstance().logEvent("Watch Sales Invoice Tutorial");
            } else if (videotype == "purchase-invoice"){
                amplitude.getInstance().logEvent("Watch Purchase Invoice Tutorial");
            } else {
                amplitude.getInstance().logEvent("Watch Cash Book Tutorial");
            }
        }
    });
}

function closeVideoModal(){
    closeModal('modal');
    setTimeout(function(){
        document.getElementById('video-modal').querySelector('iframe').remove();
    }, 150);
}


function showConfirmationModal(responseText){
    let modal = document.getElementById("modalConfirmation");
    let modalcontainer = modal.children[0];
    modal.classList.remove('hidden');
    modal.classList.add('animate-fade-animation-in');
    jQuery('#modalConfirmation').children().html(responseText);
    modalcontainer.classList.add('animate-modal-animation-in');   

    $('body').addClass('tw-modal-open');
    initForm();
    hideLoading();
}

function closeModal(targetModal){
    if(targetModal != "modalConfirmation"){
        unsaved = false;
    }
    let modal = document.getElementById(targetModal);
    let modalcontainer = modal.children[0];
    modal.classList.remove('animate-fade-animation-in');
    modalcontainer.classList.remove('animate-modal-animation-in');  
    modal.classList.add('animate-fade-animation-out');
    modalcontainer.classList.add('animate-modal-animation-out');   
    setTimeout(function(){
        modal.classList.add('hidden');
        modalcontainer.classList.remove('animate-modal-animation-out');   
        modal.classList.remove('animate-fade-animation-out');  

        $('body').removeClass('tw-modal-open');
        // Clear modal content only — keep .tw-modal-container so showModal() still has modal.children[0]
        if (modalcontainer) {
            modalcontainer.innerHTML = "";
        }
    }, 150);
}

function showMessageBox(message){
    jQuery.ajax({
        type: "POST", dataType: "html",
        url: webpath + "ajax/common/common.php",
        data: ({
            pageaction: "showMessageBox",
            message: message
        }),
        success: function(responseText, responseStatus) {
            showConfirmationModal(responseText);
        }
    });
}

function showReloadRequiredBox(){
    jQuery.ajax({
        type: "POST", dataType: "html",
        url: webpath + "ajax/common/common.php",
        data: ({
            pageaction: "showReloadRequiredBox"
        }),
        success: function(responseText, responseStatus) {
            hideLoading();
            showConfirmationModal(responseText);
        }
    });
}

function setTabActive (target){
    const tab = document.querySelector(".tw-tab");
    const tabList = tab.querySelectorAll("button");
    const targetbtn = tabList[target];

    tabList.forEach((item) => {
        if (item !== targetbtn) {
            item.classList.remove("active");
        }else{
            item.classList.add("active");
        }
    });
}

function setSubTabActive (target){
    const tab = document.querySelector(".tw-subtab");
    const tabList = tab.querySelectorAll("button");
    const targetbtn = tabList[target];

    tabList.forEach((item) => {
        if (item !== targetbtn) {
            item.classList.remove("active");
        }else{
            item.classList.add("active");
        }
    });
}

function setSecSubTabActive (target){
    const tab = document.querySelector(".tw-secsubtab");
    const tabList = tab.querySelectorAll("button");
    const targetbtn = tabList[target];

    tabList.forEach((item) => {
        if (item !== targetbtn) {
            item.classList.remove("active");
        }else{
            item.classList.add("active");
        }
    });
}

function setModalSubTabActive (target){
    const tab = document.querySelector(".tw-modaltab");
    const tabList = tab.querySelectorAll("button");
    const targetbtn = tabList[target];

    tabList.forEach((item) => {
        if (item !== targetbtn) {
            item.classList.remove("active");
        }else{
            item.classList.add("active");
        }
    });
}

function saveFilter(){
    var filterList = document.querySelectorAll('.js-filter-value');
    filterList.forEach((filter) => {
        sessionStorage.setItem(filter.id,filter.value);
    });

    if (document.querySelector('.js-btn-togglesearchdiv') !== null){
        sessionStorage.setItem("filtertype",document.querySelector('.js-btn-togglesearchdiv').value);
    }
}

function setTablePaginationActive(selectedPageNo){
    savePaginationFilter('currentpage', selectedPageNo);
    const index = selectedPageNo - 1;
    const pageNo = document.querySelector(".tw-pagination");
    const pageNoList = pageNo.querySelectorAll("span");
    const targetPageNo = pageNoList[index];

    pageNoList.forEach((item) => {
        if (item !== targetPageNo) {
            item.classList.remove("active");
        }else{
            item.classList.add("active");
        }
    });
}

function getPaginationFilter(enablePage = true){
    if (enablePage) {
        return { 
            pageno: sessionStorage.getItem('currentpage'), 
            pagelimit: sessionStorage.getItem('pagelimit'), 
            sortby: sessionStorage.getItem('sortby'), 
            sortorder: sessionStorage.getItem('sortorder'),
        }
    }
    else {
        return { 
            sortby: sessionStorage.getItem('sortby'), 
            sortorder: sessionStorage.getItem('sortorder'),
        }
    }
}

function savePaginationFilter(filter, value){
    switch(filter) {
        case 'currentpage':
            sessionStorage.setItem('currentpage', value);
            break;
        case 'sortby':
            sessionStorage.setItem('currentpage', 1);
            let lastSortBy = sessionStorage.getItem('sortby');

            // set sortby
            sessionStorage.setItem('sortby', value);

            // set sortorder (if same column, change sortorder value)
            if (lastSortBy == value)
                sessionStorage.getItem('sortorder') == 'asc' 
                    ? sessionStorage.setItem('sortorder', 'desc') 
                    : sessionStorage.setItem('sortorder', 'asc');
            else
                sessionStorage.setItem('sortorder', 'asc');
                // sessionStorage.setItem('sortorder', 'desc');
            break;
    }
}

function clearPaginationFilter(defaultsortby, defaultsortorder){
    sessionStorage.setItem('currentpage', 1);
    sessionStorage.setItem('pagelimit', 100);
    sessionStorage.setItem('sortby', defaultsortby ?? '');
    sessionStorage.setItem('sortorder', defaultsortorder ?? 'desc');
}

function clearFilter(){
    sessionStorage.setItem("searchyear","");
    sessionStorage.setItem("searchmonth","");
    sessionStorage.setItem("searchday","");
    sessionStorage.setItem("searchuser","");
    sessionStorage.setItem("searchstatus","");
    sessionStorage.setItem("searchledger","");
    sessionStorage.setItem("searchcat_id","");
    sessionStorage.setItem("searchdate","");
    sessionStorage.setItem("filtertype","");
    sessionStorage.setItem("datefrom","");
    sessionStorage.setItem("dateto","");
    sessionStorage.setItem("search","");
    sessionStorage.setItem("searchkeyword","");
    sessionStorage.setItem("searchtype_id","");
    sessionStorage.setItem("searchkeyword2","");
    sessionStorage.setItem("searchevent","");
    sessionStorage.setItem("searchaction","");
    clearPaginationFilter();
}

function updateDayList(searchyear, searchmonth, searchday, allowAll = true) {
  var year = isNaN(searchyear) ? document.getElementById(searchyear).value : searchyear;
  var month = isNaN(searchmonth) ? document.getElementById(searchmonth).value : searchmonth;

  // Store original value before updating
  var originalValue = document.getElementById(searchday).value;

  if (year && month) {
    var numberofday = new Date(year, month, 0).getDate();
    var content = allowAll ? ["<option value=''> - </option>"] : [];
    for (var i = 1; i <= numberofday; i++) {
      var day = i.toString().padStart(2, '0');
      content.push("<option value='" + day + "'>" + day + "</option>");
    }
    document.getElementById(searchday).innerHTML = content.join('');
    
    // Restore original value if it's within the new range
    if (originalValue && parseInt(originalValue) <= numberofday) {
      document.getElementById(searchday).value = originalValue;
    }
  }
  else if (year && !month) {
    var content = ["<option value=''> - </option>"];
    document.getElementById(searchday).innerHTML = content.join('');
  }
}

function showInput(toggleField,targetAdd, scroll = true){
    var toggleElement = document.getElementById(toggleField);
    var targetElement = document.getElementById(targetAdd);
    if (targetElement.classList.contains('hidden')) {
        toggleElement.classList.add('hidden');
        targetElement.classList.remove('hidden');
        if(scroll){
            targetElement.scrollIntoView({ behavior: "smooth", block: "start", inline: "nearest" });
        }
    } else {
        toggleElement.classList.remove('hidden');
        targetElement.classList.add('hidden');
    }
}

function hideInput(targetId){
    document.getElementById(targetId).classList.add('hidden');
}

function isValidDate(date) {
  return (new Date(date) !== "Invalid Date") && !isNaN(new Date(date));
}

function previewLogoImage(targetElement) {
    var validtype = validateFileType(targetElement.files[0].type);
    if(validtype == "image"){
        var container = targetElement.parentElement.parentElement.previousElementSibling;
        var containerUpload = container.nextElementSibling;
        var image = container.children[1].children[0];
        image.src = URL.createObjectURL(targetElement.files[0]);
        
        container.classList.remove("hidden");
        containerUpload.classList.add("hidden");
    }else{
        showAlert("fail&" + jslang["pleaseuploadimagefile"]);
        targetElement.value = "";
    }
};

function closePreviewLogoImage(event) {
    var container = event.target.parentElement.parentElement;
    var containerUpload = container.nextElementSibling;
    var image = container.children[1].children[0];
    
    image.src = "";
    containerUpload.querySelector('.js-file-upload').value='';

    container.classList.add("hidden");
    containerUpload.classList.remove("hidden");

    if(containerUpload.querySelector('.js-have-logo')){
        containerUpload.querySelector('.js-have-logo').value='no';
    }
};

function previewImageUpload(targetElement){
    if(targetElement.files.length > 0){
        var validtype = validateFileType(targetElement.files[0].type);
        var src = URL.createObjectURL(targetElement.files[0]);
        var preview = document.querySelector(".tw-iframe");
        
        if(validtype == "image"){
            preview.innerHTML = "<button type='button' class='tw-close absolute right-0 text-gray-400 hover:text-gray-500' onclick='deleteAttachment(this,this.parentElement.parentElement.previousElementSibling)'></button>";
            let element = document.createElement("img");
            element.src = src;
            preview.appendChild(element);
        }else{
            showAlert("fail&" + jslang["pleaseuploadimagefile"]);
            targetElement.value = "";
            preview.innerHTML = "";
        }
	}
}

function previewFileUpload(targetElement){
    if(targetElement.files.length > 0){
        var validtype = validateFileType(targetElement.files[0].type);
        var src = URL.createObjectURL(targetElement.files[0]);
        var preview = document.querySelector(".tw-iframe");
        
        if(validtype == "pdf"){
            preview.innerHTML = "<button type='button' class='tw-close absolute right-0 text-gray-400 hover:text-gray-500' onclick='deleteAttachment(this,this.parentElement.parentElement.previousElementSibling)'></button>";
            let element = document.createElement("iframe");
            element.src = src;
            preview.appendChild(element);
        }else if(validtype == "image"){
            preview.innerHTML = "<button type='button' class='tw-close absolute right-0 text-gray-400 hover:text-gray-500' onclick='deleteAttachment(this,this.parentElement.parentElement.previousElementSibling)'></button>";
            let element = document.createElement("img");
            element.src = src;
            preview.appendChild(element);
        }else{
            showAlert("fail&" + jslang["pleaseuploadvalidfile"]);
            targetElement.value = "";
            preview.innerHTML = "";
        }

        var label = preview.previousElementSibling;
        var view = label.querySelector('a');
        if (view) {
            view.parentNode.removeChild(view);
        }
	}
}

function clearFileUpload(targetId){
    document.getElementById(targetId).value = null;
}

function validateFileType(imagetype){
    var type = imagetype.split("/");
    var acceptedimagetype = ["png","jpg","jpeg"];
    
    var match = acceptedimagetype.find(element => {return element == type[1]});

    if(match != null){
        return "image";
    }else if(type[1] == "pdf"){
        return "pdf";
    }else if(type[1] == "csv"){
        return "excel";
    }else{
        return false;
    }
}

function openDialog(url){
    window.open(url, "_blank", "top=100, left=200,height=500, width=800, titlebar=0, menubar=0, location=0, status=0, toolbar=0, scrollbars=1");
    if (typeof DialogChannel !== 'undefined') {
        DialogChannel.postMessage(url); // Send the URL to Flutter
    }
}

function downloadExcel(responseText){
    responseText = responseText.replace(/^\s+|\s+$/g, '');
    var arr = responseText.split("&");
    if(arr[0] == "success"){
        window.open(arr[1],"_self");
    }else if(arr[0] == "fail"){
        showAlert("fail&" + jslang["failtoexport"]);
    }
}

function login(){
    showLoading();
    jQuery.ajax({
        type: "POST", dataType: "html",
        url: webpath + "ajax/common/common.php",
        data: ({
            pageaction: "login",
            username: jQuery('#username').val(),
            password: jQuery('#password').val()
        }),
        success: function(responseText, responseStatus) {
            if(responseText.trim()=='200'){
                window.location = weburl;
            }else if(responseText=='userexpire'){
                showAlert("fail&" + jslang["userexpiredorsuspend"]);
            }else{
                showAlert("fail&" + jslang["loginfail"]);
            }
            hideLoading();
        }
    });
}

function logout(){
    jQuery.ajax({
        type: "POST", dataType: "html",
        url: webpath + "ajax/common/common.php",
        data: ({
            pageaction: "logout"
        }),
        success: function(responseText, responseStatus) {
            localStorage.clear();
            window.location = loginurl;
        }
    });
}

function verifyLogin(){
    var username = "";
    if(document.getElementById('jsloginusername')){
        username = document.getElementById('jsloginusername').value;
    }
    jQuery.ajax({
        type: "POST", dataType: "html",
        url: webpath + "ajax/common/common.php",
        data: ({
            pageaction: "verifyLogin",
            username: username
        }),
        success: function(responseText, responseStatus) {
            let returnJson;
            try {
                returnJson = JSON.parse(responseText);
                if (returnJson.status !== "success") {
                    alert("Your session is expired\nYour current IP address: " + returnJson.data.currentip + "\nLast Login IP address: " + returnJson.data.lastip);
                    clearInterval(intervalId1);
                    clearInterval(intervalId2);
                    window.location = loginurl;
                }
            } catch (e) {
                alert(jslang["sessionexpired"]);
                clearInterval(intervalId1);
                clearInterval(intervalId2);
                window.location = loginurl;
            }
        }
    });
}

function validateSession(){
    jQuery.ajax({
        type: "POST", dataType: "html",
        url: webpath + "ajax/common/common.php",
        data: ({
            pageaction: "validateSession"
        }),
        success: function(responseText, responseStatus) {

        }
    });
}

function sanitizeFormInput(form){
    var inputList = form.querySelectorAll('input')
    var textareaList = form.querySelectorAll('textarea');

    inputList.forEach((input) => {
        if(input.type != "file" && !input.classList.contains('hidden') && !input.classList.contains('!hidden')){
            input.value = sanitizeString(input.value);
        }
    });

    textareaList.forEach((textarea) => {
        textarea.value = sanitizeString(textarea.value);
    });
}

function sanitizeString(str){
    //str = str.replace(/[^a-z0-9áéíóúñü \'.,_\n-]/gim,"");
    //str = str.replace(/[<>*()?']/g, "\\$&");
    return str.trim();
}

function initForm(){
    //var $select2 = $('.tw-select2').select2();
    $('form').submit(false);
}

//Check for unsaved changes
//Parameter Explanation
// 1. mycallback = the whole function with parameter, that you want to proceed after the user want to leave the page
function unloadForm(mycallback){ 
  if(unsaved){
        jQuery.ajax({
            type: "POST", dataType: "html",
            url: webpath + "ajax/common/common.php",
            data: ({
                pageaction: "unloadForm",
                mycallback: mycallback
            }),
            success: function(responseText, responseStatus) {
                showConfirmationModal(responseText);
            }
        });
  }else{
    executeMultiCallback(mycallback);
  }
}

function executeMultiCallback(mycallback){
    mycallback = mycallback.split(';');
    mycallback.pop();
    mycallback.forEach(function(func){
        var name            = func.substring(0, func.indexOf('('));
        var param           = func.substring(func.indexOf('('));
        var paramtextonly   = param.replace(/[()]/g, "");
        paramtextonly       = paramtextonly.replace(/'/g, "");
        if(paramtextonly == "" || param == "''"){
            window[name]();
        }else{
            window[name](paramtextonly);
        }
    });    
}
      
function showLoading(){
    if($('#tw-loader').hasClass('hidden')){
        $('#tw-loader .tw-bg-loader').addClass('animate-loader-fade-animation-in');
        $('#tw-loader').removeClass('hidden');
    }
}

function hideLoading(){
    if(!$('#tw-loader').hasClass('hidden')){
        $('#tw-loader .tw-bg-loader').removeClass('animate-loader-fade-animation-in');
        $('#tw-loader .tw-bg-loader').addClass("animate-loader-fade-animation-out");
        setTimeout(function(){
            $('#tw-loader').addClass("hidden")
            $('#tw-loader .tw-bg-loader').removeClass("animate-loader-fade-animation-out");
        }, 150);
    }
}

function showBlocker(){
    if($('#tw-blocker').hasClass('hidden')){
        $('#tw-blocker').removeClass('hidden');
    }
}

function hideBlocker(){
    if(!$('#tw-blocker').hasClass('hidden')){
        $('#tw-blocker').addClass("hidden")
    }
}

function addSpinAnimation(targetElement){
    targetElement.classList.add('animate-spin');
}

function removeSpinAnimation(targetElement){
    targetElement.classList.remove('animate-spin');
}

function setFileName(targetElement, type) {
    var validtype = validateFileType(targetElement.files[0].type);
    if((type == "attachment" && (validtype == "image" || validtype == "pdf")) || validtype == type){
        targetElement.previousElementSibling.value = targetElement.files[0].name;
    }
    else{
        switch(type){
            case "image":
                showAlert("fail&" + jslang["pleaseuploadimagefile"]);
            break;
            case "attachment":
                showAlert("fail&" + jslang["pleaseuploadvalidfile"]);
            break;
            case "excel":
                showAlert("fail&" + jslang["pleaseuploadcsvfile"]);
            break;
        }
        targetElement.value = "";
    }
};

function showFileSelection(targetElement){
    targetElement.querySelector('.js-file-upload').click();
}

function deleteAttachment(element, targetElement){
    var label = element.parentElement.previousElementSibling;
    var view = label.querySelector('a');
    if (view) {
        view.parentNode.removeChild(view);
    }

    targetElement.querySelector('.js-file-upload').previousElementSibling.value = "";
    targetElement.querySelector('.js-file-upload').value = "";
    if(targetElement.querySelector('input[name="previousfile"]')){
        targetElement.querySelector('input[name="previousfile"]').value = "";
    }
    if(targetElement.querySelector('input[name="previousthumbfile"]')){
        targetElement.querySelector('input[name="previousthumbfile"]').value = "";
    }
    element.parentElement.innerHTML = "";
}

function previewFileInIframe(targetElement){
    if(targetElement.files.length > 0){
        var validtype = validateFileType(targetElement.files[0].type);
        
        if(validtype == "pdf" || validtype == "image"){
            // Show all attachments (existing + new)
            showAllAttachmentsInIframe();
            // Update attachment icons
            updateAllAttachmentIcons();
        }else{
            showAlert("fail&" + jslang["pleaseuploadvalidfile"]);
            targetElement.value = "";
            var previewContainer = document.getElementById('js-iframe');
            if(previewContainer){
                previewContainer.innerHTML = "";
            }
        }
    }
}


// Function to show all attachments (existing + newly uploaded)
function showAllAttachmentsInIframe(){
    var previewContainer = document.getElementById('js-iframe');
    if(!previewContainer) return;
    
    previewContainer.innerHTML = '';
    // Set container to allow inline-block children to flow horizontally
    previewContainer.classList.add('tw-attachment-container');
    
    var rows = document.querySelectorAll('#multi-ledger-entries-table tbody tr');
    var hasAttachments = false;
    
    rows.forEach(function(row, index){
        var fileInput = row.querySelector('.js-file-upload');
        var previousFileInput = row.querySelector('input[name="previousfile[]"]');
        var hasNewFile = fileInput && fileInput.files && fileInput.files.length > 0;
        var hasExistingFile = previousFileInput && previousFileInput.value && previousFileInput.value.trim() !== '';
        
        if(hasNewFile || hasExistingFile){
            hasAttachments = true;
            
            // Detect file type first
            var fileType = null;
            var fileUrl = null;
            if(hasNewFile){
                fileType = validateFileType(fileInput.files[0].type);
            } else if(hasExistingFile){
                fileUrl = previousFileInput.value;
                if(fileUrl.match(/\.(jpg|jpeg|png|gif)$/i)){
                    fileType = "image";
                } else if(fileUrl.match(/\.pdf$/i)){
                    fileType = "pdf";
                }
            }
            
            // Create preview container
            var rowContainer = document.createElement('div');
            rowContainer.className = 'attachment-item';
            
            // Set container style based on file type
            if(fileType == "pdf"){
                rowContainer.classList.add('pdf');
            } else {
                rowContainer.classList.add('image');
            }
            
            var previewElement = document.createElement('div');
            previewElement.className = 'tw-iframe';
            
            // Add close button
            var closeButton = document.createElement('button');
            closeButton.type = 'button';
            closeButton.className = 'tw-close absolute right-0 text-gray-400 hover:text-gray-500';
            closeButton.onclick = function() {
                deleteAttachmentInIframe(this);
            };
            previewElement.appendChild(closeButton);
            
            // Create preview based on file type
            if(hasNewFile){
                createPreviewFromFile(fileInput.files[0], previewElement, rowContainer);
            } else if(hasExistingFile){
                createPreviewFromUrl(previousFileInput.value, previewElement, rowContainer);
            }
            
            rowContainer.appendChild(previewElement);
            previewContainer.appendChild(rowContainer);
        }
    });
    
    if(!hasAttachments){
        previewContainer.innerHTML = '';
        previewContainer.classList.remove('tw-attachment-container');
    }
}

// Function to show existing attachments in edit mode
function showExistingAttachmentsInIframe(){
    showAllAttachmentsInIframe();
    // Update attachment icons
    updateAllAttachmentIcons();
}

// Helper function to create preview from file object
function createPreviewFromFile(file, container, rowContainer){
    var validtype = validateFileType(file.type);
    var src = URL.createObjectURL(file);
    
    if(validtype == "image"){
        var img = document.createElement('img');
        img.src = src;
        
        // Detect image orientation after load and set container width
        img.onload = function(){
            var isPortrait = img.naturalHeight > img.naturalWidth;
            if(rowContainer){
                // Remove existing width classes
                rowContainer.classList.remove('portrait', 'landscape');
                if(isPortrait){
                    rowContainer.classList.add('portrait');
                } else {
                    rowContainer.classList.add('landscape');
                }
            }
        };
        container.appendChild(img);
    } else if(validtype == "pdf"){
        container.classList.add('tw-iframe-pdf');
        var iframe = document.createElement('iframe');
        iframe.src = src;
        container.appendChild(iframe);
    }
}

// Helper function to create preview from URL
function createPreviewFromUrl(fileUrl, container, rowContainer){
    if(fileUrl.match(/\.(jpg|jpeg|png|gif)$/i)){
        var img = document.createElement('img');
        img.src = fileUrl;
        
        // Detect image orientation after load and set container width
        img.onload = function(){
            var isPortrait = img.naturalHeight > img.naturalWidth;
            if(rowContainer){
                // Remove existing width classes
                rowContainer.classList.remove('portrait', 'landscape');
                if(isPortrait){
                    rowContainer.classList.add('portrait');
                } else {
                    rowContainer.classList.add('landscape');
                }
            }
        };
        container.appendChild(img);
    } else if(fileUrl.match(/\.pdf$/i)){
        container.classList.add('tw-iframe-pdf');
        var iframe = document.createElement('iframe');
        iframe.src = fileUrl;
        container.appendChild(iframe);
    }
}

function deleteAttachmentInIframe(element){
    var previewElement = element.closest('.tw-iframe');
    if(!previewElement) {
        showAlert("warning&No preview element found");
        return;
    }
    
    var rowContainer = previewElement.parentElement;
    if(!rowContainer) {
        showAlert("warning&No row container found");
        return;
    }
    
    var previewContainer = document.getElementById('js-iframe');
    var attachmentContainers = previewContainer.querySelectorAll('.attachment-item');
    var containerIndex = Array.from(attachmentContainers).indexOf(rowContainer);
    
    if(containerIndex === -1) {
        showAlert("warning&Could not find attachment index");
        return;
    }
    
    var rows = document.querySelectorAll('#multi-ledger-entries-table tbody tr');
    var attachmentRows = [];
    
    rows.forEach(function(row){
        var fileInput = row.querySelector('.js-file-upload');
        var previousFileInput = row.querySelector('input[name="previousfile[]"]');
        var hasNewFile = fileInput && fileInput.files && fileInput.files.length > 0;
        var hasExistingFile = previousFileInput && previousFileInput.value && previousFileInput.value.trim() !== '';
        
        if(hasNewFile || hasExistingFile){
            attachmentRows.push(row);
        }
    });
    
    var targetRow = attachmentRows[containerIndex];
    if(!targetRow) {
        showAlert("warning&Could not find target row");
        return;
    }
    
    var fileInput = targetRow.querySelector('.js-file-upload');
    var previousFileInput = targetRow.querySelector('input[name="previousfile[]"]');
    
    if(fileInput){
        fileInput.value = "";
        if(fileInput.previousElementSibling){
            fileInput.previousElementSibling.value = "";
        }
    }
    
    if(previousFileInput){
        previousFileInput.value = "";
    }
    
    showAllAttachmentsInIframe();
    updateAllAttachmentIcons();
}

function previewAttachmentInWindow(element){
    var attachmentData = getAttachmentData(element);
    
    if(attachmentData.hasAttachment){
        var fileType = getFileType(attachmentData);
        openAttachmentPreview(attachmentData.attachmentUrl, fileType);
    } else {
        showAlert("info&No attachment found");
    }
}

// Helper function to get attachment data from a table row
function getAttachmentData(element){
    var row = element.closest('tr');
    var fileInput = row ? row.querySelector('.js-file-upload') : null;
    var previousFileInput = row ? row.querySelector('input[name="previousfile[]"]') : null;
    
    var hasNewFile = fileInput && fileInput.files && fileInput.files.length > 0;
    var hasExistingFile = previousFileInput && previousFileInput.value && previousFileInput.value.trim() !== '';
    
    return {
        fileInput: fileInput,
        previousFileInput: previousFileInput,
        hasAttachment: hasNewFile || hasExistingFile,
        attachmentUrl: hasNewFile ? URL.createObjectURL(fileInput.files[0]) : (hasExistingFile ? previousFileInput.value : "")
    };
}

// Helper function to determine file type
function getFileType(attachmentData){
    if(attachmentData.fileInput && attachmentData.fileInput.files && attachmentData.fileInput.files.length > 0){
        // For new uploads, use MIME type
        var mimeType = attachmentData.fileInput.files[0].type;
        if(mimeType.startsWith('image/')) return "image";
        if(mimeType === 'application/pdf') return "pdf";
        return "other";
    } else {
        // For existing files, use URL-based detection
        return validateFileTypeFromUrl(attachmentData.attachmentUrl);
    }
}

// Helper function to open attachment preview in new window
function openAttachmentPreview(url, fileType){
    if(fileType === "image"){
        openImagePreview(url);
    } else if(fileType === "pdf"){
        window.open(url, '_blank', 'width=800,height=600,scrollbars=yes,resizable=yes');
    } else {
        openDownloadPreview(url);
    }
}

// Helper function to open image preview
function openImagePreview(url){
    var newWindow = window.open('', '_blank', 'width=800,height=600,scrollbars=yes,resizable=yes');
    newWindow.document.write(`
        <html>
            <head>
                <title>Image Preview</title>
                <style>
                    body { margin: 0; padding: 20px; background: #f5f5f5; display: flex; align-items: center; justify-content: center; min-height: 100vh; }
                    img { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
                </style>
            </head>
            <body>
                <img src="${url}" alt="Attachment Preview">
            </body>
        </html>
    `);
    newWindow.document.close();
}

// Helper function to open download preview
function openDownloadPreview(url){
    var newWindow = window.open('', '_blank', 'width=400,height=200,scrollbars=yes,resizable=yes');
    newWindow.document.write(`
        <html>
            <head>
                <title>File Preview</title>
                <style>
                    body { margin: 0; padding: 20px; background: #f5f5f5; display: flex; align-items: center; justify-content: center; min-height: 100vh; text-align: center; }
                    .content { background: white; padding: 30px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
                    a { color: #3b82f6; text-decoration: none; font-weight: bold; }
                    a:hover { text-decoration: underline; }
                </style>
            </head>
            <body>
                <div class="content">
                    <p>Cannot preview this file type</p>
                    <a href="${url}" target="_blank">Click to download file</a>
                </div>
            </body>
        </html>
    `);
    newWindow.document.close();
}

function validateFileTypeFromUrl(url){
    if(url.match(/\.(jpg|jpeg|png|gif)$/i)){
        return "image";
    } else if(url.match(/\.pdf$/i)){
        return "pdf";
    } else {
        return "other";
    }
}

// Function to update attachment icons based on attachment status
function updateAttachmentIcons(row){
    var fileInput = row.querySelector('.js-file-upload');
    var previousFileInput = row.querySelector('input[name="previousfile[]"]');
    var uploadIcon = row.querySelector('a[onclick="showFileSelection(this)"]');
    var previewIcon = row.querySelector('a[onclick="previewAttachmentInWindow(this)"]');
    
    var hasNewFile = fileInput && fileInput.files && fileInput.files.length > 0;
    var hasExistingFile = previousFileInput && previousFileInput.value && previousFileInput.value.trim() !== '';
    var hasAttachment = hasNewFile || hasExistingFile;
    
    if(hasAttachment){
        // Show preview icon, hide upload icon
        if(uploadIcon) uploadIcon.style.display = 'none';
        if(previewIcon) previewIcon.style.display = 'inline-block';
    } else {
        // Show upload icon, hide preview icon
        if(uploadIcon) uploadIcon.style.display = 'inline-block';
        if(previewIcon) previewIcon.style.display = 'none';
    }
}

// Function to update all attachment icons in the table
function updateAllAttachmentIcons(){
    var rows = document.querySelectorAll('#multi-ledger-entries-table tbody tr');
    rows.forEach(function(row){
        updateAttachmentIcons(row);
    });
}

function setStepperActive(targetSwitch){
    if(targetSwitch == 'js-match'){
        document.querySelectorAll('.js-match').forEach((step) => {
            step.classList.add("active");
        });
        document.querySelectorAll('.js-import').forEach((step) => {
            step.classList.remove("active");
        });
    }else if(targetSwitch == 'js-import'){
        document.querySelectorAll('.js-match').forEach((step) => {
            step.classList.add("active");
        });
        document.querySelectorAll('.js-import').forEach((step) => {
            step.classList.add("active");
        });
    }else{
        document.querySelectorAll('.js-match').forEach((step) => {
            step.classList.remove("active");
        });
        document.querySelectorAll('.js-import').forEach((step) => {
            step.classList.remove("active");
        });
    }
}

function copyToClipboard(targetId,tooltipId = ''){
    var copyText = document.getElementById(targetId);
    copyText.select();
    copyText.setSelectionRange(0, 99999);
    navigator.clipboard.writeText(copyText.value);
    
    if(document.getElementById(tooltipId)){
        var tooltip = document.getElementById(tooltipId);
        tooltip.innerHTML = "Copied";
    }else{
        showAlert('success&Copied to Clipboard');
    }
}

function resetTooltip(tooltipId){
    var tooltip = document.getElementById(tooltipId);
    tooltip.innerHTML = "Copy to your clipboard";
}

function addClassByValue(element, verifyValue, className){
    if(element.value == verifyValue || element.value == ""){
        element.classList.add(className);
    }
}

function sendWhatsapp(type,id){
    jQuery.ajax({
        type: "POST", dataType: "html",
        url: webpath + "ajax/common/common.php",
        data: ({
            pageaction: "sendWhatsapp",
            type: type,
            id: id
        }),
        success: function(responseText, responseStatus) {
            window.open(responseText, "_blank");
            if (typeof DialogChannel !== 'undefined') {
                DialogChannel.postMessage(responseText); // Send the URL to Flutter
            }
        }
    }); 
}

function exportExcel(type, id = "", id2 = ""){
    var filtertype = "date";
    if(document.querySelector('.js-btn-togglesearchdiv')){
       filtertype = document.querySelector('.js-btn-togglesearchdiv').value; 
    }
    showLoading();
    jQuery.ajax({
        type: "POST", dataType: "html",
        url: webpath + "ajax/common/common.php",
        data: ({
            pageaction: "exportExcel",
            type: type,
            id: id,
            id2: id2,
            filtertype: filtertype,
            searchstatus: jQuery('#searchstatus').val(),
            searchkeyword: jQuery('#searchkeyword').val(),
            searchuser: jQuery('#searchuser').val(),
            searchyear: jQuery('#searchyear').val(),
            searchmonth: jQuery('#searchmonth').val(),
            searchday: jQuery('#searchday').val(),

            searchsource: jQuery('#searchsource').val(),
            searchcat_id: jQuery('#searchcat_id').val(),
            searchtype_id: jQuery('#searchtype_id').val(),
            searchtrantype: jQuery('#searchtrantype').val(),
            searchledgertype: jQuery('#searchledgertype').val(),
            searchledger: jQuery('#searchledger').val(),
            searchreportgroupby: jQuery('#searchreportgroupby').val(),
            searchevent: jQuery('#searchevent').val(),
            searchaction: jQuery('#searchaction').val(),

            datefrom: jQuery('#datefrom').val(),
            dateto: jQuery('#dateto').val(),
            searchdate: jQuery('#searchdate').val(),
            pagination: getPaginationFilter(false)
        }),
        success: function(responseText, responseStatus) {
            hideLoading();
            console.log(responseText);
            var arr = responseText.split("&&&&");
            if(arr[0] == "success"){
                arr.shift();
                window.open(arr.join('&'),"_self");
            }else if(arr[0] == "fail"){
                showAlert("fail&" + jslang["failtoexport"]);
            }
        }
    });
}

function printPDF(type, keyid = ""){
    var filtertype = "date";
    if(document.querySelector('.js-btn-togglesearchdiv')){
       filtertype = document.querySelector('.js-btn-togglesearchdiv').value; 
    }
    showLoading();
    jQuery.ajax({
        type: "POST", dataType: "html",
        url: webpath + "ajax/common/common.php",
        timeout: 1800000, // 30 minutes,
        data: ({
            pageaction: "printPDF",
            type: type,
            keyid: keyid,
            filtertype: filtertype,
            searchstatus: jQuery('#searchstatus').val(),
            searchuser: jQuery('#searchuser').val(),
            searchyear: jQuery('#searchyear').val(),
            searchmonth: jQuery('#searchmonth').val(),
            searchday: jQuery('#searchday').val(),

            searchsource: jQuery('#searchsource').val(),
            searchcat_id: jQuery('#searchcat_id').val(),
            searchtype_id: jQuery('#searchtype_id').val(),
            searchtrantype: jQuery('#searchtrantype').val(),
            searchledgertype: jQuery('#searchledgertype').val(),
            searchledger: jQuery('#searchledger').val(),
            searchkeyword: jQuery('#searchkeyword').val(),

            datefrom: jQuery('#datefrom').val(),
            dateto: jQuery('#dateto').val(),
            searchdate: jQuery('#searchdate').val(),
            pagination: getPaginationFilter(false)
        }),
        success: function(responseText, responseStatus) {
            hideLoading();
            console.log(responseText);
            var arr = responseText.split("&&&&");
            if(arr[0] == "success"){
                arr.shift();
                openDialog(arr.join('&'));
            }else if(arr[0] == "fail"){
                showAlert("fail&" + jslang["failtoexport"]);
            }
        }
    });
}

function forceShowTips(targetAdd) {
  var targetElement = document.getElementById(targetAdd);

  targetElement.classList.toggle('hidden');
  targetElement.classList.toggle('!block');
  targetElement.classList.toggle('!visible');
  targetElement.classList.toggle('!opacity-100');
}

function closeShowTip(id, save = true){
    jQuery.ajax({
        type: "POST", dataType: "html",
        url: webpath + "ajax/common/common.php",
        data: ({
            pageaction: "closeShowTip",
            id: id,
            save: save,
        }),
        success: function(responseText, responseStatus) {
            ;
        }
    });
}

function closeSessionShowTip(id){
    jQuery.ajax({
        type: "POST", dataType: "html",
        url: webpath + "ajax/common/common.php",
        data: ({
            pageaction: "closeSessionShowTip",
            id: id
        }),
        success: function(responseText, responseStatus) {
            ;
        }
    });
}

function initToggleAllCheckBox(){
    var triggerElement = document.querySelector('.js-checkallbox');
    var checkboxList = document.querySelectorAll('.js-checkbox');
    checkboxList.forEach((checkbox) => {
        checkbox.addEventListener('change', function () {
            var isAnyUnchecked = Array.from(checkboxList).some((box) => !box.checked);
            if(!isAnyUnchecked){
                triggerElement.checked = true;
            }else{
                triggerElement.checked = false;
            }
        });
    });
}

function toggleAllCheckBox(triggerElement, clear = false){
    if(clear){
        triggerElement.checked = false;
        var checkboxList = document.querySelectorAll('.js-checkbox');

        checkboxList.forEach((checkbox) => {
            if(checkbox.checked){
                checkbox.click();
            }
        });
    }else{
        var isChecked = triggerElement.checked;
        var checkboxList = document.querySelectorAll('.js-checkbox');

        if(isChecked){
            checkboxList.forEach((checkbox) => {
                if(!checkbox.checked){
                    checkbox.click();
                }
            });
        }else{
            checkboxList.forEach((checkbox) => {
                if(checkbox.checked){
                    checkbox.click();
                }
            });
        }
    }
    
}  

function handleDragOver(event) {
    event.preventDefault();
}

function handleDrop(event,fileInput) {
    event.preventDefault();
    const files = event.dataTransfer.files;
    moveFilesToInput(files,fileInput);
}

function moveFilesToInput(files,fileInput) {
    fileInput.files = files;
    const event = new Event('change', { bubbles: true });
    fileInput.dispatchEvent(event)
}

// iPhone/iPad photos are 3-15MB, but the server shrinks every image to 800px anyway.
// Shrink them in the browser first so the save uploads a few hundred KB, not the original.
// Never fails: any problem keeps the original file.
async function compressFormImages(formData, maxSide = 1600, quality = 0.8){
    try {
        var keys = [];
        formData.forEach(function(value, key){
            if(value instanceof File && value.size > 0 && keys.indexOf(key) == -1){
                keys.push(key);
            }
        });
        for(const key of keys){
            var files = formData.getAll(key);
            var compressed = [];
            var changed = false;
            for(const file of files){
                var newfile = (file instanceof File) ? await compressImageFile(file, maxSide, quality) : file;
                compressed.push(newfile);
                if(newfile !== file){ changed = true; }
            }
            // Re-append in the same order, so file[i] still matches its ledger row
            if(changed){
                formData.delete(key);
                compressed.forEach(function(file){ formData.append(key, file); });
            }
        }
    } catch(err) {
        console.log("compressFormImages: " + err);
    }
    return formData;
}

function compressImageFile(file, maxSide, quality){
    return new Promise(function(resolve){
        if(file.type != "image/jpeg" && file.type != "image/png"){
            resolve(file);
            return;
        }
        var src = URL.createObjectURL(file);
        var img = new Image();
        img.onload = function(){
            try {
                var scale = Math.min(1, maxSide / Math.max(img.naturalWidth, img.naturalHeight));
                if(scale == 1 && file.size <= 500 * 1024){
                    URL.revokeObjectURL(src);
                    resolve(file); // already small, skip a second JPEG pass
                    return;
                }
                var canvas = document.createElement("canvas");
                canvas.width = Math.round(img.naturalWidth * scale);
                canvas.height = Math.round(img.naturalHeight * scale);
                var ctx = canvas.getContext("2d");
                ctx.fillStyle = "#ffffff"; // transparent PNG becomes white, same as the server resize
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
                URL.revokeObjectURL(src);
                canvas.toBlob(function(blob){
                    canvas.width = canvas.height = 0; // free the canvas memory, iOS Safari holds it
                    if(!blob || blob.size >= file.size){
                        resolve(file);
                        return;
                    }
                    var name = file.name.replace(/\.[^.]*$/, "") + ".jpg";
                    resolve(new File([blob], name, { type: "image/jpeg" }));
                }, "image/jpeg", quality);
            } catch(err) {
                URL.revokeObjectURL(src);
                resolve(file);
            }
        };
        img.onerror = function(){
            URL.revokeObjectURL(src);
            resolve(file);
        };
        img.src = src;
    });
}

// HEIC photos (iPhone, macOS, WhatsApp Web downloads) often arrive named .png or .jpg.
// The server cannot read HEIC and Chrome cannot show it, so every picked image is checked here,
// before the page's own onchange (preview, file name) runs, and a HEIC is turned into a JPEG.
// Covers every <input type=file> on every page, including drag and drop (moveFilesToInput).
var heicLibUrl = (typeof weburl !== "undefined" ? weburl : "") + "assets/js/heic-to-1.6.5.js";
var heicLibLoading = null;

window.addEventListener("change", function(event){
    var input = event.target;
    if(!(input instanceof HTMLInputElement) || input.type != "file" || event.heicChecked){
        return;
    }
    var files = Array.prototype.slice.call(input.files || []);
    var mayBeImage = files.some(function(file){
        return file.type == "" || file.type.indexOf("image/") == 0 || /\.(heic|heif)$/i.test(file.name);
    });
    if(!mayBeImage){
        return; // pdf, csv: untouched
    }
    event.stopImmediatePropagation(); // the page's onchange runs again in convertHeicInput, with the checked files
    convertHeicInput(input, files);
}, true);

async function convertHeicInput(input, files){
    var output = [];
    var changed = false;
    var failed = false;
    for(const file of files){
        if(!(await isHeicFile(file))){
            output.push(file);
            continue;
        }
        showLoading();
        try {
            output.push(await heicToJpeg(file));
            changed = true;
        } catch(err) {
            console.log("convertHeicInput: " + (err && err.message ? err.message : err));
            failed = true;
        }
        hideLoading();
    }
    if(changed && !failed){
        try {
            var transfer = new DataTransfer();
            output.forEach(function(file){ transfer.items.add(file); });
            input.files = transfer.files;
        } catch(err) {
            console.log("convertHeicInput: " + err); // very old browser without DataTransfer
            failed = true;
        }
    }
    if(failed){
        input.value = "";
        showAlert("fail&" + jslang["heicnotsupported"]);
        return;
    }
    var again = new Event("change", { bubbles: true });
    again.heicChecked = true;
    input.dispatchEvent(again);
}

// HEIC/HEIF files start with an ISO "ftyp" box; the brand says which kind
async function isHeicFile(file){
    try {
        var head = new Uint8Array(await file.slice(0, 12).arrayBuffer());
        var box = String.fromCharCode.apply(null, head.subarray(4, 8));
        var brand = String.fromCharCode.apply(null, head.subarray(8, 12));
        return box == "ftyp" && ["heic", "heix", "hevc", "hevx", "heim", "heis", "hevm", "hevs", "mif1", "msf1"].indexOf(brand) != -1;
    } catch(err) {
        return /\.(heic|heif)$/i.test(file.name);
    }
}

async function heicToJpeg(file){
    var name = file.name.replace(/\.[^.]*$/, "") + ".jpg";
    var blob = await nativeImageToJpeg(file); // Safari reads HEIC itself
    if(!blob){
        await loadHeicLib();
        blob = await HeicTo({ blob: file, type: "image/jpeg", quality: 0.9 });
    }
    return new File([blob], name, { type: "image/jpeg", lastModified: Date.now() });
}

function nativeImageToJpeg(file){
    return new Promise(function(resolve){
        var src = URL.createObjectURL(file);
        var img = new Image();
        img.onload = function(){
            try {
                var canvas = document.createElement("canvas");
                canvas.width = img.naturalWidth;
                canvas.height = img.naturalHeight;
                var ctx = canvas.getContext("2d");
                ctx.fillStyle = "#ffffff";
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                ctx.drawImage(img, 0, 0);
                URL.revokeObjectURL(src);
                canvas.toBlob(function(blob){
                    canvas.width = canvas.height = 0;
                    resolve(blob);
                }, "image/jpeg", 0.9);
            } catch(err) {
                URL.revokeObjectURL(src);
                resolve(null);
            }
        };
        img.onerror = function(){
            URL.revokeObjectURL(src);
            resolve(null);
        };
        img.src = src;
    });
}

// The HEIC decoder is 3MB, so it is only fetched the first time a HEIC is picked
function loadHeicLib(){
    if(typeof HeicTo !== "undefined"){
        return Promise.resolve();
    }
    if(!heicLibLoading){
        heicLibLoading = new Promise(function(resolve, reject){
            var script = document.createElement("script");
            script.src = heicLibUrl;
            script.onload = function(){ resolve(); };
            script.onerror = function(){
                heicLibLoading = null; // allow a retry on the next pick
                reject(new Error("cannot load " + heicLibUrl));
            };
            document.head.appendChild(script);
        });
    }
    return heicLibLoading;
}

function downgradeModal(){
    jQuery.ajax({
        type: "POST", dataType: "html",
        url: webpath + "ajax/common/common.php",
        data: ({
            pageaction: "downgradeModal"
        }),
        success: function(responseText, responseStatus) {
            showConfirmationModal(responseText);
        }
    }); 
}

function downgrade(){
    jQuery.ajax({
        type: "POST", dataType: "html",
        url: webpath + "ajax/common/common.php",
        data: ({
            pageaction: "downgrade"
        }),
        success: function(responseText, responseStatus) {
            window.open(responseText,"_self");
        }
    }); 
}

function updateDateNow(triggerElement, triggerCondition,targetElement){
    if(document.getElementById(triggerElement).value == triggerCondition && (document.getElementById(targetElement).value == "" || document.getElementById(targetElement).value == "0000-00-00")){
        const today = new Date();
        const year = today.getFullYear();
        const month = String(today.getMonth() + 1).padStart(2, '0'); // Month is zero-based
        const day = String(today.getDate()).padStart(2, '0');

        const formattedDate = `${year}-${month}-${day}`;
        document.getElementById(targetElement).value = formattedDate;
        document.getElementById(targetElement).classList.remove('text-transparent');
    }
}

function checkJsonString(json){
    try {
        return jsonObject = JSON.parse(json.replace(/'/g, '"'));
    } catch (error) {
        return jsonObject = json;
    }
}

function handleRedirect(subfunction, subparam, defaultFunc, defaultParam = ""){
    if(subfunction != null){
        if(subparam != null){
            const arrayData = checkJsonString(subparam)
            if(typeof(arrayData) == "object"){
                switch(arrayData.length){
                    case 1:
                        window[subfunction](arrayData[0]);
                    break;
                    case 2:
                        window[subfunction](arrayData[0],arrayData[1]);
                    break;
                    case 3:
                        window[subfunction](arrayData[0],arrayData[1],arrayData[2]);
                    break;
                    case 4:
                        window[subfunction](arrayData[0],arrayData[1],arrayData[2],arrayData[3]);
                    break;
                } 
            }else{
                window[subfunction](subparam);
            }
        }else{
            window[subfunction]();
        }
    }else{
        if(defaultParam != ""){
            window[defaultFunc](defaultParam);
        }else{
            window[defaultFunc]();
        }
    }
}

// Custom rounding function
function roundToDecimal(num, decimalPlaces) {
    const factor = Math.pow(10, decimalPlaces);
    return Math.round(num * factor + 0.0000001) / factor;
}

// Function to format unit numbers
function sysUnitNumberFormat(value = "") {
    const parsedValue = parseFloat(value);
    return isNaN(parsedValue) ? roundToDecimal(0, jsunitdecimal) : roundToDecimal(parsedValue, jsunitdecimal);
}

// Function to format general numbers
function sysNumberFormat(value = "") {
    const parsedValue = parseFloat(value);
    return isNaN(parsedValue) ? roundToDecimal(0, jspricedecimal) : roundToDecimal(parsedValue, jspricedecimal);
}

function sysFourDecimalFormat(value = "") {
    const parsedValue = parseFloat(value);
    return isNaN(parsedValue) ? roundToDecimal(0, 4) : roundToDecimal(parsedValue, 4);
}

// Function to format tax prices as a string
function sysTaxPriceFormat(value = "") {
    let roundedValue = sysFourDecimalFormat(value);

    const decimalCount = (roundedValue.toString().split(".")[1] || "").length;
    if (decimalCount < jspricedecimal) {
        return roundedValue.toFixed(jspricedecimal);
    }
    return roundedValue.toString();
}

// Function to format prices as a string
function sysPriceFormat(value = "") {
    const parsedValue = parseFloat(value);
    const roundedValue = isNaN(parsedValue) ? roundToDecimal(0, jspricedecimal) : roundToDecimal(parsedValue, jspricedecimal);
    return roundedValue.toFixed(jspricedecimal);
}

// Function to format units as a string
function sysUnitFormat(value = "") {
    const parsedValue = parseFloat(value);
    const roundedValue = isNaN(parsedValue) ? roundToDecimal(0, jsunitdecimal) : roundToDecimal(parsedValue, jsunitdecimal);
    return roundedValue.toFixed(jsunitdecimal);
}


function switchDateRangeByYear(targetElement, add){
    let datefrom = targetElement.querySelector('#datefrom');
    let dateto = targetElement.querySelector('#dateto');

    let start = new Date(datefrom.value);
    let end = new Date(dateto.value);
    
    if(add){
        start.setFullYear(start.getFullYear() + 1);
        end.setFullYear(end.getFullYear() + 1);
    }else{
        start.setFullYear(start.getFullYear() - 1);
        end.setFullYear(end.getFullYear() - 1);
    }
    datefrom.value = formatDate(start);
    dateto.value = formatDate(end);
}

function switchDateRangeByMonth(targetElement, add){
    let datefrom = targetElement.querySelector('#datefrom');
    let dateto = targetElement.querySelector('#dateto');

    let dateParts = datefrom.value.split("/");
    let year = parseInt(dateParts[0], 10);
    let month = parseInt(dateParts[1], 10);

    if(add){
        if(month == 12){
            year += 1;
            month = 1;
        }else{
            month += 1;
        }
    }else{
        if(month == 1){
            year -= 1;
            month = 12;
        }else{
            month -= 1;
        }
    }

    let start = new Date(year, month - 1, 1);
    let end = new Date(year, month, 0);

    datefrom.value = formatDate(start);
    dateto.value = formatDate(end);
}

function formatDate(date) {
  let year = date.getFullYear();
  let month = (date.getMonth() + 1).toString().padStart(2, '0');
  let day = date.getDate().toString().padStart(2, '0');

  return `${year}/${month}/${day}`;
}

function checkAccess(menuid,functionName,modal = null){
    showLoading();
    jQuery.ajax({
        type: "POST", dataType: "html",
        url: webpath + "ajax/common/common.php",
        data: ({
            pageaction: "checkAccess",
            menuid: menuid
        }),
        success: function(responseText, responseStatus) {
            if(responseText != "error"){
                const func = new Function(functionName);
                func();
                if(modal != null){
                    closeModal('modal');
                }
            }else{
                showAlert("fail&" + jslang["unabletoaccess"]);
                hideLoading();
            }
        }
    }); 
}

function handleFormKeyDown(event) {
    // Check if the pressed key is Enter and the active element is not a textarea
    if (event.key === 'Enter' && event.target.nodeName !== 'TEXTAREA') {
        event.preventDefault(); // Prevent form submission
        return false;
    }
    return true; // Allow default behavior for other keys or when inside textarea
}

function filterPhone(element) {
    var phone = element.value;
    phone = phone.replace(/[^0-9\-]/g, '');
    phone = phone.replace(/[\s\-+]/g, '');

    if (phone.startsWith('0') && phone !== '') {
        phone = '6' + phone;
    }
    element.value = phone;
} 

function toggleTextfield(show, elementId) {
    var element = document.getElementById(elementId);
    if (element) {
        if (show) {
            element.classList.remove('!hidden');
        } else {
            element.classList.add('!hidden');
        }
    }
}

function getScrollY() {
    var height = window.innerHeight;
    var width = window.innerWidth;

    if (width > 750) {
        if (height < 700) {
            return '43vh';
        } else {
            return '48vh';
        }
    } else if (height < 600) {
        return '23vh';
    } else if (height < 700) {
        return '27vh';
    } else if (height < 800) {
        return '33vh';
    } else if (height < 900) {
        return '38vh';
    } else if (height < 1000) {
        return '43vh';
    } else {
        return '48vh';
    }
}

function copyLinkModal(type, id, modal = "modal"){
    jQuery.ajax({
        type: "POST", dataType: "html",
        url: webpath + "ajax/common/common.php",
        data: ({
            pageaction: "copyLinkModal",
            id: id,
            type: type,
            modal: modal,
        }),
        success: function(responseText, responseStatus) {
            if(modal == "modal"){
                showModal(responseText);
            }else if(modal == "modalConfirmation"){
                showConfirmationModal(responseText);
            }
        }
    });
}

function printDocument(type, id){
    hideLoading();
    jQuery.ajax({
        type: "POST", dataType: "html",
        url: webpath + "ajax/common/common.php",
        data: ({
            pageaction: "printDocument",
            id: id,
            type: type
        }),
        success: function(responseText, responseStatus) {
            openDialog(responseText);
        }
    });
}

function showWSSupportModal(supportphone){
    showLoading();
    jQuery.ajax({
        type: "POST", dataType: "html",
        url: webpath + "ajax/common/common.php",
        data: ({
            pageaction: "showWSSupportModal",
            supportphone: supportphone
        }),
        success: function(responseText, responseStatus) {
            showConfirmationModal(responseText);
        }
    });
}

function WSSupport(supportphone){
    showLoading();
    jQuery.ajax({
        type: "POST", dataType: "html",
        url: webpath + "ajax/common/common.php",
        data: ({
            pageaction: "WSSupport",
            supportphone: supportphone
        }),
        success: function(responseText, responseStatus) {
            window.open(responseText);
            closeModal('modalConfirmation');
            hideLoading();
        }
    });
}

function customFormatDate(input) {
  let val = input.value.trim().replace(/\D/g, ''); // Remove non-digits

  if (val.length === 0) {
    input.setCustomValidity("Date format is incorrect.");
    return;
  }

  if (val.length !== 8) {
    input.setCustomValidity("Date must be in DD/MM/YYYY format.");
    input.focus();
    return;
  }

  let day = val.slice(0, 2);
  let month = val.slice(2, 4);
  let year = val.slice(4, 8);

  // Basic validation
  if (
    parseInt(month) < 1 || parseInt(month) > 12 ||
    parseInt(day) < 1 || parseInt(day) > 31
  ) {
    input.setCustomValidity("Invalid day or month.");
    input.focus();
    return;
  }

  input.value = `${day}/${month}/${year}`;
  input.setCustomValidity("");
  return true;
}


// css class: btndatepicker, datepicker
function initDateinputs(){
    const today = new Date();
    const dd = String(today.getDate()).padStart(2, '0');
    const mm = String(today.getMonth() + 1).padStart(2, '0'); // Months are 0-indexed
    const yyyy = today.getFullYear();

    document.querySelectorAll(`.btndatepicker`).forEach(btn => {
        btn.addEventListener(`click`, () => {
            const index = btn.getAttribute(`data-index`);
            const textInput = document.querySelector(`.js-transaction-date[data-index="${index}"]`);
            const datepicker = document.querySelector(`.datepicker[data-index="${index}"]`);

            // Show date picker
            datepicker.showPicker?.();
            datepicker.focus();

            // Optional: handle change for each separately
            datepicker.addEventListener("change", () => {
                // Format: YYYY-MM-DD
                const dateValue = datepicker.value; 

                // select date action
                if (dateValue)
                    [year, month, day] = dateValue.split("-");
                // clear date action
                else
                    [year, month, day] = [yyyy, mm, dd];

                // Update text input value
                if (textInput) {
                    textInput.value = `${day}/${month}/${year}`;

                    // Optionally trigger onchange handler
                    textInput.dispatchEvent(new Event("change", { bubbles: true }));

                    // check value
                    // console.log(`button`, datepicker);
                    // console.log(`Button "${index}" picked: "${datepicker.value}"`);
                }
            }, { once: true }); // Add `once: true` to avoid multiple alerts
        });
    });
}

// css class: btndatepicker, datepicker
function initDateinput(dataIndex){
    const today = new Date();
    const dd = String(today.getDate()).padStart(2, '0');
    const mm = String(today.getMonth() + 1).padStart(2, '0'); // Months are 0-indexed
    const yyyy = today.getFullYear();

    const parents = document.querySelectorAll(`.btndatepicker`);
    const lastParent = parents[parents.length - 1];
    lastParent.addEventListener(`click`, () => {
        const textInput = document.querySelector(`.js-transaction-date[data-index="${dataIndex}"]`);
        const datepicker = document.querySelector(`.datepicker[data-index="${dataIndex}"]`);

        // Show date picker
        datepicker.showPicker?.();
        datepicker.focus();

        // Optional: handle change for each separately
        datepicker.addEventListener("change", () => {
            // Format: YYYY-MM-DD
            const dateValue = datepicker.value; 

            // select date action
            if (dateValue)
                [year, month, day] = dateValue.split("-");
            // clear date action
            else
                [year, month, day] = [yyyy, mm, dd];

            // Update text input value
            if (textInput) {
                textInput.value = `${day}/${month}/${year}`;

                // Optionally trigger onchange handler
                textInput.dispatchEvent(new Event("change", { bubbles: true }));

                // check value
                //console.log(`button`, datepicker);
                //console.log(`Button "${dataIndex}" picked: "${datepicker.value}"`);
            }
        }, { once: true }); // Add `once: true` to avoid multiple alerts
    });
}

// Dropdrown filter function: set default value
function initDropdownFilter(){
    const textfieldDom = document.querySelectorAll('.tw-dropdown-textfield');
    textfieldDom.forEach(textfield => {
        dropdownSearchOnClick(textfield, 'outside');
    });
}

// Dropdown filter function: textfield on click (open and close drodownlist)
function dropdownSearchOnClick(selfelement, clickfrom = "inside"){
    const dropdownContainerDom = selfelement.parentElement.parentElement;
    const textfieldDom = dropdownContainerDom.querySelector('.tw-dropdown-textfield');
    const inputDom = dropdownContainerDom.querySelector("input[type='hidden']");
    const dropdownListContainerDom = dropdownContainerDom.querySelector('.tw-dropdown-list-container');
    const itemDom = dropdownListContainerDom.querySelectorAll(".tw-dropdown-item");

    // no selected option from user
    if (inputDom.value == null || inputDom.value == "") {
        textfieldDom.value = "";
    } 
    // has selected option from user
    else {
        textfieldDom.value = Array.from(itemDom).find(item => item.dataset.value == inputDom.value)?.textContent;
    }

    switch (clickfrom) {
        case "inside":
            // Blur from text field when menu hidden
            // !!! avoid user mistyping when not selecting from dropdown
            if (!dropdownListContainerDom.classList.contains("hidden")) {
                selfelement.blur();
                dropdownListContainerDom.classList.add('hidden');
            }
            // Auto highlight text when menu not hidden
            else {
                itemDom.forEach(option => {
                    option.style.display = "block";
                    option.classList.remove("active");
                });
                selfelement.select();
                dropdownListContainerDom.classList.remove('hidden');

                // Move list to body
                // document.body.appendChild(dropdownListContainerDom);
                // const rect = dropdownContainerDom.getBoundingClientRect();
                // Object.assign(dropdownListContainerDom.style, {
                    //     position: "absolute",
                    // top: window.scrollY + rect.bottom + "px",
                    // left: window.scrollX + rect.left + "px",
                    // width: rect.width + "px",
                    // zIndex: 999999
               // });
            }
            break;
        case "outside":
            selfelement.blur();
            dropdownListContainerDom.classList.add('hidden');
            break;
    }
}

// Dropdown filter function: textfield input on update (filter drodownlist)
function dropdownSearchOnChange(selfelement){
    const categorySet = new Set();
    const dropdownContainerDom = selfelement.parentElement.parentElement;
    const itemDom = dropdownContainerDom.querySelectorAll('.tw-dropdown-item');
    const value = selfelement.value.toLowerCase();

    itemDom.forEach(option => {
        if (value == null || value == "") {
            option.style.display = "block";
        }
        else {
            option.style.display = option.textContent.toLowerCase().includes(value) ? "block" : "none";
            if (option.style.display == "block" && option.dataset.category != "") {
                categorySet.add(option.dataset.category);
            }
        }
    });

    if (value != null && value != "") {
        // Convert the Set to an array of unique categories
        const availableCategory = Array.from(categorySet);
        if (availableCategory.length == 0) 
            dropdownContainerDom.querySelector(".tw-dropdown-list-container").classList.add("hidden");
        else
            dropdownContainerDom.querySelector(".tw-dropdown-list-container").classList.remove("hidden");

        const categoryOptions = Array.from(itemDom).filter(option => option.dataset.value === "disabled");
        categoryOptions.forEach(option => {
            option.style.display = availableCategory.includes(option.textContent.toLowerCase()) ? "block" : "none";
        });
    }

    // Highlight the first match so Enter can select it
    const dropdownListContainerDom = dropdownContainerDom.querySelector(".tw-dropdown-list-container");
    setDropdownActiveOption(dropdownListContainerDom, value != "" ? getDropdownSelectableOptions(dropdownListContainerDom)[0] : null);
}

// Dropdown filter function: keyboard control (ArrowUp/ArrowDown move, Enter select, Escape/Tab close)
function dropdownSearchOnKeyDown(event, selfelement){
    const dropdownContainerDom = selfelement.parentElement.parentElement;
    const inputDom = dropdownContainerDom.querySelector("input[type='hidden']");
    const dropdownListContainerDom = dropdownContainerDom.querySelector('.tw-dropdown-list-container');
    const isOpen = !dropdownListContainerDom.classList.contains("hidden");
    const options = getDropdownSelectableOptions(dropdownListContainerDom);
    const activeOption = options.find(option => option.classList.contains("active"));

    switch (event.key) {
        case "ArrowDown":
        case "ArrowUp": {
            event.preventDefault();
            // List closed: open it and start from the selected option
            if (!isOpen) {
                dropdownSearchOnClick(selfelement);
                setDropdownActiveOption(dropdownListContainerDom, getDropdownSelectableOptions(dropdownListContainerDom).find(option => option.dataset.value == inputDom.value));
                break;
            }
            if (options.length == 0) break;

            const step = event.key == "ArrowDown" ? 1 : -1;
            let index = activeOption ? options.indexOf(activeOption) + step : (step == 1 ? 0 : options.length - 1);
            index = Math.min(Math.max(index, 0), options.length - 1);
            setDropdownActiveOption(dropdownListContainerDom, options[index]);
            break;
        }
        case "Enter":
            if (isOpen && activeOption) {
                event.preventDefault();
                activeOption.click();
            }
            break;
        case "Escape":
        case "Tab":
            if (isOpen) {
                if (event.key == "Escape") event.preventDefault();
                // Drop the half-typed search, show the selected option again
                const selectedOption = Array.from(dropdownListContainerDom.querySelectorAll(".tw-dropdown-item")).find(option => option.dataset.value == inputDom.value);
                selfelement.value = selectedOption?.textContent ?? "";
                dropdownListContainerDom.classList.add("hidden");
            }
            break;
    }
}

// Dropdown filter function: options user can select (visible, not a group header)
function getDropdownSelectableOptions(dropdownListContainerDom){
    return Array.from(dropdownListContainerDom.querySelectorAll(".tw-dropdown-item"))
        .filter(option => option.dataset.value !== "disabled" && option.style.display !== "none");
}

// Dropdown filter function: highlight one option for keyboard select
function setDropdownActiveOption(dropdownListContainerDom, activeOption){
    dropdownListContainerDom.querySelectorAll(".tw-dropdown-item.active").forEach(option => option.classList.remove("active"));
    if (activeOption) {
        activeOption.classList.add("active");
        activeOption.scrollIntoView({ block: "nearest" });
    }
}

// Dropdown filter function: dropdown option on select
// domType: "name", "id"
function dropdownOnSelect(selfelement, inputName, domType = "name"){
    // Don't allow user to select Ledger Group Header in dropdown list
    if (selfelement.dataset.value === "disabled") return;

    // Only update DOM under the dropdown container
    const dropdownContainer = selfelement.parentElement.parentElement;
    dropdownContainer.getElementsByClassName('tw-dropdown-textfield')[0].value = selfelement.textContent;
    if (domType == "name")
        dropdownContainer.querySelector(`input[name='${inputName}']`).value = selfelement.dataset.value;
    else if (domType == "id")
        dropdownContainer.querySelector(`input[id='${inputName}']`).value = selfelement.dataset.value;
    dropdownContainer.getElementsByClassName('tw-dropdown-list-container')[0].classList.add("hidden");
}

// Apend dropdown list container to body
function appendDropdownListContainer(selfelement){
    console.log('append', selfelement);
    const list = selfelement.parentElement.parentElement.querySelector('.tw-dropdown-list-container'); 
    console.log('append', list);
    document.body.appendChild(list);

    const rect = selfelement.getBoundingClientRect();
    list.style.position = "absolute";
    list.style.top = (window.scrollY + rect.bottom) + "px";
    list.style.left = (window.scrollX + rect.left) + "px";
    list.style.width = rect.width + "px";
}

// Ensure validateDropdown executed before sanitizeFormInput
async function validateDropdown(){
    const container = document.querySelectorAll('.tw-dropdown-container');

    container.forEach(container => {  
        const hiddenInput = container.querySelector("input[type='hidden']").value;
        const labelText = Array.from(container.querySelectorAll(".tw-dropdown-list-container div"))?.find(option => option.dataset.value === hiddenInput)?.textContent;
        const textfield = container.querySelector(".tw-dropdown-textfield");

        if (labelText) 
            textfield.value = labelText;
        else {
            textfield.value = "";
            textfield.removeAttribute("value");
        }
    });

    // Ensure function done only execute next code
    return Promise.resolve();
}