{% extends 'base.html' %}
{% block content %}
  <h2>Waste Report</h2>

  <form method="GET" class="card" style="margin-top: 12px; margin-bottom: 16px;">
    <div style="display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end;">
      <div class="field">
        <label class="label">Start Date</label>
        <input type="date" name="start" value="{{ start.strftime('%Y-%m-%d') if start else '' }}" class="input">
      </div>
      <div class="field">
        <label class="label">End Date</label>
        <input type="date" name="end" value="{{ end.strftime('%Y-%m-%d') if end else '' }}" class="input">
      </div>
      <div>
        <button type="submit" class="btn-primary">Filter</button>
        <a href="{{ url_for('report_waste') }}" class="btn-outline" style="margin-left: 8px;">Clear</a>
      </div>
    </div>
  </form>

  <!-- Summary Cards -->
  <div class="grid cols-3" style="margin-bottom: 16px;">
    <div class="card" style="border-color: #f59e0b; background-color: #fffbeb;">
      <h3 style="color: #92400e;">Total Waste</h3>
      <div class="stat" style="color: #b45309; font-size: 2em;">{{ total_waste_kg|kg }}</div>
    </div>
    <div class="card" style="border-color: #dc2626; background-color: #fef2f2;">
      <h3 style="color: #991b1b;">Total Cost</h3>
      <div class="stat" style="color: #b91c1c; font-size: 2em;">{{ total_cost|currency }}</div>
    </div>
    <div class="card">
      <h3>Total Entries</h3>
      <div class="stat" style="font-size: 2em;">{{ wastes|length }}</div>
    </div>
  </div>

  <!-- Category Breakdown -->
  {% if category_stats %}
  <div class="card" style="margin-bottom: 16px;">
    <h3>Waste by Category</h3>
    <table class="table">
      <thead>
        <tr>
          <th>Category</th>
          <th>Count</th>
          <th>Total Weight</th>
          <th>Total Cost</th>
        </tr>
      </thead>
      <tbody>
        {% for category, stats in category_stats.items() %}
        <tr>
          <td>
            {% if category == 'spoilage' %}
              🦠 Spoilage
            {% elif category == 'shrinkage' %}
              📉 Shrinkage
            {% elif category == 'damage' %}
              💥 Damage
            {% elif category == 'expired' %}
              ⏰ Expired
            {% else %}
              ❓ Other
            {% endif %}
          </td>
          <td>{{ stats.count }}</td>
          <td class="highlight-quantity">{{ stats.weight|kg }}</td>
          <td>{{ stats.cost|currency }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% endif %}

  <!-- Live Search -->
  <div class="card" style="margin-bottom: 8px;">
    <input type="text" id="waste-report-search" placeholder="🔍 Search waste by date, weight, category, description, cost, recorded by..." 
           style="width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; box-sizing: border-box;">
  </div>
  
  <!-- Detailed Waste List -->
  <div class="card">
    <h3>Waste Details</h3>
    <table class="table" id="waste-report-table">
      <thead>
        <tr>
          <th>Date</th>
          <th>Weight (kg)</th>
          <th>Category</th>
          <th>Description</th>
          <th>Cost</th>
          <th>Recorded By</th>
        </tr>
      </thead>
      <tbody>
        {% for waste in wastes %}
        <tr>
          <td>{{ waste.date }}</td>
          <td class="highlight-quantity">{{ waste.weight_kg|kg }}</td>
          <td>
            {% if waste.category == 'spoilage' %}
              <span style="color: #dc2626;">🦠 Spoilage</span>
            {% elif waste.category == 'shrinkage' %}
              <span style="color: #f59e0b;">📉 Shrinkage</span>
            {% elif waste.category == 'damage' %}
              <span style="color: #ef4444;">💥 Damage</span>
            {% elif waste.category == 'expired' %}
              <span style="color: #8b5cf6;">⏰ Expired</span>
            {% else %}
              <span style="color: #6b7280;">❓ Other</span>
            {% endif %}
          </td>
          <td>{{ waste.description or '-' }}</td>
          <td>
            {% if waste.total_cost > 0 %}
              {{ waste.total_cost|currency }}
            {% else %}
              <span class="muted">-</span>
            {% endif %}
          </td>
          <td>{{ waste.creator.name }}</td>
        </tr>
        {% else %}
        <tr><td colspan="6" class="muted">No waste recorded for this period.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      initLiveSearch('waste-report-search', 'waste-report-table');
    });
  </script>
{% endblock %}