<x-dynamic-component :component="$getFieldWrapperView()" :field="$field">
    <div class="w-full rounded-xl bg-white shadow border overflow-auto" style="height: 640px">
        <iframe id="cardPreview" src="{{ url('/cards/' . $getRecord()->id) }}" class="w-full h-full"
            frameborder="0"></iframe>
        <script>
            function refreshIframe() {
                var iframe = document.getElementById('cardPreview');
                iframe.src = iframe.src;
            }
            document.addEventListener('livewire:initialized', () => {
                @this.on('card-updated', (event) => {
                    refreshIframe();
                });
            });
        </script>
    </div>
    {{-- <div class="flex justify-between">
        <p>Tekan butang refresh untuk melihat perubahan selepas save.</p>
        <button type="button" onclick="refreshIframe()">Refresh</button>
    </div> --}}
</x-dynamic-component>
