{% extends 'pos/base.html' %}

{% block stylesheets %}
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --ink:        #0f172a;
  --ink-2:      #1e293b;
  --muted:      #64748b;
  --muted-2:    #94a3b8;
  --border:     #e2e8f0;
  --border-2:   #f1f5f9;
  --bg:         #f8fafc;
  --card:       #ffffff;
  --accent:     #2563eb;
  --accent-lt:  #eff6ff;
  --dr:         #b45309;
  --dr-bg:      #fff7ed;
  --cr:         #15803d;
  --cr-bg:      #f0fdf4;
  --shadow-sm:  0 1px 2px rgba(0,0,0,.05);
  --shadow:     0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:  0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.04);
  --radius:     10px;
  --radius-sm:  6px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* ── Page wrapper ── */
.ldg-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 20px 60px;
}

/* ── Top bar ── */
.ldg-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.ldg-title-block {}
.ldg-eyebrow {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--accent);
  margin-bottom: 4px;
}
.ldg-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.4px;
  line-height: 1.2;
}
.ldg-subtitle {
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 4px;
  font-family: 'JetBrains Mono', monospace;
}

.ldg-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
  align-items: flex-start;
}

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  border: none;
  transition: all 0.15s;
  white-space: nowrap;
}
.btn-primary   { background: var(--accent); color: #fff; }
.btn-primary:hover { background: #1d4ed8; color: #fff; }
.btn-ghost {
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.btn-ghost:hover { border-color: #94a3b8; color: var(--ink); }
.btn-pdf    { background: #fee2e2; color: #991b1b; }
.btn-pdf:hover { background: #fecaca; }
.btn-excel  { background: #dcfce7; color: #14532d; }
.btn-excel:hover { background: #bbf7d0; }
.btn-print  { background: var(--bg); color: var(--muted); border: 1px solid var(--border); }

/* ── Filter card ── */
.ldg-filter {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.filter-group { display: flex; flex-direction: column; gap: 4px; }
.filter-label {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
}
.filter-input {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  font-size: 0.85rem;
  font-family: 'Inter', sans-serif;
  color: var(--ink);
  background: var(--bg);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.filter-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37,99,235,.08);
  background: #fff;
}

/* ── Summary cards ── */
.ldg-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.sum-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
}
.sum-label {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  margin-bottom: 6px;
}
.sum-value {
  font-size: 1.15rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-family: 'JetBrains Mono', monospace;
  line-height: 1;
}
.sum-value.dr  { color: var(--dr); }
.sum-value.cr  { color: var(--cr); }
.sum-value.neu { color: var(--ink); }
.sum-side {
  font-size: 0.65rem;
  font-weight: 600;
  margin-left: 4px;
  padding: 1px 5px;
  border-radius: 3px;
  vertical-align: middle;
}
.sum-side.dr { background: var(--dr-bg); color: var(--dr); }
.sum-side.cr { background: var(--cr-bg); color: var(--cr); }

/* ── Table card ── */
.ldg-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.ldg-table-wrap { overflow-x: auto; }
.ldg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.825rem;
}

/* Header */
.ldg-table thead tr {
  background: var(--ink-2);
}
.ldg-table thead th {
  padding: 11px 12px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #94a3b8;
  white-space: nowrap;
  border-bottom: 2px solid var(--accent);
}
.ldg-table thead th.r { text-align: right; }

/* Opening row */
.ldg-table .row-opening {
  background: var(--accent-lt);
}
.ldg-table .row-opening td {
  color: #1d4ed8;
  font-weight: 600;
  font-size: 0.82rem;
  padding: 9px 12px;
  border-bottom: 1px solid #bfdbfe;
}

/* Data rows */
.ldg-table tbody tr.data-row {
  border-bottom: 1px solid var(--border-2);
  transition: background 0.1s;
}
.ldg-table tbody tr.data-row:hover {
  background: #f8faff;
}
.ldg-table tbody tr.data-row:nth-child(even) {
  background: #fafafa;
}
.ldg-table tbody tr.data-row:nth-child(even):hover {
  background: #f0f4ff;
}
.ldg-table tbody td {
  padding: 9px 12px;
  vertical-align: middle;
}

/* Totals row */
.ldg-table .row-totals {
  background: var(--bg);
  border-top: 2px solid var(--accent);
}
.ldg-table .row-totals td {
  padding: 11px 12px;
  font-weight: 700;
  font-size: 0.875rem;
}

/* Cell styles */
.cell-sr    { color: var(--muted-2); font-size: 0.75rem; width: 40px; }
.cell-date  {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  color: var(--muted);
  white-space: nowrap;
}
.cell-ref   {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  color: var(--accent);
  white-space: nowrap;
}
.cell-source {
  display: inline-flex;
  align-items: center;
}
.source-badge {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 99px;
  background: var(--bg);
  color: var(--muted);
  border: 1px solid var(--border);
  white-space: nowrap;
}
.cell-desc {
  max-width: 220px;
}
.cell-remarks {
  max-width: 180px;
  font-size: 0.78rem;
  color: var(--muted);
}
.remarks-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}
/* Source badge colors by module */
.src-sale        { background: #dbeafe; color: #1d4ed8; }
.src-purchase    { background: #fce7f3; color: #be185d; }
.src-recovery    { background: #dcfce7; color: #15803d; }
.src-vendor_payment { background: #ffedd5; color: #c2410c; }
.src-expense     { background: #fef9c3; color: #854d0e; }
.src-jv          { background: #f3e8ff; color: #6d28d9; }
.src-bank_transfer { background: #e0f2fe; color: #0369a1; }
.src-opening     { background: #eff6ff; color: #1d4ed8; }
.src-reversal    { background: #fee2e2; color: #991b1b; }
.src-salary      { background: #f0fdf4; color: #166534; }
.desc-main {
  font-size: 0.825rem;
  color: var(--ink);
  font-weight: 500;
}
.desc-party {
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 1px;
}
.cell-amt {
  text-align: right;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cell-amt.dr  { color: var(--dr); font-weight: 600; }
.cell-amt.cr  { color: var(--cr); font-weight: 600; }
.cell-amt.nil { color: var(--muted-2); }
.cell-balance {
  text-align: right;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
}
.cell-balance.dr { color: var(--dr); }
.cell-balance.cr { color: var(--cr); }

.bal-side {
  font-size: 0.6rem;
  font-weight: 700;
  margin-left: 3px;
  padding: 1px 4px;
  border-radius: 3px;
  vertical-align: middle;
}
.bal-side.dr { background: var(--dr-bg); color: var(--dr); }
.bal-side.cr { background: var(--cr-bg); color: var(--cr); }

/* Empty state */
.ldg-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--muted);
}
.ldg-empty-icon { font-size: 3rem; margin-bottom: 12px; opacity: 0.4; }
.ldg-empty-text { font-size: 0.9rem; }

/* Info strip */
.ldg-info-strip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  font-size: 0.75rem;
  color: var(--muted);
  flex-wrap: wrap;
}
.info-sep { color: var(--border); }
.info-val { font-weight: 600; color: var(--ink); }

/* Error card */
.ldg-error {
  background: #fee2e2;
  border: 1px solid #fecaca;
  border-radius: var(--radius);
  padding: 20px 24px;
  color: #991b1b;
  font-size: 0.875rem;
  margin: 20px 0;
}

/* ── Print styles ── */
@media print {
  .ldg-actions, .ldg-filter, .no-print { display: none !important; }
  .ldg-page { padding: 0; max-width: 100%; }
  body { background: white; }
  .ldg-card { box-shadow: none; border: 1px solid #e2e8f0; }
  .ldg-table { font-size: 0.75rem; }
  .ldg-table thead tr { background: #1e293b !important; -webkit-print-color-adjust: exact; }
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .ldg-summary { grid-template-columns: repeat(2, 1fr); }
  .ldg-topbar  { flex-direction: column; }
  .ldg-table thead th:nth-child(4),
  .ldg-table tbody td:nth-child(4) { display: none; }
}
</style>
{% endblock %}

{% block content %}
<div class="ldg-page">

  {% if error %}
  <div class="ldg-error">⚠️ {{ error }}</div>
  {% else %}

  {% with pinfo=party_info %}

  <!-- ── Top bar ─────────────────────────────────────────────────────────── -->
  <div class="ldg-topbar">
    <div class="ldg-title-block">
      <div class="ldg-eyebrow">
        {% if ledger_type == 'party' %}{{ pinfo.type_label }} Ledger
        {% elif ledger_type == 'bank' %}Bank Ledger
        {% else %}Account Ledger{% endif %}
      </div>
      <div class="ldg-title">{{ pinfo.name }}</div>
      <div class="ldg-subtitle">
        {{ pinfo.coa_code }} &mdash; {{ pinfo.coa_name }}
        &nbsp;·&nbsp;
        {{ date_from|date:"d M Y" }} &rarr; {{ date_to|date:"d M Y" }}
      </div>
    </div>

    <div class="ldg-actions no-print">
      <a href="?from={{ date_from }}&to={{ date_to }}&export=pdf"
         class="btn btn-pdf">
        <svg width="13" height="13" fill="none" viewBox="0 0 13 13">
          <path d="M2 10h9M6.5 1v7m0 0L4 5.5m2.5 2.5L9 5.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
        </svg>
        PDF
      </a>
      <a href="?from={{ date_from }}&to={{ date_to }}&export=excel"
         class="btn btn-excel">
        <svg width="13" height="13" fill="none" viewBox="0 0 13 13">
          <path d="M2 10h9M6.5 1v7m0 0L4 5.5m2.5 2.5L9 5.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
        </svg>
        Excel
      </a>
      <button onclick="window.print()" class="btn btn-print no-print">
        🖨 Print
      </button>
      <a href="{% url 'gl:coa_list' %}" class="btn btn-ghost">← Back</a>
    </div>
  </div>

  <!-- ── Date filter ────────────────────────────────────────────────────── -->
  <form method="get" class="ldg-filter no-print">
    <div class="filter-group">
      <label class="filter-label">From</label>
      <input type="date" name="from" class="filter-input"
             value="{{ date_from|date:'Y-m-d' }}">
    </div>
    <div class="filter-group">
      <label class="filter-label">To</label>
      <input type="date" name="to" class="filter-input"
             value="{{ date_to|date:'Y-m-d' }}">
    </div>
    <div class="filter-group">
      <label class="filter-label">&nbsp;</label>
      <button type="submit" class="btn btn-primary">Apply</button>
    </div>
    <div class="filter-group">
      <label class="filter-label">&nbsp;</label>
      <a href="?" class="btn btn-ghost">Reset</a>
    </div>
  </form>

  <!-- ── Summary cards ──────────────────────────────────────────────────── -->
  <div class="ldg-summary">
    <div class="sum-card">
      <div class="sum-label">Opening Balance</div>
      <div class="sum-value {% if opening_bal >= 0 %}dr{% else %}cr{% endif %}">
        {{ opening_bal|floatformat:2 }}
        <span class="sum-side {% if opening_bal >= 0 %}dr{% else %}cr{% endif %}">
          {{ opening_side }}
        </span>
      </div>
    </div>
    <div class="sum-card">
      <div class="sum-label">Total Debit</div>
      <div class="sum-value dr">{{ total_dr|floatformat:2 }}</div>
    </div>
    <div class="sum-card">
      <div class="sum-label">Total Credit</div>
      <div class="sum-value cr">{{ total_cr|floatformat:2 }}</div>
    </div>
    <div class="sum-card" style="border-left: 3px solid var(--accent);">
      <div class="sum-label">Closing Balance</div>
      <div class="sum-value {% if closing_bal >= 0 %}dr{% else %}cr{% endif %}">
        {{ closing_bal|floatformat:2 }}
        <span class="sum-side {% if closing_bal >= 0 %}dr{% else %}cr{% endif %}">
          {{ closing_side }}
        </span>
      </div>
    </div>
  </div>

  <!-- ── Main table ─────────────────────────────────────────────────────── -->
  <div class="ldg-card">

    <!-- Info strip -->
    <div class="ldg-info-strip">
      <span>{{ rows|length }} transaction{{ rows|length|pluralize }}</span>
      <span class="info-sep">|</span>
      <span>Period: <span class="info-val">{{ date_from|date:"d M Y" }}</span>
        &nbsp;→&nbsp;
        <span class="info-val">{{ date_to|date:"d M Y" }}</span>
      </span>
      {% if pinfo.code %}
      <span class="info-sep">|</span>
      <span>Code: <span class="info-val">{{ pinfo.code }}</span></span>
      {% endif %}
      <span class="info-sep">|</span>
      <span>Account: <span class="info-val">{{ pinfo.coa_code }}</span></span>
    </div>

    <div class="ldg-table-wrap">
      <table class="ldg-table">
        <thead>
          <tr>
            <th style="width:36px">#</th>
            <th style="width:90px">Date</th>
            <th style="width:80px">Ref #</th>
            <th style="width:130px">Type</th>
            <th style="min-width:180px">Description / Party</th>
            <th style="min-width:130px">Remarks</th>
            <th class="r" style="width:110px">Debit (Dr)</th>
            <th class="r" style="width:110px">Credit (Cr)</th>
            <th class="r" style="width:130px">Balance</th>
          </tr>
        </thead>
        <tbody>

          <!-- Opening balance row -->
          <tr class="row-opening">
            <td>—</td>
            <td>{{ date_from|date:"d/m/Y" }}</td>
            <td>—</td>
            <td><span class="source-badge src-opening">Opening</span></td>
            <td><strong>Opening Balance</strong></td>
            <td>—</td>
            <td class="cell-amt" style="text-align:right">—</td>
            <td class="cell-amt" style="text-align:right">—</td>
            <td class="cell-balance {% if opening_bal >= 0 %}dr{% else %}cr{% endif %}" style="text-align:right">
              {{ opening_bal|floatformat:2 }}
              <span class="bal-side {% if opening_bal >= 0 %}dr{% else %}cr{% endif %}">
                {{ opening_side }}
              </span>
            </td>
          </tr>

          {% if not rows %}
          <tr>
            <td colspan="9">
              <div class="ldg-empty">
                <div class="ldg-empty-icon">📋</div>
                <div class="ldg-empty-text">No transactions in this period</div>
              </div>
            </td>
          </tr>
          {% endif %}

          {% for row in rows %}
          <tr class="data-row">
            <td class="cell-sr">{{ forloop.counter }}</td>
            <td class="cell-date">{{ row.date|date:"d/m/Y" }}</td>
            <td class="cell-ref">{{ row.ref }}</td>
            <td>
              <span class="source-badge src-{{ row.source_module }}">{{ row.txn_type }}</span>
            </td>
            <td class="cell-desc">
              <div class="desc-main">{{ row.description }}</div>
              {% if row.party_name %}
              <div class="desc-party">
                <svg width="10" height="10" fill="none" viewBox="0 0 10 10" style="margin-right:3px;opacity:.5"><circle cx="5" cy="3.5" r="2" stroke="currentColor" stroke-width="1.2"/><path d="M1.5 9c0-1.933 1.567-3.5 3.5-3.5s3.5 1.567 3.5 3.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
                {{ row.party_name }}
              </div>
              {% endif %}
            </td>
            <td class="cell-remarks">
              {% if row.remarks %}
              <span class="remarks-text">{{ row.remarks }}</span>
              {% else %}
              <span style="color:var(--muted-2)">—</span>
              {% endif %}
            </td>
            <td class="cell-amt {% if row.debit %}dr{% else %}nil{% endif %}">
              {% if row.debit %}{{ row.debit|floatformat:2 }}{% else %}—{% endif %}
            </td>
            <td class="cell-amt {% if row.credit %}cr{% else %}nil{% endif %}">
              {% if row.credit %}{{ row.credit|floatformat:2 }}{% else %}—{% endif %}
            </td>
            <td class="cell-balance {% if row.balance >= 0 %}dr{% else %}cr{% endif %}">
              {{ row.balance|floatformat:2 }}
              <span class="bal-side {{ row.balance_side|lower }}">
                {{ row.balance_side }}
              </span>
            </td>
          </tr>
          {% endfor %}

          <!-- Totals row -->
          {% if rows %}
          <tr class="row-totals">
            <td colspan="4"></td>
            <td style="color:var(--ink)">CLOSING TOTALS</td>
            <td></td>  {# remarks empty #}
            <td class="cell-amt dr" style="text-align:right; font-size:0.9rem">
              {{ total_dr|floatformat:2 }}
            </td>
            <td class="cell-amt cr" style="text-align:right; font-size:0.9rem">
              {{ total_cr|floatformat:2 }}
            </td>
            <td class="cell-balance {% if closing_bal >= 0 %}dr{% else %}cr{% endif %}" style="font-size:0.9rem">
              {{ closing_bal|floatformat:2 }}
              <span class="bal-side {% if closing_bal >= 0 %}dr{% else %}cr{% endif %}">
                {{ closing_side }}
              </span>
            </td>
          </tr>
          {% endif %}

        </tbody>
      </table>
    </div>
  </div>

  {% endwith %}
  {% endif %}
</div>
{% endblock %}