{% extends 'base.html' %}

{% block content %}
  <h2>Collect Payment - 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="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;">✅ Delivered</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 Details:</span>
        </div>
        <div style="background: #f9fafb; padding: 12px; border-radius: 6px; color: #374151; line-height: 1.6;">
          {{ order.description }}
        </div>
      </div>
    {% endif %}
  </div>

  <!-- Payment Collection Form -->
  <div class="card">
    <h3>Collect Payment from Customer</h3>
    
    <form method="post">
      <div class="field" style="margin-bottom: 20px;">
        <label class="label">Payment Amount (PKR)</label>
        <input 
          type="number" 
          name="payment_amount" 
          class="input" 
          step="0.01" 
          min="0.01" 
          max="{{ order.total_amount }}" 
          value="{{ order.total_amount }}" 
          required
          placeholder="Enter payment amount"
        >
        <small style="color: #666;">Maximum: {{ order.total_amount|currency }}</small>
      </div>
      
      <div class="field" style="margin-bottom: 20px;">
        <label class="label">Payment Method</label>
        <select name="payment_method" class="input">
          <option value="cash">Cash</option>
          <option value="bank_transfer">Bank Transfer</option>
          <option value="mobile_payment">Mobile Payment (JazzCash, EasyPaisa)</option>
          <option value="card">Card Payment</option>
          <option value="other">Other</option>
        </select>
        <small style="color: #666;">Select how the customer paid you</small>
      </div>
      
      <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;">📋 Payment Collection Process</h4>
        <div style="color: #666; font-size: 14px; line-height: 1.6;">
          <p style="margin: 0 0 8px 0;"><strong>1.</strong> Collect the payment amount from the customer</p>
          <p style="margin: 0 0 8px 0;"><strong>2.</strong> Record the payment details above</p>
          <p style="margin: 0 0 8px 0;"><strong>3.</strong> Submit this form to update the system</p>
          <p style="margin: 0;"><strong>4.</strong> Later, remit the collected payment to admin</p>
        </div>
      </div>
      
      <div style="margin-top: 24px;">
        <button type="submit" class="btn-primary">Collect Payment</button>
        <a href="{{ url_for('demand_order_view', order_id=order.id) }}" class="btn-outline" style="margin-left: 12px;">Cancel</a>
      </div>
    </form>
  </div>

  <!-- Important Notes -->
  <div class="card" style="margin-top: 20px;">
    <h3>Important Notes</h3>
    <div style="color: #666; font-size: 14px; line-height: 1.6;">
      <p style="margin: 0 0 8px 0;"><strong>⚠️ Responsibility:</strong> You are responsible for collecting the full payment amount from the customer.</p>
      <p style="margin: 0 0 8px 0;"><strong>💰 Remittance:</strong> After collecting payments, you must remit them to admin through the remittance system.</p>
      <p style="margin: 0 0 8px 0;"><strong>📊 Tracking:</strong> All payments will be tracked in the customer's ledger and your remittance records.</p>
      <p style="margin: 0;"><strong>✅ Verification:</strong> Admin will verify all remitted payments against collected amounts.</p>
    </div>
  </div>
{% endblock %}
