@extends('layouts.app')
@section('style')
<style type="text/css">
</style>

@parent
{{-- <link rel="stylesheet" href="{{ asset('themes/css/daterangepicker.css') }}"> --}}
<link rel="stylesheet" href="{{ asset('css/treechart.css') }}">
@stop
@section('content')
<div class="m-subheader ">
    <div class="d-flex align-items-center">
        <div class="mr-auto">
            <h3 class="m-subheader__title ">Client History</h3>
        </div>
        <div>
            <span class="m-subheader__daterange" id="daterangepicker">
                <span class="m-subheader__daterange-label">
                    <span class="m-subheader__daterange-title"></span>
                    <span class="m-subheader__daterange-date m--font-brand"></span>
                </span>
                <a href="#" class="btn btn-sm btn-brand m-btn m-btn--icon m-btn--icon-only m-btn--custom m-btn--pill">
                    <i class="la la-angle-down"></i>
                </a>
            </span>
        </div>
    </div>
</div>


<div class="m-content">
    <div class="m-portlet m-portlet--full-height ">
        <div class="m-portlet__body">
            <div id="full-container">
                <button class="btn btn-danger btn-elevate btn-pill btn-elevate-air btn-sm btn-fullscreen" onclick="params.funcs.toggleFullScreen()">Fullscreen &nbsp;<span class='icon'> <i class="fa fa-arrows-alt" aria-hidden="true"></i></span></button>
                <!-- <button class="btn btn-danger btn-elevate btn-pill btn-elevate-air btn-sm btn-show-my-self" onclick="params.funcs.showMySelf()"> Show myself &nbsp;<span class='icon'/> <i class="fa fa-user" aria-hidden="true"></i></span></button> -->
                <button class=" btn btn-danger btn-elevate btn-pill btn-elevate-air btn-sm btn-search" onclick="params.funcs.search()"> Search &nbsp;<span class='icon'/> <i class="fa fa-search" aria-hidden="true"></i></span></button>
                <button class=" btn btn-danger btn-elevate btn-pill btn-elevate-air btn-sm btn-back" onclick="params.funcs.back()"> Back &nbsp;<span class='icon'/> <i class="fa fa-arrow-left" aria-hidden="true"></i></span></button>

                <div class="department-information">
                    <div class="dept-name">
                        dept name
                    </div>
                    <div class="dept-emp-count">
                        dept description test, this is department description
                    </div>
                    <div class="dept-description">
                        dept description test, this is department description
                    </div>
                </div>

                <div class="user-search-box" style="top: 182px">
                    <div class="input-box">
                            <div class="close-button-wrapper"><i onclick="params.funcs.closeSearchBox()" class="fa fa-times-circle" aria-hidden="true"></i></div>
                                <div class="input-wrapper">
                                <input type="text" class="search-input" placeholder="Search" />
                                <div class="kt-section__info">By Name, Email, Account Number</div>
                                </div>
                            <div>
                            </div>
                    </div>
                    <div class="result-box">
                        <div class="result-header"> RESULTS </div>
                        <div class="result-list">
                            <div class="buffer"></div>
                        </div>
                    </div>
                </div>
                <div id="svgChart"></div>
            </div>

        </div>
    </div>
</div>
@stop
@section('script')
{{ Html::script('js/d3.min.js') }}
{{ Html::script('js/treechart.js') }}
{{-- {{ Html::script('themes/js/daterangepicker.js') }} --}}
<script type="text/javascript">

/*** Start Client Chart ***/
    jsondata = "{{json_encode($result) }}";
    jsondata= JSON.parse(jsondata.replace(/&quot;/g,'"'));

    var rootArray = treeify(jsondata);

    //Reformat string for D3 input
    var root = JSON.stringify(rootArray); //Convert to string
    root = root.replace(/\"/g, '"'); //Replace escaped quotations
    root = root.substring(1); //Remove leading bracket
    root = root.substring(0, root.length - 1) //Remove trailing backet
    root = root.replace(/\,/g, ", "); //Add space after comma
    root = root.replace(/:/g, ": "); //Add space after colon

    var params = {
      selector: "#svgChart",
      chartWidth: window.innerWidth-40,
      chartHeight: window.innerHeight - 40,
      funcs: {
        showMySelf: null,
        search: null,
        closeSearchBox: null,
        clearResult: null,
        findInTree: null,
        reflectResults: null,
        departmentClick: null,
        back: null,
        toggleFullScreen: null,
        locate:null
      },
      data: null
    }

    var obj = JSON.parse(root);
    params.data = obj;
    params.pristinaData = JSON.parse(JSON.stringify(obj));
    drawOrganizationChart(params);

    function treeify(list, idAttr, parentAttr, childrenAttr) {
        if (!idAttr) idAttr = 'LOGIN';
        if (!parentAttr) parentAttr = 'AGENT_ACCOUNT';
        if (!childrenAttr) childrenAttr = 'children';
        var treeList = [];
        var lookup = {};
        list.forEach(function(obj) {
            lookup[obj[idAttr]] = obj;
            obj[childrenAttr] = [];
        });
        list.forEach(function(obj) {
            if (obj[parentAttr] != null) {
                lookup[obj[parentAttr]][childrenAttr].push(obj);
            } else {
                treeList.push(obj);
            }
        });
        return treeList;
    }
/*** End Client Chart ***/

/*** Start Date Range Filter ***/
    jQuery(document).ready(function() {
        Daterangepicker.init();
    });
    var isFirstTime = true;
    var Daterangepicker = function() {
        var daterangepickerInit = function() {
            if ($('#daterangepicker').length == 0) {
                return;
            }

            var picker = $('#daterangepicker');
            var starts = moment();
            var start = moment('{{$startDate}}');
            var end = moment('{{$endDate}}');
            function cb(start, end) {
                var title = '';
                var range = '';
                if (start.date() == moment().date()) {
                    title = 'Today:';
                    range = start.format('MMM D');
                } else if (start.date() == moment().subtract(1, 'days').date()) {
                    title = 'Yesterday:';
                    range = start.format('MMM D');
                } else {
                    range = start.format('D MMM YY') + ' - ' + end.format('D MMM YY');
                }
                picker.find('.kt-subheader__btn-daterange-date').html(range);
                picker.find('.kt-subheader__btn-daterange-title').html(title);
                reloadData(start,end);
            }
            function reloadData(start,end){
                if(isFirstTime){
                    isFirstTime = false;
                    return;
                }
                var startDate = start.format('YYYY-MM-DD');
                var endDate = end.format('YYYY-MM-DD');
                window.location.href = base_url+window.location.pathname + '?startDate='+startDate+'&endDate='+endDate;
                mApp.blockPage({
                    overlayColor: '#000000',
                    type: 'loader',
                    state: 'primary',
                    message: 'Processing...'
                });
            }
            picker.daterangepicker({
                locale: {
                    format: 'DD/MM/YYYY'
                },
                // direction: mUtil.isRTL(),
                startDate: start,
                endDate: end,
                opens: 'left',
                ranges: {
                    'Today': [moment(), moment()],
                    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
                    'This Year': [moment().startOf('year'), moment().endOf('year')],
                    'Last Year': [moment().subtract(364, 'days'), moment()],
                    // 'Last Year': [moment().subtract(1, 'year').startOf('year'), moment().subtract(1, 'year').endOf('year')],
                    'All time': [moment().subtract(30, 'year').startOf('month'), moment().endOf('month')],
                }
            }, cb);

            cb(start, end);
        }
        return {
            init: function() {
                daterangepickerInit();
            }
        };
    }();
/*** End Date Range Filter ***/
</script>
@endsection