@extends('layouts.master')

@section('content')
<!--  BEGIN CONTENT AREA  -->
<div id="content" class="main-content">
    <div class="layout-px-spacing">
        <div class="row layout-top-spacing">

            <!-- New -->
            <div class="col-xl-3 col-lg-12 col-md-12 col-sm-12 col-12 layout-spacing">
                <div class="widget widget-one sales-bg">
					<div class="stats">
						<p class="stats-icon"><i class="fa fa-user"></i></p>
						<h6>Total Riders</h6>
						<h3>{{$data['riders']}}</h3>
					</div>
                    <!--<div class="widget-heading">
                        <h6 class=""><span class="icon"><i class="fa fa-users"></i></span>Riders</h6>
                    </div>
                    <div class="w-chart">
                        <div class="w-chart-section total-visits-content">
                            <div class="w-detail">
                                <p class="w-stats">{{$data['riders']}}</p>
                            </div>
                        </div>
                    </div>--->
					
                </div>
            </div>

            <div class="col-xl-3 col-lg-12 col-md-12 col-sm-12 col-12 layout-spacing">
                <div class="widget widget-one usr-bg">
					<div class="stats">
						<p class="stats-icon"><i class="fa fa-users"></i></p>
						<h6>Total Drivers</h6>
						<h3>{{$data['drivers']}}</h3>
					</div>
                    <!---<div class="widget-heading">
                        <h6 class=""><span class="icon"><i class="fa fa-user-secret"></i></span>Drivers</h6>
                    </div>
                    <div class="w-chart">
                        <div class="w-chart-section total-visits-content">
                            <div class="w-detail">
                                <p class="w-stats">{{$data['drivers']}}</p>
                            </div>
                        </div>
                    </div>--->
				
                </div>
            </div>
            <div class="col-xl-3 col-lg-12 col-md-12 col-sm-12 col-12 layout-spacing">
                <div class="widget widget-one income-bg">
                    <!--<div class="widget-heading">
                        <h6 class=""><span class="icon"><i class="fa fa-bus"></i></span>Vehicles</h6>
                    </div>
                    <div class="w-chart">
                        <div class="w-chart-section total-visits-content">
                            <div class="w-detail">
                                <p class="w-stats">{{$data['vehicles']}}</p>
                            </div>
                        </div>
                    </div>---->
					<div class="stats">
						<p class="stats-icon"><i class="fa fa-money"></i></p>
						<h6>Total Income</h6>
						<h3><i class="fa fa-usd"></i>{{$data['totalIncome']}}</h3>
					</div>
				
                </div>
            </div>
            <!-- New -->
            <div class="col-xl-3 col-lg-12 col-md-12 col-sm-12 col-12 layout-spacing">
                <div class="widget widget-one ride-bg">
					<div class="stats">
						<p class="stats-icon"><i class="fa fa-car"></i></p>
						<h6>Total Rides</h6>
						<h3>{{$data['totalRides']}}</h3>
					</div>
                    <!---<div class="widget-heading">
                        <h6 class=""><span class="icon"><i class="fa fa-car"></i></span>Rides</h6>
                    </div>
                    <div class="w-chart">
                        <div class="w-chart-section total-visits-content">
                            <div class="w-detail">
                                <p class="w-stats">6</p>
                            </div>
                        </div>
                    </div>---->
					
                </div>
            </div>

			<div class="col-xl-8 col-lg-12 col-md-12 col-sm-12 col-12 layout-spacing">
                <div class="widget widget-chart-three">
                    <div class="widget-heading">
                        <div class="">
                            <h5 class="">Rides</h5>
                        </div>

                      
                    </div>

                    <div class="widget-content">
                        <div id="uniqueVisits"></div>
                    </div>
                </div>
            </div>
						
						
				<div class="col-xl-4 col-lg-12 col-md-12 col-sm-12 col-12 layout-spacing">
                    <div class="widget widget-chart-two">
                        <div class="widget-heading">
                            <h5 class="">Vehicles</h5>
                        </div>
                        <div class="widget-content">
                            <div id="chart-2" class=""></div>
                        </div>
                        
                    </div>
            </div>	

        </div>
        @endsection

        @section('script')
    

        <script>
            $(document).ready(function() {

                //Get dashboard data
                var count;
                var vehicles;
                var riders;
                var drivers;
                $.ajax({
                    async: false,
                    url: `home/getDashboardData`,
                    type: 'get',
                    data: {
                        "_token": "{{ csrf_token() }}",
                    },
                    success: function(result) {
                        pendingRides = result.pendingRides;
                        completedRides = result.completedRides;
                        vehicles = result.vehicleTypes;
                        vehicleTypes = result.vehicleTypesTotal;
                        vehicleModels = result.vehicleModelsTotal;
                        vehicleMakes = result.vehicleMakesTotal;
                        riders = result.riders;
                        drivers = result.drivers;
                        // console.log(result);
                    }
                });
/*
      ===================================
          Unique Visitors | Options
      ===================================
  */

  var d_1options1 = {
    chart: {
      height: 350,
      type: 'bar',
      foreColor: '#fff',
      toolbar: {
        show: false,
      }
    },
    colors: ['#008FFB', '#00E396'],
    plotOptions: {
      bar: {
        horizontal: false,
        columnWidth: '55%',
        endingShape: 'rounded'
      },
    },
    dataLabels: {
      enabled: false
      
    },
 
    legend: {
      position: 'bottom',
      horizontalAlign: 'center',
      fontSize: '14px',
      markers: {
        width: 10,
        height: 10,
      },
      itemMargin: {
        horizontal: 0,
        vertical: 8
      }
    },
    stroke: {
      show: true,
      width: 2,
      colors: ['transparent']
    },
    series: [{
      name: 'Pending',
      data: pendingRides,
    },
     {
      name: 'Completed',
      data: completedRides,
      
    }],
    xaxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
      
    },
    fill: {
      type: 'gradient',
      gradient: {
        shade: 'light',
        type: 'vertical',
        shadeIntensity: 0.3,
        inverseColors: false,
        opacityFrom: 1,
        opacityTo: 0.8,
        stops: [0, 100]
      }
    },
    tooltip: {
      y: {
        formatter: function (val) {
          return val
        }
      }
    }
   
  }
    

  var d_1C_3 = new ApexCharts(
    document.querySelector("#uniqueVisits"),
    d_1options1
  );
  d_1C_3.render();
    /*
      ===================================
          Unique Visitors | Script
      ===================================
  */
  /*
     ==================================
         Vehicles | Options
     ==================================
 */

 var options = {
    chart: {
      type: 'donut',
      width: 380
      
    },
    colors: ['#5c1ac3', '#e2a03f', '#e7515a', '#e2a03f'],
    dataLabels: {
      enabled: false
    },
    legend: {
      position: 'bottom',
      horizontalAlign: 'center',
      fontSize: '14px',
      markers: {
        width: 10,
        height: 10,
      },
      itemMargin: {
        horizontal: 0,
        vertical: 8
      }
    },
    plotOptions: {
      pie: {
        donut: {
          size: '65%',
          background: 'transparent',
          labels: {
            show: true,
            name: {
              show: true,
              fontSize: '29px',
              fontFamily: 'Nunito, sans-serif',
              color: '#fff',
              offsetY: -10
            },
            value: {
              show: true,
              fontSize: '26px',
              fontFamily: 'Nunito, sans-serif',
              color: '#fff',
              offsetY: 16,
              formatter: function (val) {
                return val
              }
            },
            total: {
              show: true,
              showAlways: true,
              label: 'Total',
              color: '#fff',
              formatter: function (w) {
                return w.globals.seriesTotals.reduce(function (a, b) {
                  return a + b
                }, 0)
              }
            }
          }
        }
      }
    },
    stroke: {
      show: true,
      width: 25,
    },
    series: vehicles.count,
    labels: vehicles.vehicleNames,
    // series: [vehicleTypes, vehicleModels, vehicleMakes],
    // labels: ['Vehicle Types', 'Vehicle Models', 'Vehicle Makes'],
    responsive: [{
      breakpoint: 1599,
      options: {
        chart: {
          width: '350px',
          height: '400px'
        },
        legend: {
          position: 'bottom'
        }
      },

      breakpoint: 1439,
      options: {
        chart: {
          width: '100%',
          height: '390px'
        },
        legend: {
          position: 'bottom'
        },
        plotOptions: {
          pie: {
            donut: {
              size: '65%',
            }
          }
        }
      },
    }]
  }

  /*
      =================================
         Vehicles | Render
      =================================
  */
  var chart = new ApexCharts(
    document.querySelector("#chart-2"),
    options
  );

  chart.render();
                /*
                     =============================
                         Total Riders | Options
                     =============================
                 */
                var d_2options2 = {
                    chart: {
                        id: 'sparkline1',
                        group: 'sparklines',
                        type: 'area',
                        height: 290,
                        sparkline: {
                            enabled: true
                        },
                    },
                    stroke: {
                        curve: 'smooth',
                        width: 2
                    },
                    fill: {
                        opacity: 1,
                    },
                    series: [{
                        name: 'Riders',
                        data: riders
                    }],
                    labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
                    yaxis: {
                        min: 0
                    },
                    grid: {
                        padding: {
                            top: 125,
                            right: 0,
                            bottom: 0,
                            left: 0
                        },
                    },
                    tooltip: {
                        x: {
                            show: false,
                        },
                        theme: 'dark'
                    },
                    colors: ['#1abc9c']
                }
                /*
                      ============================
                          Total Orders | Render
                      ============================
                  */
                var d_2C_2 = new ApexCharts(document.querySelector("#total-orders"), d_2options2);
                d_2C_2.render();

                /*
                     =============================
                         Total Drivers | Options
                     =============================
                 */
                var d_2options3 = {
                    chart: {
                        id: 'sparkline1',
                        group: 'sparklines',
                        type: 'area',
                        height: 290,
                        sparkline: {
                            enabled: true
                        },
                    },
                    stroke: {
                        curve: 'smooth',
                        width: 2
                    },
                    fill: {
                        opacity: 1,
                    },
                    series: [{
                        name: 'Drivers',
                        data: drivers
                    }],
                    labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
                    yaxis: {
                        min: 0
                    },
                    grid: {
                        padding: {
                            top: 125,
                            right: 0,
                            bottom: 0,
                            left: 0
                        },
                    },
                    tooltip: {
                        x: {
                            show: false,
                        },
                        theme: 'dark'
                    },
                    colors: ['#1abc9c']
                }
                /*
                     ============================
                         Total Drivers | Render
                     ============================
                 */
                var d_2C_3 = new ApexCharts(document.querySelector("#total-drivers"), d_2options3);
                d_2C_3.render();
            }); //end document ready
        </script>
        @stop