<div class="checkout-section" id="total-section">
  <div class="panel-group m-0" id="accordion">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a href="#collapse-coupon" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" {{ expanded ? 'aria-expanded="true"' }}>
            {{ text_total_section }} <i class="fa fa-caret-down"></i>
          </a>
        </h4>
      </div>

      <div id="collapse-coupon" class="panel-collapse collapse {{ expanded ? 'in' }}">
        <div class="panel-body">
          <ul class="nav nav-tabs">
            {% if coupon.status %}
            <li {{ tab == 'coupon' ? 'class="active"' }}>
              <a href="#tab-coupon-list" data-toggle="tab">{{ text_coupon_list }}</a>
            </li>
            <li>
              <a href="#tab-coupon-input" data-toggle="tab">{{ text_coupon_input }}</a>
            </li>
            {% endif %}
            {% if reward.status %}
            <li {{ tab == 'reward' ? 'class="active"' }}>
              <a href="#tab-reward-input" data-toggle="tab">{{ entry_reward }}</a>
            </li>
            {% endif %}
            <li {{ tab == 'credit'  ? 'class="active"' }}>
              <a href="#tab-credit" data-toggle="tab">{{ entry_credit }}</a>
            </li>
          </ul>

          <div class="tab-content mt-2">
            {% if coupon.status %}
            <div class="tab-pane {{ tab == 'coupon' ? 'active' }}" id="tab-coupon-list">
              {% if coupon.coupons %}
                {% for _coupon in coupon.coupons %}
                  <div class="col-sm-3">
                    <div class="radio {{ _coupon.code == coupon.coupon ? 'active' }}">
                      <label>
                        <input type="radio" name="coupon" value="{{ _coupon.code }}" {{ _coupon.code == coupon.coupon ? 'checked="checked"' }} />
                        <div class="title">{{ _coupon.discount_format }}</div>
                        <div class="subtitle">
                          <strong>{{ entry_coupon_total|format(_coupon.total_format) }}</strong>
                          {% if _coupon.shipping %}
                            <span class="text-muted">{{ text_coupon_free_shipping }}</span>
                          {% endif %}
                        </div>
                        <div class="name">{{ _coupon.name }}</div>
                        <div class="date">{{ entry_coupon_valid }}{{ _coupon.date_start }} - {{ _coupon.date_end }}</div>
                      </label>
                    </div>
                  </div>
                {% endfor %}
              {% else %}
                <p class="px-1">{{ text_coupon_empty }}</p>
              {% endif %}
            </div>

            <div class="tab-pane" id="tab-coupon-input">
              <div class="input-group" style="max-width: 400px">
                <input type="text" name="coupon" value="{{ coupon.coupon }}" placeholder="{{ entry_coupon }}" id="input-coupon" class="form-control" />
                <div class="input-group-btn">
                  <input type="button" value="{{ button_coupon }}" id="button-coupon" data-loading-text="{{ text_loading }}"  class="btn btn-primary" />
                </div>
              </div>
            </div>
            {% endif %}

            {% if reward.status %}
            <div class="tab-pane {{ tab == 'reward' ? 'active' }}" id="tab-reward-input">
              <div class="input-group" style="max-width: 400px">
                <input type="text" name="reward" value="{{ reward.reward }}" {{ reward.total < 1 ? 'disabled' }} placeholder="{{ entry_reward }}" id="input-reward" class="form-control" />
                <div class="input-group-btn">
                  <input type="button" value="{{ button_reward }}" id="button-reward" data-loading-text="{{ text_loading }}"  class="btn btn-primary" />
                </div>
              </div>
              <p>
                <span class="text-muted">{{ text_reward_total }}{{ reward.total ?? 0 }} {{ text_reward_max }}{{ reward.max }}</span>
              </p>
            </div>
            {% endif %}

            {% if credit.status %}
            <div class="tab-pane {{ tab == 'credit' ? 'active' }}" id="tab-credit">
              <div class="radio {{ credit.credit ? 'active' }}">
                <label><input type="radio" name="credit" id="" value="1" {{ credit.credit ? 'checked' }}> {{ button_credit_on }}</label>
              </div>

              <div class="radio {{ not credit.credit ? 'active' }}">
                <label><input type="radio" name="credit" id="" value="0" {{ not credit.credit ? 'checked' }}> {{ button_credit_off }}</label>
              </div>

              <p>
                <span class="text-muted">{{ entry_credit_total }}{{ credit.total ?? 0 }}</span>
              </p>
            </div>
            {% endif %}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
