@extends('admin.layout')

@section('content')
    <section ng-controller="paymentInviteSalariesController" ng-init="avatarUri = '{{url(\App\User::AVATAR_URI)}}'; paidSalaryData.type = {{\App\Models\PaidSalaryHistory::TYPE_PAID_INVITE_USER_SALARY}}">
        <div class="container-fluid">
            @php  $status_title = \App\Models\Voucher::$status_title;  @endphp
            <div class="row">
                <div class="col-md-12 m-b-30">
                    <!-- DATA TABLE -->
                    {{--<div class="table-data__tool">--}}
                        {{--<div class="table-data__tool-left">--}}

                        {{--</div>--}}
                        {{--<div class="table-data__tool-right">--}}
                            {{--<button class="au-btn-filter" ng-if="config.order_by == 'desc'" ng-click="$watch(config.order_by= 'asc', refreshData())">--}}
                                {{--<i class="zmdi zmdi-filter-list"></i>Số dư nhỏ--}}
                            {{--</button>--}}
                            {{--<button class="au-btn-filter" ng-if="config.order_by == 'asc'" ng-click="$watch(config.order_by='desc', refreshData())">--}}
                                {{--<i class="zmdi zmdi-filter-list"></i>Số dư lớn--}}
                            {{--</button>--}}
                        {{--</div>--}}
                    {{--</div>--}}
                    <div class="table-responsive table-responsive-data2">
                        <table class="table table-data2">
                            <thead>
                            <tr>
                                <th>#</th>
                                <th>Tasker</th>
                                <th>Email</th>
                                <th>Số dư</th>
                                <th></th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr class="tr-shadow" ng-repeat="user in datas">
                                <td>#{<>$index + 1<>}</td>
                                <td>
                                    <a ng-if="user.user.admin == {{\App\User::ROLE_TASKER}}" href="edit-tasker?id={<>user.user.id<>}">{<>user.user.name<>}</a>
                                    <a ng-if="user.user.admin == {{\App\User::ROLE_USER}}" href="edit-user?id={<>user.user.id<>}">{<>user.user.name<>}</a>
                                </td>
                                <td>{<>user.user.email<>}</td>
                                <td>{<>user.total_affiliate.valueOf() - user.paid.total_paid.valueOf()<>}</td>
                                <td>
                                    <div class="table-data-feature">
                                        <button class="item" ng-click="confirmPayment($index)">
                                            <i class="zmdi zmdi-card"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        <div class="m-b-10 m-t-10" ng-if="meta !== null && meta.last_page > 1">
                            <ul class="pagination">
                                <li class="page-item {<>meta.current_page - 1 < 1 ? 'disabled' : ''<>}"><button class="page-link" ng-click="$watch(config.page = config.page - 1, refreshData())">Prev</button></li>
                                <li class="page-item"><span class="page-link disabled">{<>meta.current_page<>}</span></li>
                                <li class="page-item {<>meta.current_page + 1 > meta.last_page ? 'disabled' : ''<>}"><button class="page-link" ng-click="$watch(config.page = config.page + 1, refreshData())">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="refreshData($event)" /> / {<>meta.last_page<>}</li>
                            </ul>

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

        </div>

        <!-- modal static -->
        <div class="modal fade" id="pay-salary-modal" tabindex="-1" role="dialog" aria-labelledby="staticModalLabel" aria-hidden="true"
             data-backdrop="static">
            <div class="modal-dialog modal-lg" role="document" style="margin: 5rem auto !important;">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="staticModalLabel">Trả lương cho "{<>selectedUser.user.name<>}"</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <h5>Thông tin thanh toán</h5>
                        <div class="mt-1">
                            <p>Tên: {<>selectedUser.user.name<>}</p>
                            <p>Địa chỉ: {<>selectedUser.user.address ? selectedUser.user.address : 'Chưa có'<>}</p>
                            <p>Email: {<>selectedUser.user.email<>}</p>
                            <p>Số điện thoại: {<>selectedUser.user.phone_number ? selectedUser.user.phone_number : 'Chưa có'<>}</p>
                            <img class="blue-care-icon"
                                 src="{<>selectedUser.user.avatar.includes('http') ? selectedUser.user.avatar : (avatarUri + '/' + selectedUser.user.avatar)<>}"
                                 ng-if="selectedUser.user.avatar">
                        </div>

                        <h5 class="mt-3">Thông tin thanh toán<span ng-if="!selectedUser.bank_account">: Chưa có</span></h5>
                        <div class="mt-1" ng-if="selectedUser.user.bank_account">
                            <p ng-init="paidSalaryData.bank_account_number = selectedUser.user.bank_account.bank_account_number">
                                Số tài khoản: {<>selectedUser.user.bank_account.bank_account_number<>}
                            </p>
                            <p ng-init="paidSalaryData.owner_name = selectedUser.user.bank_account.owner_name">
                                Chủ tài khoản: {<>selectedUser.user.bank_account.owner_name<>}
                            </p>
                            <p ng-init="paidSalaryData.bank = selectedUser.user.bank_account.bank">
                                Ngân hàng: {<>selectedUser.user.bank_account.bank<>}
                            </p>
                            <p ng-init="paidSalaryData.city = selectedUser.user.bank_account.city">
                                Tỉnh/Thành phố: {<>selectedUser.user.bank_account.city<>}
                            </p>
                            <p ng-init="paidSalaryData.bank_branch = selectedUser.user.bank_account.bank_branch">
                                Chi nhánh: {<>selectedUser.user.bank_account.bank_branch<>}
                            </p>
                        </div>

                        <div class="mt-2">Số dư còn lại: <b>{<>selectedUser.total_affiliate.valueOf() - selectedUser.paid.total_paid.valueOf()<>} VND</b></div>

                        <div class="form-group mt-3" ng-if="selectedUser.user.bank_account">
                            <label for="paid-bank"><b>Chuyển từ tài khoản</b></label>
                            <select id="paid-bank" class="form-control" ng-model="paidSalaryData.sent_from_account">
                                <option value="{<>ba.bank_account_number<>}" ng-repeat="ba in companyBankAccounts">
                                    {<>ba.bank + ' - ' + ba.bank_account_number<>}
                                </option>
                            </select>
                        </div>

                        <div class="form-group mt-2" ng-if="selectedUser.user.bank_account">
                            <label for="paid-salary"><b>Thanh toán</b></label>
                            <input type="number" min="0" ng-model="paidSalaryData.salary" class="form-control" id="paid-salary" placeholder="Nhập số tiền thanh toán">
                            <small ng-if="(valid = isValidSalary()) != true" class="text-warning">{<>valid<>}</small>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Bỏ qua</button>
                        <button type="button" ng-if="selectedUser.user.bank_account" class="btn btn-primary" ng-click="doPayment()">Xác nhận</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- end modal static -->
    </section>

@endsection