<!-- 모달 HTML -->
<div id="index_action_form" class="index_action_form modal fade" tabindex="-1" aria-labelledby="modal_label" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modal_label">
                    &nbsp;&nbsp;<?= ICONS['DESKTOP'] ?> <?= $viewDatas['content_title'] ?>&nbsp;&nbsp;
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="modal-body-content" style="max-height: 80vh; overflow-y: auto;">
                <!-- 여기에 동적으로 콘텐츠가 로드됩니다 -->
            </div>
        </div>
    </div>
</div>

<script>
    const modal = document.getElementById('index_action_form');
    const modalBody = document.getElementById('modal-body-content');

    // 콘텐츠 로드 함수
    async function loadContent(url) {
        try {
            const response = await fetch(url);
            if (!response.ok) {
                throw new Error(`HTTP 오류! 상태: ${response.status}`);
            }
            const content = await response.text();
            modalBody.innerHTML = content;

            // 스크립트 로딩 순서 보장 및 실행
            const scripts = modalBody.getElementsByTagName('script');
            for (let script of scripts) {
                if (script.src) {
                    await loadScript(script.src); // 외부 스크립트 순차적으로 로드
                } else {
                    eval(script.innerHTML); // 인라인 스크립트 실행
                }
            }

            setupFormSubmission(); // 폼 제출 이벤트 핸들러 재설정
        } catch (error) {
            console.error('콘텐츠 로드 중 오류 발생:', error);
            modalBody.innerHTML = '<p>콘텐츠를 로드하는 중 오류가 발생했습니다. 다시 시도해 주세요.</p>';
        }
    }

    // 외부 스크립트 동적으로 로드하는 함수
    function loadScript(src) {
        return new Promise((resolve, reject) => {
            const script = document.createElement('script');
            script.src = src;
            script.onload = () => resolve();
            script.onerror = () => reject(new Error(`스크립트 로드 실패: ${src}`));
            document.body.appendChild(script);
        });
    }

    // 폼 제출 처리
    function setupFormSubmission() {
        const form = modalBody.querySelector('form');
        if (form) {
            form.addEventListener('submit', async (e) => {
                e.preventDefault();
                const formData = new FormData(form);
                try {
                    const response = await fetch(form.action, {
                        method: 'POST',
                        body: formData
                    });
                    const contentType = response.headers.get("content-type");
                    if (contentType && contentType.indexOf("application/json") !== -1) {
                        const result = await response.json();
                        if (result.success) {
                            modalBody.innerHTML = '<p>데이터가 성공적으로 저장되었습니다.</p>';
                            setTimeout(() => {
                                bootstrap.Modal.getInstance(modal).hide();
                                window.location.reload();
                            }, 2000);
                        } else {
                            modalBody.innerHTML = result.html;
                            setupFormSubmission(); // 새로운 폼에 대해 다시 이벤트 리스너 설정
                        }
                    } else {
                        const htmlContent = await response.text();
                        modalBody.innerHTML = htmlContent;

                        const scripts = modalBody.getElementsByTagName('script');
                        for (let script of scripts) {
                            eval(script.innerHTML); // 인라인 스크립트 실행
                        }

                        setupFormSubmission(); // 새로운 폼에 대해 다시 이벤트 리스너 설정
                    }
                } catch (error) {
                    console.error('폼 제출 중 오류 발생:', error);
                    modalBody.innerHTML = '<p>데이터 저장 중 오류가 발생했습니다. 다시 시도해 주세요.</p>';
                }
            });
        }
    }

    // 모달 열릴 때 콘텐츠 로딩
    modal.addEventListener('show.bs.modal', (event) => {
        const button = event.relatedTarget;
        const url = button.getAttribute('data-src');
        if (url) {
            loadContent(url);
        } else {
            console.error('data-src 속성이 없습니다.');
            modalBody.innerHTML = '<p>URL을 찾을 수 없습니다. 다시 시도해 주세요.</p>';
        }
    });

    // 모달 닫힐 때 콘텐츠 초기화
    modal.addEventListener('hidden.bs.modal', () => {
        modalBody.innerHTML = '';
    });
</script>