@props([
    'openEventName' => 'openModal',
    'closeEventName' => 'closeModal',
])

<div
    x-cloak
    x-init="initial()"
    x-data="{
        show: false,
        height: 0,
        loading:false,

        initial() {
            setInterval(()=>{
                this.height = this.$refs.modalContent.clientHeight;
            }, 10)
        },
        openModal() {
            this.show = true;
            this.submittedResponseData = {};
        },
        closeModal() {
            this.show = false;
            this.$dispatch(@js($closeEventName));
        },
    }"
    {{ '@'.$openEventName }}.window="openModal"
    x-show="show"
    role="dialog"
    x-trap.noscroll="show"
    x-transition:enter="transition ease-swift-out duration-300"
    x-transition:enter-start="opacity-0"
    x-transition:enter-end="opacity-100"
    x-transition:leave="transition ease-swift-out duration-300 delay-300"
    x-transition:leave-start="opacity-100"
    x-transition:leave-end="opacity-0"
    class="fixed inset-0 bg-black/90 backdrop-blur-sm z-50 flex items-end md:items-center"
>
    <button class="absolute right-0 top-0" @click="closeModal">
        <x-icon name="close" size="5rem" class="btn btn-on-dark text-white" />
    </button>

    <div class="container-1 relative w-full h-[95vh] flex flex-col justify-end md:justify-center">
        <div
            @click.away="closeModal"
            x-show="show"
            x-transition:enter="transition ease-bounce-out duration-300"
            x-transition:enter-start="opacity-0 scale-90"
            x-transition:enter-end="opacity-100 scale-100"
            x-transition:leave="transition ease-bounce-out duration-300"
            x-transition:leave-start="opacity-100 scale-100"
            x-transition:leave-end="opacity-0 scale-90"
            class="overflow-y-auto border-2 border-white pt-9 max-h-[100%]"
        >
            <div class="overflow-y-auto max-h-[100%] px-6 md:px-9 relative transition-all ease-swift-out duration-300">
                <div class="transition-all ease-swift-out duration-300" :style="`height:${height}px`">
                    <div class="relative" x-ref="modalContent">
                        <div>
                            {{ $slot }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>