{% extends "base.html" %}
{% load static %}

{% block title %}Confirmar pago · {{ project_name }}{% endblock %}

{% block content %}
<main class="page-shell">
  <section class="container">
    <div class="row g-5 align-items-start">
      <div class="col-lg-5">
        <div class="page-hero compact text-start">
          <span class="eyebrow">Confirmación manual</span>
          <h1>Reporta tu pago</h1>
          <p>Completa los datos de la operación. El administrador revisará la referencia y actualizará el estado desde el panel.</p>
        </div>
        <div class="payment-console mt-4">
          <div class="console-top"><span></span><span></span><span></span></div>
          <h2>Métodos disponibles</h2>
          {% include "core/partials/payment_qr.html" %}
          <div class="payment-methods"><span>Transfermóvil</span><span>Enzona</span><span>Transferencia</span></div>
        </div>
      </div>
      <div class="col-lg-7">
        <form class="form-panel" method="post" enctype="multipart/form-data" novalidate>
          {% csrf_token %}
          {% if form.non_field_errors %}<div class="alert alert-danger">{{ form.non_field_errors }}</div>{% endif %}
          <div class="row g-3">
            {% for field in form %}
            <div class="col-md-{% if field.name == 'note' or field.name == 'receipt' %}12{% else %}6{% endif %}">
              <label class="form-label" for="{{ field.id_for_label }}">{{ field.label }}</label>
              {{ field }}
              {% if field.help_text %}<div class="form-text">{{ field.help_text }}</div>{% endif %}
              {% for error in field.errors %}<div class="invalid-feedback d-block">{{ error }}</div>{% endfor %}
            </div>
            {% endfor %}
          </div>
          <button class="btn btn-accent btn-lg w-100 mt-4" type="submit"><i class="bi bi-send-check me-2"></i>Enviar para aprobación</button>
          <p class="form-note mt-3 mb-0">Tu pago queda en estado <strong>pendiente</strong> hasta revisión del administrador.</p>
        </form>
      </div>
    </div>
  </section>
</main>
{% endblock %}