@extends('layout.layout')

{{-- Style --}}
@push('links')
<style nonce="{{ csp_nonce() }}">
.grid-stack {
  background: lightgoldenrodyellow;
}

.grid-stack-item-content {
  color: #2c3e50;
  text-align: center;
  background-color: #18bc9c;
}

</style>
@endpush

@section('content')

<h1>gridstack.js base demo for issues</h1>
<p>Fork and modify me to demonstrate your issue when creating an issue for gridstack.js</p>
<div><a class="btn btn-default" onClick="addNewWidget()" href="#">Add Widget</a></div>
<br />

<div class="grid-stack"></div>

@endsection

{{-- Script --}}
@push('scripts')
<script type="text/javascript" nonce="{{ csp_nonce() }}">
var options = { // put in gridstack options here
float: false
};
var grid = GridStack.init(options);

var count = 0;
var items = [
{x: 0, y: 0, w: 2, h: 2},
{x: 2, y: 0, w: 2},
{x: 3, y: 1, h: 2},
{x: 0, y: 2, w: 2},
];

addNewWidget = function () {
var node = items[count] || {
  x: Math.round(12 * Math.random()),
  y: Math.round(5 * Math.random()),
  w: Math.round(1 + 3 * Math.random()),
  h: Math.round(1 + 3 * Math.random()),
  minW: 4,
};
count++;
node.content = String('<h3>'+count+'</h3>');
grid.addWidget(node);
return false;
};

addNewWidget();
addNewWidget();
</script>
@endpush