{% extends 'core/base.html' %}
{% load currency_filters %}
{% load static %}

{% block title %}Pay Supplier — {{ supplier.name }}{% endblock %}
{% block topbar_title %}Record Payment{% endblock %}

{% block extra_css %}
<style>
.pay-card {
  border: none;
  border-radius: 24px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
  max-width: 620px;
  margin: 0 auto;
}
.balance-banner {
  background: linear-gradient(135deg, #4F46E5, #7C3AED);
  border-radius: 16px;
  padding: 1.25rem 1.5rem;
  color: #fff;
  margin-bottom: 1.5rem;
}
.balance-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  font-size: 0.88rem;
}
.balance-row:last-child { border-bottom: none; }
.balance-label { color: rgba(255,255,255,0.75); }
.balance-value { font-weight: 700; color: #fff; }
.amount-input-wrap { position: relative; }
.amount-prefix {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 700;
  color: #4F46E5;
  font-size: 1.1rem;
  z-index: 2;
}
.amount-input {
  border-radius: 14px;
  border: 2px solid #e2e8f0;
  font-size: 1.4rem;
  font-weight: 700;
  padding: 0.75rem 1rem 0.75rem 2.5rem;
  color: #1e293b;
  transition: all 0.2s;
  width: 100%;
}
.amount-input:focus {
  border-color: #4F46E5;
  box-shadow: 0 0 0 4px rgba(79,70,229,0.1);
  outline: none;
}
.quick-fill-btn {
  border: 1px solid #c7d2fe;
  border-radius: 10px;
  background: #eef2ff;
  color: #4F46E5;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.4rem 0.85rem;
  cursor: pointer;
  transition: all 0.15s;
}
.quick-fill-btn:hover { background: #4F46E5; color: #fff; border-color: #4F46E5; }
.notes-input {
  border-radius: 12px;
  border: 2px solid #e2e8f0;
  font-size: 0.9rem;
  padding: 0.65rem 1rem;
  transition: all 0.2s;
  width: 100%;
  resize: none;
}
.notes-input:focus { border-color: #4F46E5; box-shadow: 0 0 0 4px rgba(79,70,229,0.1); outline: none; }
.btn-pay {
  background: linear-gradient(135deg, #10b981, #059669);
  border: none;
  border-radius: 14px;
  font-weight: 700;
  padding: 0.8rem 2rem;
  color: #fff;
  font-size: 1rem;
  transition: all 0.2s;
  box-shadow: 0 4px 12px rgba(16,185,129,0.3);
}
.btn-pay:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(16,185,129,0.4); color: #fff; }
.po-ref-pill {
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: 10px;
  padding: 0.6rem 1rem;
  font-size: 0.85rem;
  color: #92400e;
  margin-bottom: 1.25rem;
}
</style>
{% endblock %}

{% block content %}
<div class="container-fluid px-0 pb-5">

  {% if messages %}
    {% for message in messages %}
      <div class="alert alert-{{ message.tags }} alert-dismissible fade show mb-3" style="border-radius:12px;max-width:620px;margin:0 auto 1rem;" role="alert">
        {{ message }} <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
      </div>
    {% endfor %}
  {% endif %}

  <div class="pay-card card">
    <div class="card-body p-5">

      <!-- Header -->
      <div class="d-flex align-items-center gap-3 mb-4">
        <div style="width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,#10b981,#059669);display:flex;align-items:center;justify-content:center;flex-shrink:0;">
          <i class="fas fa-money-bill-wave text-white fs-4"></i>
        </div>
        <div>
          <h5 class="fw-bold mb-0">Pay Supplier</h5>
          <div class="text-muted small">{{ supplier.name }}</div>
        </div>
      </div>

      <!-- Outstanding balance banner -->
      <div class="balance-banner">
        <div class="balance-row">
          <span class="balance-label">Total Purchased</span>
          <span class="balance-value">{% money total_purchased %}</span>
        </div>
        <div class="balance-row">
          <span class="balance-label">Total Paid</span>
          <span class="balance-value">{% money total_paid %}</span>
        </div>
        <div class="balance-row" style="padding-top:0.75rem;">
          <span class="balance-label fw-bold">Outstanding Balance</span>
          <span class="balance-value fs-4">{% money balance %}</span>
        </div>
      </div>

      <!-- PO context hint (if coming from a specific PO) -->
      {% if prefill_po %}
      <div class="po-ref-pill">
        <i class="fas fa-file-invoice me-2"></i>
        This payment is for <strong>Purchase Order #{{ prefill_po }}</strong>.
        Amount pre-filled below.
      </div>
      {% endif %}

      <form method="post">
        {% csrf_token %}

        <!-- Amount -->
        <div class="mb-4">
          <label class="form-label fw-bold mb-2">Payment Amount</label>
          <div class="amount-input-wrap mb-2">
            <span class="amount-prefix">{{ currency_symbol|default:"₦" }}</span>
            <input type="number"
                   name="amount"
                   id="amountInput"
                   step="0.01"
                   min="0.01"
                   class="amount-input"
                   value="{{ prefill_amount }}"
                   placeholder="0.00"
                   required>
          </div>
          <!-- Quick-fill buttons -->
          <div class="d-flex flex-wrap gap-2 mt-2">
            {% if balance and balance > 0 %}
            <button type="button" class="quick-fill-btn" onclick="fillAmount('{{ balance }}')">
              <i class="fas fa-check me-1"></i> Full Balance ({% money balance %})
            </button>
            {% endif %}
            {% if prefill_amount and prefill_amount != balance|stringformat:"s" %}
            <button type="button" class="quick-fill-btn" onclick="fillAmount('{{ prefill_amount }}')">
              <i class="fas fa-file-invoice me-1"></i> PO Amount ({% money prefill_amount %})
            </button>
            {% endif %}
          </div>
        </div>

        <!-- Notes -->
        <div class="mb-4">
          <label for="paymentNotes" class="form-label fw-bold mb-2">Notes <span class="fw-normal text-muted">(optional)</span></label>
          <textarea name="notes"
                    id="paymentNotes"
                    class="notes-input"
                    rows="2"
                    placeholder="e.g. Cash payment for PO #{{ prefill_po|default:'...' }}">{% if prefill_po %}Payment for PO #{{ prefill_po }}{% endif %}</textarea>
        </div>

        <!-- Actions -->
        <div class="d-flex gap-3 align-items-center">
          <a href="{% url 'inventory:supplier_detail' supplier.id %}" class="btn btn-outline-secondary rounded-pill px-4">
            <i class="fas fa-arrow-left me-1"></i> Cancel
          </a>
          <button type="submit" class="btn-pay flex-grow-1">
            <i class="fas fa-check-circle me-2"></i> Record Payment
          </button>
        </div>

      </form>

    </div>
  </div>

</div>
{% endblock %}

{% block extra_js %}
<script>
function fillAmount(val) {
  document.getElementById('amountInput').value = parseFloat(val).toFixed(2);
  document.getElementById('amountInput').focus();
}
</script>
{% endblock %}