{{-- {{ dd( trans_url('/'))}} --}}
<div class="content-wrapper">
    <section class="content-header">
        <h1>
            {!! trans('cms.dashboard') !!}
            <small>{!! trans('cms.version') !!}</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="/admin"><i class="fa fa-dashboard"></i> {!! trans('cms.home') !!}</a></li>
            <li class="active">{!! trans('cms.dashboard') !!}</li>
        </ol>
    </section>
    <section class="content">
        <div class="row">
            <div class="col-md-3 col-sm-6 col-xs-12">
                <div class="info-box">
                    <span class="info-box-icon bg-aqua"><i class="fa fa-money"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text"><a href="{!! trans_url('admin/assets/asset') !!}"
                                style="color:#333;">Assets</a></span>
                        <span class="info-box-number">{!! Assets::count() !!}</span>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6 col-xs-12">
                <div class="info-box">
                    <span class="info-box-icon bg-red"><i class="fa fa-file-text"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text"><a href="{!! trans_url('admin/document/document') !!}"
                                style="color:#333;">Documents</a></span>
                        <span class="info-box-number">{!! Document::count() !!}</span>
                    </div>
                </div>
            </div>
            <div class="clearfix visible-sm-block"></div>
            <div class="col-md-3 col-sm-6 col-xs-12">
                <div class="info-box">
                    <span class="info-box-icon bg-green"><i class="fa fa-building-o"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text"><a href="{!! trans_url('admin/company/company') !!}"
                                style="color:#333;">Company</a></span>
                        <span class="info-box-number">{!! Company::count('company') !!}</span>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6 col-xs-12">
                <div class="info-box">
                    <span class="info-box-icon bg-yellow"><i class="fa fa-users"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text"><a href="{!! trans_url('admin/company/employee') !!}"
                                style="color:#333;">Employees</a></span>
                        <span class="info-box-number">{!! Company::count('employee') !!}</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div id="service_request"
                    style="min-width: 400px; height: 250px; border:1px solid #3C8DBC;  margin: 10px auto;position:relative;">
                </div>
                </td>

            </div>
            <div class="col-md-6">
                <div id="work_order"
                    style="min-width: 400px; height: 250px; border:1px solid #3C8DBC;  margin: 10px auto;position:relative;">
                </div>
                </td>

            </div>
        </div>
        <div class="row" style="min-width: 400px; ">
            <div class="col-md-4">
                <div class="box box-info">
                    <div class="box-header with-border">
                        <h3 class="box-title"><a href="{!! trans_url('admin/service_request/service_request') !!}" style="color:#333;">Service Request</a>
                        </h3>
                        <div class="box-tools pull-right">
                            <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                            <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                        </div>
                    </div>
                    <div class="box-body with-border">
                        {!! ServiceRequest::gadget('admin.service_request.gadget', 4) !!}
                    </div>
                    <div class="box-footer clearfix">
                        <a href="{!! trans_url('admin/service_request/service_request') !!}"
                            class="btn btn-sm btn-info btn-flat new-client pull-right">View All ServiceRequest</a>
                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <div class="box box-info">
                    <div class="box-header with-border">
                        <h3 class="box-title">Work Order</h3>
                        <div class="box-tools pull-right">
                            <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                            <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                        </div>
                    </div>
                    <div class="box-body with-border">
                        {!! WorkOrder::gadget('admin.work_order.gadget', 10) !!}
                    </div>
                    <div class="box-footer clearfix">
                        <a href="{!! trans_url('admin/work_order/report') !!}"
                            class="btn btn-sm btn-info btn-flat new-client pull-right">View All WorkOrder</a>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="box box-info">
                    <div class="box-header with-border">
                        <h3 class="box-title">Inspection</h3>
                        <div class="box-tools pull-right">
                            <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                            <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                        </div>
                    </div>
                    <div class="box-body with-border">
                        {!! Assets::gadgets('admin.asset.gadgets', 4) !!}
                    </div>
                    <div class="box-footer clearfix">
                        <a href="{!! trans_url('admin/assets/asset/report') !!}"
                            class="btn btn-sm btn-info btn-flat new-client pull-right">View All Assets Inspection</a>
                    </div>
                </div>
            </div>




            <div class="col-md-7" style="clear: both">
                <div class="box box-info">
                    <div class="box-header with-border">
                        <h3 class="box-title">Calender</h3>
                        <div class="box-tools pull-right">
                            <button class="btn btn-box-tool" data-widget="collapse"><i
                                    class="fa fa-minus"></i></button>
                            <button class="btn btn-box-tool" data-widget="remove"><i
                                    class="fa fa-times"></i></button>
                        </div>
                    </div>
                    <div class="box-body">
                        {!! Calendar::gadget('admin.calendar.gadget') !!}
                    </div>
                    <div class="box-footer clearfix">
                        <a href="{!! trans_url('admin/calendar/calendar') !!}"
                            class="btn btn-sm btn-info btn-flat new-client pull-right">View All Events</a>
                    </div>
                </div>
            </div>

            {{-- <div class="col-md-5">
                <div class="box box-info">
                    <div class="box-header with-border">
                        <h3 class="box-title">Tasks</h3>
                        <div class="box-tools pull-right">
                            <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                            <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                        </div>
                    </div>
                    <div class="box-body with-border">
                        {!!Task::gadget('admin.task.gadget')!!}
                    </div>
                    <div class="box-footer clearfix">
                        <a href="{!! trans_url('admin/task/task') !!}" class="btn btn-sm btn-info btn-flat new-client pull-right">View All Tasks</a>
                    </div>
                </div>
            </div>             --}}
        </div>



    </section>
</div>
<script type="text/javascript">
    var chart = new Highcharts.Chart({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            renderTo: 'service_request',
            type: 'pie'
        },
        credits: {
            enabled: false
        },
        title: {
            text: 'Service Requests Pending'
        },
        tooltip: {
            pointFormat: '{series.name} is: <b>{point.y:.0f}</b> out of total: {point.total}'
        },
        accessibility: {
            point: {
                valueSuffix: '%'
            }
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    shadow: true,
                    // distance: -17,
                    enabled: true,
                    format: '{point.name} {point.y: .0f}',
                    useHTML: true
                },
                showInLegend: true
            }
        },
        series: [{
            name: 'Pending Requests',
            colorByPoint: true,
            data: []
        }]
    });

    var chart2 = new Highcharts.Chart({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            renderTo: 'work_order',
            type: 'pie'
        },
        credits: {
            enabled: false
        },
        title: {
            text: 'Work Orders Pending'
        },

        tooltip: {
            pointFormat: '{series.name} is : <b>{point.y:.0f}</b> out of total: {point.total}'
        },
        accessibility: {
            point: {
                valueSuffix: '%'
            }
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    shadow: true,
                    // distance: -17,
                    enabled: true,
                    format: '{point.name} {point.y: .0f}',
                    useHTML: true
                },
                showInLegend: true
            }
        },
        series: [{
            name: 'Pending Orders',
            colorByPoint: true,
            data: [

            ]
        }]
    });

    function plotGraph(url, chart) {

        var label = new Array();
        var dataA = new Array();
        var dataB = new Array();
        var dataC = new Array();
        var dataD = new Array();
        var dataE = new Array();
        var dataF = new Array();
        // var dataG = new Array();
        var html = '';
        var color = '';
        var count = 0;

        $.getJSON(url, function(seriesData) {
            // label.push(key.labels);

            // val=seriesData.one.due_from;
            dataA.push(seriesData);



            if (seriesData.two) {
                //  dataA.push(Number(seriesData.two.due_from));
                //  chart.series[1].setData(dataB, true);

            }
            if (seriesData.week) {
                //  dataA.push(Number(seriesData.week.due_from));
                //  chart.series[2].setData(dataC, true);

            }
            if (seriesData.half_month) {
                //  dataA.push(Number(seriesData.half_month.due_from));
                //  chart.series[3].setData(dataD, true);

            }
            if (seriesData.month) {
                //  dataA.push(Number(seriesData.month.due_from));
                //  chart.series[4].setData(dataE, true);

            }
            if (seriesData.total) {
                //  dataA.push(Number(seriesData.total.due_from));
                //  chart.series[5].setData(dataF, true);

            }



            var obj = seriesData;
            var result = Object.keys(obj).map((key) => [key, obj[key]]);

            chart.series[0].setData(result, true);

            //  chart.xAxis[0].setCategories(label);
            // chart.series[6].setData(dataG, true);
            chart.redraw();
            chart.hideLoading();
        });
    }
    // plotGraph('http://localhost/assetn/public/admin/service_request/report/pending?callback=&_=1613740648838',chart);

    plotGraph("{{ trans_url('/admin/service_request/report/pending') }}" + '', chart);
    plotGraph("{{ trans_url('admin/work_order/report/pending') }}" + '', chart2);
</script>