@extends('layouts.backend')

@section('title', 'Manage Table')

@section('content')

<div class="block block-rounded block-bordered" id="block-table" >
    <div class="block-content pb-4" >
        <div id="app" >
            <button type="button" class="btn btn-primary add-grid-item" >Add</button>
            <button type="button" class="btn btn-primary add-grid-space" >Space</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>
    </div>
</div>

<script id="entry-template" type="text/x-handlebars-template">
    <div class="grid-stack-item grid-table-type-@{{table_type}} grid-table-status-@{{status}} grid-item-id-@{{id}}" >
        <div class="grid-stack-item-content d-flex justify-content-center align-items-center">
            <span>@{{name}}</span>
            <input type="hidden" class="grid-item-id" name="grid-item-id" value="@{{id}}" >
            <input type="hidden" class="grid-item-name" name="grid-item-name" value="@{{name}}" >
            <input type="hidden" class="grid-item-type" name="grid-item-type" value="@{{table_type}}" >
            <input type="hidden" class="grid-item-status" name="grid-item-status" value="@{{status}}" >
        </div>
    </div>
</script>

@endsection

@section('css')
<link rel="stylesheet" href="packages/gridstack/dist/gridstack.min.css" />
<link rel="stylesheet" href="assets/js/plugins/sweetalert2/sweetalert2.min.css" />
<style>
    .grid-stack-item-content {
        cursor: pointer;
    }
    .grid-table-type-2 .grid-stack-item-content {
        border: 1px dashed #dbdbdb;
        background-color: transparent;
    }
    .grid-table-type-1.grid-table-status-1 .grid-stack-item-content {
        background-color: rgba(0,0,0,.13);
    }
    .grid-table-type-1.grid-table-status-2 .grid-stack-item-content {
        background-color: #0665d0;
        color: #fff;
    }
    .grid-table-type-1.grid-table-status-3 .grid-stack-item-content {
        background-color: #82b54b;
        color: #fff;
    }
    .grid-table-type-1.grid-table-status-4 .grid-stack-item-content {
        background-color: #ffb119;
        color: #fff;
    }
</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 src="assets/js/plugins/sweetalert2/sweetalert2.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');

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

            getTable();

            $(".add-grid-space").on("click", function () {
                $.post('rb-admin/addtable', {
                    _token: $('meta[name="csrf-token"]').attr('content'),
                    code: null,
                    type: 'space'
                }, function(res){
                    console.log('res', res);
                    var html = getTableObject(res.table);
                    console.log('html', html);
                    grid.addWidget(html, 0, 0, 1, 1, true, null, null, null, null, res.id);
                    saveTable();
                }, 'json');
            });

            $(".add-grid-item").on("click", function () {
                var code = prompt("กรุณาใส่รหัส");
                $.post('rb-admin/addtable', {
                    _token: $('meta[name="csrf-token"]').attr('content'),
                    code: code,
                    type: 'table'
                }, function(res){
                    console.log('res', res);
                    var html = getTableObject(res.table);
                    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(){
                Dashmix.block('state_loading', '#block-table');
                $.post('rb-admin/savetable', {
                    _token: $('meta[name="csrf-token"]').attr('content'),
                    tables: mapNodes(grid.grid.nodes)
                }, function(res){
                    console.log('res', res);
                    Dashmix.block('state_normal', '#block-table');
                    //Dashmix.helpers('notify', {from: 'bottom', message: 'Your message!'});
                }, 'json');
            }

            function getTableObject(obj){
                var source   = document.getElementById("entry-template").innerHTML;
                var template = Handlebars.compile(source);
                var context = {
                    id : obj.id,
                    table_type: obj.table_type,
                    status: obj.status,
                    name: obj.name
                };
                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
                    };
                });
            }

            $(document).on("click", ".grid-stack-item-content", function () {
                var table_id = $(this).find(".grid-item-id").val();
                swal({
                    title: "Are you sure?",
                    text: "To Delete ?",
                    type: "error",
                    showCancelButton: true,
                    confirmButtonClass: "btn btn-danger m-1",
                    cancelButtonClass: "btn btn-secondary m-1",
                    confirmButtonText: "Yes, delete it!",
                    html: false,
                    preConfirm: function(e) {
                        return new Promise(function(e) {
                            setTimeout(function() {
                                e()
                            }, 50)
                        }
                        )
                    }
                }).then(function(e) {
                    if (e.value) {
                        $.post('rb-admin/deletetable', {
                            _token: $('meta[name="csrf-token"]').attr('content'),
                            table_id: table_id
                        }, function(res){
                            console.log('res', res);
                            var el = $(".grid-stack .grid-item-id-" + res.table_id);
                            console.log('el', el);
                            grid.removeWidget(el);
                            saveTable();
                        }, 'json');
                    }
                });
            });

        })(jQuery);

        

    });
    
</script>

@endsection