@extends('layouts.master')

@section('title', 'Dashboard')

@section('links')
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
ol, ul, dl {
    margin-top: 19px !important;
}
          
  #map { 
    height: 500px;    
    width: 100%;            
  }      
.panel-title > a:before {
float: right !important;
font-family: FontAwesome;
content:"\f068";
padding-right: 5px;
}
.panel-title > a.collapsed:before {
float: right !important;
content:"\f067";
}
.panel-title > a:hover, 
.panel-title > a:active, 
.panel-title > a:focus  {
text-decoration:none;
}

</style> 
<link rel="stylesheet" href="css/calendar.css">
@endsection



@section('content')

<div class="br-mainpanel">
    <div class="pd-30">
      <h4 class="tx-gray-800 mg-b-5">Dashboard</h4>
    </div><!-- d-flex -->
<!-- row-->
    <div class="br-pagebody mg-t-5 pd-x-30">
      <div class="row row-sm">
       
        <!-- row-->
     <div class="br-pagebody mg-t-5 pd-x-30">
      <div class="row row-sm">
        <div class="col-sm-7 col-xl-3">
          <div class="bg-teal rounded overflow-hidden" style="
    height: 100%;
">
            <div class="pd-25 d-flex align-items-center">
              <i class="ion ion-earth tx-60 lh-0 tx-white op-7"></i>
              <div class="mg-l-20">
                <p class="tx-10 tx-spacing-1 tx-mont tx-medium tx-uppercase tx-white-8 mg-b-10">Today's Visits</p>
                <p class="tx-24 tx-white tx-lato tx-bold mg-b-2 lh-1">@if(isset($visit_count)) {{ $visit_count }} @endif</p>
                <span class="tx-11 tx-roboto tx-white-4"> @if($percentage > 0) <span class="tx-white"> {{ $percentage }}</span>  % higher Than yesterday @else {{ $percentage }}  % Than yesterday @endif</span><br>
                {{-- <span class="tx-11 tx-roboto tx-white-6">By Scan QR code</span><br> --}}
                <span class="tx-11 tx-roboto tx-white-4">yesterday Visits @if(isset($yes_visit_count))  <span class="tx-white"> {{ $yes_visit_count }} </span> @endif</span>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-7 col-xl-3 mg-t-20 mg-sm-t-0">
          <div class="bg-danger rounded overflow-hidden" style="
    height: 100%;
">
            <div class="pd-25 d-flex align-items-center">
              <i class="ion ion-bag tx-60 lh-0 tx-white op-7"></i>
              <div class="mg-l-20">
                <p class="tx-10 tx-spacing-1 tx-mont tx-medium tx-uppercase tx-white-8 mg-b-10">Today Sales</p>
                <p class="tx-15 tx-white tx-lato tx-bold mg-b-2 lh-1">INR {{ number_format($todaysales,0) }}</p>
                {{-- <span class="tx-11 tx-roboto tx-white-6">INR 2,129,290 before tax</span> --}}
              </div>
              
            </div>
            <div class="row pd-25 d-flex align-items-center" style="padding: 8px; ">
              <div class="col-lg-6 col-sm-6 col-xs-6 tx-11 tx-roboto tx-white-6">Yesterday: <span class="tx-11 tx-white tx-lato tx-bold mg-b-2 lh-1">INR {{ number_format($yesterdaysales,0) }}</span></div>
              <div class="col-lg-6 col-sm-6 col-xs-6  tx-11 tx-roboto tx-white-6">Day Before: <span class="tx-11 tx-white tx-lato tx-bold mg-b-2 lh-1">INR {{ number_format($daybeforeyesterdaysales,0) }}<span></div>
            </div>
          </div>
        </div>
        <div class="col-sm-7 col-xl-3 mg-t-20 mg-xl-t-0">
          <div class="bg-primary rounded overflow-hidden" style="
    height: 100%;
">
            <div class="pd-25 d-flex align-items-center">
              <i class="ion ion-monitor tx-60 lh-0 tx-white op-7"></i>
              <div class="mg-l-20">
                <p class="tx-10 tx-spacing-1 tx-mont tx-medium tx-uppercase tx-white-8 mg-b-10">{{ date('F') }}  Registrations</p>
                <p class="tx-24 tx-white tx-lato tx-bold mg-b-2 lh-1">{{ $users }}</p>
                {{-- <span class="tx-11 tx-roboto tx-white-6">23% average duration</span> --}}
               
              </div>
            </div>
            <div class="row pd-25 d-flex align-items-center" style="padding: 8px; ">
          <div class="col-lg-6 col-sm-6 col-xs-6  tx-11 tx-roboto tx-white-6">{{ \Carbon\Carbon::create()->endOfMonth()->modify('-2 month')->format('F')}}: <span class="tx-11 tx-white tx-lato tx-bold mg-b-2 lh-1">{{ $beforelastmonth }}<span></div>
            <div class="col-lg-6 col-sm-6 col-xs-6 tx-11 tx-roboto tx-white-6">{{ \Carbon\Carbon::today()->subMonth()->endOfMonth()->format('F') }}: <span class="tx-11 tx-white tx-lato tx-bold mg-b-2 lh-1">{{ $lastmonth }}</span></div>
          </div>
          </div>
        </div>
        <div class="col-sm-7 col-xl-3 mg-t-20 mg-xl-t-0">
          <div class="bg-br-primary rounded overflow-hidden" style="
    height: 100%;
">
            <div class="pd-25 d-flex align-items-center">
              <i class="ion ion-playstation tx-60 lh-0 tx-white op-7"></i>
              <div class="mg-l-20">
                <p class="tx-10 tx-spacing-1 tx-mont tx-medium tx-uppercase tx-white-8 mg-b-10">Stations Status</p>
               
                <p class="tx-16 tx-white tx-lato tx-bold mg-b-2 lh-1"> @foreach($usage as $data) {{ toword($data->status) }} = {{ $data->total }}                  @endforeach</p>
               <!-- <span class="tx-11 tx-roboto tx-white-6">65.45% on average time</span>-->
              </div>
            </div>
          </div>
        </div>
      </div> 
      </div>
        
       
      </div>
      {{-- <div class="row">
          <div class="col-xl-6">
            <div class="bd pd-t-30 pd-b-20 pd-x-20"><canvas id="chartBar1" height="200"></canvas></div>
          </div><!-- col-6 -->
          <div class="col-xl-6 mg-t-20 mg-xl-t-0">
            <div class="bd pd-t-30 pd-b-20 pd-x-20"><canvas id="chartBar2" height="200"></canvas></div>
          </div><!-- col-6 -->
        </div><!-- row -->
      <!-- row --> --}}
      <div class="row row-sm mg-t-20">
        <div class="col-8">
          <div class="card pd-0 bd-0 shadow-base">
            <div class="pd-x-30 pd-t-30 pd-b-15">
              <div class="d-flex align-items-center justify-content-between">
                <div>
                  <h6 class="tx-13 tx-uppercase tx-inverse tx-semibold tx-spacing-1">Charging Point Locations</h6>

                </div>
                <div class="tx-13">
                  {{-- <p class="mg-b-0"><span class="square-8 rounded-circle bg-purple mg-r-10" style="background-color:#17A2B8 !important;"></span> Total Visitors</p> --}}
                  {{-- <p class="mg-b-0"><span class="square-8 rounded-circle bg-pink mg-r-10" style="background-color:#096dc5 !important;"></span> Recurring Visitors</p> --}}
                </div>
              </div><!-- d-flex -->
            </div>
            <div class="pd-x-15 pd-b-15">
              {{-- <div class="bd pd-t-30 pd-b-20 pd-x-20"><canvas id="chartBar1" height="200"></canvas></div> --}}
             
					
                       
                <span class="metadata-marker" style="display: none;" data-region_tag="css"></span> 
                <span class="metadata-marker" style="display: none;" data-region_tag="html-body"></span>    
                <div id="map"></div>
                   
                
                 
            </div>
          </div><!-- card -->

          <div class="card bd-0 shadow-base pd-30 mg-t-20">
            <div class="d-flex align-items-center justify-content-between mg-b-30">
              <div>
                <h6 class="tx-13 tx-uppercase tx-inverse tx-semibold tx-spacing-1">Newly Registered Users</h6>
                <p class="mg-b-0"><i class="icon ion-calendar mg-r-5"></i>{{ Date('F Y') }}</p>
              </div>
              <a href="appusers" class="btn btn-outline-info btn-oblong tx-11 tx-uppercase tx-mont tx-medium tx-spacing-1 pd-x-30 bd-2">See
                more</a>
            </div><!-- d-flex -->

            <table class="table table-valign-middle mg-b-0" id="recently_registered">
              <tbody>
               
                
              </tbody>
            </table>
          </div><!-- card -->

          <div class="card shadow-base card-body pd-25 bd-0 mg-t-20">
            <div class="row">
              <div class="col-sm-6">
                <h6 class="card-title tx-uppercase tx-12">Usage Summary</h6>
                <p class="display-4 tx-medium tx-inverse mg-b-5 tx-lato">25%</p>
                <div class="progress mg-b-10">
                  <div class="progress-bar bg-primary progress-bar-xs wd-30p" role="progressbar" aria-valuenow="30"
                    aria-valuemin="0" aria-valuemax="100"></div>
                </div><!-- progress -->
               
                <p class="tx-11 lh-3 mg-b-0">You can also use other progress variant found in <a href="progress.html"
                    target="blank">progress section</a>.</p>
              </div><!-- col-6 -->
              <div class="col-sm-6 mg-t-20 mg-sm-t-0 d-flex align-items-center justify-content-center">
               <!-- <span class="peity-donut" data-peity='{ "fill": ["#0866C6", "#E9ECEF"],  "innerRadius": 60, "radius": 90 }'>30/100</span>-->
				
				
				<div id="morrisDonut2" class="ht-200 ht-sm-250"></div>
              </div><!-- col-6 -->
            </div><!-- row -->
          </div><!-- card -->

<style>
#recent-activity::-webkit-scrollbar { width: 0 !important }</style>

          <div class="card shadow-base card-body pd-25 bd-0 mg-t-20">
            <div class="row">
                <div class="col-sm-12">
                    <h6 class="card-title tx-uppercase tx-12"><strong>{!! trans('Day Wise') !!}</strong> {!! trans('Bookings') !!}</h6>
                    <div class="container">
                        <div class="page-header">
                        <div class="pull-right form-inline">
                        <div class="btn-group">
                        <button class="btn btn-primary" data-calendar-nav="prev"><< Prev</button>
                        <button class="btn btn-default" data-calendar-nav="today">Today</button>
                        <button class="btn btn-primary" data-calendar-nav="next">Next >></button>
                        </div>
                        <div class="btn-group">
                        <button class="btn btn-warning" data-calendar-view="year">Year</button>
                        <button class="btn btn-warning active" data-calendar-view="month">Month</button>
                        {{-- <button class="btn btn-warning" data-calendar-view="week">Week</button> --}}
                        <button class="btn btn-warning" data-calendar-view="day">Day</button>
                        </div>
                        </div>
                        <h3></h3>
                        <small>Booking Informaion</small>
                        </div>
                        <div class="row">
                        <div class="col-md-12">
                        <div id="showEventCalendar"></div>
                        </div>
                        {{-- <div class="col-md-3">
                        <h4>All Events List</h4>
                        <ul id="eventlist" class="nav nav-list"></ul>
                        </div> --}}
                        </div>
                        </div>
                   
              
              </div><!-- col-6 -->
            </div><!-- row -->
          </div><!-- card -->


        </div><!-- col-9 -->
        <div class="col-4">


          <div class="card bd-0 shadow-base pd-30">
            <h6 class="tx-13 tx-uppercase tx-inverse tx-semibold tx-spacing-1">Server Status</h6>
            <p class="mg-b-25">Summary of the status of your server.</p>

            <label class="tx-12 tx-gray-600 mg-b-10">CPU Usage (40.05 - 32 cpus)</label>
            <div class="progress ht-5 mg-b-10">
              <div class="progress-bar wd-25p" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
            </div>

            <label class="tx-12 tx-gray-600 mg-b-10">Memory Usage (32.2%)</label>
            <div class="progress ht-5 mg-b-10">
              <div class="progress-bar bg-teal wd-60p" role="progressbar" aria-valuenow="60" aria-valuemin="0"
                aria-valuemax="100"></div>
            </div>

            <label class="tx-12 tx-gray-600 mg-b-10">Disk Usage (82.2%)</label>
            <div class="progress ht-5 mg-b-10">
              <div class="progress-bar bg-danger wd-70p" role="progressbar" aria-valuenow="70" aria-valuemin="0"
                aria-valuemax="100"></div>
            </div>

            <label class="tx-12 tx-gray-600 mg-b-10">Databases (<span id="database_count"></span>/50)</label>
            <div class="progress ht-5 mg-b-10" id="database_bar"></div>

            <label class="tx-12 tx-gray-600 mg-b-10">Domains (30/50)</label>
            <div class="progress ht-5 mg-b-10">
              <div class="progress-bar bg-info wd-45p" role="progressbar" aria-valuenow="45" aria-valuemin="0"
                aria-valuemax="100"></div>
            </div>

            <label class="tx-12 tx-gray-600 mg-b-10">Email Account (13/50)</label>
            <div class="progress ht-5 mg-b-10">
              <div class="progress-bar bg-purple wd-65p" role="progressbar" aria-valuenow="65" aria-valuemin="0"
                aria-valuemax="100"></div>
            </div>

            <div class="mg-t-20 tx-13">
              <a href="#" class="tx-gray-600 hover-info">Generate Report</a>
              <a href="#" class="tx-gray-600 hover-info bd-l mg-l-10 pd-l-10">Print Report</a>
            </div>
          </div><!-- card -->

          <div class="card bg-transparent shadow-base bd-0 mg-t-20">
            <div class="bg-primary rounded-top">
              <div class="pd-x-30 pd-t-30">
                <h6 class="tx-13 tx-uppercase tx-white tx-semibold tx-spacing-1">Sale Status</h6>
                <p class="mg-b-20 tx-white-6">October 10 - 17, 2017</p>
                <h3 class="tx-lato tx-white mg-b-0">₹12, 201 <i class="icon ion-android-arrow-up tx-white-5"></i></h3>
              </div>
              <div id="chartLine1" class="wd-100p ht-150"></div>
            </div>
            <div class="bg-white pd-20 rounded-bottom d-flex align-items-center justify-content-between">
              <div class="d-flex align-items-start">
                <div><span id="sparkline6">5,4,7,5,9,7,4</span></div>
                <div class="mg-l-15">
                  <label class="tx-uppercase tx-10 tx-medium tx-spacing-1 mg-b-0">Average Sales</label>
                  <h6 class="tx-inverse mg-b-0 tx-lato tx-bold">₹603, 201</h6>
                </div>
              </div><!-- d-flex -->
              <div class="d-flex align-items-center">
                <div><span id="sparkline7">4,7,5,9,4,7,5</span></div>
                <div class="mg-l-15">
                  <label class="tx-uppercase tx-10 tx-medium tx-spacing-1 mg-b-0">Total Sales</label>
                  <h6 class="tx-inverse mg-b-0 tx-lato tx-bold">₹822, 677</h6>
                </div>
              </div><!-- d-flex -->
            </div><!-- d-flex -->
          </div><!-- card -->

          <div class="card bd-0 mg-t-20">
            <div id="carousel2" class="carousel slide" data-ride="carousel">
              <ol class="carousel-indicators">
                <li data-target="#carousel2" data-slide-to="0" class="active"></li>
                <li data-target="#carousel2" data-slide-to="1"></li>
                <li data-target="#carousel2" data-slide-to="2"></li>
              </ol>
              <div class="carousel-inner" role="listbox">
                <div class="carousel-item active">
                  <div class="bg-br-primary pd-30 ht-300 pos-relative d-flex align-items-center rounded">
                    <div class="pos-absolute t-15 r-25">
                      <a href="#" class="tx-white-5 hover-info"><i class="icon ion-edit tx-16"></i></a>
                      <a href="#" class="tx-white-5 hover-info mg-l-7"><i class="icon ion-stats-bars tx-20"></i></a>
                      <a href="#" class="tx-white-5 hover-info mg-l-7"><i class="icon ion-gear-a tx-20"></i></a>
                      <a href="#" class="tx-white-5 hover-info mg-l-7"><i class="icon ion-more tx-20"></i></a>
                    </div>
                    <div class="tx-white">
                      <p class="tx-uppercase tx-11 tx-medium tx-mont tx-spacing-2 tx-white-5">Recent Article</p>
                      <h5 class="lh-5 mg-b-20">Charging Ahead With a New Electric Car</h5>
                      <nav class="nav flex-row tx-13">
                        <a href="#" class="tx-white-8 hover-white pd-l-0 pd-r-5">12K+ Views</a>
                        <a href="#" class="tx-white-8 hover-white pd-x-5">234 Shares</a>
                        <a href="#" class="tx-white-8 hover-white pd-x-5">43 Comments</a>
                      </nav>
                    </div>
                  </div><!-- d-flex -->
                </div>
                <div class="carousel-item">
                  <div class="bg-info pd-30 ht-300 pos-relative d-flex align-items-center rounded">
                    <div class="pos-absolute t-15 r-25">
                      <a href="#" class="tx-white-5 hover-info"><i class="icon ion-edit tx-16"></i></a>
                      <a href="#" class="tx-white-5 hover-info mg-l-7"><i class="icon ion-stats-bars tx-20"></i></a>
                      <a href="#" class="tx-white-5 hover-info mg-l-7"><i class="icon ion-gear-a tx-20"></i></a>
                      <a href="#" class="tx-white-5 hover-info mg-l-7"><i class="icon ion-more tx-20"></i></a>
                    </div>
                    <div class="tx-white">
                      <p class="tx-uppercase tx-11 tx-medium tx-mont tx-spacing-2 tx-white-5">Recent Article</p>
                      <h5 class="lh-5 mg-b-20">Improving Electric Vehicle Charging Station Efficiency through Pricing</h5>
                      <nav class="nav flex-row tx-13">
                        <a href="#" class="tx-white-8 hover-white pd-l-0 pd-r-5">Edit</a>
                        <a href="#" class="tx-white-8 hover-white pd-x-5">Unpublish</a>
                        <a href="#" class="tx-white-8 hover-white pd-x-5">Delete</a>
                      </nav>
                    </div>
                  </div><!-- d-flex -->
                </div>
                <div class="carousel-item">
                  <div class="bg-purple pd-30 ht-300 d-flex pos-relative align-items-center rounded">
                    <div class="pos-absolute t-15 r-25">
                      <a href="#" class="tx-white-5 hover-info"><i class="icon ion-edit tx-16"></i></a>
                      <a href="#" class="tx-white-5 hover-info mg-l-7"><i class="icon ion-stats-bars tx-20"></i></a>
                      <a href="#" class="tx-white-5 hover-info mg-l-7"><i class="icon ion-gear-a tx-20"></i></a>
                      <a href="#" class="tx-white-5 hover-info mg-l-7"><i class="icon ion-more tx-20"></i></a>
                    </div>
                    <div class="tx-white">
                      <p class="tx-uppercase tx-11 tx-medium tx-mont tx-spacing-2 tx-white-5">Recent Article</p>
                      <h5 class="lh-5 mg-b-20">Fast charging infrastructure for electric vehicles: Today’s situation and future needs</h5>
                      <nav class="nav flex-row tx-13">
                        <a href="#" class="tx-white-8 hover-white pd-l-0 pd-r-5">Edit</a>
                        <a href="#" class="tx-white-8 hover-white pd-x-5">Unpublish</a>
                        <a href="#" class="tx-white-8 hover-white pd-x-5">Delete</a>
                      </nav>
                    </div>
                  </div><!-- d-flex -->
                </div>
              </div><!-- carousel-inner -->
            </div><!-- carousel -->
          </div><!-- card -->
          <div class="card bd-0 mg-t-20">
              <div class="card shadow-base card-body pd-25 bd-0 mg-t-20">
                  <div class="row">
                      <div class="col-sm-12">
                          <h6 class="card-title tx-uppercase tx-12"><strong>{!! trans('Recent') !!}</strong> {!! trans('Activity') !!}</h6>
                    
      
  <div class="scroll-widget" style="background-color: #e4f4f9;height: 500px; overflow: scroll;" id="recent-activity">
      
      
                  </div>
      
                    </div><!-- col-6 -->
                  </div><!-- row -->
                </div>
          </div><!-- card -->

        </div><!-- col-3 -->
     
      </div><!-- row -->

    
@endsection
 

@section('scripts')
{{-- <script src="{{ asset('assets/lib/chartist/chartist.js') }}"></script> --}}
<script src="{{ asset('assets/lib/jquery.sparkline.bower/jquery.sparkline.min.js') }}"></script>
<script src="{{ asset('assets/lib/d3/d3.js') }}"></script>
<script src="{{ asset('assets/lib/rickshaw/rickshaw.min.js') }}"></script>
<script src="{{ asset('assets/lib/morris.js/morris.js') }}"></script>
<script src="{{ asset('assets/lib/highlightjs/highlight.pack.js') }}"></script>
<script src="{{ asset('assets/lib/raphael/raphael.min.js') }}"></script>
<script src="{{ asset('assets/lib/chart.js/Chart.js') }}"></script>
<script>
    $(function () {
      'use strict'
      $(window).resize(function () {
        minimizeMenu();
      });

      minimizeMenu();

      function minimizeMenu() {
        if (window.matchMedia('(min-width: 992px)').matches && window.matchMedia('(max-width: 1299px)').matches) {
          // show only the icons and hide left menu label by default
          $('.menu-item-label,.menu-item-arrow').addClass('op-lg-0-force d-lg-none');
          $('body').addClass('collapsed-menu');
          $('.show-sub + .br-menu-sub').slideUp();
        } else if (window.matchMedia('(min-width: 1300px)').matches && !$('body').hasClass('collapsed-menu')) {
          $('.menu-item-label,.menu-item-arrow').removeClass('op-lg-0-force d-lg-none');
          $('body').removeClass('collapsed-menu');
          $('.show-sub + .br-menu-sub').slideDown();
        }
      }
      
      
      recentRegistred();

      function recentRegistred(){
        $('#recently_registered').empty()
        $.ajax({url: "recentregistred", success: function(data){
          if(data){
                var len = data.length;

                var txt = "";
                if(len > 0){
                    for(var i=0;i<len;i++){
                        if(data[i].first_name && data[i].last_name){
                txt += "<tr>"+
        "<td class='pd-l-0-force'><img   class='wd-40 rounded-circle' src=/"+data[i].image+" onError="+"this.onerror=null;this.src='uploads/avatar.png';"+">"+
        '<td><h6 class="tx-inverse tx-14 mg-b-0">'+data[i].first_name+' '+data[i].last_name+'</h6><span class="tx-12">'+data[i].email+'</span></td>'+
        " <td>"+formate(data[i].created_at)+"</td>"+
        '<td class="pd-r-0-force tx-center"><a href="/appusers/'+data[i].id+'" class="btn btn-xs btn-default" > <i class="fa fa-eye" data-toggle="tooltip" title="View"></i></a></td>'+
        "</tr>";
                        }
                    }
                    if(txt != ""){
                       $("#recently_registered").append(txt).removeClass("hidden");
                    }
                }
            }
            var interval = 1000 * 60 * 1; // where X is your every X minutes

            // setInterval(function(){recentRegistred()}, interval);
        }});

     
      }

    });

    function formate(date) {
    if (typeof date == "string")
        date = new Date(date);
    var day = (date.getDate() <= 9 ? "0" + date.getDate() : date.getDate());
    var month = (date.getMonth() + 1 <= 9 ? "0" + (date.getMonth() + 1) : (date.getMonth() + 1));
    var dateString = day + "/" + month + "/" + date.getFullYear();

    return dateString;
}


$(document).ready(function() { 
  t();
  function t(){
  database_count();
  function database_count(){
    $.get("database_count", function(data, status){
      //alert("Data: " + data + "\nStatus: " + status); 
      $('#database_count').html(data[10]);
     var database_bar='wd-'+data[10]/50*100+'p';
      $('#database_bar').html('<div class="progress-bar bg-warning '+database_bar+'" role="progressbar" aria-valuenow="" aria-valuemin="'+data[10]+'" aria-valuemax="50">&nbsp</div>');
  });

  }


  $.ajax({url:"/recent-activity",error:function(t){},dataType:"html",success:function(t){
		$("#recent-activity").html(t),$("#recent-activity .textAvatar").nameBadge()},type:"POST"})


}
});

new Morris.Donut({
  element: 'morrisDonut2',
  data: [
    @foreach($usage as $data){
    label: "{{ toword($data->status) }}", value: {{ $data->total }} },
    @endforeach
  ],
  colors: ['#00b297','#dc3545','#f49917','#6f42c1'],
  resize: true
});

// var ctx = document.getElementById('chartBar1').getContext('2d');
// new Chart(ctx, {
//   type: 'bar',
//   data: {
//     labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun','July','Aug','Sept','Oct','Nov','Dec'],
//     datasets:[{
//         label: 'Registrations',
//         data: {{ $userscount }},
//         backgroundColor: '#F47322',
//         borderWidth: 1, fill: true
//       }, {
//         label: 'Sales',
//         data: {{ $sales }},
//         backgroundColor: '#2E5773',
//         borderWidth: 1, fill: true
//       }, {
//         label: 'Charging Consumption',
//         data: {{ $consumption }},
//         backgroundColor: '#27AAC8',
//         borderWidth: 1,
//         fill: true
//       }],
//   }
//   ,
//   options: {
//     legend: {
//       display: false,
//         labels: {
//           display: false
//         }
//     },
   
//   }
// });




  </script>
{{ HTML::script('assets/js/dashboard.js') }}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script type="text/javascript" src="js/calendar.js"></script>
<script>
(function($) {
"use strict";
var options = {
events_source: 'bookings',
view: 'month',
tmpl_path: 'tmpls/',
tmpl_cache: false,
day: '{{ date("Y-m-d") }}',
onAfterEventsLoad: function(events) {
if(!events) {
return;
}
var list = $('#eventlist');
list.html('');
$.each(events, function(key, val) {
$(document.createElement('li'))
.html('' + val.title + '')
.appendTo(list);
});
},
onAfterViewLoad: function(view) {
$('.page-header h3').text(this.getTitle());
$('.btn-group button').removeClass('active');
$('button[data-calendar-view="' + view + '"]').addClass('active');
},
classes: {
months: {
general: 'label'
}
}
};
var calendar = $('#showEventCalendar').calendar(options);
$('.btn-group button[data-calendar-nav]').each(function() {
var $this = $(this);
$this.click(function() {
calendar.navigate($this.data('calendar-nav'));
});
});
$('.btn-group button[data-calendar-view]').each(function() {
var $this = $(this);
$this.click(function() {
calendar.view($this.data('calendar-view'));
});
});
$('#first_day').change(function(){
var value = $(this).val();
value = value.length ? parseInt(value) : null;
calendar.setOptions({first_day: value});
calendar.view();
});
$('#language').change(function(){
calendar.setLanguage($(this).val());
calendar.view();
});
$('#events-in-modal').change(function(){
var val = $(this).is(':checked') ? $(this).val() : null;
calendar.setOptions({modal: val});
});
$('#format-12-hours').change(function(){
var val = $(this).is(':checked') ? true : false;
calendar.setOptions({format12: val});
calendar.view();
});
$('#show_wbn').change(function(){
var val = $(this).is(':checked') ? true : false;
calendar.setOptions({display_week_numbers: val});
calendar.view();
});
$('#show_wb').change(function(){
var val = $(this).is(':checked') ? true : false;
calendar.setOptions({weekbox: val});
calendar.view();
});
}(jQuery));</script>


<script>
  $("#filter-form").submit(function(event){
            event.preventDefault();
            clear=true;

          var formdata=$(this).serialize();
          
          createMarkers(formdata,clear);
          //createMarkers($(this).serializeArray());
          
      
        });
 
	// Note: This example requires that you consent to location sharing when
      // prompted by your browser. If you see the error "The Geolocation service
      // failed.", it means you probably did not give permission for the browser to
      // locate you.
      var map, infoWindow;
      var markers = [];

      var lat_longs_map = new Array();
      initMap();
      
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 28.5750163, lng:  77.130414},
          zoom: 6,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });
        infoWindow = new google.maps.InfoWindow;

        var GEOCODING = 'lat=28.5750163&lng=77.130414&range=3000';

        clear=false;

        createMarkers(GEOCODING,clear);
      }

      function createMarkers(GEOCODING,clear){
      

      $.ajax({url:'{{url('points') }}', data:GEOCODING,type:'POST',success(location) {

        var infowindow = new google.maps.InfoWindow();
        var marker, i;
        if(location.length>0){
        if(clear==true){
         
          setMapOnAll(null)
        }}else{
          alert("No data Found");
        }

          for (i = 0; i < location.length; i++) { 

      var marker_icon = {	url: "{{ url('/').'/'.config('constants.upload_path.icons') }}"+location[i]['status']+'.png'};
          
              marker = new google.maps.Marker({
              position: new google.maps.LatLng(location[i]['latitude'], location[i]['longitude']),
              map: map,
              title:prettify(location[i]['status']),
              icon: marker_icon
            });
            markers.push(marker);
            lat_longs_map.push(marker.getPosition());

            google.maps.event.addListener(marker, 'click', (function(marker, i) {
              return function() {
                infowindow.setContent('<div id="content"><b><h7>'+location[i]['station_name']+'</b></h7>'+
      '<br>'+location[i]['address']+'<br></br><h7>Location : <b>'+location[i]['location_name']+'<b></h7>'+
      '</div>');
                infowindow.open(map, marker);
              }
            })(marker, i));
          } 
          fitMapToBounds_map();   
      }  
      });
    }
    function fitMapToBounds_map() {
				var bounds = new google.maps.LatLngBounds();
				if (lat_longs_map.length>0) {
					for (var i=0; i<lat_longs_map.length; i++) {
						bounds.extend(lat_longs_map[i]);
					}
					map.fitBounds(bounds);
				}
			}

       function setMapOnAll(map) {
        for (var i = 0; i < markers.length; i++) {
          markers[i].setMap(map);
        }
      }
      var prettify = function(str){
         var temp = str.split('_'), i, pretty;

        for(i = 0; i < temp.length; i++){
          temp[i] = temp[i].charAt(0).toUpperCase() + temp[i].slice(1);
        }

          pretty = temp.join(' ');

          return pretty;
        };
    </script>

@endsection