{% extends 'base.html' %}

{% block content %}
  <h2>Create New Demand Order</h2>
  
  <!-- Order Form -->
  <div class="card">
    <h3>Order Details</h3>
    
    <form method="post">
      {{ form.hidden_tag() }}
      
      <div class="grid cols-2" style="gap: 20px;">
        <div class="field">
          <label class="label">{{ form.date.label }}</label>
          {{ form.date(class="input", type="date") }}
          {% if form.date.errors %}
            <div class="error">{{ form.date.errors[0] }}</div>
          {% endif %}
        </div>
        
        <div class="field">
          <label class="label">{{ form.weight_kg.label }}</label>
          {{ form.weight_kg(class="input", placeholder="e.g., 25.50") }}
          {% if form.weight_kg.errors %}
            <div class="error">{{ form.weight_kg.errors[0] }}</div>
          {% endif %}
          <small style="color: #666;">Enter the weight in kilograms you need</small>
        </div>
      </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;">Expected price per kilogram</small>
      </div>
      
      <div class="field">
        <label class="label">{{ form.description.label }}</label>
        {{ form.description(class="input", rows="4", placeholder="Any special requirements, quality preferences, delivery notes, etc.") }}
        {% if form.description.errors %}
          <div class="error">{{ form.description.errors[0] }}</div>
        {% endif %}
        <small style="color: #666;">Optional: Describe your specific requirements</small>
      </div>
      
      <div style="margin-top: 24px;">
        <button type="submit" class="btn-primary">Create Demand Order</button>
        <a href="{{ url_for('demand_orders_list') }}" class="btn-outline" style="margin-left: 12px;">Cancel</a>
      </div>
    </form>
  </div>

  <!-- Order Process Info -->
  <div class="card" style="margin-top: 20px;">
    <h3>How It Works</h3>
    <div class="grid cols-3" style="gap: 20px;">
      <div style="text-align: center; padding: 16px;">
        <div style="font-size: 32px; color: #0ea5e9; margin-bottom: 8px;">📝</div>
        <h4 style="margin: 0 0 8px 0; color: #0369a1;">1. Create Order</h4>
        <p style="margin: 0; color: #666; font-size: 14px;">Submit your meat requirements and preferences</p>
      </div>
      
      <div style="text-align: center; padding: 16px;">
        <div style="font-size: 32px; color: #059669; margin-bottom: 8px;">✅</div>
        <h4 style="margin: 0 0 8px 0; color: #065f46;">2. Admin Review</h4>
        <p style="margin: 0; color: #666; font-size: 14px;">Admin will review, modify if needed, and approve</p>
      </div>
      
      <div style="text-align: center; padding: 16px;">
        <div style="font-size: 32px; color: #7c3aed; margin-bottom: 8px;">🚚</div>
        <h4 style="margin: 0 0 8px 0; color: #5b21b6;">3. Delivery</h4>
        <p style="margin: 0; color: #666; font-size: 14px;">Assigned supplier will deliver to your location</p>
      </div>
    </div>
  </div>
{% endblock %}