{% extends 'base.html' %}

{% block content %}
  <h2>Remit Payment to Admin</h2>
  
  <!-- Current Status -->
  <div class="card" style="margin-bottom: 16px;">
    <h3>Payment Status</h3>
    <div style="display: flex; justify-content: space-between; align-items: center;">
      <div>
        <p style="margin: 8px 0; color: #666;">
          Total payments collected from customers: <strong>{{ total_collected|currency }}</strong>
        </p>
        <p style="margin: 8px 0; color: #666;">
          Select an admin account to receive the payment
        </p>
      </div>
      <div style="font-size: 1.2em; font-weight: bold; color: #059669;">
        Available to Remit: {{ total_collected|currency }}
      </div>
    </div>
  </div>

  <!-- Payment Breakdown -->
          {% if collected_sales %}
          <div class="card" style="margin-bottom: 16px;">
            <h3>Collected Payments Breakdown</h3>
            
            <div>
              <h4 style="color: #7c3aed; margin-bottom: 12px;">💰 Collected Payments</h4>
              <div class="table-responsive">
                <table class="table">
                  <thead>
                    <tr>
                      <th>Sale #</th>
                      <th>Customer</th>
                      <th>Date</th>
                      <th>Amount</th>
                      <th>Type</th>
                      <th>Status</th>
                    </tr>
                  </thead>
                  <tbody>
                    {% for sale in collected_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>
                        <td>
                          <span style="background: #e0e7ff; color: #3730a3; padding: 4px 8px; border-radius: 12px; font-size: 12px;">
                            💰 Paid to Supplier
                          </span>
                        </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>Total Collected Payments:</strong> {{ collected_sales|sum(attribute='payment_amount')|currency }}
                </p>
              </div>
            </div>
          </div>
        {% endif %}

  <!-- Remittance Form -->
  <div class="card">
    <h3>Remit Payment</h3>
    <form method="post" class="form">
      {{ form.hidden_tag() }}
      <div class="grid cols-2">
        <div class="field">
          <label class="label">Date</label>
          {{ form.date(type='date') }}
        </div>
        <div class="field">
          <label class="label">Amount</label>
          {{ form.amount(step='0.01', max=total_collected) }}
          <small style="color: #666;">Maximum: {{ total_collected|currency }}</small>
        </div>
      </div>
      <div class="grid cols-2">
        <div class="field">
          <label class="label">Admin Account</label>
          {{ form.account_id() }}
        </div>
        <div class="field">
          <label class="label">Note</label>
          {{ form.note(placeholder='Optional note about this remittance') }}
        </div>
      </div>
      <div>
        {{ form.submit(class_='btn-primary') }}
      </div>
    </form>
  </div>

  <!-- Instructions -->
  <div class="card" style="margin-top: 16px;">
    <h3>How it works</h3>
    <ol style="margin: 8px 0; padding-left: 20px; color: #666;">
      <li>You collect payment from customers during delivery (both demand orders and regular sales)</li>
      <li>Use this form to remit collected payments to admin</li>
      <li>Admin receives the payment into their selected account</li>
      <li>Your orders/sales are marked as "remitted to admin"</li>
      <li>You can remit partial amounts or full amounts as needed</li>
    </ol>
  </div>
{% endblock %}