@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-money"></i></p>
						<h6>Total Sales</h6>
						<h3><i class="fa fa-usd"></i>3,2567</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 Users</h6>
						<h3>1,145</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>1,645</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>145</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 id="chartColumn" class="col-xl-8 layout-spacing">
                            <div class="statbox widget box box-shadow">
                                <div class="widget-header">                                
                                    <div class="row">
                                        <div class="col-xl-12 col-md-12 col-sm-8 col-12">
                                            <h4>Simple Column</h4> 
                                        </div>
                                    </div>
                                </div>
                                <div class="widget-content widget-content-area">
                                    <div id="s-col" class="" style="min-height: 365px;"><div id="apexchartsd6ske6zc" class="apexcharts-canvas apexchartsd6ske6zc light" style="width:100%; height: 350px;"><svg id="SvgjsSvg2034" width="1062" height="350" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" class="apexcharts-svg" xmlns:data="ApexChartsNS" transform="translate(0, 0)" style="background: transparent;"><foreignObject x="0" y="0" width="1062" height="350"><div class="apexcharts-legend center position-bottom" xmlns="http://www.w3.org/1999/xhtml" style="inset: auto 0px 10px; position: absolute;"><div class="apexcharts-legend-series" rel="1" data:collapsed="false" style="margin: 0px 5px;"><span class="apexcharts-legend-marker" rel="1" data:collapsed="false" style="background: rgb(0, 143, 251); color: rgb(0, 143, 251); height: 12px; width: 12px; left: 0px; top: 0px; border-width: 0px; border-color: rgb(255, 255, 255); border-radius: 2px;"></span><span class="apexcharts-legend-text" rel="1" data:collapsed="false" style="color:#d5dae2; font-size: 12px; font-family: Poppins', sans-serif;">Net Profit</span></div><div class="apexcharts-legend-series" rel="2" data:collapsed="false" style="margin: 0px 5px;"><span class="apexcharts-legend-marker" rel="2" data:collapsed="false" style="background: rgb(0, 227, 150); color: rgb(0, 227, 150); height: 12px; width: 12px; left: 0px; top: 0px; border-width: 0px; border-color: rgb(255, 255, 255); border-radius: 2px;"></span><span class="apexcharts-legend-text" rel="2" data:collapsed="false" style="color: rgb(55, 61, 63); font-size: 12px; font-family: Poppins', sans-serif;">Revenue</span></div></div></foreignObject><g id="SvgjsG2036" class="apexcharts-inner apexcharts-graphical" transform="translate(74.859375, 40)"><defs id="SvgjsDefs2035"><linearGradient id="SvgjsLinearGradient2040" x1="0" y1="0" x2="0" y2="1"><stop id="SvgjsStop2041" stop-opacity="0.4" stop-color="rgba(216,227,240,0.4)" offset="0"></stop><stop id="SvgjsStop2042" stop-opacity="0.5" stop-color="rgba(190,209,230,0.5)" offset="1"></stop><stop id="SvgjsStop2043" stop-opacity="0.5" stop-color="rgba(190,209,230,0.5)" offset="1"></stop></linearGradient><clipPath id="gridRectMaskd6ske6zc"><rect id="SvgjsRect2045" width="804.140625" height="255.348" x="-1" y="-1" rx="0" ry="0" fill="#ffffff" opacity="1" stroke-width="0" stroke="none" stroke-dasharray="0"></rect></clipPath><clipPath id="gridRectMarkerMaskd6ske6zc"><rect id="SvgjsRect2046" width="804.140625" height="255.348" x="-1" y="-1" rx="0" ry="0" fill="#ffffff" opacity="1" stroke-width="0" stroke="none" stroke-dasharray="0"></rect></clipPath></defs><rect id="SvgjsRect2044" width="24.509852430555558" height="253.348" x="0" y="0" rx="0" ry="0" fill="url(#SvgjsLinearGradient2040)" opacity="1" stroke-width="0" stroke-dasharray="3" class="apexcharts-xcrosshairs" y2="253.348" filter="none" fill-opacity="0.9"></rect><g id="SvgjsG2071" class="apexcharts-xaxis" transform="translate(0, 0)"><g id="SvgjsG2072" class="apexcharts-xaxis-texts-g" transform="translate(0, -4)"><text id="SvgjsText2073" font-family="Poppins', sans-serif" x="44.56336805555556" y="282.348" text-anchor="middle" dominant-baseline="auto" font-size="12px" fill="#373d3f" class="apexcharts-xaxis-label " style="font-family: Poppins', sans-serif;"><tspan id="SvgjsTspan2074" style="font-family: Poppins', sans-serif;">Feb</tspan><title>Feb</title></text><text id="SvgjsText2075" font-family="Poppins', sans-serif" x="133.69010416666669" y="282.348" text-anchor="middle" dominant-baseline="auto" font-size="12px" fill="#373d3f" class="apexcharts-xaxis-label " style="font-family: Poppins', sans-serif;"><tspan id="SvgjsTspan2076" style="font-family: Poppins', sans-serif;">Mar</tspan><title>Mar</title></text><text id="SvgjsText2077" font-family="Poppins', sans-serif" x="222.81684027777783" y="282.348" text-anchor="middle" dominant-baseline="auto" font-size="12px" fill="#373d3f" class="apexcharts-xaxis-label " style="font-family: Poppins', sans-serif;"><tspan id="SvgjsTspan2078" style="font-family: Poppins', sans-serif;">Apr</tspan><title>Apr</title></text><text id="SvgjsText2079" font-family="Poppins', sans-serif" x="311.9435763888889" y="282.348" text-anchor="middle" dominant-baseline="auto" font-size="12px" fill="#373d3f" class="apexcharts-xaxis-label " style="font-family: Poppins', sans-serif;"><tspan id="SvgjsTspan2080" style="font-family: Poppins', sans-serif;">May</tspan><title>May</title></text><text id="SvgjsText2081" font-family="Poppins', sans-serif" x="401.0703125" y="282.348" text-anchor="middle" dominant-baseline="auto" font-size="12px" fill="#373d3f" class="apexcharts-xaxis-label " style="font-family: Poppins', sans-serif;"><tspan id="SvgjsTspan2082" style="font-family: Poppins', sans-serif;">Jun</tspan><title>Jun</title></text><text id="SvgjsText2083" font-family="Poppins', sans-serif" x="490.1970486111111" y="282.348" text-anchor="middle" dominant-baseline="auto" font-size="12px" fill="#373d3f" class="apexcharts-xaxis-label " style="font-family: Poppins', sans-serif;"><tspan id="SvgjsTspan2084" style="font-family: Poppins', sans-serif;">Jul</tspan><title>Jul</title></text><text id="SvgjsText2085" font-family="Poppins', sans-serif" x="579.3237847222222" y="282.348" text-anchor="middle" dominant-baseline="auto" font-size="12px" fill="#373d3f" class="apexcharts-xaxis-label " style="font-family: Poppins', sans-serif;"><tspan id="SvgjsTspan2086" style="font-family: Poppins', sans-serif;">Aug</tspan><title>Aug</title></text><text id="SvgjsText2087" font-family="Poppins', sans-serif" x="668.4505208333333" y="282.348" text-anchor="middle" dominant-baseline="auto" font-size="12px" fill="#373d3f" class="apexcharts-xaxis-label " style="font-family: Poppins', sans-serif;"><tspan id="SvgjsTspan2088" style="font-family: Poppins', sans-serif;">Sep</tspan><title>Sep</title></text><text id="SvgjsText2089" font-family="Poppins', sans-serif" x="757.5772569444443" y="282.348" text-anchor="middle" dominant-baseline="auto" font-size="12px" fill="#373d3f" class="apexcharts-xaxis-label " style="font-family: Poppins', sans-serif;"><tspan id="SvgjsTspan2090" style="font-family: Poppins', sans-serif;">Oct</tspan><title>Oct</title></text></g><line id="SvgjsLine2091" x1="0" y1="254.348" x2="802.140625" y2="254.348" stroke="#78909c" stroke-dasharray="0" stroke-width="1"></line></g><g id="SvgjsG2103" class="apexcharts-grid"><g id="SvgjsG2104" class="apexcharts-gridlines-horizontal"><line id="SvgjsLine2114" x1="0" y1="0" x2="802.140625" y2="0" stroke="#e0e0e0" stroke-dasharray="0" class="apexcharts-gridline"></line><line id="SvgjsLine2115" x1="0" y1="42.22466666666667" x2="802.140625" y2="42.22466666666667" stroke="#e0e0e0" stroke-dasharray="0" class="apexcharts-gridline"></line><line id="SvgjsLine2116" x1="0" y1="84.44933333333334" x2="802.140625" y2="84.44933333333334" stroke="#e0e0e0" stroke-dasharray="0" class="apexcharts-gridline"></line><line id="SvgjsLine2117" x1="0" y1="126.674" x2="802.140625" y2="126.674" stroke="#e0e0e0" stroke-dasharray="0" class="apexcharts-gridline"></line><line id="SvgjsLine2118" x1="0" y1="168.89866666666668" x2="802.140625" y2="168.89866666666668" stroke="#e0e0e0" stroke-dasharray="0" class="apexcharts-gridline"></line><line id="SvgjsLine2119" x1="0" y1="211.12333333333336" x2="802.140625" y2="211.12333333333336" stroke="#e0e0e0" stroke-dasharray="0" class="apexcharts-gridline"></line><line id="SvgjsLine2120" x1="0" y1="253.34800000000004" x2="802.140625" y2="253.34800000000004" stroke="#e0e0e0" stroke-dasharray="0" class="apexcharts-gridline"></line></g><g id="SvgjsG2105" class="apexcharts-gridlines-vertical"></g><line id="SvgjsLine2106" x1="89.12673611111111" y1="254.348" x2="89.12673611111111" y2="260.348" stroke="#78909c" stroke-dasharray="0" class="apexcharts-xaxis-tick"></line><line id="SvgjsLine2107" x1="178.25347222222223" y1="254.348" x2="178.25347222222223" y2="260.348" stroke="#78909c" stroke-dasharray="0" class="apexcharts-xaxis-tick"></line><line id="SvgjsLine2108" x1="267.38020833333337" y1="254.348" x2="267.38020833333337" y2="260.348" stroke="#78909c" stroke-dasharray="0" class="apexcharts-xaxis-tick"></line><line id="SvgjsLine2109" x1="356.50694444444446" y1="254.348" x2="356.50694444444446" y2="260.348" stroke="#78909c" stroke-dasharray="0" class="apexcharts-xaxis-tick"></line><line id="SvgjsLine2110" x1="445.63368055555554" y1="254.348" x2="445.63368055555554" y2="260.348" stroke="#78909c" stroke-dasharray="0" class="apexcharts-xaxis-tick"></line><line id="SvgjsLine2111" x1="534.7604166666666" y1="254.348" x2="534.7604166666666" y2="260.348" stroke="#78909c" stroke-dasharray="0" class="apexcharts-xaxis-tick"></line><line id="SvgjsLine2112" x1="623.8871527777777" y1="254.348" x2="623.8871527777777" y2="260.348" stroke="#78909c" stroke-dasharray="0" class="apexcharts-xaxis-tick"></line><line id="SvgjsLine2113" x1="713.0138888888888" y1="254.348" x2="713.0138888888888" y2="260.348" stroke="#78909c" stroke-dasharray="0" class="apexcharts-xaxis-tick"></line><line id="SvgjsLine2122" x1="0" y1="253.348" x2="802.140625" y2="253.348" stroke="transparent" stroke-dasharray="0"></line><line id="SvgjsLine2121" x1="0" y1="1" x2="0" y2="253.348" stroke="transparent" stroke-dasharray="0"></line></g><g id="SvgjsG2048" class="apexcharts-bar-series apexcharts-plot-series"><g id="SvgjsG2049" class="apexcharts-series" rel="1" seriesName="NetxProfit" data:realIndex="0"><path id="apexcharts-bar-area-0" d="M 20.053515625 253.348L 20.053515625 165.58119644097223Q 31.30844184027778 155.32627022569446 42.56336805555556 165.58119644097223L 42.56336805555556 253.348L 19.053515625 253.348" fill="rgba(0,143,251,1)" fill-opacity="1" stroke="transparent" stroke-opacity="1" stroke-linecap="butt" stroke-width="2" stroke-dasharray="0" class="apexcharts-bar-area" index="0" clip-path="url(#gridRectMaskd6ske6zc)" pathTo="M 20.053515625 253.348L 20.053515625 165.58119644097223Q 31.30844184027778 155.32627022569446 42.56336805555556 165.58119644097223L 42.56336805555556 253.348L 19.053515625 253.348" pathFrom="M 20.053515625 253.348L 20.053515625 253.348L 42.56336805555556 253.348L 42.56336805555556 253.348L 19.053515625 253.348" cy="160.45373333333333" cx="108.18025173611112" j="0" val="44" barHeight="92.89426666666667" barWidth="24.509852430555558"></path><path id="apexcharts-bar-area-0" d="M 109.18025173611112 253.348L 109.18025173611112 142.35762977430556Q 120.4351779513889 132.1027035590278 131.69010416666669 142.35762977430556L 131.69010416666669 253.348L 108.18025173611112 253.348" fill="rgba(0,143,251,1)" fill-opacity="1" stroke="transparent" stroke-opacity="1" stroke-linecap="butt" stroke-width="2" stroke-dasharray="0" class="apexcharts-bar-area" index="0" clip-path="url(#gridRectMaskd6ske6zc)" pathTo="M 109.18025173611112 253.348L 109.18025173611112 142.35762977430556Q 120.4351779513889 132.1027035590278 131.69010416666669 142.35762977430556L 131.69010416666669 253.348L 108.18025173611112 253.348" pathFrom="M 109.18025173611112 253.348L 109.18025173611112 253.348L 131.69010416666669 253.348L 131.69010416666669 253.348L 108.18025173611112 253.348" cy="137.23016666666666" cx="197.30698784722222" j="1" val="55" barHeight="116.11783333333334" barWidth="24.509852430555558"></path><path id="apexcharts-bar-area-0" d="M 198.30698784722222 253.348L 198.30698784722222 138.1351631076389Q 209.5619140625 127.88023689236113 220.81684027777777 138.1351631076389L 220.81684027777777 253.348L 197.30698784722222 253.348" fill="rgba(0,143,251,1)" fill-opacity="1" stroke="transparent" stroke-opacity="1" stroke-linecap="butt" stroke-width="2" stroke-dasharray="0" class="apexcharts-bar-area" index="0" clip-path="url(#gridRectMaskd6ske6zc)" pathTo="M 198.30698784722222 253.348L 198.30698784722222 138.1351631076389Q 209.5619140625 127.88023689236113 220.81684027777777 138.1351631076389L 220.81684027777777 253.348L 197.30698784722222 253.348" pathFrom="M 198.30698784722222 253.348L 198.30698784722222 253.348L 220.81684027777777 253.348L 220.81684027777777 253.348L 197.30698784722222 253.348" cy="133.0077" cx="286.4337239583333" j="2" val="57" barHeight="120.34030000000001" barWidth="24.509852430555558"></path><path id="apexcharts-bar-area-0" d="M 287.4337239583333 253.348L 287.4337239583333 140.24639644097226Q 298.6886501736111 129.99147022569448 309.94357638888886 140.24639644097226L 309.94357638888886 253.348L 286.4337239583333 253.348" fill="rgba(0,143,251,1)" fill-opacity="1" stroke="transparent" stroke-opacity="1" stroke-linecap="butt" stroke-width="2" stroke-dasharray="0" class="apexcharts-bar-area" index="0" clip-path="url(#gridRectMaskd6ske6zc)" pathTo="M 287.4337239583333 253.348L 287.4337239583333 140.24639644097226Q 298.6886501736111 129.99147022569448 309.94357638888886 140.24639644097226L 309.94357638888886 253.348L 286.4337239583333 253.348" pathFrom="M 287.4337239583333 253.348L 287.4337239583333 253.348L 309.94357638888886 253.348L 309.94357638888886 253.348L 286.4337239583333 253.348" cy="135.11893333333336" cx="375.5604600694444" j="3" val="56" barHeight="118.22906666666667" barWidth="24.509852430555558"></path><path id="apexcharts-bar-area-0" d="M 376.5604600694444 253.348L 376.5604600694444 129.69022977430558Q 387.8153862847222 119.4353035590278 399.07031249999994 129.69022977430558L 399.07031249999994 253.348L 375.5604600694444 253.348" fill="rgba(0,143,251,1)" fill-opacity="1" stroke="transparent" stroke-opacity="1" stroke-linecap="butt" stroke-width="2" stroke-dasharray="0" class="apexcharts-bar-area" index="0" clip-path="url(#gridRectMaskd6ske6zc)" pathTo="M 376.5604600694444 253.348L 376.5604600694444 129.69022977430558Q 387.8153862847222 119.4353035590278 399.07031249999994 129.69022977430558L 399.07031249999994 253.348L 375.5604600694444 253.348" pathFrom="M 376.5604600694444 253.348L 376.5604600694444 253.348L 399.07031249999994 253.348L 399.07031249999994 253.348L 375.5604600694444 253.348" cy="124.56276666666668" cx="464.6871961805555" j="4" val="61" barHeight="128.78523333333334" barWidth="24.509852430555558"></path><path id="apexcharts-bar-area-0" d="M 465.6871961805555 253.348L 465.6871961805555 136.02392977430557Q 476.9421223958333 125.7690035590278 488.19704861111103 136.02392977430557L 488.19704861111103 253.348L 464.6871961805555 253.348" fill="rgba(0,143,251,1)" fill-opacity="1" stroke="transparent" stroke-opacity="1" stroke-linecap="butt" stroke-width="2" stroke-dasharray="0" class="apexcharts-bar-area" index="0" clip-path="url(#gridRectMaskd6ske6zc)" pathTo="M 465.6871961805555 253.348L 465.6871961805555 136.02392977430557Q 476.9421223958333 125.7690035590278 488.19704861111103 136.02392977430557L 488.19704861111103 253.348L 464.6871961805555 253.348" pathFrom="M 465.6871961805555 253.348L 465.6871961805555 253.348L 488.19704861111103 253.348L 488.19704861111103 253.348L 464.6871961805555 253.348" cy="130.89646666666667" cx="553.8139322916666" j="5" val="58" barHeight="122.45153333333334" barWidth="24.509852430555558"></path><path id="apexcharts-bar-area-0" d="M 554.8139322916666 253.348L 554.8139322916666 125.4677631076389Q 566.0688585069444 115.21283689236112 577.3237847222222 125.4677631076389L 577.3237847222222 253.348L 553.8139322916666 253.348" fill="rgba(0,143,251,1)" fill-opacity="1" stroke="transparent" stroke-opacity="1" stroke-linecap="butt" stroke-width="2" stroke-dasharray="0" class="apexcharts-bar-area" index="0" clip-path="url(#gridRectMaskd6ske6zc)" pathTo="M 554.8139322916666 253.348L 554.8139322916666 125.4677631076389Q 566.0688585069444 115.21283689236112 577.3237847222222 125.4677631076389L 577.3237847222222 253.348L 553.8139322916666 253.348" pathFrom="M 554.8139322916666 253.348L 554.8139322916666 253.348L 577.3237847222222 253.348L 577.3237847222222 253.348L 553.8139322916666 253.348" cy="120.34030000000001" cx="642.9406684027776" j="6" val="63" barHeight="133.0077" barWidth="24.509852430555558"></path><path id="apexcharts-bar-area-0" d="M 643.9406684027776 253.348L 643.9406684027776 131.8014631076389Q 655.1955946180555 121.54653689236113 666.4505208333333 131.8014631076389L 666.4505208333333 253.348L 642.9406684027776 253.348" fill="rgba(0,143,251,1)" fill-opacity="1" stroke="transparent" stroke-opacity="1" stroke-linecap="butt" stroke-width="2" stroke-dasharray="0" class="apexcharts-bar-area" index="0" clip-path="url(#gridRectMaskd6ske6zc)" pathTo="M 643.9406684027776 253.348L 643.9406684027776 131.8014631076389Q 655.1955946180555 121.54653689236113 666.4505208333333 131.8014631076389L 666.4505208333333 253.348L 642.9406684027776 253.348" pathFrom="M 643.9406684027776 253.348L 643.9406684027776 253.348L 666.4505208333333 253.348L 666.4505208333333 253.348L 642.9406684027776 253.348" cy="126.674" cx="732.0674045138887" j="7" val="60" barHeight="126.674" barWidth="24.509852430555558"></path><path id="apexcharts-bar-area-0" d="M 733.0674045138887 253.348L 733.0674045138887 119.13406310763888Q 744.3223307291665 108.8791368923611 755.5772569444443 119.13406310763888L 755.5772569444443 253.348L 732.0674045138887 253.348" fill="rgba(0,143,251,1)" fill-opacity="1" stroke="transparent" stroke-opacity="1" stroke-linecap="butt" stroke-width="2" stroke-dasharray="0" class="apexcharts-bar-area" index="0" clip-path="url(#gridRectMaskd6ske6zc)" pathTo="M 733.0674045138887 253.348L 733.0674045138887 119.13406310763888Q 744.3223307291665 108.8791368923611 755.5772569444443 119.13406310763888L 755.5772569444443 253.348L 732.0674045138887 253.348" pathFrom="M 733.0674045138887 253.348L 733.0674045138887 253.348L 755.5772569444443 253.348L 755.5772569444443 253.348L 732.0674045138887 253.348" cy="114.00659999999999" cx="821.1941406249998" j="8" val="66" barHeight="139.34140000000002" barWidth="24.509852430555558"></path><g id="SvgjsG2050" class="apexcharts-datalabels"></g></g><g id="SvgjsG2060" class="apexcharts-series" rel="2" seriesName="Revenue" data:realIndex="1"><path id="apexcharts-bar-area-1" d="M 44.56336805555556 253.348L 44.56336805555556 98.02172977430557Q 55.818294270833334 87.76680355902779 67.07322048611111 98.02172977430557L 67.07322048611111 253.348L 43.56336805555556 253.348" fill="rgba(0,227,150,1)" fill-opacity="1" stroke="transparent" stroke-opacity="1" stroke-linecap="butt" stroke-width="2" stroke-dasharray="0" class="apexcharts-bar-area" index="1" clip-path="url(#gridRectMaskd6ske6zc)" pathTo="M 44.56336805555556 253.348L 44.56336805555556 98.02172977430557Q 55.818294270833334 87.76680355902779 67.07322048611111 98.02172977430557L 67.07322048611111 253.348L 43.56336805555556 253.348" pathFrom="M 44.56336805555556 253.348L 44.56336805555556 253.348L 67.07322048611111 253.348L 67.07322048611111 253.348L 43.56336805555556 253.348" cy="92.89426666666668" cx="132.69010416666669" j="0" val="76" barHeight="160.45373333333333" barWidth="24.509852430555558"></path><path id="apexcharts-bar-area-1" d="M 133.69010416666669 253.348L 133.69010416666669 79.02062977430556Q 144.94503038194446 68.76570355902778 156.19995659722224 79.02062977430556L 156.19995659722224 253.348L 132.69010416666669 253.348" fill="rgba(0,227,150,1)" fill-opacity="1" stroke="transparent" stroke-opacity="1" stroke-linecap="butt" stroke-width="2" stroke-dasharray="0" class="apexcharts-bar-area" index="1" clip-path="url(#gridRectMaskd6ske6zc)" pathTo="M 133.69010416666669 253.348L 133.69010416666669 79.02062977430556Q 144.94503038194446 68.76570355902778 156.19995659722224 79.02062977430556L 156.19995659722224 253.348L 132.69010416666669 253.348" pathFrom="M 133.69010416666669 253.348L 133.69010416666669 253.348L 156.19995659722224 253.348L 156.19995659722224 253.348L 132.69010416666669 253.348" cy="73.89316666666667" cx="221.81684027777777" j="1" val="85" barHeight="179.45483333333334" barWidth="24.509852430555558"></path><path id="apexcharts-bar-area-1" d="M 222.81684027777777 253.348L 222.81684027777777 45.240896440972236Q 234.07176649305555 34.98597022569446 245.32669270833333 45.240896440972236L 245.32669270833333 253.348L 221.81684027777777 253.348" fill="rgba(0,227,150,1)" fill-opacity="1" stroke="transparent" stroke-opacity="1" stroke-linecap="butt" stroke-width="2" stroke-dasharray="0" class="apexcharts-bar-area" index="1" clip-path="url(#gridRectMaskd6ske6zc)" pathTo="M 222.81684027777777 253.348L 222.81684027777777 45.240896440972236Q 234.07176649305555 34.98597022569446 245.32669270833333 45.240896440972236L 245.32669270833333 253.348L 221.81684027777777 253.348" pathFrom="M 222.81684027777777 253.348L 222.81684027777777 253.348L 245.32669270833333 253.348L 245.32669270833333 253.348L 221.81684027777777 253.348" cy="40.11343333333335" cx="310.94357638888886" j="2" val="101" barHeight="213.23456666666667" barWidth="24.509852430555558"></path><path id="apexcharts-bar-area-1" d="M 311.94357638888886 253.348L 311.94357638888886 51.57459644097223Q 323.19850260416666 41.31967022569445 334.4534288194444 51.57459644097223L 334.4534288194444 253.348L 310.94357638888886 253.348" fill="rgba(0,227,150,1)" fill-opacity="1" stroke="transparent" stroke-opacity="1" stroke-linecap="butt" stroke-width="2" stroke-dasharray="0" class="apexcharts-bar-area" index="1" clip-path="url(#gridRectMaskd6ske6zc)" pathTo="M 311.94357638888886 253.348L 311.94357638888886 51.57459644097223Q 323.19850260416666 41.31967022569445 334.4534288194444 51.57459644097223L 334.4534288194444 253.348L 310.94357638888886 253.348" pathFrom="M 311.94357638888886 253.348L 311.94357638888886 253.348L 334.4534288194444 253.348L 334.4534288194444 253.348L 310.94357638888886 253.348" cy="46.44713333333334" cx="400.07031249999994" j="3" val="98" barHeight="206.90086666666667" barWidth="24.509852430555558"></path><path id="apexcharts-bar-area-1" d="M 401.07031249999994 253.348L 401.07031249999994 74.7981631076389Q 412.32523871527775 64.54323689236112 423.5801649305555 74.7981631076389L 423.5801649305555 253.348L 400.07031249999994 253.348" fill="rgba(0,227,150,1)" fill-opacity="1" stroke="transparent" stroke-opacity="1" stroke-linecap="butt" stroke-width="2" stroke-dasharray="0" class="apexcharts-bar-area" index="1" clip-path="url(#gridRectMaskd6ske6zc)" pathTo="M 401.07031249999994 253.348L 401.07031249999994 74.7981631076389Q 412.32523871527775 64.54323689236112 423.5801649305555 74.7981631076389L 423.5801649305555 253.348L 400.07031249999994 253.348" pathFrom="M 401.07031249999994 253.348L 401.07031249999994 253.348L 423.5801649305555 253.348L 423.5801649305555 253.348L 400.07031249999994 253.348" cy="69.67070000000001" cx="489.19704861111103" j="4" val="87" barHeight="183.6773" barWidth="24.509852430555558"></path><path id="apexcharts-bar-area-1" d="M 490.19704861111103 253.348L 490.19704861111103 36.79596310763888Q 501.45197482638883 26.541036892361106 512.7069010416666 36.79596310763888L 512.7069010416666 253.348L 489.19704861111103 253.348" fill="rgba(0,227,150,1)" fill-opacity="1" stroke="transparent" stroke-opacity="1" stroke-linecap="butt" stroke-width="2" stroke-dasharray="0" class="apexcharts-bar-area" index="1" clip-path="url(#gridRectMaskd6ske6zc)" pathTo="M 490.19704861111103 253.348L 490.19704861111103 36.79596310763888Q 501.45197482638883 26.541036892361106 512.7069010416666 36.79596310763888L 512.7069010416666 253.348L 489.19704861111103 253.348" pathFrom="M 490.19704861111103 253.348L 490.19704861111103 253.348L 512.7069010416666 253.348L 512.7069010416666 253.348L 489.19704861111103 253.348" cy="31.668499999999995" cx="578.3237847222222" j="5" val="105" barHeight="221.67950000000002" barWidth="24.509852430555558"></path><path id="apexcharts-bar-area-1" d="M 579.3237847222222 253.348L 579.3237847222222 66.35322977430555Q 590.5787109375 56.09830355902777 601.8336371527778 66.35322977430555L 601.8336371527778 253.348L 578.3237847222222 253.348" fill="rgba(0,227,150,1)" fill-opacity="1" stroke="transparent" stroke-opacity="1" stroke-linecap="butt" stroke-width="2" stroke-dasharray="0" class="apexcharts-bar-area" index="1" clip-path="url(#gridRectMaskd6ske6zc)" pathTo="M 579.3237847222222 253.348L 579.3237847222222 66.35322977430555Q 590.5787109375 56.09830355902777 601.8336371527778 66.35322977430555L 601.8336371527778 253.348L 578.3237847222222 253.348" pathFrom="M 579.3237847222222 253.348L 579.3237847222222 253.348L 601.8336371527778 253.348L 601.8336371527778 253.348L 578.3237847222222 253.348" cy="61.22576666666666" cx="667.4505208333333" j="6" val="91" barHeight="192.12223333333336" barWidth="24.509852430555558"></path><path id="apexcharts-bar-area-1" d="M 668.4505208333333 253.348L 668.4505208333333 17.794863107638875Q 679.7054470486111 7.539936892361096 690.9603732638889 17.794863107638875L 690.9603732638889 253.348L 667.4505208333333 253.348" fill="rgba(0,227,150,1)" fill-opacity="1" stroke="transparent" stroke-opacity="1" stroke-linecap="butt" stroke-width="2" stroke-dasharray="0" class="apexcharts-bar-area" index="1" clip-path="url(#gridRectMaskd6ske6zc)" pathTo="M 668.4505208333333 253.348L 668.4505208333333 17.794863107638875Q 679.7054470486111 7.539936892361096 690.9603732638889 17.794863107638875L 690.9603732638889 253.348L 667.4505208333333 253.348" pathFrom="M 668.4505208333333 253.348L 668.4505208333333 253.348L 690.9603732638889 253.348L 690.9603732638889 253.348L 667.4505208333333 253.348" cy="12.667399999999986" cx="756.5772569444443" j="7" val="114" barHeight="240.68060000000003" barWidth="24.509852430555558"></path><path id="apexcharts-bar-area-1" d="M 757.5772569444443 253.348L 757.5772569444443 60.01952977430555Q 768.8321831597221 49.764603559027776 780.087109375 60.01952977430555L 780.087109375 253.348L 756.5772569444443 253.348" fill="rgba(0,227,150,1)" fill-opacity="1" stroke="transparent" stroke-opacity="1" stroke-linecap="butt" stroke-width="2" stroke-dasharray="0" class="apexcharts-bar-area" index="1" clip-path="url(#gridRectMaskd6ske6zc)" pathTo="M 757.5772569444443 253.348L 757.5772569444443 60.01952977430555Q 768.8321831597221 49.764603559027776 780.087109375 60.01952977430555L 780.087109375 253.348L 756.5772569444443 253.348" pathFrom="M 757.5772569444443 253.348L 757.5772569444443 253.348L 780.087109375 253.348L 780.087109375 253.348L 756.5772569444443 253.348" cy="54.892066666666665" cx="845.7039930555554" j="8" val="94" barHeight="198.45593333333335" barWidth="24.509852430555558"></path><g id="SvgjsG2061" class="apexcharts-datalabels"></g></g></g><line id="SvgjsLine2123" x1="0" y1="0" x2="802.140625" y2="0" stroke="#b6b6b6" stroke-dasharray="0" stroke-width="1" class="apexcharts-ycrosshairs"></line><line id="SvgjsLine2124" x1="0" y1="0" x2="802.140625" y2="0" stroke-dasharray="0" stroke-width="0" class="apexcharts-ycrosshairs-hidden"></line><g id="SvgjsG2125" class="apexcharts-yaxis-annotations"></g><g id="SvgjsG2126" class="apexcharts-xaxis-annotations"></g><g id="SvgjsG2127" class="apexcharts-point-annotations"></g></g><g id="SvgjsG2092" class="apexcharts-yaxis" rel="0" transform="translate(41.859375, 0)"><g id="SvgjsG2093" class="apexcharts-yaxis-texts-g"><text id="SvgjsText2094" font-family="Poppins', sans-serif" x="20" y="41.6" text-anchor="end" dominant-baseline="auto" font-size="11px" fill="#373d3f" class="apexcharts-yaxis-label " style="font-family: Poppins', sans-serif;">120</text><text id="SvgjsText2095" font-family="Poppins', sans-serif" x="20" y="83.92466666666667" text-anchor="end" dominant-baseline="auto" font-size="11px" fill="#373d3f" class="apexcharts-yaxis-label " style="font-family: Poppins', sans-serif;">100</text><text id="SvgjsText2096" font-family="Poppins', sans-serif" x="20" y="126.24933333333334" text-anchor="end" dominant-baseline="auto" font-size="11px" fill="#373d3f" class="apexcharts-yaxis-label " style="font-family: Poppins', sans-serif;">80</text><text id="SvgjsText2097" font-family="Poppins', sans-serif" x="20" y="168.574" text-anchor="end" dominant-baseline="auto" font-size="11px" fill="#373d3f" class="apexcharts-yaxis-label " style="font-family: Poppins', sans-serif;">60</text><text id="SvgjsText2098" font-family="Poppins', sans-serif" x="20" y="210.89866666666668" text-anchor="end" dominant-baseline="auto" font-size="11px" fill="#373d3f" class="apexcharts-yaxis-label " style="font-family: Poppins', sans-serif;">40</text><text id="SvgjsText2099" font-family="Poppins', sans-serif" x="20" y="253.22333333333336" text-anchor="end" dominant-baseline="auto" font-size="11px" fill="#373d3f" class="apexcharts-yaxis-label " style="font-family: Poppins', sans-serif;">20</text><text id="SvgjsText2100" font-family="Poppins', sans-serif" x="20" y="295.54800000000006" text-anchor="end" dominant-baseline="auto" font-size="11px" fill="#373d3f" class="apexcharts-yaxis-label " style="font-family: Poppins', sans-serif;">0</text></g><g id="SvgjsG2101" class="apexcharts-yaxis-title"><text id="SvgjsText2102" font-family="Poppins', sans-serif" x="22.0234375" y="166.674" text-anchor="end" dominant-baseline="auto" font-size="11px" fill="#373d3f" class="apexcharts-yaxis-title-text " style="font-family: Poppins', sans-serif;" transform="rotate(-90 -14.859375 162.6739959716797)">$ (thousands)</text></g></g></svg><div class="apexcharts-tooltip light"><div class="apexcharts-tooltip-title" style="font-family: Poppins', sans-serif; font-size: 12px;"></div><div class="apexcharts-tooltip-series-group"><span class="apexcharts-tooltip-marker" style="background-color: rgb(0, 143, 251);"></span><div class="apexcharts-tooltip-text" style="font-family: Poppins', sans-serif; font-size: 12px;"><div class="apexcharts-tooltip-y-group"><span class="apexcharts-tooltip-text-label"></span><span class="apexcharts-tooltip-text-value"></span></div><div class="apexcharts-tooltip-z-group"><span class="apexcharts-tooltip-text-z-label"></span><span class="apexcharts-tooltip-text-z-value"></span></div></div></div><div class="apexcharts-tooltip-series-group"><span class="apexcharts-tooltip-marker" style="background-color: rgb(0, 227, 150);"></span><div class="apexcharts-tooltip-text" style="font-family: Poppins', sans-serif; font-size: 12px;"><div class="apexcharts-tooltip-y-group"><span class="apexcharts-tooltip-text-label"></span><span class="apexcharts-tooltip-text-value"></span></div><div class="apexcharts-tooltip-z-group"><span class="apexcharts-tooltip-text-z-label"></span><span class="apexcharts-tooltip-text-z-value"></span></div></div></div></div></div></div>

                                    
                                <div class="resize-triggers"><div class="expand-trigger"><div style="width: 928px; height: 447px;"></div></div><div class="contract-trigger"></div></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 class="col-xl-8 col-lg-12 col-md-12 col-sm-12 col-12">
                <div class="row widget-statistic">
                    <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-12 layout-spacing">
                        <div class="widget widget-one_hybrid widget-followers">
                            <div class="widget-heading">
                                <div class="w-title">
                                    <div class="w-icon">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-users">
                                            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                                            <circle cx="9" cy="7" r="4"></circle>
                                            <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
                                            <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
                                        </svg>
                                    </div>
                                    <div class="">
                                        <p class="w-value">31.6K</p>
                                        <h5 class="">Followers</h5>
                                    </div>
                                </div>
                            </div>
                            <div class="widget-content">
                                <div class="w-chart" style="height:100%">
                                    <div id="hybrid_followers"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-12 layout-spacing">
                        <div class="widget widget-one_hybrid widget-referral">
                            <div class="widget-heading">
                                <div class="w-title">
                                    <div class="w-icon">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-link">
                                            <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
                                            <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
                                        </svg>
                                    </div>
                                    <div class="">
                                        <p class="w-value">1,900</p>
                                        <h5 class="">Referral</h5>
                                    </div>
                                </div>
                            </div>
                            <div class="widget-content">
                                <div class="w-chart">
                                    <div id="hybrid_followers1"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-12 layout-spacing">
                        <div class="widget widget-one_hybrid widget-engagement">
                            <div class="widget-heading">
                                <div class="w-title">
                                    <div class="w-icon">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-message-circle">
                                            <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path>
                                        </svg>
                                    </div>
                                    <div class="">
                                        <p class="w-value">18.2%</p>
                                        <h5 class="">Engagement</h5>
                                    </div>
                                </div>
                            </div>
                            <div class="widget-content">
                                <div class="w-chart">
                                    <div id="hybrid_followers3"></div>
                                </div>
                            </div>
                        </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) {
                        count = result.rides;
                        vehicles = result.vehicleTypes;
                        riders = result.riders;
                        drivers = result.drivers;
                        // console.log(result);
                    }
                });

                //Display Rides Chart
                /*
      ===================================
          Unique Visitors | Options
      ===================================
  */
                //   console.log(count);
                var d_1options1 = {
                    chart: {
                        height: 350,
                        type: 'bar',
                        toolbar: {
                            show: false,
                        }
                    },
                    colors: ['#1ebf98'],
                    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: 'Rides',
                            //   data: [58, 44, 55, 57, 56, 61, 58, 63, 60, 66, 56, 63]
                            data: count
                        }
                        //    {
                        //     name: 'Organic',
                        //     data: [91, 76, 85, 101, 98, 87, 105, 91, 114, 94, 66, 70]
                        //   }
                    ],
                    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();

                /*
      ==================================
         Vehicle Types | 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: undefined,
                                        offsetY: -10
                                    },
                                    value: {
                                        show: true,
                                        fontSize: '26px',
                                        fontFamily: 'Nunito, sans-serif',
                                        color: '20',
                                        offsetY: 16,
                                        formatter: function(val) {
                                            return val
                                        }
                                    },
                                    total: {
                                        show: true,
                                        showAlways: true,
                                        label: 'Total',
                                        color: '#888ea8',
                                        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,
                    responsive: [{
                        breakpoint: 1599,
                        options: {
                            chart: {
                                width: '350px',
                                height: '400px'
                            },
                            legend: {
                                position: 'bottom'
                            }
                        },

                        breakpoint: 1439,
                        options: {
                            chart: {
                                width: '250px',
                                height: '390px'
                            },
                            legend: {
                                position: 'bottom'
                            },
                            plotOptions: {
                                pie: {
                                    donut: {
                                        size: '65%',
                                    }
                                }
                            }
                        },
                    }]
                }
                /*
      =================================
         Vehicle types | 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