@extends('panel.layout.design-layout')

@section('title',$title)

@section('content')
    <link href="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.4/gridstack.min.css" rel="stylesheet"/>
    <style type="text/css">
        .grid-stack { background: rgba(220,220,220,.3); border: 2px dotted rgba(200,200,200,.5); height: 125px;}
        .grid-stack-item-content { background-color: #18BC9C; }
    </style>

    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Slider Oluştur</h3>
        </div>
        <div class="card-body">
            <form method="post" enctype="multipart/form-data">
                <div class="row">
                    <div class="col-md-12 d-none d-md-block">
                        <div class="form-group">
                            <label>Başlık</label>
                            <input type="text" class="form-control" name="title">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-1">
                        <div id="trash" style="padding: 5px; margin-bottom: 15px;" class="text-center">
                            <div>
                                <ion-icon name="trash" style="font-size: 300%"></ion-icon>
                            </div>
                            <div>
                                <i class="fa fa-trash fa-2x"></i>
                                <br>
                                <span>Silmek için buraya sürükle!</span>
                            </div>
                        </div>
                        <div data-type="toolbar">
                            <div class="newWidget grid-stack-item" style="width: 100%; margin-bottom: 10px; text-align: center" data-type="header">
                                <div class="grid-stack-item-content" style="padding: 5px;">
                                    <div>
                                        <h3>
                                            <i class="fa fa-heading"></i>
                                        </h3>
                                    </div>
                                </div>
                            </div>
                            <div class="newWidget grid-stack-item" style="width: 100%; margin-bottom: 10px; text-align: center;" data-type="paragraph">
                                <div class="grid-stack-item-content" style="padding: 5px;">
                                    <div>
                                        <p>
                                            <i class="fa fa-file-word fa-2x"></i>
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="newWidget grid-stack-item" style="width: 100%; margin-bottom: 10px; text-align: center;" data-type="image">
                                <div class="grid-stack-item-content" style="padding: 5px;">
                                    <div>
                                        <p>
                                            <i class="fa fa-image fa-2x"></i>
                                            <img src="">
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="newWidget grid-stack-item" style="width: 100%; margin-bottom: 10px;" data-type="button">
                                <div class="grid-stack-item-content" style="padding: 5px;">
                                    <div>
                                        <button type="button" class="btn btn-warning btn-block">
                                            Button
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-9">
                        <div class="grid-stack"></div>
                    </div>
                    <div class="col-sm-2">
                        <h3 class="text-center">Özellikler</h3>
                        <div data-type="properties"></div>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('script')
    <script src="https://gridstackjs.com/node_modules/gridstack/dist/es5/gridstack-poly.js"></script>
    <script src="https://gridstackjs.com/node_modules/gridstack/dist/es5/gridstack-all.js"></script>
    <script src="{{ asset('assets/js/LayoutDragDrop.js') }}"></script>

    <script>
        $(document).ready(function () {
            var layoutDragDrop = new LayoutDragDrop({
                container: $('[data-type="properties"]')
            });

            let grid = GridStack.init({
                cellHeight: 70,
                acceptWidgets: true,
                dragIn: '.newWidget',  // class that can be dragged from outside
                dragInOptions: { appendTo: 'body', helper: 'clone' }, // clone or can be your function
                removable: '#trash', // drag-out delete class
            });

            /*let items = [
                {x: 3, y: 0, w: 3, h: 2, content: '<h1>Selamlar 1</h1>'},
                {x: 7, y: 0, w: 3, h: 2, content: '<h1>Selamlar 2</h1>'},
            ];*/

            /**
             * x: Sıralama
             * w: genişlik
             * h: yükseklik
             */


            let items = [];
            grid.load(items);

            grid.on('added removed change', function(e, items) {
                var myDate = new Date();
                var displayDate = (myDate.getMonth()+1) + (myDate.getDate()) + myDate.getFullYear() + myDate.getTime();


                let str = '';
                items.forEach(function(item) {
                    var name = $(item.el).data('type') + '-' + displayDate;
                    var elementType = $(item.el).data('type');

                    var editButton = $('<div>').attr({
                        type: 'button',
                        class: 'btn btn-sm btn-warning',
                        style: 'float: right; top:0px!important;display: block; position: absolute;'
                    }).html('<i class="fa fa-edit"></i>');

                    $(item.el).hover(
                        function() {
                            $(editButton).show();
                        },
                        function() {
                            $(editButton).hide();
                        }
                    );

                    $(item.el).append($(editButton));

                    if(elementType == 'paragraph')
                    {
                        var thisElement = $(item.el).find('p').text('Paragraf');
                        $(editButton).on('click', function () {
                            layoutDragDrop.init({
                                name: name,
                                referenceElement: $(thisElement),
                                attr: {
                                    val: $(thisElement).text()
                                }
                            });
                        });
                    }else if(elementType == 'header')
                    {
                        var thisElement = $(item.el).find('h3').text('Başlık');
                        $(editButton).on('click', function () {
                            layoutDragDrop.init({
                                name: name,
                                referenceElement: $(thisElement),
                                attr: {
                                    val: $(thisElement).text()
                                }
                            });
                        });
                    }else if(elementType == 'image')
                    {
                        var thisElement = $(item.el).find('<img>').attr({
                            src: 'http://127.0.0.1:8000/logo.png'
                        });
                        $(editButton).on('click', function () {
                            layoutDragDrop.init({
                                name: name,
                                referenceElement: $(thisElement),
                                attr: {
                                    val: $(thisElement).text()
                                }
                            });
                        });
                    }else if(elementType == 'button')
                    {
                        var thisElement = $(item.el).find('button').text('Buton');
                        $(editButton).on('click', function () {
                            layoutDragDrop.init({
                                name: name,
                                referenceElement: $(thisElement),
                                attr: {
                                    val: $(thisElement).text()
                                }
                            });
                        });
                    }
                });

                items.forEach(function(item) { str += ' (x,y)=' + item.x + ',' + item.y; });
                //console.log(e.type + ' ' + items.length + ' items:' + str );

                $.each(items, function(index, item){
                    $(item.el).find('[data-type="button"]').on('click', function () {

                    })
                });
            });


            $('[data-type="action"]').on('click', function () {

            });
        });
    </script>
@endsection