<div class="new-list">
    <h2>New List</h2>
    <%= form_for @list, url: list_path, html: {class: "form-signin"} do |f| %>
        <%= f.text_field :name, placeholder: "Name your list (optional)" %>
        <!-- Category -->
        <div class="categories">
            <% current_user.categories.each do |category| %>
                <h3 class="category">
                  <%= category.name %>
                </h3>
                <!-- Items -->
                <div class="dropdown-button" data-toggle="collapse" data-target="#<%= category.name %>">
                    <span class="glyphicon glyphicon-chevron-down"></span>
                </div>
                <!-- Dropdown div -->
                <div id="<%= category.name %>" class="collapse">
                    <div class="table-responsive">
                        <!-- User Item table -->
                        <table class="items">
                            <tr>
                                <th>Add</th>
                                <th>Name</th>
                                <th>Price</th>
                                <th>Qnty</th>
                            </tr>
                        <% category.user_items.each do |item| %>
                            <%= f.fields_for l = @list.list_items.build, index: l.id do |list_item| %>
                                <% @category = category %>
                                <% @f = f %>
                                <tr>
                                    <td><%= list_item.check_box :user_item_id, { checked: false }, item.id, nil %></td>
                                    <td><%= item.name %></td>
                                    <td><%= item.price %></td>
                                    <td><%= list_item.number_field :quantity,
                                                                                                    min: 1,
                                                                                                    class: "num"%></td>
                                </tr>
                            <% end %>
                        <% end %>
                      </table>
                    </div>
                    <h3>Create a new item here:</h3>
                    <%= render partial: 'shared/user_item_form', locals: {f: f, category_id: category.id}  %>
                    <h4><span class="glyphicon glyphicon-plus" id="add-item"></span>Add More</h4>
                </div>
            <% end %> <!-- current_user.categories -->
            <br>
            <%= f.submit "Submit" %>
        </div>
    <% end %>
</div>

<!-- dropdown button script -->
<script>
  $(document).ready(function () {
      $('.data-toggle').collapse();
      addNewItemForm();
  });

function addNewItemForm(){
  $('#add-item').click(function(){
        $(this).parents(':eq(1)').append("<%= escape_javascript render partial: 'shared/user_item_form', locals: {f: @f, category_id: @category.id} %>");
  });
}
</script>