{% extends 'base.html' %}

{% block content %}
  <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
    <h2>Supplier Remittances</h2>
  </div>

  <!-- Summary Cards -->
  <div class="grid cols-3" style="gap: 20px; margin-bottom: 20px;">
    <div class="card">
      <h3 style="margin: 0 0 12px 0; color: #059669;">💰 Pending</h3>
      <div style="font-size: 2em; font-weight: bold; color: #059669;">
        {{ remittances|selectattr('status', 'equalto', 'pending')|list|length }}
      </div>
      <small style="color: #666;">Awaiting approval</small>
    </div>
    
    <div class="card">
      <h3 style="margin: 0 0 12px 0; color: #10b981;">✅ Approved</h3>
      <div style="font-size: 2em; font-weight: bold; color: #10b981;">
        {{ remittances|selectattr('status', 'equalto', 'approved')|list|length }}
      </div>
      <small style="color: #666;">Payment received</small>
    </div>
    
    <div class="card">
      <h3 style="margin: 0 0 12px 0; color: #dc2626;">❌ Rejected</h3>
      <div style="font-size: 2em; font-weight: bold; color: #dc2626;">
        {{ remittances|selectattr('status', 'equalto', 'rejected')|list|length }}
      </div>
      <small style="color: #666;">Not accepted</small>
    </div>
  </div>

  <!-- Remittances List -->
  <div class="card">
    <h3>All Remittances</h3>
    {% if remittances %}
      <div class="table-responsive">
        <table class="table">
          <thead>
            <tr>
              <th>ID</th>
              <th>Supplier</th>
              <th>Date</th>
              <th>Amount</th>
              <th>Account</th>
              <th>Status</th>
              <th>Note</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
            {% for remittance in remittances %}
              <tr style="background-color: {% if remittance.status == 'pending' %}#fffbeb{% elif remittance.status == 'approved' %}#f0fdf4{% elif remittance.status == 'rejected' %}#fef2f2{% endif %};">
                <td><strong>#{{ remittance.id }}</strong></td>
                <td>
                  <strong>{{ remittance.supplier.name }}</strong><br>
                  <small style="color: #666;">{{ remittance.supplier.email }}</small>
                </td>
                <td>{{ remittance.date|date_format }}</td>
                <td><strong>{{ remittance.amount|currency }}</strong></td>
                <td>{{ remittance.account.name }}</td>
                <td>
                  {% if remittance.status == 'pending' %}
                    <span style="background: #fef3c7; color: #92400e; padding: 4px 8px; border-radius: 12px; font-size: 12px;">⏳ Pending</span>
                  {% elif remittance.status == 'approved' %}
                    <span style="background: #d1fae5; color: #065f46; padding: 4px 8px; border-radius: 12px; font-size: 12px;">✅ Approved</span>
                  {% elif remittance.status == 'rejected' %}
                    <span style="background: #fee2e2; color: #991b1b; padding: 4px 8px; border-radius: 12px; font-size: 12px;">❌ Rejected</span>
                  {% endif %}
                </td>
                <td>
                  {% if remittance.note %}
                    <span style="color: #666;">{{ remittance.note[:50] }}{% if remittance.note|length > 50 %}...{% endif %}</span>
                  {% else %}
                    <span style="color: #9ca3af;">-</span>
                  {% endif %}
                </td>
                <td>
                  <div style="display: flex; gap: 8px; flex-wrap: wrap;">
                    {% if remittance.status == 'pending' %}
                      <a href="{{ url_for('admin_approve_remittance', remittance_id=remittance.id) }}" class="btn-primary" style="font-size: 12px;">✅ Approve</a>
                      <a href="{{ url_for('admin_reject_remittance', remittance_id=remittance.id) }}" class="btn-outline" style="font-size: 12px; color: #dc2626;">❌ Reject</a>
                    {% else %}
                      <span style="color: #9ca3af; font-size: 12px;">Processed</span>
                    {% endif %}
                  </div>
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    {% else %}
      <div style="text-align: center; padding: 40px 20px;">
        <div style="font-size: 48px; color: #d1d5db; margin-bottom: 16px;">💰</div>
        <p style="color: #666; margin: 0 0 8px 0; font-size: 16px;">No remittances yet</p>
        <p style="color: #9ca3af; margin: 0; font-size: 14px;">Suppliers will submit remittance requests here</p>
      </div>
    {% endif %}
  </div>

  <!-- Instructions -->
  <div class="card" style="margin-top: 20px;">
    <h3>How Supplier Remittances Work</h3>
    <div style="color: #666; font-size: 14px; line-height: 1.6;">
      <p style="margin: 0 0 8px 0;"><strong>1. Supplier Submits Remittance:</strong> Supplier collects payments from customers and submits remittance request</p>
      <p style="margin: 0 0 8px 0;"><strong>2. Admin Reviews:</strong> You can see all pending remittance requests here</p>
      <p style="margin: 0 0 8px 0;"><strong>3. Admin Approves/Rejects:</strong> Click Approve to accept payment or Reject if there are issues</p>
      <p style="margin: 0 0 8px 0;"><strong>4. Payment Processing:</strong> When approved, payment is deposited to your account and sales are marked as remitted</p>
      <p style="margin: 0;"><strong>5. Tracking:</strong> All remittance history is maintained for audit purposes</p>
    </div>
  </div>
{% endblock %}