<script type="text/ng-template" id="changeCustomerPaymentMethodModal.html">
	<form name="form" class="form-horizontal" ng-submit="_save(payment_method)" novalidate>
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true" ng-click="cancel()">
				<i class="ti ti-close"></i>
			</button>
			<h4 class="modal-title">Customer Payment Method</h4>
		</div>
		<div class="modal-body">
			<p>Fields with <span style="color: #cc0000;">*</span> are required.</p>
			<div class="form-group">
				<label for="payment_method" class="col-sm-3 control-label">Payment Method? <span style="color: #cc0000;">*</span></label>
				<div class="col-sm-8">
					<div class="radio-inline">
						<label>
							<input type="radio" name="payment_method" id="payment_method" value="CARD" ng-model="payment_method.payment_method" ng-required="true"> Card
						</label>
					</div>
					<div class="radio-inline">
						<label>
							<input type="radio" name="payment_method" id="payment_method" value="ECHECK" ng-model="payment_method.payment_method" ng-required="true"> E-Check
						</label>
					</div>
					<p class="help-block" ng-show="form.payment_method.$touched && form.payment_method.$error.required">Value is required.</p>
				</div>
			</div>
			<div class="form-group" ng-if="payment_method.payment_method == 'CARD'">
				<label for="card_number" class="col-sm-3 control-label">Card Number <span style="color: #cc0000;">*</span></label>
				<div class="col-sm-8">
					<input type="text" class="form-control" name="card_number" id="card_number" ng-model="payment_method.card_number" maxlength="16" ng-required="true" ng-minlength="16" ng-maxlength="16">
					<p class="help-block" ng-show="form.card_number.$touched && form.card_number.$error.required">Value is required.</p>
					<p class="help-block" ng-show="form.card_number.$touched && form.card_number.$error.minlength">Value is too short.</p>
					<p class="help-block" ng-show="form.card_number.$touched && form.card_number.$error.maxlength">Value is too long.</p>
				</div>
			</div>
			<div class="form-group" ng-if="payment_method.payment_method == 'CARD'">
				<label for="exp_month" class="col-sm-3 control-label">Exp Month <span style="color: #cc0000;">*</span></label>
				<div class="col-sm-8">
					<input type="text" class="form-control" name="exp_month" id="exp_month" ng-model="payment_method.exp_month" maxlength="2" ng-required="true" ng-minlength="1" ng-maxlength="2">
					<p class="help-block" ng-show="form.exp_month.$touched && form.exp_month.$error.required">Value is required.</p>
					<p class="help-block" ng-show="form.exp_month.$touched && form.exp_month.$error.minlength">Value is too short.</p>
					<p class="help-block" ng-show="form.exp_month.$touched && form.exp_month.$error.maxlength">Value is too long.</p>
				</div>
			</div>
			<div class="form-group" ng-if="payment_method.payment_method == 'CARD'">
				<label for="exp_year" class="col-sm-3 control-label">Exp Year <span style="color: #cc0000;">*</span></label>
				<div class="col-sm-8">
					<input type="text" class="form-control" name="exp_year" id="exp_year" ng-model="payment_method.exp_year" maxlength="4" ng-required="true" ng-minlength="2" ng-maxlength="4">
					<p class="help-block" ng-show="form.exp_year.$touched && form.exp_year.$error.required">Value is required.</p>
					<p class="help-block" ng-show="form.exp_year.$touched && form.exp_year.$error.minlength">Value is too short.</p>
					<p class="help-block" ng-show="form.exp_year.$touched && form.exp_year.$error.maxlength">Value is too long.</p>
				</div>
			</div>
			<div class="form-group" ng-if="payment_method.payment_method == 'CARD'">
				<label for="cvv" class="col-sm-3 control-label">CVV <span style="color: #cc0000;">*</span></label>
				<div class="col-sm-8">
					<input type="text" class="form-control" name="cvv" id="cvv" ng-model="payment_method.cvv" ng-required="true" maxlength="5" ng-minlength="1" ng-maxlength="5">
					<p class="help-block" ng-show="form.cvv.$touched && form.cvv.$error.required">Value is required.</p>
					<p class="help-block" ng-show="form.cvv.$touched && form.cvv.$error.minlength">Value is too short.</p>
					<p class="help-block" ng-show="form.cvv.$touched && form.cvv.$error.maxlength">Value is too long.</p>
				</div>
			</div>
			<div class="form-group" ng-if="payment_method.payment_method == 'ECHECK'">
				<label for="account_type" class="col-sm-3 control-label">Account Type <span style="color: #cc0000;">*</span></label>
				<div class="col-sm-8">
					<select class="form-control" name="account_type" id="account_type" ng-model="payment_method.account_type" ng-required="true">
						<option value="">-- Select --</option>
						<option value="CHECKING">CHECKING</option>
						<option value="SAVINGS">SAVINGS</option>
					</select>									
					<p class="help-block" ng-show="form.account_type.$touched && form.account_type.$error.required">Value is required.</p>
				</div>
			</div>
			<div class="form-group" ng-if="payment_method.payment_method == 'ECHECK'">
				<label for="transaction_type" class="col-sm-3 control-label">Transaction Type <span style="color: #cc0000;">*</span></label>
				<div class="col-sm-8">
					<select class="form-control" name="transaction_type" id="transaction_type" ng-model="payment_method.transaction_type" ng-required="true">
						<option value="">-- Select --</option>
						<option value="PPD">PPD (Consumer Account)</option>
						<option value="CCD">CCD (Business Account)</option>
					</select>									
					<p class="help-block" ng-show="form.transaction_type.$touched && form.transaction_type.$error.required">Value is required.</p>
				</div>
			</div>
			<div class="form-group" ng-if="payment_method.payment_method == 'ECHECK'">
				<label for="routing_number" class="col-sm-3 control-label">Routing Number <span style="color: #cc0000;">*</span></label>
				<div class="col-sm-8">
					<input type="text" class="form-control" name="routing_number" id="routing_number" ng-model="payment_method.routing_number" ng-required="true">
					<p class="help-block" ng-show="form.routing_number.$touched && form.routing_number.$error.required">Value is required.</p>
				</div>
			</div>
			<div class="form-group" ng-if="payment_method.payment_method == 'ECHECK'">
				<label for="account_number" class="col-sm-3 control-label">Account Number <span style="color: #cc0000;">*</span></label>
				<div class="col-sm-8">
					<input type="text" class="form-control" name="account_number" id="account_number" ng-model="payment_method.account_number" ng-required="true">
					<p class="help-block" ng-show="form.account_number.$touched && form.account_number.$error.required">Value is required.</p>
				</div>
			</div>
			<div class="form-group" ng-if="payment_method.payment_method">
				<label for="auto_payment" class="col-sm-3 control-label">Auto Payment? <span style="color: #cc0000;">*</span></label>
				<div class="col-sm-8">
					<div class="radio-inline">
						<label>
							<input type="radio" name="auto_payment" id="auto_payment" value="0" ng-model="payment_method.auto_payment" ng-required="true"> No
						</label>
					</div>
					<div class="radio-inline">
						<label>
							<input type="radio" name="auto_payment" id="auto_payment" value="1" ng-model="payment_method.auto_payment" ng-required="true"> Yes
						</label>
					</div>
					<p class="help-block" ng-show="form.auto_payment.$touched && form.auto_payment.$error.required">Value is required.</p>
				</div>
			</div>
		</div>
		<div class="modal-footer">
			<a class="btn btn-danger" ng-click="cancel()">
				<i class="ti ti-close" style="margin-right: 5px;"></i>
				Cancel
			</a>
			<button type="submit" ng-disabled="!form.$valid" class="btn-primary btn">
				<i class="ti ti-share" style="margin-right: 5px;"></i>
				Save
			</button>
		</div>
	</form>
</script>