.widget
    .widget-body 
        = simple_form_for(@pessoa, url: base_pessoa_atualizar_categorias_path(@pessoa), method: :patch) do |f|
            legend 
                strong Editar Categorias

            table.table.table-bordered.table-hover.table-responsive
                thead 
                    tr 
                        th.text-center width="45%" Categoria 
                        th.text-center width="45%" SubCategoria
                        th.text-center width="10%"

                tbody#categoria_da_pessoa 
                    = f.fields_for :categorias_da_pessoa, @pessoa.categorias_da_pessoa do |categoria_da_pessoa|
                        = render 'categoria_da_pessoa_fields', f: categoria_da_pessoa

                tfoot 
                    tr 
                        td.links colspan="3" align="right"
                            = link_to_add_association '<span class="glyphicon glyphicon-plus-sign"></span> Adicionar'.html_safe, f, :categorias_da_pessoa,
                            :"data-association-insertion-node" => "tbody#categoria_da_pessoa", :"data-association-insertion-method" => "append",
                            class: 'btn btn-primary btn-sm', id: 'btn-add-categoria-da-pessoa'

            .row 
                .col-sm-4 
                    .col-sm-3
                        = f.submit "Salvar", class: "btn btn-primary"
                    
                    .col-sm-3
                        = link_to "Voltar", @pessoa, class: "btn btn-default"

javascript:
    $("body").on("change", ".categoria", function(){
        const linha = $(this).closest("tr");
        limpaSelectBox($(".sub-categoria", linha));
        $.ajax({
            url: `${root_url}base/categorias/${$(this).val()}/subcategorias`,
            method: "GET",
            beforeSend: function(){
                LoadingInterface("Carregando SubCategorias");
            },
            success: function(data){
                $.each(data, function(index, item){
                    console.log(item);
                    option = new Option(item.titulo, item.id, true, true);
                    select_box.append(option);
                });

                populaSelectBox(select_box);
            }
            
        });
    });

    $(function(){
        $('form').on('cocoon:after-insert', function(e, insertedItem) {
            $('select.s2', insertedItem).select2();
        })
    })

    function limpaSelectBox(id){
        select_box = $(id).empty().select2({
            placeholder: "Selecione",
            allowClear: true
        })
        select_box.prepend(new Option('Selecione', '', true, true));
        select_box.trigger('change');
        return(select_box);
    }

    function populaSelectBox(select_box){
        select_box.prepend(new Option('Selecione', '', true, true));
        select_box.trigger('change');
    }