@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'] }}">
                        @foreach($languages as $language)
                            <div class="form-group {{ count($languages) > 1 ? 'col-md-5' : 'col-md-10' }}">
                                <label>
                                    {{  __('general.text') }} {{ count($languages) > 1 ? "({$language->name})" : '' }}
                                </label>
                                <input type="text"
                                       class="form-control {{ $errors->has("$textableName.$textableCounter.title.$language->local") ? 'is-invalid' : '' }}"
                                       name="{{$textableName}}[{{ $textableCounter }}][title][{{ $language->local }}]"
                                       placeholder="{{  __('general.text') }} {{ count($languages) > 1 ? "({$language->name})" : '' }} "
                                       value='{{ old("$textableName.$textableCounter.title.$language->local", $textableData[$textableCounter]['item_descriptions'][$language->id]['title'] ?? "") }}'/>
                            </div>
                        @endforeach
                        <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]">';
        @foreach(languages() as $language)
        html += '   <div class="form-group {{ count($languages) > 1 ? 'col-md-5' : 'col-md-10' }}">';
        html += '       <label>{{  __('general.text') }} {{ count($languages) > 1 ? "({$language->name})" : '' }}</label>';
        html += '       <input type="text" class="form-control" name="{{$textableName}}['+textableCounter+'][title][{{ $language->local }}]" placeholder="{{  __('general.text') }} {{ count($languages) > 1 ? "({$language->name})" : '' }}" value="" />';
        html += '   </div>';
        @endforeach
        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>