<div x-data="{ isOpen: false }">
    <!-- ปุ่มเปิด Modal -->
    <button @click="isOpen = true" class="px-4 py-2 bg-blue-500 text-white rounded">Open Modal</button>

    <!-- Modal -->
    <div 
        x-show="isOpen" 
        class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50"
        @click.away="isOpen = false"
        x-transition>
        <div class="bg-white p-6 rounded shadow-lg">
            <h2 class="text-lg font-bold mb-4">Modal Title</h2>
            <p class="text-gray-700">This is a simple modal.</p>
            <button @click="isOpen = false" class="mt-4 px-4 py-2 bg-red-500 text-white rounded">Close</button>
        </div>
    </div>
</div>

<div x-data="{ isOpen: false }">
    <button @click="isOpen = true" class="px-4 py-2 bg-blue-500 text-white rounded">Open Modal</button>

    <div 
        x-show="isOpen" 
        class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50"
        @click.away="isOpen = false"
        x-transition:enter="transition ease-out duration-300"
        x-transition:enter-start="opacity-0 scale-90"
        x-transition:enter-end="opacity-100 scale-100"
        x-transition:leave="transition ease-in duration-200"
        x-transition:leave-start="opacity-100 scale-100"
        x-transition:leave-end="opacity-0 scale-90">
        <div class="bg-white p-6 rounded shadow-lg">
            <h2 class="text-lg font-bold mb-4">Animated Modal</h2>
            <p class="text-gray-700">This modal has transitions!</p>
            <button @click="isOpen = false" class="mt-4 px-4 py-2 bg-red-500 text-white rounded">Close</button>
        </div>
    </div>
</div>

<template id="modal-template">
    <div 
        x-show="isOpen" 
        class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50"
        @click.away="isOpen = false"
        x-transition>
        <div class="bg-white p-6 rounded shadow-lg">
            <slot></slot>
            <button @click="isOpen = false" class="mt-4 px-4 py-2 bg-red-500 text-white rounded">Close</button>
        </div>
    </div>
</template>

<div x-data="{ isOpen: false }">
    <button @click="isOpen = true" class="px-4 py-2 bg-blue-500 text-white rounded">Open Modal</button>

    <div x-init="$el.innerHTML = document.getElementById('modal-template').innerHTML">
        <h2 class="text-lg font-bold mb-4">Custom Content</h2>
        <p class="text-gray-700">This content is passed to the slot.</p>
    </div>
</div>

<div x-data="{ isOpen: false, modalContent: '' }">
    <button @click="isOpen = true; modalContent = 'Dynamic Modal Content';" class="px-4 py-2 bg-blue-500 text-white rounded">
        Open Modal
    </button>

    <div 
        x-show="isOpen" 
        class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50"
        @click.away="isOpen = false"
        x-transition>
        <div class="bg-white p-6 rounded shadow-lg">
            <h2 class="text-lg font-bold mb-4">Dynamic Modal</h2>
            <p class="text-gray-700" x-text="modalContent"></p>
            <button @click="isOpen = false" class="mt-4 px-4 py-2 bg-red-500 text-white rounded">Close</button>
        </div>
    </div>
</div>

<div x-data="{ isOpen: false, formData: { name: '', email: '' } }">
    <button @click="isOpen = true" class="px-4 py-2 bg-blue-500 text-white rounded">Open Form Modal</button>

    <div 
        x-show="isOpen" 
        class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50"
        @click.away="isOpen = false"
        x-transition>
        <div class="bg-white p-6 rounded shadow-lg">
            <h2 class="text-lg font-bold mb-4">Form Modal</h2>
            <form @submit.prevent="alert(`Name: ${formData.name}, Email: ${formData.email}`)">
                <label class="block mb-2">
                    Name:
                    <input type="text" x-model="formData.name" class="w-full p-2 border rounded">
                </label>
                <label class="block mb-2">
                    Email:
                    <input type="email" x-model="formData.email" class="w-full p-2 border rounded">
                </label>
                <button type="submit" class="mt-4 px-4 py-2 bg-green-500 text-white rounded">Submit</button>
            </form>
            <button @click="isOpen = false" class="mt-4 px-4 py-2 bg-red-500 text-white rounded">Close</button>
        </div>
    </div>
</div>