@extends('admin.layout')

@section('content')
    <div class="container-fluid" ng-controller="vouchersController">
        @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">
                        <a class="au-btn au-btn-icon au-btn--green au-btn--small" href="add-voucher">
                            <i class="zmdi zmdi-plus"></i>add voucher
                        </a>
                        <div class="rs-select2--light rs-select2--md">
                            <select class="js-select2" name="status"
                                    ng-model="config.status" ng-change="fetchVouchers()">
                                <option value="">Trạng thái</option>
                                <option value={{\App\Helper\Constants::STATUS_ACTIVE}}>{{$status_title[\App\Helper\Constants::STATUS_ACTIVE]}}</option>
                                <option value={{\App\Helper\Constants::STATUS_INACTIVE}}>{{$status_title[\App\Helper\Constants::STATUS_INACTIVE]}}</option>
                            </select>
                            <div class="dropDownSelect2"></div>
                        </div>
                        <div class="rs-select2--dark rs-select2--md rs-select2--dark2">
                            <select class="js-select2"
                                    ng-model="config.limit"
                                    ng-change="fetchVouchers()">
                                <option value=20>show 20 item</option>
                                <option value=30 >show 30 item</option>
                                <option value=50>show 50 item</option>
                                <option value=100>show 100 item</option>
                            </select>
                            <div class="dropDownSelect2"></div>
                        </div>
                        <div class="rs-select2--dark rs-select2--md rs-select2--dark2">
                            <select class="form-control"
                                    ng-options="sv.name for sv in data.services track by sv.id"
                                    ng-model="data.selectedService"
                                    ng-change="selectService()">
                            </select>
                        </div>
                    </div>
                </div>
                <div class="table-responsive table-responsive-data2">
                    <table class="table table-data2">
                        <thead>
                        <tr>
                            <th>#</th>
                            <th>Mã</th>
                            <th>Giá trị (%)</th>
                            <th>Số lần sử dụng</th>
                            <th>Ngày bắt đầu</th>
                            <th>Ngày kết thúc</th>
                            <th>Loại</th>
                            <th>Thuộc về partner</th>
                            <th>Trạng thái</th>
                            <th></th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr class="tr-shadow" ng-repeat="voucher in data.vouchers">
                            <td>#{<>voucher.id<>}</td>
                            <td>{<>voucher.code<>}</td>
                            <td>{<>voucher.value<>}</td>
                            <td>{<>voucher.use_time<>}</td>
                            {{--<td>--}}
                                {{--<div ng-repeat="s in voucher.services">- {<>s.name<>}</div>--}}
                            {{--</td>--}}
                            <td>{<>voucher.start_date<>}</td>
                            <td>{<>voucher.expire_date<>}</td>
                            <td>{<>
                                    voucher.type == {{\App\Models\Voucher::TYPE_PERCENT}}
                                    ? '{{\App\Models\Voucher::$type_title[\App\Models\Voucher::TYPE_PERCENT]}}'
                                    : '{{\App\Models\Voucher::$type_title[\App\Models\Voucher::TYPE_MONEY]}}'
                                <>}</td>
                            <td>{<>voucher.user ? voucher.user.email : 'Dùng chung'<>}</td>
                            <td>
                                <span ng-if="voucher.status == {{App\Helper\Constants::STATUS_ACTIVE}}" class="status--process">{{$status_title[\App\Helper\Constants::STATUS_ACTIVE]}}</span>
                                <span ng-if="voucher.status == {{App\Helper\Constants::STATUS_INACTIVE}}" class="status--denied">{{$status_title[\App\Helper\Constants::STATUS_INACTIVE]}}</span>
                            </td>

                            <td>
                                <div class="table-data-feature">
                                    <a class="item" href="edit-voucher?id={<>voucher.id<>}"
                                       data-toggle="tooltip" data-placement="top" title="Chi tiết">
                                        <i class="zmdi zmdi-edit"></i>
                                    </a>
                                    <button class="item" ng-click="doDeleteVoucher(voucher.id)">
                                        <i class="zmdi zmdi-delete"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <div class="m-b-10 m-t-10" ng-if="data.meta !== null && data.meta.last_page > 1">
                        <ul class="pagination">
                            <li class="page-item {<>data.meta.current_page <= 1 ? 'disabled' : ''<>}">
                                <button class="page-link"
                                        ng-click="fetchVouchers(config.page - 1)">
                                    Prev
                                </button>
                            </li>
                            <li class="page-item"><span class="page-link disabled">{<>config.page<>}</span></li>
                            <li class="page-item {<>data.meta.current_page >= data.meta.last_page ? 'disabled' : ''<>}"><button class="page-link" ng-click="fetchVouchers(config.page + 1)">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="onInputPage($event.keyCode)" />
                            </li>
                        </ul>
                    </div>
                </div>
                <!-- END DATA TABLE -->
            </div>
        </div>

    </div>
@endsection