simple_form - how do I create radio buttons with nested input text boxes

I'm using simple_form to render my forms and trying to get the following behavior: I want the client to choose from 3 options. In every option he supplies additional field or two.
So I'd like something like this:

Please set your preferences:  
 o Pay me on a specific day - [input field to get the day]  
 o Pay me a specific amount of money - [input field for the amount]  
 o Pay me on a regular basis - [radio buttons to choose between weekly/monthly basis]

I can create the radio buttons as follows, but can't add nested fields under them:

<%= simple_form_for @client, action: 'edit_payment_method' do |f| %>
    <%= f.input :payment_type, label: 'Please set your preferences:',
        collection: [ ['Pay me on a specific day', :specific_day],
        ['Pay me a specific amount of money', :specific_money],
        ['Pay me on a regular basis', :regular_basis]
     ], as: :radio_buttons %>

  <%= f.button :submit, 'Submit' %>
<% end %>

What would be the best way to create the nested text boxes?
As for the fields, I don't need to send them to different controllers (per payment_type), it's fine if I send them all to one method and read the relevant values according to the payment type he chose.

Thanks! Zach

Solution

OK.. I've managed to solve this somehow, not sure that it's the best alternative, but I'm posting it so if someone needs it in the future he at least has something to start with.

I went with creating a "regular" form using simpleform and then using JQuery to move the inner input fields (which were created regularly) next to the radio buttons.

Add JQuery support to your rails app:

add gem "jquery-rails" to your Gemfile
bundle install
rails generate jquery:install

The form I've used (regular simpleform):

Notice the class that is attached to the radio buttons and the ids that are attached to the input fields. I'll use it later to move the elements.

<%= simple_form_for @client, url: 'update_payment_data' do |f| %>
    <%= f.input :payment_type, label: t('account.update_payment_method.title'),
          input_html: { class: 'payment_method_options' },
          collection: [ [t('account.update_payment_method.sum_based.title'), :amount],
                        [t('account.update_payment_method.days_in_month_based.title'), :days_in_month],
                        [t('account.update_payment_method.optout.title'), :optput]
          ], as: :radio_buttons %>
    <%= f.input :payment_amount, label: "Payment amount threshold", 
          input_html: { id: 'payment_amount_box' } %>
    <%= f.input :payment_days_in_month, label: "Payment days in month", 
          input_html: { id: 'payment_days_in_month_box' } %>
    <%= f.button :submit, t('account.update_payment_method.update') %>
<% end %>

In the same page - the JQuery code:

<script>
    $(document).ready(function() {
        var amount_box = $("#payment_amount_box");
        var amount_box_parent = amount_box.parent();
        amount_box.detach().appendTo($(".payment_method_options:eq(0)").parent());
        amount_box_parent.remove();

        var dim_box = $("#payment_days_in_month_box");
        var dim_box_parent = dim_box.parent();
        dim_box.detach().appendTo($(".payment_method_options:eq(2)").parent());
        dim_box_parent.remove();

    });
</script>

I think it's pretty self-explanatory, it just looks for what is going to be the inner input fields (by id) and moves them into the appropriate place under the span that simpleform creates for each radio button.
I had to play a little bit with the css to make it look how I wanted (display:block for example), but that's more or less it.

Hope it helps.. Zach