<!-- 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.UPGRADE_ACCOUNT' | translate}}</h1>
</div>
<div class="row justify-content-center">
  <!--    add card-->
  <div class="col-12 form-group" ng-show="isShowAddCard">
    <form name="createCardForm" 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' : (createCardForm.cardholderName.$touched || createCardForm.cardholderName.$dirty) &&  createCardForm.cardholderName.$invalid}"
                ng-maxlength="64"
                ng-pattern="script_pattern"
                required
              />
              <div class="invalid-feedback text-left">
                <div ng-show="createCardForm.cardholderName.$error.required">
                  {{'INPUT_ERROR.REQUIRED' | translate}}
                </div>
                <div ng-show="createCardForm.cardholderName.$error.maxlength">
                  {{'INPUT_ERROR.MAX_LENGTH' | translate :'{value: "64" }'}}
                </div>
                <div ng-show="createCardForm.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' : (createCardForm.address1.$touched || createCardForm.address1.$dirty) &&  createCardForm.address1.$invalid}"
                ng-maxlength="255"
              />
              <div class="invalid-feedback text-left">
                <div ng-show="createCardForm.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 || !createCardForm.$valid}"
                ng-disabled="submitting || !isComplete || !createCardForm.$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>
  <!-- Pricing column 1-->
  <div class="col-lg-4 form-group" ng-repeat="pack in resultPackage">
    <div class="card h-100">
      <div class="card-header text-center">
        <!--                <h5 class="text-bold">{{pack.type}}</h5>-->
        <h5 class="text-bold">{{pack.name}}</h5>
        <h5 class="text-bold">
          <span ng-if="pack.currencyInfo !== 'VND'">{{pack.currencyInfo}}{{pack.totalPrice}}</span>
          <span ng-if="pack.currencyInfo === 'VND'">{{pack.totalPrice}}{{pack.currencyInfo}}</span>
        </h5>
        <span class="small text-capitalize">{{'TEAM_PAYMENT.PER_MONTH' | translate}}</span>

        <!-- <button
          class="btn btn-sm btn-success btn-block mt-2"
          ng-show="pack.active === 1 && teamStatus !== 7
                        && pack.user_price_id != userPriceIdFree && pack.storage_price_id != storagePriceIdFree
                        && pack.user_price_id != userPriceIdFreeJa && pack.storage_price_id != storagePriceIdFreeJa"
          ng-click="chargeAmount()"
        >
          {{'TEAM_PAYMENT.CURRENT_PACKAGE' | translate}}
        </button> -->
        <!--                <button class="btn btn-sm btn-free btn-block mt-2 default-cursor"-->
        <!--                        ng-show="pack.active === 1 && teamStatus !== 7-->
        <!--                        && ((pack.user_price_id == userPriceIdFree && pack.storage_price_id == storagePriceIdFree)-->
        <!--                        || (pack.user_price_id == userPriceIdFreeJa && pack.storage_price_id == storagePriceIdFreeJa))">-->
        <!--                    {{'TEAM_PAYMENT.CURRENT_PACKAGE' | translate}}-->
        <!--                </button>-->

        <!-- <button
          class="btn btn-sm btn-success btn-block"
          ng-show="pack.active === 1 && teamStatus === 7"
          ng-click="chargeAmount()"
        >
          {{'TEAM_PAYMENT.CHARGE' | translate}}
        </button> -->
        <button
          class="btn btn-sm btn-free btn-block mt-2 default-cursor"
          ng-show="pack.name === currentUser.package_object.package_name"
        >
          {{'TEAM_PAYMENT.CURRENT_PACKAGE' | translate}}
        </button>
        <button
          class="btn btn-sm btn-primary btn-block"
          ng-hide="pack.name === currentUser.package_object.package_name"
          ng-click="openModalUpgrade(pack.name, pack.billing_cycle, pack.currency, currentUser.team_id)"
        >
          <span>{{'TEAM_PAYMENT.BUY_NOW' | translate}}</span>
        </button>
        <!--                <button class="btn btn-sm btn-primary btn-block" ng-hide="pack.active === 1"-->
        <!--                        ng-click="openModalUpgrade(pack.user_price_id, pack.storage_price_id, pack.type, currentPackage)">-->
        <!--                    <span>{{'TEAM_PAYMENT.BUY_NOW' | translate}}</span>-->
        <!--                </button>-->
      </div>
      <div class="card-body p-0">
        <ul class="list-group list-group-flush pb-1">
          <li class="list-group-item">
            <i class="far fa-check-circle text-success mr-2"></i>
            <span>{{'TEAM_PAYMENT.UPGRADE.SUPPORTED_PROTECTED_FILES' | translate }}</span>
          </li>
          <li class="list-group-item">
            <i class="far fa-check-circle text-success mr-2"></i>
            <span>{{'TEAM_PAYMENT.UPGRADE.SHARED_SPACE' | translate:{size: pack.storage} }}</span>
          </li>
          <li class="list-group-item">
            <i class="far fa-check-circle text-success mr-2"></i>
            <span
              >{{'TEAM_PAYMENT.UPGRADE.MAXIMUM_FILES_SIZE' | translate:{size: pack.max_file_size}
              }}</span
            >
          </li>
          <li class="list-group-item">
            <i class="far fa-check-circle text-success mr-2"></i>
            {{'TEAM_PAYMENT.UPGRADE.SECURE_SHARES_PER_MONTH' | translate:{number: pack.number} }}
          </li>
          <li class="list-group-item">
            <i class="far fa-check-circle text-success mr-2"></i>
            {{'TEAM_PAYMENT.UPGRADE.COPY_PROTECTION' | translate}}
          </li>
          <li class="list-group-item">
            <i class="far fa-check-circle text-success mr-2"></i>
            {{'TEAM_PAYMENT.UPGRADE.TRACKING_DOCUMENTS' | translate}}
          </li>
          <li class="list-group-item">
            <i class="far fa-check-circle text-success mr-2"></i>
            {{'TEAM_PAYMENT.UPGRADE.REVOKE_ACCESS_REMOTELY' | translate}}
          </li>
          <li class="list-group-item">
            <i class="far fa-check-circle text-success mr-2"></i>
            {{'TEAM_PAYMENT.UPGRADE.WATERMARK_VIEW_ONLINE' | translate}}
          </li>
          <li class="list-group-item">
            <i class="far fa-check-circle text-success mr-2"></i>
            {{'TEAM_PAYMENT.UPGRADE.SECURE_ONLINE_VIEWER' | translate}}
          </li>
          <li class="list-group-item">
            <i class="far fa-check-circle text-success mr-2"></i>
            {{'TEAM_PAYMENT.UPGRADE.TWO_FACTOR_AUTH' | translate}}
          </li>
          <li class="list-group-item">
            <i class="far fa-check-circle text-success mr-2"></i>
            {{'TEAM_PAYMENT.UPGRADE.PRINTING_CONTROL' | translate}}
          </li>
          <li class="list-group-item">
            <i class="far fa-check-circle text-success mr-2"></i>
            {{'TEAM_PAYMENT.UPGRADE.EXPIRY_SETTING' | translate}}
          </li>
        </ul>
        <!--                <ul class="list-group list-group-flush pb-1">-->
        <!--                    <li class="list-group-item">-->
        <!--                        <i class="far fa-check-circle text-success mr-2"></i>-->
        <!--                        <span>{{'TEAM_PAYMENT.UPGRADE.TRANSMISSION' | translate:{number: pack.transmission} }}</span>-->
        <!--                    </li>-->
        <!--                    <li class="list-group-item">-->
        <!--                        <i class="far fa-check-circle text-success mr-2"></i>-->
        <!--                        <span>{{'TEAM_PAYMENT.UPGRADE.STORAGE' | translate:{number: pack.storage} }}</span>-->
        <!--                    </li>-->
        <!--                    <li class="list-group-item">-->
        <!--                        <i class="far fa-check-circle text-success mr-2"></i>-->
        <!--                        <span>{{'TEAM_PAYMENT.UPGRADE.UPTO' | translate:{number: pack.upto} }}</span>-->
        <!--                    </li>-->
        <!--                    <li class="list-group-item">-->
        <!--                        <i class="far fa-check-circle text-success mr-2"></i>-->
        <!--                        {{'TEAM_PAYMENT.UPGRADE.ONLINE_PREVIEW' | translate}}-->
        <!--                    </li>-->
        <!--                    <li class="list-group-item">-->
        <!--                        <i class="far fa-check-circle text-success mr-2"></i>-->
        <!--                        {{'TEAM_PAYMENT.UPGRADE.PASSWORD_PROTECT' | translate}}-->
        <!--                    </li>-->
        <!--                    <li class="list-group-item">-->
        <!--                        <i class="far fa-check-circle text-success mr-2"></i>-->
        <!--                        {{'TEAM_PAYMENT.UPGRADE.TRACK_VIEW' | translate}}-->
        <!--                    </li>-->
        <!--                    <li class="list-group-item" ng-if="pack.protect_tile"-->
        <!--                        ng-class="{'border-bottom-0': pack.protect_subject_1 || pack.protect_subject_2}">-->
        <!--                        <i class="far fa-check-circle text-success mr-2"></i>-->
        <!--                        {{pack.protect_tile | translate}}-->
        <!--                    </li>-->
        <!--                    <ul ng-if="pack.protect_subject_1 || pack.protect_subject_2"-->
        <!--                        class="table-content-1 bd-subject pb-125">-->
        <!--                        <li class="small">{{pack.protect_subject_1 | translate}}</li>-->
        <!--                        <li class="small">{{pack.protect_subject_2 | translate}}</li>-->
        <!--                    </ul>-->
        <!--                    <li class="list-group-item" ng-if="pack.revoke_title">-->
        <!--                        <i class="far fa-check-circle text-success mr-2"></i>-->
        <!--                        {{pack.revoke_title | translate}}-->
        <!--                    </li>-->
        <!--                </ul>-->
      </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>
