<div>
    <!-- ADD MODAL -->
    <div class="modal fade" id="addModal" tabindex="-1" aria-labelledby="addModalLabel" aria-hidden="true" wire:ignore.self>
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addModalLabel">
                        <i class="bi bi-plus-circle me-2 text-primary"></i>Add Category 
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                
                <form wire:submit.prevent="add_category">
                    <div class="modal-body">
                        
                        <div class="mb-3">
                            <label class="form-label">Category name</label>
                            <input type="text"
                                class="form-control @error('name') is-invalid @enderror"
                                wire:model="name">
                            @error('name') 
                                <span class="text-danger small">{{ $message }}</span> 
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Status</label>
                            <select class="form-select @error('active') is-invalid @enderror"
                                    wire:model="active">
                                <option value="">Select status</option>
                                <option value="1">Active</option>
                                <option value="0">Inactive</option>
                            </select>
                            @error('active') 
                                <span class="text-danger small">{{ $message }}</span> 
                            @enderror
                        </div>

                    </div>

                    <div class="modal-footer">
                        <button type="button"
                                class="btn btn-outline-secondary"
                                data-bs-dismiss="modal"
                                wire:click="resetForm">
                            Cancel
                        </button>

                        <button type="submit" 
                                class="btn btn-primary"
                                wire:loading.attr="disabled"
                                wire:target="add_category">
                            <span wire:loading.remove wire:target="add_category">
                                Add Category
                            </span>
                            <span wire:loading wire:target="add_category">
                                Adding...
                            </span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>