@extends('admin.layout')

@section('content')
    <main class="container-fluid" ng-controller="reportsController">
        <div class="table-data__tool-left mb-2">
            <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="refreshData()">Thống kê</button>
        </div>
        <div class="row">
            <div class="col-md-3 col-sm-6">
                <div class="statistic__item">
                    <h2 class="number">{<>data.total_place_job<>}</h2>
                    <span class="desc">Công việc</span>
                    <div class="icon">
                        <i class="zmdi zmdi-account-o"></i>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6">
                <div class="statistic__item">
                    <h2 class="number">{<>roundAndFormatNumber(data.total_user_revenue)<>}</h2>
                    <span class="desc">Doanh thu</span>
                    <div class="icon">
                        <i class="zmdi zmdi-account-o"></i>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6">
                <div class="statistic__item">
                    <h2 class="number">{<>roundAndFormatNumber(data.total_tasker_salary)<>}</h2>
                    <span class="desc">Trả cho tasker</span>
                    <div class="icon">
                        <i class="zmdi zmdi-account-o"></i>
                    </div>
                </div>
            </div>
{{--            total_user_has_jobs--}}
            <div class="col-md-3 col-sm-6">
                <div class="statistic__item">
                    <h2 class="number">{<>roundAndFormatNumber(data.total_profit)<>}</h2>
                    <span class="desc">Lợi nhuận</span>
                    <div class="icon">
                        <i class="zmdi zmdi-account-o"></i>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6">
                <a href="{{route('users')}}?requested_services=1">
                    <div class="statistic__item">
                        <h2 class="number">{<>data.total_user_has_jobs.toString().formatMoney()<>}</h2>
                        <span class="desc">User đặt lịch trên 2 lần</span>
                        <div class="icon">
                            <i class="zmdi zmdi-account-o"></i>
                        </div>
                    </div>
                </a>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6 col-lg-12 col-xl-6">
                <div class="top-campaign">
                    <h3 class="title-3 m-b-30">Top dịch vụ đặt nhiều</h3>
                    <div class="table-responsive">
                        <table class="table table-top-campaign">
                            <tbody>
                            <tr ng-repeat="job_service in data.top_job_service">
                                <td>
                                    <div class="float-left"><span class="rank-list">{<>$index + 1<>}</span></div>
                                    <div><a class="rank-list-name w-25-ch" href="edit-service?id={<>job_service.get_service_name.id<>}">{<>job_service.get_service_name.name<>}</a></div>
                                </td>
                                <td>{<>job_service.total_job<>}</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="col-md-6 col-lg-12 col-xl-6">
                <div class="top-campaign">
                    <h3 class="title-3 m-b-30">Top DV doanh thu cao</h3>
                    <div class="table-responsive">
                        <table class="table table-top-campaign">
                            <tbody>
                            <tr ng-repeat="job_service in data.top_revenue_service">
                                <td>
                                    <div class="float-left"><span class="rank-list">{<>$index + 1<>}</span></div>
                                    <div><a class="rank-list-name w-25-ch" href="edit-service?id={<>job_service.get_service_name.id<>}">{<>job_service.get_service_name.name<>}</a></div>
                                </td>
                                <td>{<>job_service.total_revenue<>}</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </main>
@stop

@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