@extends('layouts.dashboard')

@section('title', 'Home')

@section('content')

@section('myJS')
	<script type="text/javascript" src="{{url('/')}}/js/admin/chart.js"></script>
	<link href="{{url('/')}}/css/card.css?v=2.1.1" rel="stylesheet" />
	<link href="{{url('/')}}/css/dashboardGridster.css?v=2.1.1" rel="stylesheet" />
@endsection


<section class="pd">
    <div class="gridster">
        <div class="dashboardGridster" id="dashboardGridster" style="height: 800px; min-width: 100%; max-width: 100%; position: relative; padding: 0px;">
                @foreach($dashboardData as $item)
                    {!! $item !!}
                @endforeach
        </div>
    </div>
</section>

<script>
    $.ajaxSetup({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
    });
    var gridster; 

    gridster = $(".dashboardGridster").gridster({
        widget_selector: "div.dragPanel",
        widget_base_dimensions: ['auto', 235],
        autogenerate_stylesheet: true,
        min_cols: 1,
        max_cols: 5,
        widget_margins: [5, 5],
        resize: {
            enabled: true,
            max_size: [5,5],

            // start: function (e, ui, $widget) {
            //     var log = $widget + 'START position: ' + ui.position.top + ' ' + ui.position.left + "<br >";
            //     // console.log(log);
            // },

            // drag: function (e, ui, $widget) {
            //     var log = $widget + 'DRAG offset: ' + ui.pointer.diff_top + ' ' + ui.pointer.diff_left + "<br >";
            //     // console.log(log);
            // },

            stop: function (e, ui, $widget) {
                console.log($widget.height());

                var panelHeight = $widget.height();
                var bodyHeight = panelHeight - 43;
                console.log($widget.children().find('.panel-body').html());
                $widget.children().find('.panel-body').css('height', bodyHeight + 'px');

                gdserialize();
            }
        },
        draggable: {
            // start: function (e, ui, $widget) {
            //     var log = $widget + 'START position: ' + ui.position.top + ' ' + ui.position.left + "<br >";
            //     // console.log(log);
            // },

            // drag: function (e, ui, $widget) {
            //     var log = $widget + 'DRAG offset: ' + ui.pointer.diff_top + ' ' + ui.pointer.diff_left + "<br >";
            //     // console.log(log);
            // },

            stop: function (e, ui, $widget) {
                // var log = $widget + 'STOP position: ' + ui.position.top + ' ' + ui.position.left + "<br >";
                // console.log(ui);
                gdserialize();
            }
        }
    }).data('gridster');

    function gdserialize()
    {
        console.log(gridster.serialize());

        $.ajax({
            type: "POST",
            url: base_url + 'updateDashboardItemsCords',
            data: {"data": JSON.stringify(gridster.serialize())},
            success: function(response){
                console.log(response);
            }
        });
    }
</script>
<script>
    
    $(".dragPanel").each(function() {
        var panelHeight = $(this).height();
        var bodyHeight = panelHeight - 43;
        $(this).children().find('.panel-body').css('height', bodyHeight + 'px');
    });
    
    // var headingHeight = $('.panel-heading').height();
    // $('.panel-body').height(panelHeight - headingHeight);
</script>

@endsection