@extends('admin.includes.base')
@push('styles')
<style id="compiled-css" type="text/css">
    .highcharts-figure,
.highcharts-data-table table {
    min-width: 310px;
    max-width: 800px;
    margin: 1em auto;
}

#container {
    height: 400px;
}

.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid #ebebeb;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}

.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}

.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
    padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}

.highcharts-data-table tr:hover {
    background: #f1f7ff;
}

#weeksales-bar .ct-series-a .ct-bar {
    stroke: rgba(51,61,82,1);
}
    /* EOS */
	.count
	{
	/*font-weight:bold;*/
	color:#343a40;
	font-size:22px;
	}
	
	.text-muted
	{
	color:#343a40!important;
	}
	svg:not(:root) {
    overflow: inherit;
}
.ct-label
{
	fill: rgba(51,61,82,1);
    color: rgba(51,61,82,1);
    font-size: .75rem;
    line-height: 1;
}
  </style>
@endpush
@section('content')
<div class="page-wrapper">
  <div class="page-breadcrumb">
    <div class="row">
      <div class="col-sm-12 col-md-5 align-self-center">
        <div class="d-flex align-items-center">
          <div>
            <h3 class="m-b-0"><i class="icon-Dashboard"></i> Welcome back!</h3>
            <span>{{ date('l, d F Y') }}</span> </div>
        </div>
      </div>
      <div class="col-sm-12 col-md-7 align-self-center">
        <div class="d-flex no-block justify-content-end align-items-center">
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
              <li class="breadcrumb-item"> <a href="{{ url('admin/home') }}">Home</a> </li>
              <li class="breadcrumb-item active" aria-current="page">Dashboard</li>
            </ol>
          </nav>
        </div>
      </div>
    </div>
  </div>
  
  
  <!--<div class="container-fluid">
                
                
                <div class="row">
                    <div class="col-lg-3 col-md-6">
                        <div class="card">
                            <div class="card-body">
                                <h4 class="text-center">Unique Visit</h4>
                                <div class="gaugejs-box">
                                    <canvas id="foo" class="gaugejs">guage</canvas>
                                </div>
                            </div>
                            <div class="box b-t text-center">
                                <h4 class="font-medium m-b-0">12456</h4></div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6">
                        <div class="card">
                            <div class="card-body">
                                <h4 class="text-center">Total Visit</h4>
                                <div class="gaugejs-box">
                                    <canvas id="foo2" class="gaugejs">guage</canvas>
                                </div>
                            </div>
                            <div class="box b-t text-center">
                                <h4 class="font-medium m-b-0">$12456</h4></div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6">
                        <div class="card">
                            <div class="card-body">
                                <h4 class="text-center">Bounce rate</h4>
                                <div class="gaugejs-box">
                                    <canvas id="foo3" class="gaugejs">guage</canvas>
                                </div>
                            </div>
                            <div class="box b-t text-center">
                                <h4 class="font-medium m-b-0">$12456</h4></div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6">
                        <div class="card">
                            <div class="card-body">
                                <h4 class="text-center">Page Views</h4>
                                <div class="gaugejs-box">
                                    <canvas id="foo4" class="gaugejs">guage</canvas>
                                </div>
                            </div>
                            <div class="box b-t text-center">
                                <h4 class="font-medium m-b-0">$12456</h4></div>
                        </div>
                    </div>
                </div>
                
                <div class="row" style="visibility:hidden;">
                    <div class="col-12">
                        <div class="card">
                            <div class="row">
                                <div class="col-lg-9 col-md-7">
                                    <div class="card-body">
                                        <h4 class="card-title">Realtime Data of visits</h4>
                                        <h5 class="card-subtitle">Mon 05 Mar 2017</h5>
                                        <div class="demo-container m-t-20" style="width:100%; height:400px;">
                                            <div id="placeholder" class="flot-chart-content" style="width:100%; height:400px;">                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-3 col-md-5 border-left p-l-0">
                                    <div class="text-center m-t-30 m-b-40 p-t-20 p-b-20">
                                        <font class="display-3">25</font>
                                        <h6 class="text-muted">Active Users</h6>
                                        <button type="button" class="btn btn-success">View Details</button>
                                    </div>
                                    <hr>
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col p-r-0">
                                                <h1 class="font-light">15</h1>
                                                <h6 class="text-muted">Using Desktop</h6></div>
                                            <div class="col text-right align-self-center">
                                                <div data-label="20%" class="css-bar m-b-0 css-bar-primary css-bar-20"><i class="mdi mdi-desktop-mac"></i></div>
                                            </div>
                                        </div>
                                    </div>
                                    <hr>
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col p-r-0">
                                                <h1 class="font-light">10</h1>
                                                <h6 class="text-muted">Using Mobile</h6></div>
                                            <div class="col text-right align-self-center">
                                                <div data-label="20%" class="css-bar m-b-0 css-bar-danger css-bar-20"><i class="mdi mdi-cellphone-iphone"></i></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
            </div>-->
			
			<div class="container-fluid">
  @if(Auth::guard('admin')->user()->utype=='Super' || Auth::guard('admin')->user()->utype=='Admin' || Auth::guard('admin')->user()->utype=='Treasury')
  
    <div class="row">
      <!-- Column -->
      <div class="col-sm-12 col-md-6">
        <div class="card">
          <div class="card-body">
            <div class="d-flex flex-row">
              <div class="round align-self-center round-success"><i class="ti-wallet"></i></div>
              <div class="m-l-10 align-self-center">
                <h4 class="m-b-0">Total Users</h4>
                <span class="text-muted">staff, treasury and admins</span> </div>
              <div class="ml-auto align-self-center">
                <h4 class="font-medium m-b-0 count">{{ $total_admins }}</h4>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Column -->
      <!-- Column -->
      <div class="col-sm-12 col-md-6">
        <div class="card">
          <div class="card-body">
            <div class="d-flex flex-row">
              <div class="round align-self-center round-info"><i class="ti-user"></i></div>
              <div class="m-l-10 align-self-center">
                <h4 class="m-b-0">Open Batch</h4>
                <span class="text-muted">Batches which are currently open</span> </div>
              <div class="ml-auto align-self-center">
                <h4 class="font-medium m-b-0 count">{{ $total_batches }}</h4>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Column -->
      <!-- Column -->
      <div class="col-sm-12 col-md-6">
        <div class="card">
          <div class="card-body">
            <div class="d-flex flex-row">
              <div class="round align-self-center round-danger"><i class="ti-calendar"></i></div>
              <div class="m-l-10 align-self-center">
                <h4 class="m-b-0">Total Amount</h4>
                <span class="text-muted">Donation amount till now</span> </div>
              <div class="ml-auto align-self-center">
                <h4 class="font-medium m-b-0" style="display:inline-flex;">$ <span class="count">{{ $total_amount }}</span></h4>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Column -->
      <!-- Column -->
      <div class="col-sm-12 col-md-6">
        <div class="card">
          <div class="card-body">
            <div class="d-flex flex-row">
              <div class="round align-self-center round-warning"><i class="ti-settings"></i></div>
              <div class="m-l-10 align-self-center">
                <h4 class="m-b-0">Total Receipts</h4>
                <span class="text-muted">Number of donation receipts till now</span> </div>
              <div class="ml-auto align-self-center">
                <h4 class="font-medium m-b-0 count">{{ $total_receipts }}</h4>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Column -->
    </div>
	<div class="row">
	<div class="col-sm-12 col-md-8">
	<div id="chartt"></div>
	</div>
	<div class="col-sm-12 col-md-4">
	<div class="col-md-12">
                        <div class="card">
                            <div class="card-body bg-light-warning text-white">
                                <div id="weeksales-bar" class="position-relative" style="height: 270px"></div>
                            </div>
                            <div class="card-body">
                                <div class="d-flex align-items-center">

                                    <div>
                                        <span class="btn-circle btn-lg btn btn-outline-secondary">
                                            <i class="ti-money"></i>
                                        </span>
                                    </div>
                                    <div class="m-l-10">
                                        <h4 class="m-b-0">Donations (week wise)</h4>
                                        <h6 class="font-light m-b-0">{{ date('F Y') }}</h6>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
	</div>
	</div>
	@else
	<div class="row">
	<div class="col-sm-12 col-md-8">
	@include('admin.receipt.partials.newReceipt')
	</div>
	<div class="col-sm-12 col-md-4">
	<!-- Column -->
      <div class="col-sm-12 col-md-12">
        <div class="card">
          <div class="card-body">
            <div class="d-flex flex-row">
              <div class="round align-self-center round-success"><i class="ti-wallet"></i></div>
              <div class="m-l-10 align-self-center">
                <h4 class="m-b-0">Weekly Amount</h4>
                <span class="text-muted">Weekly total amount</span> </div>
              <div class="ml-auto align-self-center">
                <h4 class="font-medium m-b-0" style="display:inline-flex;">$ <span class="count">{{ $weekly_amount }}</span></h4>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Column -->
      <!-- Column -->
      <!--<div class="col-sm-12 col-md-12">
        <div class="card">
          <div class="card-body">
            <div class="d-flex flex-row">
              <div class="round align-self-center round-info"><i class="ti-user"></i></div>
              <div class="m-l-10 align-self-center">
                <h4 class="m-b-0">Total Donors</h4>
                <span class="text-muted">Donors</span> </div>
              <div class="ml-auto align-self-center">
                <h4 class="font-medium m-b-0">{{ $total_donors }}</h4>
              </div>
            </div>
          </div>
        </div>
      </div>-->
      <!-- Column -->
      <!-- Column -->
      <div class="col-sm-12 col-md-12">
        <div class="card">
          <div class="card-body">
            <div class="d-flex flex-row">
              <div class="round align-self-center round-danger"><i class="ti-calendar"></i></div>
              <div class="m-l-10 align-self-center">
                <h4 class="m-b-0">Total Amount</h4>
                <span class="text-muted">Amount</span> </div>
              <div class="ml-auto align-self-center">
                <h4 class="font-medium m-b-0" style="display:inline-flex;">$ <span class="count">{{ $total_amount }}</span></h4>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Column -->
      <!-- Column -->
      <div class="col-sm-12 col-md-12">
        <div class="card">
          <div class="card-body">
            <div class="d-flex flex-row">
              <div class="round align-self-center round-warning"><i class="ti-settings"></i></div>
              <div class="m-l-10 align-self-center">
                <h4 class="m-b-0">Total Receipts</h4>
                <span class="text-muted">Receipts</span> </div>
              <div class="ml-auto align-self-center">
                <h4 class="font-medium m-b-0"><span class="count">{{ $total_receipts }}</span></h4>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Column -->
	  
	  
	  <div class="col-md-12">
                        <div class="card">
                            <div class="card-body bg-light-warning text-white">
                                <div id="weeksales-bar" class="position-relative" style="height: 270px"></div>
                            </div>
                            <div class="card-body">
                                <div class="d-flex align-items-center">

                                    <div>
                                        <span class="btn-circle btn-lg btn btn-outline-secondary">
                                            <i class="ti-money"></i>
                                        </span>
                                    </div>
                                    <div class="m-l-10">
                                        <h4 class="m-b-0">Donations (week wise)</h4>
                                        <h6 class="font-light m-b-0">{{ date('F Y') }}</h6>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
	  
	  
	  
	</div>
      
    </div>
	@endif
  </div>
</div>
</div>
@endsection 

@push('scripts')
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script type="text/javascript">//<![CDATA[


Highcharts.chart('chartt', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Donations of {{ date("Y") }} (month wise)'
    },
    /*subtitle: {
        text: 'Source: WorldClimate.com'
    },*/
    xAxis: {
        categories: [
            'Jan',
            'Feb',
            'Mar',
            'Apr',
            'May',
            'Jun',
            'Jul',
            'Aug',
            'Sep',
            'Oct',
            'Nov',
            'Dec'
        ],
        crosshair: true
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Amount (in CAD)'
        }
    },
    /*tooltip: {
        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true
    },*/
    plotOptions: {
        column: {
            pointPadding: 0.2,
            borderWidth: 0
        }
    },
    series: [{
        name: 'Amount',
        data: [{{ $bar_graph['jan'] }}, {{ $bar_graph['feb'] }}, {{ $bar_graph['mar'] }}, {{ $bar_graph['apr'] }}, {{ $bar_graph['may'] }}, {{ $bar_graph['jun'] }}, {{ $bar_graph['jul'] }}, {{ $bar_graph['aug'] }}, {{ $bar_graph['sep'] }}, {{ $bar_graph['oct'] }}, {{ $bar_graph['nov'] }}, {{ $bar_graph['dec'] }}]

    }]
});
//]]></script>

<script>
$(function() {
// ==============================================================
  // Ct Barchart
  // ==============================================================
  new Chartist.Bar(
    '#weeksales-bar',
    {
      labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
      series: [[{{ $chart_graph['mon'] }}, {{ $chart_graph['tue'] }}, {{ $chart_graph['wed'] }}, {{ $chart_graph['thu'] }}, {{ $chart_graph['fri'] }}, {{ $chart_graph['sat'] }}, {{ $chart_graph['sun'] }}]]
    },
    {
      axisX: {
        showLabel: false,
        showGrid: false
      },

      chartPadding: {
        top: 15,
        left: -25
      },
      axisX: {
        showLabel: true,
        showGrid: true
      },
      axisY: {
        showLabel: true,
        showGrid: true
      },
      fullWidth: true,
      plugins: [Chartist.plugins.tooltip()]
    }
  );
  });
</script>
@endpush