${statusText}
`;
contractsList.appendChild(card);
});
}
// --- EVENT LISTENERS ---
addContractForm.addEventListener('submit', (e) => {
e.preventDefault();
const newContract = {
id: Date.now(),
title: document.getElementById('contract-title').value,
partyA: document.getElementById('party-a').value,
partyB: document.getElementById('party-b').value,
signingDate: document.getElementById('signing-date').value,
expiryDate: document.getElementById('expiry-date').value,
content: document.getElementById('contract-content').value,
};
contractData.push(newContract);
addContractForm.reset();
showTab(0);
renderContracts();
alert('Contract successfully archived!');
});
searchKeyword.addEventListener('input', renderContracts);
filterStatus.addEventListener('change', renderContracts);
contractsList.addEventListener('click', e => {
if (e.target.classList.contains('view-btn')) {
const contractId = parseInt(e.target.dataset.id);
const contract = contractData.find(c => c.id === contractId);
openModal(contract);
}
});
// --- MODAL LOGIC ---
function openModal(contract) {
modalTitle.textContent = contract.title;
modalBody.innerHTML = `
Parties: ${contract.partyA} and ${contract.partyB}
Signing Date: ${new Date(contract.signingDate+'T00:00:00').toLocaleDateString()}
Expiry Date: ${new Date(contract.expiryDate+'T00:00:00').toLocaleDateString()}
Contract Text
${contract.content}
