@extends('layouts.app')

@section('title', 'Worker Status')

@section('style')
<link rel="stylesheet" href="{{ asset('admin/plugins/datatables-bs4/css/dataTables.bootstrap4.css') }}">
@endsection

@section('content')
<!-- Content Header (Page header) -->
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>{{ $user->name }}</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item active">Worker Status</li>
                </ol>
            </div>
        </div>
    </div><!-- /.container-fluid -->
</section>

<!-- Main content -->
<section class="content">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title"> รายการงาน (JOB)</h3>
                </div>
                <!-- /.card-header -->
                <div class="card-body">
                    <ul class="nav nav-tabs" id="custom-content-above-tab" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" id="custom-content-above-home-tab" data-toggle="pill"
                                href="#custom-content-above-home" role="tab" aria-controls="custom-content-above-home"
                                aria-selected="true">งานที่ส่งแล้ว</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="custom-content-above-profile-tab" data-toggle="pill"
                                href="#custom-content-above-profile" role="tab"
                                aria-controls="custom-content-above-profile" aria-selected="false">งานที่ค้าง</a>
                        </li>
                    </ul>
                    <div class="tab-custom-content">
                        <p class="lead mb-0"></p>
                    </div>
                    <div class="tab-content" id="custom-content-above-tabContent">
                        <div class="tab-pane fade show active" id="custom-content-above-home" role="tabpanel"
                            aria-labelledby="custom-content-above-home-tab">
                            <table id="dataTable" class="table table-bordered table-striped table-responsive nowrap"
                                style="width:100%">
                                <thead>
                                    <tr>
                                        <th class="text-center" scope="col">#</th>
                                        <th scope="col"><i class="far fa-calendar-alt"></i> วันที่รับงาน</th>
                                        <th scope="col">เลขที่งาน</th>
                                        <th scope="col"><i class="far fa-calendar-alt"></i> วันที่กำหนดส่ง</th>
                                        <th scope="col">ชื่อ ลูกค้า</th>
                                        <th scope="col">ผู้ว่าจ้าง</th>
                                        <th scope="col">ค่าบริการ</th>
                                        <th scope="col">สถานะการชำระเงิน</th>
                                        <th scope="col">ค่าใช้จ่าย</th>
                                        <th scope="col"><i class="far fa-calendar-alt"></i> วันที่ส่งงาน</th>
                                        <th scope="col">&nbsp;</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                        <div class="tab-pane fade" id="custom-content-above-profile" role="tabpanel"
                            aria-labelledby="custom-content-above-profile-tab">
                            <table id="pendingDataTable"
                                class="table table-bordered table-striped table-responsive nowrap" style="width:100%">
                                <thead>
                                    <tr>
                                        <th class="text-center" scope="col">#</th>
                                        <th scope="col"><i class="far fa-calendar-alt"></i> วันที่รับงาน</th>
                                        <th scope="col">เลขที่งาน</th>
                                        <th scope="col"><i class="far fa-calendar-alt"></i> วันที่กำหนดส่ง</th>
                                        <th scope="col">ชื่อ ลูกค้า</th>
                                        <th scope="col">ผู้ว่าจ้าง</th>
                                        <th scope="col">ค่าบริการ</th>
                                        <th scope="col">สถานะการชำระเงิน</th>
                                        <th scope="col">ค่าใช้จ่าย</th>
                                        <th scope="col">&nbsp;</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>

                </div>
                <!-- /.card-body -->
            </div>
            <!-- /.card -->
        </div>
        <!-- /.col -->
    </div>
    <!-- /.row -->
</section>
<!-- /.content -->
<div class="modal" id="modal-update">
    <div class="modal-dialog">
        <div class="modal-content">
            <form action="{{ route('jobs-assign') }}" method="POST">
                @csrf
                <input type="hidden" id="order_id" name="order_id" value="" />
                <div class="modal-header">
                    <h4 class="modal-title">มอบหมายงานต่อให้</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="name">ผู้รับงานต่อ</label>
                        <select id="user_id" name="user_id" class="form-control" required>
                            <option value=""> -- เลือก -- </option>
                            @foreach(App\User::all() as $user)
                            @if($user->can('Jobs') && Auth::User()->id != $user->id)
                            <option value="{{ $user->id }}"> {{ $user->name }} </option>
                            @endif
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-warning" data-dismiss="modal"><i class="fas fa-ban"
                            style="font-size: 38px;"></i> ยกเลิก</button>
                    <button type="submit" class="btn btn-success"><i class="fa fa-check" style="font-size: 38px;"></i>
                        บันทึก</button>
                </div>
            </form>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->
@endsection

@section('script')
<script src="{{ asset('admin/plugins/datatables/jquery.dataTables.js') }}"></script>
<script src="{{ asset('admin/plugins/datatables-bs4/js/dataTables.bootstrap4.js') }}"></script>
<script>
$('#dataTable').DataTable({
    "paging": true,
    "processing": true,
    "serverSide": true,
    "responsive": true,
    "bFilter": true,
    "ajax": '/api/jobs/{{ $id }}/success-data',
    columns: [{
            data: 'id',
            name: 'id',
            render: function(data, type, row, meta) {
                return meta.row + meta.settings._iDisplayStart + 1;
            }
        },
        {
            data: 'order_date_thai',
            name: 'order_date_thai',
            bSortable: false,
            searchable: false
        },
        {
            data: 'order_no',
            name: 'order_no'
        },
        {
            data: 'end_date_thai',
            name: 'end_date_thai',
            bSortable: false,
            searchable: false
        },
        {
            data: 'customer_name',
            name: 'customer_name'
        },
        {
            data: 'owner_name',
            name: 'owner_name'
        },
        {
            data: null,
            bSortable: false,
            searchable: false,
            render: function(e) {
                return numeral(e.total_cost).format('0,0.00');
            }
        },
        {
            data: null,
            bSortable: false,
            searchable: false,
            render: function(e) {
                var payment_status = '',
                    state = '';
                switch (parseInt(e.payment_status)) {
                    case 0: {
                        payment_status = 'ยังไม่เก็บ';
                        state = 'badge-warning';
                    };
                    break;
                case 1: {
                    payment_status = 'เก็บแล้ว';
                    state = 'badge-success';
                };
                break;
                case 9: {
                    payment_status = 'อื่น ๆ';
                    state = 'badge-info';
                };
                break;
                }
                return '<span class="right badge ' + state + '">' + payment_status + '</span>';
            }
        },
        {
            data: null,
            bSortable: false,
            searchable: false,
            render: function(e) {
                return numeral(e.payment_total).format('0,0.00');
            }
        },
        {
            data: 'delivery_date_thai',
            name: 'delivery_date_thai',
            bSortable: false,
            searchable: false
        },
        {
            data: null,
            bSortable: false,
            searchable: false,
            render: function(e) {
                return '<a href="/orders/' + e.id +'/detail" class="btn btn-outline-info btn-circle mt-1 btn-outline edit" lang="en" title="Detail"><i class="fas fa-list-alt"></i></a>';
            }
        }
    ],
    "oLanguage": {
        // "sSearch": '<span>Search</span> <i class="fas fa-search"></i>'
    },
    "columnDefs": [{
        "className": "text-center",
        "searchable": false,
        "orderable": false,
        "targets": 0
    }]
});
$('#pendingDataTable').DataTable({
    "paging": true,
    "processing": true,
    "serverSide": true,
    "responsive": true,
    "bFilter": true,
    "ajax": '/api/jobs/{{ $id }}/pending-data',
    columns: [{
            data: 'id',
            name: 'id',
            render: function(data, type, row, meta) {
                return meta.row + meta.settings._iDisplayStart + 1;
            }
        },
        {
            data: 'order_date_thai',
            name: 'order_date_thai',
            bSortable: false,
            searchable: false
        },
        {
            data: 'order_no',
            name: 'order_no'
        },
        {
            data: 'end_date_thai',
            name: 'end_date_thai',
            bSortable: false,
            searchable: false
        },
        {
            data: 'customer_name',
            name: 'customer_name'
        },
        {
            data: 'owner_name',
            name: 'owner_name'
        },
        {
            data: null,
            bSortable: false,
            searchable: false,
            render: function(e) {
                return numeral(e.total_cost).format('0,0.00');
            }
        },
        {
            data: null,
            bSortable: false,
            searchable: false,
            render: function(e) {
                var payment_status = '',
                    state = '';
                switch (parseInt(e.payment_status)) {
                    case 0: {
                        payment_status = 'ยังไม่เก็บ';
                        state = 'badge-warning';
                    };
                    break;
                case 1: {
                    payment_status = 'เก็บแล้ว';
                    state = 'badge-success';
                };
                break;
                case 9: {
                    payment_status = 'อื่น ๆ';
                    state = 'badge-info';
                };
                break;
                }
                return '<span class="right badge ' + state + '">' + payment_status + '</span>';
            }
        },
        {
            data: null,
            bSortable: false,
            searchable: false,
            render: function(e) {
                return numeral(e.payment_total).format('0,0.00');
            }
        },
        {
            data: null,
            bSortable: false,
            searchable: false,
            render: function(e) {
                return '<a href="/orders/' + e.id +'/detail" class="btn btn-outline-info btn-circle mt-1 btn-outline edit" lang="en" title="Detail"><i class="fas fa-list-alt"></i></a>';
            }
        }
    ],
    "oLanguage": {
        // "sSearch": '<span>Search</span> <i class="fas fa-search"></i>'
    },
    "columnDefs": [{
        "className": "text-center",
        "searchable": false,
        "orderable": false,
        "targets": 0
    }]
});
</script>
<script src="{{ asset('js/datatable.base.js') }}"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>
@stop