@extends('admin.layout')

@section('content')
    <section ng-controller="editTaskerController">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <!-- DATA TABLE -->
                    <div class="card">
                        <form class="form-horizontal" action="save-tasker" method="post" enctype="multipart/form-data">
                            {{ csrf_field() }}
                            <div class="card-header">
                                <strong>Sửa thông tin người dùng</strong>
                            </div>
                            <div class="card-body card-block">
                                <div class="row form-group">
                                    <div class="col col-md-3">
                                        <label for="text-input" class=" form-control-label">Username<em class="red-color">*</em></label>
                                    </div>
                                    <div class="col-12 col-md-9">
                                        <input type="text"
                                               name="name"
                                               placeholder="Username"
                                               value="{{$tasker->name}}"
                                               class="form-control @if($errors->has('name'))is-invalid @endif">
                                    </div>
                                </div>
                                <div class="row form-group">
                                    <div class="col col-md-3">
                                        <label for="email-input" class=" form-control-label">Email<em class="red-color">*</em></label>
                                    </div>
                                    <div class="col-12 col-md-9">
                                        <input type="hidden"  name="id" value="{{$tasker->id}}">
                                        <p class="form-control-static">{{$tasker->email}}</p>
                                    </div>
                                </div>
                                <div class="row form-group">
                                    <div class="col col-md-3">
                                        <label for="email-input" class=" form-control-label">Phone</label>
                                    </div>
                                    <div class="col-12 col-md-9">
                                        <p class="form-control-static">{{$tasker->phone_number}}</p>
                                    </div>
                                </div>
                                <div class="row form-group">
                                <div class="col col-md-3">
                                    <label for="email-input" class=" form-control-label">Số điện thoại đã xác thực</label>
                                </div>
                                <div class="col-12 col-md-9">
                                    <select name="verified_phone" id="verified_phone" class="form-control">
                                        <option @if($tasker->verified_phone== \App\Helper\Constants::VERIFIED_STATUS) selected @endif value="{{\App\Helper\Constants::VERIFIED_STATUS}}">Đã xác thực</option>
                                        <option @if($tasker->verified_phone== \App\Helper\Constants::NOT_VERIFIED_STATUS) selected @endif value="{{\App\Helper\Constants::NOT_VERIFIED_STATUS}}">Chưa xác thực</option>
                                    </select>
                                </div>
                            </div>
                                <div class="row form-group">
                                    <div class="col col-md-3">
                                        <label for="password-input" class=" form-control-label">New Password</label>
                                    </div>
                                    <div class="col-12 col-md-9">
                                        <input type="password" name="new_password"  placeholder="New Password" class="form-control">
                                        <small class="help-block form-text">Please enter a complex password</small>
                                    </div>
                                </div>
                                <div class="row form-group">
                                    <div class="col col-md-3">
                                        <label for="file-input" class=" form-control-label">Avatar</label>
                                    </div>
                                    <div class="col-12 col-md-9">
                                        <div class="col-3 mt-1">
                                            <img src="{{url(\App\Helper\Constants::USER_IMAGES_FOLDER_PATH . $tasker->avatar)}}"
                                             alt="{{$tasker->avatar}}"
                                             class="w-100">
                                        </div>                                        
                                        <input type="file"  name="avatar" class="form-control-file">
                                    </div>
                                </div>
                                <div class="row form-group">
                                    <div class="col col-md-3">
                                        <label for="select" class=" form-control-label">Active</label>
                                    </div>
                                    <div class="col-12 col-md-9">
                                        <select name="active" id="active" class="form-control">
                                            <option @if($tasker->active== 1) selected @endif value="1">Active</option>
                                            <option @if($tasker->active== 0) selected @endif value="0">Deactive</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="row form-group">
                                    <div class="col col-md-3">
                                        <label for="email-input" class=" form-control-label">Created at</label>
                                    </div>
                                    <div class="col-12 col-md-9">
                                        <p class="form-control-static">{{$tasker->created_at}}</p>
                                    </div>
                                </div>
                                <div class="row form-group">
                                    <div class="col col-md-3">
                                        <label for="select" class=" form-control-label">Type</label>
                                    </div>
                                    <div class="col-12 col-md-9" ng-init="initial({{$tasker}}, {{$taskerjobs}})">
                                        <select class="form-control"
                                                ng-options="taskerJ.tasker for taskerJ in taskerJobs track by taskerJ.id"
                                                ng-model="data.selectedTaskerJob"
                                                ng-change="selectTaskerJob()">
                                        </select>
                                        <input type="number" class="d-none" name="tasker" id="tasker" value="{{$tasker->tasker}}">
                                        {{--<div class="mt-2" ng-if="data.selectedTaskerJob !== null">--}}
                                        {{--<div class="table-responsive table-responsive-data2">--}}
                                        {{--<table class="table table-data2">--}}
                                        {{--<thead>--}}
                                        {{--<tr>--}}
                                        {{--<th>Tiêu chí</th>--}}
                                        {{--<th>Chi tiết</th>--}}
                                        {{--</tr>--}}
                                        {{--</thead>--}}
                                        {{--<tbody>--}}
                                        {{--<tr class="tr-shadow"  ng-repeat="k in getTaskerKeys()">--}}
                                        {{--<td>{<>k<>}</td>--}}
                                        {{--<td>{<>data.selectedTaskerJob[k]<>}</td>--}}
                                        {{--</tr>--}}
                                        {{--</tbody>--}}
                                        {{--</table>--}}
                                        {{--</div>--}}
                                        {{--</div>--}}
                                    </div>
                                </div>
                                <div class="row form-group">
                                    <div class="col col-md-3">
                                        <label for="email-input" class=" form-control-label">VIP</label>
                                    </div>
                                    <div class="col-12 col-md-9">
                                        <p class="form-control-static">
                                            <input type="hidden" value="{{$tasker->vip}}" name="vip" id="vip-input">
                                            <span class="input-group-addon" ng-if="data.vip != 0">VIP {{$tasker->vip}}</span>&nbsp
                                            <button type="button" class="btn btn-warning btn-sm"  data-toggle="modal" data-target="#codeModal">UP TO VIP</button>
                                            <button type="button" class="btn btn-danger btn-sm" ng-click="changeVip(0)" ng-if="data.vip != 0">
                                                <i class="fa fa-ban"></i> Clear VIP
                                            </button>
                                        </p>
                                    </div>
                                </div>
                                <div class="row form-group">
                                    <div class="col col-md-3">
                                        <label for="email-input" class=" form-control-label">Bằng cấp</label>
                                    </div>
                                    <div class="col-12 col-md-9">
                                        @if($tasker->documents)
                                            <div class="row" id="document-images-container">
                                                @php $arrDocs = explode(',', $tasker->documents); @endphp
                                                @foreach($arrDocs as $key => $doc)
                                                    <div class="col-3 mt-1">
                                                        <!-- <button class="btn" onclick="handleDocumentDelete({{$tasker->id}}, '{{ json_encode(trim($doc)) }}')">
                                                            <i class="fa fa-trash text-danger"></i>
                                                        </button> -->

                                                        <button type="button" class="delete-document-btn" data-document="{{ trim($doc) }}"><i class="fa fa-trash text-danger"></i></button>

                                                        <button type="button" ng-click="demoDocumentImgs('{{url(\App\Helper\Constants::DOCUMENTS_IMAGES_FOLDER_PATH . $doc)}}')">
                                                            <img src="{{url(\App\Helper\Constants::DOCUMENTS_IMAGES_FOLDER_PATH . $doc)}}"
                                                                 alt="{{$tasker->name}}"
                                                                 class="w-100">
                                                        </button>
                                                    </div>
                                                @endforeach
                                            </div>
                                        @endif

                                        <div class="mt-2">
                                            <input type="file" id="document-upload" name="documents[]" multiple class="form-control-file">
                                        </div>

                                    </div>
                                </div>
                            </div>
                            <div class="card-footer text-right">
                                <button type="submit" class="btn btn-primary btn-sm">
                                    <i class="fa fa-dot-circle-o"></i> Submit
                                </button>
                            </div>
                        </form>
                    </div>

                    <div class="card mt-2">
                        <form class="form-horizontal" action="save-taskerservice" method="post" enctype="multipart/form-data">
                            {{ csrf_field() }}
                            <div class="card-header">
                                <strong>Sửa thông tin dịch vụ tasker</strong>
                            </div>

                            <div class="card-body card-block">
                                <div class="row form-group">
                                    <div class="col col-md-3">
                                        <label class=" form-control-label">Tên Tasker</label>
                                    </div>
                                    <div class="col-12 col-md-9">
                                        <input type="hidden" value="{<>tasker.id<>}" name="taskerId">
                                        <p class="form-control-static">
                                            <span class="ml-4 text-success">[{<>tasker.tasker_role.tasker<>}]</span>
                                            <a class="text-dark font-weight-bold" href="edit-tasker?id={<>tasker.id<>}" title="Thông tin tasker {<>tasker.name<>}">{<>tasker.name<>}</a>
                                        </p>
                                    </div>
                                </div>

                                <div class="row form-group">
                                    <div class="col col-md-3">
                                        <label class=" form-control-label">Dịch vụ đã đăng ký</label>
                                    </div>
                                    <div class="col-12 col-md-9">
                                        <div class="table-responsive table-responsive-data2">
                                            <table class="table table-data2">
                                                <thead>
                                                <tr>
                                                    <th>Tên dịch vụ</th>
                                                    <th>Trạng thái</th>
                                                    <th></th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                <tr class="tr-shadow" ng-repeat="service in tasker.tasker_services">
                                                    <input type="hidden" name="taskerservice[]" value="{<>service.pivot.id<>}">
                                                    <td>
                                                        <p class="mt-2">
                                                            <a href="edit-service?id={<>service.id<>}" title="{<>data[service.id]<>}">{<>service.name<>}</a>
                                                        </p>
                                                    </td>
                                                    <td>
                                                        <p ng-if="service.pivot.active == 0" class="text-danger">Không duyệt</p>

                                                        <p ng-if="service.pivot.active == 1" class="text-success">Xác nhận</p>

                                                        <p ng-if="service.pivot.active == 2" class="text-warning">Chờ duyệt</p>
                                                    </td>
                                                    <td>
                                                        <select name="service[]" id="{<>service.id<>}" class="form-control">
                                                            <option value="0" class="text-danger font-weight-bold" ng-selected="{<>service.pivot.active === {{\App\Models\TaskerService::DEACTIVE_STATUS}}<>}">
                                                                Không duyệt
                                                            </option>
                                                            <option value="1" class="text-success font-weight-bold" ng-selected="{<>service.pivot.active === {{\App\Models\TaskerService::ACTIVE_STATUS}}<>}">
                                                                Xác nhận
                                                            </option>
                                                            <option value="2" class="text-warning font-weight-bold" ng-selected="{<>service.pivot.active === {{\App\Models\TaskerService::PENDING_STATUS}}<>}">
                                                                Chờ duyệt
                                                            </option>
                                                        </select>
                                                    </td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card-footer text-right">
                                <button type="submit" class="btn btn-primary btn-sm">
                                    <i class="fa fa-dot-circle-o"></i> Submit
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <div class="row">
                @php  $status_title = \App\Models\Schedule::$status_title;  @endphp

                <h3 class="pl-3">Lịch sử nhận lịch</h3>
                <div class="col-md-12 m-b-30">
                    <div class="table-responsive table-responsive-data2">
                        <table class="table table-data2">
                            <thead>
                            <tr>
                                <th>#</th>
                                <th>service</th>
                                <th>start</th>
                                <th>day</th>
                                <th>price</th>
                                <th>user</th>
                                <th>tasker</th>
                                <th>status</th>
                                <th></th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr class="tr-shadow" ng-repeat="schedule in schedules">
                                <td>#{<>schedule.id<>}</td>
                                <td>{<>schedule.service.name<>}</td>
                                <td>{<>schedule.time_start<>}</td>
                                <td>{<>schedule.day_working<>}</td>
                                <td>{<>schedule.price | currency : '' : 0<>}</td>
                                <td>{<>schedule.get_user.name<>}</td>
                                <td>
                                    <a href="edit-tasker?id={<>schedule.get_tasker.id<>}" ng-if="schedule.get_tasker">{<>schedule.get_tasker.name<>}</a>
                                </td>
                                <td>
                                    <span ng-if="schedule.status == {{\App\Models\Schedule::STATUS_PENDING}}" class="text-warning">{{$status_title[\App\Models\Schedule::STATUS_PENDING]}}</span>
                                    <span ng-if="schedule.status == {{\App\Models\Schedule::STATUS_WORKING}}" class="text-info">{{$status_title[\App\Models\Schedule::STATUS_WORKING]}}</span>
                                    <span ng-if="schedule.status == {{\App\Models\Schedule::STATUS_COMPLETE}}" class="status--process">{{$status_title[\App\Models\Schedule::STATUS_COMPLETE]}}</span>
                                </td>

                                <td>
                                    <div class="table-data-feature">
                                        <a class="item" href="edit-schedule?id={<>schedule.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 >= 0">
                            <ul class="pagination">
                                <li class="page-item {<>meta.current_page == 1 ? 'disabled' : ''<>}">
                                    <button class="page-link"
                                            ng-click="$watch(params.page = params.page - 1, refresh())">Prev</button>
                                </li>
                                <li class="page-item"><span class="page-link disabled">{<>meta.current_page<>}</span></li>
                                <li class="page-item {<>meta.current_page == meta.last_page<>}">
                                    <button class="page-link"
                                            ng-click="$watch(params.page = params.page + 1, refresh())">Next</button>
                                </li>
                                <li class="pull-right">
                                    <span>&nbsp; Nhảy trang&nbsp;</span>
                                    <input class="text-center"
                                           type="number"
                                           style="width: 40px;height: 38px" min="1"
                                           ng-model="params.page"
                                           ng-change="refresh()" /> / {<>meta.last_page<>} ({<>meta.total<>} bản ghi)
                                </li>
                            </ul>

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

        <!-- modal static -->
        <div class="modal fade" id="codeModal" tabindex="-1" role="dialog" aria-labelledby="staticModalLabel" aria-hidden="true"
             data-backdrop="static">
            <div class="modal-dialog modal-sm" role="document" style="margin: 5rem auto !important;">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="staticModalLabel">Up "{{$tasker->name}}" to Vip</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="has-success form-group">
                            <label for="inputIsValid" class="form-control-label">Choose VIP here</label>
                            <select class="form-control" ng-init="data.vip = {{$tasker->vip}}" ng-model="data.vip">
                                <option value="0" ng-selected="{<>data.vip == 0<>}">Không vip</option>
                                <option value="1" ng-selected="{<>data.vip == 1<>}">Vip 1</option>
                                <option value="2" ng-selected="{<>data.vip == 2<>}">Vip 2</option>
                                <option value="3" ng-selected="{<>data.vip == 3<>}">Vip 3</option>
                                <option value="4" ng-selected="{<>data.vip == 4<>}">Vip 4</option>
                                <option value="5" ng-selected="{<>data.vip == 5<>}">Vip 5</option>
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                        <button type="button" class="btn btn-primary" ng-click="changeVip()">Confirm</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- end modal static -->
    </section>
    
@endsection
@section('custom_script')
    <div class="modal fade" id="demo-img-modal" tabindex="-1" role="dialog" aria-labelledby="staticModalLabel" aria-hidden="true"
         data-backdrop="static">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <img id="demo-document-img" alt="" class="w-100">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal" data-target="demo-img-modal">Cancel</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            document.querySelectorAll('.delete-document-btn').forEach(button => {
                button.addEventListener('click', function () {
                    const documentName = this.getAttribute('data-document');
                    const taskerId = {{ $tasker->id }};
                    const confirmDelete = confirm('Bạn có chắc chắn muốn xóa tài liệu này?');
                    if (confirmDelete) {
                        var token = document.head.querySelector('meta[name="csrf-token"]');
                        jQuery.ajax({
                            method: 'POST',
                            url: BASE_URL + 'delete-tasker-document',
                            headers: {
                                'X-CSRF-TOKEN': token.content,
                                'Content-Type': 'application/json'
                            },
                            data: JSON.stringify({
                                id: taskerId,
                                documentName: documentName
                            }),
                            success: function (res) {
                                location.href = 'edit-tasker?id=' + taskerId;
                            },
                            error: function (e) {
                                location.href = 'edit-tasker?id=' + taskerId;
                            }
                        })

                        
                    }

                });
            });

            
        });
    </script>
@endsection