{% extends 'base.html' %}

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

  <!-- Remittance Details -->
  <div class="card" style="margin-bottom: 20px;">
    <h3>Remittance Details</h3>
    <div class="grid cols-2" style="gap: 20px;">
      <div>
        <div style="margin-bottom: 12px;">
          <span style="color: #666;">Supplier:</span>
          <strong>{{ remittance.supplier.name }}</strong>
        </div>
        <div style="margin-bottom: 12px;">
          <span style="color: #666;">Email:</span>
          <strong>{{ remittance.supplier.email }}</strong>
        </div>
        <div style="margin-bottom: 12px;">
          <span style="color: #666;">Date:</span>
          <strong>{{ remittance.date|date_format }}</strong>
        </div>
      </div>
      <div>
        <div style="margin-bottom: 12px;">
          <span style="color: #666;">Amount:</span>
          <strong style="font-size: 1.2em; color: #059669;">{{ remittance.amount|currency }}</strong>
        </div>
        <div style="margin-bottom: 12px;">
          <span style="color: #666;">Account:</span>
          <strong>{{ remittance.account.name }}</strong>
        </div>
        <div style="margin-bottom: 12px;">
          <span style="color: #666;">Status:</span>
          <span style="background: #fef3c7; color: #92400e; padding: 4px 8px; border-radius: 12px; font-size: 12px;">⏳ Pending Approval</span>
        </div>
      </div>
    </div>
    
    {% if remittance.note %}
      <div style="margin-top: 16px; padding-top: 16px; border-top: 1px solid #e5e7eb;">
        <div style="margin-bottom: 8px;">
          <span style="color: #666;">Supplier Note:</span>
        </div>
        <div style="background: #f9fafb; padding: 12px; border-radius: 6px; color: #374151; line-height: 1.6;">
          {{ remittance.note }}
        </div>
      </div>
    {% endif %}
  </div>

  <!-- Related Sales -->
  <div class="card" style="margin-bottom: 20px;">
    <h3>Related Sales to be Updated</h3>
    {% set related_sales = sales|selectattr('delivered_by_id', 'equalto', remittance.supplier_id)|selectattr('payment_status', 'equalto', 'paid_to_supplier')|list %}
    {% if related_sales %}
      <div class="table-responsive">
        <table class="table">
          <thead>
            <tr>
              <th>Sale #</th>
              <th>Customer</th>
              <th>Date</th>
              <th>Amount</th>
              <th>Type</th>
            </tr>
          </thead>
          <tbody>
            {% for sale in related_sales %}
              <tr>
                <td><strong>#{{ sale.id }}</strong></td>
                <td>{{ sale.customer.name }}</td>
                <td>{{ sale.date|date_format }}</td>
                <td><strong>{{ sale.payment_amount|currency }}</strong></td>
                <td>
                  {% if sale.demand_order_id %}
                    <span style="background: #d1fae5; color: #065f46; padding: 4px 8px; border-radius: 12px; font-size: 12px;">
                      📦 Demand Order
                    </span>
                  {% else %}
                    <span style="background: #e0e7ff; color: #3730a3; padding: 4px 8px; border-radius: 12px; font-size: 12px;">
                      🛒 Regular Sale
                    </span>
                  {% endif %}
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
      <div style="background: #f0f9ff; border: 1px solid #0ea5e9; border-radius: 6px; padding: 12px; margin-top: 12px;">
        <p style="margin: 0; color: #0369a1; font-size: 14px;">
          <strong>Note:</strong> When approved, these sales will be marked as "remitted to admin" and payment will be deposited to {{ remittance.account.name }}
        </p>
      </div>
    {% else %}
      <p style="color: #666; text-align: center; padding: 20px;">No related sales found for this supplier.</p>
    {% endif %}
  </div>

  <!-- Approval Form -->
  <div class="card">
    <h3>Approve Remittance</h3>
    <form method="post" class="form">
      <div class="field">
        <label class="label">Admin Notes (Optional)</label>
        <textarea name="admin_notes" rows="3" placeholder="Add any notes about this approval..." style="width: 100%; padding: 8px; border: 1px solid #d1d5db; border-radius: 4px; font-family: inherit;"></textarea>
        <small style="color: #666;">Optional notes for your records</small>
      </div>
      
      <div style="background: #f0f9ff; border: 1px solid #0ea5e9; border-radius: 8px; padding: 16px; margin: 20px 0;">
        <h4 style="margin: 0 0 12px 0; color: #0369a1;">⚠️ Approval Action</h4>
        <div style="color: #666; font-size: 14px; line-height: 1.6;">
          <p style="margin: 0 0 8px 0;"><strong>When you approve this remittance:</strong></p>
          <ul style="margin: 8px 0; padding-left: 20px;">
            <li>PKR {{ remittance.amount|currency }} will be deposited to {{ remittance.account.name }}</li>
            <li>Related sales will be marked as "remitted to admin"</li>
            <li>Demand orders will be updated to "remitted to admin" status</li>
            <li>This action cannot be undone</li>
          </ul>
        </div>
      </div>
      
      <div style="margin-top: 24px;">
        <button type="submit" class="btn-primary" onclick="return confirm('Are you sure you want to approve this remittance? This will process the payment.')">
          ✅ Approve Remittance
        </button>
        <a href="{{ url_for('admin_supplier_remittances') }}" class="btn-outline" style="margin-left: 12px;">Cancel</a>
      </div>
    </form>
  </div>
{% endblock %}