@extends('layouts.admin.admin-app')
@section('title','Dashboard')
@section('content')
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
<div class="main-content dashboard_page">
    <div class="content_wrapper">
        <div class="content_header">
            <div class="page_title"><h2>Dashboard</h2></div>
        </div>
        <div class="content">
            <div class="row static_row">
                <div class="col">
                    <div class="static_box green d-flex align-items-center bg-white box-shadow ">
                        <div class="icon">
                            <i class="flaticon-man-user"></i>
                        </div>
                        <div class="total">
                            <h3 data-count="{{getUserCountByType('parent')}}">0</h3>
                            <span>Total Customers</span>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="static_box green d-flex align-items-center bg-white box-shadow">
                        <div class="icon">
                            <i class="flaticon-employee"></i>
                        </div>
                        <div class="total">
                            <h3 data-count="{{getUserCountByType('employee')}}">0</h3>
                            <span>Total Employees</span>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="static_box green d-flex align-items-center bg-white box-shadow">
                        <div class="icon">
                            <i class="flaticon-stats"></i>
                        </div>
                        <div class="total">
                            <h3 data-count="{{getTotalEarnings()}}">0</h3>
                            <span>Total Earnings</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="total_jobs">
                <h3 class="sub_title"> Total Jobs</h3>
                <div class="row static_row">
                    <div class="col">
                        <div class="static_box green d-flex align-items-center green bg-white box-shadow ">
                            <div class="icon">
                                <i class="flaticon-work"></i>
                            </div>
                            <div class="total">
                                <h3 data-count="{{getJobCountByType('total')}}">0</h3>
                                <span>Total Jobs</span>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="static_box green d-flex align-items-center bg-white box-shadow">
                            <div class="icon">
                                <i class="flaticon-work"></i>
                            </div>
                            <div class="total">
                                <h3 data-count="{{getJobCountByType('pending')}}">0</h3>
                                <span>Upcoming Jobs</span>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="static_box green d-flex align-items-center bg-white box-shadow">
                            <div class="icon">
                                <i class="flaticon-work"></i>
                            </div>
                            <div class="total">
                                <h3 data-count="{{getJobCountByType('inprogress')}}">0</h3>
                                <span>Ongoing Jobs</span>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="static_box green d-flex align-items-center bg-white box-shadow">
                            <div class="icon">
                                <i class="flaticon-work"></i>
                            </div>
                            <div class="total">
                                <h3 data-count="{{getJobCountByType('cancelled')}}">0</h3>
                                <span>Cancelled Jobs</span>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="static_box green d-flex align-items-center bg-white box-shadow">
                            <div class="icon">
                                <i class="flaticon-work"></i>
                            </div>
                            <div class="total">
                                <h3 data-count="{{getJobCountByType('completed')}}">0</h3>
                                <span>Completed Jobs</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div class="totalsigned_member">
                <div class="page_title d-sm-flex align-items-center mb-3">
                    <h2>Job Counts </h2>
                    <div class="action ml-auto mt-2 mt-sm-0 mb-3 mb-sm-0">
                        <ul class="list-inline mb-0">
                            <li class="list-inline-item">
                                <select class="selectpicker select-custom" title="Select Duration"  data-size="2" id="selDuration" name="selDuration" onchange="load_graph();">
                                    <option value="1">Select Duration</option>
                                    <option value="3">3 Months</option>
                                    <option value="6">6 Months</option>
                                    <option value="12">12 Months</option>
                                </select>
                            </li>
                        </ul>
                    </div>
                </div>
                <!--<div id="JobCountChart" class="common_chart" ></div>-->
                <div class="view_body">
                    <div class="box_wrapper">
                        <canvas id="myChart" class="common_chart" width="1573" height="500" ></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>-->
<script>
    $().ready(function(){
        load_graph();
    })
$('.static_box .total h3').each(function () {
    var $this = $(this),
            countTo = $this.attr('data-count');

    $({countNum: $this.text()}).animate({
        countNum: countTo
    },
            {
                duration: 2300,
                easing: 'linear',
                step: function () {
                    $this.text(Math.floor(this.countNum));
                },
                complete: function () {
                    $this.text(this.countNum);
                }

            });


});

function load_graph() {
    var url = '{{url("admin/load-graph")}}';
    var duration = $("#selDuration").val();
    $.ajax({type: "GET", url: url, data: {duration:duration},
        success: function (response) {
            $("#myChart").html(response);
        }
    });
}
</script>

@endsection