@extends('layouts.app', ['pageSlug' => 'dashboard'])
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
    button#refresh {
        padding: 4px 14px;
            cursor:pointer;
    float:right;
    text-align:right;
    color:#fff;
    font-weight:bold;
    border:none;
    text-align:right;
   border-radius:5px;
   margin-left:1rem;
   margin-top:3px;
}


</style>
@section('content')
    <div class="row" >
        <div class="col-12">
            <div class="card card-chart">
                <div class="card-header ">
                    <div class="row">
                        <div class="col-sm-6 text-left">
                            
                            <h5 class="card-category">Total Leads</h5>
                            <h2 class="card-title">Leads Graph Analytics </h2>
                        </div>
                        <div class="col-sm-6">
                            <div class="buttongroup">
                                <button class="card-category btn-info " id="refresh"><i class="fa fa-refresh  text-success" style="font-size:15px;margin-right:5px;"></i>Refresh</button>
                                </div>
                            <div class="btn-group btn-group-toggle float-right" data-toggle="buttons">
                                
                            <label class="btn btn-sm btn-info btn-simple active" id="0">
                                <input type="radio" name="options" checked>
                                 <span class="d-none d-sm-block d-md-block d-lg-block d-xl-block">Leads</span>
                                <span class="d-block d-sm-none">
                                    <i class="tim-icons icon-single-02"></i>
                                </span>
                            </label>
                            <label class="btn btn-sm btn-info btn-simple" id="1">
                                <input type="radio" class="d-none d-sm-none" name="options">
                                <span class="d-none d-sm-block d-md-block d-lg-block d-xl-block">Leads converted</span>
                                <span class="d-block d-sm-none">
                                    <i class="tim-icons icon-gift-2"></i>
                                </span>
                            </label>
                            <!-- <label class="btn btn-sm btn-info btn-simple" id="2">
                                <input type="radio" class="d-none" name="options">
                                <span class="d-none d-sm-block d-md-block d-lg-block d-xl-block">Sessions</span>
                                <span class="d-block d-sm-none">
                                    <i class="tim-icons icon-tap-02"></i>
                                </span>
                            </label> -->
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="chart-area">
                        <canvas id="chartBig1"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-4">
            <div class="card card-chart">
                <div class="card-header">
                    <h5 class="card-category">Total Customer</h5>
                    <h3 class="card-title" id="customer"><i class="tim-icons icon-single-02"></i></h3>
                </div>
                <div class="card-body">
                    <div class="chart-area">
                        <canvas id="chartLinePurple"></canvas>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card card-chart">
                <div class="card-header">
                    <h5 class="card-category">Total Products</h5>
                    <h3 class="card-title" id="products"><i class="tim-icons icon-app"></i></h3>
                </div>
                <div class="card-body">
                    <div class="chart-area">
                        <canvas id="CountryChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card card-chart">
                <div class="card-header">
                    <h5 class="card-category">Total Proposal</h5>
                    <h3 class="card-title" id="proposal"><i class="tim-icons icon-laptop"></i></h3>
                </div>
                <div class="card-body">
                    <div class="chart-area">
                        <canvas id="chartLineGreen"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>
 
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script src="{{ asset('white') }}/js/plugins/chartjs.min.js"></script>
    <script>
        $(document).ready(function() {
        chartdatareload();
          demo.initDashboardPageCharts();
          $.ajax({
      url: 'http://127.0.0.1:8000/api/graphanalyticsdata',
      type: 'GET',
      success: function(data) {
        var proposal=data.proposaltotalcount;
        $("#proposal").text(proposal);
        var products=data.producttotalcount;
        $("#products").text(products);
        var customer=data.customertotalCount;
       var value= $("#customer").text(customer);
         }
        });

        $("#refresh").click(function(){
            chartdatareload();
                        })



        });
    </script>
@endpush