@extends('admin.layout')

@section('content')
    <main class="container-fluid" ng-controller="dashboardController">
        <div class="table-data__tool-left">
            <input class="au-input au-input--xl date-picker mb-2" id="from-date" type="text" placeholder="Thống kê từ ngày..." />
            <input class="au-input au-input--xl date-picker mb-2" type="text" id="to-date" placeholder="Đến ngày..." />
            <button class="btn btn-primary" ng-click="refreshDashboard()">Thống kê</button>
        </div>
        <div class="card mt-3">

            <div class="card-body">
                <h4 class="card-title">Thống kê người dùng đăng ký</h4>
                <canvas id="user_chart" height="75"></canvas>
            </div>
        </div>

        <div class="card">

            <div class="card-body">
                <h4 class="card-title">Thống kê số công việc được đăng</h4>
                <canvas id="job_chart" height="75"></canvas>
            </div>
        </div>

        <div class="row">
            <div class="col-xl-4 col-md-6 mt-3" style="height: inherit;">
                <div class="top-campaign custom-campaign h-100">
                    <h3 class="title-3 m-b-30">Top khách đặt nhiều</h3>
                        <table class="table table-top-campaign">
                            <tbody id="top_job_user">

                            </tbody>
                        </table>
                </div>
            </div>
            <div class="col-xl-4 col-md-6 mt-3"  style="height: inherit;">
                <div class="top-campaign custom-campaign h-100">
                    <h3 class="title-3 m-b-30">Top doanh thu</h3>
                    <table class="table table-top-campaign">
                        <tbody id="top_revenue_tasker">

                        </tbody>
                    </table>
                </div>
            </div>
            <div class="col-xl-4 col-md-6 mt-3"  style="height: inherit;">
                <div class="top-campaign custom-campaign h-100">
                    <h3 class="title-3 m-b-30">Top hoàn thành</h3>
                    <table class="table table-top-campaign">
                        <tbody id="top_complete_schedule_tasker">

                        </tbody>
                    </table>
                </div>
            </div>

            <div class="col-xl-4 col-md-6 mt-3" style="height: inherit;">
                <div class="top-campaign custom-campaign h-100">
                    <h3 class="title-3 m-b-30">Top giới thiệu</h3>
                    <table class="table table-top-campaign">
                        <tbody id="top_affiliate">

                        </tbody>
                    </table>
                </div>
            </div>

            <div class="col-xl-4 col-md-6 mt-3" style="height: inherit;">
                <div class="top-campaign custom-campaign h-100">
                    <h3 class="title-3 m-b-30">Top hoa hồng</h3>
                    <table class="table table-top-campaign">
                        <tbody id="top_affiliate_revenue">

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </main>

@endsection

@section('custom_script')
    <link href="vendor/datepicker/bootstrap-material-datetimepicker.min.css" rel="stylesheet" media="all">
    <script src="vendor/chartjs/Chart.bundle.min.js"></script>
    <script src="vendor/datepicker/moment-with-locales.js"></script>
    <script src="vendor/datepicker/bootstrap-material-datetimepicker.min.js"></script>
@stop