@php
    $textableData = $textableData ?? [];
    $textableName = $textableName ?? 'textable_data';
    $textableNumber = $textableNumber ?? 1;
    $textableTitle = $textableTitle ?? '';
@endphp

<div class="card card-info w-100">
    <div class="card-header">
        <h3 class="card-title">{{ $textableTitle }}</h3>
    </div>
    <!-- /.card-header -->
    <div class="card-body">

        <div class="form-group">
            <label for="">{{ $textableTitle }}</label>
            <div class="textable-block">
                @if(isset($textableData))
                    @for($textableCounter = 0; $textableCounter < count($textableData); $textableCounter++)
                        <div class="row item-row" id="textable-block-{{$textableNumber}}-row{{ $textableCounter }}">
                            <input type="hidden" name="{{$textableName}}[{{ $textableCounter }}][id]" value="{{ $textableData[$textableCounter]['id'] }}"/>
                            <div class="form-group col-md-10">
                                <label>{{ __('dashboard.url') }}</label>
                                <input type="url"
                                       class="form-control {{ $errors->has("$textableName.$textableCounter.url") ? 'is-invalid' : '' }}"
                                       name="{{$textableName}}[{{ $textableCounter }}][url]"
                                       placeholder="{{ __('dashboard.url') }}"
                                       value='{{ old("$textableName.$textableCounter.url", $textableData[$textableCounter]['url']) }}'/>
                            </div>
                            <div class="col-md-2 del-btn-div">
                                <button type="button"
                                        onclick="$('#textable-block-{{$textableNumber}}-row{{ $textableCounter }}').remove();" data-toggle="tooltip"
                                        title="{{ __('general.delete') }}" class="btn btn-danger btn-sm">
                                    <i class="fa fa-minus-circle"></i>
                                </button>
                            </div>
                        </div>
                    @endfor
                @endif
            </div>
            <div class="text-right">
                <button type="button" onclick="addBlockTextable();"
                        data-toggle="tooltip" title="{{ __('general.add_new') }}" class="btn btn-info-lte btn-sm">
                    <i class="fa fa-plus-circle"></i>
                </button>
            </div>
        </div> <!-- end of form-group -->
    </div>
    <!-- /.card-body -->
</div>

<script>
    let textableCounter = {{ $textableCounter ?? 0 }};
    let html;
    function addBlockTextable() {
        let elementId = 'textable-block-{{$textableNumber}}-row'+textableCounter;
        html  = '<div class="row item-row" id="'+elementId+'">';
        html += '   <input type="hidden" name="{{$textableName}}['+textableCounter+'][id]">';
        html += '   <div class="form-group col-md-10">';
        html += '       <label>{{  __('dashboard.url') }}</label>';
        html += '       <input type="url" class="form-control" name="{{$textableName}}['+textableCounter+'][url]" placeholder="{{ __('dashboard.url') }}" value="" />';
        html += '   </div>';
        html += '   <div class="col-md-2 del-btn-div">';
        html += '      <button type="button" onclick="$(\'#textable-block-{{$textableNumber}}-row'+textableCounter+'\').remove();" data-toggle="tooltip" title="{{ __('general.delete') }}" class="btn btn-danger btn-sm">';
        html += '         <i class="fa fa-minus-circle"></i>';
        html += '      </button>';
        html += '   </div>';
        html += '</div>';

        $('.textable-block').append(html);
        textableCounter++;
    }
</script>