<!-- Page Heading -->
<div class="d-sm-flex align-items-center justify-content-between mb-2">
    <h1 class="h3 mb-0 text-gray-800">{{'TEAM_PAYMENT.TITLE' | translate}}</h1>
</div>
<div class="row">
    <div class="col-12 form-group">
        <button class="btn btn-primary text-uppercase"
                type="submit" ng-click="openAddCard()">
            {{'TEAM_PAYMENT.ADD' | translate}}
        </button>
    </div>
    <div class="col-12 form-group" ng-show="isShowAddCard">
        <form name="payment" novalidate>
            <div class="card">
                <div class="card-body">
                    <div class="row mx-0">
                        <div class="col-12 col-lg-10 col-xl-8 form-group">
                            <label class="small" for="card-element">{{'TEAM_PAYMENT.ADD' | translate}}</label>
                            <input class="form-control" name="cardholderName" type="text"
                                   placeholder="{{'CARD_INFO.PAYMENT_INFORMATION.CARD_NAME' | translate}}"
                                   ng-disabled="submitting"
                                   ng-model="cardInfo.cardholderName"
                                   ng-class="{'is-invalid' : (payment.cardholderName.$touched || payment.cardholderName.$dirty) &&  payment.cardholderName.$invalid}"
                                   ng-maxlength="64"
                                   ng-pattern="script_pattern" required/>
                            <div class="invalid-feedback text-left">
                                <div ng-show="payment.cardholderName.$error.required">
                                    {{'INPUT_ERROR.REQUIRED' | translate}}
                                </div>
                                <div ng-show="payment.cardholderName.$error.maxlength">
                                    {{'INPUT_ERROR.MAX_LENGTH' |
                                    translate :'{value: "64" }'}}
                                </div>
                                <div ng-show="payment.cardholderName.$error.pattern">
                                    {{'INPUT_ERROR.SPECIAL_CHARACTERS' | translate}}
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-lg-10 col-xl-8 form-group">

                            <div id="card-element" class="h-38">
                                <!-- A Stripe Element will be inserted here. -->
                            </div>
                            <!-- Used to display form errors. -->
                            <div id="card-errors" class="error-text" role="alert"></div>
                        </div>
                        <div class="col-12 col-lg-10 col-xl-8 form-group">
                            <input class="form-control" name="address1" type="text"
                                   placeholder="{{'CARD_INFO.ADDRESS' | translate}}"
                                   ng-disabled="submitting"
                                   ng-model="cardInfo.address1"
                                   ng-class="{'is-invalid' : (payment.address1.$touched || payment.address1.$dirty) &&  payment.address1.$invalid}"
                                   ng-maxlength="255"/>
                            <div class="invalid-feedback text-left">
                                <div ng-show="payment.address1.$error.maxlength">
                                    {{'INPUT_ERROR.MAX_LENGTH' |
                                    translate :'{value: "255" }'}}
                                </div>
                            </div>
                        </div>
                        <!--BUTTON-->
                        <div class="col-12 col-lg-10 col-xl-8 text-right">
                            <button id="payment-card" class="btn btn-primary"
                                    ng-class="{'cursor-disabled': submitting || !isComplete || !payment.$valid}"
                                    ng-disabled="submitting || !isComplete || !payment.$valid"
                                    type="submit">
                                {{'COMMON.BUTTON_SAVE' | translate}}
                                <span ng-if="submitting"><i class="fa fa-spin fa-spinner"></i></span>
                            </button>
                            <button type="button" class="btn btn-outline-dark" ng-click="cancelAddCard()">
                                {{'COMMON.BUTTON_CANCEL' | translate}}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<div class="row form-group">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <div class="form-group">
                    <div class="input-group d-flex justify-content-end">
                        <select class="border rounded-left tool-bar-padding pointer-cursor"
                                ng-change="recordChangedCard()"
                                ng-model="pageSizeListCard"
                                ng-options="opt as opt.name for opt in pageOptions track by opt.id">
                        </select>
                        <div class="input-group-append">
                            <label class="input-group-text">{{'COMMON.RECORDS' |
                                translate}}</label>
                        </div>
                    </div>
                </div>
                <div class="d-block text-center" ng-if="listCard.length === 0">
                    <span class="text-muted">{{'COMMON.NO_RECORDS' |translate}}</span>
                </div>
                <!-- Payment method 1-->
                <div ng-show="listCard.length > 0">
                    <div class="d-flex align-items-center justify-content-between border-bottom py-2"
                         ng-repeat="card in listCard">
                        <div class="d-flex align-items-center">
                            <i ng-if="card.card_type === 1" class="fab fa-2x fa-cc-visa"></i>
                            <i ng-if="card.card_type === 2" class="fab fa-2x fa-cc-mastercard"></i>
                            <i ng-if="card.card_type === 3" class="fab fa-2x fa-cc-amex"></i>
                            <i ng-if="card.card_type === 4" class="fab fa-2x fa-cc-diners-club"></i>
                            <i ng-if="card.card_type === 5" class="fab fa-2x fa-cc-discover"></i>
                            <i ng-if="card.card_type === 6" class="fab fa-2x fa-cc-jcb"></i>
                            <i ng-if="card.card_type === 7 || card.card_type === 0" class="far fa-credit-card"></i>

                            <div class="ml-4">
                                <div class="small">{{getCardType(card.card_type)}}{{'LABEL.ENDING'
                                    |translate}}{{card.card_user_number}}
                                </div>
                                <div class="text-xs text-muted">{{'LABEL.EXPIRES' |translate}}{{card.expire_date}}</div>
                            </div>
                        </div>
                        <div class="ml-4 small">
                            <div ng-if="card.is_active === 1" class="badge badge-light mr-3">{{'LABEL.DEFAULT'
                                |translate}}
                            </div>
                            <a ng-if="card.is_active !== 1" class="text-muted mr-3" href=""
                               ng-click="checkChangRadio(card)">{{'LABEL.MAKE_DEFAULT' |translate}}</a>
                            <a href="" ng-click="openModalDelete(card.card_id)">{{'LABEL.DELETE' |translate}}</a>
                        </div>
                    </div>
                </div>
                <div class="row mt-2">
                    <div class="col-12 d-flex justify-content-end">
                        <ul boundary-links="true"
                            class="pagination"
                            first-text="&laquo;"
                            items-per-page="pageSizeListCard.value"
                            last-text="&raquo;"
                            max-size='5'
                            next-text="&rsaquo;"
                            ng-change="pageChangedCard()"
                            ng-model="currentPageCard"
                            previous-text="&lsaquo;"
                            total-items="totalItemsCard"
                            uib-pagination></ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Page Heading -->
<div class="d-sm-flex align-items-center justify-content-between mb-2">
    <h1 class="h3 mb-0 text-gray-800">{{'TEAM_PAYMENT.PAYMENT_HISTORY' |
        translate}}</h1>
</div>
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <div class="form-group">
                    <div class="input-group d-flex justify-content-end">
                        <select class="border rounded-left tool-bar-padding pointer-cursor"
                                ng-change="recordChanged()"
                                ng-model="pageSize"
                                ng-options="opt as opt.name for opt in pageOptions track by opt.id">
                        </select>
                        <div class="input-group-append">
                            <label class="input-group-text">{{'COMMON.RECORDS' |
                                translate}}</label>
                        </div>
                    </div>
                </div>
                <!--show table items -->
                <div class="row mx-0 border-bottom text-gray-500">
                    <div class="col-7 col-md-5">
                                <span class="pointer-cursor"
                                      ng-click="doSort('createDate')">{{'TEAM_PAYMENT.DATE' | translate}}</span>
                        <i aria-hidden="true" class="fa fa-sort-down pointer-cursor"
                           ng-click="doSort('createDate')"
                           ng-if="!isSort && sortField == 'createDate'"></i>
                        <i aria-hidden="true" class="fa fa-sort-up pointer-cursor"
                           ng-click="doSort('createDate')"
                           ng-if="isSort && sortField == 'createDate'"></i>
                        <i aria-hidden="true" class="fa fa-sort pointer-cursor"
                           ng-click="doSort('createDate')"
                           ng-if="sortField !== 'createDate'"></i>
                    </div>
                    <div class="col-md-5 d-none d-md-block">
                        <span class="pointer-cursor" ng-click="doSort('totalPrice')">{{'TEAM_PAYMENT.AMOUNT' | translate}}</span>
                        <i aria-hidden="true" class="fa fa-sort-down pointer-cursor"
                           ng-click="doSort('totalPrice')"
                           ng-if="!isSort && sortField == 'totalPrice'"></i>
                        <i aria-hidden="true" class="fa fa-sort-up pointer-cursor"
                           ng-click="doSort('totalPrice')"
                           ng-if="isSort && sortField == 'totalPrice'"></i>
                        <i aria-hidden="true" class="fa fa-sort pointer-cursor"
                           ng-click="doSort('totalPrice')"
                           ng-if="sortField !== 'totalPrice'"></i>
                    </div>
                    <div class="col-5 col-md-2">
                        <span>{{'TEAM_PAYMENT.STATUS' | translate}}</span>
                    </div>
                </div>
                <div class="d-block text-center" ng-if="results.length === 0">
                    <span class="text-muted">{{'COMMON.NO_RECORDS' |translate}}</span>
                </div>
                <div ng-if="results.length > 0">
                    <div class="row mx-0 border-bottom py-2" ng-repeat="item in results">
                        <div class="col-7 col-md-5">
                            <span>{{item.createdDate}}</span>
                        </div>
                        <div class="col-md-5 d-none d-md-block">
                            <span ng-hide="item.currencyInfo === '₫'">{{item.currencyInfo}}{{item.totalPrice | currency : ''}}</span>
                            <span ng-show="item.currencyInfo === '₫'">{{item.totalPrice | currency : ''}}{{item.currencyInfo}}</span>
                        </div>
                        <div class="col-5 col-md-2">
                                <span class="badge badge-pill"
                                      ng-class="{'badge-success':item.status === 'Succeeded', 'badge-danger':item.status === 'Failed'}">
                                    {{item.statusTranslate}}
                                </span>
                        </div>
                    </div>
                </div>
                <div class="row mt-2">
                    <div class="col-12 d-flex justify-content-end">
                        <ul boundary-links="true"
                            class="pagination"
                            first-text="&laquo;"
                            items-per-page="pageSize.value"
                            last-text="&raquo;"
                            max-size='5'
                            next-text="&rsaquo;"
                            ng-change="pageChanged()"
                            ng-model="currentPage"
                            previous-text="&lsaquo;"
                            total-items="totalItemsPayment"
                            uib-pagination></ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Loading -->
<div class="row">
    <div class="col-xs-12 loading-spinner" ng-show="isShowLoading">
        <div class="overlay">
            <div class="overlay__spinner">
                <div class="lds-facebook">
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>
        </div>
    </div>
</div>
