{% extends 'base.html' %}
{% block content %}
  <div style="display:flex;justify-content:space-between;align-items:center;">
    <h2>📦 New Purchase</h2>
    <a href="{{ url_for('purchases_list') }}" class="btn-outline">← Back to Purchases</a>
  </div>

  <div class="card" style="margin-top: 16px;">
    <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 20px; border-radius: 8px 8px 0 0; margin: -16px -16px 20px -16px;">
      <div style="display: flex; align-items: center; gap: 12px;">
        <div style="font-size: 2em;">🏭</div>
        <div>
          <h3 style="margin: 0; color: white;">Record New Purchase</h3>
          <p style="margin: 4px 0 0 0; opacity: 0.9;">Add a new purchase from a farm</p>
        </div>
      </div>
    </div>

    <form method="post" class="form" id="purchaseForm">
      {{ form.hidden_tag() }}
      
      <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px;">
        <div class="field">
          <label class="label" style="font-weight: 600; color: #495057; margin-bottom: 8px;">
            🏭 Farm
          </label>
          {{ form.farm_id(class="form-control", style="padding: 12px; border: 2px solid #e9ecef; border-radius: 6px; font-size: 16px;") }}
          {% if form.farm_id.errors %}
            <div class="error" style="color: #dc3545; font-size: 14px; margin-top: 4px;">{{ form.farm_id.errors[0] }}</div>
          {% endif %}
        </div>
        
        <div class="field">
          <label class="label" style="font-weight: 600; color: #495057; margin-bottom: 8px;">
            📅 Date
          </label>
          {{ form.date(type='date', class="form-control", style="padding: 12px; border: 2px solid #e9ecef; border-radius: 6px; font-size: 16px;") }}
          {% if form.date.errors %}
            <div class="error" style="color: #dc3545; font-size: 14px; margin-top: 4px;">{{ form.date.errors[0] }}</div>
          {% endif %}
        </div>
      </div>

      <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px;">
        <div class="field">
          <label class="label" style="font-weight: 600; color: #495057; margin-bottom: 8px;">
            ⚖️ Weight (kg)
          </label>
          {{ form.weight_kg(step='0.01', class="form-control", style="padding: 12px; border: 2px solid #e9ecef; border-radius: 6px; font-size: 16px;", placeholder="Enter weight in kg") }}
          {% if form.weight_kg.errors %}
            <div class="error" style="color: #dc3545; font-size: 14px; margin-top: 4px;">{{ form.weight_kg.errors[0] }}</div>
          {% endif %}
        </div>
        
        <div class="field">
          <label class="label" style="font-weight: 600; color: #495057; margin-bottom: 8px;">
            💲 Price per kg
          </label>
          {{ form.price_per_kg(step='0.01', class="form-control", style="padding: 12px; border: 2px solid #e9ecef; border-radius: 6px; font-size: 16px;", placeholder="Enter price per kg") }}
          {% if form.price_per_kg.errors %}
            <div class="error" style="color: #dc3545; font-size: 14px; margin-top: 4px;">{{ form.price_per_kg.errors[0] }}</div>
          {% endif %}
        </div>
      </div>

      <!-- Total Calculation Display -->
      <div style="background: #f8f9fa; padding: 16px; border-radius: 6px; margin-bottom: 20px; border-left: 4px solid #28a745;">
        <div style="display: flex; justify-content: space-between; align-items: center;">
          <div>
            <div style="font-weight: 600; color: #495057; margin-bottom: 4px;">💰 Total Amount</div>
            <div style="font-size: 1.2em; font-weight: bold; color: #28a745;" id="totalAmount">PKR 0.00</div>
          </div>
          <div style="font-size: 2em;">🧮</div>
        </div>
      </div>

      <div style="display: flex; gap: 12px; justify-content: flex-end;">
        <a href="{{ url_for('purchases_list') }}" class="btn-outline" style="padding: 12px 24px;">Cancel</a>
        {{ form.submit(class='btn-primary', style='padding: 12px 24px; font-weight: 600;') }}
      </div>
    </form>
  </div>

  <script>
    // Auto-calculate total amount
    document.addEventListener('DOMContentLoaded', function() {
      const weightField = document.querySelector('input[name="weight_kg"]');
      const priceField = document.querySelector('input[name="price_per_kg"]');
      const totalDisplay = document.getElementById('totalAmount');
      
      function calculateTotal() {
        const weight = parseFloat(weightField.value) || 0;
        const price = parseFloat(priceField.value) || 0;
        const total = weight * price;
        totalDisplay.textContent = 'PKR ' + total.toFixed(2);
      }
      
      weightField.addEventListener('input', calculateTotal);
      priceField.addEventListener('input', calculateTotal);
    });
  </script>
{% endblock %}