{% extends "base.html" %}
{% block title %}Reportes{% endblock %}
{% block page_title %}📈 Reporte para el Dueño{% endblock %}

{% block content %}

<!-- Selector de local y fechas -->
<div class="card">
  <form method="GET" style="display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end;">
    <div class="form-group" style="margin-bottom:0;">
      <label>🏪 Local</label>
      <select name="local" style="width:220px;">
        {% for key, cfg in locales.items() %}
        <option value="{{ key }}" {% if local_sel == key %}selected{% endif %}>{{ cfg.icono }} {{ cfg.nombre }}</option>
        {% endfor %}
      </select>
    </div>
    <div class="form-group" style="margin-bottom:0;">
      <label>Desde</label>
      <input type="date" name="fecha_from" value="{{ fecha_from }}" style="width:155px;">
    </div>
    <div class="form-group" style="margin-bottom:0;">
      <label>Hasta</label>
      <input type="date" name="fecha_to" value="{{ fecha_to }}" style="width:155px;">
    </div>
    <button type="submit" class="btn btn-primary btn-sm">🔍 Generar Reporte</button>
    <a href="{{ url_for('ventas', local=local_sel, fecha_from=fecha_from, fecha_to=fecha_to) }}" class="btn btn-secondary btn-sm">📋 Ver detalle</a>
    <a href="{{ url_for('reporte_pdf', local=local_sel, fecha_from=fecha_from, fecha_to=fecha_to) }}" target="_blank" class="btn btn-secondary btn-sm" style="background:var(--accent-gold); color:#000; border-color:var(--accent-gold);">📄 Generar PDF</a>
  </form>
</div>

<!-- Resumen general -->
<div class="stats-grid" style="grid-template-columns: repeat(3, 1fr);">
  <div class="stat-box" style="border-top:3px solid var(--accent-gold);">
    <div class="stat-label">💰 Total Ventas del Período</div>
    <div class="stat-value" style="color:var(--accent-gold); font-size:32px;">${{ '{:,.0f}'.format(stats.total_monto) }}</div>
    <div class="stat-change">{{ stats.total_ventas }} registros · {{ stats.dias }} días</div>
  </div>
  <div class="stat-box" style="border-top:3px solid var(--accent-green);">
    <div class="stat-label">📅 Promedio por Día</div>
    <div class="stat-value" style="color:var(--accent-green);">${{ '{:,.0f}'.format(stats.promedio_dia) }}</div>
  </div>
  <div class="stat-box" style="border-top:3px solid #3498db;">
    <div class="stat-label">📍 Local</div>
    <div class="stat-value" style="font-size:22px;">{{ locales[local_sel].icono }} {{ locales[local_sel].nombre }}</div>
    <div class="stat-change">{{ fecha_from }} — {{ fecha_to }}</div>
  </div>
</div>

<!-- Desglose por medio de pago -->
<div class="card">
  <div class="card-header">
    <div class="card-title">💳 Desglose por Medio de Pago</div>
    <span class="text-muted" style="font-size:13px;">Total: ${{ '{:,.0f}'.format(stats.total_monto) }}</span>
  </div>

  <div style="display:grid; grid-template-columns: 1fr 1fr; gap:16px; margin-bottom:20px;">
    <!-- Barra visual de cada medio de pago -->
    {% set medios = [
      ('💵 Efectivo',       stats.efectivo,      'var(--accent-green)', 'efectivo'),
      ('💳 Débito',         stats.debito,         '#3498db',             'debito'),
      ('💳 Crédito',        stats.credito,        '#9b59b6',             'credito'),
      ('🏦 Transferencia',  stats.transferencia,  'var(--accent-gold)',  'transferencia'),
      ('🔄 Otros',          stats.otros,          '#7f8c8d',             'otros')
    ] %}
    {% for nombre, monto, color, _ in medios %}
    <div style="background:var(--bg-secondary); border-radius:8px; padding:16px; border-left:4px solid {{ color }};">
      <div style="display:flex; justify-content:space-between; margin-bottom:8px;">
        <span style="font-size:14px; color:var(--text-muted);">{{ nombre }}</span>
        <span style="font-size:13px; color:{{ color }};">{{ '%.0f'|format((monto / stats.total_monto * 100) if stats.total_monto else 0) }}%</span>
      </div>
      <div style="font-size:24px; font-weight:700; font-family:monospace; color:{{ color }};">${{ '{:,.0f}'.format(monto) }}</div>
      <div style="background:var(--bg-tertiary); border-radius:4px; height:6px; margin-top:10px; overflow:hidden;">
        <div style="background:{{ color }}; height:100%; width:{{ '%.1f'|format((monto / stats.total_monto * 100) if stats.total_monto else 0) }}%; border-radius:4px;"></div>
      </div>
    </div>
    {% endfor %}
  </div>

  <!-- Gráfico torta -->
  <div style="max-width:380px; margin:0 auto; padding:10px 0 20px;">
    <canvas id="pagoChart" height="260"></canvas>
  </div>
</div>

<!-- Tabla resumen por turno AM/PM -->
{% if stats.ventas %}
<div class="card">
  <div class="card-header">
    <div class="card-title">🕐 Detalle por Turno</div>
  </div>
  <div class="stats-grid" style="grid-template-columns: 1fr 1fr;">
    <div class="stat-box">
      <div class="stat-label">☀️ Turno AM</div>
      <div class="stat-value" style="color:var(--accent-gold);">${{ '{:,.0f}'.format(stats.ventas | selectattr('turno','equalto','AM') | sum(attribute='total')) }}</div>
      <div class="stat-change">{{ stats.ventas | selectattr('turno','equalto','AM') | list | length }} ventas</div>
    </div>
    <div class="stat-box">
      <div class="stat-label">🌙 Turno PM</div>
      <div class="stat-value" style="color:#3498db;">${{ '{:,.0f}'.format(stats.ventas | selectattr('turno','equalto','PM') | sum(attribute='total')) }}</div>
      <div class="stat-change">{{ stats.ventas | selectattr('turno','equalto','PM') | list | length }} ventas</div>
    </div>
  </div>
</div>
{% endif %}

{% block extra_js %}
<script>
const ctx = document.getElementById('pagoChart').getContext('2d');
new Chart(ctx, {
  type: 'doughnut',
  data: {
    labels: ['Efectivo', 'Débito', 'Crédito', 'Transferencia', 'Otros'],
    datasets: [{
      data: [
        {{ stats.efectivo }},
        {{ stats.debito }},
        {{ stats.credito }},
        {{ stats.transferencia }},
        {{ stats.otros }}
      ],
      backgroundColor: ['#27ae60', '#3498db', '#9b59b6', '#d4a017', '#7f8c8d'],
      borderColor: '#181818',
      borderWidth: 3
    }]
  },
  options: {
    responsive: true,
    plugins: {
      legend: {
        position: 'bottom',
        labels: { color: '#cccccc', font: { family: 'Sora', size: 12 }, padding: 16 }
      },
      tooltip: {
        callbacks: {
          label: ctx => ` $${ctx.parsed.toLocaleString('es-CL', {maximumFractionDigits:0})}`
        }
      }
    }
  }
});
</script>
{% endblock %}
{% endblock %}