<?php
require_once __DIR__ . '/../../includes/layout.php';
$pdo = getDBConnection();

$sucursales = [];
try {
    $sucursales = $pdo->query("SELECT id, nombre FROM sucursales ORDER BY id")->fetchAll(PDO::FETCH_ASSOC);
} catch (Exception $e) {}

renderHeader('Contabilidad', 'contabilidad');
?>
<link rel="stylesheet" href="assets/css/bootstrap-icons.min.css">
<style>
.report-wrap {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.report-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}
.report-header h1 {
    font-size: 1.75rem;
    font-weight: 800;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.report-header h1 small {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--text-secondary);
    margin-left: 0.5rem;
}
.header-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Glassmorphic Tabs */
.cc-tabs {
    display: flex;
    gap: 0.5rem;
    padding: 0.35rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 1.5rem;
    overflow-x: auto;
}
.cc-tab {
    padding: 0.6rem 1.25rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--transition);
}
.cc-tab:hover {
    background: var(--surface-hover);
    color: var(--text-primary);
}
.cc-tab.active {
    background: var(--surface-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

/* Filters Elevated Card */
.filters-card {
    background: var(--surface-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
}
.filters-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    align-items: flex-end;
}
.filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.filter-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}
.filter-input {
    min-width: 160px;
    padding: 0.6rem 0.85rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-primary);
    font-size: 0.875rem;
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.filter-input:focus {
    border-color: var(--accent-color);
    box-shadow: var(--focus-ring);
}
.btn-filter-group {
    display: flex;
    gap: 0.75rem;
    height: 38px;
}

/* Premium Tables custom alignments */
.table-premium td.num, .table-premium th.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.table-premium .badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}
.badge-manual { background: rgba(210, 200, 221, 0.1); color: var(--text-secondary); border: 1px solid rgba(210, 200, 221, 0.2); }
.badge-venta { background: rgba(34, 197, 94, 0.1); color: var(--success); border: 1px solid rgba(34, 197, 94, 0.2); }
.badge-compra { background: rgba(245, 158, 11, 0.1); color: var(--warning); border: 1px solid rgba(245, 158, 11, 0.2); }
.badge-gasto { background: rgba(239, 68, 68, 0.1); color: var(--danger); border: 1px solid rgba(239, 68, 68, 0.2); }
.badge-cierre { background: rgba(124, 58, 237, 0.1); color: #c084fc; border: 1px solid rgba(124, 58, 237, 0.2); }

.tab-content { display: none; }
.tab-content.active { display: block; }

/* Tree Node Plan of Accounts */
.cuenta-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.75rem;
    border-radius: var(--radius-sm);
    transition: all var(--transition);
    border: 1px solid transparent;
}
.cuenta-row:hover {
    background: var(--surface-hover);
    border-color: var(--border);
}
.cuenta-row .codigo {
    font-family: monospace;
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 700;
    min-width: 80px;
}
.cuenta-row .nombre {
    font-size: 0.9rem;
    color: var(--text-primary);
    font-weight: 600;
}
.cuenta-row .tipo-badge {
    font-size: 0.65rem;
    background: var(--surface-elevated);
    color: var(--text-secondary);
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    text-transform: uppercase;
    font-weight: 700;
    border: 1px solid var(--border);
}
.cuenta-row .mov-badge {
    font-size: 0.65rem;
    color: var(--success);
    font-weight: 600;
}
.cuenta-row .actions {
    margin-left: auto;
    display: flex;
    gap: 0.35rem;
}
.cuenta-row .actions button {
    padding: 0.35rem;
    border-radius: 6px;
    border: 1px solid var(--border);
    cursor: pointer;
    background: transparent;
    color: var(--text-secondary);
    transition: all var(--transition);
}
.cuenta-row .actions button:hover {
    background: var(--surface-hover);
    color: var(--text-primary);
}

/* Premium Action buttons */
.btn-action-delete {
    background: rgba(239, 68, 68, 0.12);
    color: var(--danger);
    border: 1px solid rgba(239, 68, 68, 0.25);
    padding: 0.45rem;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.95rem;
    transition: all var(--transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-action-delete:hover {
    background: rgba(239, 68, 68, 0.2);
    transform: translateY(-1px);
}
.btn-action-edit {
    background: rgba(124, 58, 237, 0.12);
    color: #a78bfa;
    border: 1px solid rgba(124, 58, 237, 0.25);
    padding: 0.45rem;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.95rem;
    transition: all var(--transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-action-edit:hover {
    background: rgba(124, 58, 237, 0.2);
    transform: translateY(-1px);
}

/* Modals glass details */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(11, 1, 25, 0.65);
    backdrop-filter: blur(4px);
    align-items: center;
    justify-content: center;
}
.modal-overlay.open { display: flex; }
.modal-content {
    background: var(--surface-elevated);
    border-radius: var(--radius);
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 1.75rem 2rem;
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--border);
    box-sizing: border-box;
}
.modal-content.wide { max-width: 950px; }
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
}
.modal-header h2 { font-size: 1.25rem; font-weight: 700; margin: 0; color: var(--text-primary); }
.modal-close { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--text-secondary); }
.modal-close:hover { color: var(--text-primary); }

.log-item { padding: 0.45rem 0.75rem; font-size: 0.8rem; border-radius: 6px; margin-bottom: 0.35rem; font-family: monospace; }
.log-success { background: rgba(34,197,94,0.1); color: var(--success); border: 1px solid rgba(34,197,94,0.2); }
.log-error { background: rgba(239,68,68,0.1); color: var(--danger); border: 1px solid rgba(239,68,68,0.2); }

.pagination { display: flex; justify-content: center; gap: 0.35rem; margin-top: 1.25rem; }
.pagination button {
    padding: 0.45rem 0.75rem;
    font-size: 0.8rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-secondary);
    cursor: pointer;
    font-weight: 600;
    transition: all var(--transition);
}
.pagination button:hover { background: var(--surface-hover); color: var(--text-primary); }
.pagination button.active { background: var(--accent-color); color: var(--primary); border-color: var(--accent-color); }

.num { text-align: right; }
.text-green { color: var(--success) !important; }
.text-red { color: var(--danger) !important; }
.text-muted { color: var(--text-muted) !important; }
.font-mono { font-family: monospace; }
</style>

<div class="report-wrap">
  <div class="report-header">
    <h1><i class="bi bi-calculator"></i> Contabilidad <small>Plan de cuentas, asientos y libros</small></h1>
    <div class="header-actions">
      <button class="btn btn-ghost" onclick="abrirModalCuenta()"><i class="bi bi-journal-plus"></i> Nueva Cuenta</button>
      <button class="btn btn-primary" onclick="abrirModalAsiento()"><i class="bi bi-pencil-square"></i> Nuevo Asiento</button>
      <button class="btn btn-ghost" onclick="generarAutomatico()" style="border-color: #c084fc; color: #d8b4fe;"><i class="bi bi-magic"></i> Generar Automático</button>
    </div>
  </div>

  <!-- Tabs Navigation -->
  <div class="cc-tabs">
    <button class="cc-tab active" data-tab="plan_cuentas" onclick="switchTab('plan_cuentas')"><i class="bi bi-diagram-3"></i> Plan de Cuentas</button>
    <button class="cc-tab" data-tab="asientos" onclick="switchTab('asientos')"><i class="bi bi-journal-text"></i> Asientos</button>
    <button class="cc-tab" data-tab="libro_diario" onclick="switchTab('libro_diario')"><i class="bi bi-book"></i> Libro Diario</button>
    <button class="cc-tab" data-tab="libro_mayor" onclick="switchTab('libro_mayor')"><i class="bi bi-bookmark"></i> Libro Mayor</button>
    <button class="cc-tab" data-tab="balance" onclick="switchTab('balance')"><i class="bi bi-bar-chart"></i> Balance Comprobación</button>
    <button class="cc-tab" data-tab="resultados" onclick="switchTab('resultados')"><i class="bi bi-graph-up"></i> Estado Resultados</button>
  </div>

  <!-- ===== PLAN DE CUENTAS ===== -->
  <div id="tab-plan_cuentas" class="tab-content active">
    <div class="filters-card">
      <div class="filters-grid">
        <div class="filter-group" style="flex: 2; min-width: 220px;">
          <label class="filter-label">Buscar cuenta</label>
          <input type="text" id="filtroCuentas" placeholder="Escriba código o nombre..." class="filter-input" oninput="filtrarCuentas()">
        </div>
        <div class="filter-group" style="flex: 1; min-width: 160px;">
          <label class="filter-label">Filtrar por tipo</label>
          <select id="filtroTipoCuenta" class="filter-input" onchange="filtrarCuentas()">
            <option value="">Todos los tipos</option>
            <option value="activo">Activo</option>
            <option value="pasivo">Pasivo</option>
            <option value="capital">Capital</option>
            <option value="ingreso">Ingreso</option>
            <option value="costo">Costo</option>
            <option value="gasto">Gasto</option>
          </select>
        </div>
        <div class="filter-group" style="margin-left: auto;">
          <span class="text-muted" style="font-size: 0.85rem;" id="cuentasCount"></span>
        </div>
      </div>
    </div>
    <div class="glass-card">
      <div id="cuentasTree"></div>
    </div>
  </div>

  <!-- ===== ASIENTOS ===== -->
  <div id="tab-asientos" class="tab-content">
    <div class="filters-card">
      <div class="filters-grid">
        <div class="filter-group">
          <label class="filter-label">Desde</label>
          <input type="date" id="asientoFechaDesde" class="filter-input">
        </div>
        <div class="filter-group">
          <label class="filter-label">Hasta</label>
          <input type="date" id="asientoFechaHasta" class="filter-input">
        </div>
        <div class="filter-group">
          <label class="filter-label">Tipo</label>
          <select id="asientoTipo" class="filter-input">
            <option value="">Todos</option>
            <option value="manual">Manual</option>
            <option value="venta">Venta</option>
            <option value="compra">Compra</option>
            <option value="gasto">Gasto</option>
            <option value="cierre">Cierre</option>
          </select>
        </div>
        <div class="btn-filter-group">
          <button class="btn btn-primary" onclick="cargarAsientos()"><i class="bi bi-search"></i> Buscar</button>
        </div>
      </div>
    </div>
    <div class="table-wrapper">
      <div id="asientosTable"></div>
    </div>
    <div class="pagination" id="asientosPagination"></div>
  </div>

  <!-- ===== LIBRO DIARIO ===== -->
  <div id="tab-libro_diario" class="tab-content">
    <div class="filters-card">
      <div class="filters-grid">
        <div class="filter-group">
          <label class="filter-label">Desde</label>
          <input type="date" id="ldFechaDesde" class="filter-input">
        </div>
        <div class="filter-group">
          <label class="filter-label">Hasta</label>
          <input type="date" id="ldFechaHasta" class="filter-input">
        </div>
        <div class="btn-filter-group">
          <button class="btn btn-primary" onclick="cargarLibroDiario()"><i class="bi bi-search"></i> Cargar</button>
        </div>
      </div>
    </div>
    <div id="libroDiarioContent" style="display: flex; flex-direction: column; gap: 1.25rem;"></div>
  </div>

  <!-- ===== LIBRO MAYOR ===== -->
  <div id="tab-libro_mayor" class="tab-content">
    <div class="filters-card">
      <div class="filters-grid">
        <div class="filter-group" style="min-width: 280px; flex: 2;">
          <label class="filter-label">Seleccione Cuenta</label>
          <select id="lmCuenta" class="filter-input"></select>
        </div>
        <div class="filter-group" style="flex: 1;">
          <label class="filter-label">Desde</label>
          <input type="date" id="lmFechaDesde" class="filter-input">
        </div>
        <div class="filter-group" style="flex: 1;">
          <label class="filter-label">Hasta</label>
          <input type="date" id="lmFechaHasta" class="filter-input">
        </div>
        <div class="btn-filter-group">
          <button class="btn btn-primary" onclick="cargarLibroMayor()"><i class="bi bi-search"></i> Cargar</button>
        </div>
      </div>
    </div>
    <div id="libroMayorContent"></div>
  </div>

  <!-- ===== BALANCE ===== -->
  <div id="tab-balance" class="tab-content">
    <div class="filters-card">
      <div class="filters-grid">
        <div class="filter-group">
          <label class="filter-label">Desde</label>
          <input type="date" id="bcFechaDesde" class="filter-input">
        </div>
        <div class="filter-group">
          <label class="filter-label">Hasta</label>
          <input type="date" id="bcFechaHasta" class="filter-input">
        </div>
        <div class="btn-filter-group">
          <button class="btn btn-primary" onclick="cargarBalance()"><i class="bi bi-search"></i> Cargar</button>
        </div>
      </div>
    </div>
    <div class="table-wrapper">
      <div id="balanceContent"></div>
    </div>
  </div>

  <!-- ===== ESTADO RESULTADOS ===== -->
  <div id="tab-resultados" class="tab-content">
    <div class="filters-card">
      <div class="filters-grid">
        <div class="filter-group">
          <label class="filter-label">Desde</label>
          <input type="date" id="erFechaDesde" class="filter-input">
        </div>
        <div class="filter-group">
          <label class="filter-label">Hasta</label>
          <input type="date" id="erFechaHasta" class="filter-input">
        </div>
        <div class="btn-filter-group">
          <button class="btn btn-primary" onclick="cargarEstadoResultados()"><i class="bi bi-search"></i> Cargar</button>
        </div>
      </div>
    </div>
    <div id="resultadosContent"></div>
  </div>
</div>

<!-- Modal Cuenta -->
<div id="modalCuenta" class="modal-overlay" onclick="if(event.target===this)cerrarModalCuenta()">
  <div class="modal-content" onclick="event.stopPropagation()">
    <div class="modal-header">
      <h2 id="cuentaModalTitle">Nueva Cuenta</h2>
      <button class="modal-close" onclick="cerrarModalCuenta()">&times;</button>
    </div>
    <input type="hidden" id="cuentaEditId">
    <div class="form-grid" style="margin-bottom: 1.5rem;">
      <div class="form-group">
        <label class="form-label required">Código</label>
        <input type="text" id="cuentaCodigo" placeholder="Ej: 110101" class="form-input">
      </div>
      <div class="form-group">
        <label class="form-label required">Tipo</label>
        <select id="cuentaTipo" class="form-input">
          <option value="activo">Activo</option>
          <option value="pasivo">Pasivo</option>
          <option value="capital">Capital</option>
          <option value="ingreso">Ingreso</option>
          <option value="costo">Costo</option>
          <option value="gasto">Gasto</option>
        </select>
      </div>
      <div class="form-group" style="grid-column: 1 / -1;">
        <label class="form-label required">Nombre de la Cuenta</label>
        <input type="text" id="cuentaNombre" placeholder="Ej: Caja General o Bancos" class="form-input">
      </div>
      <div class="form-group">
        <label class="form-label">Nivel</label>
        <input type="number" id="cuentaNivel" value="3" min="1" max="5" class="form-input">
      </div>
      <div class="form-group">
        <label class="form-label">Naturaleza</label>
        <select id="cuentaNaturaleza" class="form-input">
          <option value="deudora">Deudora</option>
          <option value="acreedora">Acreedora</option>
        </select>
      </div>
      <div class="form-group" style="grid-column: 1 / -1;">
        <label class="form-label">Cuenta Padre</label>
        <select id="cuentaPadre" class="form-input"><option value="">Ninguna</option></select>
      </div>
      <div class="form-group" style="grid-column: 1 / -1; margin-top: 0.5rem;">
        <label class="checkbox-label">
          <input type="checkbox" id="cuentaAceptaMov" checked style="width: 16px; height: 16px;"> Acepta movimientos (Es cuenta de registro)
        </label>
      </div>
    </div>
    <div style="display: flex; gap: 0.75rem; margin-top: 1rem;">
      <button class="btn btn-primary" onclick="guardarCuenta()" style="flex: 1;"><i class="bi bi-check2"></i> Guardar Cuenta</button>
      <button class="btn btn-ghost" onclick="cerrarModalCuenta()">Cancelar</button>
    </div>
  </div>
</div>

<!-- Modal Asiento -->
<div id="modalAsiento" class="modal-overlay" onclick="if(event.target===this)cerrarModalAsiento()">
  <div class="modal-content wide" onclick="event.stopPropagation()">
    <div class="modal-header">
      <h2 id="asientoModalTitle">Nuevo Asiento Manual</h2>
      <button class="modal-close" onclick="cerrarModalAsiento()">&times;</button>
    </div>
    <input type="hidden" id="asientoEditId">
    <div class="form-grid" style="margin-bottom: 1.25rem;">
      <div class="form-group">
        <label class="form-label required">Fecha</label>
        <input type="date" id="asientoFecha" class="form-input">
      </div>
      <div class="form-group">
        <label class="form-label required">Sucursal</label>
        <select id="asientoSucursal" class="form-input"></select>
      </div>
      <div class="form-group">
        <label class="form-label">Tipo de Comprobante</label>
        <input type="text" id="asientoTipoCbte" value="manual" readonly class="form-input" style="opacity: 0.7; cursor: not-allowed;">
      </div>
      <div class="form-group" style="grid-column: 1 / -1;">
        <label class="form-label required">Concepto / Glosa</label>
        <input type="text" id="asientoConcepto" placeholder="Descripción detallada de la transacción..." class="form-input">
      </div>
    </div>
    <div class="form-group" style="margin-bottom: 1.5rem;">
      <label class="form-label">Líneas de Detalle (Partida Doble)</label>
      <div style="display: flex; gap: 1.25rem; font-size: 0.85rem; color: var(--text-secondary); margin: 0.5rem 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.5rem 1rem;">
        <span>Debe: <strong id="totalDebeDisplay" style="color: var(--text-primary);">Q0.00</strong></span>
        <span>Haber: <strong id="totalHaberDisplay" style="color: var(--text-primary);">Q0.00</strong></span>
        <span id="balanceCheck" style="font-weight: 700; margin-left: auto;"></span>
      </div>
      <div id="lineasContainer" style="display: flex; flex-direction: column; gap: 0.5rem; max-height: 250px; overflow-y: auto; padding-right: 0.25rem; margin-bottom: 0.5rem;"></div>
      <button class="btn btn-ghost btn-sm" onclick="agregarLinea()" style="align-self: flex-start;"><i class="bi bi-plus-circle"></i> Agregar Línea</button>
    </div>
    <div style="display: flex; gap: 0.75rem; border-top: 1px solid var(--border); padding-top: 1.25rem;">
      <button class="btn btn-primary" onclick="guardarAsiento()" id="btnGuardarAsiento" style="flex: 1;"><i class="bi bi-check2"></i> Guardar Asiento</button>
      <button class="btn btn-ghost" onclick="cerrarModalAsiento()">Cancelar</button>
    </div>
  </div>
</div>

<!-- Modal Generar Automático -->
<div id="modalAutoGen" class="modal-overlay" onclick="if(event.target===this)cerrarModalAuto()">
  <div class="modal-content" onclick="event.stopPropagation()">
    <div class="modal-header">
      <h2>Generar Asientos Automáticos</h2>
      <button class="modal-close" onclick="cerrarModalAuto()">&times;</button>
    </div>
    <p style="color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 1.25rem; line-height: 1.5;">
      Este proceso escanea las <strong>ventas</strong>, <strong>compras</strong> y <strong>gastos operativos</strong> registradas en el período indicado que aún no tienen asiento contable y los genera en el libro diario.
    </p>
    <div class="form-grid" style="margin-bottom: 1.25rem;">
      <div class="form-group">
        <label class="form-label">Desde</label>
        <input type="date" id="autoFechaDesde" class="form-input">
      </div>
      <div class="form-group">
        <label class="form-label">Hasta</label>
        <input type="date" id="autoFechaHasta" class="form-input">
      </div>
      <div class="form-group" style="grid-column: 1 / -1;">
        <label class="form-label">Límite por Lote</label>
        <select id="autoLimite" class="form-input">
          <option value="500">500 registros</option>
          <option value="1000" selected>1000 registros</option>
          <option value="2500">2500 registros</option>
          <option value="5000">5000 registros</option>
        </select>
      </div>
    </div>
    <div id="autoGenPendientes" style="font-size: 0.85rem; margin-bottom: 1rem;"></div>
    <div id="autoGenLog" style="max-height: 250px; overflow-y: auto; margin-bottom: 1.25rem; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.75rem; background: var(--surface); display: none;"></div>
    <div style="display: flex; gap: 0.75rem; border-top: 1px solid var(--border); padding-top: 1.25rem;">
      <button class="btn btn-primary" onclick="ejecutarAutoGen()" id="btnAutoGen" style="flex: 1; background: #7c3aed;"><i class="bi bi-magic"></i> Iniciar Generación</button>
      <button class="btn btn-ghost" onclick="cerrarModalAuto()">Cerrar</button>
    </div>
  </div>
</div>

<script>
const SUCURSALES_DATA = <?= json_encode($sucursales) ?>;
let currentTab = 'plan_cuentas';
let cuentasData = [];
let asientosPage = 1;
let lineasCount = 0;

function initDates() {
    const today = new Date().toISOString().split('T')[0];
    const firstDay = new Date(new Date().getFullYear(), new Date().getMonth(), 1).toISOString().split('T')[0];
    
    ['asientoFechaDesde', 'ldFechaDesde', 'lmFechaDesde', 'bcFechaDesde', 'erFechaDesde', 'autoFechaDesde'].forEach(id => {
        const el = document.getElementById(id);
        if (el && !el.value) el.value = firstDay;
    });
    ['asientoFechaHasta', 'ldFechaHasta', 'lmFechaHasta', 'bcFechaHasta', 'erFechaHasta', 'autoFechaHasta'].forEach(id => {
        const el = document.getElementById(id);
        if (el && !el.value) el.value = today;
    });
}

function switchTab(tab) {
    currentTab = tab;
    sessionStorage.setItem('active_contabilidad_tab', tab);
    document.querySelectorAll('.cc-tab').forEach(b => b.classList.remove('active'));
    document.querySelector(`.cc-tab[data-tab="${tab}"]`)?.classList.add('active');
    document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
    document.getElementById(`tab-${tab}`)?.classList.add('active');
    
    if (tab === 'plan_cuentas') cargarCuentas();
    if (tab === 'asientos') cargarAsientos();
    if (tab === 'libro_diario') cargarLibroDiario();
    if (tab === 'balance') cargarBalance();
    if (tab === 'resultados') cargarEstadoResultados();
    if (tab === 'libro_mayor') { cargarCuentasSelect(); cargarLibroMayor(); }
}

// ===================== PLAN DE CUENTAS =====================
async function cargarCuentas() {
    try {
        const r = await fetch('api/contabilidad/plan_cuentas.php?action=listar');
        const d = await r.json();
        cuentasData = d.data || [];
        renderCuentas(cuentasData);
    } catch(e) { console.error(e); }
}

function renderCuentas(cuentas) {
    const tree = document.getElementById('cuentasTree');
    document.getElementById('cuentasCount').textContent = cuentas.length + ' cuentas registradas';
    if (!cuentas.length) { tree.innerHTML = '<p class="text-muted" style="text-align:center;padding:2rem;">No hay cuentas registradas</p>'; return; }
    
    const map = {}; const roots = [];
    cuentas.forEach(c => { map[c.id] = {...c, children: []}; });
    cuentas.forEach(c => {
        if (c.padre_id && map[c.padre_id]) map[c.padre_id].children.push(map[c.id]);
        else if (!c.padre_id) roots.push(map[c.id]);
    });
    
    function renderNode(node, depth=0) {
        const pad = depth * 20;
        const tipoLabels = {activo:'Activo',pasivo:'Pasivo',capital:'Capital',ingreso:'Ingreso',costo:'Costo',gasto:'Gasto'};
        const tipo = tipoLabels[node.tipo] || node.tipo;
        let html = `<div class="cuenta-row" style="padding-left:${8+pad}px;">
            <span class="codigo">${node.codigo}</span>
            <span class="nombre">${node.nombre}</span>
            <span class="tipo-badge">${tipo}</span>
            ${node.acepta_movimiento ? '<span class="mov-badge"><i class="bi bi-check-circle-fill"></i> Mov</span>' : ''}
            <span style="font-size:0.75rem; color:var(--text-muted); text-transform: capitalize; margin-left: 0.5rem;">(${node.naturaleza})</span>
            <div class="actions">
                <button class="btn-action-edit" onclick="editarCuenta(${node.id})" title="Editar"><i class="bi bi-pencil"></i></button>
                <button class="btn-action-delete" onclick="eliminarCuenta(${node.id})" title="Desactivar"><i class="bi bi-trash"></i></button>
            </div>
        </div>`;
        if (node.children.length) {
            html += `<div style="border-left: 1px dashed var(--border); margin-left: ${12+pad}px; padding-left: 8px;">
                ${node.children.map(ch => renderNode(ch, 0)).join('')}
            </div>`;
        }
        return html;
    }
    tree.innerHTML = roots.map(r => renderNode(r)).join('');
}

function filtrarCuentas() {
    const q = document.getElementById('filtroCuentas').value.toLowerCase();
    const t = document.getElementById('filtroTipoCuenta').value;
    let filtered = cuentasData;
    if (q) filtered = filtered.filter(c => c.codigo.toLowerCase().includes(q) || c.nombre.toLowerCase().includes(q));
    if (t) filtered = filtered.filter(c => c.tipo === t);
    renderCuentas(filtered);
}

function abrirModalCuenta(id=null) {
    document.getElementById('cuentaEditId').value = id || '';
    document.getElementById('cuentaModalTitle').textContent = id ? 'Editar Cuenta' : 'Nueva Cuenta';
    if (id) {
        const c = cuentasData.find(x => x.id == id);
        if (c) {
            document.getElementById('cuentaCodigo').value = c.codigo;
            document.getElementById('cuentaNombre').value = c.nombre;
            document.getElementById('cuentaTipo').value = c.tipo;
            document.getElementById('cuentaNivel').value = c.nivel;
            document.getElementById('cuentaNaturaleza').value = c.naturaleza;
            document.getElementById('cuentaAceptaMov').checked = c.acepta_movimiento == 1;
        }
    } else {
        document.getElementById('cuentaCodigo').value = '';
        document.getElementById('cuentaNombre').value = '';
        document.getElementById('cuentaNivel').value = '3';
        document.getElementById('cuentaNaturaleza').value = 'deudora';
        document.getElementById('cuentaAceptaMov').checked = true;
    }
    const sel = document.getElementById('cuentaPadre');
    sel.innerHTML = '<option value="">Ninguna</option>';
    cuentasData.filter(c => c.id != id).forEach(c => {
        sel.innerHTML += `<option value="${c.id}">${c.codigo} - ${c.nombre}</option>`;
    });
    if (id) { const c = cuentasData.find(x => x.id == id); if (c && c.padre_id) sel.value = c.padre_id; }
    document.getElementById('modalCuenta').classList.add('open');
}

function cerrarModalCuenta() { document.getElementById('modalCuenta').classList.remove('open'); }

async function guardarCuenta() {
    const id = document.getElementById('cuentaEditId').value;
    const d = {
        codigo: document.getElementById('cuentaCodigo').value.trim(),
        nombre: document.getElementById('cuentaNombre').value.trim(),
        tipo: document.getElementById('cuentaTipo').value,
        nivel: parseInt(document.getElementById('cuentaNivel').value) || 3,
        padre_id: document.getElementById('cuentaPadre').value || null,
        naturaleza: document.getElementById('cuentaNaturaleza').value,
        acepta_movimiento: document.getElementById('cuentaAceptaMov').checked ? 1 : 0
    };
    if (!d.codigo || !d.nombre) { Swal.fire('Error', 'Código y nombre requeridos', 'error'); return; }
    try {
        const action = id ? 'actualizar' : 'crear';
        if (id) d.id = parseInt(id);
        const r = await fetch('api/contabilidad/plan_cuentas.php?action='+action, {
            method: 'POST', headers: {'Content-Type':'application/json'},
            body: JSON.stringify(d)
        });
        const res = await r.json();
        if (res.success) { Swal.fire('Guardado', res.message||'Cuenta guardada', 'success'); cerrarModalCuenta(); cargarCuentas(); }
        else Swal.fire('Error', res.error||'Error al guardar', 'error');
    } catch(e) { Swal.fire('Error', e.message, 'error'); }
}

function editarCuenta(id) { abrirModalCuenta(id); }

async function eliminarCuenta(id) {
    const r = await Swal.fire({title:'¿Desactivar cuenta?',text:'Se marcará como inactiva en el plan de cuentas',icon:'warning',showCancelButton:true,confirmButtonColor:'#dc2626',confirmButtonText:'Desactivar'});
    if (!r.isConfirmed) return;
    const res = await (await fetch('api/contabilidad/plan_cuentas.php?action=eliminar&id='+id)).json();
    if (res.success) { Swal.fire('Desactivada', 'Cuenta desactivada con éxito', 'success'); cargarCuentas(); }
    else Swal.fire('Error', res.error, 'error');
}

// ===================== ASIENTOS =====================
async function cargarAsientos(page=1) {
    asientosPage = page;
    const fd = document.getElementById('asientoFechaDesde').value;
    const fh = document.getElementById('asientoFechaHasta').value;
    const tp = document.getElementById('asientoTipo').value;
    let url = `api/contabilidad/asientos.php?action=listar&page=${page}` + sucursalFilter();
    if (fd) url += `&fecha_desde=${fd}`;
    if (fh) url += `&fecha_hasta=${fh}`;
    if (tp) url += `&tipo=${tp}`;
    try {
        const r = await fetch(url);
        const d = await r.json();
        if (!d.success) { document.getElementById('asientosTable').innerHTML = `<p class="text-red" style="padding:1rem;">${d.error}</p>`; return; }
        const data = d.data.data || [];
        const total = d.data.total || 0;
        const pages = d.data.pages || 1;
        
        let html = `<table class="table-premium"><thead><tr>
            <th>ID</th><th>Fecha</th><th>Concepto</th><th>Tipo</th>
            <th class="num">Líneas</th><th style="text-align:center;">Acciones</th></tr></thead><tbody>`;
        data.forEach(a => {
            const badgeClass = a.tipo_comprobante==='manual'?'badge-manual':a.tipo_comprobante==='venta'?'badge-soft-success':a.tipo_comprobante==='compra'?'badge-compra':a.tipo_comprobante==='gasto'?'badge-gasto':'badge-cierre';
            html += `<tr>
                <td><span class="font-mono text-muted">#${a.id}</span></td>
                <td><strong>${a.fecha}</strong></td>
                <td style="max-width:320px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;" title="${esc(a.concepto)}">${esc(a.concepto)}</td>
                <td><span class="badge ${badgeClass}">${a.tipo_comprobante}</span></td>
                <td class="num font-mono text-muted">${a.lineas}</td>
                <td style="text-align:center; display:flex; gap:0.35rem; justify-content:center;">
                    <button onclick="verAsiento(${a.id})" class="btn btn-ghost btn-icon" title="Ver Detalle" style="padding: 0.3rem;"><i class="bi bi-eye"></i></button>
                    ${a.tipo_comprobante==='manual'?`<button onclick="eliminarAsiento(${a.id})" class="btn-action-delete" title="Eliminar Asiento" style="padding: 0.3rem;"><i class="bi bi-trash"></i></button>`:''}
                </td></tr>`;
        });
        html += '</tbody></table>';
        if (!data.length) html = '<p class="text-muted" style="text-align:center;padding:2rem;">No hay asientos contables en este período</p>';
        document.getElementById('asientosTable').innerHTML = html;
        
        let pag = '';
        for (let i=1; i<=pages; i++) {
            pag += `<button onclick="cargarAsientos(${i})" class="${i===page?'active':''}">${i}</button>`;
        }
        document.getElementById('asientosPagination').innerHTML = pag;
    } catch(e) { console.error(e); }
}

async function verAsiento(id) {
    try {
        const r = await fetch('api/contabilidad/asientos.php?action=detalle&id='+id);
        const d = await r.json();
        if (!d.success) { Swal.fire('Error', d.error, 'error'); return; }
        const a = d.data;
        
        // Find branch name
        const bName = SUCURSALES_DATA.find(s => s.id == a.sucursal_id)?.nombre || 'General';
        
        let h = `<div style="text-align:left;font-size:0.875rem; display:flex; flex-direction:column; gap:0.4rem; margin-bottom:1rem; border-bottom:1px solid var(--border); padding-bottom:0.75rem;">
            <div><span class="text-muted">Fecha del asiento:</span> <strong>${a.fecha}</strong></div>
            <div><span class="text-muted">Sucursal:</span> <strong>${bName}</strong></div>
            <div><span class="text-muted">Concepto:</span> <strong>${esc(a.concepto)}</strong></div>
        </div>`;
        h += `<table class="table-premium"><thead><tr><th>Cuenta</th><th>Descripción</th><th class="num">Debe</th><th class="num">Haber</th></tr></thead><tbody>`;
        let tdebe=0, thaber=0;
        (a.detalle||[]).forEach(l => {
            tdebe += parseFloat(l.debe); thaber += parseFloat(l.haber);
            h += `<tr>
                <td><span class="font-mono text-muted">${l.cuenta_codigo}</span> ${esc(l.cuenta_nombre)}</td>
                <td class="text-muted">${esc(l.descripcion||'')}</td>
                <td class="num text-green font-mono">${parseFloat(l.debe)>0?'Q'+parseFloat(l.debe).toFixed(2):''}</td>
                <td class="num text-red font-mono">${parseFloat(l.haber)>0?'Q'+parseFloat(l.haber).toFixed(2):''}</td>
            </tr>`;
        });
        h += `<tr style="font-weight:700; border-top:2px solid var(--border); background:var(--surface-hover);">
            <td colspan="2" class="num">Totales</td>
            <td class="num text-green font-mono">Q${tdebe.toFixed(2)}</td>
            <td class="num text-red font-mono">Q${thaber.toFixed(2)}</td>
        </tr></tbody></table>`;
        
        Swal.fire({
            title: `Asiento #${a.id} - ${a.tipo_comprobante.toUpperCase()}`,
            html: h,
            width: 750, 
            confirmButtonColor: '#4f46e5', 
            confirmButtonText: 'Cerrar',
            background: 'var(--surface-elevated)',
            color: 'var(--text-primary)'
        });
    } catch(e) { Swal.fire('Error', e.message, 'error'); }
}

async function eliminarAsiento(id) {
    const r = await Swal.fire({title:'¿Eliminar asiento?',text:'Se eliminará permanentemente. Solo asientos manuales pueden eliminarse.',icon:'warning',showCancelButton:true,confirmButtonColor:'#dc2626',confirmButtonText:'Eliminar'});
    if (!r.isConfirmed) return;
    const res = await (await fetch('api/contabilidad/asientos.php?action=eliminar&id='+id)).json();
    if (res.success) { Swal.fire('Eliminado', 'Asiento contable eliminado', 'success'); cargarAsientos(asientosPage); }
    else Swal.fire('Error', res.error, 'error');
}

// ===================== NUEVO ASIENTO MANUAL =====================
function abrirModalAsiento() {
    document.getElementById('asientoEditId').value = '';
    document.getElementById('asientoModalTitle').textContent = 'Nuevo Asiento Manual';
    document.getElementById('asientoFecha').value = new Date().toISOString().split('T')[0];
    document.getElementById('asientoConcepto').value = '';
    
    // Populate sucursales dropdown
    const sSel = document.getElementById('asientoSucursal');
    sSel.innerHTML = '';
    SUCURSALES_DATA.forEach(s => {
        sSel.innerHTML += `<option value="${s.id}">${esc(s.nombre)}</option>`;
    });
    const activeSuc = getSucursalId();
    if (activeSuc > 0) {
        sSel.value = activeSuc;
    } else {
        sSel.value = '1';
    }
    
    document.getElementById('lineasContainer').innerHTML = '';
    lineasCount = 0;
    agregarLinea(); agregarLinea();
    document.getElementById('modalAsiento').classList.add('open');
}

function cerrarModalAsiento() { document.getElementById('modalAsiento').classList.remove('open'); }

function esc(s) {
    if (!s) return '';
    const d = document.createElement('div');
    d.textContent = s;
    return d.innerHTML;
}

function agregarLinea() {
    lineasCount++;
    const i = lineasCount;
    const container = document.getElementById('lineasContainer');
    const div = document.createElement('div');
    div.style.cssText = 'display:flex;gap:0.5rem;align-items:center;margin-bottom:0.4rem;';
    div.id = `linea-${i}`;
    const opts = cuentasData.filter(c=>c.acepta_movimiento).map(c=>`<option value="${c.id}">${esc(c.codigo)} - ${esc(c.nombre)}</option>`).join('');
    
    div.innerHTML = `<select id="lineaCuenta-${i}" class="linea-cuenta form-input" style="flex:1.5;padding:0.5rem;font-size:0.8rem;">
        <option value="">Seleccionar cuenta</option>${opts}</select>
    <input type="text" id="lineaDesc-${i}" placeholder="Descripción de la línea..." class="form-input" style="flex:2;padding:0.5rem;font-size:0.8rem;">
    <input type="number" step="0.01" id="lineaDebe-${i}" placeholder="0.00" class="form-input" style="width:110px;padding:0.5rem;font-size:0.8rem;text-align:right;" oninput="actualizarTotales()">
    <input type="number" step="0.01" id="lineaHaber-${i}" placeholder="0.00" class="form-input" style="width:110px;padding:0.5rem;font-size:0.8rem;text-align:right;" oninput="actualizarTotales()">
    <button onclick="eliminarLinea(${i})" class="btn-action-delete" style="padding:0.35rem 0.5rem; border-radius:6px;" title="Remover"><i class="bi bi-dash-circle"></i></button>`;
    
    container.appendChild(div);
    actualizarTotales();
}

function eliminarLinea(i) {
    const el = document.getElementById(`linea-${i}`);
    if (el && document.getElementById('lineasContainer').children.length > 2) { el.remove(); actualizarTotales(); }
}

function actualizarTotales() {
    let debe = 0, haber = 0;
    document.querySelectorAll('[id^="lineaDebe-"]').forEach(inp => debe += parseFloat(inp.value)||0);
    document.querySelectorAll('[id^="lineaHaber-"]').forEach(inp => haber += parseFloat(inp.value)||0);
    document.getElementById('totalDebeDisplay').textContent = 'Q'+debe.toFixed(2);
    document.getElementById('totalHaberDisplay').textContent = 'Q'+haber.toFixed(2);
    const check = document.getElementById('balanceCheck');
    if (Math.abs(debe - haber) < 0.01 && (debe > 0 || haber > 0)) {
        check.textContent = '✓ CUADRA';
        check.style.color = 'var(--success)';
    } else if (debe > 0 || haber > 0) {
        check.textContent = '✗ NO CUADRA (Dif: Q'+(Math.abs(debe - haber)).toFixed(2)+')';
        check.style.color = 'var(--danger)';
    } else { check.textContent = ''; }
}

async function guardarAsiento() {
    const fecha = document.getElementById('asientoFecha').value;
    const sucursal_id = document.getElementById('asientoSucursal').value;
    const concepto = document.getElementById('asientoConcepto').value.trim();
    if (!fecha || !concepto || !sucursal_id) { Swal.fire('Error', 'Fecha, sucursal y concepto requeridos', 'error'); return; }
    
    const detalle = [];
    document.querySelectorAll('[id^="linea-"]').forEach(div => {
        const id = div.id.replace('linea-','');
        const cuenta = document.getElementById(`lineaCuenta-${id}`).value;
        const desc = document.getElementById(`lineaDesc-${id}`).value;
        const debe = parseFloat(document.getElementById(`lineaDebe-${id}`).value)||0;
        const haber = parseFloat(document.getElementById(`lineaHaber-${id}`).value)||0;
        if (cuenta && (debe > 0 || haber > 0)) {
            detalle.push({cuenta_id: parseInt(cuenta), descripcion: desc, debe, haber});
        }
    });
    if (detalle.length < 2) { Swal.fire('Error', 'Debe tener al menos 2 líneas con importes válidos', 'error'); return; }
    
    let debe = 0, haber = 0;
    detalle.forEach(d => { debe += d.debe; haber += d.haber; });
    if (Math.abs(debe - haber) > 0.01) { Swal.fire('Error', 'El asiento no cuadra.', 'error'); return; }
    
    try {
        const r = await fetch('api/contabilidad/asientos.php?action=crear', {
            method: 'POST', headers: {'Content-Type':'application/json'},
            body: JSON.stringify({fecha, concepto, sucursal_id: parseInt(sucursal_id), detalle})
        });
        const res = await r.json();
        if (res.success) { 
            Swal.fire('Guardado', 'Asiento #'+res.data.id+' creado con éxito', 'success'); 
            cerrarModalAsiento(); 
            cargarAsientos(); 
        } else {
            Swal.fire('Error', res.error, 'error'); 
        }
    } catch(e) { Swal.fire('Error', e.message, 'error'); }
}

// ===================== GENERAR AUTOMÁTICO =====================
function generarAutomatico() {
    document.getElementById('autoFechaDesde').value = new Date().toISOString().split('T')[0];
    document.getElementById('autoFechaHasta').value = new Date().toISOString().split('T')[0];
    document.getElementById('autoGenLog').style.display = 'none';
    document.getElementById('autoGenLog').innerHTML = '';
    document.getElementById('autoGenPendientes').innerHTML = '<span class="text-muted">Escaneando transacciones pendientes...</span>';
    document.getElementById('btnAutoGen').disabled = false;
    document.getElementById('btnAutoGen').innerHTML = '<i class="bi bi-magic"></i> Iniciar Generación';
    document.getElementById('modalAutoGen').classList.add('open');
    contarPendientes();
}

async function contarPendientes() {
    const fd = document.getElementById('autoFechaDesde').value || new Date().toISOString().split('T')[0];
    const fh = document.getElementById('autoFechaHasta').value || new Date().toISOString().split('T')[0];
    try {
        const r = await fetch(`api/contabilidad/generar.php?action=contar_pendientes&fecha_desde=${fd}&fecha_hasta=${fh}` + sucursalFilter());
        const d = await r.json();
        if (d.success) {
            const p = d.data;
            const total = p.ventas + p.compras + p.gastos;
            document.getElementById('autoGenPendientes').innerHTML =
                total > 0
                    ? `<div style="color:var(--warning);background:rgba(245,158,11,0.08); border:1px solid rgba(245,158,11,0.15); padding:0.65rem 1rem; border-radius:8px; line-height:1.5;">
                        Se encontraron <strong>${p.ventas}</strong> ventas, <strong>${p.compras}</strong> compras, y <strong>${p.gastos}</strong> gastos pendientes (${total} asientos totales a generar).
                       </div>`
                    : `<div style="color:var(--success);background:rgba(34,197,94,0.08); border:1px solid rgba(34,197,94,0.15); padding:0.65rem 1rem; border-radius:8px;">
                        No hay transacciones pendientes de contabilizar en este período.
                       </div>`;
        }
    } catch(e) {
        document.getElementById('autoGenPendientes').innerHTML = '<span class="text-red">Error al escanear pendientes</span>';
    }
}

function cerrarModalAuto() { document.getElementById('modalAutoGen').classList.remove('open'); }

function agregarLog(texto, tipo) {
    const log = document.getElementById('autoGenLog');
    log.style.display = 'block';
    const d = document.createElement('div');
    d.className = 'log-item log-' + (tipo||'success');
    d.innerHTML = esc(texto);
    log.appendChild(d);
    log.scrollTop = log.scrollHeight;
}

async function ejecutarAutoGen() {
    const btn = document.getElementById('btnAutoGen');
    const log = document.getElementById('autoGenLog');
    log.innerHTML = '';
    log.style.display = 'block';
    btn.disabled = true;
    btn.innerHTML = '<i class="bi bi-hourglass-split"></i> Generando...';

    const fd = document.getElementById('autoFechaDesde').value;
    const fh = document.getElementById('autoFechaHasta').value;
    const lim = document.getElementById('autoLimite').value;

    agregarLog('Escaneando transacciones del ' + fd + ' al ' + fh + ' (lote: ' + lim + ')...', 'success');

    try {
        const r = await fetch(`api/contabilidad/generar.php?action=generar_automatico&fecha_desde=${fd}&fecha_hasta=${fh}&limite=${lim}` + sucursalFilter());
        const d = await r.json();

        if (!d.success) {
            agregarLog('Error en generación: ' + (d.error || 'Desconocido'), 'error');
            btn.disabled = false;
            btn.innerHTML = '<i class="bi bi-magic"></i> Iniciar Generación';
            return;
        }

        const res = d.data;
        if (res.total > 0) {
            agregarLog('¡Éxito! Se generaron ' + res.total + ' asientos contables:', 'success');
            (res.generadas||[]).forEach(g => agregarLog('  ' + g, 'success'));
            if (res.limite_alcanzado && res.restantes > 0) {
                agregarLog('Límite alcanzado. Aún quedan aprox. ' + res.restantes + ' registros pendientes.', 'error');
            }
        } else {
            agregarLog('No se encontraron transacciones pendientes en el período seleccionado.', 'success');
        }

        if (res.errores && res.errores.length > 0) {
            agregarLog('Alertas en algunos registros:', 'error');
            (res.errores||[]).forEach(e => agregarLog('  ' + e, 'error'));
        }

        let msg = `Se generaron <strong>${res.total}</strong> asientos contables de forma automática.`;
        if (res.errores?.length) msg += `<br><span class="text-red">Hubo ${res.errores.length} errores.</span>`;

        Swal.fire({
            title: 'Generación Completada',
            html: msg,
            icon: res.errores?.length ? 'warning' : 'success',
            confirmButtonColor: '#4f46e5',
            background: 'var(--surface-elevated)',
            color: 'var(--text-primary)'
        });

        if (res.total > 0) {
            cargarAsientos();
            contarPendientes();
        }
    } catch (e) {
        agregarLog('Error de conexión: ' + e.message, 'error');
        Swal.fire('Error', e.message, 'error');
    }

    btn.disabled = false;
    btn.innerHTML = '<i class="bi bi-magic"></i> Iniciar Generación';
}

document.addEventListener('change', function(e) {
    if (e.target.id === 'autoFechaDesde' || e.target.id === 'autoFechaHasta') {
        contarPendientes();
    }
});

// ===================== LIBRO DIARIO =====================
async function cargarLibroDiario() {
    const fd = document.getElementById('ldFechaDesde').value || '2000-01-01';
    const fh = document.getElementById('ldFechaHasta').value || '2099-12-31';
    try {
        const r = await fetch(`api/contabilidad/libros.php?action=libro_diario&fecha_desde=${fd}&fecha_hasta=${fh}` + sucursalFilter());
        const d = await r.json();
        if (!d.success) { document.getElementById('libroDiarioContent').innerHTML = `<p class="text-red">${d.error}</p>`; return; }
        const dt = d.data;
        
        let html = `<div style="font-size:0.875rem; color:var(--text-secondary); background:var(--surface-elevated); border:1px solid var(--border); padding:0.65rem 1rem; border-radius:8px; display:inline-block; margin-bottom:0.5rem;">
            Se encontraron <strong>${dt.resumen.total_asientos}</strong> asientos · Total Debe: <strong class="text-green">Q${parseFloat(dt.resumen.total_debe).toFixed(2)}</strong> · Total Haber: <strong class="text-red">Q${parseFloat(dt.resumen.total_haber).toFixed(2)}</strong>
        </div>`;
        
        (dt.asientos||[]).forEach(a => {
            html += `<div class="glass-card" style="padding:1.25rem;">
                <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:0.5rem; border-bottom:1px solid var(--border); padding-bottom:0.5rem;">
                    <div><span class="font-mono text-muted">#${a.id}</span> <strong style="margin-left:0.5rem;">${a.fecha}</strong></div>
                    <span class="badge ${a.tipo_comprobante==='manual'?'badge-manual':a.tipo_comprobante==='venta'?'badge-soft-success':a.tipo_comprobante==='compra'?'badge-compra':a.tipo_comprobante==='gasto'?'badge-gasto':'badge-cierre'}">${a.tipo_comprobante}</span>
                </div>
                <p style="font-size:0.875rem; color:var(--text-primary); margin-bottom:0.75rem; font-weight:600;">${esc(a.concepto)}</p>
                <div class="table-wrapper">
                    <table class="table-premium"><thead><tr><th>Cuenta</th><th class="num">Debe</th><th class="num">Haber</th></tr></thead><tbody>`;
            (a.detalle||[]).forEach(l => {
                html += `<tr>
                    <td style="font-size:0.8rem;"><span class="font-mono text-muted" style="margin-right:0.5rem;">${l.cuenta_codigo}</span> ${esc(l.cuenta_nombre)} <span class="text-muted" style="font-size:0.75rem; margin-left:0.5rem;">${l.descripcion ? ' - ' + esc(l.descripcion) : ''}</span></td>
                    <td class="num text-green font-mono">${parseFloat(l.debe)>0?'Q'+parseFloat(l.debe).toFixed(2):''}</td>
                    <td class="num text-red font-mono">${parseFloat(l.haber)>0?'Q'+parseFloat(l.haber).toFixed(2):''}</td>
                </tr>`;
            });
            html += `<tr style="font-weight:700; border-top:2px solid var(--border); background:var(--surface-hover);">
                <td>Totales del Asiento</td>
                <td class="num text-green font-mono">Q${a.total_debe.toFixed(2)}</td>
                <td class="num text-red font-mono">Q${a.total_haber.toFixed(2)}</td>
            </tr></tbody></table></div></div>`;
        });
        if (!dt.asientos?.length) html = '<p class="text-muted" style="text-align:center;padding:2rem;">No hay asientos en este período</p>';
        document.getElementById('libroDiarioContent').innerHTML = html;
    } catch(e) { console.error(e); }
}

// ===================== LIBRO MAYOR =====================
async function cargarCuentasSelect() {
    try {
        const r = await fetch('api/contabilidad/plan_cuentas.php?action=arbol');
        const d = await r.json();
        const sel = document.getElementById('lmCuenta');
        sel.innerHTML = '<option value="">Seleccionar cuenta contable...</option>';
        (d.data||[]).filter(c => c.acepta_movimiento).forEach(c => {
            sel.innerHTML += `<option value="${c.id}">${c.codigo} - ${c.nombre}</option>`;
        });
    } catch(e) { console.error(e); }
}

async function cargarLibroMayor() {
    const cuenta = document.getElementById('lmCuenta').value;
    const fd = document.getElementById('lmFechaDesde').value || '2000-01-01';
    const fh = document.getElementById('lmFechaHasta').value || '2099-12-31';
    if (!cuenta) { 
        document.getElementById('libroMayorContent').innerHTML = '<p class="text-muted" style="text-align:center;padding:2rem;">Seleccione una cuenta contable para ver el libro mayor</p>'; 
        return; 
    }
    try {
        const r = await fetch(`api/contabilidad/libros.php?action=libro_mayor&cuenta_id=${cuenta}&fecha_desde=${fd}&fecha_hasta=${fh}` + sucursalFilter());
        const d = await r.json();
        if (!d.success) { document.getElementById('libroMayorContent').innerHTML = `<p class="text-red">${d.error}</p>`; return; }
        const dt = d.data;
        
        let html = `<div class="glass-card" style="padding:1.5rem;">
            <div style="font-weight:800; font-size:1.2rem; margin-bottom:0.5rem; font-family:'League Spartan';">${dt.cuenta.codigo} - ${esc(dt.cuenta.nombre)}</div>
            <div style="font-size:0.875rem; color:var(--text-secondary); margin-bottom:1rem; background:var(--surface); border:1px solid var(--border); padding:0.5rem 1rem; border-radius:6px; display:inline-block;">
                Saldo Inicial del período: <strong style="color:var(--text-primary);">Q${parseFloat(dt.saldo_inicial).toFixed(2)}</strong>
            </div>
            <div class="table-wrapper">
            <table class="table-premium"><thead><tr><th>Fecha</th><th>Asiento</th><th>Detalle / Concepto</th><th class="num">Debe</th><th class="num">Haber</th><th class="num">Saldo Acumulado</th></tr></thead><tbody>`;
        
        (dt.movimientos||[]).forEach(m => {
            html += `<tr>
                <td style="font-size:0.8rem;">${m.fecha}</td>
                <td><span class="font-mono text-muted">#${m.asiento_id}</span></td>
                <td style="font-size:0.8rem; color:var(--text-secondary);">${esc(m.concepto)} ${m.descripcion ? ' - ' + esc(m.descripcion) : ''}</td>
                <td class="num text-green font-mono">${parseFloat(m.debe)>0?'Q'+parseFloat(m.debe).toFixed(2):''}</td>
                <td class="num text-red font-mono">${parseFloat(m.haber)>0?'Q'+parseFloat(m.haber).toFixed(2):''}</td>
                <td class="num font-mono" style="font-weight:700;">Q${parseFloat(m.saldo).toFixed(2)}</td>
            </tr>`;
        });
        
        html += `<tr style="font-weight:700; border-top:2px solid var(--border); background:var(--surface-hover);">
            <td colspan="3" class="num">Movimientos Totales y Saldo Final</td>
            <td class="num text-green font-mono">Q${parseFloat(dt.total_debe).toFixed(2)}</td>
            <td class="num text-red font-mono">Q${parseFloat(dt.total_haber).toFixed(2)}</td>
            <td class="num font-mono" style="background:var(--surface-elevated); border:1px solid var(--border);">Q${parseFloat(dt.saldo_final).toFixed(2)}</td>
        </tr></tbody></table></div></div>`;
        document.getElementById('libroMayorContent').innerHTML = html;
    } catch(e) { console.error(e); }
}

// ===================== BALANCE DE COMPROBACIÓN =====================
async function cargarBalance() {
    const fd = document.getElementById('bcFechaDesde').value || '2000-01-01';
    const fh = document.getElementById('bcFechaHasta').value || '2099-12-31';
    try {
        const r = await fetch(`api/contabilidad/libros.php?action=balance_comprobacion&fecha_desde=${fd}&fecha_hasta=${fh}` + sucursalFilter());
        const d = await r.json();
        if (!d.success) { document.getElementById('balanceContent').innerHTML = `<p class="text-red">${d.error}</p>`; return; }
        const dt = d.data;
        
        let html = `<table class="table-premium"><thead><tr>
            <th>Código</th><th>Cuenta</th><th class="num">Debe Inicial</th><th class="num">Haber Inicial</th>
            <th class="num">Debe Mov</th><th class="num">Haber Mov</th>
            <th class="num">Saldo Deudor</th><th class="num">Saldo Acreedor</th></tr></thead><tbody>`;
            
        (dt.cuentas||[]).forEach(c => {
            html += `<tr>
                <td><span class="font-mono text-muted">${c.codigo}</span></td>
                <td><span class="cuenta-row-badge" style="font-size:0.65rem; background:rgba(255,255,255,0.05); border:1px solid var(--border); color:var(--text-secondary); padding:0.15rem 0.35rem; border-radius:4px; text-transform:uppercase; font-weight:700; margin-right:0.5rem;">${c.tipo}</span> <strong>${esc(c.nombre)}</strong></td>
                <td class="num text-muted font-mono">${parseFloat(c.debe_inicial||0)>0?'Q'+parseFloat(c.debe_inicial).toFixed(2):''}</td>
                <td class="num text-muted font-mono">${parseFloat(c.haber_inicial||0)>0?'Q'+parseFloat(c.haber_inicial).toFixed(2):''}</td>
                <td class="num text-green font-mono">${parseFloat(c.debe_mov||0)>0?'Q'+parseFloat(c.debe_mov).toFixed(2):''}</td>
                <td class="num text-red font-mono">${parseFloat(c.haber_mov||0)>0?'Q'+parseFloat(c.haber_mov).toFixed(2):''}</td>
                <td class="num text-green font-mono" style="font-weight:700;">${parseFloat(c.saldo_deudor||0)>0?'Q'+parseFloat(c.saldo_deudor).toFixed(2):''}</td>
                <td class="num text-red font-mono" style="font-weight:700;">${parseFloat(c.saldo_acreedor||0)>0?'Q'+parseFloat(c.saldo_acreedor).toFixed(2):''}</td></tr>`;
        });
        
        const t = dt.totales||{};
        html += `<tr style="font-weight:700; border-top:2px solid var(--border); background:var(--surface-hover);">
            <td colspan="2" class="num">TOTALES GENERALES</td>
            <td class="num font-mono">Q${parseFloat(t.debe_inicial||0).toFixed(2)}</td>
            <td class="num font-mono">Q${parseFloat(t.haber_inicial||0).toFixed(2)}</td>
            <td class="num text-green font-mono">Q${parseFloat(t.debe_mov||0).toFixed(2)}</td>
            <td class="num text-red font-mono">Q${parseFloat(t.haber_mov||0).toFixed(2)}</td>
            <td class="num text-green font-mono" style="background:var(--surface-elevated); border:1px solid var(--border);">Q${parseFloat(t.saldo_deudor||0).toFixed(2)}</td>
            <td class="num text-red font-mono" style="background:var(--surface-elevated); border:1px solid var(--border);">Q${parseFloat(t.saldo_acreedor||0).toFixed(2)}</td></tr></tbody></table>`;
        document.getElementById('balanceContent').innerHTML = html;
    } catch(e) { console.error(e); }
}

// ===================== ESTADO DE RESULTADOS =====================
async function cargarEstadoResultados() {
    const fd = document.getElementById('erFechaDesde').value || '2000-01-01';
    const fh = document.getElementById('erFechaHasta').value || '2099-12-31';
    try {
        const r = await fetch(`api/contabilidad/libros.php?action=estado_resultados&fecha_desde=${fd}&fecha_hasta=${fh}` + sucursalFilter());
        const d = await r.json();
        if (!d.success) { document.getElementById('resultadosContent').innerHTML = `<p class="text-red">${d.error}</p>`; return; }
        const dt = d.data;
        
        let html = `<div style="max-width:750px; margin:0 auto; display:flex; flex-direction:column; gap:1.25rem;">
            <div style="text-align:center;">
                <h3 style="font-size:1.5rem; font-weight:800; margin-bottom:0.25rem; font-family:'League Spartan';">Estado de Resultados</h3>
                <p style="font-size:0.85rem; color:var(--text-secondary);">Período: <strong>${fd}</strong> al <strong>${fh}</strong></p>
            </div>
            
            <div class="glass-card" style="border-left: 4px solid var(--success); background: rgba(34, 197, 94, 0.03);">
                <div style="font-weight:800; color:var(--success); margin-bottom:0.75rem; font-size:0.85rem; text-transform:uppercase; letter-spacing:0.05em;">INGRESOS</div>`;
        (dt.detalle_ingresos||[]).forEach(i => {
            html += `<div style="display:flex; justify-content:space-between; font-size:0.875rem; margin-bottom:0.4rem; border-bottom:1px solid rgba(255,255,255,0.02); padding-bottom:0.25rem;">
                <span><span class="font-mono text-muted" style="margin-right:0.5rem;">${i.codigo}</span> ${esc(i.nombre)}</span>
                <span class="text-green font-mono">Q${parseFloat(i.monto).toFixed(2)}</span>
            </div>`;
        });
        html += `<div style="display:flex; justify-content:space-between; font-weight:800; border-top:1px solid var(--border); padding-top:0.75rem; margin-top:0.5rem; font-size:1rem;">
            <span>Total Ingresos</span>
            <span class="text-green font-mono">Q${parseFloat(dt.ingresos).toFixed(2)}</span>
        </div></div>
        
        <div class="glass-card" style="border-left: 4px solid var(--warning); background: rgba(245, 158, 11, 0.03);">
            <div style="font-weight:800; color:var(--warning); margin-bottom:0.75rem; font-size:0.85rem; text-transform:uppercase; letter-spacing:0.05em;">COSTOS DE VENTAS</div>`;
        (dt.detalle_gastos||[]).filter(i=>i.codigo.startsWith('5')).forEach(i => {
            html += `<div style="display:flex; justify-content:space-between; font-size:0.875rem; margin-bottom:0.4rem; border-bottom:1px solid rgba(255,255,255,0.02); padding-bottom:0.25rem;">
                <span><span class="font-mono text-muted" style="margin-right:0.5rem;">${i.codigo}</span> ${esc(i.nombre)}</span>
                <span style="color:var(--warning);" class="font-mono">Q${parseFloat(i.monto).toFixed(2)}</span>
            </div>`;
        });
        html += `<div style="display:flex; justify-content:space-between; font-weight:800; border-top:1px solid var(--border); padding-top:0.75rem; margin-top:0.5rem; font-size:1rem;">
            <span>Total Costos</span>
            <span style="color:var(--warning);" class="font-mono">Q${parseFloat(dt.costos).toFixed(2)}</span>
        </div></div>
        
        <div class="glass-card" style="background: rgba(210, 200, 221, 0.04); border-left: 4px solid var(--accent-color); padding: 1.25rem 1.5rem;">
            <div style="display:flex; justify-content:space-between; font-weight:800; font-size:1.1rem; font-family:'League Spartan';">
                <span>UTILIDAD BRUTA</span>
                <span class="font-mono">Q${parseFloat(dt.utilidad_bruta).toFixed(2)}</span>
            </div>
        </div>
        
        <div class="glass-card" style="border-left: 4px solid var(--danger); background: rgba(239, 68, 68, 0.03);">
            <div style="font-weight:800; color:var(--danger); margin-bottom:0.75rem; font-size:0.85rem; text-transform:uppercase; letter-spacing:0.05em;">GASTOS OPERATIVOS</div>`;
        (dt.detalle_gastos||[]).filter(i=>i.codigo.startsWith('6')).forEach(i => {
            html += `<div style="display:flex; justify-content:space-between; font-size:0.875rem; margin-bottom:0.4rem; border-bottom:1px solid rgba(255,255,255,0.02); padding-bottom:0.25rem;">
                <span><span class="font-mono text-muted" style="margin-right:0.5rem;">${i.codigo}</span> ${esc(i.nombre)}</span>
                <span class="text-red font-mono">Q${parseFloat(i.monto).toFixed(2)}</span>
            </div>`;
        });
        html += `<div style="display:flex; justify-content:space-between; font-weight:800; border-top:1px solid var(--border); padding-top:0.75rem; margin-top:0.5rem; font-size:1rem;">
            <span>Total Gastos</span>
            <span class="text-red font-mono">Q${parseFloat(dt.gastos).toFixed(2)}</span>
        </div></div>
        
        <div class="glass-card" style="padding:1.5rem; text-align:center; background:${parseFloat(dt.utilidad_neta)>=0?'rgba(34,197,94,0.08)':'rgba(239,68,68,0.08)'}; border:2px solid ${parseFloat(dt.utilidad_neta)>=0?'rgba(34,197,94,0.2)':'rgba(239,68,68,0.2)'};">
            <div style="font-size:1.4rem; font-weight:800; font-family:'League Spartan'; color:${parseFloat(dt.utilidad_neta)>=0?'var(--success)':'var(--danger)'};">
                ${parseFloat(dt.utilidad_neta)>=0?'UTILIDAD NETA':'PÉRDIDA NETA'}: Q${parseFloat(Math.abs(dt.utilidad_neta)).toFixed(2)}
            </div>
        </div>
        </div>`;
        document.getElementById('resultadosContent').innerHTML = html;
    } catch(e) { console.error(e); }
}

// Init Page
initDates();
const savedTab = sessionStorage.getItem('active_contabilidad_tab') || 'plan_cuentas';
switchTab(savedTab);
</script>
<?php
renderFooter();
?>
