{% extends 'base.html' %}

{% block content %}
  <h2>Assign Supplier - Order #{{ order.id }}</h2>
  
  <!-- Order Summary -->
  <div class="card" style="margin-bottom: 20px;">
    <h3>Order Summary</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;">Weight:</span>
          <strong>{{ order.weight_kg|kg }}</strong>
        </div>
      </div>
      <div>
        <div style="margin-bottom: 8px;">
          <span style="color: #666;">Price/kg:</span>
          <strong>{{ order.price_per_kg|currency }}</strong>
        </div>
        <div style="margin-bottom: 8px;">
          <span style="color: #666;">Total Amount:</span>
          <strong style="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;">✅ Approved</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;">Order Requirements:</span>
        </div>
        <div style="background: #f9fafb; padding: 12px; border-radius: 6px; color: #374151; line-height: 1.6;">
          {{ order.description }}
        </div>
      </div>
    {% endif %}
    
    {% if order.admin_notes %}
      <div style="margin-top: 16px; padding-top: 16px; border-top: 1px solid #e5e7eb;">
        <div style="margin-bottom: 8px;">
          <span style="color: #666;">Admin Notes:</span>
        </div>
        <div style="background: #f0f9ff; padding: 12px; border-radius: 6px; color: #0369a1; line-height: 1.6;">
          {{ order.admin_notes }}
        </div>
      </div>
    {% endif %}
  </div>

  <!-- Customer Information -->
  <div class="card" style="margin-bottom: 20px;">
    <h3>Customer Information</h3>
    <div class="grid cols-2" style="gap: 20px;">
      <div>
        <div style="margin-bottom: 8px;">
          <span style="color: #666;">Name:</span>
          <strong>{{ order.customer.name }}</strong>
        </div>
        <div style="margin-bottom: 8px;">
          <span style="color: #666;">Email:</span>
          <strong>{{ order.customer.email }}</strong>
        </div>
        {% if order.customer.phone %}
          <div style="margin-bottom: 8px;">
            <span style="color: #666;">Phone:</span>
            <strong>{{ order.customer.phone }}</strong>
          </div>
        {% endif %}
      </div>
      <div>
        {% if order.customer.address_line1 %}
          <div style="margin-bottom: 8px;">
            <span style="color: #666;">Address:</span>
            <div style="margin-top: 4px;">
              <strong>{{ order.customer.address_line1 }}</strong>
              {% if order.customer.address_line2 %}<br>{{ order.customer.address_line2 }}{% endif %}
              {% if order.customer.city %}<br>{{ order.customer.city }}{% endif %}
              {% if order.customer.state %}, {{ order.customer.state }}{% endif %}
              {% if order.customer.postal_code %} {{ order.customer.postal_code }}{% endif %}
            </div>
          </div>
        {% endif %}
      </div>
    </div>
  </div>

  <!-- Supplier Assignment Form -->
  <div class="card">
    <h3>Assign Supplier for Delivery</h3>
    
    <form method="post">
      {{ form.hidden_tag() }}
      
      <div class="field" style="margin-bottom: 20px;">
        <label class="label">{{ form.supplier_id.label }}</label>
        {{ form.supplier_id(class="input") }}
        {% if form.supplier_id.errors %}
          <div class="error">{{ form.supplier_id.errors[0] }}</div>
        {% endif %}
        <small style="color: #666;">Select the supplier who will handle the delivery of this order</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 special instructions for the supplier, delivery requirements, quality standards, 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 assigned supplier</small>
      </div>
      
      <!-- Assignment Preview -->
      <div style="background: #fef3c7; border: 1px solid #f59e0b; border-radius: 8px; padding: 16px; margin-bottom: 20px;">
        <h4 style="margin: 0 0 12px 0; color: #92400e;">🚚 Assignment Preview</h4>
        <div style="color: #92400e; font-size: 14px;">
          <p style="margin: 0 0 8px 0;"><strong>What happens next:</strong></p>
          <ul style="margin: 0; padding-left: 20px;">
            <li>Selected supplier will see this order in their dashboard</li>
            <li>Supplier can view order details and customer information</li>
            <li>Supplier will mark the order as delivered when completed</li>
            <li>A sale record will be automatically created upon delivery</li>
            <li>Customer ledger will be updated with the order amount</li>
          </ul>
        </div>
      </div>
      
      <div style="margin-top: 24px;">
        <button type="submit" class="btn-primary">Assign Supplier</button>
        <a href="{{ url_for('demand_order_view', order_id=order.id) }}" class="btn-outline" style="margin-left: 12px;">Cancel</a>
      </div>
    </form>
  </div>

  <!-- Available Suppliers Info -->
  <div class="card" style="margin-top: 20px;">
    <h3>Available Suppliers</h3>
    <div style="color: #666; font-size: 14px;">
      <p style="margin: 0 0 12px 0;">The system will show all active suppliers. Choose the most suitable one based on:</p>
      <ul style="margin: 0; padding-left: 20px;">
        <li>Geographic proximity to the customer</li>
        <li>Supplier's current workload and availability</li>
        <li>Specialization in meat delivery</li>
        <li>Performance history and reliability</li>
      </ul>
    </div>
  </div>
{% endblock %}
