@if (!empty($content))
	<table class="type-table" id="type-table">
		@php($c=0)
		@for($i=0; $i<$content['rows']; $i++)
			<tr>
				@for($x=0; $x<$content['cols']; $x++)

					@if($i==0 and $content['table_header'])
						<th>
							<input type="text" class="form-control" name="cells[]" value="{{ $content['cells'][$c] }}">
						</th>
					@else
						<td>
							<input type="text" class="form-control" name="cells[]" value="{{ $content['cells'][$c] }}">
						</td>
					@endif

					@php($c++)
				@endfor
			</tr>
		@endfor
	</table>
@else
	<table class="type-table" id="type-table">
		<tr>
			<td><input type="text" class="form-control" name="cells[]"></td>
		</tr>
	</table>
@endif

<div class="form-group">
	<label>Row <i class="bi bi-arrows-expand"></i></label>
	<div class="btn-group mx-3">
		<button type="button" class="btn btn-sm btn-outline-danger" onclick="deleteRow();"><i class="bi bi-dash-lg"></i></button>
		<button type="button" class="btn btn-sm btn-outline-primary" onclick="appendRow();"><i class="bi bi-plus-lg"></i></button>
	</div>

	<label>Column <i class="bi bi-layout-three-columns"></i></label>
	<div class="btn-group mx-3">
		<button type="button" class="btn btn-sm btn-outline-danger" onclick="deleteColumn();"><i class="bi bi-dash-lg"></i></button>
		<button type="button" class="btn btn-sm btn-outline-primary" onclick="appendColumn();"><i class="bi bi-plus-lg"></i></button>
	</div>
</div>

<div class="form-group">
	<label>
		Table Header
		<input type="checkbox" name="table_header" value="1" @checked(!empty($content['table_header']))>
	</label>
</div>

<input type="hidden" name="rows" id="rows" value="{{ !empty($content['rows']) ? $content['rows']:1 }}">
<input type="hidden" name="cols" id="cols" value="{{ !empty($content['cols']) ? $content['cols']:1 }}">

<script type="text/javascript">
var rows = $('#rows').val();
var cols = $('#cols').val();

function appendRow() {
    var tbl = document.getElementById('type-table'),
        row = tbl.insertRow(tbl.rows.length),
        i;

    for (i = 0; i < tbl.rows[0].cells.length; i++) {
        createCell(row.insertCell(i));
    }

    $('#rows').val(++rows);
}
 
function createCell(cell) {
    var box = document.createElement('input');

    box.setAttribute('type', 'text');
    box.setAttribute('class', 'form-control');
    box.setAttribute('name', 'cells[]');

    cell.appendChild(box);
}

function appendColumn() {
    var tbl = document.getElementById('type-table'),
        i;

    for (i = 0; i < tbl.rows.length; i++) {
        createCell(tbl.rows[i].insertCell(tbl.rows[i].cells.length));
    }

    $('#cols').val(++cols);
}

function deleteRow() {
    var tbl = document.getElementById('type-table'),
        lastRow = tbl.rows.length - 1;

    tbl.deleteRow(lastRow);
    $('#rows').val(--rows);
}

function deleteColumn() {
    var tbl = document.getElementById('type-table'),
        lastCol = tbl.rows[0].cells.length - 1,
        i;

    for (i = 0; i < tbl.rows.length; i++) {
	    tbl.rows[i].deleteCell(lastCol);
	}

	$('#cols').val(--cols);
}

</script>