{% extends "TARJETAS/templates/base.html" %}
{% load static %}

{% block title %}Dashboard{% endblock %}

{% block head %}
<style>
  body { background: #f8f9fa; font-family: sans-serif; }
  /* ... estilos omitidos para brevedad ... */
</style>
{% endblock %}

{% block content %}
<main>
  <!-- accesos rápidos omitidos -->
  <!-- grid omitido -->
</main>
{% endblock %}

{% block modals %}
  {{ block.super }}
  <!-- Modal Saldos de Tarjetas -->
  <div class="modal fade" id="modal_saldos" tabindex="-1" role="dialog" aria-labelledby="modalSaldosLabel" aria-hidden="true">
    <div class="modal-dialog modal-md" role="document">
      <div class="modal-content rounded-8 shadow-card">
        <div class="modal-header bg-primary-light">
          <h5 class="modal-title" id="modalSaldosLabel">Saldos de Tarjetas</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Cerrar"><span aria-hidden="true">&times;</span></button>
        </div>
        <div class="modal-body p-3">
          <table class="table table-sm">
            <thead>
              <tr><th>Tarjeta</th><th class="text-right">Saldo (Lempiras)</th></tr>
            </thead>
            <tbody id="tblSaldosBody"></tbody>
          </table>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
        </div>
      </div>
    </div>
  </div>
{% endblock %}

{% block scripts %}
  {{ block.super }}
  <script>
    $(function(){
      $('#btn_saldos').on('click', function(){
        $.getJSON("{% url 'tarjetas:get_saldos' %}", function(resp){
          const body = $('#tblSaldosBody').empty();
          resp.saldos.forEach(item => {
            let num = item.numero.replace(/\s+/g,'');
            let last4 = num.slice(-4);
            let formattedSaldo = Number(item.saldo).toLocaleString('es-HN', { minimumFractionDigits:2 });
            body.append(`
              <tr>
                <td>**** **** **** ${last4}</td>
                <td class="text-right">L. ${formattedSaldo}</td>
              </tr>
            `);
          });
          $('#modal_saldos').modal('show');
        });
      });
    });
  </script>
{% endblock %}