{% extends 'base.html' %}

{% block content %}
  <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
    <h2>Demand Order #{{ order.id }}</h2>
    <a href="{{ url_for('demand_orders_list') }}" class="btn-outline">← Back to Orders</a>
  </div>

  <!-- Order Status Banner -->
  <div class="card" style="margin-bottom: 20px;">
    <div style="display: flex; justify-content: space-between; align-items: center;">
      <div>
        <h3 style="margin: 0 0 8px 0;">Order Status</h3>
        <div style="display: flex; align-items: center; gap: 12px;">
          {% if order.status == 'pending' %}
            <span style="background: #fef3c7; color: #92400e; padding: 8px 16px; border-radius: 20px; font-weight: 600;">⏳ Pending Approval</span>
          {% elif order.status == 'approved' %}
            <span style="background: #d1fae5; color: #065f46; padding: 8px 16px; border-radius: 20px; font-weight: 600;">✅ Approved</span>
          {% elif order.status == 'rejected' %}
            <span style="background: #fee2e2; color: #991b1b; padding: 8px 16px; border-radius: 20px; font-weight: 600;">❌ Rejected</span>
          {% elif order.status == 'assigned' %}
            <span style="background: #fef3c7; color: #92400e; padding: 8px 16px; border-radius: 20px; font-weight: 600;">🚚 Assigned to Supplier</span>
          {% elif order.status == 'delivered' %}
            <span style="background: #d1fae5; color: #065f46; padding: 8px 16px; border-radius: 20px; font-weight: 600;">📦 Delivered</span>
          {% elif order.status == 'paid' %}
            <span style="background: #10b981; color: white; padding: 8px 16px; border-radius: 20px; font-weight: 600;">💰 Payment Collected</span>
          {% elif order.status == 'remitted_to_admin' and current_user.role != 'customer' %}
            <span style="background: #059669; color: white; padding: 8px 16px; border-radius: 20px; font-weight: 600;">✅ Remitted to Admin</span>
          {% endif %}
          
          <span style="color: #666; font-size: 14px;">
            Created: {{ order.created_at.strftime('%d %b %Y at %H:%M') }}
          </span>
        </div>
      </div>
      
      <!-- Action Buttons -->
      <div style="display: flex; gap: 12px;">
        {% if current_user.role == 'admin' %}
          {% if order.status == 'pending' %}
            <a href="{{ url_for('demand_order_approve', order_id=order.id) }}" class="btn-primary">Approve & Modify</a>
            <button onclick="showRejectModal()" class="btn-outline" style="color: #dc2626;">Reject</button>
          {% elif order.status == 'approved' %}
            <a href="{{ url_for('demand_order_assign_supplier', order_id=order.id) }}" class="btn-primary">Assign Supplier</a>
          {% endif %}
        {% elif current_user.role == 'supplier' and order.status == 'assigned' %}
          <form method="post" action="{{ url_for('demand_order_mark_delivered', order_id=order.id) }}" style="display: inline;">
            <button type="submit" class="btn-primary" onclick="return confirm('Mark this order as delivered? This will create a sale record.')">
              Mark Delivered
            </button>
          </form>
        {% elif current_user.role == 'supplier' and order.status == 'delivered' %}
          <a href="{{ url_for('demand_order_collect_payment', order_id=order.id) }}" class="btn-primary">
            💰 Collect Payment
          </a>
        {% elif current_user.role == 'supplier' and order.status == 'paid' %}
          <span style="background: #d1fae5; color: #065f46; padding: 8px 16px; border-radius: 20px; font-weight: 600;">
            ✅ Payment Collected
          </span>
        {% endif %}
      </div>
    </div>
  </div>

  <!-- Order Details -->
  <div class="grid cols-2" style="gap: 20px; margin-bottom: 20px;">
    <div class="card">
      <h3>Order Information</h3>
      <div style="display: flex; justify-content: space-between; margin-bottom: 12px;">
        <span style="color: #666;">Order Date:</span>
        <strong>{{ order.date|date_format }}</strong>
      </div>
      <div style="display: flex; justify-content: space-between; margin-bottom: 12px;">
        <span style="color: #666;">Weight:</span>
        <strong>{{ order.weight_kg|kg }}</strong>
      </div>
      <div style="display: flex; justify-content: space-between; margin-bottom: 12px;">
        <span style="color: #666;">Price per kg:</span>
        <strong>{{ order.price_per_kg|currency }}</strong>
      </div>
      <div style="display: flex; justify-content: space-between; margin-bottom: 12px; padding-top: 12px; border-top: 1px solid #e5e7eb;">
        <span style="color: #666; font-weight: 600;">Total Amount:</span>
        <strong style="font-size: 1.2em; color: #059669;">{{ order.total_amount|currency }}</strong>
      </div>
    </div>

    <div class="card">
      <h3>Customer Information</h3>
      <div style="margin-bottom: 12px;">
        <span style="color: #666;">Name:</span>
        <strong>{{ order.customer.name }}</strong>
      </div>
      <div style="margin-bottom: 12px;">
        <span style="color: #666;">Email:</span>
        <strong>{{ order.customer.email }}</strong>
      </div>
      {% if order.customer.phone %}
        <div style="margin-bottom: 12px;">
          <span style="color: #666;">Phone:</span>
          <strong>{{ order.customer.phone }}</strong>
        </div>
      {% endif %}
      {% if order.customer.address_line1 %}
        <div style="margin-bottom: 12px;">
          <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>

  <!-- Description and Notes -->
  <div class="grid cols-2" style="gap: 20px; margin-bottom: 20px;">
    {% if order.description %}
      <div class="card">
        <h3>Order Requirements</h3>
        <p style="margin: 0; line-height: 1.6; color: #374151;">{{ order.description }}</p>
      </div>
    {% endif %}
    
    {% if order.admin_notes %}
      <div class="card">
        <h3>Admin Notes</h3>
        <p style="margin: 0; line-height: 1.6; color: #374151;">{{ order.admin_notes }}</p>
      </div>
    {% endif %}
  </div>

  <!-- Supplier Assignment -->
  {% if order.assigned_supplier %}
    <div class="card" style="margin-bottom: 20px;">
      <h3>Supplier Assignment</h3>
      <div style="display: flex; justify-content: space-between; align-items: center;">
        <div>
          <div style="margin-bottom: 8px;">
            <span style="color: #666;">Assigned to:</span>
            <strong>{{ order.assigned_supplier.name }}</strong>
          </div>
          {% if order.assigned_supplier.phone %}
            <div style="margin-bottom: 8px;">
              <span style="color: #666;">Phone:</span>
              <strong>{{ order.assigned_supplier.phone }}</strong>
            </div>
          {% endif %}
          <div style="margin-bottom: 8px;">
            <span style="color: #666;">Assigned on:</span>
            <strong>{{ order.assigned_at.strftime('%d %b %Y at %H:%M') }}</strong>
          </div>
        </div>
        
        {% if order.status == 'delivered' %}
          <div style="text-align: right;">
            <div style="margin-bottom: 8px;">
              <span style="color: #666;">Delivered on:</span>
              <strong>{{ order.delivered_at.strftime('%d %b %Y at %H:%M') }}</strong>
            </div>
            <span style="background: #d1fae5; color: #065f46; padding: 8px 16px; border-radius: 20px; font-weight: 600;">📦 Delivered</span>
          </div>
        {% endif %}
      </div>
    </div>
  {% endif %}

  <!-- Timeline -->
  <div class="card">
    <h3>Order Timeline</h3>
    <div style="position: relative; padding-left: 20px;">
      <div style="position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: #e5e7eb;"></div>
      
      <div style="position: relative; margin-bottom: 24px;">
        <div style="position: absolute; left: -26px; top: 0; width: 10px; height: 10px; background: #059669; border-radius: 50%; border: 2px solid white; box-shadow: 0 0 0 2px #059669;"></div>
        <div style="margin-left: 16px;">
          <div style="font-weight: 600; color: #059669;">Order Created</div>
          <div style="color: #666; font-size: 14px;">{{ order.created_at.strftime('%d %b %Y at %H:%M') }}</div>
          <div style="color: #666; font-size: 14px;">Customer: {{ order.customer.name }}</div>
        </div>
      </div>

      {% if order.status in ['approved', 'assigned', 'delivered'] %}
        <div style="position: relative; margin-bottom: 24px;">
          <div style="position: absolute; left: -26px; top: 0; width: 10px; height: 10px; background: #059669; border-radius: 50%; border: 2px solid white; box-shadow: 0 0 0 2px #059669;"></div>
          <div style="margin-left: 16px;">
            <div style="font-weight: 600; color: #059669;">Order Approved</div>
            <div style="color: #666; font-size: 14px;">{{ order.updated_at.strftime('%d %b %Y at %H:%M') }}</div>
            <div style="color: #666; font-size: 14px;">Admin reviewed and approved the order</div>
          </div>
        </div>
      {% endif %}

      {% if order.status in ['assigned', 'delivered'] %}
        <div style="position: relative; margin-bottom: 24px;">
          <div style="position: absolute; left: -26px; top: 0; width: 10px; height: 10px; background: #059669; border-radius: 50%; border: 2px solid white; box-shadow: 0 0 0 2px #059669;"></div>
          <div style="margin-left: 16px;">
            <div style="font-weight: 600; color: #059669;">Supplier Assigned</div>
            <div style="color: #666; font-size: 14px;">{{ order.assigned_at.strftime('%d %b %Y at %H:%M') }}</div>
            <div style="color: #666; font-size: 14px;">Supplier: {{ order.assigned_supplier.name }}</div>
          </div>
        </div>
      {% endif %}

      {% if order.status == 'delivered' %}
        <div style="position: relative; margin-bottom: 24px;">
          <div style="position: absolute; left: -26px; top: 0; width: 10px; height: 10px; background: #059669; border-radius: 50%; border: 2px solid white; box-shadow: 0 0 0 2px #059669;"></div>
          <div style="margin-left: 16px;">
            <div style="font-weight: 600; color: #059669;">Order Delivered</div>
            <div style="color: #666; font-size: 14px;">{{ order.delivered_at.strftime('%d %b %Y at %H:%M') }}</div>
            <div style="color: #666; font-size: 14px;">Sale record created and customer ledger updated</div>
          </div>
        </div>
      {% endif %}

      {% if order.status == 'paid' %}
        <div style="position: relative; margin-bottom: 24px;">
          <div style="position: absolute; left: -26px; top: 0; width: 10px; height: 10px; background: #10b981; border-radius: 50%; border: 2px solid white; box-shadow: 0 0 0 2px #10b981;"></div>
          <div style="margin-left: 16px;">
            <div style="font-weight: 600; color: #10b981;">Payment Collected</div>
            <div style="color: #666; font-size: 14px;">{{ order.updated_at.strftime('%d %b %Y at %H:%M') }}</div>
            <div style="color: #666; font-size: 14px;">Supplier collected payment from customer</div>
          </div>
        </div>
      {% endif %}

      {% if order.status == 'remitted_to_admin' and current_user.role != 'customer' %}
        <div style="position: relative; margin-bottom: 24px;">
          <div style="position: absolute; left: -26px; top: 0; width: 10px; height: 10px; background: #059669; border-radius: 50%; border: 2px solid white; box-shadow: 0 0 0 2px #059669;"></div>
          <div style="margin-left: 16px;">
            <div style="font-weight: 600; color: #059669;">Payment Remitted</div>
            <div style="color: #666; font-size: 14px;">{{ order.updated_at.strftime('%d %b %Y at %H:%M') }}</div>
            <div style="color: #666; font-size: 14px;">Supplier remitted payment to admin</div>
          </div>
        </div>
      {% endif %}

      {% if order.status == 'rejected' %}
        <div style="position: relative; margin-bottom: 24px;">
          <div style="position: absolute; left: -26px; top: 0; width: 10px; height: 10px; background: #dc2626; border-radius: 50%; border: 2px solid white; box-shadow: 0 0 0 2px #dc2626;"></div>
          <div style="margin-left: 16px;">
            <div style="font-weight: 600; color: #dc2626;">Order Rejected</div>
            <div style="color: #666; font-size: 14px;">{{ order.updated_at.strftime('%d %b %Y at %H:%M') }}</div>
            <div style="color: #666; font-size: 14px;">Reason: {{ order.admin_notes or 'No reason provided' }}</div>
          </div>
        </div>
      {% endif %}
    </div>
  </div>

  <!-- Reject Modal -->
  {% if current_user.role == 'admin' and order.status == 'pending' %}
    <div id="rejectModal" class="modal" style="display: none;">
      <div class="modal-content">
        <h3>Reject Order #{{ order.id }}</h3>
        <form method="post" action="{{ url_for('demand_order_reject', order_id=order.id) }}">
          <div class="field">
            <label class="label">Reason for Rejection</label>
            <textarea name="admin_notes" rows="3" placeholder="Please provide a reason for rejection" required></textarea>
          </div>
          <div style="margin-top: 20px; display: flex; gap: 12px;">
            <button type="submit" class="btn-outline" style="color: #dc2626;">Confirm Rejection</button>
            <button type="button" onclick="hideModal('rejectModal')" class="btn-outline">Cancel</button>
          </div>
        </form>
      </div>
    </div>
  {% endif %}

  <style>
    .modal {
      position: fixed;
      z-index: 1000;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,0.5);
    }
    .modal-content {
      background-color: white;
      margin: 15% auto;
      padding: 20px;
      border-radius: 8px;
      width: 80%;
      max-width: 500px;
    }
    .field textarea {
      width: 100%;
      padding: 8px;
      border: 1px solid #d1d5db;
      border-radius: 4px;
      font-family: inherit;
    }
  </style>

  <script>
    function showRejectModal() {
      document.getElementById('rejectModal').style.display = 'block';
    }

    function hideModal(modalId) {
      document.getElementById(modalId).style.display = 'none';
    }

    // Close modal when clicking outside
    window.onclick = function(event) {
      if (event.target.classList.contains('modal')) {
        event.target.style.display = 'none';
      }
    }
  </script>
{% endblock %}
