<div class="card">
    <form wire:submit="save" method="POST">

        <div class="card">
            <x-validation-errors class="mb-4" />
            <div class="mb-4">
                <x-label class="mb-2">Familia</x-label>
                <x-select class="w-full" wire:model.live="subcategoria.familia_id">
                    <option value="" disabled selected>
                        Selecione una familia
                    </option>
                    @foreach ($familias as $familia)
                        <option value="{{ $familia->id }}">{{ $familia->nombre }}</option>
                    @endforeach
                </x-select>

            </div>

            <div class="mb-4">
                <x-label class="mb-2">Categoria</x-label>
                <x-select class="w-full" wire:model.live="subcategoria.categoria_id">
                    <option value="" disabled selected>
                        Selecione una categoria
                    </option>
                    @foreach ($this->categorias as $categoria)
                        <option value="{{ $categoria->id }}">{{ $categoria->nombre }}</option>
                    @endforeach
                </x-select>

            </div>
            <div class="mb-4">
                <x-label class="mb-2">Nombre</x-label>
                <x-input class="w-full" placeholder="" wire:model="subcategoria.nombre"/>
            </div>
        </div>
        <div class="flex justify-end mt-4">
            <x-button>Guardar</x-button>
        </div>
    </form>
</div>
