{% extends "customer_portal/base.html" %}
{% block title %}My Ledger{% endblock %}

{% block content %}

{% if show_password_reminder %}
<div class="alert alert-warning d-flex justify-content-between align-items-center mb-3 no-print">
  <div><i class="fas fa-shield-alt mr-2"></i>For your security, please set your own password.</div>
  <a href="{% url 'customer_portal:change_password' %}" class="btn btn-sm btn-warning">Change Password</a>
</div>
{% endif %}

<div class="d-flex justify-content-between align-items-center mb-3 no-print flex-wrap">
  <div>
    <h5 class="mb-0">My Ledger</h5>
    <small class="text-muted">{{ account.party.name }} — {{ business_name }}</small>
  </div>
  <div>
    <a href="{% url 'customer_portal:submit_payment' %}" class="btn btn-portal-primary">
      <i class="fas fa-upload mr-1"></i> Submit Payment
    </a>
    <button onclick="window.print()" class="btn btn-outline-secondary">
      <i class="fas fa-print mr-1"></i> Print
    </button>
  </div>
</div>

<div class="card portal-card mb-3 closing-balance-banner">
  <div class="card-body py-3 d-flex justify-content-between align-items-center flex-wrap">
    <div>
      <div class="stat-label">Closing Balance</div>
      <div class="closing-balance-value">
        {{ ledger.closing_balance|default:"0.00"|floatformat:2 }}
        <span class="closing-balance-side">{{ ledger.closing_balance_type|default:"" }}</span>
      </div>
    </div>
    <div>
      {% if not ledger or ledger.closing_balance == 0 %}
        <span class="badge badge-light"><i class="fas fa-check-circle mr-1"></i> Fully Settled</span>
      {% elif ledger.closing_balance_type == "DR" %}
        <span class="badge badge-light">Amount Payable by You</span>
      {% else %}
        <span class="badge badge-light">Amount Payable to You</span>
      {% endif %}
    </div>
  </div>
</div>

<div class="card portal-card mb-3 no-print">
  <div class="card-body py-3">
    <form method="get" class="form-row align-items-end">
      <div class="form-group col-auto mb-2">
        <label class="small mb-1">From</label>
        <input type="date" name="date_from" class="form-control" value="{{ date_from }}">
      </div>
      <div class="form-group col-auto mb-2">
        <label class="small mb-1">To</label>
        <input type="date" name="date_to" class="form-control" value="{{ date_to }}">
      </div>
      <div class="form-group col-auto mb-2">
        <button type="submit" class="btn btn-portal-primary"><i class="fas fa-filter mr-1"></i> Apply</button>
      </div>
      <div class="form-group col-auto mb-2 ml-auto">
        <div class="btn-group btn-group-sm" role="group">
          <button type="button" class="btn btn-outline-secondary quick-range" data-months="1">This Month</button>
          <button type="button" class="btn btn-outline-secondary quick-range" data-months="2">2 Months</button>
          <button type="button" class="btn btn-outline-secondary quick-range" data-months="6">6 Months</button>
          <button type="button" class="btn btn-outline-secondary quick-range" data-months="12">1 Year</button>
        </div>
      </div>
    </form>
  </div>
</div>

{% if ledger %}
<div class="row mb-3 no-print">
  <div class="col-md-3 col-6 mb-3">
    <div class="card portal-card stat-card accent-info h-100"><div class="card-body py-2">
      <div class="stat-label">Opening Balance</div>
      <div class="stat-value">{{ ledger.opening_balance|floatformat:2 }} <small>{{ ledger.opening_balance_type }}</small></div>
    </div></div>
  </div>
  <div class="col-md-3 col-6 mb-3">
    <div class="card portal-card stat-card accent-success h-100"><div class="card-body py-2">
      <div class="stat-label">Total Debit</div>
      <div class="stat-value">{{ ledger.total_debit|floatformat:2 }}</div>
    </div></div>
  </div>
  <div class="col-md-3 col-6 mb-3">
    <div class="card portal-card stat-card accent-danger h-100"><div class="card-body py-2">
      <div class="stat-label">Total Credit</div>
      <div class="stat-value">{{ ledger.total_credit|floatformat:2 }}</div>
    </div></div>
  </div>
  <div class="col-md-3 col-6 mb-3">
    <div class="card portal-card stat-card accent-warning h-100"><div class="card-body py-2">
      <div class="stat-label" title="Number of journal-posted entries in this period">Journal Vouchers</div>
      <div class="stat-value">{{ jv_count }}</div>
    </div></div>
  </div>
</div>
<div class="row mb-3 no-print">
  <div class="col-md-3 col-6 mb-3">
    <div class="card portal-card stat-card accent-primary h-100"><div class="card-body py-2">
      <div class="stat-label" title="Total of invoice-type entries in this period">Total Invoiced</div>
      <div class="stat-value">{{ invoices_total|floatformat:2 }}</div>
    </div></div>
  </div>
</div>

<div class="card portal-card">
  <div class="card-header bg-white d-flex flex-wrap justify-content-between align-items-center no-print">
    <div class="form-inline">
      <label class="mr-2 mb-0 small">Type:</label>
      <select id="voucherTypeFilter" class="form-control form-control-sm mr-3">
        <option value="">All Types</option>
        {% for vt in available_voucher_types %}
          <option value="{{ vt }}">{{ vt }}</option>
        {% endfor %}
      </select>
      <label class="mr-2 mb-0 small">Search:</label>
      <input type="text" id="ledgerSearchBox" class="form-control form-control-sm" placeholder="Invoice / Ticket No / PNR">
    </div>
  </div>

  <div class="d-flex justify-content-between align-items-center px-3 py-2 opening-balance-strip">
    <span>Opening Balance</span>
    <strong>{{ ledger.opening_balance|floatformat:2 }} {{ ledger.opening_balance_type }}</strong>
  </div>

  <div class="card-body p-0">
    <div class="table-responsive">
      <table id="ledgerTable" class="table table-bordered table-hover mb-0">
        <thead class="thead-light">
          <tr>
            <th>Date</th><th>Voucher No</th><th>Type</th><th>Description</th>
            <th class="text-right">Debit</th><th class="text-right">Credit</th><th class="text-right">Balance</th>
          </tr>
        </thead>
        <tbody>
          {% for line in merged_lines %}
          <tr class="{% if not line.is_virtual %}voucher-row-clickable{% endif %} {% if line.is_virtual and line.virtual_status == 'PENDING' %}table-warning{% elif line.is_virtual and line.virtual_status == 'REJECTED' %}table-light text-muted{% endif %}"
              {% if not line.is_virtual %}data-voucher-no="{{ line.voucher_no }}"{% endif %}>
            <td>{{ line.date }}</td>
            <td>{{ line.voucher_no }}</td>
            <td>{% if line.is_virtual %}<i class="fas fa-receipt mr-1"></i>{% else %}<i class="fas fa-file-invoice mr-1 text-muted"></i>{% endif %}{{ line.voucher_type }}</td>
            <td>
              {{ line.description }}
              {% if line.is_virtual and line.screenshot_url %}
                <a href="{{ line.screenshot_url }}" target="_blank" class="ml-2 small" onclick="event.stopPropagation();"><i class="fas fa-image"></i> View Screenshot</a>
              {% endif %}
              {% if line.is_virtual and line.virtual_status == 'REJECTED' and line.review_note %}
                <div class="small text-danger">Rejected: {{ line.review_note }}</div>
              {% endif %}
            </td>
            <td class="text-right">{% if line.debit %}{{ line.debit|floatformat:2 }}{% endif %}</td>
            <td class="text-right">{% if line.credit %}{{ line.credit|floatformat:2 }}{% endif %}</td>
            <td class="text-right">
              {% if line.is_virtual %}
                {% if line.virtual_status == 'PENDING' %}<span class="badge badge-warning">Pending Verification</span>
                {% else %}<span class="badge badge-secondary">Rejected</span>{% endif %}
              {% else %}
                {{ line.running_balance|floatformat:2 }} {{ line.balance_side }}
              {% endif %}
            </td>
          </tr>
          {% empty %}
          <tr><td colspan="7" class="text-center text-muted">No transactions in this period.</td></tr>
          {% endfor %}
        </tbody>
        <tfoot>
          <tr class="font-weight-bold bg-light">
            <td colspan="4" class="text-right">Totals:</td>
            <td class="text-right">{{ ledger.total_debit|floatformat:2 }}</td>
            <td class="text-right">{{ ledger.total_credit|floatformat:2 }}</td>
            <td class="text-right">{{ ledger.closing_balance|floatformat:2 }} {{ ledger.closing_balance_type }}</td>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>
</div>
{% endif %}

<div class="modal fade" id="voucherDetailModal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header" style="background:#1A2B4C; color:#fff;">
        <h6 class="modal-title"><i class="fas fa-file-invoice mr-2"></i>Voucher Summary</h6>
        <button type="button" class="close text-white" data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body" id="voucherDetailBody"></div>
    </div>
  </div>
</div>

<script>
  var voucherDetailUrlTemplate = "{% url 'customer_portal:voucher_detail_ajax' 'VNOPLACEHOLDER' %}";
</script>
{% endblock %}

{% block extra_js %}
<script>
$(document).ready(function(){
  var table = $('#ledgerTable').DataTable({
    pageLength: 25,
    order: [],
    columnDefs: [{ orderable: false, targets: '_all' }]
  });

  $('#voucherTypeFilter').on('change', function(){
    var val = $(this).val();
    var esc = val ? $.fn.dataTable.util.escapeRegex(val) : '';
    table.column(2).search(esc ? '^' + esc + '$' : '', true, false).draw();
  });

  $('#ledgerSearchBox').on('keyup', function(){
    table.search(this.value).draw();
  });

  $('#ledgerTable tbody').on('click', 'tr.voucher-row-clickable', function(){
    var vno = $(this).data('voucher-no');
    if (!vno) return;
    openVoucherModal(vno);
  });

  $('.quick-range').on('click', function(){
    var months = $(this).data('months');
    var today = new Date();
    var to = today.toISOString().slice(0,10);
    var from = new Date(today);
    from.setMonth(from.getMonth() - months);
    $('input[name="date_from"]').val(from.toISOString().slice(0,10));
    $('input[name="date_to"]').val(to);
    $('input[name="date_from"]').closest('form').submit();
  });
});

function openVoucherModal(voucherNo){
  $('#voucherDetailBody').html('<div class="text-center py-4 text-muted"><i class="fas fa-spinner fa-spin mr-2"></i>Loading...</div>');
  $('#voucherDetailModal').modal('show');

  var url = voucherDetailUrlTemplate.replace('VNOPLACEHOLDER', encodeURIComponent(voucherNo));
  fetch(url)
    .then(function(r){ return r.json(); })
    .then(function(data){
      if (!data.ok){
        $('#voucherDetailModal .modal-dialog').removeClass('modal-xl').addClass('modal-lg');
        $('#voucherDetailBody').html('<div class="alert alert-danger mb-0">' + data.error + '</div>');
        return;
      }

      if (data.render_as === 'ticket_invoice'){
        $('#voucherDetailModal .modal-dialog').removeClass('modal-lg').addClass('modal-xl');
        $('#voucherDetailBody').html(data.html);
        return;
      }

      $('#voucherDetailModal .modal-dialog').removeClass('modal-xl').addClass('modal-lg');

      var rows = data.lines.map(function(ln){
        return '<tr><td>' + ln.account_name + '</td>' +
               '<td class="text-right">' + (ln.debit || '') + '</td>' +
               '<td class="text-right">' + (ln.credit || '') + '</td>' +
               '<td class="text-muted small">' + (ln.narration || '') + '</td></tr>';
      }).join('');

      var html =
        '<div class="row mb-3">' +
          '<div class="col-6"><strong>Voucher No:</strong> ' + data.voucher_no + '</div>' +
          '<div class="col-6"><strong>Date:</strong> ' + data.voucher_date + '</div>' +
          '<div class="col-6"><strong>Type:</strong> ' + data.voucher_type + '</div>' +
          '<div class="col-6"><strong>Reference:</strong> ' + (data.reference_no || '—') + '</div>' +
        '</div>' +
        (data.description ? '<p class="text-muted">' + data.description + '</p>' : '') +
        '<table class="table table-sm table-bordered mb-0">' +
          '<thead class="thead-light"><tr><th>Account</th><th class="text-right">Debit</th><th class="text-right">Credit</th><th>Narration</th></tr></thead>' +
          '<tbody>' + rows + '</tbody>' +
        '</table>';
      $('#voucherDetailBody').html(html);
    })
    .catch(function(){
      $('#voucherDetailBody').html('<div class="alert alert-danger mb-0">Could not load voucher details.</div>');
    });
}
</script>
{% endblock %}