@extends('admin.default')
@section('title', 'Admin | Dealer Reports')
@section('content')	
   <nav class="page-breadcrumb">
      <ol class="breadcrumb">
         <li class="breadcrumb-item"><a href="#">Dashboard</a></li>
         
      </ol>
   </nav>
   <div class="row mb-2">
      <div class="col-md-6">
         <div class="btn-group mr-2" role="group" aria-label="Scroll to Sections">
            <a class="btn btn-dark border-right" href="{{route('dealerActiveStock', ['user_id' => request()->id])}}" >Active Stock</a>
            <a class="btn btn-dark border-right" href="{{route('dealerWallet', request()->id)}}">Wallet</a>
            <a class="btn btn-dark border active" href="{{route('dealerReports', request()->id)}}">Reports</a>
            <a class="btn btn-dark border-right" href="{{route('dealerLegalDocuments', request()->id)}}">Legal Documents</a>
            <a class="btn btn-dark" href="{{route('dealerTransaction', request()->id)}}">Transaction</a>
         </div>
      </div>
      <div class="col-md-6">
      </div>
   </div>
   <div class="row">
      <div class="col-lg-3 col-md-4 col-sm-6 col-12 grid-margin stretch-card">
         <div class="card">
            <div class="card-body">
               <div class="row">
                  <div class="col-md-4 col-sm-4 col-4">
                      <i data-feather="list"  color="#ab8ce4" width="40" height="40"></i>
                  </div>
                  <div class="col-md-8 col-sm-8 col-8 text-center">
                        <h4 class="text-primary">1111</h4>
                        <h6>Total Ads</h6>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6 col-12 grid-margin stretch-card">
         <div class="card">
            <div class="card-body">
               <div class="row">
                  <div class="col-md-4 col-sm-4 col-4">
                      <i data-feather="tv"  color="#ab8ce4" width="40" height="40"></i>
                  </div>
                  <div class="col-md-8 col-sm-8 col-8 text-center">
                        <h4 class="text-primary">1111</h4>
                        <h6>Active Ads</h6>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6 col-12 grid-margin stretch-card">
         <div class="card">
            <div class="card-body">
               <div class="row">
                  <div class="col-md-4 col-sm-4 col-4">
                      <i data-feather="lock"  color="#ab8ce4" width="40" height="40"></i>
                  </div>
                  <div class="col-md-8 col-sm-8 col-8 text-center">
                        <h4 class="text-primary">1111</h4>
                        <h6>Inactive Ads</h6>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6 col-12 grid-margin stretch-card">
         <div class="card">
            <div class="card-body">
               <div class="row">
                  <div class="col-md-4 col-sm-4 col-4">
                      <i data-feather="check"  color="#ab8ce4" width="40" height="40"></i>
                  </div>
                  <div class="col-md-8 col-sm-8 col-8 text-center">
                        <h4 class="text-primary">1111</h4>
                        <h6>Sold Ads</h6>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6 col-12 grid-margin stretch-card">
         <div class="card">
            <div class="card-body">
               <div class="row">
                  <div class="col-md-4 col-sm-4 col-4">
                       <i class="mdi mdi-car" style="line-height:40px;font-size:40px;color:#ab8ce4;"></i>
                  </div>
                  <div class="col-md-8 col-sm-8 col-8 text-center">
                        <h4 class="text-primary">1111</h4>
                        <h6>Average New Vehicles</h6>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6 col-12 grid-margin stretch-card">
         <div class="card">
            <div class="card-body">
               <div class="row">
                  <div class="col-md-4 col-sm-4 col-4">
                       <i data-feather="thumbs-up"  color="#ab8ce4" width="40" height="40"></i>
                  </div>
                  <div class="col-md-8 col-sm-8 col-8 text-center">
                        <h4 class="text-primary">1111</h4>
                        <h6>Average Sold Vehicles</h6>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6 col-12 grid-margin stretch-card">
         <div class="card">
            <div class="card-body">
               <div class="row">
                  <div class="col-md-4 col-sm-4 col-4">
                       <i data-feather="bar-chart-2"  color="#ab8ce4" width="40" height="40"></i>
                  </div>
                  <div class="col-md-8 col-sm-8 col-8 text-center">
                        <h4 class="text-primary">1111</h4>
                        <h6>Average Vehicles Price</h6>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
   <div class="row">
      <div class="col-xl-8 grid-margin stretch-card">
         <div class="card">
            <div class="card-body">
               <h6 class="card-title">traffic</h6>
         <div id="apexLine"></div>
            </div>
         </div>
      </div>
   <div class="col-xl-4 grid-margin stretch-card">
      <div class="card">
         <div class="card-body">
            <h4 class="text-primary my-4">Total Impressions</h4>
            <h4 class="text-success my-4">Total Clicks</h4>
            <h4 class="text-info my-4">Total Inquires</h4>
            <h4 class="text-danger my-4">Total Website Redirect</h4>
            <h4 class="text-warning my-4">Total Profile Impressions</h4>
            <h4 class="text-secondary my-4">Total Profile Clicks</h4>
         </div>
         </div>
      </div>
   </div>
<script type="text/javascript">
   $(document).ready(function() {
      $(function() {
      'use strict';

      // Apex Line chart start
      var options = {
         chart: {
            height: 300,
            type: "line",
            parentHeightOffset: 0
         },
         colors: ["#f77eb9", "#7ee5e5","#4d8af0"],
         grid: {
            borderColor: "rgba(77, 138, 240, .1)",
            padding: {
            bottom: 0
            }
         },
         series: [
            {
            name: "Data a",
            data: [45, 52, 38, 45]
            },
            {
            name: "Data b",
            data: [12, 42, 68, 33]
            },
            {
            name:
               "Data c",
            data: [8, 32, 48, 53]
            }
         ],
         xaxis: {
            type: "datetime",
            categories: ["2015", "2016", "2017", "2018"]
         },
         markers: {
            size: 0
         },
         stroke: {
            width: 3,
            curve: "smooth",
            lineCap: "round"
         },
         legend: {
            show: true,
            position: "top",
            horizontalAlign: 'left',
            containerMargin: {
            top: 30
            }
         },
         responsive: [
            {
            breakpoint: 500,
            options: {
               legend: {
                  fontSize: "11px"
               }
            }
            }
         ]
      };
      var apexLineChart = new ApexCharts(document.querySelector("#apexLine"), options);
      apexLineChart.render();
      // Apex Line chart end
      });
});
</script>
@stop