@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>
        {{--<button id="print-dashboard">Download<i data-lucide="download" strokeWidth="1.8px" class="lucide-icon-w"></i></button>--}}
       {{-- <ol class="breadcrumb">
            <li><a href="#">{{trans('dashboard.dashboard')}}</a></li>
            <li class="active">Here</li>
        </ol>--}}
    </section>

    <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="col-sm-6 col-md-3">
              <div class="card card-stats card-round">
                <div class="card-body">
                  <div class="row align-items-center d-flex">
                    <div class="col-icon">
                      <div class="icon-big text-center icon-primary bubble-shadow-small">
                        <i data-lucide="circle-arrow-down" strokeWidth="1.8px" class="lucide-icon-w"></i>
                      </div>
                    </div>
                    <div class="col col-stats ms-3 ms-sm-0">
                      <div class="numbers">
                        <p class="card-category">Entry Vehicles</p>
                        <h4 class="card-title" id="entry_vehicle_count">0</h4>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-sm-6 col-md-3">
              <div class="card card-stats card-round">
                <div class="card-body">
                  <div class="row align-items-center d-flex">
                    <div class="col-icon">
                      <div class="icon-big text-center icon-info bubble-shadow-small">
                        <i data-lucide="circle-arrow-up" strokeWidth="1.8px" class="lucide-icon-w"></i>
                      </div>
                    </div>
                    <div class="col col-stats ms-3 ms-sm-0">
                      <div class="numbers">
                        <p class="card-category">Exit Vehicles</p>
                        <h4 class="card-title" id="exit_vehicle_count">0</h4>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-sm-6 col-md-3">
              <div class="card card-stats card-round">
                <div class="card-body">
                  <div class="row align-items-center d-flex">
                    <div class="col-icon">
                      <div class="icon-big text-center icon-success bubble-shadow-small">
                        <i data-lucide="ticket-slash" strokeWidth="1.8px" class="lucide-icon-w"></i>
                      </div>
                    </div>
                    <div class="col col-stats ms-3 ms-sm-0">
                      <div class="numbers">
                        <p class="card-category">Parked Vehicles</p>
                        <h4 class="card-title" id="parked_vehicle_count">0</h4>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-sm-6 col-md-3">
              <div class="card card-stats card-round">
                <div class="card-body">
                  <div class="row align-items-center d-flex">
                    <div class="col-icon">
                      <div class="icon-big text-center icon-secondary bubble-shadow-small">
                        <i data-lucide="wallet-cards" strokeWidth="1.8px" class="lucide-icon-w"></i>
                      </div>
                    </div>
                    <div class="col col-stats ms-3 ms-sm-0">
                      <div class="numbers">
                        <p class="card-category">Digital Payment</p>
                        <h4 class="card-title" id="digital_payment_count">0</h4>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
        </div>
        <!-- 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="loader-animation" id="loader1"></div>
                    <div class="box-body text-center">
                        
                        {{-- <div id="entry_piechart" class="pie-chart-dashboard"></div> --}}
                        <canvas id="gateEntryChart" width="500" height="300"></canvas>
                        <div id="entry_piechart" class="pie-chart-dashboard d-flex align-items-center justify-content-center"></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="loader-animation" id="loader2"></div>
                    <div class="box-body text-center">
                        
                        {{-- <div id="exit_piechart" class="pie-chart-dashboard"></div> --}}
                        <canvas id="gateExitChart" width="500" height="300"></canvas>
                        <div id="exit_piechart" class="pie-chart-dashboard d-flex align-items-center justify-content-center"></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="loader-animation" id="loader3"></div>
                    <div class="box-body text-center" id="entrydoughnutChart">
                        
                        {{-- <div id="entry_vehicle_chart" class="pie-chart-dashboard"></div> --}}
                        <canvas id="pieEntryChart" width="200" height="100"></canvas>
                        <div id="entry_vehicle_chart" class="pie-chart-dashboard d-flex align-items-center justify-content-center"></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="loader-animation" id="loader4"></div>
                    <div class="box-body text-center" id="exitdoughnutChart">
                        
                        {{-- <div id="exit_vehicle_chart" class="pie-chart-dashboard"></div> --}}
                        <canvas id="pieExitChart" width="400" height="200"></canvas>
                        <div id="exit_vehicle_chart" class="pie-chart-dashboard d-flex align-items-center justify-content-center"></div>
                    </div>
                    <!-- /.box-body -->
                </div>
            </div>
        </div>
        <!-- end -->
        <!-- Digital Payments-->
        <div class="row">
            <div class="col-md-6 col-sm-6">
                <div class="box box-solid">
                    <div class="box-header">
                        <h3 class="box-title ">Digital Payment</h3>
                        <div class="box-tools pull-right">
                            {{-- <span id = "digital_payment_count"></span> --}}
                            <button type="button" class="btn btn-box-tool" id="refresh_digital"><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="loader-animation" id="loader5"></div>
                    <div class="box-body text-center" id="entrydoughnutChart">
                        
                        {{-- <div id="entry_vehicle_chart" class="pie-chart-dashboard"></div> --}}
                        <canvas id="digitalPaymentChart" width="500" height="300"></canvas>
                        <div id="digital_payment_chart" class="d-fex align-items-center justify-content-center"></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 ">Dwell Time</h3>
                        <div class="box-tools pull-right">
                            <span id = "dwellTimeReport_count"></span>
                            <button type="button" class="btn btn-box-tool" id="refresh_dwell"><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="loader-animation" id="loader6"></div>
                    <div class="box-body text-center" id="dwellTimeReportChart">
                        <canvas id="bardwellTimeReport" width="400" height="200"></canvas>
                        <div id="dwellTimeReport_chart" class="pie-chart-dashboard d-flex align-items-center justify-content-center"></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 ">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>
        <!-- Digital Payments-->
        <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
@section('page-js')
    <script>
        check_first_time_login()

        function check_first_time_login() {

            $.ajax({
                url: base_url + '/admin/check_first_time_login',
                type: 'GET',
                dataType: "json",
                success: function (resp) {
                    if (resp.success <= '1') {
                        $('#sps_modal').find('.modal-content').html(resp.html);
                        $('#sps_modal').modal({backdrop: 'static', keyboard: false});
                    }
                }
            });
        }
    </script>
@endsection