{% extends 'base.html' %}
{% load humanize %}
{% block title %}Client Ledger – {{ client.get_full_name }} – Haven Grazuri{% endblock %}

{% block extra_css %}
<style>
.fin-card{background:#fff;border-radius:12px;padding:1.4rem;box-shadow:0 1px 4px rgba(0,0,0,.1);border:1px solid #e5e7eb;}
.client-header{background:linear-gradient(135deg,#1e40af,#3b82f6);color:#fff;border-radius:12px;padding:1.5rem;margin-bottom:1.5rem;}
.client-avatar{width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;font-size:1.6rem;font-weight:800;flex-shrink:0;}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;margin-bottom:1.5rem;}
.stat-box{background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:1rem;text-align:center;}
.stat-value{font-size:1.4rem;font-weight:800;color:#1e40af;}
.stat-label{font-size:.78rem;color:#64748b;font-weight:600;margin-top:.3rem;text-transform:uppercase;letter-spacing:.4px;}
.filter-bar{background:#f8fafc;border:1px solid #e5e7eb;border-radius:8px;padding:1rem;margin-bottom:1.5rem;}
.ledger-table{width:100%;border-collapse:collapse;}
.ledger-table thead{background:#f8fafc;border-bottom:2px solid #e5e7eb;}
.ledger-table th{padding:11px 12px;text-align:left;font-size:.82rem;font-weight:700;color:#475569;text-transform:uppercase;white-space:nowrap;}
.ledger-table td{padding:9px 12px;border-bottom:1px solid #f1f5f9;font-size:.88rem;}
.ledger-table tbody tr:hover{background:#f8fafc;}
.debit-amount{color:#059669;font-weight:600;font-family:monospace;}
.credit-amount{color:#dc2626;font-weight:600;font-family:monospace;}
.running-balance{font-weight:700;font-family:monospace;color:#1e40af;}
.reference-link{color:#3b82f6;text-decoration:none;font-weight:600;}
.reference-link:hover{text-decoration:underline;}
.section-title{font-size:.95rem;font-weight:700;color:#1f2937;border-bottom:2px solid #e5e7eb;padding-bottom:.5rem;margin-bottom:1rem;}
.loan-card{background:#f8fafc;border-radius:8px;border:1px solid #e5e7eb;padding:1rem;margin-bottom:.75rem;}
.status-badge{padding:2px 10px;border-radius:12px;font-size:.75rem;font-weight:700;}
.status-active{background:#d1fae5;color:#065f46;}
.status-paid{background:#dbeafe;color:#1e40af;}
.status-defaulted{background:#fee2e2;color:#991b1b;}
.status-rolled_over{background:#fef3c7;color:#92400e;}
.status-written_off{background:#f3f4f6;color:#374151;}
.pagination{display:flex;justify-content:center;gap:8px;margin-top:1.5rem;flex-wrap:wrap;}
.pagination a,.pagination span{padding:7px 12px;border:1px solid #e5e7eb;border-radius:6px;text-decoration:none;color:#475569;font-weight:600;font-size:.85rem;}
.pagination a:hover{background:#f1f5f9;border-color:#3b82f6;}
.pagination .current{background:#3b82f6;color:#fff;border-color:#3b82f6;}
.export-btn{padding:8px 14px;border-radius:6px;font-size:.83rem;font-weight:600;text-decoration:none;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:5px;}
.export-pdf{background:#dc2626;color:#fff;}
.export-print{background:#1e40af;color:#fff;}
.export-btn:hover{opacity:.88;transform:translateY(-1px);}
.quick-btn{padding:5px 10px;border-radius:5px;font-size:.78rem;font-weight:600;border:1px solid #d1d5db;background:#fff;cursor:pointer;color:#374151;}
.quick-btn:hover{background:#f1f5f9;border-color:#3b82f6;color:#1e40af;}
.type-filter-btn{padding:5px 12px;border-radius:20px;font-size:.8rem;font-weight:600;border:1.5px solid #d1d5db;background:#fff;cursor:pointer;color:#374151;}
.type-filter-btn.active{background:#1e40af;color:#fff;border-color:#1e40af;}
</style>
{% endblock %}

{% block content %}
<div class="container-fluid px-4 py-4">

  <!-- Back nav -->
  <div class="mb-3 d-flex gap-2 flex-wrap align-items-center">
    <a href="{% url 'users:client_detail' client.id %}" class="btn btn-outline-secondary btn-sm">← Back to Client</a>
    <a href="{% url 'users:client_list' %}" class="btn btn-outline-secondary btn-sm">← Client List</a>
  </div>

  <!-- Client Header -->
  <div class="client-header">
    <div class="d-flex align-items-center gap-4 flex-wrap">
      <div class="client-avatar">
        {{ client.first_name|first|upper }}{{ client.last_name|first|upper }}
      </div>
      <div style="flex:1;">
        <h2 style="font-size:1.5rem;font-weight:800;margin:0;">{{ client.get_full_name }}</h2>
        <div style="font-size:.9rem;opacity:.9;margin-top:.25rem;">
          ID: {{ client.id_number|default:"N/A" }}
          &nbsp;|&nbsp; Phone: {{ client.phone_number|default:"N/A" }}
          &nbsp;|&nbsp; Status:
          <span style="background:rgba(255,255,255,.2);padding:2px 8px;border-radius:10px;">
            {{ client.get_status_display }}
          </span>
        </div>
        <div style="font-size:.85rem;opacity:.8;margin-top:.2rem;">
          Client since {{ client.date_joined|date:"d M Y" }}
        </div>
      </div>
      <div style="text-align:right;">
        <div style="font-size:.85rem;opacity:.8;">Current Outstanding</div>
        <div style="font-size:1.8rem;font-weight:800;">
          KES {{ closing_balance|floatformat:2|intcomma }}
        </div>
      </div>
    </div>
  </div>

  <!-- Summary Stats -->
  <div class="stat-grid">
    <div class="stat-box" style="border-color:#10b981;">
      <div class="stat-value" style="color:#059669;">{{ total_count }}</div>
      <div class="stat-label">GL Entries</div>
    </div>
    <div class="stat-box" style="border-color:#3b82f6;">
      <div class="stat-value" style="color:#1e40af;">KES {{ total_debits|floatformat:0|intcomma }}</div>
      <div class="stat-label">Total Debits</div>
    </div>
    <div class="stat-box" style="border-color:#dc2626;">
      <div class="stat-value" style="color:#dc2626;">KES {{ total_credits|floatformat:0|intcomma }}</div>
      <div class="stat-label">Total Credits</div>
    </div>
    <div class="stat-box" style="border-color:#f59e0b;">
      <div class="stat-value" style="color:#d97706;">KES {{ net_change|floatformat:0|intcomma }}</div>
      <div class="stat-label">Net Change</div>
    </div>
    <div class="stat-box" style="border-color:#7c3aed;">
      <div class="stat-value" style="color:#7c3aed;">{{ loan_summary|length }}</div>
      <div class="stat-label">Total Loans</div>
    </div>
  </div>

  <!-- Loan Breakdown Panel -->
  {% if loan_summary %}
  <div class="fin-card mb-4">
    <div class="section-title">💵 Loan Breakdown</div>
    <div class="row g-3">
      {% for lid, ls in loan_summary.items %}
      <div class="col-12 col-md-6 col-xl-4">
        <div class="loan-card">
          <div class="d-flex justify-content-between align-items-start mb-2">
            <div>
              <span style="font-weight:700;color:#1e40af;font-family:monospace;">{{ ls.loan_number }}</span>
              <span class="status-badge status-{{ ls.status_raw }} ms-2">{{ ls.status }}</span>
            </div>
            <small class="text-muted">{{ ls.tx_count }} entries</small>
          </div>
          <div style="font-size:.82rem;color:#64748b;margin-bottom:.5rem;">{{ ls.product }}</div>
          <div class="row text-center g-2" style="font-size:.82rem;">
            <div class="col-4">
              <div style="font-weight:700;color:#1f2937;">KES {{ ls.principal|floatformat:0|intcomma }}</div>
              <div style="color:#94a3b8;">Principal</div>
            </div>
            <div class="col-4">
              <div style="font-weight:700;color:#059669;">{{ ls.total_debit|floatformat:0|intcomma }}</div>
              <div style="color:#94a3b8;">Dr Total</div>
            </div>
            <div class="col-4">
              <div style="font-weight:700;color:#dc2626;">{{ ls.total_credit|floatformat:0|intcomma }}</div>
              <div style="color:#94a3b8;">Cr Total</div>
            </div>
          </div>
          <div style="font-size:.78rem;color:#94a3b8;margin-top:.5rem;">
            Disbursed {{ ls.disbursement_date|date:"d M Y" }} · Due {{ ls.due_date|date:"d M Y" }}
          </div>
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
  {% endif %}

  <!-- Filters -->
  <form method="get" class="filter-bar" id="filterForm">
    <div class="row g-3 align-items-end">
      <div class="col-md-3">
        <label class="form-label small fw-semibold">From Date</label>
        <input type="date" name="start_date" id="startDate" value="{{ start_date|date:'Y-m-d' }}" class="form-control form-control-sm">
      </div>
      <div class="col-md-3">
        <label class="form-label small fw-semibold">To Date</label>
        <input type="date" name="end_date" id="endDate" value="{{ end_date|date:'Y-m-d' }}" max="{{ today|date:'Y-m-d' }}" class="form-control form-control-sm">
      </div>
      <div class="col-md-3">
        <label class="form-label small fw-semibold">Search Reference / Loan #</label>
        <input type="text" name="reference" value="{{ search_ref }}" placeholder="e.g. LOAN-000001" class="form-control form-control-sm">
      </div>
      <div class="col-md-3">
        <button type="submit" class="btn btn-primary btn-sm w-100">🔍 Apply Filters</button>
      </div>
    </div>
    <div class="d-flex gap-2 mt-2 flex-wrap align-items-center">
      <small class="text-muted">Quick:</small>
      <button type="button" class="quick-btn" onclick="setPreset(7)">Last 7 days</button>
      <button type="button" class="quick-btn" onclick="setPreset(30)">Last 30 days</button>
      <button type="button" class="quick-btn" onclick="setPreset(90)">Last 90 days</button>
      <button type="button" class="quick-btn" onclick="setPreset(365)">Last year</button>
      <button type="button" class="quick-btn" onclick="setCurrentMonth()">This month</button>
      <button type="button" class="quick-btn" onclick="setAllTime()">All time</button>
      <span class="text-muted mx-1">|</span>
      <small class="text-muted">Type:</small>
      <a href="?start_date={{ start_date|date:'Y-m-d' }}&end_date={{ end_date|date:'Y-m-d' }}&tx_type=all"
         class="type-filter-btn {% if tx_type == 'all' %}active{% endif %}">All</a>
      <a href="?start_date={{ start_date|date:'Y-m-d' }}&end_date={{ end_date|date:'Y-m-d' }}&tx_type=disbursements"
         class="type-filter-btn {% if tx_type == 'disbursements' %}active{% endif %}">Debits only</a>
      <a href="?start_date={{ start_date|date:'Y-m-d' }}&end_date={{ end_date|date:'Y-m-d' }}&tx_type=repayments"
         class="type-filter-btn {% if tx_type == 'repayments' %}active{% endif %}">Credits only</a>
    </div>
  </form>

  <!-- Export bar -->
  <div class="d-flex justify-content-end gap-2 mb-3">
    <button class="export-btn export-print" onclick="printLedger()">🖨️ Print</button>
    <a href="?start_date={{ start_date|date:'Y-m-d' }}&end_date={{ end_date|date:'Y-m-d' }}&export=csv"
       class="export-btn" style="background:#059669;color:#fff;">📊 Export CSV</a>
  </div>

  <!-- Ledger Table -->
  <div class="fin-card" id="ledgerCard">
    <div class="section-title">📒 General Ledger — {{ client.get_full_name }}
      <small class="text-muted fw-normal ms-2">{{ start_date|date:"d M Y" }} → {{ end_date|date:"d M Y" }}</small>
    </div>

    {% if rows %}
    <div class="table-responsive">
      <table class="ledger-table" id="ledgerTable">
        <thead>
          <tr>
            <th>Date</th>
            <th>Reference</th>
            <th>Loan</th>
            <th>Account</th>
            <th>Description</th>
            <th style="text-align:right;">Debit (Dr)</th>
            <th style="text-align:right;">Credit (Cr)</th>
            <th style="text-align:right;">Balance</th>
            <th>Posted By</th>
          </tr>
        </thead>
        <tbody>
          <!-- Opening balance row -->
          <tr style="background:#f0f9ff;font-weight:600;border-bottom:2px solid #bfdbfe;">
            <td>{{ start_date|date:"d M Y" }}</td>
            <td colspan="4" style="color:#1e40af;">Opening Balance</td>
            <td style="text-align:right;">—</td>
            <td style="text-align:right;">—</td>
            <td style="text-align:right;" class="running-balance">KES {{ opening_balance|floatformat:2|intcomma }}</td>
            <td>—</td>
          </tr>

          {% for row in rows %}
          <tr>
            <td style="white-space:nowrap;">{{ row.date|date:"d M Y" }}</td>
            <td>
              <a href="{% url 'reports:journal_entry_detail' row.journal_id %}" class="reference-link" title="View journal entry">
                {{ row.reference }}
              </a>
            </td>
            <td style="font-family:monospace;font-size:.82rem;color:#6366f1;">{{ row.loan_number }}</td>
            <td>
              <span style="font-family:monospace;font-weight:700;color:#1e40af;font-size:.82rem;">{{ row.account_code }}</span>
              <span style="color:#475569;font-size:.82rem;"> {{ row.account_name|truncatechars:22 }}</span>
            </td>
            <td style="max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" title="{{ row.description }}">
              {{ row.description|truncatechars:40 }}
            </td>
            <td style="text-align:right;" class="debit-amount">
              {% if row.debit %}KES {{ row.debit|floatformat:2|intcomma }}{% else %}—{% endif %}
            </td>
            <td style="text-align:right;" class="credit-amount">
              {% if row.credit %}KES {{ row.credit|floatformat:2|intcomma }}{% else %}—{% endif %}
            </td>
            <td style="text-align:right;" class="running-balance">KES {{ row.balance|floatformat:2|intcomma }}</td>
            <td style="font-size:.82rem;color:#64748b;white-space:nowrap;">{{ row.posted_by }}</td>
          </tr>
          {% endfor %}

          <!-- Closing balance row -->
          <tr style="background:#f8fafc;font-weight:700;border-top:2px solid #3b82f6;">
            <td colspan="5">Closing Balance — {{ end_date|date:"d M Y" }}</td>
            <td style="text-align:right;" class="debit-amount">KES {{ total_debits|floatformat:2|intcomma }}</td>
            <td style="text-align:right;" class="credit-amount">KES {{ total_credits|floatformat:2|intcomma }}</td>
            <td style="text-align:right;" class="running-balance">KES {{ closing_balance|floatformat:2|intcomma }}</td>
            <td>—</td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- Pagination -->
    {% if is_paginated %}
    <div class="pagination">
      {% if page_obj.has_previous %}
        <a href="?page=1&start_date={{ start_date|date:'Y-m-d' }}&end_date={{ end_date|date:'Y-m-d' }}&tx_type={{ tx_type }}">&laquo; First</a>
        <a href="?page={{ page_obj.previous_page_number }}&start_date={{ start_date|date:'Y-m-d' }}&end_date={{ end_date|date:'Y-m-d' }}&tx_type={{ tx_type }}">Prev</a>
      {% endif %}
      <span class="current">Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}</span>
      {% if page_obj.has_next %}
        <a href="?page={{ page_obj.next_page_number }}&start_date={{ start_date|date:'Y-m-d' }}&end_date={{ end_date|date:'Y-m-d' }}&tx_type={{ tx_type }}">Next</a>
        <a href="?page={{ page_obj.paginator.num_pages }}&start_date={{ start_date|date:'Y-m-d' }}&end_date={{ end_date|date:'Y-m-d' }}&tx_type={{ tx_type }}">Last &raquo;</a>
      {% endif %}
    </div>
    {% endif %}

    {% else %}
    <div style="text-align:center;padding:3rem;color:#94a3b8;">
      <div style="font-size:3.5rem;margin-bottom:1rem;opacity:.4;">📭</div>
      <h5 style="color:#64748b;">No GL entries found for this period</h5>
      <p style="color:#94a3b8;font-size:.9rem;">
        Either no journal entries have been posted for this client's loans yet,
        or none fall within the selected date range.
      </p>
      <a href="?start_date=2020-01-01&end_date={{ today|date:'Y-m-d' }}" class="btn btn-sm btn-outline-primary mt-2">Show all time</a>
    </div>
    {% endif %}
  </div>

</div><!-- /container -->

<script>
function setPreset(days) {
  var today = new Date();
  var from  = new Date(today); from.setDate(today.getDate() - days);
  document.getElementById('startDate').value = from.toISOString().slice(0,10);
  document.getElementById('endDate').value   = today.toISOString().slice(0,10);
  document.getElementById('filterForm').submit();
}
function setCurrentMonth() {
  var today = new Date();
  var from  = new Date(today.getFullYear(), today.getMonth(), 1);
  document.getElementById('startDate').value = from.toISOString().slice(0,10);
  document.getElementById('endDate').value   = today.toISOString().slice(0,10);
  document.getElementById('filterForm').submit();
}
function setAllTime() {
  document.getElementById('startDate').value = '2020-01-01';
  document.getElementById('endDate').value   = new Date().toISOString().slice(0,10);
  document.getElementById('filterForm').submit();
}
function printLedger() {
  var card = document.getElementById('ledgerCard').outerHTML;
  var client = '{{ client.get_full_name|escapejs }}';
  var w = window.open('', '_blank');
  w.document.write(`<!DOCTYPE html><html><head><title>Ledger – ${client}</title>
    <style>
      body{font-family:Arial,sans-serif;font-size:11px;padding:20px;color:#111}
      h2{font-size:16px;margin-bottom:4px} p{color:#555;margin:0 0 12px}
      table{width:100%;border-collapse:collapse}
      th{background:#f3f4f6;text-align:left;padding:7px 8px;font-size:10px;text-transform:uppercase;border-bottom:2px solid #e5e7eb}
      td{padding:6px 8px;border-bottom:1px solid #f1f5f9;vertical-align:top}
      tfoot td{background:#f3f4f6;font-weight:bold;border-top:2px solid #3b82f6}
      .running-balance,.debit-amount,.credit-amount{font-weight:700}
    </style></head><body>
    <h2>Client Ledger</h2>
    <p>${client} &nbsp;|&nbsp; Printed: ${new Date().toLocaleDateString()}</p>
    ${card}
    <script>window.onload=function(){window.print()}<\/script>
    </body></html>`);
  w.document.close();
}
</script>
{% endblock %}