import { vars } from '../archive/variable.js';
import { displayFileName, checkDuplicatesFileNameAndExt , restrictToNumber, calculateTotalJointContract, showToolTip, overviewVarsInit } from './overviewCommon.js';
import { makeTaskHistory } from './overviewPageRenderer.js';
import { overviewVars } from './overviewVariable.js';

//🔽🔽🔽🔽🔽🔽🔽🔽🔽🔽 Overview 모달 공통 사용 시작 🔽🔽🔽🔽🔽🔽🔽🔽🔽🔽

// 모달CLSOE
const modalNames = ['facility-size', 'section-left', 'section-middle', 'schedule-list', 'schedule', 'task-period'];
modalNames.forEach(name => {
    const modal = document.querySelector(`.overview-modal.${name}`);
    if (!modal) return;

    const closeBtn = modal.querySelector('.overview-modal-header--end img');
    const footerCloseBtn = modal.querySelector('.modal-footer .btn-close');

    closeBtn?.addEventListener('click', () => {
        modal.style.display = 'none';
        document.querySelector('.overview-modal-wrapper').style.display = 'none';
        // 변수 초기화
        overviewVarsInit();
        });

    footerCloseBtn?.addEventListener('click', () => {
        modal.style.display = 'none';
        document.querySelector('.overview-modal-wrapper').style.display = 'none';
        // 변수 초기화
        overviewVarsInit();
    });
});

// 모달 영역 외에 클릭했을때 모달 꺼지는 이벤트
// document.querySelector('.overview-modal-wrapper')?.addEventListener('pointerdown', (e) => {
//     document.querySelector('.overview-modal-wrapper').style.display = 'none';
//     document.querySelectorAll('.overview-modal').forEach(modal => {
//         if (!modal.contains(e.target)) {
//             modal.style.display = 'none';
//         }
//     });
// });

// 🔼🔼🔼🔼🔼🔼🔼🔼🔼🔼 Overview 모달 공통 사용 끝 🔼🔼🔼🔼🔼🔼🔼🔼🔼🔼

//🔽🔽🔽🔽🔽🔽🔽🔽🔽🔽 Secion-Left 모달 시작 🔽🔽🔽🔽🔽🔽🔽🔽🔽🔽

// 위치도/개요도 드래그앤드롭
export function fileDragAndDrop() {
        const dropbox = document.querySelector('.overview-modal .dropbox');

        dropbox.addEventListener('dragenter', (e) => {
            e.preventDefault();
            dropbox.style.background = '#999';
        });

        dropbox.addEventListener('dragover', (e) => {
            e.preventDefault();
            dropbox.style.background = '#999';
        });

        dropbox.addEventListener('dragleave', (e) => {
            e.preventDefault();
            dropbox.style.background = '#e6e8ea';
        });

        dropbox.addEventListener('drop', (e) => {
            e.preventDefault();
            dropbox.style.background = '#e6e8ea';
            const files = Array.from(e.dataTransfer.files);

            // 중복 이름과 확장자 체크
            checkDuplicatesFileNameAndExt(files);
            displayFileName();

        });
};

// section-left 모달 열기
document.querySelector('.overview .box-header--right.section-left-edit')?.addEventListener('click', () => {
    const modal = document.querySelector('.overview-modal.section-left');
    const modalWrapper = document.querySelector('.overview-modal-wrapper');

    modal.querySelector('.business-purpose').value = document.querySelector('.overview .box-body.business-purpose').innerText;
    modal.querySelector('.performance-area').value = document.querySelector('.overview .box-body.location-map-detail .performance-area').innerText;
    modal.querySelector('.reference-area').value = document.querySelector('.overview .box-body.location-map-detail .reference-area').innerText;
    modal.querySelector('.facility-overview').value = document.querySelector('.overview .box-body.facility-size .facility-overview').innerText;

    //overseas용 분기
    if(!overviewVars.overseas){
        modal.querySelector('.nation').value = document.querySelector('.overview .box-body.location-map-detail .nation-nm').innerText;
        modal.querySelector('.continent').value = document.querySelector('.overview .box-body.location-map-detail .continent').innerText;
    } else {
        modal.querySelector('.nation').innerText = document.querySelector('.overview .box-body.location-map-detail .nation-nm').innerText;
        modal.querySelector('.continent').innerText = document.querySelector('.overview .box-body.location-map-detail .continent').innerText;
    }
    
    
    overviewVarsInit();

    if(overviewVars.filesNameArr.length > 0) displayFileName();

    modal.querySelectorAll('input[type=file]').forEach(input => { input.value = ''; })

    makeTabCell(overviewVars.originalSectionTabData);

    // 토글 처리
    if (modal.style.display === 'block') {
        modal.style.display = 'none';
        return;
    }
    modal.style.display = 'block';
    modalWrapper.style.display = 'block';
});

// section-left 모달 시설규모 탭,셀 생성 함수
export function makeTabCell(data) {
    const tabContainer = document.querySelector('.section-tabs');
    const contentContainer = document.querySelector('.section-content');

    // 가로 스크롤 이벤트
    tabContainer.addEventListener('wheel', (e) => {
        e.preventDefault();
        tabContainer.scrollLeft += e.deltaY;
    });

    tabContainer.innerHTML = '';
    contentContainer.innerHTML = '';

    // 데이터 없을 때 기본값
    if (Object.keys(data).length === 0) {
        data = { '': [{ key: '', value: '', id: '' }] };
    }

    const titles = Object.keys(data);
    titles.forEach((title, index) => {
        const tab = createTab(title, index === 0);
        bindTabEvents(tab, contentContainer);
        tabContainer.appendChild(tab);
    });

    // 탭 추가 버튼
    const addBtn = document.createElement('button');
    addBtn.classList.add('xs-btn', 'add');
    addBtn.innerHTML = `<img class="icon" src="/main/img/overview/icon-add.svg" alt="icon-add">`;
    tabContainer.appendChild(addBtn);

    addBtn.addEventListener('click', () => {
        const newTab = createTab('', true);
        bindTabEvents(newTab, contentContainer, true);
        tabContainer.insertBefore(newTab, addBtn);
        newTab.click();
    });

    // 첫번째 탭 클릭
    if (titles.length > 0) {
        tabContainer.querySelector('.tab')?.click();
    }
}

// 탭 생성
function createTab(title, isActive) {
    const tab = document.createElement('div');
    tab.className = 'tab';
    if (isActive) tab.classList.add('click-on');

    const input = document.createElement('input');
    input.className = 'tab-style-input';
    input.type = 'text';
    input.value = title;
    input.placeholder = '탭 제목 입력';

    const closeBtn = document.createElement('button');
    closeBtn.className = 'xs-btn';
    closeBtn.innerHTML = `<img class="icon" src="/main/img/overview/icon-close-111.svg">`;

    tab.appendChild(input);
    tab.appendChild(closeBtn);

    return tab;
}

// 탭 클릭, 제목입력, 삭제버튼 이벤트
function bindTabEvents(tab, contentContainer, isNew = false) {
    const input = tab.querySelector('input');
    const closeBtn = tab.querySelector('button');

    // 탭 클릭 이벤트
    tab.addEventListener('click', () => {
        document.querySelectorAll('.section-tabs .tab').forEach(t => t.classList.remove('click-on'));
        tab.classList.add('click-on');
        renderCells(input.value.trim(), contentContainer);
    });

    // 탭 제목 input 변경 이벤트
    let previousSection = input.value.trim();
    input.addEventListener('input', () => {
        const section = String(input.value.trim());
        // 탭 제목이 빈값 일때 삭제 처리
        if (section === '') {
            if (previousSection && overviewVars.sectionTabData[previousSection]) delete overviewVars.sectionTabData[previousSection];
            showToolTip(input, '탭 제목이 없어 셀 내용이 초기화되었습니다.')
            // 셀 초기화
            document.querySelectorAll('.section-content .section-content--cell').forEach((cell, index) => {
                if(index === 0){
                    cell.querySelectorAll('input').forEach(input => input.value = '');
                } else{
                    // 셀 추가 버튼을 건너뜀
                    if(cell.className === 'section-content--cell add-cell-btn') return;
                    cell.remove();
                }
            });
            previousSection = '';
            return;
        }
        // 탭 제목이 같을때 처리 막기
        if (section !== previousSection && overviewVars.sectionTabData[section]){
            showToolTip(input, '이미 존재하는 탭 이름입니다. 다른 이름을 입력해주세요.')
            input.value = previousSection;
            return;
        }

        // 탭 이름이 변경될때
        if (previousSection && previousSection !== section) {
            if (overviewVars.sectionTabData[previousSection]) {
                overviewVars.sectionTabData[section] = overviewVars.sectionTabData[previousSection];
                delete overviewVars.sectionTabData[previousSection];
            } else {
                overviewVars.sectionTabData[section] = [];
            }
        } else if (!overviewVars.sectionTabData[section]) {
            overviewVars.sectionTabData[section] = [];
        }

        previousSection = section;
    });

    // 탭 삭제 이벤트
    closeBtn.addEventListener('click', async (e) => {
        e.stopPropagation();
        const title = input.value;
        const tabLength = document.querySelectorAll('.section-tabs .tab').length;
        const tabInput = document.querySelector('.section-tabs .tab input');
        const cell = document.querySelectorAll('.section-content--cell input');
        const emptyTab = !tabInput?.value.trim();
        const emptyCell = Array.from(cell).every(input => !input.value.trim());

        // 탭이 한 개 남았고 공백일 경우 삭제 막기
        if (tabLength === 1 && emptyTab && emptyCell) return;

        try {
            if (tabLength === 1) {
                delete overviewVars.sectionTabData[title];
                document.querySelector('.section-tabs .tab input').value = '';
                document.querySelectorAll('.section-content .section-content--cell').forEach((cell, index) => {
                    if(index === 0){
                        cell.querySelectorAll('input').forEach(input => input.value = '');
                    } else{
                        // 셀 추가 버튼을 건너뜀
                        if(cell.className === 'section-content--cell add-cell-btn') return;
                        cell.remove();
                    }
                });
            } else {
                delete overviewVars.sectionTabData[title];
                tab.remove();
                const allTabs = document.querySelectorAll('.section-tabs .tab');
                const lastTab = allTabs[allTabs.length - 1];
                if (lastTab) lastTab.click();
            }
        } catch (err) {
            console.error(err);
        }
    });
}

// 셀 렌더딩
function renderCells(title, container) {
    container.innerHTML = '';
    let cells = overviewVars.sectionTabData[title] || [{ key: '', value: '', id: '' }];
    // 타이틀만 있고 셀의 내용이 없을때 기본값 설정
    if(cells.length === 0) cells = [{ key: '', value: '', id: '' }];
    cells.forEach(cell => {
        const row = createCell(cell);
        bindCellEvents(row, title);
        container.appendChild(row);
    });

    if (!container._hasInputEvent) {
        container.addEventListener('input', (e) => {
            if (!e.target.matches('input')) return;

            const section = document.querySelector('.tab.click-on input').value.trim();

            if (section === '') {
                container.querySelectorAll('.section-content--cell input').forEach(cell => {
                    cell.value = ''
                });
                showToolTip(e.target, '탭의 제목을 먼저 입력해주세요')
                return 
            }

            const keyInputs = container.querySelectorAll('input.short-input');
            const valueInputs = container.querySelectorAll('input.middle-input');

            const keyValueList = [];
            for (let i = 0; i < keyInputs.length; i++) {
                const key = keyInputs[i].value;
                const value = valueInputs[i] ? valueInputs[i].value : '';
                const id = keyInputs[i].dataset.id ? parseInt(keyInputs[i].dataset.id) : null;
                const projectId = vars.project_id;
                keyValueList.push({ key, value, id, projectId });
            }

            overviewVars.sectionTabData[section] = keyValueList;
        });
        container._hasInputEvent = true;
    }

    // 셀 추가 버튼
    const addCell = document.createElement('div');
    addCell.className = 'section-content--cell add-cell-btn';
    addCell.innerHTML = `
        <img class="icon" src="/main/img/overview/icon-add-primary.svg" alt="icon-add-primary">
        <h3>셀추가</h3>`;
    addCell.addEventListener('click', () => {
        const newCell = createCell({ key: '', value: '', id: null });
        bindCellEvents(newCell, title);
        container.insertBefore(newCell, addCell);
    });
    container.appendChild(addCell);
}

// 셀 생성
function createCell(cell) {
    const row = document.createElement('div');
    row.className = 'section-content--cell';
    row.innerHTML = `
        <input class="short-input" type="text" value="${cell.key ?? ''}" data-id="${cell.id ?? ''}" placeholder="셀 제목 입력">
        <input class="middle-input" type="text" value="${cell.value ?? ''}" data-id="${cell.id ?? ''}" placeholder="셀 내용 입력">
    `;
    const btn = document.createElement('button');
    btn.classList.add('xs-btn', 'cell-remove');
    btn.innerHTML = `<img src="/main/img/overview/icon-close-111.svg">`;
    row.appendChild(btn);
    return row;
}

// 셀 삭제 버튼 이벤트 추가
function bindCellEvents(row, title) {
    const btn = row.querySelector('.cell-remove');
    const cellId = row.querySelector('input')?.dataset.id;
    btn.addEventListener('click', async () => {
        try {
            // 기본생성된 셀 이벤트에서 title이 들어오지 않는 경우가 있어서 값을 직접 넣어줌
            title = document.querySelector('.section-tabs .tab.click-on input').value;
            const cells = document.querySelectorAll('.section-content--cell');

            if (cellId) {
                // DB 삭제 성공 시 sectionTabData 업데이트
                const index = overviewVars.sectionTabData[title].findIndex(item => item.id == cellId);
                if (index !== -1) overviewVars.sectionTabData[title].splice(index, 1);
            } else {
                // 탭 입력이 되지않고 sectionTabData에 data가 없을때 row 삭제처리
                if(!overviewVars.sectionTabData[title]){
                    if(cells.length > 2){
                        return row.remove();
                    } else {
                        return;
                    }
                }
                const index = overviewVars.sectionTabData[title].findIndex(item => item.key === row.querySelector('.short-input')?.value && item.value === row.querySelector('.middle-input')?.value);
                if(index !== -1) overviewVars.sectionTabData[title].splice(index, 1);
            }
            
            // 셀이 하나뿐이면 value 초기화, 아니면 삭제
            if (cells.length === 2) {
                row.querySelectorAll('input').forEach(input => input.value = '');
            } else {
                row.remove();
            }
        } catch (err) {
            console.error(err);
        }
    });
}


// Section-left 시설규모 모달 OPEN
document.querySelector('.overview .box-header--right.facility-size button')?.addEventListener('click', async () => {
    const modalWrapper = document.querySelector('.overview-modal-wrapper');
    const modal = document.querySelector('.overview-modal.facility-size');

    //토글
    if (modal.style.display === 'block') {
        modal.style.display = 'none';
        modalWrapper.style.display = 'none';
        return;
    }

    try {
        const res = await axios.get(`/${vars.project_id}/overview/getFacilitySizeData`, { params: { projectId: vars.project_id } });
        if (res.data.message === '200') {
            const modalBody = modal.querySelector('.overview-modal-body');
            modalBody.innerHTML = '';

            const dataArr = res.data.data;
            if (dataArr.length === 0) {
                modalBody.innerHTML = `<img src="/main/img/overview/non-facilitySize-image.svg">`
            }

            let currentTitle = '';

            for (let i = 0; i < dataArr.length; i++) {
                if (dataArr[i].title !== currentTitle) {
                    currentTitle = dataArr[i].title;

                    const boxHeader = document.createElement('div');
                    boxHeader.className = 'box-header';
                    const h3 = document.createElement('h3');
                    h3.textContent = currentTitle;
                    boxHeader.appendChild(h3);
                    modalBody.appendChild(boxHeader);

                }

                const typeWrap = document.createElement('div');
                typeWrap.className = 'type--wrap';

                const left = document.createElement('div');
                left.className = 'type--wrap-left';
                const p = document.createElement('p');
                p.textContent = dataArr[i].key;
                left.appendChild(p);

                const right = document.createElement('div');
                right.className = 'type--wrap-right';
                const h4 = document.createElement('h4');
                h4.textContent = dataArr[i].value;
                right.appendChild(h4);

                typeWrap.appendChild(left);
                typeWrap.appendChild(right);

                modalBody.appendChild(typeWrap);
            }
        }

        modal.style.display = 'block';
        modalWrapper.style.display = 'block';

    } catch (err) {
        console.log(err);
    }

});

// section-left 위치도/개요도 이미지 저장
document.querySelector('.overview-modal.section-left .overview-img-file-input')?.addEventListener('change', () => {
    const files = Array.from(document.querySelector('.overview-modal.section-left .overview-img-file-input').files);
    
    // 중복 이름과 확장자 체크
    checkDuplicatesFileNameAndExt(files);
    // 등록된 파일의 이름을 추가
    displayFileName();

    // 초기화
    document.querySelector('.overview-modal.section-left .overview-img-file-input').value = '';
});

// 🔼🔼🔼🔼🔼🔼🔼🔼🔼🔼 Secion-Left 모달 끝 🔼🔼🔼🔼🔼🔼🔼🔼🔼🔼

//🔽🔽🔽🔽🔽🔽🔽🔽🔽🔽 Secion-Middle 모달 시작 🔽🔽🔽🔽🔽🔽🔽🔽🔽🔽

// section-middle 모달 열기
document.querySelector('.overview .box-header--right.section-middle-edit')?.addEventListener('click', () => {
    const modal = document.querySelector('.overview-modal.section-middle');
    const modalWrapper = document.querySelector('.overview-modal-wrapper');

    modal.querySelector('.abbreviated-name').value = document.querySelector('.overview .abbreviated-name').innerText;
    modal.querySelector('.task-nm-en').value = document.querySelector('.overview .task-nm-en').innerText;
    modal.querySelector('.task-purpose').value = document.querySelector('.overview .task-purpose').innerText;
    modal.querySelector('.order-size-usd').value = document.querySelector('.overview .order-size-usd').innerText;
    modal.querySelector('.order-size-krw').value = document.querySelector('.overview .order-size-krw').innerText;
    modal.querySelector('.client-origin').value = document.querySelector('.overview .client-origin').innerText;
    modal.querySelector('.financial').value = document.querySelector('.financial').innerText;
    modal.querySelector('.financial-country').value = document.querySelector('.overview .financial-country').innerText;
    modal.querySelector('.selection-method').value = document.querySelector('.overview .selection-method').innerText;
    modal.querySelector('.overview-table-container').innerHTML = document.querySelector('.overview .overview-table-container ').innerHTML;
    modal.querySelector('.support-department').value = document.querySelector('.overview .support-department').innerText;
    modal.querySelector('.support-manager-nm').value = document.querySelector('.overview .support-manager-nm').innerText;
    modal.querySelector('.completion-date').value = document.querySelector('.overview .completion-date').innerText;

    // overseas용 분기
    if(!overviewVars.overseas){
        modal.querySelector('.project-no').value = document.querySelector('.overview .project-no').innerText;
        modal.querySelector('.task-type').value = document.querySelector('.overview .task-type').innerText;
        modal.querySelector('.bid').value = document.querySelector('.overview .bid').innerText;
        modal.querySelector('.client').value = document.querySelector('.overview .client').innerText;
        modal.querySelector('.department').value = document.querySelector('.overview .department').innerText;
        modal.querySelector('.currency-code').value = document.querySelector('.overview .currency-code').innerText;
        modal.querySelector('.task-nm-kr').value = document.querySelector('.overview .task-nm-kr').innerText;
        modal.querySelector('.contract-period').value = document.querySelector('.overview .contract-period').innerText;
        modal.querySelector('.projectmanager-nm').value = document.querySelector('.overview .projectmanager-nm').innerText;
        modal.querySelector('.manager-nm').value = document.querySelector('.overview .manager-nm').innerText;
        modal.querySelector('.contract-date').value = document.querySelector('.overview .contract-date').innerText;
        modal.querySelector('.commencement-date').value = document.querySelector('.overview .commencement-date').innerText;
        modal.querySelector('.scheduled-completion-date').value = document.querySelector('.overview .scheduled-completion-date').innerText;
        modal.querySelector('.scheuled-commencement-date').value = document.querySelector('.overview .scheuled-commencement-date').innerText;

        modal.querySelectorAll('.joint-contract-company-name').forEach(company => { company.contentEditable = true; company.style.color = '#FF3D00'; })
        // 공동도급 수정, 색상변화, 숫자 제한
        modal.querySelectorAll('.joint-contract-company-shares, .joint-contract-krw, .joint-contract-usd').forEach(joint => {
            joint.contentEditable = true;
            joint.style.color = '#FF3D00';
            joint.addEventListener('input', (event) => {
                restrictToNumber(joint, event);
                calculateTotalJointContract(joint);
            });
        });
    } else {
        modal.querySelector('.project-no').innerText = document.querySelector('.overview .project-no').innerText;
        modal.querySelector('.task-type').innerText = document.querySelector('.overview .task-type').innerText;
        modal.querySelector('.bid').innerText = document.querySelector('.overview .bid').innerText;
        modal.querySelector('.client').innerText = document.querySelector('.overview .client').innerText;
        modal.querySelector('.department').innerText = document.querySelector('.overview .department').innerText;
        modal.querySelector('.currency-code').innerText = document.querySelector('.overview .currency-code').innerText;
        modal.querySelector('.task-nm-kr').innerText = document.querySelector('.overview .task-nm-kr').innerText;
        modal.querySelector('.contract-period').innerText = document.querySelector('.overview .contract-period').innerText;
        modal.querySelector('.projectmanager-nm').innerText = document.querySelector('.overview .projectmanager-nm').innerText;
        modal.querySelector('.manager-nm').innerText = document.querySelector('.overview .manager-nm').innerText;
        modal.querySelector('.contract-date').innerText = document.querySelector('.overview .contract-date').innerText;
        modal.querySelector('.commencement-date').innerText = document.querySelector('.overview .commencement-date').innerText;
        modal.querySelector('.scheduled-completion-date').innerText = document.querySelector('.overview .scheduled-completion-date').innerText;
        modal.querySelector('.scheuled-commencement-date').innerText = document.querySelector('.overview .scheuled-commencement-date').innerText;
    }    

    const jointTable = modal.querySelector('.overview-table-container')
    // 탭 컨테이너 가로스크롤 휠 이벤트 추가
    jointTable.addEventListener('wheel', (e)=> {
        e.preventDefault();
        jointTable.scrollLeft += e.deltaY;
    });

    // 토글 처리
    if (modal.style.display === 'block') {
        modal.style.display = 'none';
        return;
    }
    modal.style.display = 'block';
    modalWrapper.style.display = 'block';

});

// section-middle 과업기간 모달 열기
document.querySelector('.overview .box-header--right.task-period')?.addEventListener('click', async () => {
    const modal = document.querySelector('.overview-modal.task-period');
    const modalWrapper = document.querySelector('.overview-modal-wrapper');

    modal.querySelector('.contract-date').innerText = document.querySelector('.overview .contract-date').innerText;
    modal.querySelector('.commencement-date').innerText = document.querySelector('.overview .commencement-date').innerText;
    modal.querySelector('.scheduled-completion-date').innerText = document.querySelector('.overview .scheduled-completion-date').innerText;
    modal.querySelector('.completion-date').innerText = document.querySelector('.overview .completion-date').innerText;

    // 과업 중지 이력 생성
    makeTaskHistory();

    // 토글 처리
    if (modal.style.display === 'block') {
        modal.style.display = 'none';
        return;
    }
    modal.style.display = 'block';
    modalWrapper.style.display = 'block';
});

// section-middle 과업중지 이력 리스트 추가
document.querySelector('.overview-modal.task-period .box-header--right button')?.addEventListener('click', () => {
    const ul = document.querySelector('.overview-modal.task-period .overview-modal-body ul');
    const li = document.createElement('li');

    // 차수
    const numberDiv = document.createElement('div');
    numberDiv.className = 'work-list-number';
    const orderInput = document.createElement('input');
    orderInput.type = 'text';
    orderInput.className = 'order work-list-number';

    numberDiv.appendChild(orderInput);

    // 중지일자
    const dateDiv = document.createElement('div');
    dateDiv.className = 'work-list-date';
    const dateInput = document.createElement('input');
    dateInput.className = 'suspension-date work-list-date';
    dateInput.type = 'date';

    dateDiv.appendChild(dateInput);

    // 중지사유
    const reasonDiv = document.createElement('div');
    reasonDiv.className = 'work-list-script';
    const reasonInput = document.createElement('input');
    reasonInput.className = 'suspension-reason work-list-script';
    reasonInput.type = 'text';

    reasonDiv.appendChild(reasonInput);

    // 재개일자
    const redateDiv = document.createElement('div');
    redateDiv.className = 'work-list-redate';
    const redateInput = document.createElement('input');
    redateInput.className = 'resumption-date work-list-redate';
    redateInput.type = 'date';

    redateDiv.appendChild(redateInput);

    // 협의내용
    const detailDiv = document.createElement('div');
    detailDiv.className = 'work-list-detail';
    const consultInput = document.createElement('input');
    consultInput.className = 'consuletation-content work-list-detail';
    consultInput.type = 'text';

    detailDiv.appendChild(consultInput);

    // 변경 일자
    const changeDiv = document.createElement('div');
    changeDiv.className = 'work-list-changedate';
    const changeInput = document.createElement('input');
    changeInput.className = 'change-date work-list-changedate';
    changeInput.type = 'date';

    changeDiv.appendChild(changeInput);


    const btn = document.createElement('button');
    btn.className = 'xs-btn-type';
    const img = document.createElement('img');
    img.className = 'icon';
    img.src = '/main/img/overview/icon-close-111.svg';
    img.alt = 'icon-close-111';
    btn.appendChild(img);
    // 과업 중지이력 리스트 개별 삭제버튼
    btn.addEventListener('click', async (e) => {
        li.remove();
    });

    li.append(numberDiv, dateDiv, reasonDiv, redateDiv, detailDiv, changeDiv, btn);

    ul.appendChild(li);

});

if(!overviewVars.overseas){
    // section-middle 공동도급 열 추가
    document.querySelector('.overview-modal.section-middle .joint-contract-add')?.addEventListener('click', () => {
        const table = document.querySelector('.overview-modal.section-middle .overview-table-container table');
        const headerRow = table.querySelector('thead tr');
        const currentCols = headerRow.querySelectorAll('th').length;

        // 총계와 주관사
        const newIndex = currentCols - 1;
        document.querySelector('.overview-modal .total-joint-contract-company-name').innerText = newIndex;
        const newTh = document.createElement('th');
        if (newIndex < 2) {
            newTh.innerText = '주관사';
        } else {
            newTh.innerText = `공동도급${newIndex - 1}`;
        }
        headerRow.appendChild(newTh);

        const tbodyRows = table.querySelectorAll('tbody tr');

        const defaultValues = ['회사명', '0', '0', '0'];
        const classList = ['joint-contract-company-name', 'joint-contract-company-shares', 'joint-contract-krw', 'joint-contract-usd'];

        tbodyRows.forEach((row, idx) => {
            const td = document.createElement('td');
            td.className = classList[idx];
            td.innerText = defaultValues[idx];
            td.contentEditable = true;
            td.style.color = '#FF3D00';
            // 공동도급  숫자 제한
            if (idx > 0) {
                td.addEventListener('input', (event) => {
                    restrictToNumber(td, event);
                    calculateTotalJointContract(td);
                });
            }
            row.appendChild(td);
        });
    });   

    // section-middle 공동도급 열 삭제
    document.querySelector('.overview-modal.section-middle .joint-contract-delete')?.addEventListener('click', () => {
    const table = document.querySelector('.overview-modal.section-middle .overview-table-container table');
        const theadRow = table.querySelector('thead tr');
        const ths = theadRow.querySelectorAll('th');
        // 주관사까지 삭제했을때 계산할 값이 없으므로 초기화
        if (ths.length === 3){
            document.querySelector('.overview-modal .total-joint-contract-company-name').innerText = 0;
            document.querySelectorAll('.overview-modal .total-joint-contract-company-shares, .overview-modal .total-joint-contract-krw, .overview-modal .total-joint-contract-usd').forEach(el => el.innerText = 0);
        }
        if (ths.length <= 2) {
            alert("삭제할 수 있는 열이 없습니다.");
            return;
        }

        // 마지막 th 삭제
        theadRow.removeChild(ths[ths.length - 1]);

        // tbody의 마지막 td 삭제
        const tbodyRows = table.querySelectorAll('tbody tr');
        tbodyRows.forEach(row => {
            const tds = row.querySelectorAll('td');
            if (tds.length > 2) {
                row.removeChild(tds[tds.length - 1]);
            }
        });
        // 삭제시에 총계 계산
        document.querySelectorAll('.overview-modal.section-middle .overview-table-container td').forEach(td => {
            calculateTotalJointContract(td);
        });

        // 총 회사 수 업데이트
        document.querySelector('.overview-modal .total-joint-contract-company-name').innerText = ths.length - 3;
    });
}

// 🔼🔼🔼🔼🔼🔼🔼🔼🔼🔼 Secion-Middle 모달 끝 🔼🔼🔼🔼🔼🔼🔼🔼🔼🔼

//🔽🔽🔽🔽🔽🔽🔽🔽🔽🔽 Secion-Right 모달 시작 🔽🔽🔽🔽🔽🔽🔽🔽🔽🔽

// section-right 캘린더 주요일정 하루종일 버튼
document.querySelector('.overview-modal.schedule .custom-checkbox.all-day')?.addEventListener('change', () => {
    const allDay = document.querySelector('.overview-modal.schedule .custom-checkbox.all-day input');
    const startTime = document.querySelector('.overview-modal.schedule .startTime');
    const endTime = document.querySelector('.overview-modal.schedule .endTime');

    const isChecked = allDay.checked;

    startTime.disabled = isChecked;
    endTime.disabled = isChecked;

    if (isChecked) {
        startTime.value = '';
        endTime.value = '';
    } else {
        startTime.value = '00:00';
        endTime.value = '23:59';
    }

});

// section-right 주요일정 Color 클릭 효과
document.querySelectorAll('.overview-modal .color .label-color')?.forEach(btn => {
    btn.addEventListener('click', (e) => {
        document.querySelectorAll('.overview-modal .color .label-color').forEach(label => {
            label.classList.remove('on');
        });
        e.target.classList.add('on');
    });
});


// 🔼🔼🔼🔼🔼🔼🔼🔼🔼🔼 Secion-Right 모달 끝 🔼🔼🔼🔼🔼🔼🔼🔼🔼🔼