@extends('backend.layouts.master')
@section('title','Dahboard')
@push('css')

@endpush
<!-- page content -->
@section('content')
    <div class="right_col" role="main">
        @if(Session::has('success_message'))
            <div class="alert alert-success">
                {{ Session::get('success_message') }}
            </div>
        @endif
        @if(Session::has('error_message'))
            <div class="alert alert-danger">
                {{ Session::get('error_message') }}
            </div>
        @endif
        <!-- top tiles -->
        <div class="row tile_count" style="font-size: x-large;">
            
            <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
                <div class="info-box blue-bg bg-success" style="text-align: center">
                    <i class="fa fa-user"></i>
                    <div class="count">
                        {{$suppliers}}
                    </div>
                    <div class="title">Total Suppliers</div>
                </div>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
                <div class="info-box blue-bg bg-success" style="text-align: center">
                    <i class="fa fa-money"></i>
                    <div class="count">
                        {{$purchases}}
                    </div>
                    <div class="title">Total Chalan</div>
                </div>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
                <div class="info-box brown-bg bg-primary" style="text-align: center;">
                    <i class="fa fa-user"></i>
                    <div class="count">
                    {{$customers}}
                    </div>
                    <div class="title">Total Customer</div>
                </div><!--/.info-box-->
            </div><!--/.col-->
            <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
                <div class="info-box dark-bg bg-primary" style="text-align: center;">
                    <i class="fa fa-balance-scale"></i>
                    <div class="count">
                    {{$invoice}}
                    </div>
                    <div class="title">Total Invoices</div>
                </div><!--/.info-box-->
            </div>
            
        </div>
        <div class="row tile_count" style="font-size: x-large;">
            <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
                <div class="info-box dark-bg bg-green" style="text-align: center;">
                    <i class="fa fa-product-hunt"></i>
                    <div class="count">{{$products}}</div>
                    <div class="title">Total Product</div>
                </div><!--/.info-box-->
            </div><!--/.col-->
            <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
                <div class="info-box dark-bg bg-red" style="text-align: center;">
                    <i class="fa fa-dollar"></i>
                    <div class="count">
                        {{$sales_due}}
                    </div>
                    <div class="title">Total Dues</div>
                </div>
            </div>
            <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
              <span class="count_top"><i class="fa fa-user"></i> Yesterday Due: {{$dues['yesterday_due']}}</span>
              <div class="count">{{$sales_due}}</div>
              <span class="count_bottom"><i class="green">4% </i> Todays Due {{$dues['today_due']}}</span>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
                <div class="info-box dark-bg bg-info" style="text-align: center;">
                    <i class="fa fa-eraser"></i>
                    <div class="count">
                        {{$expenses}}
                    </div>
                    <div class="title">Total Expense</div>
                </div>
            </div>
        </div>
        
        <!-- /top tiles -->
        <br/>
        <div class="row">
            <div class="col-md-12 col-sm-12 col-xs-12">
            <div class="dashboard_graph x_panel">
                <div class="row x_title">
                <div class="col-md-6">
                    <h3>Sales Report</h3>
                </div>
                <div class="col-md-6">
                    <!-- <div id="reportrange" class="pull-right" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc">
                        <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
                        <span>December 30, 2014 - January 28, 2015</span> <b class="caret"></b>
                    </div> -->
                </div>
                </div>
                <div class="x_content">
                <div class="demo-container" style="height:250px">
                    <div id="chart_plot_03" class="demo-placeholder"></div>
                </div>
                </div>
            </div>
            </div>
        </div>
    </div>
    <!-- /page content -->
@endsection

@push('js')
 <!-- Flot -->
    <script src="{{asset('backend/vendors/Flot/jquery.flot.js')}}"></script>
    <script src="{{asset('backend/vendors/Flot/jquery.flot.pie.js')}}"></script>
    <script src="{{asset('backend/vendors/Flot/jquery.flot.time.js')}}"></script>
    <script src="{{asset('backend/vendors/Flot/jquery.flot.stack.js')}}"></script>
    <script src="{{asset('backend/vendors/Flot/jquery.flot.resize.js')}}"></script>
    <!-- Flot plugins -->
    <script src="{{asset('backend/vendors/flot.orderbars/js/jquery.flot.orderBars.js')}}"></script>
    <script src="{{asset('backend/vendors/flot-spline/js/jquery.flot.spline.min.js')}}"></script>
    <script src="{{asset('backend/vendors/flot.curvedlines/curvedLines.js')}}"></script>
    <!-- DateJS -->
    <script src="{{asset('backend/vendors/DateJS/build/date.js')}}"></script>
    <script>
      $(document).ready(function(){
        var data = '<?php echo $slr; ?>'
        var chart_plot_03_data = JSON.parse(data)
        /*var chart_plot_03_data = [
			[1, 9343],
			[2, 6610],
			[3, 14520],
			[4, 2285],
			[5, 97],
			[6, 6],
			[7, 1880],
			[8, 7],
			[9, 11],
			[10, 35],
			[11, 7058],
			[12, 12],
			[13, 528563],
			[14, 32],
			[15, 14],
			[16, 928],
			[17, 19],
			[18, 90],
			[19, 40],
			[20, 90],
			[21, 19],
			[22, 11],
			[23, 97],
			[24, 9],
		];*/
        //console.log(chart_plot_03_data)

        var chart_plot_03_settings = {
			series: {
				curvedLines: {
					apply: true,
					active: true,
					monotonicFit: true
				}
			},
			colors: ["#26B99A"],
			grid: {
				borderWidth: {
					top: 0,
					right: 0,
					bottom: 1,
					left: 1
				},
				borderColor: {
					bottom: "#7F8790",
					left: "#7F8790"
				}
			}
		};

        if ($("#chart_plot_03").length){
			//console.log('Plot3');


			$.plot($("#chart_plot_03"), [{
				label: "Sales",
				data: chart_plot_03_data,

				lines: {
					fillColor: "rgba(150, 202, 89, 0.12)"
				},
				points: {
					fillColor: "#fff"
				}
			}], chart_plot_03_settings);

		};
    })

  </script>
@endpush