$(document).ready(function () {
    loader = $('#overlay, #loader');
    document.getElementById('POHeader').innerHTML = 'My Created PO' + "'s";
    approvedPOTable = $('#createdPOTable').DataTable({
        ajax: $.extend({
            url: '/POMgmt/GetMyCreatedPO',
            type: 'GET',
        }, beforeComplete(loader)),
        initComplete: initCompleteCallback(),
        columns: colMyCreatedPO,
        rowCallback: rowPOTypeCallback,
        responsive: true,
        language: {
            emptyTable: "No record available"
        },
        error: errorHandler
    });
})
document.addEventListener("DOMContentLoaded", function () {
    const tabButtons = document.querySelectorAll(".tablinks");
    const headerTitle = document.getElementById("headerUpdate");
    const poForm = document.getElementById("poForm"); 
    const poNoContainer = document.getElementById("poNoContainer"); 

    const poFormTable = document.getElementById("poFormTable"); 

    const poNoTableContainer = document.getElementById("poNoTableContainer"); 
    const btnUpdatePO = document.getElementById("btnUpdatePO");
    const btnCancelPO = document.getElementById("btnCancelPO");
    document.getElementById('otherReason').style.display = "none";
    const tabHeaders = {
        "PONo": "Update PO No",
        "POItem": "Update Item Detail"
    };

    function openTab(tabName) {
        // Hide all tab contents
        document.querySelectorAll(".tabcontent").forEach(tab => {
            tab.style.display = "none";
        });

        // Remove 'active' class from all tabs
        tabButtons.forEach(button => {
            button.classList.remove("active");
        });

        // Show selected tab
        const activeTab = document.getElementById(tabName);
        activeTab.style.display = "block";

        // Show form only in PONo tab
        if (tabName === "PONo") {
            poNoContainer.appendChild(poForm);
            poForm.style.display = "block";
            btnUpdatePO.style.display = "block";
            btnCancelPO.style.display = "block";
        } else {
            btnUpdatePO.style.display = "none";
            btnCancelPO.style.display = "none";
            poForm.style.display = "none";
            poNoTableContainer.appendChild(poFormTable);
            poFormTable.style.display = "block";
        }

        // Update active button style
        document.querySelector(`.tablinks[data-tab="${tabName}"]`).classList.add("active");

        // Update modal header
        headerTitle.textContent = tabHeaders[tabName] || "Default Header";
    }

    // Attach event listeners
    tabButtons.forEach(button => {
        button.addEventListener("click", function () {
            openTab(this.getAttribute("data-tab"));
        });
    });

    // Set default tab
    openTab("PONo");
});