@extends('admin.layout')

@section('content')
    <div class="container-fluid" ng-controller="jobsController">
        @php
            $status_title = \App\Models\Job::$status_title;
            $paid_title = \App\Models\Job::$paid_title;
        @endphp
        {{--<div class="row">--}}
            {{--<div class="col-md-6 col-lg-4">--}}
                {{--<div class="statistic__item">--}}
                    {{--<h2 class="number">{<>statistic.total<>}</h2>--}}
                    {{--<span class="desc">Công việc</span>--}}
                    {{--<div class="icon">--}}
                        {{--<i class="zmdi zmdi-hospital"></i>--}}
                    {{--</div>--}}
                {{--</div>--}}
            {{--</div>--}}
            {{--<div class="col-md-6 col-lg-4">--}}
                {{--<div class="statistic__item">--}}
                    {{--<h2 class="number">{<>statistic['{{\App\Models\Job::STATUS_PENDING}}'] || 0<>}</h2>--}}
                    {{--<span class="desc">Đang chờ</span>--}}
                    {{--<div class="icon">--}}
                        {{--<i class="zmdi zmdi-refresh"></i>--}}
                    {{--</div>--}}
                {{--</div>--}}
            {{--</div>--}}
            {{--<div class="col-md-6 col-lg-4">--}}
                {{--<div class="statistic__item">--}}
                    {{--<h2 class="number">{<>statistic['{{\App\Models\Job::STATUS_PROCESS}}'] || 0<>}</h2>--}}
                    {{--<span class="desc">Đang thực hiện</span>--}}
                    {{--<div class="icon">--}}
                        {{--<i class="zmdi zmdi-dot-circle-alt"></i>--}}
                    {{--</div>--}}
                {{--</div>--}}
            {{--</div>--}}
            {{--<div class="col-md-6 col-lg-4">--}}
                {{--<div class="statistic__item">--}}
                    {{--<h2 class="number">{<>statistic['{{\App\Models\Job::STATUS_COMPLETE}}'] || 0<>}</h2>--}}
                    {{--<span class="desc">Đã hoàn thành</span>--}}
                    {{--<div class="icon">--}}
                        {{--<i class="zmdi zmdi-check"></i>--}}
                    {{--</div>--}}
                {{--</div>--}}
            {{--</div>--}}
            {{--<div class="col-md-6 col-lg-4">--}}
                {{--<div class="statistic__item">--}}
                    {{--<h2 class="number">{<>statistic['{{\App\Models\Job::STATUS_CANCEL}}'] || 0<>}</h2>--}}
                    {{--<span class="desc">Bị hủy</span>--}}
                    {{--<div class="icon">--}}
                        {{--<i class="zmdi zmdi-alert-triangle"></i>--}}
                    {{--</div>--}}
                {{--</div>--}}
            {{--</div>--}}
        {{--</div>--}}
        <div class="row">
            <div class="col-md-12 m-b-30">
                <!-- DATA TABLE -->
                <a class="au-btn au-btn-icon au-btn--green au-btn--small" href="add-job">
                    <i class="zmdi zmdi-plus"></i>Công việc mới
                </a>
                <div class="table-data__tool">
                    <div class="table-data__tool-left">
                        <form class="form-header">
                            <input class="au-input au-input--xl" type="text" ng-model="config.search" ng-keyup="refresh($event)" placeholder="Tìm kiếm công việc..." />
                            <button class="au-btn--submit" ng-click="refresh()" type="button">
                                <i class="zmdi zmdi-search"></i>
                            </button>
                        </form>
                    </div>                    
                    <div class="table-data__tool-right">                        
                        <div class="rs-select2--light rs-select2--md">
                            <select class="js-select2" ng-model="config.order_by" ng-change="$watch(config.page = 1, refresh())">
                                <option value="desc">Từ mới -> cũ</option>
                                <option value="asc">Từ cũ -> mới</option>
                            </select>
                            <div class="dropDownSelect2"></div>
                        </div>                        
                        <div class="rs-select2--light rs-select2--md">
                            <select class="js-select2" name="status" ng-model="config.paid" ng-change="$watch(config.page = 1, refresh())">
                                <option value="">Tất cả công việc</option>
                                <option value="{{\App\Models\Job::NOT_PAID}}">{{$paid_title[\App\Models\Job::NOT_PAID]}}</option>
                                <option value="{{\App\Models\Job::PAID}}">{{$paid_title[\App\Models\Job::PAID]}}</option>
                            </select>
                            <div class="dropDownSelect2"></div>
                        </div>
                    </div>
                </div>
                <div class="table-responsive table-responsive-data2">
                    <table class="table table-data2">
                        <thead>
                        <tr>
                            <th>#</th>
                            <th>Dịch vụ</th>
                            <th>Người yêu cầu</th>
                            <th>Điện thoại</th>
                            <th>Người dùng</th>
                            <th>Giá</th>
                            <th>Ngày kết thúc</th>
                            <th>Trạng thái</th>
                            <th></th>
                        </tr>
                        </thead>
                        <tbody>
                            <tr class="tr-shadow" ng-repeat="job in jobs">
                                <td>#{<>job.id<>}</td>
                                <td>{<>job.get_service.name<>}</td>
                                <td>{<>job.requester.name<>}</td>
                                <td>{<>job.requester.phone_number<>}</td>
                                <td>
                                    <span ng-if="job.fm_id == 0">{<>job.requester.name<>}</span>
                                    <span ng-if="job.fm_id != 0">{<>job.get_family.name<>}</span>
                                </td>
                                <td>{<>job.price | currency : '' : 0<>}</td>
                                <td>{<>job.day_end<>}</td>
                                <td>
                                    <span ng-if="job.paid == {{\App\Models\Job::NOT_PAID}}" class="text-warning">{{$paid_title[\App\Models\Job::NOT_PAID]}}</span>
                                    <span ng-if="job.paid == {{\App\Models\Job::PAID}}" class="text-success">{{$paid_title[\App\Models\Job::PAID]}}</span>
                                </td>

                                <td>
                                    <div class="table-data-feature">
                                        <a class="item" href="edit-job?id={<>job.id<>}" data-toggle="tooltip" data-placement="top" title="Chi tiết">
                                            <i class="zmdi zmdi-edit"></i>
                                        </a>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="m-b-10 m-t-10" ng-if="meta.last_page > 1">
                        <ul class="pagination">
                            <li class="page-item {<>config.page == 1 ? 'disabled':''<>}">
                                <button class="page-link" ng-click="$watch(config.page = config.page-1, refresh())">Prev</button>
                            </li>
                            <li class="page-item"><span class="page-link disabled">{<>meta.current_page<>}</span></li>
                            <li class="page-item {<>config.page == meta.last_page ? 'disabled':''<>}">
                                <button class="page-link" ng-click="$watch(config.page = config.page+1, refresh())">Next</button>
                            </li>
                            <li class="pull-right"><span>&nbsp; Go to page&nbsp;</span><input class="text-center" type="number" style="width: 40px;height: 38px" min="1" ng-model="config.page" ng-keyup="refresh($event)" /> / {<>meta.last_page<>}</li>
                        </ul>

                    </div>
                </div>
                <!-- END DATA TABLE -->
            </div>
        </div>

    </div>
@endsection