{% extends "base.html" %}
{% block title %}Dashboard — Perfumados{% endblock %}
{% block page_title %}📊 Dashboard{% endblock %}

{% block content %}
<div class="flex-between mb-20">
  <div>
    <h3 style="color:var(--accent-gold); margin:0;">Hoy — {{ hoy.strftime('%d/%m/%Y') }}</h3>
    <p class="text-muted" style="font-size:13px; margin-top:4px;">Vista consolidada de todos los locales</p>
  </div>
</div>

<!-- ═══════════════════════════════════════════════════════════════════════════
     RESUMEN DE HOY
     ═══════════════════════════════════════════════════════════════════════════ -->
<div class="stat-box" style="border-top:3px solid var(--accent-gold); margin-bottom:20px; text-align:center;">
  <div class="stat-label">💰 Venta Total del Día — Todos los Locales</div>
  <div class="stat-value" style="color:var(--accent-gold); font-size:36px;">${{ '{:,.0f}'.format(total_consolidado) }}</div>
  <div class="stat-change">{{ total_ventas }} transacciones registradas hoy</div>
</div>

<!-- Agrupado por marca - HOY -->
{% for marca_key, marca_cfg in marcas.items() %}
{% set locales_marca = locales_mostrar | selectattr_marca(marca_key, locales) %}
{% if locales_marca %}

<div class="card" style="border-left:4px solid {{ marca_cfg.color }}; margin-bottom:24px;">
  <div class="card-header" style="background:rgba(0,0,0,0.2); border-bottom:1px solid var(--border-color);">
    <div style="display:flex; align-items:center; gap:12px;">
      <img src="{{ url_for('static', filename='images/logo_' + marca_key + '.png') }}"
           alt="{{ marca_cfg.nombre }}" style="width:48px; height:48px; object-fit:contain; border-radius:50%;"
           onerror="this.style.display='none'">
      <div>
        <div class="card-title" style="color:{{ marca_cfg.color }}; font-size:18px;">
          {{ marca_cfg.icono }} {{ marca_cfg.nombre }}
        </div>
        <div class="card-subtitle">
          Total hoy: <strong>${{ '{:,.0f}'.format(totales_por_marca[marca_key]) }}</strong>
        </div>
      </div>
    </div>
    <a href="{{ url_for('ventas', local=locales_marca[0]) }}" class="btn btn-secondary btn-sm">Ver ventas →</a>
  </div>

  <div class="stats-grid" style="gap:12px; padding:16px; margin-bottom:0;">
    {% for local_key in locales_marca %}
    {% set cfg = locales[local_key] %}
    {% set s = stats_por_local[local_key] %}
    <div class="stat-box" style="border-top:3px solid {{ cfg.color }}; padding:14px;">
      <div class="stat-label" style="font-weight:600;">{{ cfg.nombre }}</div>
      <div class="stat-value" style="font-size:22px; color:{{ cfg.color }};">${{ '{:,.0f}'.format(s.total_monto) }}</div>
      <div style="display:flex; justify-content:space-between; font-size:12px; color:var(--text-muted); margin-top:6px;">
        <span>{{ s.total_ventas }} registros</span>
        <a href="{{ url_for('registro_turno', local=local_key) }}" style="color:var(--accent-gold); text-decoration:none;">+ Registrar</a>
      </div>
      <!-- Mini desglose de pago -->
      <div style="margin-top:10px; font-size:11px; color:var(--text-muted); border-top:1px solid var(--border-color); padding-top:8px;">
        <div style="display:flex; justify-content:space-between;"><span>💵 Efectivo</span><span>${{ '{:,.0f}'.format(s.efectivo) }}</span></div>
        <div style="display:flex; justify-content:space-between;"><span>💳 Débito</span><span>${{ '{:,.0f}'.format(s.debito) }}</span></div>
        <div style="display:flex; justify-content:space-between;"><span>💳 Crédito</span><span>${{ '{:,.0f}'.format(s.credito) }}</span></div>
        <div style="display:flex; justify-content:space-between;"><span>🏦 Transfer.</span><span>${{ '{:,.0f}'.format(s.transferencia) }}</span></div>
      </div>
    </div>
    {% endfor %}
  </div>
</div>

{% endif %}
{% endfor %}

<!-- ═══════════════════════════════════════════════════════════════════════════
     ACUMULADOS SEMANA Y MES
     ═══════════════════════════════════════════════════════════════════════════ -->
<div style="display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:24px;">

  <!-- Semana -->
  <div class="card" style="border-top:3px solid var(--accent-gold);">
    <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;">
      <div>
        <div style="font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--text-muted);">📅 Esta semana</div>
        <div style="font-size:11px; color:var(--text-muted);">{{ inicio_semana.strftime('%d/%m') }} → {{ hoy.strftime('%d/%m') }}</div>
      </div>
      <span class="badge badge-warning">{{ stats_semana.total_ventas }} reg.</span>
    </div>
    <div style="font-size:28px; font-weight:700; font-family:monospace; color:var(--accent-gold); margin-bottom:10px;">
      ${{ '{:,.0f}'.format(stats_semana.total_monto) }}
    </div>
    <!-- Desglose semana -->
    <div style="font-size:12px; color:var(--text-muted);">
      <div style="display:flex; justify-content:space-between; padding:3px 0; border-bottom:1px solid var(--border-color);">
        <span>💵 Efectivo</span><span style="color:var(--text-primary);">${{ '{:,.0f}'.format(stats_semana.efectivo) }}</span>
      </div>
      <div style="display:flex; justify-content:space-between; padding:3px 0; border-bottom:1px solid var(--border-color);">
        <span>💳 Tarjetas</span><span style="color:var(--text-primary);">${{ '{:,.0f}'.format(stats_semana.debito + stats_semana.credito) }}</span>
      </div>
      <div style="display:flex; justify-content:space-between; padding:3px 0;">
        <span>🏦 Transfer.</span><span style="color:var(--text-primary);">${{ '{:,.0f}'.format(stats_semana.transferencia) }}</span>
      </div>
    </div>
  </div>

  <!-- Mes -->
  <div class="card" style="border-top:3px solid #3498db;">
    <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;">
      <div>
        <div style="font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--text-muted);">📆 Este mes</div>
        <div style="font-size:11px; color:var(--text-muted);">{{ inicio_mes.strftime('%d/%m') }} → {{ hoy.strftime('%d/%m') }}</div>
      </div>
      <span class="badge badge-info">{{ stats_mes.total_ventas }} reg.</span>
    </div>
    <div style="font-size:28px; font-weight:700; font-family:monospace; color:#3498db; margin-bottom:10px;">
      ${{ '{:,.0f}'.format(stats_mes.total_monto) }}
    </div>
    <!-- Desglose mes -->
    <div style="font-size:12px; color:var(--text-muted);">
      <div style="display:flex; justify-content:space-between; padding:3px 0; border-bottom:1px solid var(--border-color);">
        <span>💵 Efectivo</span><span style="color:var(--text-primary);">${{ '{:,.0f}'.format(stats_mes.efectivo) }}</span>
      </div>
      <div style="display:flex; justify-content:space-between; padding:3px 0; border-bottom:1px solid var(--border-color);">
        <span>💳 Tarjetas</span><span style="color:var(--text-primary);">${{ '{:,.0f}'.format(stats_mes.debito + stats_mes.credito) }}</span>
      </div>
      <div style="display:flex; justify-content:space-between; padding:3px 0;">
        <span>🏦 Transfer.</span><span style="color:var(--text-primary);">${{ '{:,.0f}'.format(stats_mes.transferencia) }}</span>
      </div>
    </div>
  </div>
</div>

<!-- ═══════════════════════════════════════════════════════════════════════════
     GRÁFICOS
     ═══════════════════════════════════════════════════════════════════════════ -->
<div style="display:grid; grid-template-columns:2fr 1fr; gap:20px; margin-bottom:24px;">

  <!-- Gráfico de barras: ventas por local hoy -->
  <div class="card">
    <div class="card-header" style="margin-bottom:16px;">
      <div class="card-title" style="font-size:15px;">📊 Ventas por local — hoy</div>
    </div>
    <div style="position:relative; height:220px;">
      <canvas id="chartLocales"></canvas>
    </div>
  </div>

  <!-- Gráfico de dona: medios de pago hoy -->
  <div class="card">
    <div class="card-header" style="margin-bottom:16px;">
      <div class="card-title" style="font-size:15px;">💳 Medios de pago</div>
    </div>
    <div style="position:relative; height:180px;">
      <canvas id="chartPago"></canvas>
    </div>
    <!-- Leyenda -->
    <div style="font-size:11px; margin-top:10px;">
      <div style="display:flex; align-items:center; gap:6px; margin:3px 0;">
        <span style="display:inline-block; width:10px; height:10px; border-radius:2px; background:#27ae60;"></span>
        <span>Efectivo ${{ '{:,.0f}'.format(pago_hoy.efectivo) }}</span>
      </div>
      <div style="display:flex; align-items:center; gap:6px; margin:3px 0;">
        <span style="display:inline-block; width:10px; height:10px; border-radius:2px; background:#3498db;"></span>
        <span>Débito ${{ '{:,.0f}'.format(pago_hoy.debito) }}</span>
      </div>
      <div style="display:flex; align-items:center; gap:6px; margin:3px 0;">
        <span style="display:inline-block; width:10px; height:10px; border-radius:2px; background:#9b59b6;"></span>
        <span>Crédito ${{ '{:,.0f}'.format(pago_hoy.credito) }}</span>
      </div>
      <div style="display:flex; align-items:center; gap:6px; margin:3px 0;">
        <span style="display:inline-block; width:10px; height:10px; border-radius:2px; background:#d4a017;"></span>
        <span>Transfer. ${{ '{:,.0f}'.format(pago_hoy.transferencia) }}</span>
      </div>
      {% if pago_hoy.otros > 0 %}
      <div style="display:flex; align-items:center; gap:6px; margin:3px 0;">
        <span style="display:inline-block; width:10px; height:10px; border-radius:2px; background:#7f8c8d;"></span>
        <span>Otros ${{ '{:,.0f}'.format(pago_hoy.otros) }}</span>
      </div>
      {% endif %}
    </div>
  </div>
</div>

{% block extra_js %}
<script>
// ── Paleta oscura para Chart.js ─────────────────────────────────────────────
Chart.defaults.color = '#a0a0a0';
Chart.defaults.borderColor = '#2a2a2a';

// ── Datos desde Jinja ────────────────────────────────────────────────────────
const labelsLocales = {{ chart_labels | tojson }};
const dataLocales   = {{ chart_data_hoy | tojson }};
const coloresLocales = {{ chart_colors | tojson }};

const dataPago = [
  {{ pago_hoy.efectivo }},
  {{ pago_hoy.debito }},
  {{ pago_hoy.credito }},
  {{ pago_hoy.transferencia }},
  {{ pago_hoy.otros }}
];
const labelsPago = ['Efectivo','Débito','Crédito','Transferencia','Otros'];
const coloresPago = ['#27ae60','#3498db','#9b59b6','#d4a017','#7f8c8d'];

// ── Gráfico de barras por local ──────────────────────────────────────────────
const ctxL = document.getElementById('chartLocales').getContext('2d');
new Chart(ctxL, {
  type: 'bar',
  data: {
    labels: labelsLocales,
    datasets: [{
      data: dataLocales,
      backgroundColor: coloresLocales.map(c => c + 'cc'),
      borderColor: coloresLocales,
      borderWidth: 2,
      borderRadius: 6,
    }]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
      legend: { display: false },
      tooltip: {
        callbacks: {
          label: ctx => '$' + ctx.raw.toLocaleString('es-CL', {maximumFractionDigits:0})
        }
      }
    },
    scales: {
      y: {
        ticks: {
          callback: v => '$' + (v/1000).toFixed(0) + 'k'
        },
        grid: { color: '#1e1e1e' }
      },
      x: { grid: { display: false } }
    }
  }
});

// ── Gráfico de dona por medio de pago ───────────────────────────────────────
const ctxP = document.getElementById('chartPago').getContext('2d');
const totalPago = dataPago.reduce((a,b) => a+b, 0);

new Chart(ctxP, {
  type: 'doughnut',
  data: {
    labels: labelsPago,
    datasets: [{
      data: dataPago,
      backgroundColor: coloresPago.map(c => c + 'dd'),
      borderColor: coloresPago,
      borderWidth: 2,
    }]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    cutout: '65%',
    plugins: {
      legend: { display: false },
      tooltip: {
        callbacks: {
          label: ctx => {
            const pct = totalPago > 0 ? ((ctx.raw/totalPago)*100).toFixed(1) : 0;
            return `$${ctx.raw.toLocaleString('es-CL', {maximumFractionDigits:0})} (${pct}%)`;
          }
        }
      }
    }
  }
});
</script>
{% endblock %}
{% endblock %}