main.js

var employeeListHolder = document.querySelector(".employee-list");
var interviewListHolder = document.querySelector("#interviewList");
var addEmployeeModal = document.querySelector("#employeeModal");
var addInterviewModal = document.querySelector("#interviewModal");

if (addEmployeeModal) addEmployeeModal.style.display = "none";
if (addInterviewModal) addInterviewModal.style.display = "none";

function openEmployeeModal() {
    if (addEmployeeModal) addEmployeeModal.style.display = "block";
}

function openInterviewModal() {
    if (addInterviewModal) addInterviewModal.style.display = "block";
}

function closeEmployeeModal() {
    if (addEmployeeModal) addEmployeeModal.style.display = "none";
}

function closeInterviewModal() {
    if (addInterviewModal) addInterviewModal.style.display = "none";
}

// Optional frontend-only add functions (not used when posting to PHP)
function addEmployee() {
    var name = document.querySelector("#name").value;
    var surname = document.querySelector("#surname").value;
    var position = document.querySelector("#position").value;
    var department = document.querySelector("#department").value;
    var email = document.querySelector("#email").value;
    var salary = document.querySelector("#salary").value;

    var newItem = `
        <li class="employee-card">
            <img class="user-img" src="user.png" alt="user" width="80" height="80">
            <div class="employment-details">
                <div class="name-format">${name} ${surname}</div>
                <div>${position}</div>
                <div>${department}</div>
                <div>${email}</div>
                <div>${salary}</div>
            </div>
        </li>
    `;
    if (employeeListHolder) {
        employeeListHolder.insertAdjacentHTML("beforeend", newItem);
    }
    closeEmployeeModal();
}

function addInterview() {
    var dept = document.querySelector("#intDepartment").value;
    var role = document.querySelector("#intRole").value;

    var newInterviewItem = `
        <li class="list-item">
            <div class="name-format">${dept}</div>
            <div>${role}</div>
            <div>Status: Pending</div>
            <div class="message-card"></div>
            <button class="accept-btn" type="button">Accept</button>
            <button class="reject-btn" type="button">Reject</button>
        </li>
    `;
    if (interviewListHolder) {
        interviewListHolder.insertAdjacentHTML("beforeend", newInterviewItem);
    }
    closeInterviewModal();
}

// Accept / Reject actions with alert + message update
document.addEventListener("click", function (e) {
    if (e.target.classList.contains("accept-btn") || e.target.classList.contains("reject-btn")) {
        var card = e.target.closest(".list-item");
        if (!card) return;

        var msgDiv = card.querySelector(".message-card");
        if (!msgDiv) return;

        if (e.target.classList.contains("accept-btn")) {
            alert("Congratulations, you are accepted for interview.");
            msgDiv.textContent = "Congratulations, you are accepted for interview.";
            msgDiv.classList.remove("message-rejected");
            msgDiv.classList.add("message-accepted");
        } else {
            alert("Sorry, we are moving from your interview.");
            msgDiv.textContent = "Sorry, we are moving from your interview.";
            msgDiv.classList.remove("message-accepted");
            msgDiv.classList.add("message-rejected");
        }
    }
});