{% extends "base.html" %}
{% block content %}
<style>
  .ledger-hero{background:linear-gradient(120deg, #0f172a 0%, #1e293b 45%, #1e40af 100%);border-radius:20px;color:#fff;padding:24px 28px;margin-bottom:20px;box-shadow:0 14px 30px rgba(15,23,42,.25)}
  .stat-pill{background:rgba(255,255,255,.13);border-radius:12px;padding:14px 20px;min-width:140px}
  .stat-pill .label{font-size:.68rem;font-weight:700;letter-spacing:.07em;opacity:.75;text-transform:uppercase}
  .stat-pill .val{font-size:1.4rem;font-weight:800;margin-top:2px}
  .lcard{background:#fff;border:1px solid #e9eef7;border-radius:14px;overflow:hidden;box-shadow:0 4px 14px rgba(15,23,42,.04)}
  .lcard-head{padding:14px 18px;border-bottom:1px solid #eef2f7;display:flex;align-items:center;justify-content:space-between}
  .lcard-body{padding:18px}
  .badge-status-paid{background:#dcfce7;color:#16a34a;font-size:.72rem;padding:3px 10px;border-radius:20px;font-weight:700}
  .badge-status-partial{background:#fef9c3;color:#a16207;font-size:.72rem;padding:3px 10px;border-radius:20px;font-weight:700}
  .badge-status-due{background:#fee2e2;color:#dc2626;font-size:.72rem;padding:3px 10px;border-radius:20px;font-weight:700}
  .method-tag{background:#f1f5f9;color:#475569;font-size:.72rem;padding:2px 8px;border-radius:8px;font-weight:600}
</style>

<div class="container-fluid py-2" style="max-width:950px">

  <!-- Back -->
  <a href="{{ url_for('customers') }}" class="btn btn-sm btn-outline-secondary mb-3">
    <i class="bi bi-arrow-left me-1"></i>{{ l('All Customers','সব গ্রাহক') }}
  </a>

  <!-- Hero -->
  <div class="ledger-hero d-flex flex-wrap align-items-center justify-content-between gap-3 mb-4">
    <div>
      <div class="opacity-75 small mb-1"><i class="bi bi-person-circle me-1"></i>{{ l('Customer Ledger','গ্রাহকের হিসাব') }}</div>
      <h3 class="fw-bold mb-0">{{ customer.name }}</h3>
      <div class="opacity-75 small mt-1">
        {% if customer.phone %}<i class="bi bi-telephone me-1"></i>{{ customer.phone }}{% endif %}
        {% if customer.address %} &nbsp;·&nbsp; <i class="bi bi-geo-alt me-1"></i>{{ customer.address }}{% endif %}
      </div>
    </div>
    <div class="d-flex flex-wrap gap-2">
      <div class="stat-pill">
        <div class="label">{{ l('Total Due','মোট বাকি') }}</div>
        <div class="val text-danger">৳ {{ '%.2f'|format(total_due) }}</div>
      </div>
      <div class="stat-pill">
        <div class="label">{{ l('Advance','অগ্রিম') }}</div>
        <div class="val text-success">৳ {{ '%.2f'|format(customer.advance_balance or 0) }}</div>
      </div>
      <div class="stat-pill">
        <div class="label">{{ l('Points','পয়েন্ট') }}</div>
        <div class="val">{{ '%.0f'|format(customer.loyalty_points or 0) }}</div>
      </div>
    </div>
  </div>

  {% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}{% for cat, msg in messages %}
      <div class="alert alert-{{ cat }} alert-dismissible fade show rounded-3 mb-3">{{ msg }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>
    {% endfor %}{% endif %}
  {% endwith %}

  <div class="row g-3 mb-4">

    <!-- Collect Due -->
    <div class="col-md-6">
      <div class="lcard h-100">
        <div class="lcard-head">
          <h6 class="mb-0 fw-bold text-danger"><i class="bi bi-cash-coin me-1"></i>{{ l('Collect Due','বাকি আদায়') }}</h6>
        </div>
        <div class="lcard-body">
          <form method="POST" action="/collect-due/{{ customer.id }}">
            <input type="hidden" name="_csrf_token" value="{{ csrf_token }}">
            <div class="mb-2">
              <label class="form-label small fw-semibold">{{ l('Invoice (optional)','ইনভয়েস (ঐচ্ছিক)') }}</label>
              <select class="form-select form-select-sm" name="invoice_id">
                <option value="">{{ l('General — not tied to an invoice','সাধারণ — কোনো ইনভয়েস ছাড়া') }}</option>
                {% for inv in invoices %}{% if inv.due_amount and inv.due_amount > 0 %}
                <option value="{{ inv.id }}">{{ inv.invoice_no }} — {{ l('Due','বাকি') }} ৳{{ '%.2f'|format(inv.due_amount) }}</option>
                {% endif %}{% endfor %}
              </select>
            </div>
            <div class="row g-2 mb-2">
              <div class="col-6">
                <label class="form-label small fw-semibold">{{ l('Amount','টাকা') }}</label>
                <input class="form-control form-control-sm" name="amount" type="number" step="0.01" placeholder="0.00" required>
              </div>
              <div class="col-6">
                <label class="form-label small fw-semibold">{{ l('Method','মাধ্যম') }}</label>
                <select class="form-select form-select-sm" name="method">
                  <option value="Cash">{{ l('Cash','নগদ') }}</option>
                  <option value="bKash">{{ l('bKash','বিকাশ') }}</option>
                  <option value="Nagad">{{ l('Nagad','নগদ অ্যাপ') }}</option>
                  <option value="Rocket">{{ l('Rocket','রকেট') }}</option>
                  <option value="Card">{{ l('Card','কার্ড') }}</option>
                  <option value="Bank">{{ l('Bank','ব্যাংক') }}</option>
                </select>
              </div>
            </div>
            <div class="mb-3">
              <label class="form-label small fw-semibold">{{ l('Note','নোট') }}</label>
              <input class="form-control form-control-sm" name="note" placeholder="{{ l('Optional note','ঐচ্ছিক নোট') }}">
            </div>
            <button class="btn btn-danger w-100 fw-semibold" onclick="this.disabled=true; this.innerHTML='<span class=spinner-border spinner-border-sm></span> Processing...'; this.closest('form').submit();"><i class="bi bi-check2-circle me-1"></i>{{ l('Collect Due','বাকি আদায় করুন') }}</button>
          </form>
        </div>
      </div>
    </div>

    <!-- Advance Payment -->
    <div class="col-md-6">
      <div class="lcard h-100">
        <div class="lcard-head">
          <h6 class="mb-0 fw-bold text-success"><i class="bi bi-wallet2 me-1"></i>{{ l('Advance Payment','অগ্রিম পেমেন্ট') }}</h6>
        </div>
        <div class="lcard-body">
          <form method="POST" action="/advance-payment/{{ customer.id }}">
            <input type="hidden" name="_csrf_token" value="{{ csrf_token }}">
            <div class="row g-2 mb-2">
              <div class="col-6">
                <label class="form-label small fw-semibold">{{ l('Amount','টাকা') }}</label>
                <input class="form-control form-control-sm" name="amount" type="number" step="0.01" placeholder="0.00" required>
              </div>
              <div class="col-6">
                <label class="form-label small fw-semibold">{{ l('Method','মাধ্যম') }}</label>
                <select class="form-select form-select-sm" name="method">
                  <option value="Cash">{{ l('Cash','নগদ') }}</option>
                  <option value="bKash">{{ l('bKash','বিকাশ') }}</option>
                  <option value="Nagad">{{ l('Nagad','নগদ অ্যাপ') }}</option>
                  <option value="Rocket">{{ l('Rocket','রকেট') }}</option>
                  <option value="Card">{{ l('Card','কার্ড') }}</option>
                  <option value="Bank">{{ l('Bank','ব্যাংক') }}</option>
                </select>
              </div>
            </div>
            <div class="mb-3">
              <label class="form-label small fw-semibold">{{ l('Note','নোট') }}</label>
              <input class="form-control form-control-sm" name="note" placeholder="{{ l('Optional note','ঐচ্ছিক নোট') }}">
            </div>
            <button class="btn btn-success w-100 fw-semibold"><i class="bi bi-plus-circle me-1"></i>{{ l('Add Advance','অগ্রিম যোগ করুন') }}</button>
          </form>
        </div>
      </div>
    </div>
  </div>

  <!-- Invoices -->
  <div class="lcard mb-4">
    <div class="lcard-head">
      <h6 class="mb-0 fw-bold"><i class="bi bi-receipt me-1"></i>{{ l('Invoices','ইনভয়েস') }}</h6>
      <span class="badge bg-primary-subtle text-primary rounded-pill">{{ invoices|length }}</span>
    </div>
    <div class="table-responsive">
      <table class="table table-hover align-middle mb-0">
        <thead class="table-light">
          <tr>
            <th class="ps-3">{{ l('Invoice','ইনভয়েস') }}</th>
            <th>{{ l('Date','তারিখ') }}</th>
            <th class="text-end">{{ l('Total','মোট') }}</th>
            <th class="text-end">{{ l('Paid','পরিশোধ') }}</th>
            <th class="text-end">{{ l('Due','বাকি') }}</th>
            <th class="text-center">{{ l('Status','অবস্থা') }}</th>
          </tr>
        </thead>
        <tbody>
        {% for inv in invoices %}
        <tr>
          <td class="ps-3"><a href="/invoice/{{ inv.id }}" class="fw-semibold text-decoration-none">{{ inv.invoice_no }}</a></td>
          <td class="text-muted small">{{ inv.created_at.strftime('%d %b %Y') if inv.created_at else '—' }}</td>
          <td class="text-end fw-semibold">৳ {{ '%.2f'|format(inv.total_amount or 0) }}</td>
          <td class="text-end text-success">৳ {{ '%.2f'|format(inv.paid_amount or 0) }}</td>
          <td class="text-end {% if inv.due_amount and inv.due_amount > 0 %}text-danger fw-bold{% endif %}">৳ {{ '%.2f'|format(inv.due_amount or 0) }}</td>
          <td class="text-center">
            {% if inv.payment_status == 'Paid' %}<span class="badge-status-paid">{{ l('Paid','পরিশোধ') }}</span>
            {% elif inv.payment_status == 'Partial' %}<span class="badge-status-partial">{{ l('Partial','আংশিক') }}</span>
            {% else %}<span class="badge-status-due">{{ l('Due','বাকি') }}</span>{% endif %}
          </td>
        </tr>
        {% else %}
        <tr><td colspan="6" class="text-center text-muted py-4">{{ l('No invoices yet.','এখনও কোনো ইনভয়েস নেই।') }}</td></tr>
        {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

  {% if request.args.get('print_receipt_id') %}
  <div class="alert alert-success d-flex justify-content-between align-items-center rounded-3 mb-4 p-3 shadow-sm border-0" style="background: #dcfce7; color: #15803d;">
    <div>
      <i class="bi bi-check-circle-fill me-2 fs-5"></i>
      <strong>{{ l('Due collection successful!', 'বাকি আদায় সফল হয়েছে!') }}</strong> {{ l('Click below to print money receipt invoice.', 'মানি রিসিট ইনভয়েস প্রিন্ট করতে ডানে চাপুন।') }}
    </div>
    <a href="/due-receipt/{{ request.args.get('print_receipt_id') }}" class="btn btn-success btn-sm fw-bold px-3 shadow-sm">
      <i class="bi bi-printer me-1"></i>{{ l('Print Receipt / Invoice', 'ইনভয়েস প্রিন্ট করুন') }}
    </a>
  </div>
  {% endif %}

  <!-- Payment History -->
  <div class="lcard">
    <div class="lcard-head">
      <h6 class="mb-0 fw-bold"><i class="bi bi-clock-history me-1"></i>{{ l('Payment History','পেমেন্টের ইতিহাস') }}</h6>
      <span class="badge bg-success-subtle text-success rounded-pill">{{ payments|length }}</span>
    </div>
    <div class="table-responsive">
      <table class="table table-hover align-middle mb-0">
        <thead class="table-light">
          <tr>
            <th class="ps-3">{{ l('Date','তারিখ') }}</th>
            <th>{{ l('Type','ধরন') }}</th>
            <th class="text-end">{{ l('Amount','টাকা') }}</th>
            <th>{{ l('Method','মাধ্যম') }}</th>
            <th>{{ l('Note','নোট') }}</th>
            <th class="text-end pe-3">{{ l('Action','অ্যাকশন') }}</th>
          </tr>
        </thead>
        <tbody>
        {% for p in payments %}
        <tr>
          <td class="ps-3 text-muted small">{{ p.created_at.strftime('%d %b %Y, %I:%M %p') if p.created_at else '—' }}</td>
          <td>
            {% if p.payment_type == 'due_collection' %}
              <span class="badge-status-paid">{{ l('Due Collected','বাকি আদায়') }}</span>
            {% else %}
              <span class="badge-status-partial">{{ l('Advance','অগ্রিম') }}</span>
            {% endif %}
          </td>
          <td class="text-end fw-semibold">৳ {{ '%.2f'|format(p.amount) }}</td>
          <td><span class="method-tag">{{ p.method }}</span></td>
          <td class="text-muted small">{{ p.note or '—' }}</td>
          <td class="text-end pe-3">
            <a href="/due-receipt/{{ p.id }}" class="btn btn-outline-primary btn-sm px-2 py-1" style="font-size: 12px;">
              <i class="bi bi-printer me-1"></i>{{ l('Print', 'প্রিন্ট') }}
            </a>
          </td>
        </tr>
        {% else %}
        <tr><td colspan="6" class="text-center text-muted py-4">{{ l('No payments recorded yet.','এখনও কোনো পেমেন্ট নেই।') }}</td></tr>
        {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

</div>
{% endblock %}