@extends('backend.layouts.main')

@section('content')

    <div class="row page-titles">
        <div class="col-md-5 align-self-center">
            <h3 class="text-themecolor">Bảng điều khiển</h3>
        </div>
        <div class="col-md-7 align-self-center">
            {{ Breadcrumbs::render('Dashboard') }}
        </div>
    </div>

    <div class="container-fluid">

        <div class="tree items">
            {{--{!! $html !!}--}}
        </div>

        <div class="arg-Graph panel hide">
            @php
                $margin = 60;
                     $left = $top =0;
            @endphp

            @foreach($items as $v)

                @php
                    if(count($v)<=1){
                        $neighbors = $v[0]['next_product_id']?"item".$v[0]['next_product_id']:'';
                    }else{
                        $neighbors =[];

                        foreach ($v as $v2){
                            $neighbors [] ="item".$v2['next_product_id'];
                        }

                        $neighbors = implode(',',$neighbors);
                    }

                $position = $v[0]['position']?explode(',',$v[0]['position']):[];

                $left = isset($position[0])?$position[0]:$left;
                $top = isset($position[1])?$position[1]:$margin;

                @endphp

                <div id="item{{$v[0]['product_id']}}" class="arg-Graph_item"
                     style="left: {{$left}}px; top: {{$top}}px;"
                     data-neighbors="{{$neighbors}}">
                    {{$v[0]['product_id']}}<br>{{$v[0]['date']}}
                    <span class="arg-Graph_connector-handler"></span>
                    <span class="arg-Graph_delete-item"></span>
                </div>

                @php
                    $margin += 70;
                @endphp

            @endforeach

            {{--<div id="item4" class="arg-Graph_item"--}}
                 {{--style=""--}}
                 {{--data-neighbors="item5">--}}
                {{--4 <br> 2019-07-09--}}
                {{--<span class="arg-Graph_connector-handler"></span>--}}
                {{--<span class="arg-Graph_delete-item"></span>--}}
            {{--</div>--}}
        </div>

        {{--<div id="categoryHierarchy"></div>--}}
    </div>
@endsection

@section('style_top')
    <link rel="stylesheet" href="{{ asset('/storage/backend')}}/d3-tree/d3-collapsible-tree.css">
    <link rel="stylesheet" href="{{ asset('/storage/backend')}}/arg-graph/arg-graph.min.css">

    <style>
        #categoryHierarchy {
            width: 100%;
            height: 600px;
            overflow: auto;
        }

        .arg-Graph {
            width: 100%;
            height: calc(100vh - 196px);
            overflow: auto;
        }

        .arg-Graph_item {
            text-align: center;
            text-transform: uppercase;
            background-image: none;
            padding: 4px 10px;
            border-radius: 3px;
            border: 1px solid transparent;
            color: white;
            border-color: transparent;
            background: #26C6DA;
        }
    </style>
@stop

@section('script')
    {{--<script type="text/javascript" src="{{ asset('/storage/backend')}}/d3-tree/jquery-2.1.1.min.js"></script>--}}
    <script type="text/javascript" src="{{ asset('/storage/backend')}}/d3-tree/d3.min.js"></script>
    <script type="text/javascript" src="{{ asset('/storage/backend')}}/d3-tree/d3.layout.js"></script>
    <script type="text/javascript" src="{{ asset('/storage/backend')}}/d3-tree/concept-graph.js"></script>
    <script type="text/javascript" src="{{ asset('/storage/backend')}}/arg-graph/arg-graph.js"></script>

    <script>
        $(document).ready(function (event) {
            //var tree = CollapsibleTree("#categoryHierarchy");
            //tree.init('{{ asset('/storage/backend')}}/d3-tree/sample.json');

            var timeOut = null;
            var argGraph;
            $(function () {
                argGraph = $('.arg-Graph').ArgGraph({
                    'onChange': function () {
                        var json = argGraph.exportJson();

                        clearTimeout(timeOut);

                        timeOut = setTimeout(function () {
                            console.log(document.createTextNode(json));
                        }, 500)
                    }
                });

                //var json = argGraph.exportJson();
            });
        });
    </script>
@stop