Modal

<x-forms::modal id="exampleModal" title="Modal Title">
    <p>This is the modal body content.</p>
</x-forms::modal>

<!-- Button to trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
    Open Modal
</button>

<x-forms::modal id="smallModal" title="Small Modal" modal-size-class="modal-sm">
    <p>This is a small modal.</p>
</x-forms::modal>

<x-forms::modal id="defaultModal" title="Default Modal" modal-size-class="">
    <p>This is a default size modal.</p>
</x-forms::modal>

<x-forms::modal id="largeModal" title="Large Modal">
    <p>This is a large modal (default).</p>
</x-forms::modal>

<x-forms::modal id="extraLargeModal" title="Extra Large Modal" modal-size-class="modal-xl">
    <p>This is an extra large modal.</p>
</x-forms::modal>

<x-forms::modal id="modalWithFooter" title="Confirm Action">
    <p>Are you sure you want to proceed with this action?</p>
    
    <x-slot:footer>
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
            Cancel
        </button>
        <button type="button" class="btn btn-primary">
            Confirm
        </button>
    </x-slot:footer>
</x-forms::modal>

<x-forms::modal id="noHeaderModal">
    <div class="text-center p-4">
        <i class="fas fa-check-circle fa-3x text-success mb-3"></i>
        <h4>Success!</h4>
        <p>Your action was completed successfully.</p>
    </div>
    
    <x-slot:footer>
        <button type="button" class="btn btn-primary" data-bs-dismiss="modal">
            Close
        </button>
    </x-slot:footer>
</x-forms::modal>

<x-forms::modal id="formModal" title="Create New Item">
    <x-forms::form action="{{ route('items.store') }}" method="POST">
        <div class="mb-3">
            <label for="itemName" class="form-label">Item Name</label>
            <input type="text" class="form-control" id="itemName" name="name" required>
        </div>
        
        <div class="mb-3">
            <label for="itemDescription" class="form-label">Description</label>
            <textarea class="form-control" id="itemDescription" name="description" rows="3"></textarea>
        </div>
        
        <x-slot:footer>
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                Cancel
            </button>
            <button type="submit" class="btn btn-primary">
                Create Item
            </button>
        </x-slot:footer>
    </x-forms::form>
</x-forms::modal>

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
    Open Modal
</button>

<x-forms::modal id="myModal" title="My Modal">
    Modal content
</x-forms::modal>

<button type="button" class="btn btn-primary" onclick="openModal()">
    Open Modal
</button>

<x-forms::modal id="jsModal" title="JavaScript Modal">
    Modal content
</x-forms::modal>

<script>
function openModal() {
    const modal = new bootstrap.Modal(document.getElementById('jsModal'));
    modal.show();
}
</script>

<x-forms::modal id="scrollableModal" title="Scrollable Modal" class="modal-dialog-scrollable">
    <p>This modal has scrollable content when the body exceeds the viewport height.</p>
    <p>Additional content lines will appear in a scrollable area within the modal.</p>
    <p>Users can scroll within the modal body while the header and footer remain fixed.</p>
</x-forms::modal>

<x-forms::modal id="centeredModal" title="Centered Modal" class="modal-dialog-centered">
    <p>This modal is vertically centered.</p>
</x-forms::modal>

<!-- Trigger Button -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#deleteConfirmModal">
    Delete Item
</button>

<!-- Modal -->
<x-forms::modal 
    id="deleteConfirmModal" 
    title="Confirm Deletion"
    modal-size-class="modal-sm"
>
    <div class="text-center">
        <i class="fas fa-exclamation-triangle fa-3x text-warning mb-3"></i>
        <p class="mb-0">Are you sure you want to delete this item?</p>
        <p class="text-muted small">This action cannot be undone.</p>
    </div>
    
    <x-slot:footer>
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
            Cancel
        </button>
        <form action="{{ route('items.destroy', $item) }}" method="POST" class="d-inline">
            @csrf
            @method('DELETE')
            <button type="submit" class="btn btn-danger">
                Delete
            </button>
        </form>
    </x-slot:footer>
</x-forms::modal>

<!-- First Modal -->
<x-forms::modal id="firstModal" title="First Modal">
    <p>Content of the first modal.</p>
    
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#secondModal">
        Open Second Modal
    </button>
    
    <x-slot:footer>
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
    </x-slot:footer>
</x-forms::modal>

<!-- Second Modal -->
<x-forms::modal id="secondModal" title="Second Modal">
    <p>Content of the second modal.</p>
    
    <x-slot:footer>
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
    </x-slot:footer>
</x-forms::modal>

<div class="modal fade" id="modalId" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <!-- Optional: Header (only if title is provided) -->
            <div class="modal-header">
                <h5 class="modal-title">Modal Title</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            
            <!-- Body -->
            <div class="modal-body">
                Content goes here
            </div>
            
            <!-- Optional: Footer (only if footer slot is provided) -->
            <div class="modal-footer">
                Footer buttons
            </div>
        </div>
    </div>
</div>