{% extends "customer_portal/base.html" %}
{% block title %}Submit Payment{% endblock %}

{% block content %}
<div class="row justify-content-center">
  <div class="col-md-6">
    <div class="card portal-card mt-3">
      <div class="card-body p-4">
        <h5 class="mb-3"><i class="fas fa-upload mr-2"></i>Submit Payment</h5>
        <p class="text-muted small">
          Upload a screenshot of your payment as proof. It will appear in your ledger
          as <strong>Pending Verification</strong> until our team reviews and approves it —
          your balance only updates after approval.
        </p>
        <form method="post" enctype="multipart/form-data">
          {% csrf_token %}
          <div class="form-group">
            <label>Amount Paid <span class="text-danger">*</span></label>
            <input type="number" step="0.01" name="claimed_amount" class="form-control" required>
          </div>
          <div class="form-group">
            <label>Payment Screenshot <span class="text-danger">*</span></label>
            <input type="file" name="screenshot" accept="image/jpeg,image/png" class="form-control-file" required>
            <small class="form-text text-muted">JPG or PNG only, maximum 2MB.</small>
          </div>
          <div class="form-group">
            <label>Note (optional)</label>
            <textarea name="customer_note" class="form-control" rows="2" placeholder="e.g. Paid via Easypaisa, ref #123"></textarea>
          </div>
          <button type="submit" class="btn btn-portal-primary"><i class="fas fa-check mr-1"></i> Submit Request</button>
          <a href="{% url 'customer_portal:dashboard' %}" class="btn btn-outline-secondary">Cancel</a>
        </form>
      </div>
    </div>
  </div>
</div>
{% endblock %}