@extends('layouts.backend')

@section('content')

@blocknh()

<div id="app" >
    <button type="button" class="btn btn-primary add-grid-item" >Add</button>
    <button type="button" class="btn btn-primary save-grid-item" >Save</button>

    <br><br>
    <div class="grid-stack" data-gs-width="12" data-gs-animate="yes">
        
    </div>
</div>

<script id="entry-template" type="text/x-handlebars-template">
    <div class="grid-stack-item" >
        <div class="grid-stack-item-content">
            <a href="rb-admin/tableproduct/@{{id}}" class="btn btn-sm" >@{{id}}</a>
        </div>
    </div>
</script>

@endblocknh

@endsection

@section('css')
<link rel="stylesheet" href="packages/gridstack/dist/gridstack.min.css" />
<style>
    .grid-stack-item-content {
        background-color: #ff0;
    }
</style>
@endsection

@section('script')
<script src="packages/handlebars/handlebars.min.js"></script>
{{-- <script src="packages/jquery/dist/jquery.min.js"></script> --}}
<script src="packages/jquery-ui/jquery-ui.min.js"></script>
<script src="packages/lodash/dist/lodash.min.js"></script>
<script src="packages/gridstack/dist/gridstack.min.js"></script>
<script src="packages/gridstack/dist/gridstack.jQueryUI.min.js"></script>

<script type="text/javascript">

    /* $(function () {
        $('.grid-stack').gridstack();
    }); */

    $(document).ready(function () {
        (function ($) {

            var options = {
                width: 12,
                alwaysShowResizeHandle: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent),
                resizable: {
                    handles: 'e, se, s, sw, w'
                },
            };
            $('.grid-stack').gridstack(options);
            var grid = $('.grid-stack').data('gridstack');
            //console.log('grid', grid);

            $.get('rb-admin/gettable', null, function(res){
                console.log('res get', res);
                res.tables.forEach(function(element){
                    var html = getTableObject(element.id);
                    grid.addWidget(html, element.x, element.y, element.width, element.height, false, null, null, null, null, element.id);
                });
            }, 'json');

            $(".add-grid-item").on("click", function () {
                console.log('add');
                var code = prompt("กรุณาใส่รหัส");
                $.post('rb-admin/addtable', {
                    _token: $('meta[name="csrf-token"]').attr('content'),
                    code: code
                }, function(res){
                    console.log('res', res);
                    var html = getTableObject(res.id);
                    grid.addWidget(html, 0, 0, 1, 1, true, null, null, null, null, res.id);
                    saveTable();
                }, 'json');
                //grid.addWidget(html, 0, 0, 1, 1, true, null, null, null, null, code);
            });

            $(".save-grid-item").on('click', function(){
                saveTable();
            });

            function saveTable(){
                $.post('rb-admin/savetable', {
                    _token: $('meta[name="csrf-token"]').attr('content'),
                    tables: mapNodes(grid.grid.nodes)
                }, function(res){
                    console.log('res', res);
                }, 'json');
            }

            function getTableObject(id){
                var source   = document.getElementById("entry-template").innerHTML;
                var template = Handlebars.compile(source);
                var context = {id : id};
                var html    = template(context);
                return html;
            }

            function mapNodes(nodes){
                return nodes.map(function(data){
                    return {
                        width: data.width,
                        height: data.height,
                        x: data.x,
                        y: data.y,
                        id: data.id
                    };
                });
            }

        })(jQuery);

        

    });
    
</script>

@endsection