@extends('admin.layout')

@section('content')
    <section ng-controller="paymentSalaryController" ng-init="avatarUri = '{{url(\App\Helper\Constants::USER_IMAGES_FOLDER_PATH)}}'">
        <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="tasker in data">
                                <td>#{<>tasker.tasker<>}</td>
                                <td><a href="edit-tasker?id={<>tasker.tasker<>}">{<>tasker.get_tasker.name<>}</a></td>
                                <td>{<>tasker.get_tasker.email<>}</td>
                                <td>{<>tasker.total_salary.valueOf() - tasker.paid.total_paid.valueOf() + tasker.income.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 "{<>selectedTasker.get_tasker.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 tasker</h5>
                        <div class="mt-1">
                            <p>Tên: {<>selectedTasker.get_tasker.name<>}</p>
                            <p>Địa chỉ: {<>selectedTasker.get_tasker.address ? selectedTasker.get_tasker.address : 'Chưa có'<>}</p>
                            <p>Email: {<>selectedTasker.get_tasker.email<>}</p>
                            <p>Số điện thoại: {<>selectedTasker.get_tasker.phone_number ? selectedTasker.get_tasker.phone_number : 'Chưa có'<>}</p>
                            <img class="blue-care-icon"
                                 src="{<>selectedTasker.get_tasker.avatar.includes('http') ? selectedTasker.get_tasker.avatar : (avatarUri + '/' + selectedTasker.get_tasker.avatar)<>}"
                                 ng-if="selectedTasker.get_tasker.avatar">
                        </div>

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

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

                        <div class="form-group mt-3" ng-if="selectedTasker.get_tasker.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="selectedTasker.get_tasker.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="selectedTasker.get_tasker.bank_account" class="btn btn-primary" ng-click="doPayment()">Xác nhận</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- end modal static -->
    </section>

@endsection