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

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

{% block head %}
<style>
  body {
    background: #f8f9fa;
    font-family: sans-serif;
  }

  /* Accesos rápidos estilo tarjetas coloridas */
  .quick-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 2rem;
  }
  .quick-links a,
  .quick-links__btn {
    flex: 1 1 240px;
    padding: 1rem;
    border-radius: .75rem;
    color: #fff;
    display: flex;
    align-items: center;
    gap: .75rem;
    font-weight: 500;
    text-decoration: none;
    transition: transform .2s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    background: #20B2AA;
    border: none;
    cursor: pointer;
  }
  .quick-links a:nth-child(1),
  .quick-links__btn:nth-child(1) { background: #0077b6; }
  .quick-links a:nth-child(2),
  .quick-links__btn:nth-child(2) { background: #1E90FF; }
  .quick-links a:nth-child(3),
  .quick-links__btn:nth-child(3) { background: #20B2AA; }
  .quick-links a:hover,
  .quick-links__btn:hover {
    transform: translateY(-3px);
  }
  .quick-links i { font-size:1.4rem; }

  /* Tarjetas del dashboard */
  .dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
    gap: 1.5rem;
    padding: 2rem;
  }
  .card-section {
    background: #fff;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: 1rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    cursor: pointer;
    transition: transform .2s ease, border .3s ease;
    border-left: 5px solid transparent;
  }
  .card-section:hover { transform: translateY(-4px); }
  .card-section.active { border-left:5px solid #0077b6; }
  .card-icon {
    width:48px; height:48px;
    display:flex; align-items:center; justify-content:center;
    border-radius:50%; color:#fff; font-size:1.5rem;
  }
  .card-info h3 { margin:0; font-size:1.1rem; }
  .card-info p { margin:0; font-size:.9rem; color:#666; }
  .card-section[data-toggle="tarjetas"]   .card-icon { background:#0077b6; }
  .card-section[data-toggle="finanzas"]  .card-icon { background:#228B22; }
  .card-section[data-toggle="reportes"]  .card-icon { background:#1E90FF; }
  .card-section[data-toggle="configuraciones"] .card-icon { background:#6A5ACD; }

  /* Secciones expandibles */
  .section-content {
    display:none; opacity:0; transform: translateY(-10px);
    transition: all .3s ease;
    margin:0 2rem 2rem; padding:1rem;
    background:#fff; border-radius:.75rem;
    box-shadow: 0 0 5px rgba(0,0,0,0.05);
  }
  .section-content.active {
    display:block; opacity:1; transform: translateY(0);
  }
  .section-content a {
    display:block; padding:.5rem 0; color:#0077b6;
    font-weight:500; text-decoration:none;
  }
  .section-content hr { margin:.75rem 0; }
  .text-muted {
    font-size:.75rem; color:#888; text-transform:uppercase;
  }

  /* Ocultar sidebar/nav */
  .main-sidebar, .sidebar, .control-sidebar,
  .navbar-nav .nav-item:not(.logo,.form-inline) {
    display:none !important;
  }
</style>
{% endblock %}

{% block content %}
<main>

  <!-- ACCESOS RÁPIDOS -->
  <div class="quick-links">
    <a href="{% url 'tarjetas:screen_tarjetas_gastos' %}?modal=C">
      <i class="fas fa-pen-alt"></i><span>Registrar Gasto</span>
    </a>
    <a href="{% url 'tarjetas:screen_reporte_7' %}">
      <i class="fas fa-file-invoice-dollar"></i><span>Ver Estado de Cuenta</span>
    </a>
    <button id="btn_saldos" class="quick-links__btn">
      <i class="fas fa-wallet"></i><span>Ver Saldos Tarjetas</span>
    </button>
  </div>

  <!-- TARJETAS PRINCIPALES -->
  <div class="dashboard-grid">
    <div class="card-section" data-toggle="tarjetas">
      <div class="card-icon"><i class="fas fa-credit-card"></i></div>
      <div class="card-info"><h3>Tarjetas</h3><p>Tipos, bancos, reportes</p></div>
    </div>
    <div class="card-section" data-toggle="finanzas">
      <div class="card-icon"><i class="fas fa-wallet"></i></div>
      <div class="card-info"><h3>Finanzas</h3><p>Presupuestos y pagos</p></div>
    </div>
    <div class="card-section" data-toggle="reportes">
      <div class="card-icon"><i class="fas fa-chart-line"></i></div>
      <div class="card-info"><h3>Reportes</h3><p>Gráficas y evolución</p></div>
    </div>
    <div class="card-section" data-toggle="configuraciones">
      <div class="card-icon"><i class="fas fa-cogs"></i></div>
      <div class="card-info"><h3>Administración</h3><p>Auditoría y backups</p></div>
    </div>
  </div>

  <!-- SECCIONES EXPANDIBLES -->
  <div class="section-content" id="section-tarjetas">
    {% if SCREEN_TARJETAS %}<a href="{% url 'tarjetas:screen_tarjetas' %}">→ Ir a Tarjetas</a>{% endif %}
    {% if SCREEN_REPORTE_7 %}<a href="{% url 'tarjetas:screen_reporte_7' %}">→ Estado de Cuenta por Tarjeta</a>{% endif %}
    {% if SCREEN_TARJETAS_TIPOS or SCREEN_BANCOS %}
      <hr><div class="text-muted">Otros Listados</div>
    {% endif %}
    {% if SCREEN_TARJETAS_TIPOS %}<a href="{% url 'tarjetas:screen_tarjetas_tipos' %}">→ Tipos de Tarjetas</a>{% endif %}
    {% if SCREEN_BANCOS %}<a href="{% url 'tarjetas:screen_bancos' %}">→ Bancos</a>{% endif %}
  </div>

  <div class="section-content" id="section-finanzas">
    {% if SCREEN_TARJETAS_GASTOS %}<a href="{% url 'tarjetas:screen_tarjetas_gastos' %}">→ Gastos</a>{% endif %}
    {% if SCREEN_PRESUPUESTOS %}<a href="{% url 'tarjetas:screen_presupuestos' %}">→ Presupuestos</a>{% endif %}
    {% if SCREEN_TARJETAS_PAGOS %}<a href="{% url 'tarjetas:screen_tarjetas_pagos' %}">→ Pagos</a>{% endif %}
    {% if SCREEN_PRESUPUESTOS_RECIPIENTES_TIPOS or SCREEN_TARJETAS_GASTOS_CATEGORIAS %}
      <hr><div class="text-muted">Otros Listados</div>
    {% endif %}
    {% if SCREEN_PRESUPUESTOS_RECIPIENTES_TIPOS %}<a href="{% url 'tarjetas:screen_presupuestos_recipientes_tipos' %}">→ Tipos de Recipientes</a>{% endif %}
    {% if SCREEN_TARJETAS_GASTOS_CATEGORIAS %}<a href="{% url 'tarjetas:screen_tarjetas_gastos_categorias' %}">→ Categorías de Gastos</a>{% endif %}
  </div>

  <div class="section-content" id="section-reportes">
    {% if SCREEN_REPORTE_6 %}<a href="{% url 'tarjetas:screen_reporte_6' %}">→ Estado de Cuenta General</a>{% endif %}
    {% if SCREEN_REPORTE_1 or SCREEN_REPORTE_2 or SCREEN_REPORTE_3 or SCREEN_REPORTE_4 or SCREEN_REPORTE_5 %}
      <hr><div class="text-muted">Gráficas</div>
    {% endif %}
    {% if SCREEN_REPORTE_1 %}<a href="{% url 'tarjetas:screen_reporte_1' %}">→ Evolución Mensual</a>{% endif %}
    {% if SCREEN_REPORTE_2 %}<a href="{% url 'tarjetas:screen_reporte_2' %}">→ Presupuesto vs Real</a>{% endif %}
    {% if SCREEN_REPORTE_3 %}<a href="{% url 'tarjetas:screen_reporte_3' %}">→ Intereses Pagados</a>{% endif %}
    {% if SCREEN_REPORTE_4 %}<a href="{% url 'tarjetas:screen_reporte_4' %}">→ Cuenta Contable</a>{% endif %}
    {% if SCREEN_REPORTE_5 %}<a href="{% url 'tarjetas:screen_reporte_5' %}">→ Proyecciones</a>{% endif %}
  </div>

  <div class="section-content" id="section-configuraciones">
    {% if SCREEN_AUDIT_LOG %}<a href="{% url 'tarjetas:screen_audit_log' %}">→ Auditoría</a>{% endif %}
    <a href="{% url 'tarjetas:screen_usuarios_asignar_roles' %}">→ Roles de Usuarios</a>
    {% if SCREEN_BACKUPS %}<a href="{% url 'tarjetas:screen_backups' %}">→ Backups</a>{% endif %}
    {% if SCREEN_EMPRESAS_DEPARTAMENTOS or SCREEN_EMPRESAS_EMPLEADOS or SCREEN_TARJETAS_PROPIETARIOS_TIPOS %}
      <hr><div class="text-muted">Otros Listados</div>
    {% endif %}
    {% if SCREEN_EMPRESAS_DEPARTAMENTOS %}<a href="{% url 'tarjetas:screen_empresas_departamentos' %}">→ Departamentos</a>{% endif %}
    {% if SCREEN_EMPRESAS_EMPLEADOS %}<a href="{% url 'tarjetas:screen_empresas_empleados' %}">→ Empleados</a>{% endif %}
    {% if SCREEN_TARJETAS_PROPIETARIOS_TIPOS %}<a href="{% url 'tarjetas:screen_tarjetas_propietarios_tipos' %}">→ Propietarios</a>{% endif %}
  </div>

</main>
{% endblock %}

{% block modals %}
  {{ block.super }}
  <!-- Modal Saldos de Tarjetas -->
  <div class="modal fade" id="tarjetas_saldos" tabindex="-1" role="dialog" aria-labelledby="tarjetasSaldosLabel" 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="tarjetasSaldosLabel">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</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>
    // Toggle secciones
    const cards    = document.querySelectorAll('.card-section'),
          sections = document.querySelectorAll('.section-content');
    cards.forEach(c =>
      c.addEventListener('click', () => {
        cards.forEach(x=>x.classList.remove('active'));
        sections.forEach(x=>x.classList.remove('active'));
        document.getElementById('section-'+c.dataset.toggle)?.classList.add('active');
        c.classList.add('active');
      })
    );

    $(function(){
      // Abrir modal y cargar saldos
      $('#btn_saldos').on('click', function(){
        $.getJSON("{% url 'tarjetas:get_saldos' %}", function(resp){
          const $b = $('#tblSaldosBody').empty();
          resp.saldos.forEach(s=>{
            $b.append(`
              <tr>
                <td>${s.numero}</td>
                <td class="text-right">${s.saldo} ${s.moneda}</td>
              </tr>
            `);
          });
          $('#tarjetas_saldos').modal('show');
        });
      });
    });
  </script>
{% endblock %}