{% extends 'base.html' %}

{% block content %}
  <h2>Approve & Modify Order #{{ order.id }}</h2>
  
  <!-- Original Order Details -->
  <div class="card" style="margin-bottom: 20px;">
    <h3>Original Order Details</h3>
    <div class="grid cols-2" style="gap: 20px;">
      <div>
        <div style="margin-bottom: 8px;">
          <span style="color: #666;">Customer:</span>
          <strong>{{ order.customer.name }}</strong>
        </div>
        <div style="margin-bottom: 8px;">
          <span style="color: #666;">Order Date:</span>
          <strong>{{ order.date|date_format }}</strong>
        </div>
        <div style="margin-bottom: 8px;">
          <span style="color: #666;">Original Weight:</span>
          <strong>{{ order.weight_kg|kg }}</strong>
        </div>
      </div>
      <div>
        <div style="margin-bottom: 8px;">
          <span style="color: #666;">Original Price/kg:</span>
          <strong>{{ order.price_per_kg|currency }}</strong>
        </div>
        <div style="margin-bottom: 8px;">
          <span style="color: #666;">Original Total:</span>
          <strong>{{ order.total_amount|currency }}</strong>
        </div>
        <div style="margin-bottom: 8px;">
          <span style="color: #666;">Status:</span>
          <span style="background: #fef3c7; color: #92400e; padding: 4px 8px; border-radius: 12px; font-size: 12px;">⏳ Pending</span>
        </div>
      </div>
    </div>
    
    {% if order.description %}
      <div style="margin-top: 16px; padding-top: 16px; border-top: 1px solid #e5e7eb;">
        <div style="margin-bottom: 8px;">
          <span style="color: #666;">Customer Requirements:</span>
        </div>
        <div style="background: #f9fafb; padding: 12px; border-radius: 6px; color: #374151; line-height: 1.6;">
          {{ order.description }}
        </div>
      </div>
    {% endif %}
  </div>

  <!-- Inventory Check -->
  <div class="card" style="margin-bottom: 20px;">
    <h3>Inventory Availability</h3>
    <div style="display: flex; align-items: center; gap: 16px;">
      <div style="background: #d1fae5; border: 1px solid #059669; border-radius: 8px; padding: 16px; text-align: center;">
        <div style="font-size: 24px; color: #059669;">📦</div>
        <div style="font-weight: 600; color: #065f46; font-size: 1.2em;">{{ available_inventory|kg }}</div>
        <div style="font-size: 12px; color: #065f46;">Available</div>
      </div>
      <div style="color: #666; font-size: 14px;">
        <p style="margin: 0 0 8px 0;"><strong>Note:</strong> Ensure the approved weight doesn't exceed available inventory.</p>
        <p style="margin: 0;">You can modify the customer's request based on availability and pricing.</p>
      </div>
    </div>
  </div>

  <!-- Approval Form -->
  <div class="card">
    <h3>Approve & Modify Order</h3>
    
    <form method="post">
      {{ form.hidden_tag() }}
      
      <div class="grid cols-2" style="gap: 20px; margin-bottom: 20px;">
        <div class="field">
          <label class="label">{{ form.weight_kg.label }}</label>
          {{ form.weight_kg(class="input", placeholder="e.g., 25.50", max=available_inventory) }}
          {% if form.weight_kg.errors %}
            <div class="error">{{ form.weight_kg.errors[0] }}</div>
          {% endif %}
          <small style="color: #666;">Maximum: {{ available_inventory|kg }}</small>
        </div>
        
        <div class="field">
          <label class="label">{{ form.price_per_kg.label }}</label>
          {{ form.price_per_kg(class="input", placeholder="e.g., 180.00") }}
          {% if form.price_per_kg.errors %}
            <div class="error">{{ form.price_per_kg.errors[0] }}</div>
          {% endif %}
          <small style="color: #666;">Final price per kilogram</small>
        </div>
      </div>
      
      <div class="field" style="margin-bottom: 20px;">
        <label class="label">{{ form.description.label }}</label>
        {{ form.description(class="input", rows="4", placeholder="Modified requirements, quality specifications, delivery notes, etc.") }}
        {% if form.description.errors %}
          <div class="error">{{ form.description.errors[0] }}</div>
        {% endif %}
        <small style="color: #666;">You can modify the customer's requirements based on availability and business needs</small>
      </div>
      
      <div class="field" style="margin-bottom: 20px;">
        <label class="label">{{ form.admin_notes.label }}</label>
        {{ form.admin_notes(class="input", rows="3", placeholder="Any notes about the approval, modifications made, special instructions, etc.") }}
        {% if form.admin_notes.errors %}
          <div class="error">{{ form.admin_notes.errors[0] }}</div>
        {% endif %}
        <small style="color: #666;">These notes will be visible to the customer and supplier</small>
      </div>
      
      <!-- Preview of Changes -->
      <div style="background: #f0f9ff; border: 1px solid #0ea5e9; border-radius: 8px; padding: 16px; margin-bottom: 20px;">
        <h4 style="margin: 0 0 12px 0; color: #0369a1;">📊 Order Summary Preview</h4>
        <div class="grid cols-2" style="gap: 20px;">
          <div>
            <div style="margin-bottom: 8px;">
              <span style="color: #666;">Weight:</span>
              <strong id="previewWeight">{{ order.weight_kg|kg }}</strong>
            </div>
            <div style="margin-bottom: 8px;">
              <span style="color: #666;">Price/kg:</span>
              <strong id="previewPrice">{{ order.price_per_kg|currency }}</strong>
            </div>
          </div>
          <div>
            <div style="margin-bottom: 8px;">
              <span style="color: #666;">Total Amount:</span>
              <strong id="previewTotal" style="font-size: 1.1em; color: #059669;">{{ order.total_amount|currency }}</strong>
            </div>
            <div style="margin-bottom: 8px;">
              <span style="color: #666;">Status:</span>
              <span style="background: #d1fae5; color: #065f46; padding: 4px 8px; border-radius: 12px; font-size: 12px;">✅ Will be Approved</span>
            </div>
          </div>
        </div>
      </div>
      
      <div style="margin-top: 24px;">
        <button type="submit" class="btn-primary">Approve Order</button>
        <a href="{{ url_for('demand_order_view', order_id=order.id) }}" class="btn-outline" style="margin-left: 12px;">Cancel</a>
      </div>
    </form>
  </div>

  <script>
    // Real-time preview updates
    document.getElementById('{{ form.weight_kg.id }}').addEventListener('input', updatePreview);
    document.getElementById('{{ form.price_per_kg.id }}').addEventListener('input', updatePreview);
    
    function updatePreview() {
      const weight = parseFloat(document.getElementById('{{ form.weight_kg.id }}').value) || 0;
      const price = parseFloat(document.getElementById('{{ form.price_per_kg.id }}').value) || 0;
      const total = weight * price;
      
      document.getElementById('previewWeight').textContent = weight.toFixed(2) + ' kg';
      document.getElementById('previewPrice').textContent = 'PKR ' + price.toFixed(2);
      document.getElementById('previewTotal').textContent = 'PKR ' + total.toFixed(2);
    }
  </script>
{% endblock %}