@section('script')
    @parent
    <script>
        $(()=>{
            const MAX_ROWS = {{$maxRows}};
            const MIN_ROWS = {{$minRows}};
            const INIT_ROWS = {{$initRows}};
            let table_el = $('#{{$id}}');
            let template_el;
            const add_el = table_el.parents('.dynamic-form-control').find('.add-cta-opt');

            add_el.on('click', function(e){
                e.preventDefault();
                setButtonToLoading(e.currentTarget);
                addRow();
                resetLoadingButton();
            });

            initRows();

            function initRows(){
                let toClone = table_el.find('[name=row-default]');
                let toCloneSelect2El = toClone.find('select.select2');
                if (toCloneSelect2El &&toCloneSelect2El.data('select2') ) {
                    toCloneSelect2El.select2("destroy");
                }

                template_el = toClone.clone();
                template_el.removeAttr('name');

                toClone.remove();
                for(let i=0; i < INIT_ROWS ; i++){ addRow() }
                addRowHideShow();
            }

            function addRow(){
                if(rowsCount()>= MAX_ROWS) return;

                const append_el = template_el.clone()
                if(rowsCount() < MIN_ROWS ){
                    append_el.find('.del-cta-opt').addClass('d-none');
                }
                // append_el.find('input, select, textarea').val('');

                append_el.find('.del-cta-opt').on('click', function(e){
                    e.preventDefault();
                    setButtonToLoading(e.currentTarget);
                    if(rowsCount() <= MIN_ROWS) return;
                    append_el.remove();
                    addRowHideShow();
                    resetLoadingButton();
                });

                table_el.find('tbody').append(append_el);
                // if there are select 2/ etc inside , might need to reinit select 2
                if(append_el.find('select.select2')){

                    $.each( append_el.find('.select2') , function(k,v){
                        $(this).select2({
                            placeholder: $(this).attr('placeholder') || $(this).attr('data-placeholder') ,
                        });
                    });

                }
                addRowHideShow();

            }

            function rowsCount(){
                return table_el.find('tr').length
            }
            function addRowHideShow(){
                rowsCount()>= MAX_ROWS ? add_el.hide(): add_el.show();
            }

        });

    </script>
@endsection

<div class="dynamic-form-control">
<label>{{$label??''}}</label>
<a href="javascript:void(0)" class="btn btn-xs btn-secondary add-cta-opt {{$addCtaClass??''}}"><i class="fas fa-plus mr-1"></i>{{$addCtaCopy??'Add'}}</a>

<div class="{{$wrapperClass??''}}">
    <table id="{{$id??''}}" name="{{$id??''}}" class="dynamic-table table table-borderless table-sm table-valign-middle mb-0">

        <tbody class="table-hover">
        <tr name="row-default">
            <td class="{{$tdClass??''}}">
                {{$slot??''}}
            </td>
            <td class="align-baseline" style="width: 35px "><a class="btn m-0 p-0 text-muted del-cta-opt {{$delCtaClass??''}}"><i class="fas fa-times"></i></a></td>
        </tr>
        </tbody>
    </table>

</div>
</div>