<form class="form-horizontal" id="payment_form">
  <fieldset id="payment">
    <legend>{{ text_credit_card }}</legend>
    {% if not accepted_cards %}
      <div class="form-group">
        <div class="col-sm-12">
          <p>
            <strong>{{ text_card_accepted }}</strong>
            <ul>
              {% if accepted_cards.mastercard == 1 %}<li>{{ text_card_type_m }}</li>{% endif %}
              {% if accepted_cards.visa == 1 %}<li>{{ text_card_type_v }}</li>{% endif %}
              {% if accepted_cards.diners == 1 %}<li>{{ text_card_type_c }}</li>{% endif %}
              {% if accepted_cards.amex == 1 %}<li>{{ text_card_type_a }}</li>{% endif %}
              {% if accepted_cards.maestro == 1 %}<li>{{ text_card_type_ma }}</li>{% endif %}
            </ul>
          </p>
        </div>
      </div>
    {% endif %}

    {% if card_storage == 1 and stored_cards|length > 0 %}
    <div class="form-group">
      <div class="col-sm-12">
       {% set i = 0 %}
       {% for card in stored_cards %}
          <p><input type="radio" name="cc_choice" value="{{ card.token }}" class="stored_card" {% if i == 0 %} checked="checked"{% endif %} /> {{ card.card_type }} xxxx {{ card.digits }}, {{ entry_cc_expire_date }}  {{ card.expire_month }} / {{ card.expire_year }}</p>
          {% set i = i + 1 %}
        {% endfor %}

        <p><input type="radio" name="cc_choice" value="new" class="stored_card" />{{ text_card_new }}</p>
      </div>
    </div>
    {% endif %}

    <div id="card_info" style="display:none;">
      <div class="form-group required">
        <label class="col-sm-2 control-label" for="input-cc-name">{{ entry_cc_name }}</label>

        <div class="col-sm-10">
          <input type="text" name="cc_name" value="" placeholder="{{ entry_cc_name }}" id="input-cc-name" class="form-control"/>
        </div>
      </div>
      <div class="form-group required">
        <label class="col-sm-2 control-label" for="input-cc-number">{{ entry_cc_number }}</label>

        <div class="col-sm-10">
          <input type="text" name="cc_number" value="" placeholder="{{ entry_cc_number }}" id="input-cc-number" class="form-control"/>
        </div>
      </div>
      <div class="form-group required">
        <label class="col-sm-2 control-label" for="input-cc-expire-date">{{ entry_cc_expire_date }}</label>

        <div class="col-sm-3">
          <select name="cc_expire_date_month" id="input-cc-expire-date" class="form-control">
           {% for month in months %}
              <option value="{{ month.value }}">{{ month.text }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="col-sm-3">
          <select name="cc_expire_date_year" class="form-control">
           {% for year in year_expire %}
            <option value="{{ year.value }}">{{ year.text }}</option>
            {% endfor %}
          </select>
        </div>
      </div>

      {% if card_storage == 1 %}
      <div class="form-group">
        <label class="col-sm-2 control-label" for="input-cc-cvv2">{{ text_store_card }}</label>

        <div class="col-sm-10">
          <input type="hidden" name="cc_store" value="0"/> <input type="checkbox" name="cc_store" value="1" checked/>
        </div>
      </div>
      {% endif %}
    </div>

    <div class="form-group required">
      <label class="col-sm-2 control-label" for="input-cc-cvv2">{{ entry_cc_cvv2 }}</label>
      <div class="col-sm-10">
        <input type="text" name="cc_cvv2" value="" placeholder="{{ entry_cc_cvv2 }}" id="input-cc-cvv2" class="form-control"/>
      </div>
    </div>
  </fieldset>
</form>
<div class="buttons">
  <div class="pull-right">
    <input type="button" value="{{ button_confirm }}" id="button-confirm" data-loading-text="{{ text_loading }}" class="btn btn-primary"/>
  </div>
</div>
<script type="text/javascript"><!--
$('#button-confirm').bind('click', function () {
	$.ajax({
		url: 'index.php?route=extension/payment/firstdata_remote/send',
		type: 'post',
		data: $('#payment_form').serialize(),
		dataType: 'json',
		beforeSend: function () {
			$('#firstdata_message_error').remove();
			$('#button-confirm').attr('disabled', true);
			$('#payment').before('<div id="firstdata_message_wait" class="alert alert-info"><i class="fa fa-info-circle"></i> {{ text_wait }}</div>');
		},
		complete: function () {
			$('#button-confirm').attr('disabled', false);
			$('#firstdata_message_wait').remove();
		},
		success: function (json) {
			// if error
			if (json['error']) {
				$('#payment').before('<div id="firstdata_message_error" class="alert alert-warning"><i class="fa fa-info-circle"></i> ' + json['error'] + '</div>');
			}
			
			// if success
			if (json['success']) {
				location = json['success'];
			}
		}
	});
});

$('.stored_card').bind('change', function () {
	if ($(this).val() == 'new') {
		$('#card_info').slideDown();
	} else {
		$('#card_info').slideUp();
	}
});

$(document).ready(function(){
	{% if card_storage == 0 %}
	$('#card_info').show();
	{% else %}
	var stored_cards = {{ stored_cards|length }};
	
	if (stored_cards == 0) {
		$('#card_info').show();
	}
	{% endif %}
});
//--></script>