{% extends 'base.html' %}
{% block content %}
  <div style="display:flex;justify-content:space-between;align-items:center;">
    <h2>📊 Purchase Report</h2>
    <a class="btn-outline" href="{{ url_for('report_export_csv', kind='purchases', start=start, end=end) }}">📥 Export CSV</a>
  </div>
  
  <!-- Live Search -->
  <div class="card" style="margin-top:8px; margin-bottom:8px;">
    <input type="text" id="purchase-report-search" placeholder="🔍 Search purchases by date, supplier, farm, weight, price, amount..." 
           style="width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; box-sizing: border-box;">
  </div>

  <!-- Report Summary -->
  {% if rows %}
    {% set total_weight = rows|sum(attribute='weight_kg') %}
    {% set avg_price = (total / total_weight) if total_weight > 0 else 0 %}
    
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin: 16px 0;">
      <div class="card" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;">
        <div style="display: flex; align-items: center; gap: 12px;">
          <div style="font-size: 2em;">📊</div>
          <div>
            <div style="font-size: 1.5em; font-weight: bold;">{{ total_weight|kg }}</div>
            <div style="opacity: 0.9;">Total Weight</div>
          </div>
        </div>
      </div>
      
      <div class="card" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); color: white;">
        <div style="display: flex; align-items: center; gap: 12px;">
          <div style="font-size: 2em;">💰</div>
          <div>
            <div style="font-size: 1.5em; font-weight: bold;">{{ total|currency }}</div>
            <div style="opacity: 0.9;">Total Spent</div>
          </div>
        </div>
      </div>
      
      <div class="card" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); color: white;">
        <div style="display: flex; align-items: center; gap: 12px;">
          <div style="font-size: 2em;">📈</div>
          <div>
            <div style="font-size: 1.5em; font-weight: bold;">{{ avg_price|currency }}</div>
            <div style="opacity: 0.9;">Avg Price/kg</div>
          </div>
        </div>
      </div>
      
      <div class="card" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); color: white;">
        <div style="display: flex; align-items: center; gap: 12px;">
          <div style="font-size: 2em;">📦</div>
          <div>
            <div style="font-size: 1.5em; font-weight: bold;">{{ rows|length }}</div>
            <div style="opacity: 0.9;">Total Purchases</div>
          </div>
        </div>
      </div>
    </div>
  {% endif %}

  <!-- Report Table -->
  <div class="card" style="margin-top: 16px;">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
      <h3 style="margin: 0;">Purchase Details</h3>
      <div style="color: #666; font-size: 0.9em;">
        {% if rows %}
          Showing {{ rows|length }} purchase{{ 's' if rows|length != 1 else '' }}
        {% endif %}
      </div>
    </div>
    
    {% if rows %}
      <div style="overflow-x: auto;">
        <table class="table" id="purchase-report-table">
          <thead>
            <tr style="background-color: #f8f9fa;">
              <th style="font-weight: 600; color: #495057;">📅 Date</th>
              <th style="font-weight: 600; color: #495057;">🏭 Farm</th>
              <th style="font-weight: 600; color: #495057;">⚖️ Weight</th>
              <th style="font-weight: 600; color: #495057;">💲 Price/kg</th>
              <th style="font-weight: 600; color: #495057;">💰 Total</th>
            </tr>
          </thead>
          <tbody>
            {% for p in rows %}
            <tr style="border-bottom: 1px solid #e9ecef;">
              <td style="font-weight: 500; color: #495057;">{{ p.date|date_format }}</td>
              <td style="font-weight: 500; color: #495057;">
                {% if p.farm %}
                  <span style="background: #e3f2fd; color: #1976d2; padding: 4px 8px; border-radius: 4px; font-size: 0.85em;">
                    {{ p.farm.name }}
                  </span>
                {% else %}
                  <span style="color: #999;">-</span>
                {% endif %}
              </td>
              <td style="font-weight: 600; color: #2c3e50;">{{ p.weight_kg|kg }}</td>
              <td style="font-weight: 600; color: #27ae60;">{{ p.price_per_kg|currency }}</td>
              <td style="font-weight: 700; color: #e74c3c; font-size: 1.1em;">{{ p.total_amount|currency }}</td>
            </tr>
            {% endfor %}
          </tbody>
          <tfoot>
            <tr style="background-color: #f8f9fa; font-weight: bold;">
              <th colspan="3" style="color: #495057;">📊 Total</th>
              <th style="color: #27ae60;">{{ total_weight|kg }}</th>
              <th style="color: #e74c3c; font-size: 1.2em;">{{ total|currency }}</th>
            </tr>
          </tfoot>
        </table>
      </div>
    {% else %}
      <div style="text-align: center; padding: 40px 20px; color: #666;">
        <div style="font-size: 3em; margin-bottom: 16px;">📊</div>
        <h3 style="color: #495057; margin-bottom: 8px;">No Purchase Data</h3>
        <p style="margin-bottom: 24px;">No purchases found for the selected period.</p>
      </div>
    {% endif %}
  </div>
  
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      initLiveSearch('purchase-report-search', 'purchase-report-table');
    });
  </script>
{% endblock %}