templates/result.html

{% extends "base.html" %}
{% block title %}Prediction Result - PriceMyCar{% endblock %}

{% block content %}
<section class="result-page">
  <div class="result-container">
    <a href="{{ url_for('predict_page') }}" class="back-link">← Back</a>
    <h1>Prediction Result</h1>
    <p class="page-sub">{{ result.inputs.year }} {{ result.inputs.brand_model }}</p>

    {% if not result.is_model_supported %}
    <div class="alert alert-warning">
      <div class="alert-icon">⚠️</div>
      <div class="alert-content">
        <h4>Model Not Fully Supported (Limited Accuracy)</h4>
        <p>The car model <strong>{{ result.inputs.brand_model }}</strong> is not registered in our primary database. This estimate is based on the closest available segment approximation, and the actual price may vary.</p>
      </div>
    </div>
    {% endif %}

    <div class="result-grid">

      <!-- LEFT: price card + market comparison + analysis -->
      <div class="result-left">
        <div class="price-card">
          <div class="confidence-badge">⚡ Powered by {{ result.ai_model }} · Accuracy: {{ result.accuracy_r2 }}</div>
          <div class="price-label">Estimated Market Value</div>
          <div class="price-main">Rp {{ "{:,.0f}".format(result.adjusted_price) }}</div>

          {% if result.condition.total_penalty_pct > 0 %}
          <div class="price-adjustment">
            <span class="base-label">Base ML Price: Rp {{ "{:,.0f}".format(result.base_price) }}</span>
            <span class="penalty-tag">−{{ result.condition.total_penalty_pct }}% condition</span>
          </div>
          {% endif %}

          <div class="price-range">
            Expected range: Rp {{ "{:,.0f}".format(result.ci_low) }} - Rp {{ "{:,.0f}".format(result.ci_high) }}
          </div>
        </div>

        <!-- Market Comparison bar chart (static demo) -->
        <div class="chart-card">
          <h3>Market Comparison</h3>
          <div class="bar-chart">
            <div class="bar-group">
              <div class="bar" style="height:{{ [55,60,65,70]|random }}%" title="Trade-in"></div>
              <span>Trade-in</span>
            </div>
            <div class="bar-group">
              <div class="bar highlight" style="height:75%"></div>
              <span>Predicted (Ours)</span>
            </div>
            <div class="bar-group">
              <div class="bar" style="height:{{ [80,85,90,95]|random }}%" title="Dealer Retail"></div>
              <span>Dealer Retail</span>
            </div>
          </div>
        </div>

        <!-- Detailed Price Deviation & Indonesian Market Analysis -->
        <div class="analysis-card">
          <h3>📊 Price Deviation &amp; Indonesian Market Analysis</h3>
          
          <div class="analysis-section">
            <h4>1. Market Adjustments (June 2026)</h4>
            <p>The base machine learning model trained on Indian data was converted using the exchange rate of <strong>1 INR = Rp 187.6</strong> and adjusted to the local Indonesian used car market with a <strong>{{ result.market_multiplier }}x</strong> multiplier (accounting for luxury tax/PPnBM, import tariffs, and 2026 inflation). This pricing is cross-referenced with major Indonesian automotive portals: <strong>OLX Indonesia</strong>, <strong>Mobil123</strong>, and <strong>GridOto Pricelist</strong>.</p>
          </div>

          <div class="analysis-section">
            <h4>2. Why Real-World Prices May Deviate (Errors)</h4>
            <p>The Machine Learning model estimates an objective valuation based on specifications, but actual transaction prices can vary due to these external real-world factors:</p>
            
            <div class="deviation-grid">
              <div class="dev-item">
                <span class="dev-icon">📄</span>
                <strong>Documents &amp; Tax Status:</strong>
                <p>Complete paperwork (STNK &amp; BPKB) is essential. Unpaid annual road taxes or missing documents can discount the car's value by the tax debt plus administrative fines.</p>
              </div>
              <div class="dev-item">
                <span class="dev-icon">🎨</span>
                <strong>Color Popularity:</strong>
                <p>Neutral colors (White, Black, Silver) have high market liquidity and sell for 5-10% more than bright colors (Red, Green, Orange) in the Indonesian used car market.</p>
              </div>
              <div class="dev-item">
                <span class="dev-icon">🔧</span>
                <strong>Non-Standard Modifications:</strong>
                <p>Heavy custom modifications (engine tuning, structural body changes) narrow the buyer pool, often reducing the car's resale value compared to a stock vehicle.</p>
              </div>
              <div class="dev-item">
                <span class="dev-icon">📍</span>
                <strong>Geographical Location:</strong>
                <p>Used car prices in the Greater Jakarta area (Jabodetabek) are highly competitive. Prices in regions outside Java can be 10-25% higher due to new vehicle distribution costs.</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- RIGHT: key factors + condition breakdown -->
      <div class="result-right">

        <div class="factors-card">
          <h3>🔑 Key Factors</h3>

          <div class="factor positive">
            <div class="factor-label">Positive Impact</div>
            <p>
              {% if result.inputs.km < 60000 %}Low mileage ({{ "{:,}".format(result.inputs.km) }} KM) adds value.{% endif %}
              {% if result.inputs.owner == 'First Owner' %}First-owner history is a strong positive signal.{% endif %}
              {% if result.inputs.transmission == 'Automatic' %}Automatic transmission commands a premium.{% endif %}
            </p>
          </div>

          <div class="factor negative">
            <div class="factor-label">Negative Impact</div>
            <p>
              {% if result.condition.total_penalty_pct > 0 %}
                Physical condition deductions total −{{ result.condition.total_penalty_pct }}%.
              {% endif %}
              {% if result.inputs.km > 80000 %}
                High mileage ({{ "{:,}".format(result.inputs.km) }} KM) reduces value.
              {% endif %}
            </p>
          </div>
        </div>

        <!-- Condition Breakdown -->
        {% if result.condition.total_penalty_pct > 0 %}
        <div class="factors-card">
          <h3>🔍 Condition Breakdown</h3>
          <table class="breakdown-table">
            <thead><tr><th>Factor</th><th>Status</th><th>Deduction</th></tr></thead>
            <tbody>
              {% for key, val in result.condition.breakdown.items() %}
              {% if val.penalty_pct != 0 %}
              <tr>
                <td>{{ key.replace('_', ' ').title() }}</td>
                <td>{{ val.label }}</td>
                <td class="{{ 'penalty-neg' if val.penalty_pct > 0 else 'penalty-pos' }}">
                  {{ '-' if val.penalty_pct > 0 else '+' }}{{ val.penalty_pct|abs }}%
                </td>
              </tr>
              {% endif %}
              {% endfor %}
              <tr class="total-row">
                <td colspan="2"><strong>Total Condition Adjustment</strong></td>
                <td><strong>−{{ result.condition.total_penalty_pct }}%</strong></td>
              </tr>
            </tbody>
          </table>
        </div>
        {% endif %}

        <div class="factors-card">
          <div class="factor-label">Market Trend</div>
          <p>Demand for {{ result.inputs.brand_model.split()[0] }} vehicles is currently stable in the used car market.</p>
          <a href="{{ url_for('predict_page') }}" class="btn-primary" style="margin-top:16px;display:inline-block">
            Predict Another Car
          </a>
        </div>

      </div>
    </div>
  </div>
</section>
{% endblock %}