@extends('admin.layout')

@section('content')
    <section ng-controller="paidSalaryHistoriesController" ng-init="avatarUri = '{{url(\App\Helper\Constants::USER_IMAGES_FOLDER_PATH)}}'">
        <div class="container-fluid">
            @php  $status_title = \App\Models\PaidSalaryHistory::$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 mb-2 mr-1">
                            <form class="form-header">
                                <input class="au-input au-input--xl" type="text" ng-model="config.search" ng-keyup="refreshData($event)" placeholder="Tìm kiếm lịch sử.." />
                                <button class="au-btn--submit" ng-click="refreshData()" 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 mb-2">
                                <select class="js-select2" ng-model="config.order_by" ng-change="$watch(config.page = 1, refreshData())">
                                    <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 mb-2">
                                <select class="js-select2" ng-model="config.status" ng-change="refreshData()">
                                    <option value="">Trạng thái</option>
                                    @foreach(\App\Models\PaidSalaryHistory::$status_title as $val => $s_title)
                                        <option value="{{$val}}">{{$s_title}}</option>
                                    @endforeach
                                </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>Người gửi</th>
                                <th>Người nhận</th>
                                <th>Tài khoản gửi</th>
                                <th>Tài khoản nhận</th>
                                <th>Số tiền</th>
                                <th>Ngày gửi</th>
                                <th>Trạng thái</th>
                                <th></th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr class="tr-shadow" ng-repeat="history in data">
                                <td>#{<>history.id<>}</td>
                                <td>{<>history.sender.name<>}</td>
                                <td>{<>history.receiver.name<>}</td>
                                <td>{<>history.sent_from_account<>}</td>
                                <td>{<>history.bank_account_number<>}</td>
                                <td>{<>history.salary<>}</td>
                                <td>{<>history.created_at<>}</td>
                                <td>
                                    <span ng-if="history.status == {{\App\Models\PaidSalaryHistory::STATUS_SUCCESS}}" class="text-success">{{$status_title[\App\Models\PaidSalaryHistory::STATUS_SUCCESS]}}</span>
                                    <span ng-if="history.status == {{\App\Models\PaidSalaryHistory::STATUS_REJECT}}" class="text-danger">{{$status_title[\App\Models\PaidSalaryHistory::STATUS_REJECT]}}</span>
                                </td>

                                <td>
                                    <div class="table-data-feature">
                                        <button class="item" title="Chi tiết" ng-click="displayDetail(history)">
                                            <i class="zmdi zmdi-info"></i>
                                        </button>
                                        {{--<button class="item" title="Hủy lịch sử"--}}
                                                {{--ng-if="history.status == {{\App\Models\PaidSalaryHistory::STATUS_SUCCESS}}"--}}
                                                {{--ng-click="rejectHistory(history)">--}}
                                            {{--<i class="zmdi zmdi-minus"></i>--}}
                                        {{--</button>--}}
                                    </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 {<>meta.current_page == 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 == meta.last_page<>}">
                                    <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-change="refreshData()" /> / {<>meta.last_page<>}
                                </li>
                            </ul>

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

        <!-- modal static -->
        <div class="modal fade" id="pay-salary-history-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">Giao dịch số "{<>selectedHistory.id<>}"</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>Số tiền đã gửi: {<>selectedHistory.salary<>}</h5>
                        <h5 class="mt-3">Thông tin người nhận</h5>
                        <div class="mt-1">
                            <p>ID: {<>selectedHistory.receiver.id<>}</p>
                            <p>Tên: {<>selectedHistory.receiver.name<>}</p>
                            <p>Địa chỉ: {<>selectedHistory.receiver.address ? selectedHistory.receiver.address : 'Chưa có'<>}</p>
                            <p>Email: {<>selectedHistory.receiver.email<>}</p>
                            <p>Số điện thoại: {<>selectedHistory.receiver.phone_number ? selectedHistory.receiver.phone_number : 'Chưa có'<>}</p>
                            <img class="blue-care-icon"
                                 src="{<>selectedHistory.receiver.avatar.includes('http') ? selectedHistory.receiver.avatar : (avatarUri + '/' + selectedHistory.receiver.avatar)<>}"
                                 ng-if="selectedTasker.get_tasker.avatar">
                        </div>

                        <h5 class="mt-2">Thông tin người gửi</h5>
                        <div class="mt-1">
                            <p>ID: {<>selectedHistory.sender.id<>}</p>
                            <p>Tên: {<>selectedHistory.sender.name<>}</p>
                            <p>Địa chỉ: {<>selectedHistory.sender.address ? selectedHistory.sender.address : 'Chưa có'<>}</p>
                            <p>Email: {<>selectedHistory.sender.email<>}</p>
                            <p>Số điện thoại: {<>selectedHistory.sender.phone_number ? selectedHistory.sender.phone_number : 'Chưa có'<>}</p>
                            <img class="blue-care-icon"
                                 src="{<>selectedHistory.sender.avatar.includes('http') ? selectedHistory.sender.avatar : (avatarUri + '/' + selectedHistory.sender.avatar)<>}"
                                 ng-if="selectedTasker.get_tasker.avatar">
                        </div>

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

                        <h5 class="mt-3">
                            Số tài khoản gửi: {<>selectedHistory.sent_from_account<>}
                            {{--<span ng-if="!selectedTasker.get_tasker.bank_account">: Chưa có</span>--}}
                        </h5>
                        <h5 class="mt-3">
                            Ngày gửi: {<>selectedHistory.created_at<>}
                        </h5>
                    </div>
                    <div class="modal-footer">
                        {{--<button type="button"--}}
                                {{--class="btn btn-danger"--}}
                                {{--ng-click="rejectHistory(selectedHistory)"--}}
                                {{--ng-if="selectedHistory.status == {{\App\Models\PaidSalaryHistory::STATUS_SUCCESS}}">--}}
                            {{--Hủy lịch sử--}}
                        {{--</button>--}}
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Đóng</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- end modal static -->
    </section>

@endsection