<div class="{% if is_logged_in %} checkout-content {% endif %} checkout-{{ type }}-form">
  {% if is_logged_in %}
    <h2 class="secondary-title">{{ type == 'payment' ? journal2.settings.get('one_page_lang_bill_address', 'Billing Address') : journal2.settings.get('one_page_lang_ship_address', 'Delivery Address') }}</h2>
  {% endif %}
  <form class="form-horizontal form-{{ type }}">
    {% if addresses %}
      <div class="radio">
        <label>
          <input type="radio" name="{{ type }}_address" value="existing" checked="checked"/>
          {{ text_address_existing }}
        </label>
      </div>
      <div id="{{ type }}-existing">
        <select name="{{ type }}_address_id" class="form-control">
          {% for address in addresses %}
            {% if address['address_id'] == address_id %}
              <option value="{{ address.address_id }}" selected="selected">{{ address.firstname }} {{ address.lastname }}, {{ address.address_1 }}, {{ address.city }}, {{ address.zone }}, {{ address.country }}</option>
            {% else %}
              <option value="{{ address.address_id }}">{{ address.firstname }} {{ address.lastname }}, {{ address.address_1 }}, {{ address.city }}, {{ address.zone }}, {{ address.country }}</option>
            {% endif %}
          {% endfor %}
        </select>
      </div>
      <div class="radio">
        <label>
          <input type="radio" name="{{ type }}_address" value="new"/>
          {{ text_address_new }}</label>
      </div>
    {% endif %}
    <div id="{{ type }}-new" style="display: {{ addresses ? 'none' : 'block' }}">
      {% if name %}
        <div class="form-group required">
          <label class="col-sm-2 control-label" for="input-{{ type }}-firstname">{{ entry_firstname }}</label>

          <input type="text" name="{{ type }}_firstname" value="{{ staticCall('Journal2Utils', 'getProperty', [order_data, type ~ '_firstname', '']) }}" placeholder="{{ entry_firstname }}"
                 id="input-{{ type }}-firstname" class="form-control"/>
        </div>
        <div class="form-group required">
          <label class="col-sm-2 control-label" for="input-{{ type }}-lastname">{{ entry_lastname }}</label>

          <input type="text" name="{{ type }}_lastname" value="{{ staticCall('Journal2Utils', 'getProperty', [order_data, type ~ '_lastname', '']) }}" placeholder="{{ entry_lastname }}"
                 id="input-{{ type }}-lastname" class="form-control"/>
        </div>
      {% endif %}
      <div class="form-group company-input">
        <label class="col-sm-2 control-label" for="input-{{ type }}-company">{{ entry_company }}</label>

        <input type="text" name="{{ type }}_company" value="{{ staticCall('Journal2Utils', 'getProperty', [order_data, type ~ '_company', '']) }}" placeholder="{{ entry_company }}"
               id="input-{{ type }}-company" class="form-control"/>
      </div>

      <div class="form-group required">
        <label class="col-sm-2 control-label" for="input-{{ type }}-address-1">{{ entry_address_1 }}</label>

        <input type="text" name="{{ type }}_address_1" value="{{ staticCall('Journal2Utils', 'getProperty', [order_data, type ~ '_address_1', '']) }}" placeholder="{{ entry_address_1 }}"
               id="input-{{ type }}-address-1" class="form-control"/>
      </div>
      <div class="form-group address-2-input">
        <label class="col-sm-2 control-label" for="input-{{ type }}-address-2">{{ entry_address_2 }}</label>

        <input type="text" name="{{ type }}_address_2" value="{{ staticCall('Journal2Utils', 'getProperty', [order_data, type ~ '_address_2', '']) }}" placeholder="{{ entry_address_2 }}"
               id="input-{{ type }}-address-2" class="form-control"/>
      </div>
      <div class="form-group required">
        <label class="col-sm-2 control-label" for="input-{{ type }}-city">{{ entry_city }}</label>

        <input type="text" name="{{ type }}_city" value="{{ staticCall('Journal2Utils', 'getProperty', [order_data, type ~ '_city', '']) }}" placeholder="{{ entry_city }}" id="input-{{ type }}-city"
               class="form-control"/>
      </div>
      <div class="form-group required">
        <label class="col-sm-2 control-label" for="input-{{ type }}-postcode">{{ entry_postcode }}</label>

        <input type="text" name="{{ type }}_postcode" value="{{ postcode }}" placeholder="{{ entry_postcode }}"
               id="input-{{ type }}-postcode" class="form-control"/>
      </div>
      <div class="form-group required">
        <label class="col-sm-2 control-label" for="input-{{ type }}-country">{{ entry_country }}</label>
        <div class="col-sm-10">

          <select name="{{ type }}_country_id" id="input-{{ type }}-country" class="form-control">
            <option value="">{{ text_select }}</option>
            {% for country in countries %}
              {% if country.country_id == country_id %}
                <option value="{{ country.country_id }}" selected="selected">{{ country.name }}</option>
              {% else %}
                <option value="{{ country.country_id }}">{{ country.name }}</option>
              {% endif %}
            {% endfor %}
          </select>
        </div>
      </div>
      <div class="form-group required">
        <label class="col-sm-2 control-label" for="input-{{ type }}-zone">{{ entry_zone }}</label>
        <div class="col-sm-10">

          <select name="{{ type }}_zone_id" id="input-{{ type }}-zone" class="form-control">
          </select>
        </div>
      </div>
      {% for custom_field in custom_fields %}
      {% if custom_field.location == 'address' %}
        {% if custom_field.type == 'select' %}
          <div class="form-group{% if custom_field.required %} required {% endif %} custom-field" data-sort="{{ custom_field.sort_order }}">
            <label class="col-sm-2 control-label" for="input-{{ type }}-custom-field{{ custom_field.custom_field_id }}">{{ custom_field.name }}</label>
            <div class="col-sm-10">
              <select name="{{ type }}_custom_field[{{ custom_field.custom_field_id }}]" id="input-{{ type }}-custom-field{{ custom_field.custom_field_id }}" class="form-control">
                <option value="">{{ text_select }}</option>
                {% for custom_field_value in custom_field.custom_field_value %}
                  <option value="{{ custom_field_value.custom_field_value_id }}">{{ custom_field_value.name }}</option>
                {% endfor %}
              </select>
            </div>
          </div>
        {% endif %}
        {% if custom_field.type == 'radio' %}
          <div class="form-group{% if custom_field.required %} required {% endif %} custom-field" data-sort="{{ custom_field.sort_order }}">
            <label class="col-sm-2 control-label">{{ custom_field.name }}</label>
            <div class="col-sm-10">
              <div id="input-{{ type }}-custom-field{{ custom_field.custom_field_id }}">
                {% for custom_field_value in custom_field.custom_field_value %}
                  <div class="radio">
                    <label>
                      <input type="radio" name="{{ type }}_custom_field[{{ custom_field.custom_field_id }}]" value="{{ custom_field_value.custom_field_value_id }}"/>
                      {{ custom_field_value.name }}</label>
                  </div>
                {% endfor %}
              </div>
            </div>
          </div>
        {% endif %}
        {% if custom_field.type == 'checkbox' %}
          <div class="form-group{% if custom_field.required %} required {% endif %} custom-field" data-sort="{{ custom_field.sort_order }}">
            <label class="col-sm-2 control-label">{{ custom_field.name }}</label>
            <div class="col-sm-10">
              <div id="input-{{ type }}-custom-field{{ custom_field.custom_field_id }}">
                {% for custom_field_value in custom_field.custom_field_value %}
                  <div class="checkbox">
                    <label>
                      <input type="checkbox" name="{{ type }}_custom_field[{{ custom_field.custom_field_id }}][]" value="{{ custom_field_value.custom_field_value_id }}"/>
                      {{ custom_field_value.name }}</label>
                  </div>
                {% endfor %}
              </div>
            </div>
          </div>
        {% endif %}
        {% if custom_field.type == 'text' %}
          <div class="form-group{% if custom_field.required %} required {% endif %} custom-field" data-sort="{{ custom_field.sort_order }}">
            <label class="col-sm-2 control-label" for="input-{{ type }}-custom-field{{ custom_field.custom_field_id }}">{{ custom_field.name }}</label>
            <div class="col-sm-10">
              <input type="text" name="{{ type }}_custom_field[{{ custom_field.custom_field_id }}]" value="{{ custom_field.value }}" placeholder="{{ custom_field.name }}" id="input-{{ type }}-custom-field{{ custom_field.custom_field_id }}" class="form-control"/>
            </div>
          </div>
        {% endif %}
        {% if custom_field.type == 'textarea' %}
          <div class="form-group{% if custom_field.required %} required {% endif %} custom-field" data-sort="{{ custom_field.sort_order }}">
            <label class="col-sm-2 control-label" for="input-{{ type }}-custom-field{{ custom_field.custom_field_id }}">{{ custom_field.name }}</label>
            <div class="col-sm-10">
              <textarea name="{{ type }}_custom_field[{{ custom_field.custom_field_id }}]" rows="5" placeholder="{{ custom_field.name }}" id="input-{{ type }}-custom-field{{ custom_field.custom_field_id }}" class="form-control">{{ custom_field.value }}</textarea>
            </div>
          </div>
        {% endif %}
        {% if custom_field.type == 'file' %}
          <div class="form-group{% if custom_field.required %} required {% endif %} custom-field" data-sort="{{ custom_field.sort_order }}">
            <label class="col-sm-2 control-label">{{ custom_field.name }}</label>
            <div class="col-sm-10">
              <button type="button" id="button-{{ type }}-custom-field{{ custom_field.custom_field_id }}" data-loading-text="{{ text_loading }}" class="btn btn-default button"><i class="fa fa-upload"></i> {{ button_upload }}</button>
              <input type="hidden" name="{{ type }}_custom_field[{{ custom_field.custom_field_id }}]" value="{{ custom_field.value }}" id="input-{{ type }}-custom-field{{ custom_field.custom_field_id }}"/>
            </div>
          </div>
        {% endif %}
        {% if custom_field.type == 'date' %}
          <div class="form-group{% if custom_field.required %} required {% endif %} custom-field" data-sort="{{ custom_field.sort_order }}">
            <label class="col-sm-2 control-label" for="input-{{ type }}-custom-field{{ custom_field.custom_field_id }}">{{ custom_field.name }}</label>
            <div class="col-sm-10">
              <div class="input-group date">
                <input type="text" name="{{ type }}_custom_field[{{ custom_field.custom_field_id }}]" value="{{ custom_field.value }}" placeholder="{{ custom_field.name }}" data-date-format="HH:mm" id="input-{{ type }}-custom-field{{ custom_field.custom_field_id }}" class="form-control"/>
                <span class="input-group-btn">
          <button type="button" class="btn btn-default button"><i class="fa fa-calendar"></i></button>
          </span></div>
            </div>
          </div>
        {% endif %}
        {% if custom_field.type == 'time' %}
          <div class="form-group{% if custom_field.required %} required {% endif %} custom-field" data-sort="{{ custom_field.sort_order }}">
            <label class="col-sm-2 control-label" for="input-{{ type }}-custom-field{{ custom_field.custom_field_id }}">{{ custom_field.name }}</label>
            <div class="col-sm-10">
              <div class="input-group datetime">
                <input type="text" name="{{ type }}_custom_field[{{ custom_field.custom_field_id }}]" value="{{ custom_field.value }}" placeholder="{{ custom_field.name }}" data-date-format="YYYY-MM-DD HH:mm" id="input-{{ type }}-custom-field{{ custom_field.custom_field_id }}" class="form-control"/>
                <span class="input-group-btn">
          <button type="button" class="btn btn-default button"><i class="fa fa-calendar"></i></button>
          </span></div>
            </div>
          </div>
        {% endif %}
      {% endif %}
      {% endfor %}
    </div>
  </form>
  <script>
    $('form.form-{{ type }} input[name="{{ type }}_address"]').change(function () {
      if (this.value == 'new') {
        $('#{{ type }}-existing').hide();
        $('#{{ type }}-new').show().find('input[type="text"]').val('');
      } else {
        $('#{{ type }}-existing').show();
        $('#{{ type }}-new').hide();
      }
      $(document).trigger('journal_checkout_address_changed', '{{ type }}');
    });

    $('form.form-{{ type }} select[name=\'{{ type }}_country_id\']').on('change', function (e, first) {
      if (!this.value) return;
      $.ajax({
        url: 'index.php?route=checkout/checkout/country&country_id=' + this.value,
        dataType: 'json',
        beforeSend: function () {
          $('form.form-{{ type }} select[name=\'{{ type }}_country_id\']').after(' <i class="fa fa-circle-o-notch fa-spin"></i>');
        },
        complete: function () {
          $('.fa-spin').remove();
        },
        success: function (json) {
          $('.fa-spin').remove();

          if (json['postcode_required'] == '1') {
            $('form.form-{{ type }} input[name=\'{{ type }}_postcode\']').parent().addClass('required');
          } else {
            $('form.form-{{ type }} input[name=\'{{ type }}_postcode\']').parent().removeClass('required');
          }

          html = '<option value="">{{ text_select }}</option>';

          if (json['zone'] != '') {
            for (i = 0; i < json['zone'].length; i++) {
              html += '<option value="' + json['zone'][i]['zone_id'] + '"';

              if (json['zone'][i]['zone_id'] == '{{ zone_id }}') {
                html += ' selected="selected"';
              }

              html += '>' + json['zone'][i]['name'] + '</option>';
            }
          } else {
            html += '<option value="0" selected="selected">{{ text_none }}</option>';
          }

          $('form.form-{{ type }} select[name=\'{{ type }}_zone_id\']').html(html);

          if (!first) {
            $(document).trigger('journal_checkout_address_changed', '{{ type }}');
          }
        },
        error: function (xhr, ajaxOptions, thrownError) {
          alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
        }
      });
    }).trigger('change', true);

    $('form.form-{{ type }} select[name=\'{{ type }}_zone_id\']').on('change', function () {
      $(document).trigger('journal_checkout_address_changed', '{{ type }}');
    });

    $('form.form-{{ type }} select[name=\'{{ type }}_address_id\']').on('change', function () {
      $(document).trigger('journal_checkout_address_changed', '{{ type }}');
    });

    var timeout_{{ type }} = null;

    $('form.form-{{ type }} input[name=\'{{ type }}_postcode\']').on('keydown', function () {
      if (timeout_{{ type }}) {
        clearTimeout(timeout_{{ type }});
      }
      timeout_{{ type }} = setTimeout(function () {
        $(document).trigger('journal_checkout_address_changed', '{{ type }}');
      }, 500);
    });
  </script>
  <script>
    $('.checkout-{{ type }}-form .form-group[data-sort]').detach().each(function () {
      if ($(this).attr('data-sort') >= 0 && $(this).attr('data-sort') <= $('.checkout-{{ type }}-form .form-group').length) {
        $('.checkout-{{ type }}-form .form-group').eq($(this).attr('data-sort')).before(this);
      }

      if ($(this).attr('data-sort') > $('.checkout-{{ type }}-form .form-group').length) {
        $('.checkout-{{ type }}-form .form-group:last').after(this);
      }

      if ($(this).attr('data-sort') < -$('.checkout-{{ type }}-form .form-group').length) {
        $('.checkout-{{ type }}-form .form-group:first').before(this);
      }
    });
  </script>
  <script type="text/javascript"><!--
    $('.checkout-{{ type }}-form .date').datetimepicker({
      pickTime: false
    });

    $('.checkout-{{ type }}-form .time').datetimepicker({
      pickDate: false
    });

    $('.checkout-{{ type }}-form .datetime').datetimepicker({
      pickDate: true,
      pickTime: true
    });
    //--></script>
</div>
