{{ header }}
<style type="text/css">
/* ── base resets ── */
.table tr:nth-child(odd),
.table tr:nth-child(even) { background-color: unset !important; }
.table thead th            { border-bottom: 2px solid #f1ae004d; }
.table-bordered td,
.table-bordered th         { border-color: #f1ae004d !important; }
#input-date-added,
#input-date-modified {
  height: 44px;
  border-radius: 5px;
  border: 2px solid #f1ae004d;
}
#input-date-added:focus,
#input-date-modified:focus {
  border: 2px solid #f1ae004d;
  box-shadow: none;
}

/* ── Net Business summary banner ── */
.biz-summary-panel {
  background: linear-gradient(135deg, #fff8e1 0%, #fffde7 100%);
  border: 2px solid #f1ae00;
  border-radius: 10px;
  padding: 20px 24px;
  margin-bottom: 20px;
}
.biz-summary-panel h3 {
  margin: 0 0 16px 0;
  font-size: 17px;
  font-weight: 700;
  color: #7a5800;
  letter-spacing: .3px;
}
.biz-metric { text-align: center; }
.biz-metric-label {
  font-size: 12px;
  color: #888;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 4px;
}
.biz-metric-value {
  font-size: 26px;
  font-weight: 700;
  color: #333;
}
.biz-metric-value.highlight { color: #e67e00; }
.biz-divider {
  border-left: 1px solid #f1ae0060;
  margin: 0 10px;
}

/* ── Step panels ── */
.biz-step-panel {
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.biz-step-header {
  padding: 10px 14px;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.biz-step-header small {
  font-weight: 400;
  font-size: 11px;
  opacity: .75;
}
.biz-step-header .step-badge {
  display: inline-block;
  width: 22px;
  height: 22px;
  line-height: 22px;
  border-radius: 50%;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
}

/* earn */
.biz-earn .biz-step-header  { background: #e8f5e9; color: #2e7d32; }
.biz-earn .step-badge        { background: #2e7d32; color: #fff; }
.biz-earn                    { border: 1px solid #c8e6c9; }
/* deduct */
.biz-deduct .biz-step-header { background: #fce4ec; color: #c62828; }
.biz-deduct .step-badge      { background: #c62828; color: #fff; }
.biz-deduct                  { border: 1px solid #f8bbd0; }
/* net formula */
.biz-net .biz-step-header    { background: #fff3e0; color: #e65100; }
.biz-net .step-badge         { background: #e65100; color: #fff; }
.biz-net                     { border: 1px solid #ffe0b2; }

.biz-step-body { background: #fff; padding: 14px; }

/* ── Calculation table inside each step ── */
.biz-calc-table { margin: 0; font-size: 14px; }
.biz-calc-table td { padding: 6px 4px !important; border: none !important; vertical-align: middle; }
.biz-calc-table .row-discount td { color: #c62828; }
.biz-calc-table .row-net {
  border-top: 1px solid #eee !important;
  font-weight: 700;
  font-size: 15px;
}
.biz-calc-table .row-net td { padding-top: 10px !important; border-top: 1px solid #ddd !important; }
.val-right { text-align: right; white-space: nowrap; }

/* ── Operator column ── */
.biz-operator-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin-top: 40px;
}
.biz-op-sign {
  font-size: 40px;
  font-weight: 300;
  color: #c62828;
  line-height: 1;
}
.biz-op-label {
  font-size: 11px;
  color: #999;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* ── Formula step ── */
.formula-line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  padding: 5px 0;
  font-size: 14px;
  color: #555;
}
.formula-label  { font-weight: 700; color: #333; min-width: 180px; }
.formula-eq     { color: #666; }
.formula-vals   { color: #444; }
.formula-result {
  font-weight: 700;
  font-size: 17px;
  color: #e65100;
}
.formula-divider { border: none; border-top: 1px solid #eee; margin: 10px 0; }
</style>

<div id="account-order" class="container">
  <ul class="breadcrumb">
    {% for breadcrumb in breadcrumbs %}
      <li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
    {% endfor %}
  </ul>

  <div class="row">
    {{ column_left }}

    {% if column_left and column_right %}{% set class = 'col-sm-6' %}
    {% elseif column_left or column_right %}{% set class = 'col-sm-9' %}
    {% else %}{% set class = 'col-sm-12' %}{% endif %}

    <div id="content" class="col-sm-9">

      {# Date Filter #}
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title"><i class="fa fa-filter"></i> {{ text_filter }}</h3>
        </div>
        <div class="panel-body">
          <div class="form-group row">
            <div class="col-sm-6">
              <label class="control-label" for="input-date-added">{{ entry_date_start }}</label>
              <input type="date" name="filter_date_start" value="{{ filter_date_start }}"
                     placeholder="{{ entry_date_start }}" id="input-date-added" class="form-control" />
            </div>
            <div class="col-sm-6">
              <label class="control-label" for="input-date-modified">{{ entry_date_end }}</label>
              <input type="date" name="filter_date_end" value="{{ filter_date_end }}"
                     placeholder="{{ entry_date_end }}" id="input-date-modified" class="form-control" />
            </div>
          </div>
          <div class="form-group text-right" style="margin-bottom:0">
            <button type="button" id="button-filter" class="btn btn-default">
              <i class="fa fa-filter"></i> {{ button_filter }}
            </button>
          </div>
        </div>
      </div>

      {# Net Business Summary Banner #}
      <div class="biz-summary-panel">
        <h3><i class="fa fa-bar-chart"></i> &nbsp;Net Business Summary</h3>
        <div class="row">
          <div class="col-xs-6 biz-metric">
            <div class="biz-metric-label">Net Business Points (BP)</div>
            <div class="biz-metric-value">{{ total_points }}</div>
          </div>
          <div class="col-xs-6 biz-metric">
            <div class="biz-metric-label">Net Business Amount</div>
            <div class="biz-metric-value highlight">{{ total_amount }}</div>
          </div>
        </div>
      </div>

      {# Steps Row #}
      <div class="row">

        {# Step 1 - Earn #}
        <div class="col-sm-5">
          <div class="biz-step-panel biz-earn">
            <div class="biz-step-header">
              <span class="step-badge">1</span>
              Business Earned &nbsp;<small>Confirmed Orders</small>
            </div>
            <div class="biz-step-body">
              <table class="table biz-calc-table" width="100%">
                <tr>
                  <td>Business Points (BP)</td>
                  <td class="val-right"><strong>{{ earn_points }}</strong></td>
                </tr>
                <tr>
                  <td>Business Amount</td>
                  <td class="val-right">{{ earn_amount }}</td>
                </tr>
                {% if has_earn_discount %}
                <tr class="row-discount">
                  <td>
                    <i class="fa fa-minus-circle"></i> Rank Discount
                    <span style="font-size:11px;color:#999;display:block;padding-left:16px">
                      {{ earn_discount_bp }} BP &nbsp;/&nbsp; {{ earn_discount_amount }}
                    </span>
                  </td>
                  <td class="val-right">{{ earn_discount_bp }} BP</td>
                </tr>
                <tr class="row-net">
                  <td>Net Earn BP</td>
                  <td class="val-right" style="color:#2e7d32"><strong>{{ earn_points_adj }}</strong></td>
                </tr>
                <tr class="row-net">
                  <td>Net Earn Amount</td>
                  <td class="val-right" style="color:#2e7d32">{{ earn_net_amount }}</td>
                </tr>
                {% endif %}
              </table>
            </div>
          </div>
        </div>

        {# Operator #}
        <div class="col-sm-2 biz-operator-col hidden-xs">
          <div class="biz-op-sign">−</div>
          <div class="biz-op-label">Deduction</div>
        </div>

        {# Step 2 - Deduct #}
        <div class="col-sm-5">
          <div class="biz-step-panel biz-deduct">
            <div class="biz-step-header">
              <span class="step-badge">2</span>
              Business Deducted &nbsp;<small>Cancelled Orders</small>
            </div>
            <div class="biz-step-body">
              {% if deduction %}
              <table class="table biz-calc-table" width="100%">
                <tr>
                  <td>Business Points (BP)</td>
                  <td class="val-right"><strong>{{ deduct_points }}</strong></td>
                </tr>
                <tr>
                  <td>Business Amount</td>
                  <td class="val-right">{{ deduct_amount }}</td>
                </tr>
                {% if has_deduct_discount %}
                <tr class="row-discount">
                  <td>
                    <i class="fa fa-minus-circle"></i> Rank Discount
                    <span style="font-size:11px;color:#999;display:block;padding-left:16px">
                      Discount applied on cancelled orders
                    </span>
                  </td>
                  <td class="val-right">{{ deduct_discount_amount }}</td>
                </tr>
                {% endif %}
                <tr class="row-net">
                  <td>Net Deduct Business</td>
                  <td class="val-right" style="color:#c62828">{{ deduct_net_amount }}</td>
                </tr>
              </table>
              {% else %}
              <p style="color:#999;margin:10px 0 0;font-size:13px">
                <i class="fa fa-check-circle" style="color:#2e7d32"></i>
                &nbsp;No cancelled orders in this period.
              </p>
              {% endif %}
            </div>
          </div>
        </div>

      </div>{# end steps row #}

      {# Step 3 - Net Formula #}
      <div class="biz-step-panel biz-net">
        <div class="biz-step-header">
          <span class="step-badge">3</span>
          Net Business Calculation
        </div>
        <div class="biz-step-body">

          <div class="formula-line">
            <span class="formula-label">Net Business Amount</span>
            <span class="formula-eq">=</span>
            {% if has_earn_discount %}
            <span class="formula-vals">
              (Earn BP÷2 &minus; Rank Discount) &minus; Deduct BP÷2
            </span>
            {% else %}
            <span class="formula-vals">Earn BP÷2 &minus; Deduct BP÷2</span>
            {% endif %}
          </div>
          <div class="formula-line" style="padding-left:186px">
            <span class="formula-eq">=</span>
            {% if has_earn_discount %}
            <span class="formula-vals">{{ earn_net_amount }} &minus; {{ deduct_net_amount }}</span>
            {% else %}
            <span class="formula-vals">{{ earn_amount }} &minus; {{ deduct_amount }}</span>
            {% endif %}
          </div>
          <div class="formula-line" style="padding-left:186px">
            <span class="formula-eq">=</span>
            <span class="formula-result">{{ total_amount }}</span>
          </div>

          <hr class="formula-divider">

          <div class="formula-line">
            <span class="formula-label">Net Business Points (BP)</span>
            <span class="formula-eq">=</span>
            {% if has_earn_discount %}
            <span class="formula-vals">
              (Earn BP &minus; Rank Discount BP) &minus; Deduct BP
            </span>
            {% else %}
            <span class="formula-vals">Earn BP &minus; Deduct BP</span>
            {% endif %}
          </div>
          {% if has_earn_discount %}
          <div class="formula-line" style="padding-left:186px">
            <span class="formula-eq">=</span>
            <span class="formula-vals">
              ({{ earn_points }} &minus; {{ earn_discount_bp }}) &minus; {{ deduct_points_adj }}
            </span>
          </div>
          <div class="formula-line" style="padding-left:186px">
            <span class="formula-eq">=</span>
            <span class="formula-vals">{{ earn_points_adj }} &minus; {{ deduct_points_adj }}</span>
          </div>
          {% else %}
          <div class="formula-line" style="padding-left:186px">
            <span class="formula-eq">=</span>
            <span class="formula-vals">{{ earn_points }} &minus; {{ deduct_points }}</span>
          </div>
          {% endif %}
          <div class="formula-line" style="padding-left:186px">
            <span class="formula-eq">=</span>
            <span class="formula-result">{{ total_points }}</span>
          </div>

          <div style="margin-top:16px;text-align:right">
            <a href="{{ order_detail_url }}" class="btn btn-default"
               style="border:1px solid #f1ae00;color:#7a5800;font-size:13px">
              <i class="fa fa-list"></i> &nbsp;View Order Breakdown
            </a>
          </div>

        </div>
      </div>

    </div>{# end content #}
    {{ column_right }}
  </div>
</div>

<script type="text/javascript"><!--
$('#button-filter').on('click', function() {
  var url = '';
  var filter_date_start = $('input[name=\'filter_date_start\']').val();
  if (filter_date_start) { url += '&filter_date_start=' + encodeURIComponent(filter_date_start); }
  var filter_date_end = $('input[name=\'filter_date_end\']').val();
  if (filter_date_end) { url += '&filter_date_end=' + encodeURIComponent(filter_date_end); }
  location = 'index.php?route=account/business_detail' + url;
});
//--></script>

{{ footer }}
