<!-- 처음 호출할때 사용법
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal_action_form" data-src="시작URL">시작</button>
-->
<!-- 동적으로 ifram src 바꾸고싶을때
<span data-bs-toggle="modal" data-bs-target="#modal_action_form" data-src="바꾸고싶은URL" style="cursor:pointer;">바꾸기</span>
-->
<div id="modal_action_form" class="modal_action_form modal fade" tabindex="-1" aria-labelledby="iframe_modal_label"
    aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable"> <!-- modal-lg는 모달 크기를 크게 설정 -->
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="iframe_modal_label">
                    &nbsp;&nbsp;<?= ICONS['DESKTOP'] ?> <?= $viewDatas['title'] ?? "" ?>&nbsp;&nbsp;
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
                    onClick="window.location.reload()"></button>
            </div>
            <div class="modal-body" style="max-height: 80vh; overflow-y: auto;">
                <iframe id="form-container" src="about:blank" width="100%" frameborder="0" allowfullscreen></iframe>
            </div>
        </div>
    </div>
</div>
<!-- Modal이 열릴 때 iframe의 src를 설정 -->
<script>
    function resizeIframe() {
        var iframe = document.getElementById('form-container');
        // iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';
        iframe.style.height = '500px';
    }

    function closeBootstrapModal() {
        var modalElement = document.getElementById('modal_action_form'); // 모달의 실제 DOM 요소 가져오기
        var modalInstance = bootstrap.Modal.getInstance(modalElement); // 모달 인스턴스 가져오기
        if (modalInstance) {
            modalInstance.hide(); // 모달 닫기 (hide() 메서드 사용)
        } else {
            console.error("Modal instance not found.");
        }
        // iframe src를 초기화하거나 완전히 제거
        const iframe = document.getElementById('form-container');
        iframe.remove(); // DOM에서 완전히 제거
        // 새 iframe 다시 생성 (깨끗한 상태로 초기화)
        const newIframe = document.createElement('iframe');
        newIframe.id = 'form-container';
        newIframe.src = 'about:blank';
        newIframe.width = '100%';
        newIframe.frameBorder = '0';
        newIframe.allowFullscreen = true;
        // body에 다시 추가
        document.querySelector('#modal_action_form .modal-body').appendChild(newIframe);
        // 부모창만 리로드
        window.location.reload();
    }

    var modal_action_form = document.getElementById('modal_action_form');
    modal_action_form.addEventListener('show.bs.modal', function (event) {
        var button = event.relatedTarget;
        var iframe = document.getElementById('form-container');
        iframe.src = button.getAttribute('data-src');
        // iframe이 로드된 후 높이를 조정하는 이벤트 리스너 추가
        iframe.onload = function () {
            resizeIframe();
            var iframeContent = iframe.contentDocument || iframe.contentWindow.document;
            // 컨텐츠 변경 시 높이 재조정을 위한 MutationObserver 설정
            var observer = new MutationObserver(resizeIframe);
            observer.observe(iframeContent.body, {
                attributes: true,
                childList: true,
                subtree: true
            });
        };
    });

    // 모달이 닫힐 때 iframe src를 초기화하여 종료 처리
    modal_action_form.addEventListener('hidden.bs.modal', function () {
        var iframe = document.getElementById('form-container');
        iframe.src = "about:blank"; // 모달 닫힐 때 iframe 초기화
    });
</script>