{% extends 'base.html' %}
{% block content %}
  <div style="display:flex;justify-content:space-between;align-items:center;">
    <h2>📦 Purchases</h2>
    {% if current_user.role in ['admin','supplier'] %}
      <a href="{{ url_for('purchase_new') }}" class="btn-primary">➕ New Purchase</a>
    {% endif %}
  </div>

  <!-- Purchase Summary Cards -->
  {% if purchases %}
    {% set total_weight = purchases|sum(attribute='weight_kg') %}
    {% set total_amount = purchases|sum(attribute='total_amount') %}
    {% set avg_price = (total_amount / 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_amount|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;">{{ purchases|length }}</div>
            <div style="opacity: 0.9;">Total Purchases</div>
          </div>
        </div>
      </div>
    </div>
  {% endif %}

  <!-- Purchases 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 History</h3>
      <div style="color: #666; font-size: 0.9em;">
        {% if purchases %}
          Showing <span id="purchase-count">{{ purchases|length }}</span> purchase{{ 's' if purchases|length != 1 else '' }}
        {% endif %}
      </div>
    </div>
    
    <!-- Live Search -->
    <div style="margin-bottom: 16px;">
      <input type="text" id="purchase-search" placeholder="🔍 Search purchases by date, supplier, farm, weight, price..." 
             style="width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; box-sizing: border-box;">
    </div>
    
    {% if purchases %}
      <div style="overflow-x: auto;">
        <table class="table" id="purchases-table">
          <thead>
            <tr style="background-color: #f8f9fa;">
              <th style="font-weight: 600; color: #495057;">📅 Date</th>
              <th style="font-weight: 600; color: #495057;">👤 Supplier</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 purchases %}
            <tr style="border-bottom: 1px solid #e9ecef; transition: background-color 0.2s;">
              <td style="font-weight: 500; color: #495057;">{{ p.date|date_format }}</td>
              <td style="font-weight: 500; color: #495057;">{{ p.supplier.name }}</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>
        </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 Purchases Yet</h3>
        <p style="margin-bottom: 24px;">Start by recording your first purchase from a farm.</p>
        {% if current_user.role in ['admin','supplier'] %}
          <a href="{{ url_for('purchase_new') }}" class="btn-primary">➕ Record First Purchase</a>
        {% endif %}
      </div>
    {% endif %}
  </div>
  
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      initLiveSearch('purchase-search', 'purchases-table');
    });
  </script>
{% endblock %}


