@extends('layouts.master')

@section('content-header')
    <h1 class="pull-left">
        {{ trans('dashboard::dashboard.name') }}
    </h1>
    <div class="btn-group pull-right">
        <a class="btn btn-default" id="edit-grid" data-mode="0" href="#">{{ trans('dashboard::dashboard.edit grid') }}</a>
        <a class="btn btn-default" id="reset-grid" href="{{ route('dashboard.grid.reset')  }}">{{ trans('dashboard::dashboard.reset grid') }}</a>
        <a class="btn btn-default hidden" id="add-widget" data-toggle="modal" data-target="#myModal">{{ trans('dashboard::dashboard.add widget') }}</a>
    </div>
    <div class="clearfix"></div>
@stop

@section('styles')
    <style>
        .grid-stack-item {
            padding-right: 20px !important;
        }
    </style>
@stop

@section('content')

    <div class="row">
        <div class="col-md-12">
            <div class="grid-stack">
            </div>
        </div>
    </div>
    <div class="clearfix"></div>

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">{{ trans('dashboard::dashboard.add widget to dashboard') }}</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                    </div>
                </div>
            </div>
        </div>
    </div>
@stop

@section('scripts')
    @parent
    <script type="text/javascript">
        $(document).ready(function () {
            var options = {
                vertical_margin: 10,
                float: true,
                animate: true
            };
            $('.grid-stack').gridstack(options);

            /** savey crap */
            new function () {
                this.defaultWidgets = {!! json_encode($widgets) !!};
                this.serialized_data = {!! $customWidgets !== 'null' ? $customWidgets : json_encode($widgets) !!};
                //console.log(this.defaultWidgets.PostsWidget);
                this.grid = jQuery('.grid-stack').data('gridstack');
                this.load_grid = function () {
                    this.grid.remove_all();
                    var items = GridStackUI.Utils.sort(this.serialized_data);
                    _.each(items, function (node) {
                        this.spawn_widget(node);
                        jQuery(jQuery.find('option[value="'+node.id+'"]')[0]).hide();
                    }, this);
                }.bind(this);
                this.save_grid = function () {
                    this.serialized_data = _.map($('.grid-stack > .grid-stack-item:visible'), function (el) {
                        el = jQuery(el);
                        var node = el.data('_gridstack_node');
                        return {
                            id: el.attr('id'),
                            x: node.x,
                            y: node.y,
                            width: node.width,
                            height: node.height
                        };
                    }, this);
                    $.ajax({
                        type: 'POST',
                        url: '{{ route('dashboard.grid.save') }}',
                        data: {
                            _token: '