maestrano/mno-enterprise-angular

<!--
  Credit Card Form
-->
<div class="row">
  <h4 class="cc-header">
    {{ 'mno_enterprise.templates.dashboard.organization.credit_card.title' | translate }}
    <small>
      <em class="text-muted">
      - {{ 'mno_enterprise.templates.dashboard.organization.credit_card.subtitle' | translate }}
      </em>
    </small>
  </h4>

  <div class="clearfix"></div>
  <hr>
  <form name="forms.creditCard" role="form" novalidate class="form-horizontal">
    <div class="form-group">
      <div class="col-xs-6 pull-right text-right cc-icons">
        <span ng-repeat="ccType in config.validCCTypes">
          <i class="mnoe-icon mnoe-icon-cc-icons-mno-cc-{{ccType}}" ng-class="classForIconType(ccType)"></i>
        </span>
      </div>
    </div>

    <div class="form-group">
      <label class="col-sm-2 control-label">{{ 'mno_enterprise.templates.dashboard.organization.credit_card.cc_form.title' | translate }}</label>
      <div class="col-sm-4">
        <select class="form-control" ng-model="model.title" ng-options="label for label in config.validTitles" required>
          <option value='' disabled selected style='display:none;'>{{ 'mno_enterprise.templates.dashboard.organization.credit_card.cc_form.title_select' | translate }}</option>
        </select>
      </div>
    </div>

    <div class="form-group">
      <label class="col-sm-2 control-label">{{ 'mno_enterprise.templates.dashboard.organization.credit_card.cc_form.name' | translate }}</label>

      <div class="col-sm-4">
        <input type="text" class="form-control" placeholder="{{ 'mno_enterprise.templates.dashboard.organization.credit_card.cc_form.placeholder_name' | translate }}" ng-model="model.first_name" required/>
      </div>
      <div class="col-sm-5">
        <input type="text" class="form-control" placeholder="{{ 'mno_enterprise.templates.dashboard.organization.credit_card.cc_form.placeholder_surname' | translate }}" ng-model="model.last_name" required/>
      </div>
    </div>

    <div class="form-group" ng-class="{'has-warning': !isAcceptedCardType()}">
      <label class="col-sm-2 control-label">{{ 'mno_enterprise.templates.dashboard.organization.credit_card.cc_form.number' | translate }}</label>
      <div class="col-sm-9">
        <input type="text" class="form-control" ng-model="model.number" required/>
        <span class="help-block" ng-hide="isAcceptedCardType()">{{ 'mno_enterprise.templates.dashboard.organization.credit_card.cc_form.unaccepted_type' | translate }}</span>
      </div>
    </div>

    <div class="form-group">
      <label class="col-sm-2 control-label">{{ 'mno_enterprise.templates.dashboard.organization.credit_card.cc_form.cvv' | translate }}</label>
      <div class="col-sm-3">
        <input type="text" class="form-control" placeholder="{{ 'mno_enterprise.templates.dashboard.organization.credit_card.cc_form.cvv' | translate }}" ng-model="model.verification_value" required/>
      </div>
    </div>

    <div class="form-group">
      <label class="col-sm-2 control-label">{{ 'mno_enterprise.templates.dashboard.organization.credit_card.cc_form.country' | translate }}</label>
      <div class="col-sm-6">
        <select class="form-control" ng-model="model.country" ng-options="country.val as country.label for country in config.validCountries" required>
          <option value='' disabled selected style='display:none;'>{{ 'mno_enterprise.templates.dashboard.organization.credit_card.cc_form.country_select' | translate }}</option>
        </select>
      </div>
    </div>

    <div class="form-group">
      <label class="col-sm-2 control-label">{{ 'mno_enterprise.templates.dashboard.organization.credit_card.cc_form.expiry' | translate }}</label>
      <div class="col-sm-3">
        <select class="form-control" ng-model="model.month" ng-options="label for label in config.validMonths" required>
          <option value='' disabled selected style='display:none;'>{{ 'mno_enterprise.templates.dashboard.organization.credit_card.cc_form.month_select' | translate }}</option>
        </select>
      </div>

      <div class="col-sm-3">
        <select class="form-control" ng-model="model.year" ng-options="label for label in config.validYears" required>
          <option value='' disabled selected style='display:none;'>{{ 'mno_enterprise.templates.dashboard.organization.credit_card.cc_form.year_select' | translate }}</option>
        </select>
      </div>
    </div>

    <!-- End: ccViewForm Details -->
  </form>
</div>

<!--
  Billing Address
-->
<div class="row">

  <h4 class="cc-header">{{ 'mno_enterprise.templates.dashboard.organization.credit_card.billing_form.header' | translate }}</h4>
  <hr>
  <form name="forms.billingAddress" novalidate class="form-horizontal">

    <div class="form-group">
      <label class="col-sm-2 control-label">{{ 'mno_enterprise.templates.dashboard.organization.credit_card.billing_form.street' | translate }}</label>
      <div class="col-sm-9">
        <input type="text" class="form-control" ng-model="model.billing_address" required/>
      </div>
    </div>

    <div class="form-group">
      <label class="col-sm-2 control-label">{{ 'mno_enterprise.templates.dashboard.organization.credit_card.billing_form.city' | translate }}</label>
      <div class="col-sm-4">
        <input type="text" class="form-control" ng-model="model.billing_city" required/>
      </div>

      <label class="col-sm-2 control-label">{{ 'mno_enterprise.templates.dashboard.organization.credit_card.billing_form.postcode' | translate }}</label>
      <div class="col-sm-3">
        <input type="text" class="form-control" ng-model="model.billing_postcode" required/>
      </div>
    </div>

    <div class="form-group">
      <label class="col-sm-2 control-label">{{ 'mno_enterprise.templates.dashboard.organization.credit_card.billing_form.country' | translate }}</label>
      <div class="col-sm-6">
        <select class="form-control" ng-model="model.billing_country" ng-options="country.val as country.label for country in config.validCountries" required>
          <option value='' disabled selected style='display:none;'>{{ 'mno_enterprise.templates.dashboard.organization.credit_card.billing_form.country_select' | translate }}</option>
        </select>
      </div>
    </div>

    <!-- End: Billing Address -->
  </form>
</div>

<!--
  Error messages
-->
<div class="row">
  <div class="alert alert-error" ng-show="errors">
    <button class="close" ng-click="errors=''">×</button>
    <ul>
      <li ng-repeat="error in errors">{{error}}</li>
    </ul>
  </div>
</div>

<!--
  Action buttons
-->
<div class="row text-right">
  <div class="col-md-4 col-md-offset-8">
    <button ng-click="cancel()" class="btn btn-default" ng-show="isCancelShown() && !isLoading">
      {{ 'mno_enterprise.templates.dashboard.organization.credit_card.cancel' | translate }}
    </button>

    <button ng-click="save()" href="" class="btn btn-info" ng-disabled="!isSaveEnabled() || isLoading">
      <span ng-show="isLoading"><i class="fa fa-spinner fa-pulse fa-fw"></i></span>
      <span ng-show="!isLoading"><i class="fa fa-shield"></i></span>
      {{ 'mno_enterprise.templates.dashboard.organization.credit_card.save' | translate }}
    </button>
  </div>
</div>