@extends('layouts.admin')
@section('content')
        <!--左侧菜单栏-->
<aside class="main-sidebar">
    <!-- sidebar: style can be found in sidebar.less -->
    <section class="sidebar">
        <!-- Sidebar user panel -->
        <div class="user-panel">
            <div class="pull-left image">
                @if($user->thumb == ' '||$user->thumb==null)
                    <img src="{{asset('img/arr.jpg')}}" class="img-circle" alt="User Image">
                @else
                    <img src="{{asset($user->thumb)}}" class="img-circle" alt="User Image">
                @endif
            </div>
            <div class="pull-left info">
                <p>{{ $role->display_name }}</p>
                <a href="#"><i class="fa fa-circle text-success"></i> 在线</a>
            </div>
        </div>
        <!-- search form -->
        <form action="{{ url('/search') }}" method="get" class="sidebar-form">
            <div class="input-group">
                <input type="text" name="search" class="form-control" placeholder="Search...">
              <span class="input-group-btn">
                <button type="submit"   id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i>
                </button>
              </span>
            </div>
        </form>
        <!-- /.search form -->
        <!-- sidebar menu: : style can be found in sidebar.less -->
        <ul class="sidebar-menu">
            <li class="header">菜单栏</li>
            <li class="treeview">
                <a href="{{ url('/') }}">
                    <i class="fa fa-home"></i>
                    <span>信息汇总</span>
                </a>
            </li>
            <li class="treeview">
                <a href="#">
                    <i class="fa fa-files-o"></i>
                    <span>项目申请</span>
                    <i class="fa fa-angle-left pull-right"></i>
                </a>
                <ul class="treeview-menu">
                    <li><a href="{{ url('/table') }}"><i class="fa  fa-file-text-o"></i>受理案件
                            <i class="fa fa-angle-left pull-right"></i></a>
                        <ul class="treeview-menu">
                            <li><a href="{{ url('/table/1') }}"><i class="fa fa-circle-o"></i>安置单(货币化安置)</a></li>
                            <li><a href="{{ url('/table/2') }}"><i class="fa fa-circle-o"></i>违章建筑自行拆除费用申领表</a></li>
                            <li><a href="{{ url('/table/3') }}"><i class="fa fa-circle-o"></i>残疾人房征补贴审批确认单</a></li>
                            <li><a href="{{ url('/table/4') }}"><i class="fa fa-circle-o"></i>房屋征收提前搬迁奖励单</a></li>
                            <li><a href="{{ url('/table/5') }}"><i class="fa fa-circle-o"></i>逾期过渡安置补助费发放单</a></li>
                            <li><a href="{{ url('/table/6') }}"><i class="fa fa-circle-o"></i>房屋征收安置补贴单</a></li>
                            <li><a href="{{ url('/table/7') }}"><i class="fa fa-circle-o"></i>核算单（货币化安置）</a></li>
                            <li><a href="{{ url('/table/8') }}"><i class="fa fa-circle-o"></i>核算单（产权调换）</a></li>
                            <li><a href="{{ url('/table/9') }}"><i class="fa fa-circle-o"></i>核算单（货币补偿）</a></li>
                        </ul>
                    </li>
                    <li><a href="{{ url('/on_table') }}"><i class="fa fa-circle-o"></i>待办案件</a></li>
                </ul>
            </li>
            <li class="treeview">
                <a href="{{ url('/search/show') }}">
                    <i class="fa  fa-search"></i>
                    <span>案件追踪</span>
                </a>
            </li>
            <li class="treeview">
                <a href="#">
                    <i class="fa fa-cogs"></i>
                    <span>系统设置</span>
                    <i class="fa fa-angle-left pull-right"></i>
                </a>
                <ul class="treeview-menu">
                    <li><a href="{{ url('/user_list') }}">
                            <i class="fa fa-circle-o"></i>
                            <span>用户管理</span></a>
                    </li>
                    <li><a href="{{ url('/job') }}">
                            <i class="fa fa-circle-o"></i>
                            <span>职位管理</span>
                        </a>
                    </li>
                    <li><a href="{{ url('/project') }}">
                            <i class="fa fa-circle-o"></i>
                            <span>项目管理</span>
                        </a>
                    </li>
                    <li><a href="{{ url('/department') }}">
                            <i class="fa fa-circle-o"></i>
                            <span>机构管理</span>
                        </a>
                    </li>
                </ul>
            </li>
        </ul>
    </section>
    <!-- /.sidebar -->
</aside>
<!-- =============================================== -->
<!-- 内容 -->
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            表单统计
            <small>{{ $table_name }}</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="{{ url('/')}}"><i class="fa fa-dashboard"></i> 主页</a></li>
            <li><a href="#">表单统计</a></li>
        </ol>
    </section>
    <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="col-md-12">
                <div class="box box-primary">
                    <div class="box-header with-border">
                        <h3 class="box-title">数据统计</h3>
                    </div>
                    <div class="box-body">
                        <div class="dataTables_wrapper form-inline dt-bootstrap">
                            <table id="example2" class="table table-hover dataTable" role="grid" aria-describedby="example2_info">
                                <thead>
                                <tr role="row">
                                    @foreach($th as $h)
                                        <th>{{ $h }}</th>
                                    @endforeach
                                </tr>
                                </thead>
                                <tbody>
                                <tr role="row" class="odd">
                                    @foreach($td as $d)
                                        <td>{{ $d }}</td>
                                    @endforeach
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    {{-- /.boc-body--}}
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <!-- Default box -->
                <div class="box box-danger">
                    <div class="box-header with-border">
                        <h3 class="box-title">饼状图统计</h3>

                        <div class="box-tools pull-right">
                            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                            </button>
                            <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                        </div>
                    </div>
                    <div class="box-body">
                        <canvas id="pieChart" style="height: 130px; width: 261px;" width="261" height="130"></canvas>
                    </div>
                    <!-- /.box-body -->
                </div>
            </div>
            <div class="col-md-6">
            </div>
        </div>
    </section>
    <!-- /.content -->
</div>
<!-- /.content-wrapper -->

<script src="{{ asset('js/Chart.min.js') }}"></script>
<script>
    //-------------
    //- PIE CHART -
    //-------------
    // Get context with jQuery - using jQuery's .get() method.
    var pieChartCanvas = $("#pieChart").get(0).getContext("2d");
    var pieChartCanvas = $("#pieChart").get(0).getContext("2d");
    var pieChart = new Chart(pieChartCanvas);
    var PieData = [
        {
            value: 700,
            color: "#f56954",
            highlight: "#f56954",
            label: "Chrome"
        },
        {
            value: 500,
            color: "#00a65a",
            highlight: "#00a65a",
            label: "IE"
        },
        {
            value: 400,
            color: "#f39c12",
            highlight: "#f39c12",
            label: "FireFox"
        },
        {
            value: 600,
            color: "#00c0ef",
            highlight: "#00c0ef",
            label: "Safari"
        },
        {
            value: 300,
            color: "#3c8dbc",
            highlight: "#3c8dbc",
            label: "Opera"
        },
        {
            value: 100,
            color: "#d2d6de",
            highlight: "#d2d6de",
            label: "Navigator"
        }
    ];
    var pieOptions = {
        //Boolean - Whether we should show a stroke on each segment
        segmentShowStroke: true,
        //String - The colour of each segment stroke
        segmentStrokeColor: "#fff",
        //Number - The width of each segment stroke
        segmentStrokeWidth: 2,
        //Number - The percentage of the chart that we cut out of the middle
        percentageInnerCutout: 50, // This is 0 for Pie charts
        //Number - Amount of animation steps
        animationSteps: 100,
        //String - Animation easing effect
        animationEasing: "easeOutBounce",
        //Boolean - Whether we animate the rotation of the Doughnut
        animateRotate: true,
        //Boolean - Whether we animate scaling the Doughnut from the centre
        animateScale: false,
        //Boolean - whether to make the chart responsive to window resizing
        responsive: true,
        // Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
        maintainAspectRatio: true,
        //String - A legend template
        legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"
    };
    //Create pie or douhnut chart
    // You can switch between pie and douhnut using the method below.
    pieChart.Doughnut(PieData, pieOptions);

</script>
@endsection