{% extends 'base.html' %}

{% block content %}
  <h2>My Ledger</h2>
  
  <!-- Current Balance Display -->
  <div class="card" style="margin-bottom: 16px;">
    <div style="display: flex; justify-content: space-between; align-items: center;">
      <h3 style="margin: 0;">Current Balance</h3>
      <div style="font-size: 1.5em; font-weight: bold; color: {% if balance > 0 %}red{% else %}green{% endif %};">
        {{ balance|currency }}
      </div>
    </div>
    <p style="margin: 8px 0 0 0; color: #666; font-weight: bold;">
      {% if balance > 0 %}
        You owe {{ balance|currency }}
      {% else %}
        You have credit of {{ (balance * -1)|currency }}
      {% endif %}
    </p>
    {% if opening_balance_amount and opening_balance_amount > 0 %}
    <p style="margin: 8px 0 0 0; color: #666; font-size: 0.9em;">
      Opening Balance: {{ opening_balance_amount|currency }} 
      ({% if opening_balance_type == 'debit' %}Debit - You owe{% else %}Credit - We owe you{% endif %})
    </p>
    {% endif %}
  </div>

  <!-- Live Search -->
  <div class="card" style="margin-bottom: 8px;">
    <input type="text" id="customer-ledger-search" placeholder="🔍 Search ledger entries by date, description, debit, credit, balance..." 
           style="width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; box-sizing: border-box;">
  </div>
  
  <!-- Ledger Entries -->
  <div class="card">
    <h3>Transaction History</h3>
    {% if entries %}
      <table class="table" id="customer-ledger-table">
        <thead>
          <tr>
            <th>Date</th>
            <th>Description</th>
            <th>Debit (Amount Owed)</th>
            <th>Credit (Payment)</th>
            <th>Balance</th>
          </tr>
        </thead>
        <tbody>
          {% set running_balance = opening_balance or 0 %}
          {% if opening_balance_amount and opening_balance_amount > 0 %}
          <tr style="background-color: #fef3c7;">
            <td>{{ current_user.created_at.date() if current_user.created_at else 'N/A' }}</td>
            <td><strong>Opening Balance ({{ opening_balance_type|upper }})</strong></td>
            <td style="color: #dc2626; font-weight: 500;">
              {% if opening_balance_type == 'debit' %}{{ opening_balance_amount|currency }}{% else %}-{% endif %}
            </td>
            <td style="color: #16a34a; font-weight: 500;">
              {% if opening_balance_type == 'credit' %}{{ opening_balance_amount|currency }}{% else %}-{% endif %}
            </td>
            <td style="font-weight: 600; color: {% if running_balance > 0 %}red{% else %}green{% endif %};">
              {{ running_balance|currency }}
            </td>
          </tr>
          {% endif %}
          {% for entry in entries %}
            {% set debit_amount = entry.debit or 0 %}
            {% set credit_amount = entry.credit or 0 %}
            {% set running_balance = running_balance + debit_amount - credit_amount %}
                         <tr>
               <td>{{ entry.date|date_format }}</td>
              <td>{{ entry.description }}</td>
              <td style="color: #dc2626; font-weight: 500;">
                {% if entry.debit and entry.debit > 0 %}
                  {{ entry.debit|currency }}
                {% else %}
                  -
                {% endif %}
              </td>
              <td style="color: #16a34a; font-weight: 500;">
                {% if entry.credit and entry.credit > 0 %}
                  {{ entry.credit|currency }}
                {% else %}
                  -
                {% endif %}
              </td>
              <td style="font-weight: 600; color: {% if running_balance > 0 %}red{% else %}green{% endif %};">
                {{ running_balance|currency }}
              </td>
            </tr>
          {% endfor %}
        </tbody>
        <tfoot>
          <tr style="background-color: #f8f9fa; font-weight: bold;">
            <th colspan="4">Final Balance</th>
            <th style="color: {% if balance > 0 %}red{% else %}green{% endif %};">
              {{ balance|currency }}
            </th>
          </tr>
        </tfoot>
      </table>
    {% else %}
      <p style="text-align: center; color: #666; padding: 20px;">
        No transactions found in your ledger.
      </p>
    {% endif %}
  </div>
  
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      initLiveSearch('customer-ledger-search', 'customer-ledger-table');
    });
  </script>
{% endblock %}