{% extends "base.html" %}
{% block titulo %}Métricas y Reportes · {{ APP_NAME }}{% endblock %}
{% block encabezado %}Análisis y Seguimiento Financiero{% endblock %}
{% block cabeza %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.2.0/chartjs-plugin-datalabels.min.js"></script>
{% endblock %}

{% block contenido %}
<p class="muted" style="margin-bottom:18px">
  {% if usuario.rol == 'Admin' %}Datos de toda la operación.{% else %}Mostrando solo tus documentos.{% endif %}
</p>

<div class="rejilla rejilla--kpi" style="margin-bottom:22px">
  <div class="kpi kpi--ok"><div class="kpi__label">Caja Real (ingresos)</div><div class="kpi__valor">{{ m.caja_real|dinero }}</div></div>
  <div class="kpi kpi--info"><div class="kpi__label">Cuentas por Cobrar</div><div class="kpi__valor">{{ m.cx_cobrar|dinero }}</div></div>
  <div class="kpi kpi--alerta"><div class="kpi__label">Cuentas por Pagar</div><div class="kpi__valor">{{ m.cx_pagar|dinero }}</div></div>
  <div class="kpi {{ 'kpi--neg' if m.balance_operativo < 0 else '' }}"><div class="kpi__label">Balance Operativo</div><div class="kpi__valor">{{ m.balance_operativo|dinero }}</div></div>
</div>

<div class="tarjeta" style="margin-bottom:16px">
  <div class="tarjeta__titulo">Flujo financiero — últimos días registrados</div>
  <div class="tarjeta__cuerpo">
    {% if m.arr_fechas %}
    <div class="grafico"><canvas id="chFlujo"></canvas></div>
    {% else %}
    <p class="muted">Aún no hay pagos (OT Pagadas) ni egresos (OC Pagadas) registrados.</p>
    {% endif %}
  </div>
</div>

<div class="rejilla rejilla--2">
  <div class="tarjeta">
    <div class="tarjeta__titulo">Salud de cartera — efectivo vs. deudas</div>
    <div class="tarjeta__cuerpo">
      {% if (m.caja_real + m.cx_cobrar + m.cx_pagar) > 0 %}
      <div class="grafico grafico--chico"><canvas id="chCartera"></canvas></div>
      {% else %}<p class="muted">Sin datos de cartera.</p>{% endif %}
    </div>
  </div>
  <div class="tarjeta">
    <div class="tarjeta__titulo">Embudo de conversión</div>
    <div class="tarjeta__cuerpo">
      <div class="grafico grafico--chico"><canvas id="chEmbudo"></canvas></div>
    </div>
  </div>
</div>

<script>
const M = {{ m|tojson }};
const CLP = v => "$" + Math.round(v).toLocaleString("es-CL").replace(/,/g,".");
const DL = (typeof ChartDataLabels !== "undefined") ? [ChartDataLabels] : [];
const COMUN = { plugins:{ legend:{ labels:{ font:{ family:"Segoe UI" } } } },
                scales:{ y:{ ticks:{ callback:v=>CLP(v) } } }, maintainAspectRatio:false };

if (M.arr_fechas && M.arr_fechas.length) {
  new Chart(document.getElementById("chFlujo"), {
    type:"line",
    data:{ labels:M.arr_fechas, datasets:[
      { label:"Ingresos", data:M.arr_ingresos, borderColor:"#10B981", backgroundColor:"#10B98122", tension:.3, fill:true, pointRadius:4 },
      { label:"Egresos",  data:M.arr_egresos,  borderColor:"#EF4444", backgroundColor:"#EF444422", tension:.3, fill:true, pointRadius:4 },
    ]},
    options: COMUN
  });
}

const totCartera = M.caja_real + M.cx_cobrar + M.cx_pagar;
if (totCartera > 0) {
  new Chart(document.getElementById("chCartera"), {
    type:"doughnut",
    plugins:DL,
    data:{ labels:["Caja Real","Por Cobrar","Por Pagar"],
           datasets:[{ data:[M.caja_real, M.cx_cobrar, M.cx_pagar],
                       backgroundColor:["#10B981","#3B82F6","#F59E0B"], borderWidth:2, borderColor:"#fff" }] },
    options:{ maintainAspectRatio:false, cutout:"55%", layout:{ padding:6 },
              plugins:{
                legend:{ position:"bottom", labels:{ boxWidth:12, padding:14, font:{ family:"Segoe UI" } } },
                tooltip:{ callbacks:{ label:c=>c.label+": "+CLP(c.raw)+" ("+Math.round(c.raw/totCartera*100)+"%)" } },
                datalabels:{
                  color:"#fff", font:{ weight:"bold", size:12, family:"Segoe UI" },
                  formatter:(v)=>{ const p = Math.round(v/totCartera*100); return p >= 5 ? p+"%" : ""; }
                }
              } }
  });
}

new Chart(document.getElementById("chEmbudo"), {
  type:"bar",
  plugins:DL,
  data:{ labels:["Cotiz. totales","Cotiz. aprobadas","OT generadas"],
         datasets:[{ data:[M.cot_totales, M.cot_aprobadas, M.ot_generadas],
                     backgroundColor:["#94A3B8","#60A5FA","#2563EB"], borderRadius:6, barThickness:34 }] },
  options:{ indexAxis:"y", maintainAspectRatio:false, layout:{ padding:{ right:20 } },
            plugins:{ legend:{ display:false },
                      datalabels:{ anchor:"end", align:"end", color:"#1E293B", font:{ weight:"bold" } } },
            scales:{ x:{ ticks:{ precision:0 }, beginAtZero:true, suggestedMax:(Math.max(M.cot_totales,1))*1.15 } } }
});
</script>
{% endblock %}