@for($t=1;$t<=2;$t++)
@php  ${'table'.$t.'_line_count'} = 0; @endphp
<div class="card card-outline card-info">
    <div class="card-header">
        <h3 class="card-title">{{$table[$t]['title_en']??null}}</h3>
        <div class="card-tools">
            <button type="button" class="btn btn-tool btn-sm" data-card-widget="collapse" data-toggle="tooltip" title="Collapse"><i class="fas fa-minus"></i></button>
        </div>
    </div>
    <div class="card-body pad">
        <div class="row">
            <div class="col-12 col-sm-6 col-md-3 col-lg-3 col-xl-3">
                <div class="form-group">
                    <label for="title_en">@lang('nboard.lbl_title_en')</label>
                    <input type="hidden" name="table[{{$t}}][id]" value="{{$table[$t]['id']??null }}" >
                    <input type="text" class="form-control {{ $errors->has('title_en') ? ' is-invalid' : '' }}" placeholder="Enter Label English" name="table[{{$t}}][title_en]" value="{{$table[$t]['title_en']??null}}" {{$editable?'':' disabled'}} >                    
                    @if ($errors->has('title_en'))
                        <span class="invalid-feedback">
                            <strong>{{ $errors->first('title_en') }}</strong>
                        </span>
                    @endif
                </div>
            </div>
            <div class="col-12 col-sm-6 col-md-3 col-lg-3 col-xl-3">
                <div class="form-group">
                    <label for="title_si">@lang('nboard.lbl_title_si')</label>
                    <input type="text" class="form-control form-control{{ $errors->has('title_si') ? ' is-invalid' : '' }}" placeholder="Enter Label Sinhala" name="table[{{$t}}][title_si]" value="{{$table[$t]['title_si']??null}}" {{$editable?'':' disabled'}}>
                    @if ($errors->has('title_si'))
                        <span class="invalid-feedback">
                            <strong>{{ $errors->first('title_si') }}</strong>
                        </span>
                    @endif
                </div>
            </div>
            <div class="col-12 col-sm-6 col-md-3 col-lg-3 col-xl-3">
                <div class="form-group">
                    <label for="title_ta">@lang('nboard.lbl_title_ta')</label>
                    <input type="text" class="form-control form-control{{ $errors->has('title_ta') ? ' is-invalid' : '' }}" placeholder="Enter Label Tamil" name="table[{{$t}}][title_ta]" value="{{$table[$t]['title_ta']??null}}" {{$editable?'':' disabled'}}>
                    @if ($errors->has('title_ta'))
                        <span class="invalid-feedback">
                            <strong>{{ $errors->first('title_ta') }}</strong>
                        </span>
                    @endif
                </div>
            </div>
            <div class="col-12 col-sm-6 col-md-3 col-lg-3 col-xl-3">
                <label for="categories">@lang('nboard.lbl_show_col')</label>
                <div class="select2-blue">
                    <select name="table[{{$t}}][show_columns][]" class="form-control select2{{ $errors->has('show_columns') ? ' is-invalid' : '' }}" multiple="multiple" {{$editable?'':' disabled'}}>
                    @foreach (App\Models\Comm::getShowColumns() as $key=>$value)
                        <option value="{{$key}}" {{in_array($key, ($table[$t]['show_columns']??[] ) )? 'selected' : ''}}>{{$value}}</option>
                    @endforeach
                    </select>
                    @if ($errors->has('show_columns'))
                    <span class="invalid-feedback">
                        <strong>{{ $errors->first('show_columns') }}</strong>
                    </span>
                        @endif
                </div>
            </div>

            <table class="table table-bordered">
                <thead>
                    <tr class="@lang('theme.tbl_hd_light')">
                        @if($editable)
                            <input type="hidden" name="table[{{$t}}][data][0][id]" value="{{$data['id']??null }}" >
                            @for($i=0; $i < 10; $i++)
                                <th  class="" style="min-width:80px;">
                                    <select class="form-control form-control-sm" name="table[{{$t}}][data][0][c{{$i}}]" {{$editable?'':' disabled'}}>
                                        <option value="null">--None--</option>
                                        @if (!empty($row_lables))
                                            @foreach ($row_lables as $key=>$label)
                                            <option value="{{$label}}" {{$label == ( $table[$t]['data'][0]['c'.$i] ?? '') ? ' selected' : '' }} >{{$label}}</option>                                    
                                            @endforeach
                                        @endif
                                    </select>
                                </th>
                            @endfor
                            <th style="min-width:80px;"></th>
                        @else
                            @for($i=0; $i < 10; $i++)
                                <th style="min-width:80px;">
                                    {{$table[$t]['data'][0]['c'.$i]??''}}
                                </th>
                            @endfor

                        @endif   
                    </tr>
                </thead>
                <tbody id="table{{$t}}">
                    @foreach($table[$t]['data']??[] as $line => $data)
                        @if($line != '0')
                            @if($editable)
                                <tr id="table_{{$t}}_row_{{$line}}">
                                    <input type="hidden" name="table[{{$t}}][data][{{$line}}][id]" value="{{$data['id']??null }}" >
                                    <td>
                                        <select class="form-control form-control-sm" name="table[{{$t}}][data][{{$line}}][c0]" {{$editable?'':' disabled'}}>
                                            <option value="null">--None--</option>
                                            @if (!empty($col_lables))
                                                @foreach ($col_lables as $key=>$label)
                                                    <option value="{{$label}}" {{$label == ($data['c0']??'') ? ' selected' : '' }} >{{$label}}</option>
                                                @endforeach
                                            @endif
                                        </select>
                                    </td>
                                    @for($i=1; $i < 10; $i++)
                                        <td>
                                            <input class="form-control form-control-sm " name="table[{{$t}}][data][{{$line}}][c{{$i}}]" value="{{$data['c'.$i]??null }}" >
                                        </td>
                                    @endfor
                                    <td>
                                        <a class="tbl_btn_remove"><i class="fa fa-trash pl-2 pt-2 float-right" aria-hidden="true"></i></a>
                                    </td>
                                </tr>
                                @php  ${'table'.$t.'_line_count'} = $line; @endphp
                            @else
                                <tr>
                                    @for($i=0; $i < 10; $i++)
                                        <td>
                                            {{$data['c'.$i]??null }}
                                        </td>
                                    @endfor
                                </tr> 
                            @endif
                        @endif
                    @endforeach
                </tbody>
                <tfoot id="tbl_foot" style="display: {{($editable)?'':' none'}}">
                    <tr>
                        <td class="pl-2">
                            <a id="add_row_tbl{{$t}}" class="btn @lang('theme.btn_add') btn-sm my-0 mx-1 py-0 px-1 font-weight-bold text-center add-row">@lang('common.btn_add')</a>
                        </td>
                        @for($i=0; $i < 9; $i++)
                            <td></td>
                        @endfor
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
    <div class="card-footer">
        <div class="row">
            <div class="col-12 col-sm-6 col-md-2 col-lg-2 col-xl-2">
                <div class="form-group-sm">
                    <label class="control-label">Status</label>
                    <select class="form-control-sm form-control{{ $errors->has('status') ? ' is-invalid' : '' }}" name="table[{{$t}}][status]" {{$editable?'':' disabled'}}>
                        @foreach (App\Models\Comm::getMenuStatuses() as $key=>$value)
                            <option value="{{$key}}" {{$key == (old('status')??$nboard->status ) ? 'selected' : ''}}>{{$value}}</option>
                        @endforeach
                    </select>
                    @if ($errors->has('status'))
                        <span class="invalid-feedback">
                            <strong>{{ $errors->first('status') }}</strong>
                        </span>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endfor

<script>
    var labels = @json($col_lables);
    var line_count_table1 = "{{++$table1_line_count}}";
    var line_count_table2 = "{{++$table2_line_count}}";
    var label_options = '';
        for (var key in labels) {
            label_options += '<option value="'+labels[key]+'">'+labels[key]+'</option>';
        }

    $('.add-row').click(function(){
        var tableId = $(this).attr('id').split("add_row_tbl")[1];
        let line = window['line_count_table'+tableId];
        var row = '<tr id="row_table'+tableId+'_'+line+'"> ';
                    row += '<td>' +
                        '<select class="form-control form-control-sm " name="table['+tableId+'][data]['+line+'][c0]" >'+
                        label_options +
                        '</select>' +
                    '</td>' ;

            for(let i=1; i<10; i++) {
                row += '<td>' +
                            '<input class="form-control form-control-sm " name="table['+tableId+'][data]['+line+'][c'+i+']" >'+
                        '</td>' ;
            }
            row += '<td>'+
                '<a class="tbl_btn_remove"><i class="fa fa-trash pl-2 pt-2 float-right" aria-hidden="true"></i></a>'+
                '</td>'+
                '</tr>';             
        $('#table'+tableId).append(row);
        
        window['line_count_table'+tableId]++;
    });

    $(document).on('click', '.tbl_btn_remove', function(){
            Swal.fire({
                title: "Do you want to remove the table?",
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes',
                cancelButtonText: 'No',
                }).then((result) => {
                if (result.isConfirmed) {
                    $(this).closest('tr').remove();
                    //$('#chart_tbl > tbody > tr').each(function(index, tr) { 
                    //    $(this).find("td:first").text(++index+'.');
                    //    chart_lineSeq = index+1;
                    //});
                }
            })

        });

</script>
<script>
    $(function () {
    //Initialize Select2 Elements
    $('.select2').select2()

    //Initialize Select2 Elements
    $('.select2bs4').select2({
      theme: 'bootstrap4'
    })
})
</script>