@extends('default')

@section('content-wrapper')
        <!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            {{trans('dashboard.dashboard')}}
        </h1>
       {{-- <ol class="breadcrumb">
            <li><a href="#">{{trans('dashboard.dashboard')}}</a></li>
            <li class="active">Here</li>
        </ol>--}}
    </section>

    <!-- Main content -->
    <section class="content">
        <!-- Graph Start-->
        <div class="row">
            <div class="col-md-12">
                {{--<div class="box">
                    <div class="box-header with-border">
                        <h3 class="box-title">Monthly Recap Report</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>
                            <div class="btn-group">
                                <button type="button" class="btn btn-box-tool dropdown-toggle"
                                        data-toggle="dropdown">
                                    <i class="fa fa-wrench"></i></button>
                                <ul class="dropdown-menu" role="menu">
                                    <li><a href="#">Action</a></li>
                                    <li><a href="#">Another action</a></li>
                                    <li><a href="#">Something else here</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">Separated link</a></li>
                                </ul>
                            </div>
                            <button type="button" class="btn btn-box-tool" data-widget="remove"><i
                                        class="fa fa-times"></i></button>
                        </div>
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body">
                        <div class="row">
                            <div class="col-md-8">
                                <p class="text-center">
                                    <strong>Sales: 1 Jan, 2014 - 30 Jul, 2014</strong>
                                </p>

                                <div class="chart">
                                    <!-- Sales Chart Canvas -->
                                    <canvas id="salesChart" style="height: 180px;"></canvas>
                                </div>
                                <!-- /.chart-responsive -->
                            </div>
                            <!-- /.col -->
                            <div class="col-md-4">
                                <p class="text-center">
                                    <strong>Goal Completion</strong>
                                </p>

                                <div class="progress-group">
                                    <span class="progress-text">Add Products to Cart</span>
                                    <span class="progress-number"><b>160</b>/200</span>

                                    <div class="progress sm">
                                        <div class="progress-bar progress-bar-aqua" style="width: 80%"></div>
                                    </div>
                                </div>
                                <!-- /.progress-group -->
                                <div class="progress-group">
                                    <span class="progress-text">Complete Purchase</span>
                                    <span class="progress-number"><b>310</b>/400</span>

                                    <div class="progress sm">
                                        <div class="progress-bar progress-bar-red" style="width: 80%"></div>
                                    </div>
                                </div>
                                <!-- /.progress-group -->
                                <div class="progress-group">
                                    <span class="progress-text">Visit Premium Page</span>
                                    <span class="progress-number"><b>480</b>/800</span>

                                    <div class="progress sm">
                                        <div class="progress-bar progress-bar-green" style="width: 80%"></div>
                                    </div>
                                </div>
                                <!-- /.progress-group -->
                                <div class="progress-group">
                                    <span class="progress-text">Send Inquiries</span>
                                    <span class="progress-number"><b>250</b>/500</span>

                                    <div class="progress sm">
                                        <div class="progress-bar progress-bar-yellow" style="width: 80%"></div>
                                    </div>
                                </div>
                                <!-- /.progress-group -->
                            </div>
                            <!-- /.col -->
                        </div>
                        <!-- /.row -->
                    </div>
                    <!-- ./box-body -->
                    <div class="box-footer">
                        <div class="row">
                            <div class="col-sm-3 col-xs-6">
                                <div class="description-block border-right">
                                    <span class="description-percentage text-green"><i
                                                class="fa fa-caret-up"></i> 17%</span>
                                    <h5 class="description-header">$35,210.43</h5>
                                    <span class="description-text">TOTAL REVENUE</span>
                                </div>
                                <!-- /.description-block -->
                            </div>
                            <!-- /.col -->
                            <div class="col-sm-3 col-xs-6">
                                <div class="description-block border-right">
                                        <span class="description-percentage text-yellow"><i
                                                    class="fa fa-caret-left"></i> 0%</span>
                                    <h5 class="description-header">$10,390.90</h5>
                                    <span class="description-text">TOTAL COST</span>
                                </div>
                                <!-- /.description-block -->
                            </div>
                            <!-- /.col -->
                            <div class="col-sm-3 col-xs-6">
                                <div class="description-block border-right">
                                    <span class="description-percentage text-green"><i
                                                class="fa fa-caret-up"></i> 20%</span>
                                    <h5 class="description-header">$24,813.53</h5>
                                    <span class="description-text">TOTAL PROFIT</span>
                                </div>
                                <!-- /.description-block -->
                            </div>
                            <!-- /.col -->
                            <div class="col-sm-3 col-xs-6">
                                <div class="description-block">
                                    <span class="description-percentage text-red"><i
                                                class="fa fa-caret-down"></i> 18%</span>
                                    <h5 class="description-header">1200</h5>
                                    <span class="description-text">GOAL COMPLETIONS</span>
                                </div>
                                <!-- /.description-block -->
                            </div>
                        </div>
                        <!-- /.row -->
                    </div>
                    <!-- /.box-footer -->
                </div>--}}
                <!-- /.box -->
            </div>
            <!-- /.col -->
        </div>
        <!-- Graph Ends-->
        <!-- Pie charts starts -->
        <div class="row">
            <div class="col-md-6 col-sm-6">
                <div class="box box-solid">
                    <div class="box-header">
                        <h3 class="box-title ">@lang('transaction.todays_entries')</h3>
                        <div class="box-tools pull-right">
                            <span id = "total_entry_gate_count"></span>
                            <button type="button" class="btn btn-box-tool" id="refresh_entry"><i
                                        class="fa fa-refresh"></i>
                            </button>
                            <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>
                    <!-- /.box-header -->
                    <div class="box-body text-center">
                        <div id="entry_piechart" class="pie-chart-dashboard"></div>
                    </div>
                    <!-- /.box-body -->
                </div>
            </div>
            <div class="col-md-6 col-sm-6">
                <div class="box box-solid">
                    <div class="box-header">
                        <h3 class="box-title ">@lang('transaction.todays_exits')</h3>
                        <div class="box-tools pull-right">
                            <span id = "total_exit_gate_count"></span>
                            <button type="button" class="btn btn-box-tool" id="refresh_exit"><i
                                        class="fa fa-refresh"></i>
                            </button>
                            <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>
                    <!-- /.box-header -->
                    <div class="box-body text-center">
                        <div id="exit_piechart" class="pie-chart-dashboard"></div>
                    </div>
                    <!-- /.box-body -->
                </div>
            </div>
        </div>
        <!-- for entry exit vehicle count -->
        <div class="row">
            <div class="col-md-6 col-sm-6">
                <div class="box box-solid">
                    <div class="box-header">
                        <h3 class="box-title ">@lang('transaction.entry_vehicle_type')</h3>
                        <div class="box-tools pull-right">
                            <span id = "total_entry_count"></span>
                            <button type="button" class="btn btn-box-tool" id="entry_vehicle"><i
                                        class="fa fa-refresh"></i>
                            </button>
                            <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>
                    <!-- /.box-header -->
                    <div class="box-body text-center">
                        <div id="entry_vehicle_chart" class="pie-chart-dashboard"></div>
                    </div>
                    <!-- /.box-body -->
                </div>
            </div>
            <div class="col-md-6 col-sm-6">
                <div class="box box-solid">
                    <div class="box-header">
                        <h3 class="box-title ">@lang('transaction.exit_vehicle_type')</h3>
                        <div class="box-tools pull-right">
                            <span id = "total_exit_count"></span>
                            <button type="button" class="btn btn-box-tool" id="exit_vehicle"><i
                                        class="fa fa-refresh"></i>
                            </button>
                            <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>
                    <!-- /.box-header -->
                    <div class="box-body text-center">
                        <div id="exit_vehicle_chart" class="pie-chart-dashboard"></div>
                    </div>
                    <!-- /.box-body -->
                </div>
            </div>
        </div>
        <!-- end -->
        <div class="row">
            <div class="col-md-6 col-sm-6">
                <div class="box box-solid">
                    <div class="box-header">
                        <h3 class="box-title ">Gate Status</h3>
                        <div class="box-tools pull-right">
                            <button type="button" class="btn btn-box-tool" id="refresh_gate_status"><i
                                        class="fa fa-refresh"></i>
                            </button>
                            <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>
                    <!-- /.box-header -->
                    <div class="box-body text-center" id="gate_status_div">
                        <div class="row">
                        </div>
                    </div>
                    <!-- /.box-body -->
                </div>
            </div>

            <div class="col-md-6 col-sm-6">
                <div class="box box-solid">
                    <div class="box-header">
                        <h3 class="box-title ">Today's Shift Status</h3>
                        <div class="box-tools pull-right">
                            <button type="button" class="btn btn-box-tool" id="refresh_shift_status"><i
                                        class="fa fa-refresh"></i>
                            </button>
                            <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>
                    <!-- /.box-header -->
                    <div class="box-body text-center" id="shift_status_div" style="max-height: 357px; overflow-y: scroll">
                        <div class="row">
                        </div>
                    </div>
                    <!-- /.box-body -->
                </div>
            </div>

        </div>
        <!-- Pie charts ends -->

        <!-- Gate monitoring-->
        <div class="row">

            {{--<div class="col-md-6 col-sm-6">
                <div class="box box-solid">
                    <div class="box-header">
                        <h3 class="box-title ">Peak Hour Anaysis</h3>
                        <div class="box-tools pull-right">
                            <button type="button" class="btn btn-box-tool" id="refresh_peak_hour"><i
                                        class="fa fa-refresh"></i>
                            </button>
                            <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>
                    <!-- /.box-header -->
                    <div class="box-body text-center">
                        <div id="peak_hour_piechart" class="pie-chart-dashboard"></div>
                    </div>
                    <!-- /.box-body -->
                </div>
            </div>--}}
        </div>
    </section>    <!-- /.box -->
</div>
<!-- /.col -->
@stop