{{-- Modal Preview Layout --}}
<div class="modal fade" id="previewLayoutModal" tabindex="-1" aria-labelledby="previewLayoutModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl" style="max-width: 95%; height: 90vh; margin: 2.5vh auto;">
        <div class="modal-content" style="height: 100%;">
            <div class="modal-header bg-primary text-white" style="flex-shrink: 0;">
                <h5 class="modal-title" id="previewLayoutModalLabel">
                    <i class="fas fa-eye me-2"></i>Preview Layout - <span id="previewMenuName"></span>
                    <a href="#" id="openInNewTabLink" target="_blank" class="text-white ms-2" title="Buka di Tab Baru" style="text-decoration: none; font-size: 0.9em;">
                        <i class="fas fa-external-link-alt"></i>
                    </a>
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-0" style="flex: 1; overflow: hidden;">
                <iframe id="previewIframe" src="" frameborder="0" style="width: 100%; height: 100%; border: none;"></iframe>
            </div>
        </div>
    </div>
</div>

<style>
    #previewLayoutModal .modal-header {
        padding: 0.75rem 1rem;
    }
    
    #previewLayoutModal .modal-title {
        font-size: 1rem;
    }
    
    #previewLayoutModal .modal-content {
        display: flex;
        flex-direction: column;
    }
    
    #previewIframe {
        background: #f8f9fa;
        display: block;
    }
</style>

<script>
    function openPreviewLayoutModal(url, menuName) {
        // Set judul modal
        document.getElementById('previewMenuName').textContent = menuName;
        
        // Set URL iframe
        document.getElementById('previewIframe').src = url;
        
        // Set URL untuk link buka di tab baru
        document.getElementById('openInNewTabLink').href = url;
        
        // Buka modal
        var modal = new bootstrap.Modal(document.getElementById('previewLayoutModal'));
        modal.show();
    }
    
    // Reset iframe saat modal ditutup
    document.getElementById('previewLayoutModal').addEventListener('hidden.bs.modal', function () {
        document.getElementById('previewIframe').src = '';
    });
</script>