<form id="cardconnect-form" action="{{ action }}" method="post" class="form form-horizontal">
  <fieldset id="payment">
    <legend>{{ text_card_details }}</legend>
    {% if echeck %}
      <div class="form-group">
        <label class="col-sm-2 control-label" for="input-method">{{ entry_method }}</label>
        <div class="col-sm-10">
          <select name="method" id="input-method" class="form-control">
            <option value="card">{{ text_card }}</option>
            <option value="echeck">{{ text_echeck }}</option>
          </select>
        </div>
      </div>
    {% endif %}
    <div class="card_container">
      <div class="form-group" {% if not store_cards %} style="display: none;" {% endif %}>
        <label class="col-sm-2 control-label">{{ entry_card_new_or_old }}</label>
        <div class="col-sm-10">
          <label class="radio-inline">
            <input type="radio" name="card_new" value="1" checked="checked"/>
            {{ entry_card_new }}
          </label>
          <label class="radio-inline">
            <input type="radio" name="card_new" value="0"/>
            {{ entry_card_old }}
          </label>
        </div>
      </div>
      <div class="card_new_container">
        <div class="form-group">
          <label class="col-sm-2 control-label" for="input-card-type">{{ entry_card_type }}</label>
          <div class="col-sm-10">
            <select name="card_type" id="input-card-type" class="form-control">
             {% for card_type in card_types %}
                <option value="{{ card_type.value }}">{{ card_type.text }}</option>
              {% endfor %}
            </select>
          </div>
        </div>
        <div class="form-group required">
          <label class="col-sm-2 control-label" for="input-card-number">{{ entry_card_number }}</label>
          <div class="col-sm-10">
            <input type="text" name="card_number" value="" placeholder="{{ entry_card_number }}" id="input-card-number" class="form-control"/>
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-2 control-label" for="input-card-expiry">{{ entry_card_expiry }}</label>
          <div class="col-sm-3">
            <select name="card_expiry_month" id="input-card-expiry" class="form-control">
             {% for month in months %}
                <option value="{{ month.value }}">{{ month.text }}</option>
              {% endfor %}
            </select>
          </div>
          <div class="col-sm-3">
            <select name="card_expiry_year" class="form-control">
             {% for year in years %}
                <option value="{{ year.value }}">{{ year.text }}</option>
              {% endfor %}
            </select>
          </div>
        </div>
        <div class="form-group required">
          <label class="col-sm-2 control-label" for="input-card-cvv2">{{ entry_card_cvv2 }}</label>
          <div class="col-sm-10">
            <input type="text" name="card_cvv2" value="" placeholder="{{ entry_card_cvv2 }}" id="input-card-cvv2" class="form-control"/>
          </div>
        </div>
        {% if store_cards %}
          <div class="form-group">
            <label class="col-sm-2 control-label" for="input-card-save" style="padding-top:0">{{ entry_card_save }}</label>
            <div class="col-sm-10">
              <input type="checkbox" name="card_save" value="1" id="input-card-save"/>
            </div>
          </div>
        {% endif %}
      </div>
      <div class="card_old_container" style="display: none">
        <div class="form-group">
          <label class="col-sm-2 control-label" for="input-card-choice">{{ entry_card_choice }}</label>
          <div class="col-sm-8">
            <select name="card_choice" id="input-card-choice" class="form-control" {% if not cards %} disabled {% endif %}>
          	  {% if cards %}
                <option value="">{{ text_select_card }}</option>
                {% for card in cards %}
                  <option value="{{ card.token }}">{{ card.type }}, &nbsp; {{ card.account }}, &nbsp; {{ card.expiry }}</option>
                {% endfor %}
              {% else %}
                <option value="">{{ text_no_cards }}</option>
              {% endif %}
            </select>
          </div>
          <div class="col-sm-2">
            <input type="button" value="{{ button_delete }}" id="button-delete" data-loading-text="{{ text_loading }}" class="btn btn-danger"/>
          </div>
        </div>
      </div>
    </div>
    <div class="echeck_container" style="display:none">
      <div class="form-group required">
        <label class="col-sm-2 control-label" for="input-account-number">{{ entry_account_number }}</label>
        <div class="col-sm-10">
          <input type="text" name="account_number" value="" placeholder="{{ entry_account_number }}" id="input-account-number" class="form-control"/>
        </div>
      </div>
      <div class="form-group required">
        <label class="col-sm-2 control-label" for="input-routing-number">{{ entry_routing_number }}</label>
        <div class="col-sm-10">
          <input type="text" name="routing_number" value="" placeholder="{{ entry_routing_number }}" id="input-routing-number" class="form-control"/>
        </div>
      </div>
    </div>
  </fieldset>
</form>
<div class="buttons">
  <div class="pull-right">
    <input type="button" value="{{ button_confirm }}" id="button-confirm" class="btn btn-primary" data-loading-text="{{ text_loading }}">
  </div>
</div>
<script type="text/javascript"><!--
    $('select[name="method"]').on('change', function() {
        if ($(this).val() == 'card') {
            $('#payment legend').text('{{ text_card_details }}');
            $('.card_container').show();
            $('.echeck_container').hide();
        } else {
            $('#payment legend').text('{{ text_echeck_details }}');
            $('.card_container').hide();
            $('.echeck_container').show();
        }
    });
//--></script> 
<script type="text/javascript"><!--
    $('input[name="card_new"]').on('change', function() {
        if ($(this).val() == '1') {
            $('.card_new_container').show();
            $('.card_old_container').hide();
        } else {
            $('.card_new_container').hide();
            $('.card_old_container').show();
        }
    });
//--></script> 
<script type="text/javascript"><!--
    $('#button-delete').bind('click', function() {
        if (confirm('{{ text_confirm_delete }}')) {
            $.ajax({
                url: 'index.php?route=extension/payment/cardconnect/delete',
                type: 'post',
                data: $('#input-card-choice'),
                dataType: 'json',
                beforeSend: function() {
                    $('.cardconnect_message').remove();
                    $('#payment').before('<div class="alert alert-info cardconnect_wait"><i class="fa fa-info-circle"></i> {{ text_wait }}</div>');
                    $('#button-delete').button('loading');
                },
                complete: function() {
                    $('.cardconnect_wait').remove();
                    $('#button-delete').button('reset');
                },
                success: function (json) {
                    if (json['error']) {
                        $('#cardconnect-form').before('<div class="alert alert-danger cardconnect_message" style="display:none"><i class="fa fa-exclamation-circle"></i> ' + json['error'] + '<button type="button" class="close" data-dismiss="alert">&times;</button></div>');
              
                        $('.cardconnect_message').fadeIn();
                    } else {
                        $.ajax({
                          url: 'index.php?route=checkout/confirm',
                          dataType: 'html',
                          success: function (html) {
                            $('#collapse-checkout-confirm .panel-body').html(html);
                          },
                          error: function (xhr, ajaxOptions, thrownError) {
                            alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
                          }
                        });
                    }
                }
            });
        }
    });
//--></script> 
<script type="text/javascript"><!--
    $('#button-confirm').bind('click', function() {
        $.ajax({
            url: 'index.php?route=extension/payment/cardconnect/send',
            type: 'post',
            data: $('#cardconnect-form').serialize(),
            dataType: 'json',
            beforeSend: function() {
                $('.cardconnect_message').remove();
                $('.text-danger').remove();
                $('#payment').find('*').removeClass('has-error');
                $('#payment').before('<div class="alert alert-info cardconnect_wait"><i class="fa fa-info-circle"></i> {{ text_wait }}</div>');
                $('#button-confirm').button('loading');
            },
            complete: function() {
                $('.cardconnect_wait').remove();
                $('#button-confirm').button('reset');
            },
            success: function (json) {
                if (json['error']['warning']) {
                    $('#cardconnect-form').before('<div class="alert alert-danger cardconnect_message" style="display:none"><i class="fa fa-exclamation-circle"></i> ' + json['error']['warning'] + '<button type="button" class="close" data-dismiss="alert">&times;</button></div>');
            
                    $('.cardconnect_message').fadeIn();
                }
        
              if (json['error']['card_number']) {
                  $('#input-card-number').after('<div class="text-danger">' + json['error']['card_number'] + '</div>');
          
                  $('#input-card-number').closest('.form-group').addClass('has-error');
              }
        
              if (json['error']['card_cvv2']) {
                  $('#input-card-cvv2').after('<div class="text-danger">' + json['error']['card_cvv2'] + '</div>');
          
                  $('#input-card-cvv2').closest('.form-group').addClass('has-error');
              }
        
              if (json['error']['card_choice']) {
                  $('#input-card-choice').after('<div class="text-danger">' + json['error']['card_choice'] + '</div>');
          
                  $('#input-card-choice').closest('.form-group').addClass('has-error');
              }
        
              if (json['error']['method']) {
                  $('#input-method').after('<div class="text-danger">' + json['error']['method'] + '</div>');
          
                  $('#input-method').closest('.form-group').addClass('has-error');
              }
        
              if (json['error']['account_number']) {
                  $('#input-account-number').after('<div class="text-danger">' + json['error']['account_number'] + '</div>');
          
                  $('#input-account-number').closest('.form-group').addClass('has-error');
              }
        
              if (json['error']['routing_number']) {
                  $('#input-routing-number').after('<div class="text-danger">' + json['error']['routing_number'] + '</div>');
          
                  $('#input-routing-number').closest('.form-group').addClass('has-error');
              }
        
              if (json['success']) {
                  location = json['success'];
              }
            }
        });
    });
//--></script>